Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
Create a personal portfolio and blog for a full-stack Next.js and Tailwind developer who documents their journey building in public. This web application will showcase projects, share insights through a blog, and present video content in a modern, minimalist design while emphasizing a premium, hyper-modern aesthetic.

## CORE FEATURES
1. **Hero Section**: A captivating introduction that highlights the developer's skills and mission, featuring a call-to-action button to view projects or latest blog posts.
2. **Projects Section**: A visually appealing masonry layout displaying the developer's projects, complete with descriptions and links to live demos or repositories.
3. **Vlog/Content Section**: A minimalist video player layout that allows users to view the developer's video content easily.
4. **Blog Section**: A clean and simple blog interface that showcases articles written by the developer, allowing for easy navigation and reading.
5. **Contact Form**: A user-friendly contact form enabling visitors to reach out for collaboration or inquiries.
6. **Neon Accent Elements**: Interactive elements (links, buttons) that use a vibrant neon accent color for enhanced visibility and interaction.

## DESIGN SPECIFICATIONS
- **Visual Style**: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography
- **Color Mode**: Strictly dark mode theme with a deep charcoal background
- **Primary Color**: #1978E5 (use this as the main accent/brand color 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 should feature a full-width hero section at the top, followed by a masonry layout for projects, a minimalist vlog section, and a blog section, concluding with a contact form.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not required unless necessary for specific features (e.g., form state management)

## IMPLEMENTATION STEPS
1. **Set Up Next.js Project**: Initialize a new Next.js project with TypeScript.
2. **Install Tailwind CSS**: Follow Tailwind's documentation to integrate Tailwind CSS into the project.
3. **Create Layout Components**: Build reusable layout components (Header, Footer, Main) to maintain consistent structure throughout the app.
4. **Develop Hero Section**: Create the hero section with a prominent title, subtitle, and call-to-action button styled with the primary color.
5. **Implement Projects Section**: Design the masonry layout for projects using a grid system, ensuring hover effects are applied to project cards.
6. **Build Vlog Section**: Integrate a video player component that allows for easy embedding of video content.
7. **Create Blog Section**: Develop a simple blog layout that lists articles with a focus on typography and readability.
8. **Add Contact Form**: Implement a contact form, ensuring validation is handled appropriately.
9. **Style Components**: Utilize Tailwind CSS for styling all components according to the specified design specifications.
10. **Test Responsiveness**: Ensure the application is fully responsive across various devices and screen sizes.

## USER EXPERIENCE
The user will land on a visually striking hero section that immediately captures attention. Navigation is intuitive with clear calls to action leading to projects, blog posts, and video content. The masonry layout for projects provides an engaging visual experience, while the minimalist design of the blog and vlog sections ensures ease of reading and viewing. The contact form is straightforward, promoting user engagement and inquiries seamlessly. The dark mode aesthetic paired with neon accents creates a modern, dynamic interaction throughout the application.