Верстка сайта по Figma на Tailwind CSS

Полностью разработал frontend промосайта ZulTalk с нуля по готовому макету, предоставленному UI/UX-дизайнером в Figma. Моей задачей было точно перенести дизайн в работающий адаптивный сайт с использованием HTML, JavaScript и Tailwind CSS. Реализовал структуру страницы, типографику, сетки, отступы, навигацию, кнопки, видеоблоки, информационные секции, интерактивные элементы, мобильное меню и модальные окна. Отдельное внимание уделил соответствию макету и корректному отображению сайта на компьютерах и мобильных устройствах, (планшет был игнорирован так как тимлид сказал не надо, да и дизайнер не сделал планшетную версию сайта). Во время разработки адаптировал размеры текста, расположение изображений, интервалы между блоками и поведение навигации для разных экранов. Выполненные задачи: — полная верстка сайта по Figma; — разработка интерфейса на Tailwind CSS; — адаптивная desktop- и mobile-верстка; — мобильная навигация; — интерактивные элементы на JavaScript; — модальные окна; — тестирование на разных размерах экрана; — исправление ошибок и финальные правки. Дизайн был подготовлен UI/UX-дизайнером. Я отвечал за полную frontend-реализацию сайта.

Сайт гольф-клуба с интерактивным 360°-туром

Полностью самостоятельно разработал адаптивный сайт для гольф-клуба — от структуры и интерфейса до финальной реализации. Главной особенностью проекта стал интерактивный виртуальный тур по помещениям клуба. Поскольку готовых 360°-панорам объекта не существовало в открытом доступе, я самостоятельно подготовил панорамные материалы, настроил их отображение и интегрировал интерактивный просмотр на сайт. Пользователь может изменять направление обзора и осматривать зоны TrackMan и GDR непосредственно на странице сайта. Также реализовал: — адаптивную верстку для компьютеров, планшетов и смартфонов; — самостоятельное создание и интеграцию интерактивных 360°-панорам; — фотогалерею помещений клуба; — блоки с услугами и ценами; — мобильное меню и навигацию по разделам; — кнопки связи и бронирования; — интеграцию Kakao Map, Naver Map и Google Maps; — оптимизацию изображений и интерфейса для мобильных устройств. Я отвечал за структуру сайта, frontend-разработку, адаптивность, JavaScript-функциональность, подготовку панорам и реализацию виртуального 360°-тура. Технологии: HTML5, CSS3, JavaScript, Responsive Web Design и интерактивные 360°-панорамы.

Редизайн и русская локализация сайта Slow Letter

Обновил дизайн существующего сайта Slow Letter и адаптировал его для современных мобильных устройств. Моей задачей было улучшить внешний вид и удобство использования сайта, сохранив его исходную структуру и содержание. Я переработал расположение элементов, отступы, размеры текста, изображения, навигацию и отображение контентных блоков. Полностью добавил адаптивную мобильную версию сайта. Исправил проблемы с шириной блоков, переносами текста, изображениями, меню и кнопками на небольших экранах. Также добавил русскую языковую версию сайта и подключил её к существующей системе переключения языков. Адаптировал русские тексты под интерфейс, чтобы более длинные фразы корректно отображались на компьютерах и мобильных устройствах. Выполненные задачи: — обновление дизайна существующего сайта; — адаптивная верстка для мобильных устройств; — добавление русской локализации; — интеграция русского языка в переключатель языков; — адаптация интерфейса под разную длину текста; — исправление навигации, изображений и контентных блоков; — тестирование desktop- и mobile-версий; — работа с HTML, CSS и JavaScript. Оригинальный сайт существовал до моего участия. Я отвечал за редизайн, мобильную адаптацию и добавление русской версии.

Лендинг AI-модели — дизайн и разработка с нуля

Полностью самостоятельно разработал лендинг для виртуальной AI-модели Angelina — от первоначальной концепции и визуального дизайна до финальной адаптивной реализации. Главной задачей было создать яркую персональную страницу, которая сразу подчёркивает, что Angelina является AI-моделью, формирует узнаваемый цифровой образ и направляет посетителей к основному сервису. Я самостоятельно разработал дизайн страницы, визуальную структуру, композицию блоков, типографику, цветовую стилистику и расположение контента. На странице реализовал: — главный экран с акцентом на AI-персонажа; — профиль виртуальной модели; — адаптивную галерею изображений; — блоки с закрытыми превью контента; — CTA-кнопки для перехода в основной сервис; — адаптивную верстку для компьютеров и смартфонов; — мобильную навигацию и оптимизацию интерфейса; — визуальные состояния кнопок и интерактивных элементов; — оптимизацию изображений и скорости загрузки. Я отвечал за весь процесс создания лендинга: идею, дизайн, структуру интерфейса, frontend-разработку, адаптивность и финальное тестирование. Angelina представлена на сайте как виртуальная AI-модель. Я полностью разработал именно её лендинг и визуальное оформление страницы. Технологии: HTML5, CSS3, JavaScript и Responsive Web Design.

Локализация сайта на 11 языков и i18n

Участвовал в локализации и доработке существующего коммерческого сайта, первоначально созданного на корейском языке. Моей задачей было внедрение и настройка мультиязычности для 11 языков. Подключал текст страниц к i18n-ключам, редактировал JSON-файлы переводов, исправлял отсутствующие и некорректные переводы, а также проверял работу переключателя языков. Дорабатывал существующие страницы и самостоятельно добавлял новые адаптивные страницы в соответствии с текущим дизайном сайта. Исправлял проблемы, возникавшие из-за разной длины текста: переносы строк, размеры кнопок, отступы, навигацию, выравнивание элементов и отображение на мобильных устройствах. Выполненные задачи: — внедрение и настройка i18n; — интеграция 11 языковых версий; — работа с JSON-файлами переводов; — добавление новых страниц; — доработка существующих страниц; — исправление адаптивной верстки; — тестирование интерфейса на разных языках; — работа с HTML, CSS, JavaScript и PHP. Оригинальный сайт был создан до моего участия. В портфолио представлена только выполненная мной работа по локализации и доработке страниц.