Домашнє завдання #26: DevSpace — персональне портфоліо

Фінал усього курсу. Ти будуєш і деплоїш у продакшн справжній персональний сайт — той, посилання на який не соромно поставити в резюме. І головне: ти не починаєш з нуля. Все, що ти зробив за курс, з'їжджається сюди.

Що ти вже маєш

• Статті з ДЗ #24 — довідник/щоденник переїжджає сюди цілком: контент, lib/posts.ts, сторінки. Не пиши блог з нуля — перенеси і адаптуй
• Твій каталог (ДЗ #23 і ДЗ #25) — головний кейс секції проєктів
• Pokedex (ДЗ #21), DevProfile (ДЗ #22), Todo на TS (ДЗ #20) — ще три готових кейси

Підготовка

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

Завдання

1. Сторінки

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

• Hero: ім'я, ким ти є («Frontend-розробник-початківець» — чесно і нормально), 1-2 речення про себе
• Навички бейджиками: HTML, CSS, TypeScript, React, Next.js...
• 2-3 виділених проєкти з посиланням на /projects
• CTA-кнопка «Зв'язатися» → /contact

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

Мінімум 3 проєкти — твої ДЗ з курсу. Твій каталог (ДЗ #23/#25) — перший і найпомітніший. Кожна картка:

• Назва, 2-3 речення: що робить і що ти в ньому навчився
• Технології бейджиками
• Скріншот (у тебе вони вже є в screenshots/ кожного репо!)
• Посилання «Код» (GitHub) та «Демо» (якщо є)

4. Блог

Перенеси з ДЗ #24: content/posts/, lib/posts.ts, список і сторінку статті з generateStaticParams та generateMetadata. Мінімум 3 статті (найкращі з ДЗ #24 плюс, за бажанням, нова — «Як я проходив цей курс»).

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

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

• Валідація на клієнті (обов'язкові поля, формат email)
• Submit → fetch POST на /api/contact
• API route: валідація (400 при порушенні) + console.log даних або запис у JSON
• Після відправки — «Дякую! Відповім найближчим часом»

6. Layout та дизайн

• Header з навігацією + footer на всіх сторінках
• Посилання поточної сторінки в навігації візуально виділене (usePathname)
• Responsive, mobile-first, Tailwind
• next/font для шрифту, next/image для зображень

7. SEO

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

8. Deploy на Vercel

1. Запуш проєкт на GitHub
2. Зайди на vercel.com → Add New → Project → Import свого GitHub-репозиторію
3. Vercel сам розпізнає Next.js — тисни Deploy, білд-команди налаштовувати не треба
4. Якщо є env-змінні — додай їх у Project Settings → Environment Variables (у git їх немає, пам'ятаєш?)
5. Перевір live URL: усі сторінки, блог, форму
6. Постав live URL у README і в описі GitHub-репозиторію

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

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, Footer, ProjectCard, PostCard, SkillBadge, ContactForm
└── lib/posts.ts       # з ДЗ #24
content/posts/         # статті з ДЗ #24
public/                # зображення, robots.txt, sitemap.xml

Як здати

1. Це — окремий публічний репозиторій
2. README.md: хто ти, що за сайт, live URL на Vercel, як запустити локально, які env-змінні потрібні (якщо є)
3. .env — НЕ комітити; якщо змінні є — додай .env.example
4. Мінімум 5 комітів — фінальний проєкт заслуговує на чесну історію
5. Скріншоти в screenshots/: desktop.png (головна), mobile.png, interaction.png (форма контактів з помилками валідації або сторінка проєктів)
6. Здай посиланням на репозиторій (у README — обов'язково live URL)

Критерії оцінювання

Підказки

Що далі

А далі — все по-справжньому. Цей сайт — живий: додавай нові проєкти, пиши статті, онови його, коли знайдеш першу роботу. Постав live URL у резюме та LinkedIn. Ти пройшов шлях від <h1>Привіт, світ!</h1> до задеплоєного Next.js-застосунку в продакшні — тепер ти розробник з портфоліо, яке це доводить.