Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The application is a web portfolio designed to showcase personal projects and professional achievements. It aims to provide users with a clean and minimalist online presence, allowing for easy navigation and a focus on the showcased work.

## CORE FEATURES
1. **Project Gallery**: A grid layout displaying project thumbnails with hover effects for quick previews.
2. **About Section**: A dedicated area for the user to introduce themselves, including a brief bio and professional background.
3. **Contact Form**: A simple form allowing visitors to reach out via email, with fields for name, email, and message.
4. **Responsive Design**: The portfolio will adapt seamlessly to different screen sizes, ensuring a great user experience on both desktop and mobile devices.
5. **Blog/Articles Section**: An optional feature for sharing insights or articles related to the user's field, promoting engagement.
6. **Social Media Links**: Icons linking to the user's professional social media profiles for easy access.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist design emphasizing clean lines and ample white space to create an uncluttered look. The layout will prioritize content visibility and readability.
- **Color Mode**: A light theme featuring a predominantly white background with dark text for high contrast and readability.
- **Layout**: The main layout will utilize a simple header with navigation links, followed by the project gallery in a grid format, an about section, and a contact form at the bottom. The design will feature ample spacing between sections to enhance clarity.
- **Typography**: Use a sans-serif font (e.g., Helvetica or Arial) for body text to ensure readability, with larger, bold headings to establish a clear hierarchy. Text will be consistently sized and spaced to maintain a cohesive look.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS for rapid styling and responsive design
- **UI Components**: Utilize components from shadcn/ui for a modern look and feel
- **State Management**: Use React Context API for global state management, if necessary

## IMPLEMENTATION STEPS
1. **Set up the development environment**: Initialize a new React project with TypeScript and install Tailwind CSS. Configure Tailwind for the project.
2. **Create the folder structure**: Organize the project into components, pages, and assets directories for better maintainability.
3. **Build the Header Component**: Design the navigation bar with links to the different sections (Home, Projects, About, Contact) using Tailwind CSS classes for styling.
4. **Develop the Project Gallery**: Create a grid component that dynamically displays project thumbnails and descriptions, ensuring responsiveness using Tailwind’s grid utilities.
5. **Implement the About Section**: Add a section for the user’s biography, styled with appropriate spacing and font choices to maintain the minimalist aesthetic.
6. **Construct the Contact Form**: Develop a form that captures user input and integrates basic validation. Style it using Tailwind for consistency.
7. **Add Footer with Social Links**: Create a footer section that includes icons linking to social media profiles, ensuring they are visually distinct yet cohesive with the overall design.
8. **Test Responsiveness**: Ensure the application layout adjusts correctly across different devices and screen sizes, making necessary adjustments to Tailwind styles.
9. **Deploy the Application**: Once development is complete, deploy the portfolio using a hosting service like Vercel or Netlify.

## USER EXPERIENCE
The user will experience an intuitive navigation flow, starting from the landing page to the project gallery, where they can easily click on projects for detailed views. The about section will provide a personal touch, and the contact form will facilitate easy communication. All interactions will be smooth, with transitions designed to keep the user engaged without overwhelming them with information. The responsive design ensures that users on mobile devices receive the same high-quality experience as those on desktop.