Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a professional personal portfolio website for an AI agent and automation expert, designed as a landing page. Its main purpose is to showcase the individual’s skills, projects, and expertise in the field of AI and automation, thereby attracting potential clients and collaborators.

## CORE FEATURES
1. **Hero Section**: A visually impactful introduction with the expert's name, tagline, and a call-to-action button inviting visitors to view projects or contact.
2. **About Section**: A brief biography highlighting the expert’s background, areas of expertise, and unique selling points.
3. **Projects Showcase**: A curated display of notable projects with descriptions, images, and links to live demos or case studies.
4. **Testimonials**: A section featuring quotes from clients or collaborators that reinforce the expert's credibility and experience.
5. **Contact Form**: An easy-to-use contact form for inquiries, allowing visitors to reach out directly through the website.
6. **Social Links**: Icons linking to relevant social media profiles and professional networks for further engagement.

## 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**: A single-page layout with sections stacked vertically, utilizing smooth scrolling for navigation between sections. Each section has ample padding for a spacious feel, with a fixed navigation bar at the top for easy access to different parts of the portfolio.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not required for this simple portfolio, but can utilize local state for the contact form.

## IMPLEMENTATION STEPS
1. **Set up the React project**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Create the main components**: Build components for the Hero, About, Projects, Testimonials, Contact, and Social Links sections.
3. **Implement navigation**: Create a fixed navigation bar at the top of the page that utilizes anchor links for smooth scrolling to each section.
4. **Style the components**: Use Tailwind CSS to apply the specified design specifications, ensuring the minimalist aesthetic is maintained.
5. **Add interactivity**: Implement a simple contact form with local state management to handle form submissions.
6. **Optimize for responsiveness**: Ensure that all components are responsive and look great on both mobile and desktop devices.
7. **Deploy the website**: Choose a hosting platform (like Vercel or Netlify) to deploy the portfolio site.

## USER EXPERIENCE
Visitors will first encounter the Hero section, where they can quickly understand who the expert is and what they offer. Smooth scrolling will guide them through the About section for background information, followed by the Projects showcase that highlights the expert’s work. Testimonials add credibility, while the Contact form provides a straightforward way for visitors to get in touch. The minimalist design ensures that the focus remains on the content, enhancing user engagement.