Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a minimalist portfolio website designed to showcase technical projects and artistic works. The main purpose is to present a clean and aesthetic online identity that highlights the user's skills in digital manipulation while maintaining a focus on a simple user experience.

## CORE FEATURES
1. **Home Gallery (The "Hook")**: A Masonry Grid layout displaying portfolio images, including a lead image that sets the professional tone. Each image features hover effects that show a simplified title.
   
2. **Case Study (The "Process")**: Dedicated pages for each project, showcasing the before-and-after states of works. Users can see raw assets alongside final edits, enhancing the storytelling aspect of the portfolio.

3. **Info Page (The "Identity")**: A concise bio section that introduces the user with a brief overview of their expertise and includes links to professional profiles, such as GitHub.

4. **Responsive Design**: The website will be fully responsive, ensuring optimal viewing experiences across various devices, from desktops to mobile phones.

5. **Simple Navigation**: A minimal navigation bar enabling users to seamlessly transition between the Home Gallery, Case Studies, and Info Page.

## 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**: The main layout structure will consist of a Masonry Grid for the Home Gallery, a single-column layout for the Case Study pages, and a straightforward layout for the Info Page with sections for bio and links.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not necessary for this project as it does not include complex data handling.

## IMPLEMENTATION STEPS
1. **Set up the React project**: Initialize a new React project with TypeScript and install Tailwind CSS for styling.
   
2. **Create the Home Gallery**: Develop the Masonry Grid layout to display portfolio images. Implement hover effects for image titles.

3. **Build the Case Study pages**: Create a template for the case studies that allows users to view images, detailed descriptions, and technical breakdowns.

4. **Design the Info Page**: Construct a simple layout for the bio and links to professional profiles, ensuring it aligns with the minimalist aesthetic.

5. **Implement Routing**: Use React Router to manage navigation between the Home Gallery, Case Studies, and Info Page.

6. **Test Responsiveness**: Ensure that the design adapts well to different screen sizes and devices.

## USER EXPERIENCE
Users will first encounter a visually appealing Home Gallery showcasing the portfolio's best works. By hovering over images, they will see titles that invite them to click and explore further. Each Case Study will tell the story behind the project, enhancing user engagement. The Info Page will provide a succinct bio and easy access to professional links, creating a comprehensive yet straightforward online presence for the user. 

This minimalist approach prioritizes a seamless user experience, focusing on content without unnecessary distractions.