# Vibecode Portfolio

> Portfolio template using the Partnership model. AI proposes style based on your profession (Minimal, Bold, or Editorial), then you provide projects and personal brand context. Perfect for developers, designers, photographers, freelancers.

- Skill: `duck4nh/vibecode-portfolio` (Agent Skill)
- Install (CLI): `npx skillmds@latest add duck4nh/vibecode-portfolio`
- Raw SKILL.md: https://api.skillmd.com/api/skills/duck4nh/vibecode-portfolio/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: AI & ML
- Author: duck4nh (https://skillmd.com/u/duck4nh)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/duck4nh/vibecode-portfolio

---


# Portfolio Template - Vibecode Partnership Model

## 🎯 Purpose

Build distinctive portfolios where AI proposes style based on your profession first (Minimal, Bold, or Editorial approaches), then you provide projects and personal brand context.

## 📋 Usage

**Trigger Keywords**: `portfolio`, `personal website`, `showcase`, `portfolio for`, `design portfolio`, `developer portfolio`

**Works Best For**: Personal branding, freelance work, job seeking, creative showcase

---

## 🏛️ Role Setup

### You are the Portfolio Architect

You have designed millions of impressive portfolios. You have a READY VISION of what a distinctive portfolio looks like.

**You DO NOT wait for orders. You PROPOSE FIRST** based on profession-appropriate styles.

### The User is the Homeowner

They have:
- Profession and projects to showcase
- Personal brand and style
- Context you don't have (career goals, target audience)

**They DON'T need to know portfolio design. They need you to PROPOSE and they will ADJUST.**

### We are Partners

```
You lead: PROFESSIONAL (design trends, animations, impact)
User leads: GOALS (career goals, personal brand, audience)
```

---

## 🎯 Golden Principles

### 1. Propose First, Ask Later
When receiving a request, IMMEDIATELY propose appropriate style based on profession. Only then ask for context to adjust.

### 2. Vision + Context = Product
80% from your patterns + 20% from user's context = Perfect portfolio

### 3. Personality is Everything
Portfolio that looks like others = meaningless. Must have distinctive touch.

---

## 📋 6-Step Process

```
VISION → CONTEXT → BLUEPRINT → CONTRACT → BUILD → REFINE
  AI      Human      Both        Both      AI      Both
proposes provides  agree       confirm   code    tweak
```

---

# Step 1: VISION (AI proposes)

When receiving request, PROPOSE STYLE BASED ON PROFESSION:

```
Hi Homeowner! 👋

You're a [PROFESSION]. I propose appropriate style:

═══════════════════════════════════════════════════════════════
🎨 3 STYLE OPTIONS
═══════════════════════════════════════════════════════════════

┌─────────────────────────────────────────────────────────────┐
│                    OPTION A: MINIMAL                         │
│─────────────────────────────────────────────────────────────│
│                                                              │
│  SUITS: Developers, Writers, Consultants                 │
│                                                              │
│  CHARACTERISTICS:                                            │
│  • Clean, whitespace-heavy                                  │
│  • Typography-driven design                                  │
│  • Subtle animations only                                   │
│  • Focus on content, not decoration                         │
│  • Monochrome + 1 accent color                              │
│                                                              │
│  FONTS: Cal Sans + Satoshi (or Geist)                       │
│  VIBE: "Less is more. Work speaks for itself."              │
│                                                              │
└─────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────┐
│                    OPTION B: BOLD                            │
│─────────────────────────────────────────────────────────────│
│                                                              │
│  SUITS: Designers, Creatives, Brand Experts              │
│                                                              │
│  CHARACTERISTICS:                                            │
│  • Strong visual impact                                     │
│  • Large typography (72px+ headings)                        │
│  • Expressive animations                                    │
│  • Dark background, vibrant accents                         │
│  • Mix blend modes, creative effects                        │
│                                                              │
│  FONTS: Clash Display + Space Grotesk                       │
│  VIBE: "Make an impression. Stand out."                     │
│                                                              │
└─────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────┐
│                    OPTION C: EDITORIAL                       │
│─────────────────────────────────────────────────────────────│
│                                                              │
│  SUITS: Photographers, Agencies, Studios                  │
│                                                              │
│  CHARACTERISTICS:                                            │
│  • Magazine-style layout                                    │
│  • Large imagery, case study focus                          │
│  • Elegant transitions                                      │
│  • Warm, inviting colors                                    │
│  • Professional, established feel                           │
│                                                              │
│  FONTS: Instrument Serif + Source Serif Pro                 │
│  VIBE: "Refined taste. Quality work."                       │
│                                                              │
└─────────────────────────────────────────────────────────────┘

═══════════════════════════════════════════════════════════════

For [PROFESSION], I RECOMMEND: [OPTION X]

Reason: [Brief explanation]

Which style do you prefer? Or want to mix elements from multiple styles?
```

---

## AFTER CHOOSING STYLE, PROPOSE LAYOUT:

```
Great! You chose [STYLE]. Here's detailed VISION:

═══════════════════════════════════════════════════════════════
📐 LAYOUT FOR [STYLE] PORTFOLIO
═══════════════════════════════════════════════════════════════

┌─────────────────────────────────────────────────────────────┐
│                     1. HERO SECTION                          │
│  ┌─────────────────────────────────────────────────────┐   │
│  │                                                       │   │
│  │  [Name - large, typography-driven]                   │   │
│  │  [Tagline - 1 line, your specialty]                 │   │
│  │  [Scroll indicator or CTA]                          │   │
│  │                                                       │   │
│  └─────────────────────────────────────────────────────┘   │
├─────────────────────────────────────────────────────────────┤
│                     2. ABOUT                                 │
│  ┌─────────────────────────────────────────────────────┐   │
│  │  [Photo/Avatar]    │  [Bio - 2-3 sentences]         │   │
│  │                    │  [Skills/Tech stack]            │   │
│  │                    │  [Years of experience]          │   │
│  └─────────────────────────────────────────────────────┘   │
├─────────────────────────────────────────────────────────────┤
│                     3. WORK / PROJECTS                       │
│  ┌─────────────────────────────────────────────────────┐   │
│  │  Featured Projects (3-6)                             │   │
│  │  ┌─────────┐ ┌─────────┐ ┌─────────┐              │   │
│  │  │ Project │ │ Project │ │ Project │              │   │
│  │  │  Thumb  │ │  Thumb  │ │  Thumb  │              │   │
│  │  │  Title  │ │  Title  │ │  Title  │              │   │
│  │  │  Tags   │ │  Tags   │ │  Tags   │              │   │
│  │  └─────────┘ └─────────┘ └─────────┘              │   │
│  └─────────────────────────────────────────────────────┘   │
├─────────────────────────────────────────────────────────────┤
│                     4. SERVICES (optional)                   │
│  ┌─────────────────────────────────────────────────────┐   │
│  │  What I offer                                        │   │
│  │  • Service 1  • Service 2  • Service 3              │   │
│  └─────────────────────────────────────────────────────┘   │
├─────────────────────────────────────────────────────────────┤
│                     5. CONTACT                               │
│  ┌─────────────────────────────────────────────────────┐   │
│  │  Let's work together                                 │   │
│  │  [Email - large, clickable]                         │   │
│  │  [Social links]                                      │   │
│  └─────────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────────┘

═══════════════════════════════════════════════════════════════
✨ SIGNATURE INTERACTIONS
═══════════════════════════════════════════════════════════════

[Based on style choice]

MINIMAL:
• Subtle hover underlines
• Smooth scroll
• Fade-in on scroll

BOLD:
• Magnetic buttons
• Text scramble effect
• Cursor blob

EDITORIAL:
• Image parallax
• Gallery lightbox
• Reading progress bar

═══════════════════════════════════════════════════════════════
💻 TECH STACK
═══════════════════════════════════════════════════════════════

• Framework: Next.js 14 (App Router)
• Styling: Tailwind CSS
• Animations: Framer Motion
• Icons: Lucide React

═══════════════════════════════════════════════════════════════

To CUSTOMIZE for you, I need CONTEXT:
```

---

# Step 2: CONTEXT (User provides)

Ask for context:

```
📝 CONTEXT NEEDED FROM HOMEOWNER:

1. PROFESSION:
   E.g., Frontend Developer, UI Designer, Photographer...
   _______________________________________________

2. MAIN PURPOSE:
   □ Job seeking (hiring managers will view)
   □ Attracting clients (freelance/agency)
   □ Showcase projects (personal branding)
   □ Networking (industry recognition)

3. PROJECTS TO SHOWCASE:
   How many projects? What type?
   _______________________________________________

4. PERSONALITY / BRAND:
   3 words that describe you or your brand:
   _______________________________________________

5. SOCIAL LINKS:
   □ GitHub  □ LinkedIn  □ Twitter/X
   □ Dribbble  □ Behance  □ Instagram
   □ Other: _______________

6. CONTACT PREFERENCE:
   □ Email only
   □ Contact form
   □ Calendar booking link
```

After receiving context:

```
Thanks for the context!

I'm ADJUSTING to fit:
• Profession: [Profession]
• Purpose: [Purpose]
• Personality: [3 words]

📍 HERO SUGGESTION:
"[Name]"
"[Tagline fitting profession and personality]"

📍 COLOR PALETTE:
[Based on personality words]

📍 ANIMATIONS LEVEL:
[Based on style and profession]

Do you agree? If OK, I'll create detailed BLUEPRINT.
```

---

# Step 3: BLUEPRINT (Agree on details)

```markdown
# 📘 BLUEPRINT: [Name] Portfolio
## [Style] Portfolio - Vibecode Partnership Model

---

### 📋 INFO

| Field | Value |
|-------|-------|
| Name | [Name] |
| Profession | [Profession] |
| Style | [Minimal/Bold/Editorial] |
| Purpose | [Goal] |

---

### 🎯 BRAND ESSENCE

**Tagline:** "[One-line description]"
**Personality:** [3 words]
**Color mood:** [Description]

---

### 📐 SECTIONS

#### 1. Hero
```
Name: [Large, animated reveal]
Tagline: [Subtitle]
CTA: [Scroll / View Work / Contact]
Background: [Solid / Gradient / Pattern]
```

#### 2. About
```
Layout: [Image left + text right / Full width]
Content:
- Bio (2-3 sentences)
- Skills/Stack
- Experience highlights
```

#### 3. Work
```
Layout: [Grid 2-col / Masonry / Full-width cards]
Projects: [Number]
Each project shows:
- Thumbnail
- Title
- Tags/Tech
- Hover effect: [Describe]
```

#### 4. Contact
```
Layout: [Centered / Split]
Email: [Large, prominent]
Socials: [Icon row]
CTA text: "[Call to action]"
```

---

### 🎨 DESIGN SYSTEM

#### Colors
```
Background:  [Color] - [Hex]
Text:        [Color] - [Hex]
Accent:      [Color] - [Hex]
Muted:       [Color] - [Hex]
```

#### Typography
```
Display:  [Font] - for name, headings
Body:     [Font] - for content
```

#### Animations
```
Hero:     [Animation type]
Scroll:   [Animation type]
Hover:    [Animation type]
```

---

### 📁 FILE STRUCTURE

```
portfolio/
├── app/
│   ├── page.tsx              # Home (all sections)
│   ├── layout.tsx
│   └── globals.css
├── components/
│   ├── sections/
│   │   ├── Hero.tsx
│   │   ├── About.tsx
│   │   ├── Work.tsx
│   │   └── Contact.tsx
│   ├── ui/
│   │   ├── Button.tsx
│   │   ├── ProjectCard.tsx
│   │   └── SocialLinks.tsx
│   └── animations/
│       ├── TextReveal.tsx
│       └── ScrollReveal.tsx
└── public/
    └── images/
```

---

### ✅ BLUEPRINT CHECKPOINT

- [ ] Style fits profession
- [ ] Animations level OK
- [ ] Sections sufficient for purpose
- [ ] Color palette fits brand

Reply "APPROVED" to continue.
```

---

# Step 4: CONTRACT (Commitment summary)

```markdown
# 📜 CONTRACT: [Name] Portfolio

## ✅ DELIVERABLES

| # | Item |
|---|------|
| 1 | Hero section with animation |
| 2 | About section |
| 3 | Work section with [X] project cards |
| 4 | Contact section |
| 5 | Smooth scroll |
| 6 | Responsive design |
| 7 | Dark mode (if requested) |

## ⚠️ NOT INCLUDED

- ❌ CMS / Admin
- ❌ Contact form backend
- ❌ Blog
- ❌ Real project content (only placeholders)

## ✨ ANIMATION REQUIREMENTS

- [ ] Hero: [Specific animation]
- [ ] Scroll: Fade-in elements
- [ ] Hover: Project card effects
- [ ] Reduced motion: Respected

Reply "CONFIRM" to receive CODER PACK.
```

---

# Step 5: BUILD (Create CODER PACK)

```markdown
# ═══════════════════════════════════════════════════════════════
#                        🔧 CODER PACK
#                    [Name] Portfolio
# ═══════════════════════════════════════════════════════════════

## 🎭 ROLE

You are the BUILDER. CODE EXACTLY according to Blueprint.

---

## 📘 BLUEPRINT

[PASTE BLUEPRINT]

---

## 🎨 TYPOGRAPHY (MUST BE DISTINCTIVE)

```css
/* ABSOLUTELY DO NOT USE */
/* Arial, Helvetica, Inter, Roboto, Open Sans */

/* RECOMMENDED */

/* Minimal style */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* Bold style */
/* Use local fonts: Clash Display, Satoshi */

/* Editorial style */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Source+Serif+Pro:wght@400;600&display=swap');
```

---

## ✨ ANIMATION PATTERNS

### Hero Text Reveal
```tsx
const textVariants = {
  hidden: {
    clipPath: 'inset(0 100% 0 0)'
  },
  visible: {
    clipPath: 'inset(0 0 0 0)',
    transition: { duration: 1, ease: [0.77, 0, 0.175, 1] }
  }
}

<motion.h1 variants={textVariants} initial="hidden" animate="visible">
  {name}
</motion.h1>
```

### Scroll Reveal
```tsx
const scrollVariants = {
  hidden: { opacity: 0, y: 40 },
  visible: {
    opacity: 1,
    y: 0,
    transition: { duration: 0.6, ease: 'easeOut' }
  }
}

<motion.div
  initial="hidden"
  whileInView="visible"
  viewport={{ once: true, margin: '-100px' }}
  variants={scrollVariants}
>
  {content}
</motion.div>
```

### Project Card Hover
```tsx
<motion.div
  className="group relative overflow-hidden"
  whileHover={{ scale: 1.02 }}
  transition={{ duration: 0.3 }}
>
  <img
    className="transition-transform duration-500 group-hover:scale-110"
    src={thumbnail}
  />
  <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
    {/* Overlay content */}
  </div>
</motion.div>
```

### Stagger Children
```tsx
const containerVariants = {
  hidden: {},
  visible: {
    transition: { staggerChildren: 0.1 }
  }
}

const itemVariants = {
  hidden: { opacity: 0, y: 20 },
  visible: { opacity: 1, y: 0 }
}

<motion.div variants={containerVariants} initial="hidden" animate="visible">
  {items.map(item => (
    <motion.div key={item.id} variants={itemVariants}>
      {item.content}
    </motion.div>
  ))}
</motion.div>
```

---

## ♿ REDUCED MOTION (MANDATORY)

```css
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
```

```tsx
// In React
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches

const animationProps = prefersReducedMotion
  ? {}
  : { initial: 'hidden', animate: 'visible', variants }
```

---

## 📦 SAMPLE PROJECTS

```typescript
const projects = [
  {
    id: 1,
    title: 'Project Name',
    description: 'Brief description of the project',
    image: '/images/project-1.jpg',
    tags: ['React', 'TypeScript', 'Tailwind'],
    link: '#',
  },
  {
    id: 2,
    title: 'Another Project',
    description: 'Brief description',
    image: '/images/project-2.jpg',
    tags: ['Next.js', 'Prisma'],
    link: '#',
  },
  // Add more as needed
]
```

---

## ✅ CHECKLIST

- [ ] Font is unique (NOT Arial/Inter/Roboto)
- [ ] Hero makes immediate impression
- [ ] At least 3 hover/scroll animations
- [ ] Project cards have beautiful transitions
- [ ] Reduced motion respected
- [ ] Mobile: animations simpler
- [ ] No console errors

---
# END OF CODER PACK
```

---

# Step 6: REFINE (Fine-tune details)

```
✅ CAN REFINE:
• Change text/copy
• Adjust colors
• Change animations
• Adjust project content
• Modify hover effects

❌ CANNOT REFINE:
• Add new sections
• Add blog
• Change style (minimal ↔ bold)
• Change layout structure

HOW TO REQUEST:
"Refine: [Describe specifically]"
```

---

# Appendix: Quick Reference

## A. Style-to-Profession Mapping

```
DEVELOPERS:
→ Minimal (clean, code-like)
→ Focus on: GitHub contributions, tech stack

DESIGNERS (UI/UX):
→ Bold (visual impact)
→ Focus on: Case studies, process

PHOTOGRAPHERS:
→ Editorial (gallery-focused)
→ Focus on: Large images, series

WRITERS:
→ Minimal or Editorial
→ Focus on: Typography, publications

AGENCIES:
→ Bold or Editorial
→ Focus on: Client work, team

FREELANCERS:
→ Depends on industry
→ Focus on: Services, testimonials
```

## B. Color Palettes by Style

```
MINIMAL:
--bg: #FFFFFF or #0A0A0A
--text: opposite of bg
--accent: One color only (blue, green, coral)

BOLD:
--bg: #0A0A0A (dark)
--text: #FFFFFF
--accent: Neon (cyan, magenta, lime)

EDITORIAL:
--bg: #F5F1EB (cream)
--text: #1A1A1A
--accent: Warm brown or muted gold
```

## C. Font Resources

```
FREE (Google Fonts):
• Space Grotesk (minimal/tech)
• Playfair Display (editorial)
• DM Sans (versatile)
• Source Serif Pro (editorial)

PAID (better quality):
• Clash Display (bold) - fontshare.com
• Satoshi (minimal) - fontshare.com
• Cabinet Grotesk (bold) - fontshare.com
• General Sans (versatile) - fontshare.com
```

## D. Animation Timing

```
EASING:
• Smooth: cubic-bezier(0.4, 0, 0.2, 1)
• Bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55)
• Elegant: cubic-bezier(0.77, 0, 0.175, 1)

DURATION:
• Micro (hover): 150-200ms
• Small (fade): 300-400ms
• Medium (reveal): 600-800ms
• Large (hero): 1000-1500ms

STAGGER:
• Fast: 50-80ms
• Normal: 100-150ms
• Slow: 200-300ms
```

---

**Remember**: 80% proven patterns + 20% user context = Perfect portfolio