Практика: портфолио разработчика — комплексный проект с адаптацией

Почему портфолио — это ваш цифровой костюм? 👔

Портфолио — не просто страница с проектами. Это ваша визитная карточка, первое впечатление для работодателей и клиентов. Хотите выглядеть как новичок? Или как профессионал, который знает толк в адаптивном дизайне?

Сейчас соберём портфолио, которое:
✅ Адаптируется под любые экраны
✅ Имеет продуманную структуру
✅ Выглядит современно без лишних сложностей

Подготовка: что должно быть в портфолио?

Прежде чем писать код, продумаем структуру:

1. Шапка (Header)

Имя / должность
Навигация (о себе, проекты, контакты)

2. Главный экран (Hero)

Краткое описание + CTA (например, "Посмотреть работы")

3. О себе (About)

Фото + текст
Ключевые навыки (можно в виде иконок)

4. Проекты (Works)

Карточки с превью, названием и описанием

5. Контакты (Footer)

Соцсети, email, форма обратной связи

HTML: базовая разметка

Начнём с чистого HTML-каркаса. Важно использовать семантические теги для SEO и доступности:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Портфолио фронтенд-разработчика</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header class="header">
    <nav>
      <a href="#about">Обо мне</a>
      <a href="#works">Проекты</a>
      <a href="#contacts">Контакты</a>
    </nav>
  </header>

  <section class="hero">
    <h1>Привет, я [Ваше имя]</h1>
    <p>Фронтенд-разработчик с фокусом на адаптивный дизайн</p>
    <button>Мои работы</button>
  </section>

  <!-- Остальные секции -->
</body>
</html>

💡 Совет: Для реального портфолио замените [Ваше имя] на настоящее. Шутка, но некоторые забывают!

CSS: делаем адаптивным без боли

Mobile First подход

Начнём стилизацию с мобильных устройств, затем добавим медиазапросы для десктопов:

/* Базовые стили (для мобильных) */
body {
  font-family: 'Inter', sans-serif;
  margin: 0;
  line-height: 1.6;
}

.header {
  padding: 1rem;
  display: flex;
  justify-content: space-between;
}

.hero {
  padding: 2rem 1rem;
  text-align: center;
}

/* Медиазапрос для планшетов */
@media (min-width: 768px) {
  .hero {
    padding: 4rem 2rem;
  }
}

/* Медиазапрос для десктопов */
@media (min-width: 1024px) {
  .header {
    padding: 2rem 5rem;
  }
}

Гриды для карточек проектов

Используем CSS Grid для сетки проектов — она идеально адаптируется:

.works {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 1rem;
}

@media (min-width: 768px) {
  .works {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .works {
    grid-template-columns: repeat(3, 1fr);
  }
}

⚡ Фишка: gap в Grid — это современная замена margin между элементами.

Микровзаимодействия для оживления

Добавим микроанимации, чтобы портфолио не выглядело статичным:

/* Плавное появление секций */
section {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s, transform 0.6s;
}

section.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Эффект при наведении на карточки */
.project-card {
  transition: transform 0.3s;
}

.project-card:hover {
  transform: translateY(-5px);
}

Итог: что должно получиться

🔄 Адаптивный лейаут, работающий на любом устройстве
🎨 Чистый, современный дизайн без "тяжёлых" элементов
✨ Микроанимации для плавности взаимодействий
📱 Правильная семантика и доступность

Теперь — в бой! Создавайте, экспериментируйте, и пусть ваше портфолио станет дверью в мир крутых проектов.