Катерина Евтухова
Junior фронтенд-разработчик, Ереван
Будучи визуалом с логическим мышлением, я нашла во фронтенде идеальное место для реализации себя как специалиста. Стремлюсь создавать удобные и доступные интерфейсы, используя современные технологии. С интересом слежу за актуальными тенденциями в сфере веб-разработки.
Навыки
Технологии
Пишу валидную семантическую разметку, знаю базовые правила доступного интерфейса, умею валидировать формы
Уверенно строю flex и grid сетки, оптимизирую работу с помощью кастомных свойств и переменных, умею строить адаптивные резиновые интерфейсы
Уверенно пишу на ванильном JS в функциональном стиле, понимаю ООП стиль, следую принципу DRY, умею работать с асинхронными операциями (Fetch API) и обрабатывать ошибки
Умею работать с системой контроля версий GIT, знаю основные команды по работе с репозиторием, как работать в ветках и форках
Умею делить интерфейс на переиспользуемые и независимые компоненты.
Имею опыт работы на проектах с настроенной автоматизацией (gulp, webpack) и использованием npm-пакетов
Понимаю принципы работы различных алгоритмов, знакома с понятием “О” большое, думаю об алгоритмической сложности при написании кода
Изученные методические материалы с отработкой на практических кейсах
Вёрстка текстового содержимого страниц
Освоила навык оформления текстового контента с учетом семантики. Поработала со сложными элементами: формулы, сноски, нумерация списка с прерыванием, денежные знаки, разбиение на колонки, таблицы, буквицы и красные строки, сложные обтекания текстом внешнего элемента и заключение текста в непрямоугольный шейп, скрытие не поместившегося текста и реализация кнопки “читать далее”.
Вёрстка навигационных элементов интерфейса
Укрепила понимание верстки и стилизации таких элементов навигации, как линейное и многоуровневое меню, выпадающее подменю, хлебные крошки, пагинация. Узнала тонкости работы со списками и ссылками.
Вёрстка карточных элементов интерфейса
Закрепила навык оформления каталога товаров и его карточек с учетом доступности и гибкой сетки.
Учебные проекты
Вёрстка многослойных элементов интерфейса
Сформировала четкое понимание работы разных видов позиционирования, научилась создавать многослойность через grid-сетку. Отработала навык стилизации слайдеров, поп-апов, модальных окон, тултипов, липких и выпадающих элементов.
Учебные проекты
А также прошла 79% тренажеров от HTML Academy
Подтверждение
Пройденные курсы с групповым наставником и дипломным проектом
JavaScript. Профессиональная разработка веб-интерфейсов
-
Изучила синтаксис языка, базовые конструкции, взаимодействие с DOM, асинхронные запросы к серверу и встраивание сторонних библиотек. И все это с соблюдением принципов DRY и KISS.
JavaScript. Архитектура клиентских приложений
-
Погрузилась в углубленное изучение языка в ООП стиле. Научилась разделять интерфейс на компоненты и построила SPA в паттерне MVP. Освоила взаимодействие с сервером по протоколу HTTP, реализуя методы CRUD с помощью REST API.
HTML и CSS. Адаптивная вёрстка и автоматизация
-
Закрепила понимание методологии БЭМ. Освоила адаптивную верстку с использованием SASS. Научилась грамотной работе с графикой и шрифтами. Использовала инструменты автоматизации для достижения хорошей производительности сайта.
Проекты
-
Portfolio
Персональный проект
Страница-портфолио, где я собрала и оформила главные свои навыки и наиболее интересные проекты. Для этого проекта я самостоятельно сформировала техзадание и создала макет в Figma для 3-х состояний сайта на экранах разного размера. В качестве критериев качества кода я придерживаюсь кодгайда школы HTML Academy. В некоторых случаях я сознательно отступила от части правил или изменила их.
Наиболее интересные и сложные задачи проекта:
- настройка и переключение цветовых тем: я взяла за основу реализацию Вадима Макеева, которую он разбирал в видео-роликах, но адаптировала под свой дизайн, слегка изменив логику скрипта;
- использование относительных единиц измерения: все размеры шрифтов, а также расстояния между элементами привязаны к базовому размеру шрифта;
- работа с новыми для меня элементами: изучила нюансы работы тегов details и dialog.
-
Cat Energy
Дипломный проект
Главной задачей этого проекта было реализовать полностью адаптивный интерфейс с соблюдением принципа pixel perfect. В качестве исходных данных были даны макеты всех страниц для 3-х размеров экрана и стайлгайд для фокусных состояний. Сайт имеет три страницы: лендинг, каталог товаров и форму подбора заказа. Весь контент устойчив к замене картинок, а также к переполнению текстом и дополнительными элементами. Наиболее интересными для меня были задачи реализации мобильного меню (которое должно быть в потоке в случае отсутствия JS и открываться по клику в случае его наличия) и стилизации фона у блока hero (кот на большом экране увеличивается пропорционально размеру окна, но до определенного размера, чтобы не показывать обрезанный край картинки).
Проект сдан на 100 баллов с первой попытки.
-
Grafit Academy
Персональный проект
Большой самостоятельный проект, на котором я отрабатывала полученные знания. Состоит из двух страниц - лендинг и каталог товаров. Наиболее интересные и сложные фичи проекта:
- перестроение сеток в каталоге товаров,
- переиспользуемый слайдер (специально не подключала его библиотекой, т.к. хотела разобраться с нативной реализацией),
- динамический рендеринг (товары и работы художников),
- фильтрация и сортировка товаров,
- подключение библиотеки noUiSlider,
- работа с Local Storage (дисклеймер демонстрируется только при первом просмотре сайта, запоминается информация об избранных товарах и товарах в корзине, а также информация об авторизации),
- синхронизация информации о паке в каталоге, модалке и корзине (в т.ч. интерактивных элементов и их состояний).
Отдельно отмечу, что уже в финале работы с проектом я в качестве эксперимента добавила препроцессор Sass и автоматизированную сборку. Благодаря этому я получила опыт работы с легаси-кодом, ведь потребовалось адаптировать структуру проекта и часть кода.
-
Online smartphones store
Тренировка навыка
Небольшая тренировка реализации каталога товаров с карточками в двух состояниях. В качестве исходных данных был макет галереи и открытого модального окна. Я добавила в проект задачу по динамическому рендерингу элементов, упаковав информацию о товарах в объект JS. Дополнительно реализовала динамическую перерисовку части карточки (при смене выбора цвета или объема памяти будет меняться и название товара).
-
Multilayer exercises
Тренировка навыка
Небольшое упражнение по верстке на основе заданного макета, где я попрактиковалась реализовывать многослойные элементы интерфейса: стики-хедер, сообщение о cookies и кнопку “наверх”.
-
Big Trip
Дипломный проект
SPA, написанное в ООП стиле с соблюдением архитектуры MVP. В качестве исходных данных было дано ТЗ с требованиями к функционалу сайта и готовая верстка страницы во всех требуемых состояниях. Эту верстку я разделила на компоненты, которые интегрировала в JS код в качестве шаблонных строк. В итоге страница полностью отрисовывается динамически, в исходном html-файле присутствуют только контейнеры для компонентов и пара статичных элементов. Реализовано взаимодействие с сервером (методы CRUD). Для экранирования данных клиента использована библиотека “he”, а для работы с датами использованы библиотеки “flatpickr” и “dayjs”. Также при работе с этим проектом получила опыт работы с фреймворком (в данном случае с фреймворком от авторов курса).
Проект сдан на 100 баллов со второй попытки.
-
Kekstagram
Дипломный проект
Динамический одностраничник, который получает данные о постах с сервера и отрисовывает их на странице с возможностью сортировки. Реализована обратная связь интерфейса - в случае возникновения ошибок соединения с сервером будут показаны сообщения об этом. В качестве исходных данных была готовая верстка страницы с шаблонами динамических элементов (в тегах template). Одной из отличительных особенностей моей реализации стало формирование отдельного модуля для хранения и экспорта результатов всех querySelector в формате объектов.
Проект сдан на 100 баллов со второй попытки.
-
Italian chef’s blog
Тренировка навыка
Один из наиболее сложных проектов по верстке текстового контента на основе готового макета. Использована сложная типографика:
- буквицы,
- лигатуры,
- врезки и обтекания сложной формы,
- поворот текста под углом,
- разделения текста по колонкам.
Помимо основных задач я уделила внимание интерактивным элементам и анимации их фокусных состояний.
-
Science blog
Тренировка навыка
Верстка (по готовому макету) научной статьи с разнообразными текстовыми элементами:
- кликабельное содержание,
- таблицы,
- формулы,
- деление текста на колонки,
- сноски с кнопкой возврата,
- многоуровневый нумерованный список.
Также здесь есть карточки других статей с реализацией скрытия текста и кнопкой “читать дальше” для перехода на статью. Дополнительно я поставила и решила задачу по оживлению элемента "поиск" на чистом css: при клике на слово "поиск" соответствующее поле ввода выезжает на центр шапки.
-
OneNews
Тренировка навыка
Верстка (по готовому макету) статьи о финансах на новостном портале, где помимо стандартных для статей элементов также присутствуют:
- таблицы,
- список определений, оформленный как диаграмма,
- многоуровневый нумерованный список,
- формулы,
- блоки, вынесенные вне основного контента,
- карточка другой статьи с реализацией скрытия текста и кнопкой “читать дальше” для перехода на статью.
-
Blogick
Тренировка навыка
Верстка (по готовому макету) статьи в блоге о путешествиях, где размечены и стилизованы классические текстовые элементы, такие как:
- заголовки,
- лид-блок,
- мета-информация о статье,
- хлебные-крошки,
- цитаты,
- упорядоченный список с прерывающейся нумерацией.
Помимо этого страница включает в себя обтекаемые элементы и вынесенные вне основного контента блоки.
Дополнительно
Сайд-скиллы
Разработка no-code приложений
Разработала персональные приложения на базе Google AppSheet: приложение для ведения семейного раздельного бюджета с возможностью просмотра аналитики трат по категориям и с расчетом задолжностей партнеров; мини-словарь армянского языка с ручным заполнением.
Опыт написания скриптов Google Apps Script
Написала набор скриптов на JavaScript + Google Apps Script для автоматизации работы с приложениями Google (выгрузка / загрузка отчетов и их обработка).
Написала пользовательскую функцию по форматированию времени (из формата ЧЧ:ММ в десятичное число).
Организация, систематизация и документация процессов
Адаптировала и внедрила CRM-систему на базе Битрикс24 для онлайн-школы. Написала сопроводительную документацию для менеджеров (описание базовых инструментов портала и их адаптация под нужды отдела).
Разработала пайплайн работы технического художника (подготовка графических файлов для последующей анимации или импорта в игровой движок). Подготовила инструкцию, провела обучение исполнителей и успешно делегировала дальнейший контроль над работой.
Подготовила канбан-доску с автоматизацией, адаптированную под процессы продакшн-отдела.
Написала стайл-гайд для разработки визуального контента мобильной игры.
Владение графическими редакторами
Adobe Photoshop на профессиональном уровне (как 2D-художник).
Figma на уровне создания типовых макетов.
Знание колористики, композиции и основ графического дизайна
Имею специальность “дизайнер архитектурной среды”, три года работала в арт-студии на позиции middle 2D художник. Хорошо чувствую композицию и имею развитый художественный вкус.
Английский язык уровня Upper-Intermediate
Свободно читаю техническую документацию и смотрю обучающие видео на английском языке.
Софт-скиллы
Обучаемость
Инициативно и самостоятельно изучила основы и тонкости работы с платформой Битрикс24 и с Google приложениями (в т.ч. как писать скрипты на Apps Script).
С нуля за год обучилась фронтенд-разработке.
Аналитическое мышление
Стараюсь рассмотреть разные варианты решения задачи и выбрать наиболее оптимальный.
Даже для такой обыденной задачи, как выбор отеля, я составляю табличку с указанием важных для меня параметров (цена, расположение, условия проживания, рейтинги на разных сервисах). Для нечисловых параметров я использую балльную систему оценки. Дальнейшее автоматическое условное форматирование помогает выбрать наилучший вариант, основываясь на совокупности всех факторов.
Структуризация данных
Написала аналитическую таблицу (Google Spreadsheet) для аналитики доходов с продаж и успешности продуктов студии.
Создала набор аналитических таблиц (Google Spreadsheet) для отслеживания окупаемости проектов на основе зарплат исполнителей, потраченных человеко-часов и полученной выручки.
Разработала систему фильтрации и каталогизации продуктов компании, которая позволяет быстро находить необходимый товар (на базе Notion).
Самостоятельность и ответственность
Всегда сначала сама ищу ответ на вопрос, прежде чем обратиться за помощью.
Если задача не решается - стараюсь найти альтернативные варианты ее решения.
Тщательно оцениваю свою работу по всем критериям, прежде чем отдать ее на проверку.
Дисциплинированность
Около года занималась самообучением веб-разработке, уделяя на это регулярно четыре часа по будням и два часа по выходным (с заранее запланированными перерывами на отпуск).
Раз в неделю на протяжении более трех лет занимаюсь английским с репетитором.
Придерживаюсь одного и того же распорядка дня даже при возможности гибкого рабочего графика.
Не откладываю задачи на потом, даже если они неинтересные.
Навык предоставления обратной связи
Была лид-художником на двух проектах (в задачи помимо фидбэка исполнителям входило оценка трудоемкости задач, их распределение между исполнителями и контроль качества иллюстраций).
А также целеустремленность, усидчивость и внимание к деталям.