Это сайт, на котором вы сейчас находитесь. Это проект на Next.js 14, построенный и поддерживаемый как небольшой продукт, а не шаблон — кодовая база открыта, так что все детали ниже можно проверить. Он набирает 99/100 на десктопе и 97/100 на мобильных в Lighthouse, при 100 по Доступности и SEO.
Что в нём есть
-
12 языков: сайт доступен на английском, немецком, испанском, французском, хинди, итальянском, японском, корейском, португальском, русском, турецком и китайском. Типизированный языковой контекст и карта переводов управляют переключателем, который запоминает ваш выбор и обновляет атрибут
langстраницы, чтобы экранные читалки и поисковые системы читали правильный язык. Покрыта каждая строка, включая форму обратной связи. -
Фон из частиц, который остаётся быстрым: точки, следующие за курсором, рисуются на canvas. Ранняя версия подтормаживала, потому что измеряла положение canvas при каждом движении мыши, вынуждая постоянный пересчёт раскладки. Кэширование этого измерения убрало рывки, а ленивая загрузка частиц держит их вне первой отрисовки — это и дало большую часть прироста до 99 на десктопе.
-
Аналитика, которую блокировщики рекламы не ломают потихоньку: аналитические скрипты, загружаемые со сторонних доменов, молча отбрасываются блокировщиками вроде uBlock и Brave, теряя 20–40% событий без всякого предупреждения. Маршрутизация аналитики через собственный домен сайта сохраняет данные первой стороны в целости. Umami обеспечивает статистику, дружественную к приватности; Google Tag Manager — всё остальное.
-
Базовое SEO, сделанное как надо: структурированные данные для персоны и каждого проекта, корректные языковые теги во всех 12 версиях каждой страницы, канонические URL, чтобы переводы не конкурировали друг с другом, и карточки предпросмотра для соцсетей, генерируемые для каждого проекта.
-
Доступность: ссылка «перейти к содержимому», видимые контуры фокуса для тех, кто пользуется клавиатурой, контраст текста, проходящий по AA, декоративные анимации, скрытые от экранных читалок, и языковое меню, собранное как корректная навигируемая разметка, а не стилизованный div.
-
Контент — это просто Markdown: добавить проект — значит положить Markdown-файл в папку нужного языка; он появится при следующем деплое, полностью типизированный, без изменений кода. Просмотры страниц считает небольшая serverless-функция, которая хеширует IP, а не хранит их, так что нет ни cookies, ни персональных данных.
Почему это важно
Сайт заодно служит рабочим примером того, как построены остальные проекты — производительность, аналитика, уважающая приватность, поддержка нескольких языков и доступность, всё в одном месте, которое можно осмотреть. Поскольку репозиторий открыт, код можно сверить с описанием.