Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a portfolio website designed to showcase an individual's work and skills in a clean, minimalist format. The primary purpose is to create an engaging online presence that highlights projects, experience, and contact information, all while maintaining a simple and elegant design.

## CORE FEATURES
1. **Hero Section**: A prominent introduction area with a brief description and an eye-catching background image or video, establishing the user's personal brand.
2. **Project Showcase**: A dedicated section to display projects with images, descriptions, and links to live demos or GitHub repositories, emphasizing the user's skills and accomplishments.
3. **About Me**: A short biography section where the user can share their background, skills, and professional philosophy.
4. **Testimonials**: A section for client or peer testimonials to build credibility and showcase the user's impact.
5. **Contact Form**: A simple and straightforward form for visitors to get in touch, including fields for name, email, and message.
6. **Responsive Design**: Ensure the website is fully responsive, adapting beautifully to various devices and screen sizes.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with plenty of white space, emphasizing clarity and focus on content.
- **Color Mode**: Light theme with dark text on light backgrounds to promote readability and a fresh look.
- **Layout**: A single-column layout with sections stacked vertically. The hero section at the top, followed by project showcases, about me, testimonials, and contact form. Use ample padding and margins for spacing.
- **Typography**: Use a modern sans-serif font for headings (e.g., Montserrat) and a legible serif font for body text (e.g., Lora). Establish a clear hierarchy with larger font sizes for headings and smaller sizes for body text.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for building the user interface.
- **Styling**: Tailwind CSS for utility-first styling, enabling rapid design and responsiveness.
- **UI Components**: Utilize shadcn/ui for common UI components to maintain consistency and speed up development.
- **State Management**: React's built-in state management will suffice for handling form submissions and dynamic content.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create the Hero Section**: Build a full-width hero section with a title, subtitle, and a background image. Style with Tailwind CSS for responsiveness.
3. **Develop the Project Showcase**: Create a grid layout for displaying projects. Each project should include an image, title, description, and a link to view more.
4. **Build the About Me Section**: Add a well-structured section with text content about the user, styled to match the overall design.
5. **Incorporate Testimonials**: Design a carousel or grid layout for testimonials, ensuring they are easy to read and visually appealing.
6. **Implement the Contact Form**: Create a form with necessary fields, ensuring proper validation and handling of submissions.
7. **Ensure Responsiveness**: Test the website on various devices and screen sizes to ensure a seamless experience everywhere.
8. **Deploy the Website**: Choose a hosting platform (e.g., Netlify or Vercel) for deployment and connect the domain.

## USER EXPERIENCE
Key interactions include navigating through the portfolio sections via smooth scrolling, filling out the contact form with instant feedback upon submission, and viewing projects in detail with links to external sites. The user experience should be fluid and intuitive, encouraging visitors to engage with the content and reach out for opportunities.