Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a minimalist portfolio landing page designed to showcase web design projects in both web and mobile formats. The main purpose is to create an elegant and visually appealing online presence that allows visitors to explore the designer's work with ease.

## CORE FEATURES
1. **Hero Section**: A striking introduction area featuring a background image or graphic, the designer's name, and a brief tagline that conveys their design philosophy.
2. **Project Showcase**: A grid or card layout displaying thumbnails of web and mobile design projects, each linking to detailed project pages or lightboxes with project descriptions and images.
3. **About Me**: A section providing background information about the designer, including skills, experience, and personal design approach.
4. **Testimonials**: A dedicated area for client testimonials, enhancing credibility and showcasing positive feedback from previous collaborations.
5. **Contact Form**: A simple and intuitive contact form for potential clients to reach out, including fields for name, email, and message.
6. **Call to Action (CTA)**: Strategically placed buttons throughout the site prompting visitors to view projects, connect, or follow on social media.

## 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 full-width hero section at the top, followed by the project showcase in a responsive grid, an about me section, testimonials displayed in a carousel format, and a contact form at the bottom.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not necessary for this project as it is primarily static content.

## IMPLEMENTATION STEPS
1. **Set up the Project**:
   - Initialize a new React project using Create React App with TypeScript template.
   - Install Tailwind CSS and shadcn/ui component library.
2. **Create the Layout**:
   - Implement the hero section with a background image, title, and tagline.
   - Develop the project showcase using a responsive grid system, linking each project to its detail view.
3. **Design the About Me Section**:
   - Create a simple layout with a brief bio, skills list, and a professional image.
4. **Add Testimonials**:
   - Implement a carousel or grid layout for testimonials, ensuring smooth transitions and readability.
5. **Build the Contact Form**:
   - Create a form component with fields for name, email, and message. Include form validation using a library like Formik if necessary.
6. **Style Components**:
   - Use Tailwind CSS to apply the specified design customizations, ensuring all elements adhere to the minimalist aesthetic.
7. **Testing and Responsiveness**:
   - Test the site on various devices to ensure it is fully responsive and user-friendly.

## USER EXPERIENCE
Visitors to the portfolio site will experience a seamless flow from the hero section to the project showcase, encouraging exploration of the designer's work. The about me section will provide personal context, while testimonials build trust. The contact form will facilitate easy outreach, making it simple for potential clients to connect. Overall, the site will prioritize ease of navigation and visual engagement, reflecting the designer's skills and aesthetic sensibilities.