Задача
Портфолио должно решать три задачи одновременно:
- показать реальные проекты и объяснить, что именно в них сделано;
- дать заказчику контекст: услуги, процесс, сроки и формат работы;
- приводить людей из поиска и ИИ-ответов на полезные статьи.
При этом сайт должен оставаться быстрым, простым в поддержке и не зависеть от сборщиков, плагинов и ежемесячной CMS.
Решение
Структура как у студий, но под одного разработчика
Посмотрел, как устроены меню у сильных digital-студий: Work / Cases, Services, About / Studio, Journal / Insights, Contact. Для портфолио взял ту же логику, но убрал лишнее: «Услуги», «Кейсы», «Подход», «Блог», «Обо мне», «Контакты». Каждый пункт ведёт к конкретному ответу, а не в пустоту.
Главная как короткая презентация
Первый экран объясняет, кто я и что делаю. Дальше, цифры, навыки, два кейса, процесс и журнал. Контакты не спрятаны в подвале: кнопка «Обсудить проект» есть в шапке, герое и финальном блоке.
Тёмная и светлая темы
Тема хранится в localStorage и переключается без перезагрузки.
Это не просто украшение: разным людям комфортнее с разной яркостью,
а сайт запоминает выбор.
Кейсы вместо галереи картинок
У каждого проекта есть отдельная страница: задача, решение, технические детали и результат. Такой формат полезнее для доверия и лучше индексируется: у страниц есть заголовки, описания, хлебные крошки и структурированные данные.
SEO и структура для ИИ
Сайт использует семантическую разметку, канонические URL,
Open Graph, JSON-LD, sitemap, robots.txt, RSS и llms.txt.
Статьи написаны так, чтобы человек быстро получал ответ, а поисковый
робот видел явные факты, структуру и ссылки на связанные материалы.
Это не гарантирует попадание в ответы ИИ, но убирает технические
барьеры и делает контент понятнее.
Форма без бэкенда
Форма собирает имя, контакт и описание задачи, копирует готовое сообщение в буфер обмена и открывает Telegram. Не нужен сервер, база данных и обработка персональных данных на стороне сайта. Человек видит, что произошло, и может отправить сообщение в один клик.
Техническая сторона
Проект на статических HTML, CSS и JavaScript. Без фреймворка,
сборки и внешних библиотек, кроме шрифтов. Это упрощает деплой,
снижает вес страниц и уменьшает количество точек отказа.
Изображения сжаты и загружаются лениво, анимации учитывают
prefers-reduced-motion.
Результат
Получился сайт, который можно развивать по частям: добавлять кейсы, статьи и услуги, не переписывая основу. Он показывает не только «я умею верстать», но и то, как я думаю о структуре, контенте и пути заказчика.
Портфолио должно отвечать на вопрос заказчика «мне подходит этот человек?» быстрее, чем он успеет закрыть вкладку. Поэтому структура, кейсы и контакты важнее декоративных эффектов.
Хотите обсудить похожий проект? Напишите в Telegram , расскажу, с чего начать.