Колофон

Як зроблено цей сайт.

Стек, дизайнерські рішення і робочий процес цього портфоліо, яке саме по собі є окремим проєктом.

Фреймворк
Next.js 16
App Router, React 19
Мова
TypeScript
strict, без any
Компоненти
shadcn на Base UI
стилізовані власним CSS сайту
Стилі
Tailwind CSS v4
плюс власний CSS на дизайн-токенах
Хостинг
Vercel
прев’ю для кожної гілки, продакшн після мерджу
Мови
3
англійська, українська, російська
Стек

Архітектура

Кожна сторінка рендериться в статичний HTML під час збірки сайту. Невеликий проксі зіставляє кожну адресу з мовою, а решту віддає CDN.

Код
Репозиторій GitHubTypeScript · pnpm
Гілкапрев’ю-деплой після push
Збірка
Vercelnext build
Доставка
Статичні сторінкизгенеровані наперед
Проксіобирає мову
Домен
Cloudflare DNStymurmustafaiev.com
// мердж у main → продакшн приблизно за півтори хвилини

Дизайн

Одна гарнітура, Geist, і Geist Mono для дрібних даних. Один акцент — помаранчевий, і він рідкісний: підкреслення посилання, активний стан, точка статусу.

Кожен колір — це токен. Ті самі компоненти отримують світлу й темну теми лише завдяки заміні токенів, тож нічого не стилізується двічі. Перемкніть тему, щоб побачити, як змінюються зразки нижче.

Компоненти мають структуру shadcn на примітивах Base UI, але вигляд їм задає власний CSS сайту. Коли примітиви змінилися, дизайн лишився тим самим піксель у піксель.

  • Фон--bg
  • Поверхня--card-2
  • Текст--fg
  • Приглушений текст--fg-dim
  • Лінія--line-strong
  • Акцент--accent

Якість

Lint Правила дизайн-системи
@shadcn/lint не пропускає значення поза шкалою та перестилізацію компонентів на сторінках.
a11y Доступність за замовчуванням
Видимий фокус клавіатури, справжня семантика посилань і кнопок та анімація, що вимикається на ваше прохання.
i18n Три мови
Англійська, українська й російська, кожна за власною адресою, з hreflang-посиланнями між ними.
SEO Створено, щоб ним ділилися
Кожен кейс має власну картку попереднього перегляду, теги Open Graph і X та структуровані дані.

Чому такий стек

Я почав це портфоліо на Astro — очевидний вибір для статичного сайту. Потім перейшов на Next.js, щоб воно відповідало моєму власному архітектурному гайду для Next.js, за яким я роблю справжні продукти.

Сайту потрібні лише правила гайду щодо дизайн-системи та структури, тож важчі частини, як-от автентифікація і завантаження даних, лишилися поза ним. Лишилося те, за чим оцінюють фронтенд-інженера: компоненти, токени й деталі.