Этот портфолио
Персональное портфолио, демонстрирующее полный цикл: дизайн-систему в Penpot, вёрстку на Vue 3/Nuxt 4, техническое SEO и собственный деплой — от макета до продакшена одним человеком.
Задача
Нужен был собственный сайт-визитка, который не просто рассказывает о навыках, а сам является доказательством: дизайн-система с нуля, адаптивная вёрстка без конструкторов и шаблонов, техническое SEO и надёжная инфраструктура — то есть ровно то, что предлагается клиентам в услугах.
Решение
- Дизайн-система с нуля в Penpot — токены цвета, типографики и отступов, компоненты и их варианты, макеты всех страниц для десктопа и мобильных
- Четыре цветовые темы и два стиля скруглений, переключаемые на лету — состояние хранится в cookie, поэтому без мигания при загрузке
- Вёрстка на Vue 3 + Nuxt 4 и TypeScript: переиспользуемые компоненты, SSR, адаптив по макетам, доступность с клавиатуры
- Техническое SEO: meta и Open Graph на каждой странице, Schema.org, автогенерация sitemap.xml и robots.txt
- Тесты: unit на Vitest и 27 E2E-сценариев на Playwright для десктопа и мобильных
- Форма обратной связи с доставкой заявок в Telegram, защитой от спама и резервной копией на диске
- Деплой через git push на собственный сервер (nginx + pm2) — без зависимости от сторонних облачных сервисов
Результаты
Lighthouse, мобильный профиль: SEO — 100, Best Practices — 100, Accessibility — 96.
Данные о скорости на реальном хостинге и позициях в поиске появятся после запуска и накопления статистики.
Галерея
тёмная тема
портфолио — галерея
страница «Услуги»
мобильная версия
Технологический стек
Нужен похожий проект?
Обсудим вашу задачу и предложу подходящее решение.