Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a personal portfolio website designed to showcase the user's skills, work, and background. It features a clean, minimalist layout that highlights the user's professional experience while maintaining an elegant aesthetic. The website will leverage modern web technologies such as HTML, CSS, JavaScript, Tailwind CSS, and Astro to ensure responsiveness and a smooth user experience.

## CORE FEATURES
1. **Hero Section**: A visually striking introduction with a prominent image and a brief welcome message that captures the viewer's attention immediately.
2. **About Me**: A dedicated section that provides a personal introduction, detailing the user's background, interests, and professional journey.
3. **Skills**: A clear and organized showcase of the user's technical skills, possibly using icons or bars to indicate proficiency levels.
4. **Work Portfolio**: A visually appealing gallery or list of selected projects, including descriptions, technologies used, and links to live demos or repositories.
5. **Contact Form**: A simple contact form that allows potential clients or employers to reach out directly for inquiries, featuring fields for name, email, message, and a submit button.
6. **Responsive Design**: The website will be fully responsive, ensuring a seamless experience across devices from desktops to mobile phones.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist—clean, simple design emphasizing ample white space, a limited color palette, and a focus on elegant typography.
- **Color Mode**: Light theme with dark text on light backgrounds, using shades of blue for highlighted elements to add a touch of vibrancy.
- **Layout**: The main layout will consist of a single-page scroll, with each section clearly defined. The hero section will occupy the top, followed by 'About Me', 'Skills', 'Work Portfolio', and ending with 'Contact'.
- **Typography**: Utilize elegant font choices such as "Montserrat" for headings and "Roboto" for body text, ensuring a clear hierarchy with larger font sizes for headings and smaller for body text.

## TECHNICAL REQUIREMENTS
- **Framework**: Astro for optimal static site generation with React components.
- **Styling**: Tailwind CSS for utility-first styling, allowing for rapid design adjustments.
- **UI Components**: shadcn/ui for pre-designed components that enhance user interface consistency.
- **State Management**: Not required for this portfolio site, as it will primarily use static content.

## IMPLEMENTATION STEPS
1. **Set up the Astro project**: Initialize a new Astro project using the command line.
2. **Install Tailwind CSS**: Follow the official Tailwind CSS installation guide to integrate Tailwind into the Astro project.
3. **Create the Layout**: Define the main layout structure in a single page, including all necessary sections.
4. **Develop Components**: Build reusable components for each section (Hero, About Me, Skills, Work Portfolio, Contact).
5. **Style Components**: Apply Tailwind CSS classes to each component to achieve the minimalist design and responsive layout.
6. **Implement Contact Form**: Use a simple form structure and ensure it can send data (you may need a backend service for handling form submissions).
7. **Optimize for SEO**: Include meta tags and descriptions for better search engine visibility.

## USER EXPERIENCE
Users will begin their journey with an eye-catching hero section that invites them to scroll down. From there, they can easily navigate through the 'About Me' section for personal insights, view the 'Skills' section for quick references, and explore the 'Work Portfolio' for detailed project information. The contact form at the bottom allows for straightforward communication, ensuring users have a seamless experience from exploration to inquiry. The entire site will be responsive and optimized for various devices, ensuring accessibility and ease of use.