You are building #name's personal landing page #name = #job_or_desired_role , #core_skills_or_niche (list 2–4), #personal_descriptor_or_title ; #background_or_origin; #personal_details_or_values ; runs on #motivators_or_drivers ; forward-thinking; #tone_preference (e.g., casual but professional, Gen-Z tone, etc.); clean taste; hates clutter; wants subtle, premium motion.
Site must be simple, minimal, fast, and animated — think Apple-esque minimal with tasteful micro-motion, not agency-dribbble soup.
Tech & Project Setup
-
Framework: Next.js 14 (App Router) + TypeScript.
-
Styling: Tailwind CSS (already in project). Respect a11y + prefers-reduced-motion.
-
UI: shadcn/ui (Cards, Button, Input), lucide-react icons.
-
Animation: Framer Motion (staggered fade/slide, micro-interactions on hover/focus, parallax hero).
-
State: React Context + Hooks (keep it light).
-
Fonts: System + one variable display font via next/font (e.g., Inter for body, optional display for headings).
-
Theme: Light/dark with smooth toggle; high contrast; no neon—sleek & mature.
-
SEO: next/metadata, OG image route, structured data (Person + WebSite).
-
Performance: Target Lighthouse 95+ across the board.
Brand & Voice
-
Voice: direct, sharp, a little playful; no filler; no fluff.
-
Tagline vibe: “#primary_skill × #secondary_skill . I #impact_statement. ”
-
Subtle values: #core_values_or_principles .
-
CTA tone: confident, not thirsty.
Pages & Sections (single-page for now)
-
Hero
-
Tagline + one-liner: who they are, what they do (#job_or_role_summary ).
-
Two primary CTAs: “#primary_cta_text ” (anchor to contact) and “#secondary_cta_text ” (newsletter, portfolio, etc.).
-
Subtle parallax background shapes (CSS or MotionValue), 60fps-friendly.
-
Proof / Highlights
-
Quick grid of credibility: #project_or_role_1 , #project_or_role_2 , #project_or_role_3 , #project_or_role_4 , #project_or_role_5 .
-
Each = small card with 1-sentence outcome (“Shipped X”, “Grew Y”, “Automated Z”), icon, and hover micro-lift.
-
What I Do
-
3 columns: #service_1 , #service_2, #service_3 .
-
Bullet points only; keep it punchy. Include “no-BS engagement: scope → ship → iterate.”
-
Selected Work
-
Minimal case tiles (3–6). Each: title, 1-liner, tags (#industry_tags ), link if public. Placeholder data ok; make it easy to swap JSON.
-
Notes / Newsletter
-
Tease “#newsletter_name ” with one featured micro-post (, , , .
-
Accessibility: Focus states, reduced motion support, semantic landmarks, alt text, label inputs.
Animation Rules
-
Page load: staggered fade-up for hero elements (80–120ms intervals).
-
Cards: hover micro-lift + shadow ease (no bounce).
-
In-view sections: once, 12% translateY with opacity → 0.
-
Parallax hero shapes driven by scroll, clamped, perf-safe.
-
Respect prefers-reduced-motion: reduce → disable nonessential motion.
Content (write it for me)
-
Write all copy in #tone_preference voice. Keep lines tight. No clichés. Examples:
-
Hero H1: “I #primary_skill . I #secondary_skill . I ship.”
-
Sub: “#value_proposition. ”
-
CTAs: “#primary_cta_text” / “#secondary_cta_text”
-
One-liners for highlights should be outcome-centric (metrics if available).
-
About: 4–6 sentences max. Honest, grounded, confident.
Files to Generate
-
app/layout.tsx (metadata, fonts, theme provider)
-
app/page.tsx (the whole landing page)
-
app/opengraph-image/route.ts (OG image)
-
components/* (section.tsx, navbar.tsx, footer.tsx, card.tsx, cta-group.tsx, theme-toggle.tsx)
-
lib/projects.ts (JSON-ish data for work highlights)
-
styles/globals.css (minimal additions if needed)
-
README.md (how to edit content, where to swap links)
-
Optional: components/particles.tsx or simple SVG shapes for hero parallax
Acceptance Criteria
-
Build runs with zero TypeScript errors.
-
Lighthouse >= 95 on Performance, A11y, Best Practices, SEO.
-
Animations feel premium and subtle; nothing distracts from reading.
-
Copy feels like an adult who ships, not a LinkedIn course ad.
-
Easy to swap highlights via lib/projects.ts.
Start Now
-
Scaffold the files above with working code and placeholder content.
-
Write the full copy in-line.
-
Use shadcn components where tasteful (Buttons, Cards, Input).
-
Implement framer-motion for hero, sections, and cards.
-
Add metadata + OG image route using the hero tagline.
-
Show me the complete code output.
