HTML/CSS резюме

Зачем писать вручную

Cloud Resume Challenge требует написать резюме в HTML/CSS вручную, а не использовать конструктор сайтов или шаблон. Это не каприз -- это проверка базового навыка. Если вы работаете в облаке, вы должны понимать, что такое HTML, как работает CSS и как браузер рендерит страницу.

Семантический HTML

Что такое семантика

Семантический HTML использует теги, которые описывают смысл контента, а не только его внешний вид:

<!-- Несемантический (плохо) -->
<div class="header">
  <div class="name">Иван Петров</div>
</div>

<!-- Семантический (хорошо) -->
<header>
  <h1>Иван Петров</h1>
</header>

Структура резюме в HTML

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Иван Петров - Cloud Engineer Resume</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Иван Петров</h1>
        <p class="subtitle">Cloud Engineer</p>
        <nav class="contact-info">
            <a href="mailto:[email protected]">[email protected]</a>
            <a href="https://linkedin.com/in/ivanpetrov">LinkedIn</a>
            <a href="https://github.com/ivanpetrov">GitHub</a>
        </nav>
    </header>

    <main>
        <section id="summary">
            <h2>Обо мне</h2>
            <p>Cloud Engineer с опытом в AWS, Infrastructure as Code
               и serverless архитектурах. Сертифицирован AWS Cloud
               Practitioner.</p>
        </section>

        <section id="experience">
            <h2>Опыт работы</h2>
            <article class="job">
                <h3>Junior Cloud Engineer</h3>
                <p class="company">ООО "ОблакоТех"</p>
                <time datetime="2025-01">Январь 2025</time> --
                <time>настоящее время</time>
                <ul>
                    <li>Разработал serverless API на AWS Lambda + DynamoDB</li>
                    <li>Настроил CI/CD через GitHub Actions</li>
                    <li>Описал инфраструктуру в CloudFormation</li>
                </ul>
            </article>
        </section>

        <section id="education">
            <h2>Образование</h2>
            <article class="education-item">
                <h3>Бакалавр информатики</h3>
                <p class="institution">Университет, 2020-2024</p>
            </article>
        </section>

        <section id="certifications">
            <h2>Сертификации</h2>
            <ul>
                <li>AWS Cloud Practitioner (CLF-C02)</li>
                <li>AWS Solutions Architect Associate (SAA-C03)</li>
            </ul>
        </section>

        <section id="skills">
            <h2>Навыки</h2>
            <div class="skills-grid">
                <div class="skill-category">
                    <h3>Cloud</h3>
                    <ul>
                        <li>AWS (S3, Lambda, DynamoDB, CloudFront)</li>
                        <li>Infrastructure as Code (CloudFormation, Terraform)</li>
                    </ul>
                </div>
                <div class="skill-category">
                    <h3>Языки</h3>
                    <ul>
                        <li>Python</li>
                        <li>JavaScript</li>
                        <li>HTML/CSS</li>
                    </ul>
                </div>
            </div>
        </section>

        <section id="projects">
            <h2>Проекты</h2>
            <article class="project">
                <h3>Cloud Resume Challenge</h3>
                <p>Облачное резюме с serverless бэкендом, IaC и CI/CD.</p>
                <a href="https://resume.ivanpetrov.com">Ссылка на проект</a>
            </article>
        </section>
    </main>

    <footer>
        <p>Счётчик посещений: <span id="visitor-count">загрузка...</span></p>
    </footer>

    <script src="counter.js"></script>
</body>
</html>

Ключевые теги для резюме

Тег	Назначение
`<header>`	Шапка: имя, контакты
`<main>`	Основной контент
`<section>`	Логический раздел (опыт, образование)
`<article>`	Самостоятельная единица (одна работа, один проект)
`<nav>`	Навигация / ссылки
`<time>`	Даты (с атрибутом datetime)
`<footer>`	Подвал: счётчик посещений

CSS-стилизация

Базовый стиль резюме

/* Reset and base styles */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    line-height: 1.6;
    color: #333;
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 1rem;
    background-color: #f5f5f5;
}

/* Header */
header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #2563eb;
}

header h1 {
    font-size: 2rem;
    color: #1e293b;
    margin-bottom: 0.25rem;
}

.subtitle {
    font-size: 1.2rem;
    color: #2563eb;
    margin-bottom: 0.5rem;
}

.contact-info {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.contact-info a {
    color: #2563eb;
    text-decoration: none;
}

.contact-info a:hover {
    text-decoration: underline;
}

/* Sections */
section {
    margin-bottom: 1.5rem;
}

section h2 {
    font-size: 1.3rem;
    color: #1e293b;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 0.25rem;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Jobs and projects */
article {
    margin-bottom: 1rem;
}

article h3 {
    font-size: 1.1rem;
    color: #334155;
}

.company,
.institution {
    color: #64748b;
    font-style: italic;
}

ul {
    padding-left: 1.5rem;
}

li {
    margin-bottom: 0.25rem;
}

/* Skills grid */
.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

/* Footer with visitor counter */
footer {
    text-align: center;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
    color: #64748b;
}

#visitor-count {
    font-weight: bold;
    color: #2563eb;
}

Адаптивный дизайн

Media Queries

Резюме должно хорошо выглядеть на мобильных устройствах:

/* Мобильные устройства */
@media (max-width: 600px) {
    body {
        padding: 1rem 0.75rem;
    }

    header h1 {
        font-size: 1.5rem;
    }

    .contact-info {
        flex-direction: column;
        gap: 0.5rem;
    }

    .skills-grid {
        grid-template-columns: 1fr;
    }
}

/* Печать */
@media print {
    body {
        background: white;
        color: black;
        max-width: 100%;
    }

    a {
        color: black;
        text-decoration: none;
    }

    footer {
        display: none; /* Hide visitor counter in print */
    }
}

Viewport Meta Tag

Обязательный тег для адаптивности:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Без этого тега мобильный браузер будет отображать страницу как на десктопе, но уменьшенную.

Лучшие практики

Контент

Не более 1 страницы -- HR тратит 6-7 секунд на резюме
Результаты, не обязанности -- "Снизил время деплоя на 40%" вместо "Отвечал за деплой"
Ключевые слова -- включайте технологии из вакансии
Ссылки -- GitHub, LinkedIn, ваш CRC-проект

Код

Валидный HTML -- проверьте на validator.w3.org
Доступность -- используйте alt для изображений, контрастные цвета
Минимализм -- не нужны фреймворки для одной страницы
Производительность -- минимум файлов, оптимизированные изображения

Чего избегать

Не используйте таблицы для layout
Не используйте <br> для отступов -- используйте CSS margin/padding
Не используйте inline-стили -- выносите в CSS-файл
Не используйте !important без крайней необходимости

Файловая структура проекта

cloud-resume/
├── index.html          # Основная страница
├── style.css           # Стили
├── counter.js          # JavaScript для счётчика (позже)
├── assets/
│   └── photo.webp      # Фото (опционально)
├── error.html          # Страница 404 (для S3)
└── README.md           # Описание проекта