Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project involves creating a web application for a professional portfolio tailored for Strategy Professionals and Project Managers. The application will showcase the user's skills, projects, and testimonials, providing a platform for potential employers and clients to assess their capabilities in a clean and efficient manner.

## CORE FEATURES
1. **Hero Section**: A prominent landing area that introduces the user with a professional title, a brief bio, and a call-to-action button for contacting or viewing the portfolio.
2. **Project Showcase**: A section displaying key projects with descriptions, images, and links to further details or live demos, organized in a grid layout for easy navigation.
3. **Skills Section**: A visual representation of the user's skills through progress bars or icons, allowing visitors to quickly gauge expertise areas.
4. **Testimonials**: A carousel or grid displaying quotes from colleagues or clients, enhancing credibility and providing social proof.
5. **Contact Form**: A simple and user-friendly form for potential clients or employers to get in touch, complete with validation and a confirmation message upon submission.
6. **Resume Download**: An option for users to download a PDF version of their resume directly from the portfolio.

## 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 be a single-page scrollable format with distinct sections for the hero, projects, skills, testimonials, and contact form, ensuring a seamless user experience.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API (if needed for managing form state or user interactions)

## 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, shadcn/ui, and any other required packages.
3. **Create Layout Components**: Develop reusable components for the header, footer, sections, and buttons that align with the design specifications.
4. **Build the Hero Section**: Implement a prominent hero area with a title, bio, and CTA button, styled according to the design specifications.
5. **Develop Project Showcase**: Create a grid layout for displaying projects, ensuring responsive design for various screen sizes.
6. **Add Skills Section**: Implement a skill representation using progress bars or badge icons, styled consistently with the overall design.
7. **Integrate Testimonials**: Create a carousel or grid for testimonials, ensuring that it enhances credibility and is visually engaging.
8. **Implement Contact Form**: Build a simple form with validation, ensuring users can easily reach out. Include state management for form submission and success/error handling.
9. **Add Resume Download Feature**: Implement a button for downloading the user's resume as a PDF file.
10. **Test Responsiveness**: Ensure all components are responsive and functional across different devices and screen sizes.
11. **Deploy the Application**: Use platforms like Vercel or Netlify for deployment.

## USER EXPERIENCE
Key user interactions include seamless navigation through sections via smooth scrolling, easy access to project details, an intuitive contact form, and quick loading times. The minimalist design ensures that users can focus on the content without distractions, enhancing overall engagement and conversion potential.