fb24m.ruРазработка интерактивного портфолио для фронтенд-разработчика
Разработка сайта фронтенд-разработчика на Astro. Спроектировал модульную архитектуру с нуля, внедрил семантическое SEO и оптимизировал структуру для индексации
На связь вышел независимый заказчик (подозрительно похожий на меня). С порога заявил, что его не устраивает 99% современного веба, и потребовал создать сайт-портфолио, который удовлетворит его крайне специфические и местами нездоровые запросы.
Так как заказчику было крайне важно, чтобы сайт моментально загружался и работал, было принятно решение сразу разрабатывать все на Astro и React. А ещё он пришел даже без референсов. Только хотел плавные анимации и чтобы все двигалось, но не бесило. Поэтому работу пришлось разделить на две части.
Дизайн
С анимацией мы сразу пошли по тонкому льду. Заказчик наотрез отказался от скучной статики и захотел, чтобы при скролле одни блоки трансформировались в другие и не просто так, а логично и объяснимо. Плюс — тотальная фиксация на физике: всё должно пружинить и отскакивать.
а такую хотелНажми на меняВсе анимационные эффекты и трансформации страниц были реализованы на базе библиотеки Motion. Для создания эффекта морфинга при скролле использовались компоненты отслеживания координат прокрутки, которые динамически изменяют геометрию блоков. Взаимодействие с кнопками тоже полностью на этой библиотеке
Что касаемо кейсов, изначально была идея сделать универсальный конструктор с базой данных. Но заказчик хотел отдельную, уникальную страницу с разными фишками для каждого кейса, особенно для того, который вы прямо сейчас смотрите. Уж не знаю, чем именно этот кейс его так привлек
В качестве шрифтов были выбраны Unbounded для заголовков и кнопок и Fixel для остальных текстов. Unbounded просто потому что заказчик считает, что он выглядит круто и необычно, а Fixel потому, что он отлично справляется со своей задачей и не выпендривается
Съешь ещё этих мягких французских булок, да выпей же чаю. Повторить тридцать раз на разных языках, чтобы проверить, не поплывут ли диакритические знаки, когда заказчик внезапно решит перевести этот кейс на португальский ради двух переходов со StackOverflow
Этот массивный блок текста специально растянут, чтобы вы могли оценить интерлиньяж и плотность набора. Он выглядит уверенно, монолитно и не разваливается при чтении с мобильных устройств. Если начать уменьшать экран, буквы начнут перестраиваться, но Fixel держит строй до последнего брейкпоинта
Если вы дочитали до этого места, значит, моя структура и контраст работают идеально. Заказчик, конечно, хотел, чтобы я тоже как-то деформировался при скролле, но я парень серьезный. Никакой пружинной физики, только чистая геометрия и высокая контрастность
А вот с цветовой палитрой заказчик просил не выдумывать ничего необычного
Разработка
Как и было сказано ранее, для разработки заказчик (честно, он сам настоял) выбрал React и Astro. Вообще, можно было справиться и с чистым React, но так как на сайте заказчика много статического контента, а так же крайне важен OpenGraph, было решено использовать и Astro
При этом заказчик решил, что весь контент должен быть статичным для лучшей индексации. Поэтому в клиентскую часть были вынесены только анимации и прочие сложные блоки
Теперь заказчик может редактировать работы в портфолио используя (не совсем) обычный формат Markdown. А ещё добавили дополнительные блоки, например, горизонтальный скролл или слайдеры. А для каждой работы можно создать свои блоки для визуализации. Например, как на этой странице с кнопками
Все сложные блоки загружаются оптимизированно и только когда надо - это кратно ускоряет загрузку сайта (по умолчанию многие страницы не содержат JS). Изображения автоматически оптимизируются и конвертируются в AVIF - самый мощный формат сжатия без потери качества, и WebP, на всякий случай.
Интернационализация (i18n)
Для переводов используется встроенный функционал Astro и специальная утилитарная библиотека createT. Вместе они позволяют максимально удобно в пару строчек переводить любые тексты на сайте. Вот так это работает:
const t = createT(lang as Locale, {
en: {
'Reviews': 'Reviews',
'View all reviews': 'View all reviews',
},
kk: {
'Reviews': 'Пікірлер',
'View all reviews': 'Барлық пікірлерді көру',
},
ru: {
'Reviews': 'Отзывы',
'View all reviews': 'Смотреть все отзывы',
},
})А затем можно использовать где угодно:
<h1>{t`Reviews`}</h1>
Заключение
Что получил клиент? Он получил невероятно крутой сайт с анимациями, на который можно добавлять кейсы и отзывы, а они будут автоматически появляться на всех нужных страницах, а ещё это все можно переводить на 3 языка. Сайт отлично отображается на всех устройствах, и быстро загружается.
Что получил я? Бесценное знание того, что невероятно сложно работать с клиентом, если клиент - ты сам.