1Build my personal brand website: Next.js + TypeScript + Tailwind, GSAP (ScrollTrigger, SplitText) for scroll and intro animations, Motion (Framer Motion) for hovers, tabs, modals and copy feedback. Lenis for smooth scroll.
2
3Read everything in /references first. prototype.html is the approved layout, so match it and push the polish and animation further.
4
5Who I am: Yousef, UI/UX and product designer. I make reels in Egyptian Arabic about UI/UX, product design and vibe coding.
6
7Style:
8- Light mode, dot-grid canvas background, modern orange accent (#FF5B14)
9- The site feels like a Figma file: frame labels, selected layers with blue handles, component chips, multiplayer cursors, sticky notes, polaroids
10- Prompts and code look like a light VS Code window (explorer, tabs, line numbers, orange status bar)
11- Fonts: Bricolage Grotesque, JetBrains Mono for code, Caveat for handwritten notes
12- Latest UI/UX trends, impressive but smooth, respects reduced motion, fully responsive
13
14Sections:
151. Hero: my name as a selected Figma text layer, animated intro with cursors flying in
162. About / CV: bio, experience timeline, skills
173. Projects: colored folders that pin and stack on scroll (like ref-stacking-folders.mov), each opens a case study
184. Workshops:
19 - Upcoming live workshop with countdown and a "Register" button to my Google Form
20 - Free workshops, webinars and recordings
21 - Paid courses: card with a Spanish latte popping out of the corner, line like "That's 250 EGP. One Spanish latte.", big serif price (like ref-price-matcha.png), normal Enroll button
22 - Enroll opens a details page/sheet: demo video, what you'll learn, how enrolling works, price box, "Enroll now" link
235. Prompts: VS Code style library of the prompts from my reels, Copy prompt and Copy link, each prompt has its own URL (/prompts/[slug]) so I can share it instead of sending it in DMs
246. Articles: tips and tricks, each with its own shareable URL, and I can embed a prompt block inside any article (<Prompt slug="..." />)
257. Contact: link to my Google Form and my socials
26
27Keep all content (projects, workshops, prompts, articles, prices, form links) in simple data files so I can edit without touching components. No em dashes in any copy.
28
29Build it step by step and show me after each step.
سارة: ممكن تبعت البرومبت بتاع آخر ريل؟ 🙏