Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project entails creating a minimalist dark portfolio landing page using modern web technologies. The main purpose is to showcase the creator's work in an engaging and visually appealing manner while ensuring smooth interactions through animations and responsive design. The application will leverage React, TypeScript, and Tailwind CSS for a clean and efficient development process.

## CORE FEATURES
1. **Loading Screen**: A full-screen loading overlay with animated text and a progress bar that fades into the main content once loading is complete.
2. **Hero Section**: A visually striking section with a background HLS video, a centered name, role cycling animations, and strong calls-to-action.
3. **Selected Works**: A grid layout showcasing featured projects with hover effects and detailed descriptions.
4. **Journal Entries**: A section displaying recent thoughts through expandable cards for enhanced user engagement.
5. **Explorations Gallery**: A parallax scrolling effect that showcases various visual projects in an interactive format.
6. **Contact Section**: A footer area with social links, a marquee animation, and a call to action for potential collaborations.

## 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 layout will be a single-page application with sections stacked vertically, each designed to take full advantage of the viewport, ensuring a smooth scroll experience. The navigation will be fixed for easy access to each section.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API or Zustand (if needed for managing global state)

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project using Vite and TypeScript. Install Tailwind CSS and set up PostCSS.
2. **Create Global Styles**: Implement the global design system, including fonts, colors, and animations using CSS custom properties and Tailwind CSS utilities.
3. **Develop Components**:
   - **Loading Screen**: Create a full-screen loading component with animations as specified.
   - **Hero Section**: Build the hero section with HLS video integration and the animated text features.
   - **Selected Works**: Implement a grid layout for project cards with hover effects.
   - **Journal Section**: Design cards for journal entries that expand on click.
   - **Explorations Section**: Create the parallax gallery using GSAP for scroll animations.
   - **Contact Section**: Add social links, marquee animations, and contact buttons with the specified styles.
4. **Implement Routing**: Use React Router for smooth navigation within the application.
5. **Test Responsiveness**: Ensure all components are responsive across different devices and screen sizes.
6. **Deploy Application**: Prepare for deployment by optimizing assets and ensuring all dependencies are correctly configured.

## USER EXPERIENCE
Key user interactions will focus on smooth transitions between sections, engaging animations during the loading and hero sections, and intuitive navigation through the portfolio. Users will enjoy a visually cohesive experience with easy access to work samples, journal entries, and contact options. The design will emphasize readability and visual hierarchy to guide users through the content seamlessly. 

This landing page will not only serve as a portfolio but also as an interactive experience that reflects the creator's style and professionalism.