Portfolio Website for a Creative

Act as a senior UX designer who builds award-winning portfolio sites. Design a complete personal portfolio website for a [YOUR ROLE — e.g. UI/UX designer] with [YEARS OF EXPERIENCE] specialising in [SPECIALISATION — e.g. fintech and health apps].

DESIGN EVERY SECTION IN DETAIL:

1. HERO SECTION
• Name display: typography, size, animation (typewriter, fade-in, scramble)
• Role/title line: copy and styling
• 1-line positioning statement: write the actual copy (e.g. "I design products that turn complexity into clarity.")
• Scroll indicator: design and animation
• Background: gradient, video loop, particle effect, or clean solid — recommendation with reasoning
• Any interactive element (cursor effect, parallax layer, hover trigger)

2. SELECTED WORK GRID
• 3 case study cards: layout (equal grid, asymmetric, horizontal scroll)
• Each card contains: project name, category tag, year, cover image description, hover state
• Hover state: describe exactly what happens (image zoom, overlay appears, cursor changes)
• How to make this grid feel different from a standard portfolio

3. CASE STUDY TEMPLATE (one page layout)
• Problem section: how to present the brief without boring the reader
• Process section: Discovery → Research → Wireframing → Prototyping → Testing → Handoff — describe a visual timeline
• Solution section: hero screenshot, key decisions explained, before/after comparison
• Outcomes section: metrics, KPIs, what changed — how to display numbers visually
• Next project navigation: design the transition

4. ABOUT SECTION
• Photo treatment: full-bleed cropped, circle, polaroid-style — choose and describe
• Bio approach: 3 short paragraphs — write the structure (not placeholder text)
• Skills display: NOT a list of tools. Describe a more interesting visual approach.
• Values or beliefs (2–3 statements about how you approach work)

5. PROCESS SECTION
• 4-step visual timeline: what each step is called, how it's visualised
• Scroll-triggered reveal animation for this section

6. CONTACT SECTION
• Availability badge: "Available for projects" / "Currently booked" — design this signal
• CTA copy: write it (e.g. "Let's make something worth remembering.")
• Simple form: fields, label style, submit button
• Response time note: where it appears, what it says
• Social/platform links: which to show, how

ANIMATION & INTERACTION SPEC:
• Scroll trigger approach: which sections animate in
• Cursor customisation: default, hover on project, hover on link
• Page transition: how you move between portfolio pages