Портфолио веб-разработчика: что впечатлит рекрутера, а что убьет производительность

А в это время чьё-то Three.js-портфолио лежало в 503, и рекрутер уже закрыл вкладку. Разбираем, что из подборки реально переживёт прод, а что — костыль, который ляжет под первым же реальным трафиком.

Three.js: красиво до первого ребута

Bruno Simon запихнул в портфолио полноценный 3D-мир на Three.js + WebGL: машинка, физика, объекты, мобилка. Awwwards Developer Site of the Year 2019 — по-взрослому. Навык видно сразу, спорить бессмысленно. Вопрос в другом: сколько это жрёт GPU на среднем Android и что будет, когда посетитель откроет ссылку в метро на старом Redmi. Если твой единственный посетитель — рекрутер с макбуком и Wi-Fi 6, поржал и пошёл дальше. Если трафик из поиска или соцсетей — готовься к просадке Lighthouse Mobile в красную зону и отказам ещё до первого кадра. Three.js в проде — это не навык. Это демонстрация навыка. Разница принципиальная: одно работает на пользователя, другое — на эго. Фрилансеру с портфолио-комьюнити — зайдёт. Кандидату на массовых job-бордах — рекрутер не будет ждать, пока догрузятся текстуры. Он закроет вкладку и откроет следующего.

Один экран, три страницы, ноль воды

Противоположный полюс — Charles Bruyerre (Sharlee): всё на одном экране — имя, что делает, ссылки на соцсети, интерактивный фон для настроения. Кастомный домен itssharl.ee запоминается без усилий. Keita Yamada ещё суше: три страницы — био, проекты, контакты. Без блога, без меню на пол-экрана, без «обо мне» на пять тысяч знаков. Светлая/тёмная тема как единственная интерактивная деталь. Braydon Coyer каждый год пересобирает свой «Blogfolio» на Next.js + Tailwind + Framer Motion — плюс тулбокс, секция выступлений, стена сообществ. Дисциплина впечатляет, но большинству из нас столько не нужно. Рабочая связка проще: понятная структура, быстрый загруз, ссылка на гитхаб, контакты в два клика. Откройте портфолио Sharlee и Yamada с телефона — грузится за секунду. Bruno Simon — только если хватит терпения и Wi-Fi 6.

Перед деплоем

Прежде чем тащить очередной шаблон из подборки в прод, прогоните базовый чек. Никакого rocket science — четыре команды в терминале, которые покажут, где вы уже налажали:

• tar -czf portfolio_$(date +%F).tar.gz /var/www/ — бэкап текущего сайта, без этого дальше не идём
• lighthouse --preset=mobile — мобильная производительность, именно mobile, не десктоп
• curl -I | grep -i 'http\|location' — SSL и редиректы на месте, www и https без сюрпризов
• curl | head -20 — sitemap отдаётся, ничего лишнего в robots не блокируется

Бэкапы — святое. Не только кода. Цифровой бэкап всего, что имеет значение — от медкарты до контрактов — давно не опция, а рабочая гигиена. В проде выживает только то, что задокументировано и сохранено. Портфолио — это бэкап вашей карьеры. Относитесь к нему так же, как к продакшн-базе: реплики, снапшоты, регулярный git push. И будет вам аптайм.