It's me

Привет, я Наташа!

Frontend-разработчик / Верстальщик

У меня есть опыт в HTML5, CSS3, Javascript и TypeScript. Верстку я могу делать PixelPerfect-ной, валидной, семантичной и резиновой (она подстроится под любой размер экрана).

Понимаю чужой код, использую БЭМ, могу делать кастомные пагинации, слайдеры-карусели, бургер-меню, собирать проекты Gulp-ом, Webpack-ом и Vite-ом. Могу анимировать в CSS и немного в JS. Анимациям хотела бы уделить отдельное место в своем образовании. Сейчас начала WebGL.

Работала в двух командах, занимающихся криптоивестициями (проектная занятость). В BiomDev – с Preact, SCSS и Tailwind, JavaScript и немного с TypeScript. В Win-win club писала на PHP условную отрисовку страницы и отображение данных.

Учебные проекты были на React+Typescript+Vite(+ESLint).

Учусь быстро, спрашиваю сначала у Гугла, потом у коллег, люблю писать код, который сделает приложение удобнее и красивее.

Навыки

  • HTML5, CSS3 (Flex, Grid)
  • JavaScript, TypeScript
  • React, Redux
  • SCSS, PUG;
  • Gulp, Webpack, Vite
  • GIT
  • БЭМ
  • ООП
  • Figma, Photoshop

    • Языки:

    • Русский (родной)
    • Английский (B1+)
    • Итальянский (A1)

Чуть больше информации

Программированием начала интересоваться еще в школе, но из-за отсутствия уроков информатики и воможности учиться вне школы в университет поступила на "Журналистику". Пыталась учиться самостоятельно, и в 2020 году, поняв, что все-таки знаниям нужна система, пошла на свои первые курсы в университете.

Играю в спортивное "Что? где? Когда?", сортирую мусор, люблю когда PixelPerfect сходится с макетом с первого раза, вяжу и по вечерам глажу котика.

Опыт

  • win-win club
    Win-win club

    Раздел сайта для работы с криптовалютами

    • Динамический рендеринг (на PHP, тут и познакомилась);
    • Раскрывающиеся списки на CSS
    • Бургер-меню для маленьких экранов
    • Валидная, семантичная, адаптивная (резиновая) верстка.
    Показать сайт
  • tokenopolis website
    Tokenopolis

    Страницы объекта (компонент) и истории операций

    • Preact + Typescript;
    • React Hooks;
    • SCSS + Tailwind;
    • Пагинация на странице с историей операций
    • Flex, градиентные фоны.
    Показать сайт
  • virtual keyboard
    Виртуальная клавиатура

    Виртуальная клавиатура

    • Динамический рендеринг (ctrl+alt меняет язык, shift добавляет спецсимволы);
    • События DOM;
    • Сихронизирована с реальной клавиатурой
    • Анимационные эффекты написаны на CSS.
    Показать github Показать деплой
  • CSS-trainer
    Сапер

    Сапер

    • Динамический рендеринг;
    • События DOM;
    • Eslint;
    • Темная/Светлая темы;
    • Валидная, семантичная, адаптивная (резиновая) верстка.
    Показать github Показать деплой
  • CSS-trainer
    CSS-trainer

    Тренажер по CSS-селекторам

    • TypeScript;
    • Модули;
    • Webpack;
    • ООП;
    • Валидная, семантичная, адаптивная (резиновая) верстка.
    Показать github Показать деплой
  • Лэндинг for shelter
    Shelter

    Лэндинг приюта для животных

    • Модальное окно с карточкой животного по клику;
    • Бесконечный слайдер;
    • Пагинация;
    • Бургер-меню для мобильных экранов;
    • Валидная, семантичная, резиновая верстка.
    Показать github Показать деплой
  • Лэндинг for gardening car
    Plants

    Учебный проект

    • Бургер-меню для мобильных экранов;
    • Кастомный Select в секции контактов;
    • Размытие неактуальных карточек услуг в зависимости от выбранного фильтра;
    • Аккордеон в секции "Цены";
    • Валидная, семантичная, адаптивная (резиновая) верстка.
    Показать github Показать деплой
  • helper to find github repo
    Поисковик по репозитория Github

    Поисковик, ищущий в репозиторих Github заданную подстроку

    • GitHub REST API;
    • Сообщение об ошибке в случае некорректного пользовательского ввода
    • Валидация пользовательского ввода
    • Поиск настроен на клик кнопки мышкой и на нажатие "Enter".
    Показать github Показать деплой
  • Лэндинг for fireplace for home
    Elite fire

    Тестовое задание (без js)

    • Сборщик gulp;
    • svg-sprite;
    • Кастомные input-range, radio-кнопки, чекбоксы;
    • Множественные фоны;
    • Кастомные шрифты;
    • Flex, SCSS.
    • Валидная, семантичная, адаптивная (резиновая) верстка;
    Показать github Показать деплой
  • comments-form
    Comments-form

    Форма для ввода и редактирования комментариев

    • Динамический рендеринг;
    • Работа с датами;
    • События DOM
    • Публикация по клику мышкой на кнопку или по нажатию "Enter;
    • Возможность ставить "лайки".
    Показать github Показать деплой
  • Лэндинг for bike-shop
    Магазин велосипедов

    Тестовое задание

    • Изменеие табов по клику;
    • Сборка: gulp + webpack;
    • flex, grid, позиционирование;
    • SCSS
    • Валидная, семантичная, адаптивная (резиновая) верстка;
    • Валидация и возможность добавить более одного инпута.
    Показать github
  • SPA for Cinemaddict
    Cinemaddict

    SPA с коллекцией фильмов (учебный проект)

    • REST API;
    • Прогрессивная загрузка (по частям);
    • "Shake effect" для интерактивных компонентов если сервер не отвечает;
    • Возможность добавлять и удалять комментарии;
    • Возможность фильтровать, сортировать фильмы и создавать собственный рейтинг;
    • Правки кода, который был выдан академией.
    Показать github Показать деплой
  • page with tour schedule
    Расписание экскурсий

    Тестовое задание

    • Валидная, семантичная, адаптивная (резиновая) верстка;
    • Mobile-first верстка;
    • SCSS;
    • Если количество временных слотов не помещается в строку, "лишние" прячутся за кнопку "more".
    Показать github Показать деплой
  • my portfolio
    Portfolio

    Мое портфолио (вот это)

    • Динамичное создание элементов с JS;
    • Анимация страницы на JS;
    • Анимация фонов на CSS;
    • Модальное окно;
    • Валидная, семантичная, адаптивная (резиновая) верстка.
    Показать github Показать деплой
  • Лэндинг for Design Studio
    Лэндинг доя студии дизайна

    Пет-проект. Макет в Figma из открытого источника.

    • Валидная, семантичная, адаптивная (резиновая) верстка;
    • Анимация по скроллу (библиотека);
    • Бесконечный слайдер в секции "Отзывы";
    • Обычный слайдер в секции "Примеры";
    • Бургер-меню для маленьких экранов.
    Показать github Показать деплой
  • Лэндинг for dietary supplement
    Level Up

    Тестовое задание

    • Валидная, семантичная, адаптивная (резиновая) верстка;
    • flex, grid;
    • Анимации на CSS (@keyframes);
    • Видео-фон, градиенты;
    • Бургер-меню для маленьких экранов;
    • Таймер обратного отсчета (js);
    • Бесконечный слайдер.
    Показать github Показать деплой
  • Лэндинг for watch store
    Магазин наручных часов

    Пет-проект

    • flex, позиционирование;
    • Модальное окно;
    • Бесконечный слайдер
    • Только десктоп-версия.
    Показать github Показать деплой
  • Лэндинг for social network
    Jane Dow

    Пет-проект.

    • Адаптивнаяверстка на grid;
    • Кастомный чекбокс;
    • Слайдер на CSS;
    • Валидация формы;
    • Интерактивные элементы при заполнении.
    Показать github
  • Лэндинг for beauty salon
    Салон красоты

    Учебный проект

    • Верстка на bootstrap, flex;
    • Переключающиеся табы с услугами;
    • Модальное окно для записи;
    • Карусель с фотографиями (@fancybox, JS);
    • REST API.
    Показать github Показать деплой
  • CRM for beauty salon
    CRM Для салона красоты

    Учебный проект

    • React
    • Взаимодействие с сервером;
    • CRUD-операции;
    • Выбор услуги даты и мастера
    • Форма для добавления, удаления и редактирования заказов.
    Показать github

    • Образование