Как я улучшал свой сайт на Nuxt 4
Опыт по настройке резюме, блога и кастомизации темизации PrimeVue и Tailwind.
Антон Бушин
Последние недели я активно занимался доработкой личного сайта на Nuxt 4.
Проект начинался как простая визитка, но постепенно оброс резюме, блогом и красивыми визуальными эффектами.
Резюме в формате компонентов
Изначально я пытался встроить резюме в виде markdown, но быстро отказался от этого подхода.
Слишком сложно поддерживать вложенные списки и кастомные блоки. В итоге я вынес данные в отдельный resume.ts и сделал собственные компоненты:
ResumeHeader— шапка с контактами и кнопкой PDF.ResumeSection— универсальный блок с заголовком и контентом.ResumeSkills— вывод навыков с тегами.
Теперь изменения в резюме делаются в одном месте, а страница /resume выглядит аккуратно и структурированно.
Использование собственных компонентов вместо markdown сильно упростило контроль за стилем и структурой.
🎨 Темизация PrimeVue через CSS-переменные
Сначала я пытался кастомизировать PrimeVue через definePreset, но быстро понял, что проще и гибче — использовать CSS-переменные.
В primevue-overrides.css я завёл цвета для:
--p-primary-colorи его состояния (hover, active),--p-surface-*для поверхностей,--p-text-colorи--p-text-muted-color,--p-success-color,--p-info-color,--p-warning-color,--p-danger-color.
Это позволило синхронизировать цвета PrimeVue и Tailwind. Появились утилиты вроде bg-gradient-primary, bg-gradient-success и эффект glow-hover.
@layer base и @layer utilities — иначе Tailwind не обработает theme(colors.*).📝 Блоговые карточки с анимациями
Для блога я сделал компонент ArticleList.vue, который рендерит статьи через PrimeVue Card.
Эффекты:
- hover-анимация: карточка слегка увеличивается и подсвечивается,
- плавное появление:
fadeInUp, - разные тени для светлой и тёмной темы.
Теперь блог на /blog и блок последних статей на главной странице выглядят современно и живо.
🌌 Фоновые градиенты
Чтобы страница не выглядела плоской, я добавил градиенты фона.
Сверху — bg-gradient-primary, снизу — bg-gradient-success.
Они рендерятся через отдельный компонент <BackgroundGradients />, который размещается под контентом (z-0) и не мешает кликам (pointer-events-none).
Сначала я допустил ошибку: градиенты перекрывали весь контент. Решение оказалось простым — выставить z-[-1] или z-0 для градиента и z-10 для контента.
✅ Итог
Теперь сайт выглядит не просто как шаблон, а как аккуратный и продуманный проект.
Я использую стек:
- Nuxt 4 — современный SSR/SPA фреймворк.
- TailwindCSS — для быстрой стилизации и тёмной темы.
- PrimeVue 4 — готовые компоненты с темизацией через переменные.
- @nuxt/content — для блога.
Впереди ещё задачи: сделать PDF-версию резюме, добавить поиск по статьям и настроить автоматические деплои.
А вы используете собственные компоненты или предпочитаете держать всё в markdown? 😉