Profile — техническое портфолио с акцентом на производительность и опыт разработчика
Демо: https://profile-orpin-zeta.vercel.app
Репозиторий: https://github.com/LiiChar/profile
Цель проекта
Создать не просто «красивую страничку», а полноценное демонстрационное поле для всех современных веб-технологий, которые автор использует в реальных проектах. Это одновременно и портфолио, и sandbox, и технический блог.
Технологический стек
- Framework: Next.js 14 (App Router) + React 19 (RC)
- Типизация: TypeScript 5.5 с strict mode
- Стили: Tailwind CSS + CSS Modules + GLSL шейдеры
- 3D: Three.js + @react-three/fiber + @react-three/drei
- Анимации: Framer Motion + GSAP + custom spring physics
- Производительность: Next.js Image, Font optimization, Script strategy=lazyOnload
- Тестирование: Vitest + React Testing Library + Cypress E2E
- Аналитика: Umami (self-hosted)
Ключевые технические особенности
- 100/100 Lighthouse на всех метриках даже с включённым 3D-фоном.
- Shader-based hero — полностью на GPU, не тормозит даже на слабых устройствах.
- Dynamic island как на macOS — интерактивный элемент в правом нижнем углу.
- MDX-блог с живыми примерами кода (REPL прямо в статье).
- Theme engine с 12 предустановленными темами и возможностью создавать свои.
- WebGL transitions между страницами вместо обычных маршрутов.
- Progressive enhancement — работает даже без JS (текстовый fallback).
Запуск локально
git clone https://github.com/LiiChar/profile.git
cd profile
npm install
npm run dev
# → http://localhost:3000
Для сборки продакшена:
npm run build && npm run start
Roadmap
- Интеграция с CMS (Contentlayer → Sanity)
- AI-ассистент для генерации статей
- WebContainer-based live coding прямо на сайте
- Версия на Tauri как десктоп-портфолио
Этот проект — живое доказательство того, что портфолио может быть не только красивым, но и технически безупречным.