Smartgift-AI/open-claw-team
17
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
b49ba1a719e634c07c2584601aa10d4edd9a4a20
open-claw-team/.openclaw/workspace/docs/superpowers/specs/2026-03-31-portfolio-tet-theme-design.md
T

6.8 KiB
Raw Blame History

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)

{
  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):

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:

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.

Reference in New Issue View Git Blame Copy Permalink