Персональный сайт-портфолио

Клиент и задача

Требовалось организовать список проектов, в которых я принимал участие, в виде сайта-портфолио. Разработка самого сайта вылилась в еще один проект с интересными задачами.

Технологии и решения

Для портфолио была необходима поддержка мультиязычности не только на уровне перевода текста страниц, но и на уровне метаданных: заголовка, описания, open graph метаданных, перевода мультимедиа и семантики сайта (роутинг). Метаданные сильно влияют на SEO-продвижение сайта в поисковой выдаче — готовых решений для интернационализации роутинга без базового префикса (например, /ru/) и маппинга страниц переводов в открытом доступе не было, либо они были недостаточно гибкими. Такой меппинг я реализовал на уровне каждого роута сайта (создал своеобразный аналог WPML — это, пожалуй, самый популярный плагин интернационализации для сайтов на CMS). Кроме перевода ссылок реализовал возможность перевода мультимедиа с асинхронной подгрузкой (картинка качается только тогда, когда это нужно). Асинхронная загрузка также используется для перевода основного текста сайта. Пререндеринг (SSG) позволит поисковым системам правильно индексировать сайт, кстати, обновление метаданных страницы отлично уживается с пререндерингом. В предыдущих проектах поддержка темной цветовой схемы не требовалась, поэтому реализация ее для меня была новой интересной задачей, с которой я легко справился, используя CSS-переменные. В проекте использовал новейший стек технологий — Vue 3 (composition API), TypeScript, Pinia и vite.

Результаты

Результат — красивый сайт с минималистичным дизайном и продуманным функционалом. Код проекта доступен на гитхабе.