Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a minimalist portfolio website designed to showcase the work and expertise of Mylan Mahieddine, an IT Project Manager and Full-Stack Developer. The site aims to provide a clean, engaging user experience with a focus on showcasing projects and professional background, while utilizing modern web technologies.

## CORE FEATURES
1. **Hero Section**: A prominent introduction featuring Mylan's name and a brief description of his role, along with discreet call-to-action buttons to view projects and contact him.

2. **About Section**: A concise, impactful narrative detailing Mylan's educational background and professional experience in IT project management and development.

3. **Project Grid**: A visually appealing layout displaying three case studies in asymmetrical cards, each highlighting key tags and project descriptions.

4. **Expertise Section**: A modern Bento Grid showcasing Mylan's technical skills and methodologies, organized into distinct blocks for easy readability.

5. **Footer**: Contains contact information and links to professional social media profiles, ensuring easy access for potential clients or employers.

## 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 feature a single-page scrollable format with sections laid out vertically. The hero section will be full-width, followed by the about section, project grid, expertise section, and footer, ensuring smooth transitions and a cohesive flow.

## TECHNICAL REQUIREMENTS
- **Framework**: Nuxt.js (Vue.js) with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: Utilize shadcn/ui for modular component design
- **State Management**: Vuex or Composition API (as needed)

## IMPLEMENTATION STEPS
1. **Setup Nuxt.js Project**: Initialize a new Nuxt.js project with TypeScript support and configure Tailwind CSS.
   
2. **Create Component Structure**: Develop a modular component architecture with separate components for the Hero, About, Project Grid, Expertise, and Footer sections.

3. **Implement Hero Section**: Design the hero section with a full-width background and typography that highlights Mylan's name and role, along with styled buttons for navigation.

4. **Build About Section**: Create an engaging layout that conveys Mylan's background and experience using concise text and clear typography.

5. **Design Project Grid**: Develop the project display grid with asymmetrical cards, incorporating hover effects and tags for each project.

6. **Create Expertise Section**: Organize skills into a Bento Grid format, ensuring that each block is visually distinct and easy to read.

7. **Add Footer**: Implement the footer with contact details and social media links, styled to match the overall design.

8. **Ensure Responsiveness**: Test the application across devices to ensure a seamless user experience with responsive design.

## USER EXPERIENCE
Users will encounter a visually striking homepage that captures their attention with a bold hero section. As they scroll down, they will find an engaging narrative about Mylan, visually appealing project displays, and a clear outline of his expertise. The calls to action will encourage interaction, guiding potential clients or employers to learn more about his work or get in touch directly. The overall experience will be smooth, with subtle animations enhancing the minimalistic design without overwhelming the content.