bazuev.dev
Личный сайт-портфолио с интерактивной 3D-графикой
Витрина инженерного уровня: три WebGL-слоя считаются в Web Worker, главный поток свободен. Резюме для печати собирается из тех же данных, что и сайт.
Результат
4 замера- 3
- Web Worker на OffscreenCanvas
- 13
- 3D-моделей в сцене
- 2
- языка из одного источника
- 1
- источник для сайта и резюме A4
Замер: Исходный код проекта: src/components, public/assets/3d/models, src/data/site.ts.
Задача
Показать уровень фронтенда одной страницей: 3D, интерактив и скорость, а не список технологий.
Контент на двух языках из одного источника и печатная версия резюме A4 из тех же данных, без ручной вёрстки второй копии.
Визуал
Фрагменты интерфейса
-
01 Услуги карточками поверх рельефа, который рисуется в воркере
UI-кит проекта
UI-кит проекта6 цветов
- Бумага
#F4EFE8 - Бумага глубокая
#EDE5D8 - Чернила
#181613 - Терракота
#B5654A - Графит
#2E3438 - Волосяная
#D6CFC4
- Fraunces
- Заголовки, курсив в акцентах
- Switzer
- Текст
- Geist Mono
- Подписи и кнопки
Техника
Схема связей
Как устроено
Слева направо: путь данных от человека до сервера и внешних сервисов.
Страница Astro
- Контент en и ru один файл данных
- Режим печати резюме A4
Главный поток
- Только интерфейс Vue-острова, Lenis
Web Worker
- Рельеф и карусель OffscreenCanvas
- Параглайдер three.js и физика Rapier
Инженерные решения
- 01
3D вне главного потока
Вся графика, физика и анимация работают в Web Worker на OffscreenCanvas. Прокрутка и клики не ждут, пока досчитается кадр.
- 02
Один интерактивный слой
Интерактивен ровно один слой, остальные декоративные. При reduced-motion, в печати и в простом режиме анимация выключается целиком.
- 03
Резюме из тех же данных
Печатная версия A4 собирается из данных сайта, размер листа проверяет скрипт через Puppeteer. Тот же подход дал портфолио 2026: один HTML и для веба, и для PDF.
Стек
- Astro 6
- Vue 3
- Three.js
- Rapier
- GSAP
- Tailwind 4
- TypeScript
Ход работ
3 отметок- Месяц 1 Каркас, рельеф и режим печати Astro, расчёты в воркерах, резюме из тех же данных
- Месяц 2 Параглайдер и страница полёта
- Месяц 4 Портфолио 2026 листы 16:9, PDF и шоурил из одного HTML
Хочу похожий
Расскажите про свой проект. Разберу задачу так же, как bazuev.dev: спрос, сроки, вилка бюджета и что можно не делать.
Хочу похожий проект
Первая консультация бесплатно. Разберу задачу, назову сроки и вилку бюджета. Если задача решается дешевле или вообще без меня, скажу об этом прямо.
- Ответ
- в течение рабочего дня
- Регион
- Москва и Московская область
- Почта
- hi@bazumax.ru