Как сделан этот сайт.
Стек, дизайнерские решения и рабочий процесс этого портфолио, которое само по себе — отдельный проект.
Архитектура
Каждая страница рендерится в статический HTML при сборке сайта. Небольшой прокси сопоставляет каждый адрес с языком, а остальное отдаёт CDN.
Дизайн
Одна гарнитура, Geist, и Geist Mono для мелких данных. Один акцент — оранжевый, и он редкий: подчёркивание ссылки, активное состояние, точка статуса.
Каждый цвет — это токен. Одни и те же компоненты получают светлую и тёмную тему только за счёт замены токенов, поэтому ничего не стилизуется дважды. Переключите тему, чтобы увидеть, как меняются образцы ниже.
Компоненты устроены как в shadcn, на примитивах Base UI, но внешний вид им задаёт собственный CSS сайта. Когда примитивы сменились, дизайн остался прежним пиксель в пиксель.
- Фон
--bg - Поверхность
--card-2 - Текст
--fg - Приглушённый текст
--fg-dim - Линия
--line-strong - Акцент
--accent
Качество
Почему такой стек
Я начал это портфолио на Astro — очевидный выбор для статического сайта. Потом перешёл на Next.js, чтобы оно следовало моему собственному архитектурному гайду для Next.js, по которому я делаю настоящие продукты.
Сайту нужны только правила гайда о дизайн-системе и структуре, поэтому более тяжёлые части, вроде аутентификации и загрузки данных, остались за бортом. Осталось то, по чему оценивают фронтенд-инженера: компоненты, токены и детали.