JAM-стек портфолио

Задача

Собрать проекты, опыт работы и контакты на одном сайте. Посетитель должен понимать, какие задачи я решаю, изучать отдельные кейсы и находить способ связаться со мной. Контент нужно редактировать на русском и английском через административный интерфейс.

Выполненная работа

• Создал главную страницу, страницы проектов и переключение языков с сохранением текущего раздела.
• Настроил коллекции проектов, опыта работы, технологий и социальных ссылок. Связал записи с технологиями и добавил управление порядком и видимостью опыта работы.
• Подключил Sveltia CMS для редактирования контента и настроек сайта.
• Реализовал анимации заголовка, ленты технологий и карточек проектов с общим переключателем движения.
• Добавил галерею кейсов на Swiper с просмотром и увеличением изображений.
• Добавил навигацию с клавиатуры, видимый фокус, переход к основному содержимому и копирование email.

Технические решения

Astro формирует статические страницы из контентных коллекций. Схемы Zod проверяют структуру данных при сборке. Для каждой записи хранятся отдельные версии EN и RU; описания проектов написаны в Markdown.

Svelte управляет карточками проектов, галереей, сменой эпитетов, копированием email и интерфейсом паузы анимаций. Общий контроллер движения написан на TypeScript. Переход между изображениями карточки использует WebGL. Обычное HTML-изображение остаётся доступным без JavaScript и при недоступном WebGL.

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

Что можно посмотреть

На сайте доступны два языка, кейсы проектов и блок опыта работы с технологиями. В админке можно редактировать тексты и связи между записями. Исходный код доступен по ссылке GitHub рядом с описанием проекта.