dev-portfolio-template — Next.js 作品集模板

SHA-256: 70fc7ff2d4b6a067be3fabb08701ff5181301b59165aeab1ae649edf517c682e

2026-10-14T21:07:41.960Z

# Шаблон портфолио разработчика

Готовый сайт-портфолио для разработчика или небольшой студии. Страницы кейсов,
форма заявки, которая не теряет обращения, система посадочных страниц под
поисковые запросы, документы по 152-ФЗ и три эффекта, из-за которых сайт
выглядит сделанным, а не собранным: жидкость под курсором на WebGL, объёмный
значок из Blender и параллакс на прокрутке.

Next.js 15 App Router, TypeScript, Tailwind CSS 4, Motion, GSAP, Lenis, three.js.
Тёмная и светлая темы. Интерфейс на русском, все строки лежат в нескольких
файлах данных.

> Это шаблон, снятый с работающего сайта. Личные данные, клиентские работы и
> счётчики аналитики убраны. Каждый текст, который вы увидите, это заглушка под
> ваш собственный.

## Быстрый старт

```bash
npm install
cp .env.example .env.local     # необязательно, форма работает и без него
npm run dev                    # http://localhost:3000
```

Нужен Node 20 или новее.

Дальше откройте `lib/site.ts` и впишите имя, контакты и домен. Из этого файла
собираются шапка, подвал, метаданные, карта сайта и микроразметка.

> Не запускайте `npm run build`, пока работает `npm run dev`. Оба пишут в `.next`
> и затирают друг друга, после чего сервер разработки начинает отдавать 500.
> Если так вышло: остановите dev, удалите `.next`, запустите заново.

## Что внутри

| Путь | Что это |
| --- | --- |
| `lib/site.ts` | Имя, контакты, часовой пояс, меню, счётчики аналитики |
| `lib/projects.ts` | Кейсы: тексты, стек, ссылки, число экранов |
| `lib/project-details.ts` | Подробности кейса и подписи к экранам |
| `lib/content.ts` | Услуги, стек, процесс, отзывы и вопросы на главной |
| `lib/seo/` | Посадочные страницы и статьи блога, по группам |
| `lib/legal.ts` | Данные оператора для юридических страниц |
| `app/api/lead/route.ts` | Приём заявки: проверка, лимит, запись, доставка |
| `app/globals.css` | Палитра, шкала шрифтов, анимации, стили эффектов |
| `components/ui/` | Свечение за курсором, поля, кнопка, параллакс, 3D-значок |
| `blender/code-mark.py` | Скрипт, который моделирует значок `</>` |
| `public/work/<slug>/` | Медиа одного кейса |

## Страницы

| Адрес | Назначение |
| --- | --- |
| `/` | Главная: первый экран, работы, подход, услуги, стек, процесс, отзывы, вопросы, контакты |
| `/work/<slug>` | Кейс с роликом, галереей и подписями |
| `/uslugi` | Каталог посадочных страниц по группам |
| `/uslugi/<slug>` | Отдельная страница под запрос |
| `/blog`, `/blog/<slug>` | Статьи |
| `/privacy`, `/consent` | Документы по персональным данным |
| `/admin?token=…` | Список заявок, закрыт от поисковиков |

## Медиа для кейсов

Каждый кейс берёт файлы из `public/work/<slug>/`. В шаблоне лежат три
демонстрационных проекта с заглушками, поэтому все раскладки работают сразу.
Замените их своими, сохранив имена:

| Файл | Размер | Где используется |
| --- | --- | --- |
| `01.jpg`, `02.jpg`, … | 1760 × 1100 | Галерея на странице кейса |
| `poster.jpg` | 880 × 550 | Карточки, сетка, параллакс, обложка ролика |
| `clip.mp4` | 1280 × 800, без звука | Видеоблок на странице кейса |
| `preview.mp4` | 640 × 400, без звука | Превью под курсором в списке работ |

Нумерация начинается с `01` и не должна прерываться. В `lib/projects.ts`
поставьте в поле `shots` число добавленных кадров: столько галерея и покажет.

Удобный способ их получить: снять медленную прокрутку живого сайта через
Playwright, затем нарезать кадры и собрать ролики в ffmpeg. Видео без звука,
`preview.mp4` грузится только при наведении, `clip.mp4` когда доходит до экрана.

## Форма заявки

Заявка пишется на диск **до** попытки доставки, поэтому обращение не теряется,
даже если канал уведомлений лежит. Каналы перебираются по очереди, достаточно
одного успешного:

1. **Telegram**: задайте `TELEGRAM_BOT_TOKEN` и `TELEGRAM_CHAT_ID`. Команда
   `npm run telegram:chat-id` найдёт идентификатор чата сама. Если с вашего
   сервера `api.telegram.org` недоступен, укажите свой прокси в
   `TELEGRAM_API_BASE`.
2. **ntfy.sh**: задайте `NTFY_TOPIC` длинной случайной строкой и подпишитесь на
   неё в приложении ntfy. Аккаунт не нужен, работает из закрытых сетей.
3. **Почта через Resend**: `RESEND_API_KEY`, `LEADS_EMAIL_TO` и
   `LEADS_EMAIL_FROM`. Выручает, когда хостер закрыл порты SMTP.

Заявки лежат в формате JSON Lines в каталоге `LEADS_DIR` (по умолчанию `.data/`)
и открываются по адресу `/admin?token=$ADMIN_TOKEN`. На бою держите этот каталог
вне папки с релизом, чтобы он пережил выкладку.

Встроенная защита: скрытое поле-ловушка, три заявки с адреса за десять минут,
ограничение длины каждого поля и экранирование HTML перед отправкой.

## Посадочные страницы

Из типизированных данных генерируются две ветки: услуги в `/uslugi` и статьи в
`/blog`. У каждой страницы свои заголовок, описание, канонический адрес,
хлебные крошки, микроразметка `Service` или `Article`, блок вопросов и ссылки на
смежные страницы и кейсы. Всё это само попадает в карту сайта.

Чтобы добавить страницу, допишите объект в `lib/seo/pages.ts` или
`blog-posts.ts`. Обязательные поля описаны в `lib/seo/types.ts`.

Одно предупреждение, которое стоит повторить: не плодите десятки почти
одинаковых страниц перестановкой ключевых слов. Поисковики это узнают и
понижают сайт целиком. У каждой страницы должны быть свой текст, своя цена и
свои примеры, иначе она не нужна.

## Эффекты

**Жидкость под курсором.** Симуляция несжимаемой жидкости на WebGL: движение
мыши впрыскивает импульс в поле скоростей, краситель переносится потоком и
растворяется. Настройки лежат в `components/fluid-backdrop.tsx`.

**Объёмный значок.** Значок `</>` в первом экране собирается скриптом, а не
руками:

```bash
blender --background --python blender/code-mark.py
```

Скрипт строит контуры штрихов, выдавливает их, снимает фаски, прорезает канавку
в передней грани и вкладывает внутрь светящуюся вставку, после чего выгружает
`public/hero/code-mark.glb` (30 КБ, 641 полигон, два материала). Пропорции
задаются константами в начале файла. three.js освещает модель процедурной картой
окружения, поэтому отдельный HDRI-файл не нужен.

**Параллакс.** Сцена на GSAP ScrollTrigger прилипает к экрану и разводит
скриншоты проектов по четырём слоям глубины.

**Свечение за курсором, подсветка полей, блик на кнопке.** Позиция курсора
пишется прямо в CSS-переменные, поэтому React при движении мыши ничего не
перерисовывает.

Всё, что двигается, выключается, если в системе включён режим уменьшенной
анимации. Тяжёлые эффекты дополнительно требуют мышь, ширину от 1024 пикселей,
четыре ядра и рабочий WebGL, иначе заменяются статикой.

## Аналитика

Идентификаторы задаются в объекте `analytics` в `lib/site.ts`. Пустая строка
полностью выключает счётчик, а заодно убирает упоминание о нём из плашки про
cookie и из политики обработки данных, чтобы документы не обещали того, чего
сайт не делает. Из коробки поддерживаются Яндекс.Метрика с Вебвизором, Google
Analytics 4 и проверочный тег Яндекс.Вебмастера.

Счётчики работают только на боевом домене, поэтому разработка не портит
статистику. При переходах внутри сайта просмотр отправляется вручную, первый
просмотр не считается дважды. Поля формы помечены `ym-hide-content` и
`ym-disable-keys`, так что в записи Вебвизора не попадают имя, контакт и текст
сообщения.

При успешной отправке срабатывает цель `lead`: `reachGoal` в Метрике и
`generate_lead` в GA4.

## Документы по персональным данным

Страницы `/privacy` и `/consent` идут рабочими черновиками: что собирает форма,
зачем, где хранится, сколько и как отозвать согласие. В форме есть отдельная
галочка согласия без предварительной отметки, внизу плашка про cookie.

Перед публикацией заполните `lib/legal.ts`, значения в скобках это заглушки. Эти
документы отправная точка, а не юридическая консультация: покажите итоговый
текст юристу.

## Выкладка

Работает везде, где есть Node. Сборка идёт в режиме `output: 'standalone'`,
команда `npm run deploy` собирает проект локально, отправляет архив по SSH,
подменяет каталог релиза и перезапускает службу systemd, оставляя прошлую
версию в `<APP>.prev` для мгновенного отката. Настраивается через `.env.deploy`,
образец лежит в `.env.deploy.example`.

Собирать на сервере намеренно не предлагается: на VPS с гигабайтом памяти
`next build` падает по нехватке памяти.

Минимальный сервер под это: Node 20+, nginx с проксированием на
`127.0.0.1:3000`, юнит systemd, запускающий `node server.js`, и certbot для
сертификата.

## Поддержать

Шаблон бесплатный. Если он сэкономил вам время, поддержать можно так:

- **USDT, сеть TRC-20**: `TBwwoB4SiQ4skzw8ARnGha1MtWAh6NWz4d`
- **Подписка в Telegram-боте**: [@Eassssy_connect_bot](https://t.me/Eassssy_connect_bot)

## Лицензия

MIT. Пользуйтесь в коммерческих проектах, меняйте, публикуйте. Упоминание
автора приветствуется, но не требуется. Лицензии стороннего кода в составе
шаблона перечислены в [NOTICE](NOTICE), этот файл нужно сохранять при
распространении.