Возможности разработчика,
не каталог шаблонов.

01 / О ПРОЕКТЕ

Портфолио и лаборатория в одном продукте

Сайт совмещает две задачи: портфолио — статические страницы (главная, о проекте, обо мне, контакты) с акцентом на аккуратную вёрстку и интерактивные детали интерфейса; THE.LAB — витрина UI-экспериментов, где каждый эффект это отдельный демо-стенд с живым эффектом, «паспортом» технологий, оценкой сложности, просмотром исходного кода и интерактивной debug-панелью.

Ключевая идея лаборатории — показать, что богатые интерактивные эффекты (притяжение к курсору, parallax, кинетическая типографика, генеративные фоны и т.д.) достижимы без тяжёлых сторонних библиотек: только CSS-переменные, transform, requestAnimationFrame, Pointer Events, IntersectionObserver и ResizeObserver.

02 / ОСОБЕННОСТИ

THE.LAB и инженерная инфраструктура

THE.LAB — 50+ экспериментов в 8 активных категориях (плюс 2 запланированных): cursor — эффекты на движение мыши; scroll — parallax, timeline, pinned/sticky-сцены; hover — tilt/lift/flip карточки, glow border, image reveal; navigation — morph menu, floating dock, radial-навигация; components — accordion, modal, tabs, tooltip; layout — живые сетки, split-screen, resizable-панели; backgrounds — noise, gradient mesh, particles; typography — variable fonts, mouse distortion, animated headlines. Категории physics и experimental — в планах.

Паспорт эксперимента — бейджи о технологиях (CSS Only, JavaScript, requestAnimationFrame, CSS Variables, SVG, clip-path, mask, IntersectionObserver, ResizeObserver, Pointer Events, No Libraries) и уровень сложности от Easy до Hard.

Исходник каждого эксперимента доступен на странице демо с копированием в буфер обмена; исходники синхронизируются в ассеты скриптом sync:lab-sources. Debug-панель — слайдеры параметров эффекта и монитор в реальном времени: FPS, координаты курсора, значения CSS-переменных.

Server-Side Rendering и пререндер через @angular/ssr и Express, с client hydration для быстрой первой отрисовки и корректной индексации. SEO — динамические title/description/Open Graph на каждую страницу, автогенерация sitemap.xml, robots.txt. Компоненты экспериментов подгружаются лениво через loadComponent. Standalone-компоненты без NgModule; состояние в основном на Angular Signals (signal/input), RxJS используется точечно — например, обработка событий роутера. Старые URL (*.html, lab-magnetic-button и т.п.) редиректят на актуальные маршруты.

03 / СКОРО

Эффекты с библиотеками

Следующий раздел — контраст к Lab: те же идеи интерактивности, но с участием профильных инструментов — GSAP, Three.js и аналоги. Здесь важен не только визуальный результат, но и грамотная интеграция тяжёлых зависимостей в Angular-приложение.

Lab и этот раздел скорее дополняют друг друга: в одном случае эффект собран вручную, в другом — на профильных инструментах, если они действительно уместны.

04 / ТЕХНОЛОГИИ

Стек проекта

Angular 17.3 со standalone-компонентами и Signals; SSR и prerender через @angular/ssr и @angular/platform-server; Express 4 как сервер; TypeScript 5.4, SCSS; состояние в основном на Angular Signals, RxJS 7.8 — точечно (навигация); embla-carousel для карусели; Karma и Jasmine — минимальное покрытие; Node.js и zone.js в runtime.

05 / СТРУКТУРА

Организация репозитория

Код разделён на инфраструктуру (core), переиспользуемые компоненты (shared), layout, feature-модули (home, about, projects, contact, lab) и серверные скрипты для SSR, синхронизации исходников и генерации sitemap.

src/
├── app/
│   ├── core/                 # Инфраструктура: конфиги, сервисы, утилиты
│   │   ├── config/           # site-pages, navigation
│   │   ├── services/         # page-meta (SEO), mouse-tracker
│   │   └── utils/
│   ├── shared/               # Переиспользуемые компоненты и директивы
│   │   ├── components/       # layout, button, toggle, breadcrumbs, pointer и др.
│   │   └── directives/       # reveal-on-scroll
│   ├── layout/               # header, footer
│   ├── features/
│   │   ├── home/             # Главная (hero, ambient canvas)
│   │   ├── about/            # Обо мне
│   │   ├── projects/         # О проекте
│   │   ├── contact/          # Контакты
│   │   └── lab/              # THE.LAB
│   │       ├── data/         # experiments.ts, experiment-loaders.ts
│   │       ├── models/       # Experiment, LabCategory, PageMeta
│   │       ├── components/   # Карточки, галерея, debug-панель, code-view
│   │       ├── shell/        # Layout демо-стендов
│   │       └── experiments/  # Компоненты эффектов по категориям
│   ├── app.routes.ts
│   ├── app.config.ts
│   └── app.component.ts
├── assets/, fonts/, img/, files/
├── index.html
├── main.ts / main.server.ts
├── robots.txt / sitemap.xml
└── styles.scss
scripts/
├── sync-lab-sources.js
└── generate-sitemap.js
server.ts