Валерия Кузнецова

Junior Frontend Developer

Обо мне

Давайте знакомиться, меня зовут Валерия!

Я начинающий frontend-разработчик, ориентированный на создание чистого и производительного кода и семантически корректной разметки. Обладаю уверенными знаниями JavaScript (ES6+), HTML5 и CSS3, а также практическим опытом работы с такими фреймворками, как React, Next, Svelte.

В моём портфолио представлены проекты, демонстрирующие адаптивную mobile-first верстку с использованием flexbox/grid, работу с API и управление состоянием. Я работаю в соответствии с лучшими практиками разработки, используя современные веб-стандарты, быстро учусь и ищу возможность присоединиться к команде, чтобы применить свои знания на реальных коммерческих задачах.

Буду рада сотрудничеству!

Hard Skills

HTML5: Семантическая разметка, доступность (ARIA)
CSS3: Flexbox, Grid Layout, медиа-запросы (адаптивность), анимации и трансформации
JavaScript (ES6+): Асинхронность (Promises, async/await), работа с raw DOM
TypeScript: Строгая типизация, работа с any
React: Hooks, Context, Reducer, React Router
HTTP/HTTPS: Структура протокола
Git: Использование системы контроля версий
CRUD, используя базы данных: NoSQL (MongoDB), SQL (Postgres, SQLite)
Вёрстка согласно дизайн-макету в Figma

Soft Skills

Внимание к деталям
Готовность разбираться в новых технологиях
Умение работать с документацией
Работа на качество
Способность задавать вопросы и принимать обратную связь

Мои проекты

Music website

«Точка ритма» — прототип платформы для покупки билетов на музыкальные мероприятия, содержащий дополнительный контент о музыкальных жанрах (история развития, текущие тренды, популярные альбомы, тест на определение подходящего пользователю жанра). Интуитивно понятный интерфейс с четкой структурой контента, использующий вкладки и выпадающие меню.

Технологии и ключевые решения

NextJSTypescriptмодульный CSSадаптивный дизайн

Реализовано по дизайну, созданному в Figma. На странице покупки билетов разработана клиентская и серверная валидация форм, обеспечивающая корректный и безопасный ввод данных. Для персонализации контента реализовано автоматическое определение геолокации и поиск ближайшего к пользователю места проведения мероприятий.

https://rhythm.bitnotes.xyz

3D-models

«Printforge» — прототип платформы по обмену моделями для печати на 3D-принтере. Галерея представлена в виде карточек с изображениями и основной информацией, возможен поиск и фильтрация по разделам. На сайте отображается количество оценок конкретной модельки с возможностью добавить свою. Проект разработан в рамках курса Learn Next.js на образовательной платформе Scrimba.

Технологии и ключевые решения

NextJSTypescriptSQLiteTailwind CSSадаптивный дизайн

Данные о моделях и категориях рендерятся в серверных компонентах Next.js согласно информации в базе данных SQLite; взаимодействие с количеством лайков осуществляется с использованием серверных функций Next.js. Поиск реализован на клиенте. Используются stateful сессии с хранением id пользователя в cookie. Соблюдена строгая типизация данных и компонентов. Для стилизации применялся Tailwind, разработка велась по методологии mobile-first.

https://3d-models.bitnotes.xyz

To-Do List

To-Do List — простой сайт для создания, отслеживания и управления личными задачами с системой регистрации и авторизации пользователей.

Технологии и ключевые решения

SvelteKitTypescriptMongoDB

Сайт был разработан с использованием SvelteKit. Хранение данных о пользователях и их задачах осуществляется в NoSQL базе данных MongoDB. Логика CRUD-операций (Создание, Чтение, Обновление, Удаление задач) реализована в серверных функциях с аутентификацией пользователя по JWT. Была разработана система клиентской и серверной валидации данных для регистрации и входа (проверка на обязательные поля, минимальная длина имени и пароля, подтверждение пароля). Для обеспечения безопасности пароли хэшируются в соответствии с рекомендациями OWASP (используя Argon2id).

https://todo.bitnotes.xyz

Countries

Сайт представляет собой каталог стран мира, получаемый из API, где каждая страна отображается в виде отдельной интерактивной карточки с основной информацией. Клик по какой-либо стране открывает страницу, где можно увидеть больше детальной информации, в том числе ссылки на граничащие с ней страны. Создан в рамках челленджа Frontend Mentor.

Технологии и ключевые решения

ReactReact RouterTypescriptвнешний APIадаптивный дизайн

Сайт интегрирован с API restcountries.com, использует клиентские fetch-запросы. Обеспечена корректная обработка ошибок сети и ответов API. В проекте реализована система фильтрации (по названию страны, через input, и по континентам, через выпадающий список). Сайт поддерживает светлую и темную темы оформления. Дизайн адаптивен, при стилизации использовались CSS-переменные и методология mobile-first.

https://countries.bitnotes.xyz

Space tourism

«Space tourism» — простой многостраничный сайт c акцентом на чистую, семантичную верстку и адаптивность, посвящённый космическим путешествиям. Включает четыре страницы: home, destination, crew и technology. Создан в рамках челленджа Frontend Mentor (Vanilla HTML5, CSS3, JS).

Технологии и ключевые решения

HTMLJSадаптивный дизайнCSS дизайн-система

Проект реализован по дизайну, созданному в Figma. Для стилизации применялся подход utility-классов, разработка велась по методологии mobile-first с использованием медиа-запросов. Проект соответствует стандартам доступности, содержит семантические тэги и соответствующие ARIA-атрибуты для интерактивных элементов, что обеспечивает корректное взаимодействие с сайтом для пользователей, применяющих ассистивные технологии или клавиатурную навигацию.

https://space-tourism.bitnotes.xyz

Cafe

Проект представляет собой каталог товаров (в данном случае десертов кофейни) с возможностью добавления в корзину и подсчета общей суммы, реализуя часть функционала интернет-магазина. Создан в рамках челленджа Frontend Mentor.

Технологии и ключевые решения

ReactTypescriptадаптивный дизайн

Для управления локальным и глобальным состоянием были использованы следующие React Hooks: useState, useEffect, useReducer, useMemo. Для создания сетки карточек товаров были использованы CSS Grid и Flexbox. Соблюдена строгая типизация данных и компонентов. Дизайн адаптивен, при стилизации использовались CSS-переменные и методология mobile-first.

https://cafe.bitnotes.xyz

Обо мне

Мои проекты

Music website

Технологии и ключевые решения

3D-models

Технологии и ключевые решения

To-Do List

Технологии и ключевые решения

Countries

Технологии и ключевые решения

Space tourism

Технологии и ключевые решения

Cafe

Технологии и ключевые решения

Связаться со мной