softsup/portfolio

Фронтенд · 3 проекта · 2026

Сайты, которые работают,
а не только выглядят.

Каждый проект — рабочий фронтенд под реальную нишу: формы с валидацией доходят до демо-CRM, запись и бронь проверяют занятые слоты, анимации собраны на GSAP. Бэкенд эмулируется прямо в браузере — всё можно потрогать руками.

  • 01Живые формы → заявка в CRM
  • 02Онлайн-запись и бронь
  • 03Скролл-анимации GSAP
  • 04Адаптив от 375 px
  • 05Тесты Playwright

01 / 2026

Мира Орлова

Фотограф · бронь съёмки

Сайт-визитка fashion-фотографа. Тёмная «студия», где кадры горят розовым и бирюзовым гелем, и бронь съёмки по календарю.

  • Бронь: пакет → формат → календарь свободных дат → время, чек на лету, 409 при гонке, файл .ics
  • Hero с вырезанным портретом поверх гигантского имени, ленты кадров со skew от скорости скролла
  • Секции-«шторки», стопка серий, стена отзывов, плавающие 3D-объекты
  • 20 сгенерированных кадров одной световой схемы — без стоков
Открыть сайт Демо-CRM
portfolio.softsup.ru/mira
Главная страница Мира Орлова целиком
Наведите — пролистать

02 / 2026

БРИТВА

Барбершоп · онлайн-запись

Премиальный барбершоп в Петербурге: запись к мастеру в четыре шага и личный кабинет с переносом и отменой визитов.

  • Запись: услуга → мастер → слот → контакты, цена зависит от уровня мастера
  • «Мои записи» по номеру телефона: перенос, отмена с проверкой «не позднее чем за 2 часа», повтор визита
  • Hero-слайдер со шторкой clip-path, «призрачные» заголовки, живой статус «открыто до 22:00»
  • Блог со страницами статей
Открыть сайт Демо-CRM
portfolio.softsup.ru/britva
Главная страница БРИТВА целиком
Наведите — пролистать

03 / 2026

ПРОМКОР

Промышленное строительство · B2B

Корпоративный сайт генподрядчика: заводы, склады, энергетика. Строгая инженерная эстетика и интерактивная карта объектов.

  • Точечная карта России из геометрии Natural Earth (d3-geo), дуги к объектам и фильтр по отраслям
  • Этапы EPC — горизонтальный скролл с закреплением секции
  • Проекты с анимированным фильтром и полноэкранным лайтбоксом
  • Компетенции с превью-фото за курсором, счётчики, 3D-наклон карточек
Открыть сайт Демо-CRM
portfolio.softsup.ru/promkor
Главная страница ПРОМКОР целиком
Наведите — пролистать

Как сделано

Бэкенд

Эмуляция API

Mock Service Worker перехватывает запросы в браузере, данные лежат в localStorage. Заявки, брони, конфликты слотов (409) и демо-CRM на #/admin — как с настоящим сервером.

Качество

Автотесты

Playwright на 1440 и 375 px: консоль без ошибок, картинки, отсутствие горизонтального скролла, формы до успеха, CRM, меню и сквозные сценарии записи.

Визуал

Своя арт-дирекция

У каждого сайта своя тема, шрифтовая пара и характер анимаций. Ключевые изображения сгенерированы серией под бренд, а не взяты со стоков.

Стек

  • React 19
  • TypeScript
  • Vite
  • Tailwind CSS 4
  • GSAP + ScrollTrigger
  • Lenis
  • Motion
  • React Hook Form + Zod
  • Zustand
  • MSW
  • Swiper
  • Playwright