Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project involves creating a portfolio website for freelancers that showcases their work and facilitates client inquiries. The website will serve as a professional platform for freelancers, contractors, and solo creatives to highlight their skills and attract potential clients through an engaging and visually appealing interface.

## CORE FEATURES
1. **Portfolio Grid**: Display 8-15 of the freelancer's best projects in a visually appealing grid layout, allowing users to quickly browse and select projects of interest.
2. **Individual Project Pages**: Each project will have its own detailed page featuring case studies that outline the project overview, challenges, solutions, technologies used, results, and images.
3. **About Page**: A dedicated section that presents the freelancer's bio, skills, and experience, helping potential clients get to know the individual behind the portfolio.
4. **Contact Form**: A simple contact form for clients to make inquiries, with submissions sent directly to the freelancer's email.
5. **Testimonials Section** (optional): An area to display client testimonials to build credibility and attract more inquiries.
6. **Blog Section** (optional): A simple blog to showcase thought leadership and insights, enhancing the freelancer's online presence.

## 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 main layout will include a hero section with a strong call-to-action, followed by a grid showcasing featured projects, an about section, testimonials, and a contact form.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS for responsive and modern UI design.
- **UI Components**: Use shadcn/ui for ready-made components and consistency.
- **State Management**: Not specified, as the application may not require complex state management at this stage.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Layout Components**: Build the main layout components including the Navbar, Footer, and individual sections (Hero, Portfolio, About, Contact).
3. **Develop Portfolio Grid**: Implement the portfolio grid layout that dynamically displays projects using hardcoded data (or mock data for now).
4. **Design Individual Project Pages**: Create a template for individual project pages that can be populated with detailed project information.
5. **Build About and Contact Pages**: Develop the About page with a bio and skills list, and implement the contact form with email handling functionality.
6. **Optimize for Mobile**: Ensure the website is fully responsive, adjusting layouts for various screen sizes.
7. **Test Functionality**: Validate the contact form functionality and ensure all links work as expected.
8. **Deploy**: Choose a hosting solution for the static site and deploy the application for public access.

## USER EXPERIENCE
The user experience should prioritize ease of navigation, with a simple and intuitive interface. Users will first encounter the hero section that introduces the freelancer, followed by an engaging portfolio grid that allows for quick exploration of projects. Each project page will provide in-depth insight, while the About page offers a personal touch. The contact form will be easily accessible, encouraging potential clients to reach out without barriers.

This comprehensive plan will ensure the portfolio website meets the needs of freelancers looking to showcase their work and attract clients effectively.