DevSpace — персональне портфоліо

Фінальний проект всього курсу. Ти побудуєш і задеплоїш справжній персональний сайт, який зможеш використовувати як портфоліо. Цей проект об'єднує все, що ти вивчив: від HTML та CSS до Next.js та деплою.

Підготовка

npx create-next-app@latest my-portfolio --typescript --tailwind --app
cd my-portfolio
npm install gray-matter

Завдання

1. Сторінки

Створи наступні сторінки:

2. Головна сторінка

• Hero-секція з ім'ям, посадою та коротким описом
• Секція навичок (React, TypeScript, Next.js тощо) — як бейджики або прогрес-бари
• 2-3 виділених проекти (посилання на /projects)
• CTA-кнопка "Зв'язатися" → /contact

3. Сторінка проектів

Мінімум 3 проекти (можеш використати свої ДЗ з курсу!):

Кожен проект — картка з:

• Назва та короткий опис
• Технології (бейджики)
• Скріншот або placeholder
• Посилання: "Код" (GitHub) та "Демо" (якщо є)

4. Блог з MDX

Створи мінімум 3 статті у content/posts/:

---
title: "Що я дізнався про React"
date: "2026-02-01"
description: "Мої враження від вивчення React"
---

• Список статей на /blog (відсортовані за датою)
• generateStaticParams для SSG сторінок статей
• generateMetadata для SEO кожної статті

5. Форма контактів

Client Component з полями: ім'я, email, повідомлення.

• Валідація на клієнті
• При submit — відправка на API route /api/contact
• API route: валідація + console.log даних (або збереження в JSON-файл)
• Після відправки — повідомлення "Дякую! Я відповім найближчим часом"

6. Layout та дизайн

• Спільний layout: header з навігацією + footer
• NavLink з active-стилем для поточної сторінки
• Responsive дизайн (mobile-first)
• Tailwind CSS для стилізації
• next/font для підключення шрифту
• next/image для оптимізації зображень

7. SEO

• metadata для кожної сторінки (title, description)
• Open Graph метадані
• robots.txt та sitemap.xml (статичні файли в public/)

8. Deploy на Netlify

1. Запуш проект на GitHub
2. Підключи репозиторій до Netlify
3. Налаштуй build command: npm run build
4. Додай environment variables (якщо є)
5. Перевір, що сайт доступний за URL

Структура проекту

src/
├── app/
│   ├── layout.tsx
│   ├── page.tsx           # Головна
│   ├── about/page.tsx
│   ├── projects/page.tsx
│   ├── blog/
│   │   ├── page.tsx       # Список статей
│   │   └── [slug]/page.tsx
│   ├── contact/page.tsx
│   └── api/
│       └── contact/route.ts
├── components/
│   ├── Header.tsx
│   ├── Footer.tsx
│   ├── ProjectCard.tsx
│   ├── PostCard.tsx
│   ├── SkillBadge.tsx
│   └── ContactForm.tsx
└── lib/
    └── posts.ts           # Утиліти для роботи з MDX
content/
└── posts/
    ├── react-journey.mdx
    ├── css-tricks.mdx
    └── first-deploy.mdx
public/
├── images/
├── robots.txt
└── sitemap.xml

Бонус

• Темна/світла тема через Context API або next-themes
• Анімації при скролі (CSS @keyframes або IntersectionObserver)
• Кастомний домен (безкоштовний .netlify.app або свій)
• Лічильник переглядів статей (API route + JSON-файл)
• "Зараз слухаю" віджет з улюбленим плейлистом

Критерії оцінки