Сайт-портфолио веб-разработчика на Next.js с 3D и админ-панелью

Описание

Задача: создать современное портфолио, которое не просто перечисляет услуги, а демонстрирует уровень владения технологиями и вызывает доверие у потенциальных клиентов. Главный вызов — совместить высокую производительность, сложную 3D-графику и полную адаптивность, сохранив отличные показатели SEO и скорость загрузки.

Цель: показать, что сайт может быть одновременно красивым, быстрым и функциональным, а также создать удобный инструмент для сбора заявок и чата с посетителями

Решение

Я разработал сайт на Next.js 16 (App Router) с интеграцией:

1) 3D-фон на Three.js (@react-three/fiber) — интерактивное кольцо из символов кода, которое адаптируется под мощность устройства и не влияет на производительность (на мобильных 3D отключается).

2) Полностью кастомную админ-панель для управления сообщениями из чата и контактной формы с возможностью отвечать клиентам прямо с сайта.

3) Систему согласия на cookie и загрузку Яндекс.Метрики только после подтверждения пользователем (соответствие 152-ФЗ).

4) Оптимизацию под Core Web Vitals: достигнуты метрики FCP 0.3 с, LCP 1.1 с, TBT 50 мс, CLS 0, Speed Index 1.1 с (десктоп). Мобильный LCP снижен до 5.4 с.

5) Интеграцию с уведомлениями о новых сообщениях и заявках.

6) Ленивую загрузку секций через Intersection Observer для снижения TBT.

7) Использование локальных шрифтов с поддержкой кириллицы и символа рубля.

8) Микроразметку Schema.org (ProfessionalService, Person) для улучшения сниппета в поиске.

Технологии: Next.js 16.2.4, React 19, TypeScript, Tailwind CSS, Three.js, MySQL, PM2, Nginx.

Результат

- Lighthouse (десктоп): Performance 97, Accessibility 100, SEO 100, TBT 50 мс.
- Время полной загрузки страницы: менее 1.2 секунды.
- 3D-сцена отключается на мобильных устройствах, не влияя на производительность.
- Админ-панель позволяет оперативно отвечать на заявки и сообщения из чата.
- Встроенная Яндекс.Метрика с соблюдением требований российского законодательства.
- 100% адаптивность под все типы устройств.
- Полностью рабочий чат с сохранением истории сессий и системой уведомлений.

Ссылки на примеры реализации

 dmitrymironov.ru

Презентация проекта