Анастасия
Лемешко
Обо мне
За несколько лет работы экономистом автоматизировала значительную часть своих обязанностей. Стремясь к профессиональному развитию сделала осознанный выбор стать Frontend-разработчиком.
Навыки
- JavaScript
- HTML
- CSS
- SCSS
- BEM
- Git
- Responsive Web Design
- Web Accessibility
- Figma
Примеры работ
Кликните на карточку, чтобы увидеть информацию о проекте
Личный проект «Internship»
Самостоятельно выполненный проект, написанный с использованием HTML, CSS и JavaScript в соответствии с техническим заданием, критериями качества HTML Academy, стайлгайдом, принципом Pixel Perfect.
Третий проект, выполненный в рамках «Aкселератора» HTML Academy - финального самостоятельного этапа производства.
Обзор выполненных задач
Написание HTML-разметки
Создание семантически правильной и структурированной HTML-разметки, обеспечивающей доступность и SEO-оптимизацию.
Адаптивная верстка на SCSS
- разработаны адаптивные стили с использованием SCSS, обеспечивающих корректное отображение сайта на различных устройствах (desktop, tablet, mobile)
- реализована резиновая верстка, обеспечивающая масштабирование контента между брекпоинтами для гибкого отображения
- использован подход Mobile First, гарантирующий оптимальное отображение на мобильных устройствах
Реализация JavaScript
функциональностиДобавление интерактивных элементов и динамической логики с использованием JavaScript. Реализованы следующие функции:
- открытие/закрытие меню в шапке сайта
- слайдер с пагинацией в блоке «Hero»
- открытие/закрытие модального окна в блоке «О проекте Стажировка»
- слайдер с навигацией и скроллбаром в блоке «Программы»
- слайдер с навигацией и пагинацией в блоке «Новости и программы» (с использованием грид-модуля на планшетной и мобильной версиях)
- табы в блоке «Новости и программы»
- фильтрация новостей в слайдере в блоке «Новости и программы»
- аккордеон в блоке «Вопросы и ответы»
- слайдер с навигацией и скроллбаром в блоке «Отзывы»
- валидация формы в блоке «Напишите нам» и в модальном окне
- кастомизация браузерных сообщений об ошибках при вводе невалидных данных и их вывод после попытки отправки формы (в соответствии с ТЗ)
- маска ввода у поля с номером телефона в блоке «Напишите нам»
- кастомный селект без использования библиотек в блоке «Напишите нам» и в модальном окне
- улучшение производительности за счет ограничения частоты вызовов функций, реализуемое с помощью функции debounce
- корректный порядок фокуса при изменении сетки на разных версиях в футере
Библиотеки
- Swiper.js
Технологии и инструменты
- HTML5
- SCSS
- JavaScript
- BEM
- SVG-спрайты
- оптимизация графики
- резиновая верстка
- Git
- VS Code
- Figma
Личный проект «Lifetour»
Самостоятельно выполненный проект, написанный с использованием HTML, CSS и JavaScript в соответствии с техническим заданием, критериями качества HTML Academy, стайлгайдом, принципом Pixel Perfect.
Второй проект, выполненный в рамках «Aкселератора» HTML Academy - финального самостоятельного этапа производства.
Обзор выполненных задач
Написание HTML-разметки
Создание семантически правильной и структурированной HTML-разметки, обеспечивающей доступность и SEO-оптимизацию.
Адаптивная верстка на SCSS
- разработаны адаптивные стили с использованием SCSS, обеспечивающих корректное отображение сайта на различных устройствах (desktop, tablet, mobile)
- реализована резиновая верстка, обеспечивающая масштабирование контента между брекпоинтами для гибкого отображения
- использован подход Mobile First, гарантирующий оптимальное отображение на мобильных устройствах
Реализация JavaScript
функциональностиДобавление интерактивных элементов и динамической логики с использованием JavaScript. Реализованы следующие функции:
- открытие/закрытие мобильного меню в шапке в мобильной и планшетной версиях
- слайдер с пагинацией в блоке «Hero»
- слайдер с навигацией в блоке «Ближайшие туры»
- слайдер с навигацией в блоке «Обучение»
- слайдер с навигацией в блоке «Отзывы»
- слайдер с навигацией в блоке «Преимущетсва», подключаемый на десктопной версии
- слайдер с навигацией в блоке «Фотогалерея», подключаемый на мобильной и планшетной версиях
- валидация формы в блоке «Остались вопросы?» с допуском локальных доменов (.рф)
- кастомизация браузерных сообщений об ошибках при вводе невалидных данных и их вывод после попытки отправки формы (в соответствии с ТЗ)
- маска ввода у поля с номером телефона в блоке «Остались вопросы?»
- улучшение производительности за счет ограничения частоты вызовов функций, реализуемое с помощью функции debounce
- адаптивные тени у заголовков с соблюдением переносов
Библиотеки
- Swiper.js
Технологии и инструменты
- HTML5
- SCSS
- JavaScript
- BEM
- SVG-спрайты
- оптимизация графики
- резиновая верстка
- Git
- VS Code
- Figma
Личный проект «Supergym»
Самостоятельно выполненный проект, написанный с использованием HTML, CSS и JavaScript в соответствии с техническим заданием, критериями качества HTML Academy, стайлгайдом, принципом Pixel Perfect.
Первый проект, выполненный в рамках «Aкселератора» HTML Academy - финального самостоятельного этапа производства.
Обзор выполненных задач
Написание HTML-разметки
Создание семантически правильной и структурированной HTML-разметки, обеспечивающей доступность и SEO-оптимизацию.
Адаптивная верстка на SCSS
- разработаны адаптивные стили с использованием SCSS, обеспечивающих корректное отображение сайта на различных устройствах (desktop, tablet, mobile)
- реализована резиновая верстка, обеспечивающая масштабирование контента между брекпоинтами для гибкого отображения
- использован подход Mobile First, гарантирующий оптимальное отображение на мобильных устройствах
Реализация JavaScript
функциональностиДобавление интерактивных элементов и динамической логики с использованием JavaScript. Реализованы следующие функции:
- ленивая загрузка iframe с видео при взаимодействии с кнопкой play в блоке «Тренажерный зал»
- табы, меняющие стоимость абонементов в зависимости от срока в блоке «Абонементы»
- слайдер с навигацией в блоке «Жюри»
- слайдер с навигацией в блоке «Отзывы»
- табы в блоке «Вопросы и ответы»
- аккордеон в блоке «Вопросы и ответы»
- валидация формы в блоке «Бесплатное занятие»
- маска ввода у поля с номером телефона в блоке «Бесплатное занятие»
Библиотеки
- Swiper.js
Технологии и инструменты
- HTML5
- SCSS
- JavaScript
- BEM
- SVG-спрайты
- оптимизация графики
- резиновая верстка
- Gulp
- Git
- VS Code
- Figma
Личный проект «Kekstagram»
Учебный проект, выполненный в рамках первого курса JavaScript в HTML Academy.
Кекстаграм — сервис просмотра изображений. Пользователям предоставлена возможность загружать и редактировать свои фотографии или просматривать фотографии, загруженные другими пользователями. Цель проекта - реализовать функциональность на JavaScript в соответствии с техническим заданием, критериями качества HTML Academy.
Обзор выполненных задач
Реализованы следующие функции и возможности:
Фильтрация изображений от других пользователей
Просмотр загруженных изображений
отрисовка модального окна
отображение дополнительных комментариев
Работа с сервером
получение данных с сервера
отправка данных на сервер
отображение сообщений при ошибке отправки или загрузки, при успешкой отправке
Загрузка нового изображения на сайт
Валидация хэштегов и комментариев с использованием библиотеки PristineJS
Редактирование изображений
редактирование масштаба
наложение эффекта на изображение
регулировка глубины эффекта с использованием библиотеки noUiSlider
Библиотеки
- PristineJS
- noUiSlider
Технологии и инструменты
- JavaScript
- Взаимодействие с API с использованием fetch для загрузки и отправки данных
- Инструменты для обработки данных: массивы и объекты, методы работы с ними (slice, map, sort, деструктуризация и др.)
- Git
- VS Code
Личный проект «Drink2go»
Самостоятельно выполненный проект, написанный с использованием HTML, CSS и JavaScript в соответствии с техническим заданием, критериями качества HTML Academy, стайлгайдом, принципом Pixel Perfect.
Проект, выполненный в рамках «Грейдирования» HTML Academy. На выполнение проекта дается одна неделя, цель - оценить свои знания и навыки.
Обзор выполненных задач
Написание HTML-разметки
Создание семантически правильной и структурированной HTML-разметки, обеспечивающей доступность и SEO-оптимизацию.
Адаптивная верстка на SCSS
- разработаны адаптивные стили с использованием SCSS, обеспечивающих корректное отображение сайта на различных устройствах (desktop, tablet, mobile)
- реализована резиновая верстка, обеспечивающая масштабирование контента между брекпоинтами для гибкого отображения
- использован подход Mobile First, гарантирующий оптимальное отображение на мобильных устройствах
Реализация JavaScript
функциональностиДобавление интерактивных элементов и динамической логики с использованием JavaScript. Реализованы следующие функции:
- открытие/закрытие мобильного меню в шапке в мобильной версии
- слайдер с навигацией и пагинацией в блоке «Hero» (без использования библиотек)
- рейндж-слайдер для выбора цены в каталоге с использованием библиотеки noUiSlider
Библиотеки
- noUiSlider
Технологии и инструменты
- HTML5
- SCSS
- JavaScript
- BEM
- SVG-спрайты
- оптимизация графики
- резиновая верстка
- Gulp
- Git
- VS Code
- Figma
Личный проект «Cat Energy»
Учебный проект, выполненный в рамках курса «Адаптивная вёрстка и автоматизация» HTML Academy.
Адаптивный трёхстраничный сайт, написанный с использованием HTML, CSS и JavaScript в соответствии с техническим заданием, критериями качества HTML Academy, стайлгайдом, принципом Pixel Perfect.
Обзор выполненных задач
Написание HTML-разметки
Создание семантически правильной и структурированной HTML-разметки, обеспечивающей доступность и SEO-оптимизацию. Страницы: главная, каталог продукции, подбор программы. Навигация из шапки и блока hero.
Адаптивная верстка на SCSS
- разработаны адаптивные стили с использованием SCSS, обеспечивающих корректное отображение сайта на различных устройствах (desktop, tablet, mobile)
- реализована резиновая верстка, обеспечивающая масштабирование контента между брекпоинтами для гибкого отображения
- использован подход Mobile First, гарантирующий оптимальное отображение на мобильных устройствах
Реализация JavaScript
функциональностиДобавление интерактивных элементов и динамической логики с использованием JavaScript. Реализованы следующие функции:
- открытие/закрытие мобильного меню в шапке в мобильной версии
- изменение вида кота в блоке «Живой пример»
Библиотеки
- Swiper.js
Технологии и инструменты
- HTML5
- SCSS
- JavaScript
- BEM
- SVG-спрайты
- оптимизация графики
- резиновая верстка
- Gulp
- Git
- VS Code
- Figma
