Я несколько раз пересобирал этот сайт. Первая версия — на чистом React + Vite. Вторая — попытка добавить SSR. Третья, текущая — миграция на Astro. Каждый раз я понимал что-то новое не только про технологии, но про то, что такое хорошее портфолио.
Сейчас сайт — это не просто место, где лежат ссылки на проекты. Это рабочий аргумент в пользу того, как я подхожу к разработке.
Анализ: почему большинство портфолио не работают
Я изучил десятки портфолио разработчиков и выявил два полюса:
Полюс «просто»: список проектов с GitHub-ссылками, технологии в виде иконок, никакого нарратива. Технически возможно — но ничего не говорит о мышлении.
Полюс «сложно»: Three.js, WebGL, анимации на весь экран. Красиво, но грузится 10 секунд, и текст теряется за эффектами.
Мой вывод: лучшее портфолио — то, которое быстро загружается, честно рассказывает истории и само является примером правильной разработки. Все три критерия одновременно.
Решение: Astro Islands как архитектурный выбор
Переход с React SPA на Astro был ключевым решением. Islands Architecture означает: страница рендерится в статический HTML на сервере, а интерактивные компоненты (анимации, формы, переключатель темы) «гидрируются» только тогда и там, где они нужны.
Практический эффект: пользователь видит полностью отрендеренную страницу немедленно. JavaScript загружается и выполняется только для интерактивных островов, а не для всей страницы.
Статичный HTML (Astro)
├── Текст, SEO, структура — нет JS
├── AnimatedSection (client:visible) — гидрируется при появлении в viewport
├── ParticleBackground (client:load) — гидрируется сразу
└── ContactForm (client:load) — гидрируется сразуЭто позволило получить Lighthouse 95–100 без компромиссов по визуалу.
Дизайн-система
CSS-токены для всех визуальных параметров: цвета, отступы, радиусы, тени. Dark/light mode без «мигания» (flash of unstyled content) — тема определяется до первого рендера через script в <head>.
Компоненты эффектов — GlitchText, TypingAnimation, ParticleBackground, HolographicCard, MouseTrail — написаны как отдельные переиспользуемые модули с понятным API.
Блог на MDX
Технический блог — это не просто контент-маркетинг. Это способ показать, что я умею объяснять сложные вещи. MDX позволяет вставлять React-компоненты прямо в статьи — интерактивные примеры, живые демо, кастомные блоки.
Коллекция контента в Astro со строгой Zod-схемой: все поля типизированы, сборка падает если что-то не так.
SEO и структурированные данные
Person разметка на главной странице, CollectionPage для портфолио, Article для блога. Все канонические URL прописаны явно. sitemap.xml и robots.txt генерируются автоматически при сборке.
CI/CD с smoke-тестами
Bash-скрипт деплоя делает четыре вещи:
- Собирает проект (
astro build) - Загружает архив на VPS
- Очищает Nginx cache (инвалидация статики)
- Запускает smoke-тесты: проверяет HTTP 200, наличие корректного title на каждой странице
Если тест не прошёл — деплой считается неудачным. Это простое, но работающее QA-ограждение.
Результат
Lighthouse 95–100 по всем четырём метрикам: Performance, Accessibility, Best Practices, SEO. Время до первого байта — под 200ms.
Но главный результат не технический. Этот сайт — это ответ на вопрос «как ты подходишь к работе?» Он быстрый, потому что я считаю, что медленные сайты — это неуважение к пользователю. Он рассказывает истории, потому что список технологий без контекста не имеет ценности. Он сделан по тем же стандартам, по которым я делаю коммерческие проекты.
Так и должно быть.