Портфолио фронтенд-разработчика: какие проекты показать, GitHub README

Зачем портфолио

Для junior портфолио важнее резюме. Работодатель хочет увидеть код, а не прочитать список навыков. Два-три толковых проекта с чистым кодом и хорошим README лучше, чем десять tutorial-клонов.

GitHub — основное портфолио фронтендера. Отдельный сайт-портфолио — опционально, но GitHub обязателен.

Какие проекты включить

Минимум 3 проекта

1. CRUD-приложение — показывает, что вы умеете работать с данными:

• TODO-приложение с категориями, фильтрами, drag & drop
• Трекер задач (как упрощённый Trello)
• Список контактов с поиском и сортировкой

Что демонстрирует: работа с формами, списками, состоянием, localStorage.

2. Приложение с внешним API — показывает работу с реальными данными:

• Погода (OpenWeather API)
• Каталог фильмов (TMDB API)
• Поиск пользователей GitHub (GitHub API)

Что демонстрирует: fetch, обработка ошибок, loading states, пагинация.

3. SPA с маршрутизацией — показывает знание фреймворка:

• Интернет-магазин (каталог, корзина, карточка товара)
• Блог (список статей, страница статьи, поиск)
• Дашборд (графики, таблицы, фильтры)

Что демонстрирует: роутинг, state management, адаптивность, структура проекта.

Бонусные проекты

• Чат на WebSocket — real-time, авторизация
• Клон известного сайта — показывает, что можете повторить сложный UI
• Проект с анимациями — CSS-анимации, transitions
• Open-source контрибуция — даже мелкие PR в популярные проекты

Чего не стоит показывать

• Calculator — слишком простой, есть у всех
• Копии туториалов без изменений — сразу видно
• Незаконченные проекты с битой вёрсткой
• Проекты 3-летней давности на jQuery

GitHub README

README — лицо проекта. Многие рекрутеры открывают репозиторий и читают только его.

Структура хорошего README

# Название проекта

Краткое описание (1-2 предложения).

## Демо

[Ссылка на работающее приложение](https://project.vercel.app)

## Скриншоты

![Главная страница](./screenshots/main.png)
![Каталог](./screenshots/catalog.png)

## Функциональность

- Поиск товаров по названию и категории
- Фильтрация по цене, рейтингу
- Корзина с подсчётом суммы
- Сохранение корзины в localStorage
- Адаптивная верстка (mobile, tablet, desktop)
- Skeleton loading при загрузке данных

## Технологии

- Vue 3 + Composition API
- TypeScript
- Pinia
- Vue Router
- Tailwind CSS
- Vitest

## Установка

```bash
git clone https://github.com/username/project.git
cd project
npm install
npm run dev

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

src/ features/ # Фичи по папкам auth/ products/ cart/ shared/ # Общий код components/ composables/ utils/ stores/ # Pinia stores

### Что обязательно в README

1. **Название и описание** — что это за проект
2. **Скриншоты** — 2–3 картинки, показывающие UI
3. **Ссылка на демо** — живое приложение, куда можно зайти
4. **Список функциональности** — что умеет
5. **Стек технологий** — с чем сделан
6. **Инструкция по запуску** — как запустить локально

### Чего не должно быть

- Пустой README
- «Created with Vite» — автогенерированный текст
- Скриншоты кода вместо скриншотов приложения
- Длинное описание истории создания

## Деплой проектов

Каждый проект должен быть доступен онлайн. Бесплатные варианты:

| Сервис | Подходит для |
|--------|-------------|
| Vercel | React, Vue, Nuxt, Next.js |
| Netlify | Статика, SPA |
| GitHub Pages | Статика, Vue/React (с настройкой) |
| Surge | Простой хостинг статики |

Деплой на Vercel — пара кликов:

1. Зарегистрируйтесь через GitHub
2. Import repository
3. Deploy

Ссылка на демо — в README и в резюме.

## GitHub профиль

### Кончики профиля

- **Аватар** — фото или узнаваемая картинка
- **Bio** — «Frontend Developer | Vue, React, TypeScript»
- **Pinned repositories** — закрепите 6 лучших проектов
- **README профиля** — файл `username/username` с описанием

### Профильный README

```markdown
# Привет, я Иван 👋

Frontend-разработчик. Пишу на Vue 3 и React с TypeScript.

## Стек
Vue 3, React, TypeScript, Pinia, Tailwind CSS, Vitest

## Проекты
- [Магазин](https://github.com/ivan/shop) — Vue 3, Pinia, TypeScript
- [Канбан](https://github.com/ivan/kanban) — React, Zustand
- [Чат](https://github.com/ivan/chat) — Vue 3, WebSocket

## Контакты
- Telegram: @ivan
- Email: ivan@email.com

Activity

Зелёные квадратики (contributions) показывают активность. Не нужно делать коммиты каждый день — но регулярная работа видна и это плюс.

Как презентовать pet-проект

Работодатель хочет понять:

1. Вы сами это написали? — коммиты с осмысленными сообщениями, не один коммит «initial commit»
2. Понимаете ли вы код? — сможете объяснить каждую строчку
3. Как думаете? — выбор технологий, структура, решения

Правильная история коммитов

feat: add product filtering by category
feat: add search with debounce
fix: fix cart total calculation on quantity change
refactor: extract api calls to separate layer
test: add unit tests for cart store

Не:

update
fix
asdfasdf
final version
final final version

Чек-лист

• Минимум 3 проекта на GitHub
• Каждый проект задеплоен и доступен онлайн
• У каждого проекта есть README с описанием, скриншотами, демо
• Проекты используют современный стек (Vue 3 / React + TypeScript)
• Код читаемый, с понятной структурой
• История коммитов осмысленная
• GitHub профиль оформлен (bio, pinned, аватар)

Итог

• 3 качественных проекта лучше 10 tutorial-клонов
• Каждый проект: GitHub + демо + хороший README
• README: описание, скриншоты, демо, стек, установка
• Деплойте на Vercel/Netlify — это бесплатно
• Осмысленная история коммитов показывает процесс работы
• GitHub профиль — основное портфолио фронтендера