OpenClaw + ClawTeam + Superpowers Git Initialization
This commit is contained in:
@@ -0,0 +1,269 @@
|
||||
# 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.**
|
||||
Reference in New Issue
Block a user