Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is a personal portfolio web app designed to showcase the professional journey and expertise of a Senior Product Designer with over 20 years of experience. It aims to highlight skills in product design, user experience, and innovation while providing a platform for sharing insights on best practices in the industry.

## CORE FEATURES
1. **About Me Section**: A dedicated area detailing the designer's background, education, and career highlights, emphasizing a holistic approach to design.
2. **Project Showcase**: An interactive gallery displaying a selection of past projects with images, descriptions, and links to case studies, demonstrating design process and outcomes.
3. **Blog/Insights**: A section for sharing articles and posts on product design, UX, and industry trends, allowing for engagement with the design community.
4. **Contact Form**: A simple form enabling visitors to reach out for inquiries or collaboration opportunities, ensuring easy communication.
5. **Testimonials**: A rotating carousel of quotes from colleagues or clients that reflect the designer's impact, enhancing credibility and trust.
6. **Downloadable Resume**: An option for visitors to download a PDF version of the designer's resume for easy access to qualifications and experience.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Emphasizing a clean, simple design with ample white space, focusing on clarity and readability.
- **Color Mode**: Light theme featuring dark text on light backgrounds to enhance readability and create a welcoming atmosphere.
- **Layout**: A single-page layout divided into clear sections for each core feature, utilizing a grid system for consistent alignment and spacing.
- **Typography**: Use a clean sans-serif font like "Helvetica Neue" for headings and body text. Maintain a clear hierarchy with larger font sizes for headings (24px) and smaller sizes for body text (16px), ensuring legibility.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for building a robust and scalable application.
- **Styling**: Tailwind CSS for utility-first styling, allowing for rapid design adjustments and responsive layouts.
- **UI Components**: Utilize shadcn/ui for pre-built components to ensure a consistent design language throughout the application.
- **State Management**: Implement React's built-in state management, or consider using Zustand for more complex state needs if required.

## IMPLEMENTATION STEPS
1. **Set up the React project**: Initialize a new project using Create React App with TypeScript support.
2. **Install dependencies**: Add Tailwind CSS and shadcn/ui libraries to the project.
3. **Create the main layout**: Design the main structure with a header, sections for each core feature, and a footer using Tailwind CSS for styling.
4. **Develop each feature**: 
   - Build the About Me section with text and images.
   - Create the Project Showcase with a responsive grid layout.
   - Implement the Blog/Insights section using a markdown parser for easy content management.
   - Develop the Contact Form using controlled components to manage form state.
   - Set up the Testimonials carousel with animated transitions.
   - Add functionality for the downloadable resume.
5. **Ensure responsiveness**: Utilize Tailwind CSS's responsive utilities to make the application accessible on various devices.
6. **Test user interactions**: Conduct user testing to refine and improve the overall user experience before deployment.

## USER EXPERIENCE
Key interactions include smooth scrolling between sections, easy navigation through the project gallery with hover effects, and a straightforward contact form submission. The blog section should allow users to click on articles for a more detailed view, and the testimonials carousel should be auto-rotating with manual controls for user engagement. The overall experience prioritizes simplicity and ease of access, aligning with the minimalist design philosophy.