Карьера HTML/CSS Портфолио

PDF-резюме — это прошлый век. Сайт-резюме выделяет вас среди сотен кандидатов, показывает ваши навыки в деле и даёт работодателю удобную ссылку. В этом гайде вы создадите профессиональный сайт-визитку и опубликуете его по адресу ваше-имя.hostingvibe.ru.

Резюме и ноутбук на рабочем столе — поиск работы онлайн

Почему сайт-резюме лучше обычного PDF

Вы отправляете PDF, и он тонет в папке «Загрузки» у HR-менеджера среди десятков таких же файлов. А теперь представьте, что вместо файла вы отправляете ссылку на красивый персональный сайт. Вот почему это работает лучше:

Запоминается — из 100 PDF-резюме и одного сайта HR запомнит именно сайт
Показывает навыки — если вы претендуете на позицию, связанную с IT, дизайном или маркетингом, сам сайт — демонстрация ваших умений
Всегда актуальный — обновили навыки? Перезалили сайт. Все, кому вы отправляли ссылку, видят свежую версию
Удобно делиться — одна ссылка в сопроводительном письме, в Telegram, в LinkedIn
Портфолио встроено — можно показать проекты с картинками, ссылками и описаниями
Интерактивность — кнопки связи, анимации, переключатель языков

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

Какие бывают сайты-резюме

Прежде чем писать код, определитесь с форматом. Вот основные типы:

Тип	Для кого	Особенности
Классическое резюме	Все профессии	Опыт, навыки, образование — как в PDF, но красивее
Портфолио + резюме	Дизайнеры, разработчики	Акцент на проектах с превью и ссылками
Визитка-лендинг	Фрилансеры, консультанты	Минимум текста, фото, кнопка «Написать»
Интерактивное CV	Креативные профессии	Анимации, нестандартная навигация, wow-эффект

В этом гайде мы сделаем портфолио + резюме — универсальный вариант, который подойдёт большинству.

Что понадобится

Текстовый редактор — VS Code (рекомендуем), Sublime Text или любой другой
Профессиональное фото — хотя бы телефонное, но в деловом стиле
Текст о себе — опыт работы, навыки, образование, контакты
Примеры работ — скриншоты проектов, ссылки на GitHub/Behance/Dribbble
40-60 минут времени

Шаг 1. Определяем структуру страницы

1Спланируйте секции сайта

Хороший сайт-резюме включает следующие блоки:

Hero / Шапка — фото, имя, должность, краткое описание и кнопки связи
Обо мне — 2-3 абзаца о вашем опыте и подходе к работе
Навыки — технологии, инструменты, языки
Опыт работы — хронология мест работы с описанием
Портфолио — 3-6 лучших проектов с картинками
Образование — вуз, курсы, сертификаты
Контакты — email, Telegram, LinkedIn, GitHub

Профессиональное фото для резюме — деловой портрет

Шаг 2. Создаём файл и базовую разметку

2Создайте папку и файл index.html

my-resume/
├── index.html
├── photo.jpg       <-- ваше фото
└── images/
    ├── project-1.jpg
    ├── project-2.jpg
    └── project-3.jpg

Начнём с базовой HTML-структуры. Все стили будут встроенными — так весь сайт поместится в один файл:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
    <title>Алексей Петров — Frontend-разработчик</title>
    <meta name="description"
        content="Сайт-резюме фронтенд-разработчика.
        React, TypeScript, 3 года опыта.">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: -apple-system, BlinkMacSystemFont,
                'Segoe UI', Roboto, sans-serif;
            line-height: 1.7;
            color: #1a1a1a;
            background: #fafafa;
        }
    </style>
</head>
<body>
    <!-- Секции будут здесь -->
</body>
</html>

Шаг 3. Hero-секция — первое впечатление

3Создайте шапку с фото и основной информацией

Первые 5 секунд решают всё. HR должен мгновенно понять: кто вы, что умеете, как с вами связаться.

<section style="background: linear-gradient(135deg,
    #064e3b, #059669); color: white;
    padding: 80px 20px; text-align: center;">

    <img src="photo.jpg" alt="Алексей Петров"
        style="width: 150px; height: 150px;
            border-radius: 50%; object-fit: cover;
            border: 4px solid white;
            margin-bottom: 24px;">

    <h1 style="font-size: 2.5rem;
        margin-bottom: 8px;">Алексей Петров</h1>

    <p style="font-size: 1.3rem; opacity: 0.9;
        margin-bottom: 24px;">
        Frontend-разработчик
    </p>

    <p style="max-width: 600px; margin: 0 auto 32px;
        opacity: 0.85; line-height: 1.6;">
        3 года опыта в React и TypeScript.
        Делаю быстрые, доступные и красивые
        веб-приложения. Ищу позицию Middle/Senior
        Frontend в продуктовой команде.
    </p>

    <div style="display: flex; gap: 12px;
        justify-content: center; flex-wrap: wrap;">

        <a href="mailto:alex@example.com"
            style="background: white; color: #059669;
                padding: 10px 24px; border-radius: 8px;
                text-decoration: none;
                font-weight: 600;">
            Написать на email
        </a>

        <a href="https://t.me/alexdev"
            target="_blank" rel="noopener"
            style="background: rgba(255,255,255,0.2);
                color: white; padding: 10px 24px;
                border-radius: 8px;
                text-decoration: none;
                font-weight: 500;">
            Telegram
        </a>

        <a href="https://github.com/alexdev"
            target="_blank" rel="noopener"
            style="background: rgba(255,255,255,0.2);
                color: white; padding: 10px 24px;
                border-radius: 8px;
                text-decoration: none;
                font-weight: 500;">
            GitHub
        </a>
    </div>
</section>

Совет по фото: используйте квадратное фото минимум 300x300px. Нейтральный фон, деловой или smart casual стиль одежды. Свойство border-radius: 50% сделает его круглым. Если фото нет — можно использовать аватарку или эмодзи, но реальное фото повышает доверие на порядок.

Шаг 4. Блок «Обо мне»

4Расскажите о себе коротко и по делу

<section style="max-width: 800px; margin: 0 auto;
    padding: 60px 20px;">

    <h2 style="font-size: 1.8rem; margin-bottom: 20px;
        color: #059669;">Обо мне</h2>

    <p>Привет! Я фронтенд-разработчик из Москвы.
    Последние 3 года работаю с React-экосистемой:
    TypeScript, Next.js, Redux/Zustand, Tailwind CSS.</p>

    <p>До фронтенда занимался веб-дизайном, поэтому
    хорошо понимаю UI/UX и умею общаться с дизайнерами
    на одном языке. Мне важно, чтобы интерфейс был
    не только красивым, но и быстрым, доступным
    и удобным.</p>

    <p>Сейчас ищу позицию в продуктовой команде,
    где можно расти вместе с продуктом и влиять
    на технические решения.</p>
</section>

Частая ошибка: не пишите биографию с рождения. HR тратит на резюме 6-10 секунд. Пишите только то, что релевантно позиции: опыт, стек, чего хотите. 2-3 абзаца — максимум.

Шаг 5. Навыки с визуальным оформлением

5Покажите навыки в виде тегов или прогресс-баров

Есть два популярных способа отображения навыков. Первый — теги (рекомендуем, он честнее):

<section style="background: white; padding: 60px 20px;">
    <div style="max-width: 800px; margin: 0 auto;">

        <h2 style="font-size: 1.8rem; margin-bottom: 20px;
            color: #059669;">Навыки</h2>

        <h3 style="margin-bottom: 12px; color: #374151;">
            Основной стек
        </h3>
        <div style="display: flex; flex-wrap: wrap;
            gap: 8px; margin-bottom: 24px;">
            <span style="background: #ecfdf5;
                color: #059669; padding: 6px 16px;
                border-radius: 20px;
                font-weight: 500;">React</span>
            <span style="background: #ecfdf5;
                color: #059669; padding: 6px 16px;
                border-radius: 20px;
                font-weight: 500;">TypeScript</span>
            <span style="background: #ecfdf5;
                color: #059669; padding: 6px 16px;
                border-radius: 20px;
                font-weight: 500;">Next.js</span>
            <span style="background: #ecfdf5;
                color: #059669; padding: 6px 16px;
                border-radius: 20px;
                font-weight: 500;">Tailwind CSS</span>
        </div>

        <h3 style="margin-bottom: 12px; color: #374151;">
            Также работал с
        </h3>
        <div style="display: flex; flex-wrap: wrap;
            gap: 8px; margin-bottom: 24px;">
            <span style="background: #f3f4f6;
                color: #4b5563; padding: 6px 16px;
                border-radius: 20px;">Node.js</span>
            <span style="background: #f3f4f6;
                color: #4b5563; padding: 6px 16px;
                border-radius: 20px;">PostgreSQL</span>
            <span style="background: #f3f4f6;
                color: #4b5563; padding: 6px 16px;
                border-radius: 20px;">Docker</span>
            <span style="background: #f3f4f6;
                color: #4b5563; padding: 6px 16px;
                border-radius: 20px;">Git</span>
            <span style="background: #f3f4f6;
                color: #4b5563; padding: 6px 16px;
                border-radius: 20px;">Figma</span>
        </div>

        <h3 style="margin-bottom: 12px; color: #374151;">
            Языки
        </h3>
        <div style="display: flex; flex-wrap: wrap;
            gap: 8px;">
            <span style="background: #f3f4f6;
                color: #4b5563; padding: 6px 16px;
                border-radius: 20px;">
                Русский — родной
            </span>
            <span style="background: #f3f4f6;
                color: #4b5563; padding: 6px 16px;
                border-radius: 20px;">
                English — B2
            </span>
        </div>
    </div>
</section>

Почему теги лучше прогресс-баров: прогресс-бар «React — 85%» не значит ничего. 85% от чего? Теги просто показывают, с чем вы работали, без ложной точности. Разделение на «основной стек» и «также работал» даёт HR понять, в чём вы сильнее всего.

Шаг 6. Опыт работы

6Добавьте хронологию рабочего опыта

<section style="max-width: 800px; margin: 0 auto;
    padding: 60px 20px;">

    <h2 style="font-size: 1.8rem; margin-bottom: 24px;
        color: #059669;">Опыт работы</h2>

    <!-- Одна позиция -->
    <div style="border-left: 3px solid #10b981;
        padding-left: 24px; margin-bottom: 32px;">

        <div style="display: flex;
            justify-content: space-between;
            align-items: baseline; flex-wrap: wrap;
            gap: 8px; margin-bottom: 4px;">
            <h3 style="margin: 0;">
                Frontend-разработчик
            </h3>
            <span style="color: #6b7280;
                font-size: 0.9rem;">
                Янв 2023 — настоящее время
            </span>
        </div>

        <p style="color: #059669; font-weight: 500;
            margin-bottom: 8px;">
            ООО «ТехноСтарт»
        </p>

        <ul style="color: #4b5563;">
            <li>Разработал SPA на React + TypeScript
                для внутренней CRM-системы (50+ экранов)</li>
            <li>Снизил время загрузки главной страницы
                с 4.2с до 1.8с через code splitting
                и оптимизацию бандла</li>
            <li>Внедрил компонентную библиотеку
                на Storybook — ускорил разработку
                новых фич на 30%</li>
            <li>Код-ревью, менторинг джуниоров,
                участие в архитектурных решениях</li>
        </ul>
    </div>

    <!-- Следующая позиция -->
    <div style="border-left: 3px solid #d1d5db;
        padding-left: 24px; margin-bottom: 32px;">

        <div style="display: flex;
            justify-content: space-between;
            align-items: baseline; flex-wrap: wrap;
            gap: 8px; margin-bottom: 4px;">
            <h3 style="margin: 0;">
                Junior Frontend-разработчик
            </h3>
            <span style="color: #6b7280;
                font-size: 0.9rem;">
                Мар 2021 — Дек 2022
            </span>
        </div>

        <p style="color: #059669; font-weight: 500;
            margin-bottom: 8px;">
            Веб-студия «Пиксель»
        </p>

        <ul style="color: #4b5563;">
            <li>Разработал 15+ лендингов и корпоративных
                сайтов на HTML/CSS/JavaScript</li>
            <li>Перевёл 3 проекта с jQuery
                на React — сократил объём кода на 40%</li>
            <li>Настроил CI/CD пайплайн
                на GitHub Actions для автодеплоя</li>
        </ul>
    </div>
</section>

Совет: используйте цифры и факты, а не общие слова. «Снизил время загрузки с 4.2с до 1.8с» звучит намного убедительнее, чем «Оптимизировал производительность». Каждый пункт опыта должен отвечать на вопрос: «Что конкретно вы сделали и какой результат это дало?»

Шаг 7. Портфолио — покажите свои работы

7Добавьте карточки проектов

Это самый визуальный и впечатляющий блок. Даже 3 хороших проекта — лучше, чем 10 сырых.

<section style="background: #f9fafb;
    padding: 60px 20px;">
    <div style="max-width: 1000px; margin: 0 auto;">

        <h2 style="font-size: 1.8rem; margin-bottom: 32px;
            text-align: center;
            color: #059669;">Проекты</h2>

        <div style="display: grid;
            grid-template-columns:
                repeat(auto-fill, minmax(300px, 1fr));
            gap: 24px;">

            <div style="background: white;
                border-radius: 12px; overflow: hidden;
                box-shadow: 0 2px 8px rgba(0,0,0,0.06);">

                <img src="images/project-1.jpg"
                    alt="CRM Dashboard"
                    style="width: 100%; height: 200px;
                        object-fit: cover;">

                <div style="padding: 20px;">
                    <h3 style="margin-bottom: 8px;">
                        CRM Dashboard
                    </h3>
                    <p style="color: #6b7280;
                        font-size: 0.9rem;
                        margin-bottom: 12px;">
                        Панель управления для отдела продаж.
                        React, TypeScript, Recharts,
                        REST API.
                    </p>
                    <div style="display: flex; gap: 8px;">
                        <a href="#"
                            style="color: #059669;
                                font-weight: 500;">
                            Демо →
                        </a>
                        <a href="#"
                            style="color: #6b7280;">
                            GitHub
                        </a>
                    </div>
                </div>
            </div>

            <!-- Повторите для 2-3 проектов -->
        </div>
    </div>
</section>

Разработчик за ноутбуком — создание портфолио проектов

Что показывать в портфолио, если нет коммерческих проектов?

Это частый вопрос студентов и начинающих разработчиков. Вот что можно добавить:

Учебные проекты — калькулятор, todo-list, погодное приложение. Да, они простые, но показывают, что вы умеете писать код
Клоны известных сервисов — упрощённый клон Trello, Twitter, Spotify. Показывает амбиции и навыки
Pet-проекты — то, что вы делаете для себя. Бот для Telegram, генератор мемов, трекер привычек
Open Source — даже маленький PR в чужой проект — это плюс
Этот самый сайт-резюме — мета, но работает: «Посмотрите на сайт, который я сделал, чтобы показать вам свои навыки»

Шаг 8. Образование и сертификаты

8Добавьте блок образования

<section style="max-width: 800px; margin: 0 auto;
    padding: 60px 20px;">

    <h2 style="font-size: 1.8rem; margin-bottom: 24px;
        color: #059669;">Образование</h2>

    <div style="margin-bottom: 20px;">
        <h3>МГУ, Факультет ВМК</h3>
        <p style="color: #6b7280;">
            Бакалавр, Прикладная математика
            и информатика | 2017–2021
        </p>
    </div>

    <div style="margin-bottom: 20px;">
        <h3>Яндекс.Практикум</h3>
        <p style="color: #6b7280;">
            Веб-разработчик | 2021
        </p>
    </div>

    <div>
        <h3>Сертификаты</h3>
        <ul style="color: #4b5563;">
            <li>Meta Frontend Developer Certificate
                (Coursera)</li>
            <li>TypeScript Deep Dive
                (Udemy, 2023)</li>
        </ul>
    </div>
</section>

Шаг 9. Контактная секция

9Сделайте финальный блок с призывом к действию

<section style="background: linear-gradient(135deg,
    #064e3b, #059669); color: white;
    padding: 60px 20px; text-align: center;">

    <h2 style="font-size: 2rem;
        margin-bottom: 12px;">Давайте работать вместе</h2>

    <p style="opacity: 0.9; margin-bottom: 32px;
        max-width: 500px; margin-left: auto;
        margin-right: auto;">
        Открыт к предложениям о работе и фриланс-проектам.
        Предпочитаю удалёнку, но готов к гибридному
        формату в Москве.
    </p>

    <div style="display: flex; gap: 16px;
        justify-content: center; flex-wrap: wrap;">
        <a href="mailto:alex@example.com"
            style="background: white; color: #059669;
                padding: 14px 32px; border-radius: 10px;
                text-decoration: none; font-weight: 600;
                font-size: 1.1rem;">
            📧 Написать на email
        </a>
        <a href="https://t.me/alexdev"
            target="_blank" rel="noopener"
            style="border: 2px solid white;
                color: white; padding: 14px 32px;
                border-radius: 10px;
                text-decoration: none;
                font-weight: 500;">
            Telegram
        </a>
    </div>
</section>

Шаг 10. Адаптивность и финальные штрихи

10Проверьте мобильную версию

Наш сайт уже адаптивен благодаря CSS Grid и flex-wrap. Но добавим несколько штрихов:

<style>
/* Плавный скролл по якорям */
html { scroll-behavior: smooth; }

/* Мобильные исправления */
@media (max-width: 640px) {
    h1 { font-size: 1.8rem !important; }
    section { padding: 40px 16px !important; }
    img { border-radius: 8px; }
}

/* Анимация появления при наведении */
a { transition: opacity 0.2s; }
a:hover { opacity: 0.8; }
</style>

Open Graph — красивое превью при отправке ссылки

Когда вы скидываете ссылку в Telegram или LinkedIn, мессенджер показывает превью. Чтобы оно было красивым, добавьте в <head>:

<meta property="og:title"
    content="Алексей Петров — Frontend-разработчик">
<meta property="og:description"
    content="3 года опыта в React и TypeScript.
    Портфолио и контакты.">
<meta property="og:image"
    content="https://alex-dev.hostingvibe.ru/og.jpg">
<meta property="og:url"
    content="https://alex-dev.hostingvibe.ru">

Совет: создайте отдельную картинку og.jpg размером 1200x630px. Это может быть простая плашка с вашим именем и должностью на цветном фоне. Такую картинку легко сделать в Canva (бесплатно).

Работа за компьютером — отправка резюме работодателю

Шаг 11. Публикация на VibeHosting

11Загрузите сайт и получите персональную ссылку

Самый простой способ опубликовать сайт-резюме — загрузить его на VibeHosting. Вот пошаговая инструкция:

Упакуйте файлы в ZIP — index.html, photo.jpg и папку images
Откройтеhostingvibe.ru и зарегистрируйтесь
Загрузите ZIP-архив
Выберите slug — используйте своё имя: alex-petrov, ivanova-cv или frontend-alex
Готово! Ваше резюме доступно по адресу alex-petrov.hostingvibe.ru

Теперь в сопроводительном письме или сообщении в Telegram вы можете написать:

«Добрый день! Меня зовут Алексей, я frontend-разработчик с 3 годами опыта. Моё резюме и портфолио: alex-petrov.hostingvibe.ru. Буду рад обсудить вакансию.»

Это выглядит намного профессиональнее, чем прикреплённый PDF.

Бесплатный хостинг для вашего резюме

Загрузите ZIP-архив на VibeHosting и получите персональную ссылку ваше-имя.hostingvibe.ru. Бесплатный план — 1 сайт, 50 МБ.

Опубликовать резюме на VibeHosting →

Как использовать сайт-резюме максимально эффективно

Где разместить ссылку

LinkedIn — в поле «Website» профиля
Сопроводительное письмо — в первом или последнем абзаце
Telegram-био — вместо или рядом с основной ссылкой
Email-подпись — автоматически добавляется к каждому письму
HeadHunter — в поле «О себе» или в начале резюме
Визитка — QR-код, ведущий на сайт (VibeHosting генерирует QR автоматически)

Что обновлять и когда

Новый проект в портфолио — сразу после завершения
Смена должности или компании — в первую неделю
Новый навык — когда чувствуете уверенность (не после одного туториала)
Фото — раз в 1-2 года или при смене имиджа

На VibeHosting обновление — это просто повторная загрузка ZIP. Ссылка остаётся той же.

Частые ошибки в сайтах-резюме

Слишком много текста — HR не будет читать 10 экранов. Будьте лаконичны
Нет призыва к действию — должна быть очевидная кнопка «Написать мне»
Плохое фото или его отсутствие — вызывает недоверие
Неадаптивная вёрстка — HR может смотреть с телефона
Прогресс-бары навыков — «JavaScript 78%» не значит ничего. Используйте теги
Тёмная тема без светлой — не все любят тёмные сайты, светлая тема безопаснее
Нет ссылок на проекты — показать код/демо важнее, чем описать его

Итоги

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

Создали структуру сайта-резюме: hero, навыки, опыт, портфолио, контакты
Написали чистый HTML+CSS код, адаптивный и читаемый
Добавили Open Graph теги для красивого превью в мессенджерах
Опубликовали на VibeHosting и получили персональную ссылку

Теперь у вас есть профессиональный сайт-визитка по адресу ваше-имя.hostingvibe.ru, которую можно отправить любому работодателю. Удачи в поиске работы!

Создайте своё резюме-сайт прямо сейчас

ZIP-архив → ваше-имя.hostingvibe.ru за 1 минуту. Бесплатно для студентов!

Загрузить резюме на VibeHosting →

Как сделать резюме-сайт и отправить работодателю ссылку