# Portfolio Tết Theme - Design Spec

**Date:** 2026-03-31
**Author:** Sagi (Orchestrator AI)
**Status:** Draft → Approved by user

---

## 1. Overview

Build a personal portfolio website with traditional Tết (Vietnamese Lunar New Year) theme: red/gold colors, falling petals, subtle fireworks, lion dance motifs. Multi-page with clear routing. Responsive and smooth animations.

**Tech Stack:**
- Next.js 14+ (latest) with App Router
- TypeScript
- Tailwind CSS
- Framer Motion
- Deploy target: Vercel (recommended)

---

## 2. Project Structure

```
clawteam-portfolio/
├── app/
│   ├── layout.tsx
│   ├── page.tsx           (Home)
│   ├── projects/
│   │   └── page.tsx
│   ├── my-corner/
│   │   ├── page.tsx       (Blog list)
│   │   └── [slug]/
│   │       └── page.tsx   (Single post)
│   └── globals.css
├── components/
│   ├── Header.tsx
│   ├── Footer.tsx
│   ├── Hero.tsx
│   ├── About.tsx
│   ├── Experience.tsx
│   ├── Contact.tsx
│   ├── ProjectCard.tsx
│   ├── BlogCard.tsx
│   ├── TetEffects.tsx     (falling petals, fireworks)
│   └── ui/                (buttons, inputs, etc.)
├── data/
│   ├── profile.ts         (personal info from CV)
│   ├── experience.ts
│   ├── projects.ts
│   └── blogPosts.ts
├── lib/
│   └── utils.ts
├── public/
│   ├── avatar.jpeg
│   └── images/...
├── styles/
│   └── tailwind.css       (if using @tailwind directive)
├── next.config.js
├── tsconfig.json
├── package.json
└── README.md
```

---

## 3. Pages & Routes

### `/` (Home) - Single page with sections
- Hero (avatar + intro)
- About
- Experience (timeline)
- Contact (form + info)

### `/projects` (Projects)
- Grid of project cards

### `/my-corner` (Blog list)
- List of personal posts

### `/my-corner/[slug]` (Single post)
- Full content page

---

## 4. Content Mapping (from CV & avatar)

### Profile Data (`data/profile.ts`)
```ts
{
  name: "Nguyễn Ngọc Trí Vĩ",
  title: "AI Engineer",
  avatar: "/avatar.jpeg",
  email: "nntrivi2001@gmail.com",
  phone: "090 321 5095",
  linkedin: "https://linkedin.com/in/nguyen-ngoc-tri-vi",
  portfolio: "https://nguyenngoctrivi.vercel.app",
  languages: ["Vietnamese (native)", "English (intermediate)"],
  bio: `Short bio...`
}
```

### Experience Data (`data/experience.ts`)
Array of 4 positions with dates, company, role, description bullets.

### Projects Data (`data/projects.ts`)
From CV "Portfolio & Chứng chỉ" section. Initially minimal: title, description, tech stack, links (demo/GitHub). Can be expanded later.

### Blog Data (`data/blogPosts.ts`)
Initial placeholder posts with personal content (photos, memories, experiences). Slug-based.

---

## 5. Components Detail

#### Header
- Fixed top, transparent background with blur
- Logo (text "Trí Vĩ") left
- Nav links: Home, Projects, My Corner
- Mobile hamburger menu
- Active section highlight (Home only)

#### Footer
- Copyright: © 2025 - 2026 Nguyễn Ngọc Trí Vĩ
- Social icons (LinkedIn, GitHub, etc.)

#### Hero
- Large avatar (circular or rounded square)
- Name + title
- Short intro line
- Call-to-action buttons: "View Projects", "Contact"
- Background: gradient red/yellow
- TetEffects overlay (falling petals)

#### About
- Two-column: image (avatar or personal photo) + text
- Text: bio, languages, contact summary

#### Experience (Timeline)
- Vertical line with nodes
- Each node: date, company, role, bullet points
- Alternating left/right or single column left-aligned
- Framer Motion: slide in on scroll

#### Contact
- Simple form: name, email, message
- Submit: show success message + confetti effect (Framer Motion)
- Also display email, phone, LinkedIn as text/links

#### ProjectCard
- Image/thumbnail
- Title, description
- Tech badges
- Links: Demo, GitHub
- Hover: lift + shadow

#### BlogCard
- Optional image
- Title, date, excerpt
- "Read more" link

#### TetEffects
- Canvas-based falling petals (pink/red, slow drift)
- Subtle random fireworks (sparkles) on scroll or idle
- Decorative lion/dragon silhouettes in header/footer (SVG)

---

## 6. Styling & Theme

**Colors (Tailwind config):**
```js
colors: {
  primary: {
    DEFAULT: '#D32F2F',  // Red
    50: '#FFEBEE',
    100: '#FFCDD2',
    // ...
  },
  accent: {
    DEFAULT: '#FFC107',  // Gold/Yellow
    // ...
  },
  // Neutrals...
}
```

**Fonts:**
- Headings: `Playfair Display` (or `Noto Serif Vietnamese`)
- Body: `Inter` (or `Noto Sans Vietnamese`)
- Load via Google Fonts in `layout.tsx`

**Responsive breakpoints:**
- Mobile: < 768px (stack, hamburger)
- Tablet: 768px - 1024px (2-col grid for projects)
- Desktop: > 1024px (3-col grid, full layout)

---

## 7. Animations (Framer Motion)

- **Page transitions:** fade in/out between routes
- **Scroll reveal:** sections slide up + fade when entering viewport (use `IntersectionObserver` or `framer-motion`'s `whileInView`)
- **Hero:** avatar pulse or float
- **Timeline items:** stagger entrance
- **Project cards:** hover scale + shadow
- **Contact form:** input focus transitions
- **TetEffects:** canvas animations; optional subtle CSS keyframes for decorative elements

---

## 8. Data Management

All content stored in `data/` as TypeScript modules. Easy to edit without touching components.

Example `data/profile.ts`:
```ts
export const profile = {
  name: "Nguyễn Ngọc Trí Vĩ",
  title: "AI Engineer",
  avatar: "/avatar.jpeg",
  email: "nntrivi2001@gmail.com",
  phone: "090 321 5095",
  linkedin: "https://linkedin.com/in/nguyen-ngoc-tri-vi",
  portfolio: "https://nguyenngoctrivi.vercel.app",
  languages: ["Vietnamese (native)", "English (intermediate)"],
  bio: `A passionate AI Engineer...`,
};
```

---

## 9. Deployment

- `next build` → `out/` or Vercel automatic
- Environment: Node.js 18+
- Vercel: import repo, set build command `next build`, output `next start`
- Custom domain: optional

---

## 10. Future Enhancements (Out of Scope for v1)

- Blog CMS (Markdown files or headless CMS)
- Dark mode
- i18n (Vietnamese/English toggle)
- More advanced Tet animations (lion dance interactive)
- Testimonials section
- Resume PDF download

---

## 11. Acceptance Criteria

- [ ] Next.js project initializes and runs (`npm run dev`)
- [ ] Tailwind configured and functional
- [ ] All 3 routes render correctly
- [ ] Content from CV is accurately represented
- [ ] Responsive on mobile/tablet/desktop
- [ ] Tet theme applied (colors, fonts, decorations)
- [ ] Animations smooth (60fps)
- [ ] Avatar image displays
- [ ] Contact form shows success on submit (no backend needed)
- [ ] No console errors
- [ ] Ready to deploy to Vercel

---

**Spec approved by user on 2026-03-31. Proceed to implementation planning.**