Катерина Евтухова
Junior фронтенд-разработчик, Ереван
Будучи визуалом с логическим мышлением, я нашла во фронтенде идеальное место для реализации себя как специалиста. Стремлюсь создавать удобные и доступные интерфейсы, используя современные технологии. С интересом слежу за актуальными тенденциями в сфере веб-разработки.
Стек
-
Пишу валидную семантическую разметку, знаю базовые правила доступного интерфейса, умею валидировать формы
-
Уверенно строю flex и grid сетки, оптимизирую работу с помощью кастомных свойств и переменных, умею строить адаптивные резиновые интерфейсы
-
Уверенно пишу как на TypeScript, так и на ванильном JS, умею работать с асинхронными операциями, понимаю принципы работы различных алгоритмов, знакома с понятием “О” большое, думаю об алгоритмической сложности при написании кода
-
Умею работать с системой контроля версий GIT, знаю основные команды по работе с репозиторием, как работать в ветках и форках
-
Умею делить интерфейс на переиспользуемые и независимые компоненты.
-
Имею опыт работы на проектах с настроенной автоматизацией (vite, webpack, gulp) и использованием npm-пакетов
Опыт работы
-
Front-end разработчик
Websovet — студия разработки casual-игр
Май 2024 – по настящее время
Задачи:
Разработка игр и общей оболочки, обеспечение кроссбраузерности и кроссплатформенности.
Использовала:
TypeScript, Phaser, Vite.
Достижения:
- Самостоятельно разработала две игры (жанры idle и рикошет) и одну игру в жанре merge в паре с другим разработчиком. В настоящее время разрабатываю игру в жанре рулетка.
- Разработала мету — раздел приложения, в котором игрок тратит заработанные звёзды для продвижения по сюжету.
- Реализовала систему смены скинов игры для сборки игр с разным визуальным контентом.
- Создала компонент модального окна с несколькими предустановленными шаблонами.
- Разработала графический редактор уровней и редактор конфигурации игровых объектов с сохранением данных в JSON-формате.
-
Технический специалист
Grafit — аутсорс арт-студия
Январь 2022 – Июнь 2024
Задачи:
Разработка, оптимизация и автоматизация рабочих процессов.
Использовала:
Google Sheets, AppScript, AppSheet, Notion, Битрикс24.
Достижения:
- Внедрила и адаптировала CRM-систему, сопроводила ее документацией для менеджеров.
- Разработала аналитическую таблицу для оценки успешности продуктов студии.
- Создала набор аналитических таблиц для анализа окупаемости проектов на основе затрат и выручки.
- Разработала систему фильтрации и каталогизации продуктов компании.
-
Middle / Lead 2D-художник
Grafit — аутсорс арт-студия
Февраль 2019 – Декабрь 2021
Задачи:
Создание арт-контента для видео-игр, на отдельных проектах контроль качества и доведение других работ до финального результата.
Достижения:
- Написала стайл-гайд для разработки визуального контента мобильной игры.
- Разработала пайплайн подготовки иллюстраций под анимацию или импорт в движок, провела обучение исполнителей и успешно делегировала дальнейший контроль над работой.
Проекты
-
Portfolio
Персональный проект
Страница-портфолио, где я собрала и оформила главные свои навыки и наиболее интересные проекты. Для этого проекта я самостоятельно сформировала техзадание и создала макет в Figma для 3-х состояний сайта на экранах разного размера. В качестве критериев качества кода я придерживаюсь кодгайда школы HTML Academy. В некоторых случаях я сознательно отступила от части правил или изменила их. </br>Наиболее интересные и сложные задачи проекта: </br>- настройка и переключение цветовых тем: я взяла за основу реализацию Вадима Макеева, которую он разбирал в видео-роликах, но адаптировала под свой дизайн, слегка изменив логику скрипта; </br>- использование относительных единиц измерения: все размеры шрифтов, а также расстояния между элементами привязаны к базовому размеру шрифта; </br>- работа с новыми для меня элементами: изучила нюансы работы тегов details и dialog.
-
Check feature support
Персональный проект
Сайт-инструмент для проверки поддержки CSS-свойств в браузере, в котором он открыт. Проект вырос из рабочей задачи по поддержке дефолтных мобильных браузеров (например, Samsung Internet), для которых не было достоверной информации о поддержке CSS. </br>В рамках работы над этим проектом были реализованы: </br>- двойная проверка на базе CSS.supports и @supports с цветовой индикацией результата; </br>- отдельная логика для проверки поддержки единиц измерения и пользовательских свойств; </br>- минималистичный интерфейс для быстрого ввода CSS-свойств и мгновенного получения ответа.
-
Cat Energy
Дипломный проект
Главной задачей этого проекта было реализовать полностью адаптивный интерфейс с соблюдением принципа pixel perfect. В качестве исходных данных были даны макеты всех страниц для 3-х размеров экрана и стайлгайд для фокусных состояний. Сайт имеет три страницы: лендинг, каталог товаров и форму подбора заказа. Весь контент устойчив к замене картинок, а также к переполнению текстом и дополнительными элементами. Наиболее интересными для меня были задачи реализации мобильного меню (которое должно быть в потоке в случае отсутствия JS и открываться по клику в случае его наличия) и стилизации фона у блока hero (кот на большом экране увеличивается пропорционально размеру окна, но до определенного размера, чтобы не показывать обрезанный край картинки). </br>Проект сдан на 100 баллов с первой попытки.
-
Grafit Academy
Персональный проект
Большой самостоятельный проект, на котором я отрабатывала полученные знания. Состоит из двух страниц - лендинг и каталог товаров. Наиболее интересные и сложные фичи проекта: </br>- перестроение сеток в каталоге товаров, </br>- переиспользуемый слайдер (специально не подключала его библиотекой, т.к. хотела разобраться с нативной реализацией), </br>- динамический рендеринг (товары и работы художников), </br>- фильтрация и сортировка товаров, </br>- подключение библиотеки noUiSlider, </br>- работа с Local Storage (дисклеймер демонстрируется только при первом просмотре сайта, запоминается информация об избранных товарах и товарах в корзине, а также информация об авторизации), </br>- синхронизация информации о паке в каталоге, модалке и корзине (в т.ч. интерактивных элементов и их состояний). </br>Отдельно отмечу, что уже в финале работы с проектом я в качестве эксперимента добавила препроцессор Sass и автоматизированную сборку. Благодаря этому я получила опыт работы с легаси-кодом, ведь потребовалось адаптировать структуру проекта и часть кода.
-
Online smartphones store
Тренировка навыка
Небольшая тренировка реализации каталога товаров с карточками в двух состояниях. В качестве исходных данных был макет галереи и открытого модального окна. Я добавила в проект задачу по динамическому рендерингу элементов, упаковав информацию о товарах в объект JS. Дополнительно реализовала динамическую перерисовку части карточки (при смене выбора цвета или объема памяти будет меняться и название товара).
-
Multilayer exercises
Тренировка навыка
Небольшое упражнение по верстке на основе заданного макета, где я попрактиковалась реализовывать многослойные элементы интерфейса: стики-хедер, сообщение о cookies и кнопку “наверх”.
-
Big Trip
Дипломный проект
SPA, написанное в ООП стиле с соблюдением архитектуры MVP. В качестве исходных данных было дано ТЗ с требованиями к функционалу сайта и готовая верстка страницы во всех требуемых состояниях. Эту верстку я разделила на компоненты, которые интегрировала в JS код в качестве шаблонных строк. В итоге страница полностью отрисовывается динамически, в исходном html-файле присутствуют только контейнеры для компонентов и пара статичных элементов. Реализовано взаимодействие с сервером (методы CRUD). Для экранирования данных клиента использована библиотека “he”, а для работы с датами использованы библиотеки “flatpickr” и “dayjs”. Также при работе с этим проектом получила опыт работы с фреймворком (в данном случае с фреймворком от авторов курса). </br>Проект сдан на 100 баллов со второй попытки.
-
Kekstagram
Дипломный проект
Динамический одностраничник, который получает данные о постах с сервера и отрисовывает их на странице с возможностью сортировки. Реализована обратная связь интерфейса - в случае возникновения ошибок соединения с сервером будут показаны сообщения об этом. В качестве исходных данных была готовая верстка страницы с шаблонами динамических элементов (в тегах template). Одной из отличительных особенностей моей реализации стало формирование отдельного модуля для хранения и экспорта результатов всех querySelector в формате объектов. </br>Проект сдан на 100 баллов со второй попытки.
-
Italian chef’s blog
Тренировка навыка
Один из наиболее сложных проектов по верстке текстового контента на основе готового макета. Использована сложная типографика: </br>- буквицы, </br>- лигатуры, </br>- врезки и обтекания сложной формы, </br>- поворот текста под углом, </br>- разделения текста по колонкам. </br>Помимо основных задач я уделила внимание интерактивным элементам и анимации их фокусных состояний.
-
Science blog
Тренировка навыка
Верстка (по готовому макету) научной статьи с разнообразными текстовыми элементами: </br>- кликабельное содержание, </br>- таблицы, </br>- формулы, </br>- деление текста на колонки, </br>- сноски с кнопкой возврата, </br>- многоуровневый нумерованный список. </br>Также здесь есть карточки других статей с реализацией скрытия текста и кнопкой “читать дальше” для перехода на статью. Дополнительно я поставила и решила задачу по оживлению элемента "поиск" на чистом css: при клике на слово "поиск" соответствующее поле ввода выезжает на центр шапки.
-
OneNews
Тренировка навыка
Верстка (по готовому макету) статьи о финансах на новостном портале, где помимо стандартных для статей элементов также присутствуют: </br>- таблицы, </br>- список определений, оформленный как диаграмма, </br>- многоуровневый нумерованный список, </br>- формулы, </br>- блоки, вынесенные вне основного контента, </br>- карточка другой статьи с реализацией скрытия текста и кнопкой “читать дальше” для перехода на статью.
-
Blogick
Тренировка навыка
Верстка (по готовому макету) статьи в блоге о путешествиях, где размечены и стилизованы классические текстовые элементы, такие как: </br>- заголовки, </br>- лид-блок, </br>- мета-информация о статье, </br>- хлебные-крошки, </br>- цитаты, </br>- упорядоченный список с прерывающейся нумерацией. </br>Помимо этого страница включает в себя обтекаемые элементы и вынесенные вне основного контента блоки.
Обучение
Пройденные курсы с групповым наставником и дипломным проектом
-
JavaScript. Профессиональная разработка веб-интерфейсов
-
Изучила синтаксис языка, базовые конструкции, взаимодействие с DOM, асинхронные запросы к серверу и встраивание сторонних библиотек. И все это с соблюдением принципов DRY и KISS.
-
JavaScript. Архитектура клиентских приложений
-
Погрузилась в углубленное изучение языка в ООП стиле. Научилась разделять интерфейс на компоненты и построила SPA в паттерне MVP. Освоила взаимодействие с сервером по протоколу HTTP, реализуя методы CRUD с помощью REST API.
-
HTML и CSS. Адаптивная вёрстка и автоматизация
-
Закрепила понимание методологии БЭМ. Освоила адаптивную верстку с использованием SASS. Научилась грамотной работе с графикой и шрифтами. Использовала инструменты автоматизации для достижения хорошей производительности сайта.
Изученные методические материалы с отработкой на практических кейсах
-
Вёрстка текстового содержимого страниц
Освоила навык оформления текстового контента с учетом семантики. Поработала со сложными элементами: формулы, сноски, нумерация списка с прерыванием, денежные знаки, разбиение на колонки, таблицы, буквицы и красные строки, сложные обтекания текстом внешнего элемента и заключение текста в непрямоугольный шейп, скрытие не поместившегося текста и реализация кнопки “читать далее”.
-
Вёрстка навигационных элементов интерфейса
Укрепила понимание верстки и стилизации таких элементов навигации, как линейное и многоуровневое меню, выпадающее подменю, хлебные крошки, пагинация. Узнала тонкости работы со списками и ссылками.
-
Вёрстка карточных элементов интерфейса
Закрепила навык оформления каталога товаров и его карточек с учетом доступности и гибкой сетки.
Учебные проекты
-
Вёрстка многослойных элементов интерфейса
Сформировала четкое понимание работы разных видов позиционирования, научилась создавать многослойность через grid-сетку. Отработала навык стилизации слайдеров, поп-апов, модальных окон, тултипов, липких и выпадающих элементов.
Учебные проекты
А также прошла 81% тренажеров от HTML Academy
Подтверждение
Дополнительно
Сайд-скиллы
-
Разработка 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).
-
Самостоятельность и ответственность
Всегда сначала сама ищу ответ на вопрос, прежде чем обратиться за помощью.
Если задача не решается - стараюсь найти альтернативные варианты ее решения.
Тщательно оцениваю свою работу по всем критериям, прежде чем отдать ее на проверку.
-
Дисциплинированность
Около года занималась самообучением веб-разработке, уделяя на это регулярно четыре часа по будням и два часа по выходным (с заранее запланированными перерывами на отпуск).
Раз в неделю на протяжении более трех лет занимаюсь английским с репетитором.
Придерживаюсь одного и того же распорядка дня даже при возможности гибкого рабочего графика.
Не откладываю задачи на потом, даже если они неинтересные.
-
Навык предоставления обратной связи
Была лид-художником на двух проектах (в задачи помимо фидбэка исполнителям входило оценка трудоемкости задач, их распределение между исполнителями и контроль качества иллюстраций).
-
А также целеустремленность, усидчивость и внимание к деталям.