Как сделать сайт-портфолио программиста: структура, проекты и публикация

Хорошее портфолио за полминуты отвечает на три вопроса: кто вы, что умеете и где посмотреть работающий код. Для первой версии хватит одного адаптивного экрана, трёх честных проектов и понятных кнопок «Демо» и «Код».

Портфолио не обязано впечатлять анимацией. Его задача проще: провести человека от вашего имени к доказательствам навыков. Поэтому начнём со структуры и содержимого, а декоративные эффекты оставим после проверки ссылок и телефона.

Что должно быть в первом портфолио

Разделите страницу на hero, проекты, краткую информацию и контакты. В hero оставьте одну главную кнопку. В проекте показывайте не только скриншот, но и исходную задачу, две технические детали, ссылку на демо и репозиторий.

После этого шага у каждой части есть одна роль. Интерфейс собирает действие, логика меняет состояние, а вывод показывает признак успеха. Это проще отлаживать, чем один большой обработчик.

От обещания к доказательству. Каждый шаг виден без скрытого меню

Собираем страницу и карточки проектов

Ниже минимальный каркас. Сетка auto-fit сама переносит карточки, а clamp делает заголовок адаптивным без десятка точек перелома. Ссылки имеют понятные подписи, поэтому пользователь заранее знает, куда попадёт.

<header class="hero">
  <p class="eyebrow">Frontend-разработчик</p>
  <h1>Аня делает быстрые и понятные веб-интерфейсы</h1>
  <p>JavaScript, TypeScript и React. Люблю формы, доступность и чистые состояния.</p>
  <a class="primary" href="#projects">Посмотреть проекты</a>
</header>
<main id="projects" class="projects">
  <article class="project">
    <div class="preview" aria-hidden="true">Task Flow</div>
    <h2>Планировщик задач</h2>
    <p>Собрала фильтры, сохранение и управление с клавиатуры.</p>
    <ul><li>JavaScript</li><li>localStorage</li><li>CSS Grid</li></ul>
    <p><a href="https://example.com">Демо</a> <a href="https://github.com/example">Код</a></p>
  </article>
</main>
<style>
*{box-sizing:border-box}body{margin:0;color:#16182d;background:#f6f7fb;font:16px/1.6 system-ui}
.hero,.projects{width:min(1100px,calc(100% - 32px));margin:auto}.hero{padding:96px 0 64px}
h1{max-width:820px;font-size:clamp(2.4rem,7vw,5.4rem);line-height:1.02}
.primary{display:inline-block;padding:14px 20px;color:white;background:#5b4bff;border-radius:14px;text-decoration:none}
.projects{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;padding-bottom:80px}
.project{padding:24px;background:white;border:1px solid #e2e4ef;border-radius:24px}.preview{padding:48px 24px;border-radius:16px;background:#16182d;color:white;font-size:2rem}
li{display:inline-block;margin-right:8px;padding:4px 10px;background:#eceaff;border-radius:999px}
</style>

Факты работают сильнее оценок. Сравнение показывает, какой вариант легче поддерживать и проверять.

Как описывать проекты без пустых прилагательных

Карточку проекта полезно читать как короткий кейс: было ограничение, вы приняли решение, появился проверяемый результат. Даже маленький Todo-лист выглядит сильнее, если указать клавиатурное управление, сохранение и ссылку на живую версию.

Сохраняйте в одном месте то, что может измениться. Если одно и то же значение скопировано в три функции, после первой правки они начнут расходиться. Один объект состояния и одна функция отрисовки снимают эту проблему.

Практика: проверяем ссылки и телефон

Откройте портфолио в приватном окне и пройдите путь как незнакомый человек. Все репозитории должны быть публичными, демо не должно требовать локального сервера, почта должна копироваться без ошибки. Затем проверьте страницу на телефоне и клавиатурой.

Четыре окна настоящего просмотра. Пройдите все четыре сценария перед публикацией проекта.

Доводим портфолио до публикации

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

Что получится в итоге

Финальная страница сразу показывает специализацию, три проекта с доказательствами и простой путь к контакту.