Frontend Design — портфолио 3D-промышленного дизайнера

Премиальный одностраничный сайт-портфолио для 3D/промышленного дизайнера. Целевая аудитория — производственные компании и B2B-клиенты (это вымышленный проект-демо).

О проекте

Сайт создан, чтобы эффектно показать работы дизайнера: живой 3D-рендер в первом экране, интерактивный просмотр продукта с возможностью менять цвет прямо в браузере, портфолио с фильтрами и анимированные секции. Дизайн выполнен в тёмной «природной» палитре (глубокий зелёный, кремовый, латунь).

Возможности

• Preloader — анимированный экран загрузки со счётчиком
• Hero с 3D-сценой — абстрактная скульптура реагирует на движение мыши
• 3D-просмотр модели — кресло можно вращать мышью и менять цвет (5 оттенков)
• Портфолио — фильтры по категориям, 3D-наклон карточек, лайтбокс с описанием проекта
• Анимации — появление секций при скролле, счётчики цифр, параллакс
• Уникальные фишки — кастомный курсор, магнитные кнопки, бегущая строка, прогресс-бар скролла, плёночное зерно
• Форма заявки — валидация полей и экран успешной отправки
• Адаптивность — от десктопа до мобильных (360px)

Технологии

Технология	Назначение
React 18 + Vite + TypeScript	Фреймворк, сборка, типизация
Three.js + @react-three/fiber + drei	3D-сцены (WebGL)
Framer Motion	Анимации и переходы
Google Fonts (Unbounded, Manrope)	Типографика с кириллицей

Требования

• Node.js 18+ и npm (проверено на Node 24)

Запуск

# 1. Установить зависимости
npm install

# 2. Запустить dev-сервер (http://localhost:5173)
npm run dev

# 3. Сборка для продакшена (папка dist/)
npm run build

# 4. Локальный просмотр продакшен-сборки
npm run preview

Структура проекта

src/
├── app/App.tsx                 — композиция страницы
├── components/
│   ├── layout/                 — обвязка: Preloader, Navbar, Footer, Marquee, Cursor, ScrollProgress, Noise
│   ├── sections/               — секции: Hero, About, Portfolio, ModelViewer, Services, Contact
│   ├── three/                  — 3D-сцены: HeroScene, ChairScene
│   └── ui/                     — переиспользуемые: SectionHeading, Magnetic, ProjectArt
├── hooks/useCountUp.ts         — хук анимации счётчиков
├── data/                       — контент сайта (тексты, работы, услуги)
└── index.css                   — палитра и базовые стили

Настройка контента

Все тексты, проекты и услуги вынесены в src/data/ — менять их можно без правки кода:

• site.ts — имя, контакты, навыки, цифры
• projects.ts — работы портфолио и категории
• services.ts — услуги и цены

Изображения реальных работ кладутся в public/works/ и указываются в projects.ts (сейчас используются SVG-плейсхолдеры в палитре сайта).

Оптимизация

• Стартовый JS ~344 КБ (вместо 1246 КБ): three.js загружается после preloader, 3D-просмотр — по требованию
• Code-splitting по вендорам (react / motion / three)
• 3D-окружение рендерится локально, без внешних CDN-зависимостей