Как устроен этот сайт
Полная прозрачность: из чего собран buyanov.io — стек, разделы, приёмы, инструменты. Ничего магического. Именно этому я и учу — собирать такое своими словами через Claude.
Сайт — не «сел и написал». Он собран по рабочему методу, который я применяю ко всему. Стек ниже вторичен: сначала дисциплина, потом инструменты.
разрыв → наблюдение → действие → обратная связь → вывод → актив → следующий цикл сильнее. «Сильнее» меряется между двумя точками контакта с реальностью; нет замера — критерий не применяю.
Усиливает следующий цикл? Снижает хаос? Создаёт актив (файл, правило, шаблон, экран)? Даёт обратную связь из реальности? Нет хотя бы на один — не делаю.
Не плодить сущности, папки и уровни абстракции сверх нужного. Не полировать то, что ещё ни разу не встретилось с реальностью. Один активный цикл за раз — второй не открываю, пока не закрыт первый.
Все ключевые числа и правила живут в одном файле. Любая правка — сначала туда, потом в производные. Разбор приёма — в «Точке правды».
- Next.js 16 (App Router) — фреймворк
- React 19 + TypeScript — компоненты и типы
- CSS-переменные в globals.css — стили и темы (Tailwind — только в блоге)
- Vercel — хостинг, авто-деплой по git push
- Главная — герой с табами + пошаговый разбор
- Примеры, Нейросети, Инструменты — каталоги
- Маршруты (8 шт: М0–VPN) — с чек-листом и промптами
- Почему Claude, Цены, Сделай как я, Друзьям
- Статьи (блог), FAQ, О проекте, 404
- Markdown-файлы: content/blog, content/primery, content/instrumenty
- Маршруты — массив в app/routes-data.ts
- Схемы-картинки — public/figures/*.svg
- SiteNav — шапка + переключатель темы
- SiteFooter — подвал с навигацией
- RouteSteps — чек-лист маршрута с прогрессом
- CopyPrompt — промпт с кнопкой «Копировать»
- ZoomFigure — картинка с увеличением
- Динамические роуты [slug] — одна страница на много адресов
- Контент из markdown: gray-matter (шапка) + react-markdown (текст)
- Тема День/Ночь: CSS-переменные + анти-мигание (скрипт до отрисовки) + localStorage
- Прогресс маршрута — сохранение в localStorage
- Интерактив (табы, чек-листы, копирование) — клиентские компоненты
- SEO — sitemap/robots/метаданные/OG-картинка генерятся кодом
- Зумируемые схемы — лайтбокс по клику
- Шеринг — прямые ссылки-интенты в TG/WhatsApp/VK/OK
- gray-matter — читает frontmatter markdown
- react-markdown + remark-gfm — рендер markdown и таблиц
- next/font — шрифты Unbounded / Golos / JetBrains Mono
- next/og (ImageResponse) — иконка и OG-превью кодом
- Аналитика: Vercel (заходы) + Метрика/Clarity/GA по желанию — грузятся только после согласия на куки
- git / GitHub → Vercel — версии и деплой
- Многостраничник с воронкой по «лестнице слоёв»
- Тема День/Ночь
- Проходимые маршруты (прогресс + промпты)
- Примеры со сравнением «поиск ↔ AI» и схемами
- Каталоги нейросетей и инструментов (free/paid, VPN)
- Реферал + мультиканальный шеринг
- Блог на markdown, SEO + превью в мессенджерах
- Репозиторий на GitHub
- Хостинг: Vercel, домен buyanov.io
- Деплой: git push → авто-сборка