Инструменты
Из чего сделан этот сайт.
Считайте это колофоном. Рассказ о том, как устроена страница, которую вы читаете, и на что она ссылается, плюс пара слов о машине, на которой всё это написано. Никаких партнёрских ссылок и никакой техники, которой я на самом деле не пользуюсь.
Этот сайт
Интерфейс здесь сделан вручную. Под ним нет библиотеки компонентов — только headless-примитивы и мои собственные стили поверх небольшого набора токенов. Один из проектов ниже, Forge, — как раз библиотека компонентов, так что можно было бы решить, что сайт работает на ней. Нет. У Forge спокойный, корпоративный тон: он к месту в дашборде и неуместен на такой странице, поэтому у сайта свой, собранный вручную UI.
- Фреймворк
- Astro 7, static-first. Каждая страница — это HTML на этапе сборки; в браузер уезжает лишь горстка островков, которым JavaScript действительно нужен.
- Стилизация
- Tailwind 4 поверх собственного слоя токенов. Две темы, обе вручную настроены в oklch, а не одна вывернута из другой.
- Компоненты
- Headless-примитивы Radix, собранные с моими стилями через class-variance-authority. Никакого готового набора компонентов под капотом.
- Hero
- GLSL-шейдер aurora на three.js и React Three Fiber, написанный руками и загружаемый только на главной.
- Анимация
- GSAP для скролл-хореографии, Framer Motion для интерфейса. Всё это сворачивается при reduced-motion.
- Командное меню
- cmdk за ⌘K, чтобы весь сайт был доступен с клавиатуры.
- Шрифт
- Bricolage Grotesque — один вариативный гротеск и на крупных заголовках, и в тексте; на кириллице его подхватывает Golos Text.
- Язык
- TypeScript в строгом режиме, проверка типов через astro check на каждой сборке.
- Хостинг
- Vercel.
Проекты
Несколько имён выше — и ещё пара — это мои проекты. Два готовы, три пока в работе, исходники открыты у каждого.
Aurora
ГотовБраузерная песочница для написания GLSL в реальном времени
Pulse
ГотовМетрики основателя из нескольких сервисов на одном экране
Forge
ГотовHeadless-библиотека компонентов для насыщенных данными дашбордов
Canvas
В разработкеСовместный редактор, где диаграмма и её код всегда синхронны
Strider
В разработкеПриватные голосовые заметки с расшифровкой прямо на телефоне
Каждый день
Большая часть кода пишется в VS Code, для тяжёлых рефакторингов достаю WebStorm. Машина — десктоп, который я собрал сам: Ryzen 5 5600, Radeon RX 6750 XT, 16 ГБ памяти, под Windows. Ничего топового, и это намеренно: примерно на таком железе сидит и обычный посетитель. Если сайт быстрый здесь, он должен быть быстрым и у него.
- TypeScript
- React
- React Native
- Redux Toolkit
- React Router
- React Hook Form
- Vite
- Tailwind
- SCSS
- Микрофронтенды
- Дизайн-системы
- JSON Schema
- WebSocket
- WebRTC
- HLS
- Figma
- Анимация
- Доступность