ROXL - портфолио, блог и каталог ИИ-решений на трёх языках

Задача

ROXL это мой собственный сайт: портфолио клиентских и личных проектов, блог и каталог ИИ-решений и плагинов. Его нужно было легко наполнять новыми материалами, держать на трёх языках и сохранять быстрым по мере того, как растёт число кейсов и статей.

Решение

Сайт построен на Next.js с App Router и next-intl, у каждой страницы есть английская, русская и испанская версии. Статьи блога пишутся в MDX и собираются через Contentlayer, с поддержкой формул, цитирования, подсветки кода и блоков-подсказок в стиле GitHub. Кейсы проектов лежат в типизированных файлах данных, поэтому кейс без перевода роняет сборку, а не уходит на сайт незамеченным.

‹›

aA🔒roxl.net/

⇧▢+

RHomePProjectsBBlogAAI@About

Static snapshot — scrollable Safari preview

Статьи вместе с coding-агентом

Небольшой скринкаст того, как coding-агент помогает мне писать статьи в формате MDX. Я описываю, о чём должен быть материал, а агент готовит черновик в формате сайта, заполняет три языковые версии и проверяет, что сборка по-прежнему проходит.

Реализация

На страницах кейсов есть оглавление, время чтения и полоса прогресса, картинки открываются в лайтбоксе с увеличением, а превью вроде того, что выше, показывают сайт целиком в прокручиваемом окне браузера. В футере видны версия, коммит и время сборки, так что понятно, насколько свежая сборка стоит в продакшене. Сайт работает на Vercel с его аналитикой и Speed Insights.

Результат

На сайте больше 50 кейсов и больше 70 статей на трёх языках, а новый кейс или статья выходят в продакшен одним коммитом.