Про меня
Меня зовут Кирилл Голованов. Я full-stack разработчик. Проживаю в г.Екатеринбург. Специализируюсь на создании быстрых и адаптивных интерфейсов на React, совмещая классическую верстку с современными инструментами разработки.
-
Навыки:
- Frontend: React, TypeScript, Vite, JavaScript, Tailwind CSS, SCSS (BEM);
- Backend & Cloud: Node.js, Express, PostgreSQL, CDN (S3 storage);
- AI-Driven Development: Разработка с использованием AI-агентов (Cursor, Trae);
- Инструменты: Git, Figma, Яндекс Метрика.
Текущие Проекты
-
Каталог с интернет-магазином: Fullstack E-commerce Platform.
Высоконагруженная SSR-экосистема на Next.js 16 (App Router), Node.js/Express (REST API) и Vite (CRM-панель), спроектированная под максимальное SEO и надежность. Проект находится на финальной стадии стабилизации перед запуском в продакшен и полностью покрыт автотестами (Vitest, Supertest, Playwright, MSW).
Frontend & UX: Интерфейс на Tailwind CSS 4 и Shadcn UI. Реализовано «умное» слияние корзин (Zustand Persistence). Оптимизирован критический путь чекаута для пользователей со слабым интернет-соединением.
Backend, Данные & Безопасность: PostgreSQL + Prisma с оптимизацией запросов через GIN-индексы. Внедрена 100% защита от гонки запросов (Race Condition) через пессимистическую блокировку данных (SELECT FOR UPDATE) на уровне БД. Ролевой доступ (JWT) и S3-медиахранилище.
Бизнес-логика: Кастомная сплит-архитектура заказов («из наличия» vs «авторский повтор») со сквознымcheckoutGroupId. Полная интеграция ЮKassa с идемпотентной обработкой вебхуков (автовозврат остатков при отменах, защита от фрода по суммам) и Telegram-уведомления. -
Интерактивная фото- и видеогалерея путешествия (28 альбомов).
SPA-приложение на React 19 и Vite, построенное на data-driven архитектуре (JSON). Скорость отклика достигнута через Code Splitting (React.lazy) и Lazy Mounting секций на базе IntersectionObserver.
Оптимизация контента: Проект полностью развернут на S3 (CDN). Реализована система WebP-превью, разделение трафика (thumbnails/full-size) и отложенная инициализация видео.
UX & Performance: Ручное управление чанками Swiper, использование React Portals для модальных окон и глубокая оптимизация рендеринга обеспечивают мгновенный старт страницы. Интегрирована Яндекс.Метрика с информером.
Прототипы и тесты
- Персональный творческий сайт (адаптивная верстка, JavaScript, Express.js)
-
Прототип интернет магазина. (React, TypeScript, Vite, работа с
API).
Используется публичный API https://dummyjson.com/
-
Тестовая работа с Next.js. (React, TypeScript, Next.js, работа с
API).
Используется публичный API https://dummyjson.com/
Учебные проекты: Frontend
-
React проект — Бета-версия стримингового сервиса
(React, TypeScript, Vite)
Одностраничное веб-приложение для просмотра и управления фильмами, разработанное на React с использованием React Router для маршрутизации. Для централизованного управления состоянием применены Context Providers: AuthProvider для аутентификации и MovieProvider для данных фильмов. Приложение взаимодействует с внешним API для получения информации о фильмах и жанрах. Используется ленивая загрузка компонентов (React.lazy и Suspense) для улучшения производительности и скорости загрузки. Интерфейс адаптивен для различных устройств. Основной функционал включает просмотр популярных фильмов, фильтрацию по жанрам, просмотр деталей фильма с трейлерами, управление списком избранного и авторизацией.
-
Страницы каталога для интернет-магазина (адаптивная верстка,
JavaScript)
Это фронтенд-приложение (без бэкэнда), построенное на модульной структуре JavaScript с интеграцией сторонних библиотек, таких как swiper.js, just-validate.js, popperjs.min.js и tippy.min.js. Проект использует чистый JavaScript, разделённый на модули для создания переиспользуемых и изолированных компонентов интерфейса. Он включает ES6 модули с импорт/экспорт, а также асинхронную загрузку и инициализацию компонентов. Проект применяет локальный JSON-файл (data/data.json) для хранения и загрузки данных о продуктах.
-
Предрелизная подготовка страницы проекта «Тишинский
бульвар» (адаптивная верстка, CSS, SCSS, Figma)
Вёрстка по макету Figma с проверкой по Pixel Perfect. Вёрстка прошла проверку на валидность (HTML-валидатор, БЭМ-валидатор). Текст прошёл обработку типографом. Вёрстка проверена на переполнение контентом. Применена «резиновая» вёрстка для корректного отображения страницы на любой ширине от 360 до 4000 пикселей и адаптирована под все разрешения, указанные в макете. Растровые изображения подготовлены для экранов с плотностью пикселей 2x. Изображения подключены с учётом их адаптации. Векторные изображения добавлены в спрайт. Стилизация выполнена с помощью препроцессора Sass. Семейства шрифтов и цвета записаны в SCSS-переменных. На странице имеется favicon. Верстка проверена в Lighthouse.
-
Предрелизная подготовка страницы интернет-магазина (адаптивная
верстка, CSS, SCSS, Figma)
Вёрстка по макету Figma с проверкой по Pixel Perfect. Вёрстка прошла проверку на валидность (HTML-валидатор, БЭМ-валидатор). Текст прошёл обработку типографом. Вёрстка проверена на переполнение контентом. Применена «резиновая» вёрстка для корректного отображения страницы на любой ширине от 360 до 4000 пикселей и адаптирована под все разрешения, указанные в макете. Растровые изображения подготовлены для экранов с плотностью пикселей 2x. Изображения подключены с учётом их адаптации. Векторные изображения добавлены в спрайт. Стилизация выполнена с помощью препроцессора Sass. Семейства шрифтов и цвета записаны в SCSS-переменных. На странице имеется favicon. Верстка проверена в Lighthouse.
- Анимация мобильной версии главной страницы и бургерного меню (HTML/CSS/SCSS)
- Комплексная анимация страницы 404 (HTML/CSS/SCSS)
- Комплексная анимация экрана загрузки для сайта (HTML/CSS/SCSS)
- Адаптивная вёрстка страницы и бургерного меню сайта (HTML/CSS/SCSS)
- Адаптивная вёрстка страницы каталога для сайта (HTML/CSS/SCSS)
- Адаптивная вёрстка страницы и бургерного меню сайта (HTML/CSS/SCSS)
- Адаптивная вёрстка лендинга (HTML/CSS/SCSS)
- Адаптивная вёрстка страницы «Результаты поиска» (HTML/CSS/SCSS)
- Адаптивная вёрстка страницы «Результаты поиска» (HTML/CSS/SCSS)
- Адаптивная вёрстка страницы (HTML/CSS/SCSS)
Учебные проекты: Backend
-
Node.js проект — Сервис личных заметок (Node.js,
Express.js, PostgreSQL)
Проект сделан на Node.js с использованием Express.js. Все данные (пользователей и заметок) хранятся в удалённой базе данных PostgreSQL. Пароли в базе хранятся в захешированном виде. Проект развёрнут на сервере с HTTPS и уникальным доменным именем.
Данный сервис позволяет авторизованному пользователю управлять своими заметками. Каждая заметка содержит заголовок, текст и автоматически проставленное время создания. Функционал включает: действия с пользователями (регистрация и аутентификация пользователей, их вход и выход из сервиса) и действия с заметками (создание, просмотр и редактирование заметок, архивацию, удаление и восстановление заметок, фильтрация заметок по диапазону дат).
Контакты
Email: k.a.golovanov@yandex.ru
Телефон: +7 (902) 274-50-89
Telegram: @EKB_Kirill_Golovanov