Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project aims to create a modern and minimalist portfolio website using a React frontend with Vite for fast development. The site will serve as a personal portfolio to showcase skills, projects, and experiences, making it easy for visitors to understand the user's professional background.

## CORE FEATURES
1. **Hero Section**: A captivating introduction with a brief bio, a professional image, and a call-to-action button leading to the contact section.
2. **About Me**: A section detailing the user's background, skills, and what sets them apart in their field.
3. **Portfolio Gallery**: A visually appealing showcase of projects with images, descriptions, and links to live demos or repositories.
4. **Testimonials**: A section featuring quotes from clients or colleagues to build credibility and trust.
5. **Contact Form**: A simple form enabling visitors to get in touch, with fields for the name, email, and message.
6. **Responsive Design**: The site will be fully responsive, ensuring a seamless experience across all devices.

## 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 structure will include a vertical stack for the hero, about, portfolio, testimonials, and contact sections, with a fixed navigation bar for easy access.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS for utility-first styling.
- **UI Components**: shadcn/ui for pre-built React components.
- **State Management**: Not necessary for this initial portfolio site, but can be considered for future enhancements.

## IMPLEMENTATION STEPS
1. **Setup Development Environment**: Initialize the project using Vite with React and TypeScript.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui to the project.
3. **Create Folder Structure**: Organize components, styles, and assets for easy management.
4. **Implement Hero Section**: Design the hero section with a catchy headline, bio, and a CTA button.
5. **Build About Me Section**: Include a brief overview of the user's background and skills.
6. **Develop Portfolio Gallery**: Create a grid or card layout to showcase projects with images and descriptions.
7. **Add Testimonials Section**: Integrate quotes and feedback from clients or colleagues.
8. **Create Contact Form**: Build a simple form with validation for user messages.
9. **Ensure Responsiveness**: Test and adjust styles for different screen sizes using Tailwind's responsive utilities.
10. **Deploy the Website**: Choose a hosting solution (e.g., Vercel or Netlify) for the frontend and Strapi Cloud for the backend.

## USER EXPERIENCE
Visitors will enjoy a smooth and engaging experience as they navigate through the portfolio. The hero section will capture attention immediately, followed by clear sections that provide valuable information. The responsive design will ensure that all content is accessible on any device, while the contact form will facilitate easy communication for potential clients or collaborators.