Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a personal portfolio website designed to showcase creative work through an experimental and playful visual style. Utilizing Next.js with TypeScript, Tailwind CSS, Three.js, and Anime.js, the site will feature interactive elements and dynamic transitions to enhance user engagement and provide a professional yet artistic presentation of the user's projects and skills.

## CORE FEATURES
1. **Interactive Hero Section**: A visually striking introductory area featuring dynamic animations and engaging typography to capture visitors' attention immediately.
2. **Project Showcase**: A gallery-style layout that displays various projects with hover effects, allowing users to explore details in an interactive manner.
3. **About Section**: A personal introduction with fun animations and layout variations that reflect the user's character while providing background information.
4. **Skills Visualization**: An animated infographic that highlights technical skills and tools used, incorporating Three.js for visual representation.
5. **Contact Form**: An accessible contact section with smooth transitions and micro-interactions to encourage visitors to reach out.
6. **Dynamic Transitions**: Implementing scroll-based animations and transitions between sections using Anime.js, enhancing the overall user experience.

## 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**: Asymmetrical layout that breaks the traditional grid, utilizing generous whitespace and varied element sizes to create a playful and visually engaging experience.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript (Next.js with App Router).
- **Styling**: Tailwind CSS for utility-first styling.
- **UI Components**: shadcn/ui for pre-designed components to ensure consistency and usability.
- **State Management**: React Context or Zustand for managing application state if necessary.

## IMPLEMENTATION STEPS
1. **Set Up Next.js Project**: Initialize a new Next.js project with TypeScript and install necessary dependencies including Tailwind CSS, Three.js, Anime.js, and shadcn/ui.
2. **Configure Tailwind CSS**: Set up Tailwind CSS configuration to include custom colors and fonts, ensuring the design specifications are met.
3. **Create Layout Components**: Develop reusable layout components for the header, footer, and main content area following the asymmetrical layout principles.
4. **Build Hero Section**: Implement the hero section with bold typography and dynamic animations using Anime.js.
5. **Design Project Showcase**: Create a gallery layout to display projects, incorporating interactive hover effects and transitions between project details.
6. **Develop About Section**: Craft a visually appealing about section with animations that reflect the user’s personality and style.
7. **Implement Skills Visualization**: Design an animated infographic using Three.js to illustrate technical skills engagingly.
8. **Set Up Contact Form**: Build a contact form with smooth transitions and interactive feedback upon submission.
9. **Enhance User Interactions**: Utilize Anime.js to add scroll-based transitions and micro-interactions across the portfolio.
10. **Test Responsiveness**: Ensure that the site is fully responsive on various devices and screen sizes, adjusting layouts and interactions as necessary.

## USER EXPERIENCE
Visitors will experience an engaging and playful portfolio that invites exploration. Key interactions include smooth scrolling between sections, interactive project showcases with hover effects, and dynamic transitions that guide users through the content. The use of whitespace and bold typography will ensure clarity and focus, making it easy for users to navigate and appreciate the showcased work. The overall design will reflect the user’s creative identity while maintaining a professional tone.