Frontend-разработчик / Frontend-developer (junior)
Контакты
Я - начинающий frontend-разработчик. Прошла курс от Hexlet. Изучила HTML, CSS, JavaScript, React, Redux Toolkit, ESLint, Git.
Реализовала pet-проекты:
— создала 5 математических игр, запускаемых через терминал;
— реализовала консольную утилиту, которая сравнивает данные YAML и JSON форматов и выводит разницу между ними;
— разработала сервис для агрегации RSS-потоков на чистом JS с применением шаблона проектирования MVC;
— разработала мессенджер на React с авторизацией, чатами и WebSocket.
— создала интерактивное музыкальное веб-приложение: https://grifono.ru/ .
Ищу первую команду и хочу развиваться во frontend-разработке.
Умею самостоятельно искать решения, соблюдать сроки, ответственно подхожу к работе.
Telegram: @ekatandr002
GitHub: https://github.com/SergeevaEA
HTML, CSS, JavaScript, React
Реализовала pet-проекты:
1) 5 математических игр, запускаемых через терминал
GitHub: https://github.com/SergeevaEA/frontend-project-44
Стек: JavaScript, ESLint
Выполненные задачи:
– реализовала игру «Проверка на четность». Суть игры: пользователю показывается случайное число. И ему нужно ответить yes, если число четное, или no – если нечетное.
– реализовала игру «Калькулятор». Суть игры: пользователю показывается случайное математическое выражение, например 35 + 16, которое нужно вычислить и записать правильный ответ
– реализовала игру «наибольший общий делитель». Суть игры: пользователю показывается два случайных числа, например, 25 50. Пользователь должен вычислить и ввести наибольший общий делитель этих чисел.
– реализовала игру «Арифметическая прогрессия». Суть игры: игроку показывается ряд чисел, образующий арифметическую прогрессию, какое-то число пропущено. Игрок должен определить это число.
– реализовала игру «Простое ли число?». Суть игры: пользователь должен ввести «yes», если число простое и «no», если нет.
2) Консольная утилита, которая сравнивает данные YAML и JSON форматов и выводит разницу между ними
GitHub: https://github.com/SergeevaEA/frontend-project-46
Стек: JavaScript, ESLint, Jest, lodash, js-yaml, commander
Выполненные задачи:
– реализовала вывод справочной информации о программе
– реализовала поиск различий между данными из двух файлов (плоские и вложенные структуры данных, поддерживаются форматы yaml, json)
– реализовала несколько форматов вывода результатов сравнения
3) Сервис для агрегации RSS-потоков на чистом JS с применением шаблона проектирования MVC
GitHub: https://github.com/SergeevaEA/frontend-project-11
Стек: JavaScript, DOM API, axios, Vite, Webpack, ESLint, Bootstrap, yup, on-change, lodash, i18next, Vercel
Выполненные задачи:
– создала страницу с формой для добавления RSS-потока
– реализовала валидацию введенного адреса с помощью yup
– реализовала вывод всех текстов интерфейса через библиотеку i18next
– реализовала скачивание потока, парсинг данных потока и добавление нужных данных в соответствующие списки, обработку ошибок
– реализовала код, который раз в 5 секунд проверяет каждый RSS-поток, и если он содержит новые посты, добавляет их в список
– реализовала возможность предпросмотра каждого поста по клику на кнопку рядом с названием поста (в модальном окне появляются заголовок и описание поста)
4) Мессенджер на React с авторизацией, чатами и WebSocket
GitHub: https://github.com/SergeevaEA/frontend-project-12
Стек: React, Redux Toolkit, React Redux, React Router, axios, Socket.IO Client, React Bootstrap, Formik, yup, REST API, WebSocket, React Toastify, React i18next, Leo Profanity, Pluralize-ru, Vite, ESLint
Выполненные задачи:
– реализовала авторизацию и регистрацию пользователя
– реализовала вывод каналов и сообщений
– реализовала создание, отправку и получение сообщений в чате
– реализовала переключение по каналам
– реализовала добавление нового канала, валидацию имени канала, перемещение создателя канала в добавленный канал
– реализовала выпадающее меню с кнопками управления каналом. Удаление канала (С подтверждением. Пользователи, находящиеся в удаляемом канале, перемещаются в дефолтный канал.). Переименование канала (внутри модального окна)
– реализовала всплывающие уведомления при возникновении ошибок в загрузке данных или отсутствии сети, при успешном создании, переименовывании и удалении канала
– реализовала вывод всех текстов интерфейса через библиотеку react-i18next
– реализовала фильтрацию нецензурных слов в чате при помощи библиотеки leo-profanity
5) Интерактивный музыкальный тренажер "Грифоно"
Ссылка на сайт: https://grifono.ru/
GitHub: https://github.com/SergeevaEA/MusicalTrainer
Стек: HTML, CSS, JavaScript
Суть проекта: Интерактивный музыкальный тренажер "Грифоно" был создан с целью помочь обучающимся игре на шестиструнной гитаре научиться находить определенные ноты на грифе гитары и легче понять технику построения аккордов на этом инструменте.
Ключевые функции и реализация:
– виртуальная клавиатура фортепиано
– виртуальный гриф гитары
– при выборе ноты на клавиатуре фортепиано можно увидеть ее расположение на грифе гитара и наоборот, при выборе ноты на грифе гитары можно увидеть ее расположение на клавиатуре фортепиано
– функция «обозначить октавы» на обоих инструментах
– функция «обозначить названия нот» на обоих инструментах
– функции «отметить ноты» и «сбросить отмеченные ноты» на обоих инструментах
– страница со справочной информацией о нотах и о построении аккордов
– реализована таблица для построения аккордов, где по выбранной основной ноте и типу аккорда показывается логика построения выбранного аккорда. Одновременно построенный аккорд отображается на клавиатуре фортепиано и на грифе гитары. Также на виртуальном грифе гитары есть возможность просмотреть несколько возможных позиций построенного аккорда.
Опыт
Реализовала pet-проекты:
1) 5 математических игр, запускаемых через терминал
GitHub: https://github.com/SergeevaEA/frontend-project-44
Стек: JavaScript, ESLint
Выполненные задачи:
– реализовала игру «Проверка на четность». Суть игры: пользователю показывается случайное число. И ему нужно ответить yes, если число четное, или no – если нечетное.
– реализовала игру «Калькулятор». Суть игры: пользователю показывается случайное математическое выражение, например 35 + 16, которое нужно вычислить и записать правильный ответ
– реализовала игру «Наибольший общий делитель». Суть игры: пользователю показывается два случайных числа, например, 25 50. Пользователь должен вычислить и ввести наибольший общий делитель этих чисел.
– реализовала игру «Арифметическая прогрессия». Суть игры: игроку показывается ряд чисел, образующий арифметическую прогрессию, какое-то число пропущено. Игрок должен определить это число.
– реализовала игру «Простое ли число?». Суть игры: пользователь должен ввести «yes», если число простое и «no», если нет.
2) Консольная утилита, которая сравнивает данные YAML и JSON форматов и выводит разницу между ними
GitHub: https://github.com/SergeevaEA/frontend-project-46
Стек: JavaScript, ESLint, Jest, lodash, js-yaml, commander
Выполненные задачи:
– реализовала вывод справочной информации о программе
– реализовала поиск различий между данными из двух файлов (плоские и вложенные структуры данных, поддерживаются форматы yaml, json)
– реализовала несколько форматов вывода результатов сравнения
3) Сервис для агрегации RSS-потоков на чистом JS с применением шаблона проектирования MVC
GitHub: https://github.com/SergeevaEA/frontend-project-11
Стек: JavaScript, DOM API, axios, Vite, Webpack, ESLint, Bootstrap, yup, on-change, lodash, i18next, Vercel
Выполненные задачи:
– создала страницу с формой для добавления RSS-потока
– реализовала валидацию введенного адреса с помощью yup
– реализовала вывод всех текстов интерфейса через библиотеку i18next
– реализовала скачивание потока, парсинг данных потока и добавление нужных данных в соответствующие списки, обработку ошибок
– реализовала код, который раз в 5 секунд проверяет каждый RSS-поток, и если он содержит новые посты, добавляет их в список
– реализовала возможность предпросмотра каждого поста по клику на кнопку рядом с названием поста (в модальном окне появляются заголовок и описание поста)
4) Мессенджер на React с авторизацией, чатами и WebSocket
GitHub: https://github.com/SergeevaEA/frontend-project-12
Стек: React, Redux Toolkit, React Redux, React Router, axios, Socket.IO Client, React Bootstrap, Formik, yup, REST API, WebSocket, React Toastify, React i18next, Leo Profanity, Pluralize-ru, Vite, ESLint
Выполненные задачи:
– реализовала авторизацию и регистрацию пользователя
– реализовала вывод каналов и сообщений
– реализовала создание, отправку и получение сообщений в чате
– реализовала переключение по каналам
– реализовала добавление нового канала, валидацию имени канала, перемещение создателя канала в добавленный канал
– реализовала выпадающее меню с кнопками управления каналом. Удаление канала (С подтверждением. Пользователи, находящиеся в удаляемом канале, перемещаются в дефолтный канал.). Переименование канала (внутри модального окна)
– реализовала всплывающие уведомления при возникновении ошибок в загрузке данных или отсутствии сети, при успешном создании, переименовывании и удалении канала
– реализовала вывод всех текстов интерфейса через библиотеку react-i18next
– реализовала фильтрацию нецензурных слов в чате при помощи библиотеки leo-profanity
Суть проекта: Интерактивный музыкальный тренажер "Грифоно" был создан с целью помочь обучающимся игре на шестиструнной гитаре научиться находить определенные ноты на грифе гитары и легче понять технику построения аккордов на этом инструменте.
Ключевые функции и реализация:
– виртуальная клавиатура фортепиано
– виртуальный гриф гитары
– при выборе ноты на клавиатуре фортепиано можно увидеть ее расположение на грифе гитара и наоборот, при выборе ноты на грифе гитары можно увидеть ее расположение на клавиатуре фортепиано
– функция «обозначить октавы» на обоих инструментах
– функция «обозначить названия нот» на обоих инструментах
– функции «отметить ноты» и «сбросить отмеченные ноты» на обоих инструментах
– страница со справочной информацией о нотах и о построении аккордов
– реализована таблица для построения аккордов, где по выбранной основной ноте и типу аккорда показывается логика построения выбранного аккорда. Одновременно построенный аккорд отображается на клавиатуре фортепиано и на грифе гитары. Также на виртуальном грифе гитары есть возможность просмотреть несколько возможных позиций построенного аккорда.
Ссылка на сайт: https://grifono.ru/
GitHub: https://github.com/SergeevaEA/MusicalTrainer
Стек: HTML, CSS, JavaScript
Образование
Начальные знания английского языка
Проживаю в городе Москва