Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a modern, animated portfolio website designed for a front-end developer showcasing skills, experience, and projects. The single-page layout will emphasize visual impact while providing essential information to engage users and attract freelance opportunities.

## CORE FEATURES
1. **Hero Section**: A captivating introduction with animated visuals and a brief personal tagline that highlights the developer's expertise.
2. **About Section**: A concise overview of the developer's background, philosophy, and unique approach to design and development.
3. **Skills Section**: A visually appealing representation of technical skills, possibly using progress bars or icons to illustrate proficiency levels.
4. **Experience Section**: A timeline or card layout displaying key professional experiences and achievements.
5. **Projects Section**: Showcase notable projects with images, descriptions, and links to live demos or code repositories.
6. **Contact Section**: A simple form for potential clients to reach out, along with links to social media profiles and GitHub.

## 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 will be a single vertical scroll with distinct sections for Hero, About, Skills, Experience, Projects, and Contact. Each section will be clearly defined with ample spacing and appropriate animations to enhance user engagement.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not explicitly required for a single-page portfolio, but consider using React Context for managing form state.

## IMPLEMENTATION STEPS
1. **Set up the project**: Create a new React application with TypeScript and install Tailwind CSS.
2. **Install dependencies**: Add shadcn/ui and any other necessary libraries for animations and interactions.
3. **Create the layout**:
   - Build a single-page layout with sections for Hero, About, Skills, Experience, Projects, and Contact.
   - Use Tailwind CSS for styling and responsiveness.
4. **Implement the Hero Section**: Design an engaging hero area with animations (e.g., fade-in, slide) for text and images.
5. **Develop each section**: Create components for About, Skills, Experience, and Projects, ensuring to use the specified typography and color scheme.
6. **Add the Contact Form**: Build a functional contact form using controlled components, ensuring it matches the design specifications.
7. **Optimize for performance**: Ensure the site loads quickly and is responsive across different devices.

## USER EXPERIENCE
Users will land on a visually striking hero section that immediately captures attention. As they scroll down, they will encounter smooth transitions between sections, enhancing the storytelling aspect of the portfolio. The contact form will be straightforward, encouraging potential clients to reach out easily. The overall experience will be intuitive, focusing on delivering information clearly while showcasing the developer's unique style and skills.

This structure will help create a cohesive portfolio that not only highlights your abilities but also engages visitors effectively.