Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application is a responsive portfolio site designed for a product designer to showcase their work in a clean and minimalist format. The focus will be on presenting projects with high-quality visuals and concise descriptions, allowing potential clients or employers to easily navigate and appreciate the designer's skills and creativity.

## CORE FEATURES
1. **Project Gallery**: A visually appealing grid layout displaying project thumbnails that link to detailed project pages.
2. **Project Detail Pages**: Each project will have its own dedicated page featuring a project description, images, and design insights.
3. **About Section**: A simple, engaging section that provides background information about the designer, including their philosophy and approach to product design.
4. **Contact Form**: A user-friendly contact form for inquiries, allowing visitors to reach out easily.
5. **Responsive Design**: Ensures the portfolio is accessible and visually appealing across all devices, including mobile, tablet, and desktop.
6. **Blog Section (Optional)**: A minimalistic blog area for sharing insights, design processes, or case studies, enhancing the portfolio's depth.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist with a focus on clean lines, ample white space, and a cohesive aesthetic that emphasizes the typography and project visuals.
- **Color Mode**: A light theme featuring dark text on light backgrounds to enhance readability and maintain a fresh, open feel.
- **Layout**: A simple grid layout for the project gallery on the homepage, with a linear flow for project detail pages. The header will include a navigation bar with links to the home, about, and contact sections.
- **Typography**: Utilize a sans-serif font like "Inter" or "Roboto" for body text to maintain clarity and modernity, with larger headings and a strong hierarchy to guide the user through the content.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for building a robust and type-safe application.
- **Styling**: Tailwind CSS for utility-first styling, ensuring a responsive layout and consistent design elements.
- **UI Components**: Use shadcn/ui for pre-built accessible UI components that fit the minimalist aesthetic.
- **State Management**: React Context API for managing application state effectively, particularly for the contact form and any interactive elements.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript using Create React App or Vite.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui to the project for styling and UI components.
3. **Create Folder Structure**: Organize the project into components (e.g., `Header`, `ProjectGallery`, `ProjectDetail`, `About`, `Contact`).
4. **Implement Routing**: Set up React Router for navigation between the homepage, project detail pages, about, and contact sections.
5. **Design the Homepage**: Create the project gallery using a grid layout and implement hover effects for project thumbnails.
6. **Build Project Detail Pages**: Develop the structure for individual project pages, ensuring they are linked from the gallery.
7. **Create About and Contact Sections**: Design these sections with a focus on simplicity and ease of use.
8. **Ensure Responsiveness**: Use Tailwind CSS to implement responsive design principles, testing on various devices.
9. **Test Functionality**: Conduct thorough testing for usability, ensuring forms work correctly and navigation is intuitive.
10. **Deploy Application**: Use a platform like Vercel or Netlify for deployment, ensuring the site is live and accessible.

## USER EXPERIENCE
The user experience will focus on seamless navigation and interaction. Users will easily browse through the project gallery, click on thumbnails to access detailed project pages, and read about the designer's background. The contact form will be straightforward, with clear input fields and submission confirmation. Responsiveness will ensure that users have a consistent experience across all devices, maintaining the minimalist aesthetic and usability throughout.