h HOOYAX·INFO

Сайт студии собран вместе с AI

hooyax.info — наша собственная витрина: одностраничник на React + Vite, который показывает, как мы строим клиентские проекты. Каждый блок — это законченный паттерн, который мы повторяем в кейсах.

live · hooyax.info React 18 · TypeScript 5 Vite · pnpm SPA · static deploy Schema.org · OG · sitemap
// о проекте

Сайт-визитка, в котором каждый элемент — рабочий пример того, как мы собираем интерфейсы вместе с AI

hooyax.info — не маркетинговый шаблон с фотостока. Это одностраничник, написанный с нуля: типографика, цвет, ритм, анимации, доступность, разметка для поисковиков. AI помогал на каждом шаге — от черновой структуры до микроправок CSS — но решения и архитектуру держали инженеры. Это и есть наш принцип: AI вшит в workflow, но не вместо людей.

6 услуг
от аудита до техподдержки — в одной структуре
4 роли
программисты · SRE · архитекторы · безопасность
11 kB
HTML с полной Schema.org-разметкой — без bloat
you@hooyax:~$ ./hooyax --features

Что внутри сайта

01

Терминал-герой с живой анимацией

В первом экране — анимированный псевдо-терминал: курсор, печать команд, отклик. Не «фоновое видео», а лёгкий React-компонент, который задаёт интонацию всей странице.

// component: TerminalHero.tsx
02

Услуги с раскрывающимися деталями

6 направлений в виде вкладок (S.01…S.06). Под каждой — кнопка «Подробнее», которая открывает процесс, артефакты, стек и сроки. Состояние держим на data-атрибутах, чтобы React не перетирал классы reveal-анимации.

// pattern: data-expanded attr
03

3D-флип карточки команды

Каждая роль — карточка с переворотом. Лицо: роль, описание, метрика. Оборот: стек и AI-практики. Авто-флип на hover/focus и явная кнопка — никакого «угадай, что эта иконка делает».

// transform: rotateY(180deg)
04

Адаптивный footer на SVG

«HOOYAX·info» в футере не ломается на узких экранах: текст — это <svg> с textLength и lengthAdjust="spacingAndGlyphs". Растягивается ровно по ширине блока на любом размере.

// trick: SVG textLength
JSON-LD
05

Полная Schema.org-разметка из коробки

В <head> — граф из Organization, WebSite и ProfessionalService с OfferCatalog на 6 услуг. У организации заполнены contactPoint и knowsAbout (21 компетенция). OG/Twitter, hreflang, canonical, sitemap.xml — собрано так, как мы делаем это клиентам.

// seo · entity-recognition ready
you@hooyax:~$ ./hooyax --status

Сайт в продакшене и развивается итерациями

hooyax.info ● live — в продакшене

Одностраничник работает на собственном VPS, отдаётся через nginx, обновляется маленькими релизами. Контент и UX-решения проверяем на себе: то, что сначала появляется здесь, потом превращается в готовый паттерн для клиентских проектов.

правка контента pnpm build rsync на VPS nginx · live за секунды
// стек и архитектура

Без фреймворк-bloat: только то, что реально нужно

Никаких Next.js, серверных раннеров и тяжёлых UI-китов под витрину. Сайт — статический бандл, который собирается за секунды и раздаётся как обычная папка. Это позволяет жить дёшево, быстро деплоиться и не зависеть от чужой инфраструктуры.

you@hooyax:~$ cat stack.config
  • 01 React 18.3 + TypeScript 5.6Компоненты, типы, никакой магии в рантайме
  • 02 Vite 5.4 + pnpmХолодный старт за секунды, ESM-сборка, контентные хеши на бандлах
  • 03 Кастомная типографикаGeist, Instrument Serif, JetBrains Mono — без UI-кита, всё на CSS-переменных
  • 04 IntersectionObserverReveal-анимации на классе .in — без тяжёлых scroll-библиотек
  • 05 nginx + статикаБандл выкатывается на VPS как обычная папка, без Node на проде
// что мы поняли в процессе

Сайт студии — самый честный кейс: видно ровно то, что мы умеем

Каждая мелочь — типографика, состояния флипа, длина строк, поведение раскрытий — это сообщение клиенту «вот так мы будем работать и у вас». Поэтому страница переписывалась раундами по UX-фидбеку, пока баланс контента и плотности не сошёлся.

live · hooyax.info
you@hooyax:~$ whoami

Мы инженеры, а не вайбкодеры-любители

Специалисты с профильным IT-образованием и опытом промышленной разработки. AI для нас — инструмент проектирования, разработки и тестирования, а не замена экспертизы.

you@hooyax:~$ ./hooyax --deploy --your-company

Сделаем такой же сайт под ваш бизнес

Соберём дизайн, контент и техническую часть — от типографики до Schema.org. С тем же подходом: AI в руках инженеров.

info@hooyax.info