Lovable Prompt Creator - AI Prompt Generator

# APPLICATION OVERVIEW
This project is a personal portfolio website for a full-stack freelance designer and creative developer. The site aims to serve as an interactive art piece, showcasing the designer's work and personality through bold animations, illustrations, and a unique user experience. 

# CORE FEATURES
1. **Hero Section**: A captivating full-screen introduction featuring an animated loading sequence and an engaging welcome message along with illustrations.
2. **Work Carousel**: An interactive carousel displaying portfolio items with project details, including services provided and links to view more.
3. **Services Section**: A horizontally scrollable section showcasing the services offered, each represented as distinct cards with animated elements.
4. **About Section**: An illustrated scene that provides insights into the designer's background, accompanied by a floating info box with a bio and client list.
5. **Contact Section**: A visually striking area with a guitar illustration, providing contact information and a call-to-action for potential clients.
6. **Gold Mode Toggle**: A fun toggle that switches the color scheme and activates animations, enhancing user engagement.

# DESIGN SPECIFICATIONS
- **Visual Style**: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography
- **Color Mode**: Light theme with dark text on light backgrounds
- **Primary Color**: #1978E5 (accent for buttons, links, highlights)
- **Typography**: Use Inter from Google Fonts for headings, Inter for body text and UI elements
- **Border Radius**: 8px (moderately rounded) for buttons, cards, and inputs
- **Layout**: The layout consists of a full-width header with navigation links, followed by distinct sections for Hero, Work, Services, About, and Contact, each designed to be visually engaging and easy to navigate.

# TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not specified; consider using React's built-in state management or Context API as needed.

# IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project using Vite with TypeScript.
2. **Install Dependencies**: Install Tailwind CSS, Framer Motion, react-intersection-observer, Lenis, and Embla Carousel.
3. **Create Component Structure**: Organize the components in the `/src/components` directory as per the provided structure.
4. **Implement Loading Sequence**: Create a `LoadingSequence` component incorporating the animated loader as specified.
5. **Develop Navigation**: Implement the `Navigation` component featuring sticky links and hover animations.
6. **Build Hero Section**: Create the `HeroSection` with the animated entrance, illustration, and background layers.
7. **Construct Work Carousel**: Develop the `WorkCarousel` using Embla Carousel, integrating project cards with hover effects.
8. **Design Services Section**: Implement the `ServicesSection` with horizontal scrolling and animated service cards.
9. **Create About Section**: Build the `AboutSection` with the illustrated stadium scene and floating info box.
10. **Develop Contact Section**: Create the `ContactSection` with the guitar illustration and contact details.
11. **Implement Gold Mode Toggle**: Build the `GoldModeToggle` for the theme toggle functionality with animations.
12. **Add Page Transitions**: Implement horizontal wipe transitions for navigating between portfolio details.
13. **Ensure Accessibility**: Test and implement best practices for accessibility, including ARIA roles and keyboard navigation.
14. **Responsive Design**: Implement media queries and responsive styles for mobile and tablet views as specified.
15. **Testing & Deployment**: Test the application across different devices and browsers, then deploy to a hosting platform.

# USER EXPERIENCE
The user will be greeted by an engaging loading sequence that transitions smoothly into the hero section. Each part of the portfolio will be easily accessible through sticky navigation, with sections that respond dynamically to scrolling and user interactions. Animations will enhance the exploration experience, making it feel like a journey through a creatively designed space. Users will be encouraged to connect through a visually appealing contact section, fostering potential collaboration opportunities.