build-portfolio

name	build-portfolio
description	Создать портфолио сайт для дизайнера, студии или фрилансера. Галерея проектов, анимированные переходы, case study страницы. Цель — конвертировать посетителя в клиента.
argument-hint	имя / студия / специализация

Build Portfolio — Alar Web Studio

Ты создаёшь портфолио сайт для $ARGUMENTS.

---

ШАГ 0 — Брифинг

1. Кто это: фрилансер / студия / агентство / разработчик?
2. Специализация: веб-дизайн / UI/UX / разработка / брендинг / фото / видео?
3. Стиль: минималистичный / тёмный editorial / playful / luxury?
4. Сколько проектов в портфолио? Есть скриншоты/видео?
5. Нужны ли case study страницы (отдельные страницы под каждый проект)?
6. CTA: написать / заказать / скачать резюме?
7. Языки: только русский / только английский / оба?
8. Примеры портфолио которые нравятся?

---

СТРУКТУРА ПОРТФОЛИО

/                    — Главная (hero + галерея проектов)
/project/slug        — Case study (опционально)
/about               — О себе / студии
/contact             — Контакты / форма

Всё в одном HTML если проектов < 8 и нет case study. Многостраничный если нужны подробные case study.

---

ГЛАВНАЯ СТРАНИЦА

Hero секция — варианты

<!-- Вариант 1: Имя крупно + роль -->
<section class="hero">
  <h1 class="hero-name">Илья Петров</h1>
  <p class="hero-role">UI/UX Designer & Developer</p>
  <div class="hero-cta">
    <a href="#work" class="btn-primary">See my work</a>
    <a href="#contact" class="btn-ghost">Get in touch</a>
  </div>
</section>

<!-- Вариант 2: Tagline + описание -->
<section class="hero">
  <span class="hero-tag">Available for work</span>
  <h1>I craft <em>digital experiences</em><br>that convert</h1>
  <p>5+ years building products for startups and Fortune 500</p>
</section>

Галерея проектов

<!-- Bento grid — лучшее для портфолио -->
<section class="work" id="work">
  <div class="work-grid">
    <article class="project-card large" data-cursor="View">
      <div class="card-img">
        <img src="project-1.jpg" alt="Alar Finance">
        <div class="card-overlay">
          <span class="card-tag">UI/UX · 2024</span>
          <h3>Alar Finance</h3>
        </div>
      </div>
    </article>
    <article class="project-card">...</article>
    <article class="project-card">...</article>
  </div>
</section>

.work-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 200px;
  gap: 16px;
}
.project-card { grid-column: span 6; grid-row: span 2; border-radius: 20px; overflow: hidden; cursor: pointer; }
.project-card.large { grid-column: span 8; grid-row: span 3; }
.project-card.tall { grid-column: span 4; grid-row: span 3; }

---

HOVER АНИМАЦИИ НА КАРТОЧКАХ

.project-card { position: relative; overflow: hidden; }
.card-img img { transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.project-card:hover .card-img img { transform: scale(1.05); }

.card-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 32px;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  transform: translateY(20px); opacity: 0;
  transition: all 0.4s ease;
}
.project-card:hover .card-overlay { transform: translateY(0); opacity: 1; }

---

КАСТОМНЫЙ КУРСОР (signature портфолио элемент)

const cursor = document.createElement('div');
cursor.className = 'cursor';
document.body.appendChild(cursor);

const cursorDot = document.createElement('div');
cursorDot.className = 'cursor-dot';
document.body.appendChild(cursorDot);

let cursorX = 0, cursorY = 0;
document.addEventListener('mousemove', e => {
  cursorDot.style.cssText = `left:${e.clientX}px;top:${e.clientY}px`;
  cursorX += (e.clientX - cursorX) * 0.12;
  cursorY += (e.clientY - cursorY) * 0.12;
  cursor.style.cssText = `left:${cursorX}px;top:${cursorY}px`;
});

// Expand on hoverable elements
document.querySelectorAll('a, button, .project-card').forEach(el => {
  el.addEventListener('mouseenter', () => cursor.classList.add('hover'));
  el.addEventListener('mouseleave', () => cursor.classList.remove('hover'));
});

.cursor, .cursor-dot {
  position: fixed; border-radius: 50%; pointer-events: none; z-index: 9999; transform: translate(-50%,-50%);
}
.cursor { width: 40px; height: 40px; border: 1.5px solid currentColor; transition: width 0.3s, height 0.3s, background 0.3s; }
.cursor.hover { width: 64px; height: 64px; background: rgba(255,255,255,0.1); }
.cursor-dot { width: 6px; height: 6px; background: currentColor; }

---

PAGE TRANSITIONS (Barba.js или ручные)

// Простой transition без библиотек
document.querySelectorAll('a[href]').forEach(link => {
  link.addEventListener('click', e => {
    if (link.hostname !== location.hostname) return;
    e.preventDefault();
    const href = link.href;
    document.body.style.cssText = 'opacity:0;transform:translateY(20px);transition:all 0.4s ease';
    setTimeout(() => window.location.href = href, 400);
  });
});
window.addEventListener('load', () => {
  document.body.style.cssText = 'opacity:1;transform:translateY(0);transition:all 0.6s ease';
});

---

CASE STUDY СТРАНИЦА

<article class="case-study">
  <!-- Hero -->
  <div class="cs-hero">
    <div class="cs-meta">
      <span>UI/UX Design</span> · <span>2024</span>
    </div>
    <h1>Alar Finance</h1>
    <p class="cs-desc">Personal finance app for Telegram users</p>
    <img src="hero.jpg" class="cs-hero-img" alt="">
  </div>

  <!-- Overview -->
  <div class="cs-grid">
    <div><strong>Role</strong><p>Lead Designer</p></div>
    <div><strong>Duration</strong><p>3 months</p></div>
    <div><strong>Tools</strong><p>Figma, Claude Code</p></div>
    <div><strong>Impact</strong><p>+40% retention</p></div>
  </div>

  <!-- Content blocks -->
  <section class="cs-block"><h2>Problem</h2><p>...</p></section>
  <section class="cs-block"><h2>Solution</h2><p>...</p><img src="solution.jpg"></section>
  <section class="cs-block"><h2>Results</h2>
    <div class="cs-metrics">
      <div class="metric"><span class="num">+40%</span><span>Retention</span></div>
      <div class="metric"><span class="num">4.8★</span><span>Rating</span></div>
    </div>
  </section>
</article>

---

КОНТАКТЫ

<section class="contact">
  <h2>Let's work together</h2>
  <a href="mailto:[e-mail]" class="contact-email">[e-mail]</a>
  <div class="contact-socials">
    <a href="#">Telegram</a>
    <a href="#">Instagram</a>
    <a href="#">GitHub</a>
    <a href="#">Behance</a>
  </div>
</section>

---

ШРИФТЫ ДЛЯ ПОРТФОЛИО

Стиль	Заголовок	Текст
Minimal	Satoshi	Switzer
Editorial	Playfair Display	Inter
Tech	Clash Display	DM Mono
Luxury	Cormorant Garamond	Switzer

---

ДЕПЛОЙ ПОРТФОЛИО

# Cloudflare Pages (рекомендуется — бесплатно)
cd portfolio && npx wrangler pages deploy . --project-name my-portfolio

# GitHub Pages (если нет Cloudflare)
# Vercel: vercel deploy

---

ПОСЛЕ РАБОТЫ

git add -A && git commit -m "[UI] Portfolio — [имя/студия]" && git push origin main