Portfolio Site

Create a portfolio website with:
- Clean, minimal design
- Navigation: Home, About, Work, Contact
- Hero section with name, title, and brief intro
- Dark mode toggle

Create a hero section with:
- Large heading with my name
- Animated subtitle showing different roles (Developer, Designer, Creator)
- Brief tagline (1-2 sentences)
- Two buttons: "View My Work" and "Contact Me"
- Subtle background pattern or gradient
- Social media links (GitHub, LinkedIn, Twitter)

Make the hero more impactful:
- Use a gradient text effect on the name
- Add a subtle entrance animation
- Include a small profile photo or avatar
- Ensure it looks great on mobile

Create an About section with:
- A longer bio (2-3 paragraphs)
- Profile photo on one side, text on the other
- Key highlights/stats (years of experience, projects completed)
- Downloadable resume link

Add personality to the About section:
- A fun fact or hobby mention
- Casual, friendly tone
- Subtle animation on scroll

Create a projects section with:
- Section heading "Selected Work"
- Grid of project cards (2-3 columns on desktop)
- Each card shows: project image, title, brief description, tech tags
- Hover effect that reveals more details
- Click to open project detail

Create a project detail page/modal with:
- Large project image(s) or gallery
- Project title and full description
- Technologies used (as badges)
- Key features/highlights
- Links: Live Demo, GitHub repo
- Navigation to next/previous project

Add 4-6 sample projects:
1. "E-commerce Platform" - React, Node.js, Stripe
2. "Task Management App" - built with Kleap (Astro)
3. "Portfolio Website" - Astro + Tailwind
4. "Mobile App" - React Native

Create a skills section showing:
- Category groupings (Frontend, Backend, Tools)
- Skill badges or icons with names
- Optional: skill level indicators
- Clean, organized layout

Replace skills with a Services section:
- 3-4 service cards
- Each with icon, title, description
- Clear pricing or "Get Quote" CTA

Add a testimonials section with:
- Quote cards with client feedback
- Client name and company/role
- Client photo or company logo
- Carousel or grid layout

Create a contact section with:
- Section heading "Get In Touch"
- Brief text encouraging contact
- Form with: Name, Email, Message
- Submit button with loading state
- Success message after submission
- Alternative: email link and social links

Make the contact form functional:
- Validate required fields
- Save submissions with Kleap Forms (KleapForm)
- Get an email notification on each new submission
- Show success/error messages

Create a footer with:
- Copyright notice
- Social media links
- Navigation links
- Back to top button
- Consistent with overall design

Add subtle animations:
- Fade in sections on scroll
- Smooth hover transitions
- Page transition effects
- Loading animations

Add dark mode support:
- Toggle button in navigation
- Proper color scheme for dark mode
- Remember user preference

Add SEO optimization:
- Meta title and description
- Open Graph tags for sharing
- Proper heading structure
- Alt text on all images

Optimize for speed:
- Use Astro's image handling (or `<img loading="lazy">`) for optimized images
- Lazy load project images
- Minimize animations on mobile