Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application will serve as a personal portfolio for a full-stack web developer, showcasing projects, skills, and experience to attract potential employers or clients. The focus is on a clean, minimalist design that allows users to quickly access important information.

## CORE FEATURES
1. **Hero / Introduction Section**: A striking first impression with the developer's name, role, a value statement, and primary call-to-action buttons to view projects, download the resume, and contact.
   
2. **About Me**: A concise introduction detailing the developer's experience, specialization, and approach to building software, helping to establish credibility.

3. **Skills / Tech Stack**: A categorized display of technical skills with icons or progress bars, allowing recruiters to quickly assess capabilities.

4. **Experience**: A section highlighting previous roles with company names, durations, and key achievements, proving real-world experience and impact.

5. **Projects**: A showcase of significant projects, including descriptions, tech stacks, features, live links, and GitHub links, crucial for demonstrating expertise.

6. **Contact Section**: Clear and accessible contact information, including email, LinkedIn, GitHub, and a contact form, to facilitate easy communication.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist with a clean, simple design emphasizing plenty of white space and a minimal color palette, ensuring focus on typography.
- **Color Mode**: Light theme featuring dark text on light backgrounds for enhanced readability.
- **Layout**: A single-page layout with a vertical scroll structure. Each section is distinctly separated with ample spacing to maintain clarity and focus. 
- **Typography**: Use a sans-serif font for headings (e.g., Montserrat) and a legible serif font for body text (e.g., Merriweather) to create a clear hierarchy and enhance readability.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for a robust and type-safe application.
- **Styling**: Tailwind CSS for utility-first styling to ensure rapid and responsive design.
- **UI Components**: Utilize shadcn/ui components for a consistent and modern user interface.
- **State Management**: Consider using React's built-in state management or Context API if necessary for managing global state.

## IMPLEMENTATION STEPS
1. **Set up the React project** using Create React App with TypeScript template.
2. **Install Tailwind CSS** and configure PostCSS for utility-first styling.
3. **Create main components** for each section (Hero, About Me, Skills, Experience, Projects, Contact).
4. **Implement routing** with React Router if planning to have multiple pages or sections linked.
5. **Develop the Hero section** with a prominent heading, subheading, and CTA buttons, ensuring a responsive design.
6. **Build the About Me section** with structured content, focusing on a brief narrative of experience and specialization.
7. **Design the Skills section** using icons or progress bars to represent proficiency visually.
8. **Add Experience and Projects sections**, dynamically rendering data from a JSON file or API to allow easy updates.
9. **Create the Contact section** with a form and links to social media platforms.
10. **Test the application** for responsiveness across devices and optimize for performance.

## USER EXPERIENCE
The application should provide a seamless user experience, allowing visitors to navigate easily through sections with a sticky navigation bar. Each section should smoothly scroll into view, with clear calls to action that guide users to explore projects or get in touch. The minimalist design should enhance focus on the content rather than distract from it, making it simple for recruiters to evaluate the developer's skills and experience.