Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is a web portfolio designed for a junior AI engineer and JavaScript developer. Its primary purpose is to showcase personal projects, skills, and professional experience in a modern, responsive layout that reflects the user's technical expertise.

## CORE FEATURES
1. **Homepage**: A welcoming introduction featuring a brief bio and professional tagline, leading to other sections of the portfolio.
2. **Projects Section**: A showcase of significant projects, including descriptions, technologies used, and links to live demos or GitHub repositories.
3. **Skills Section**: A visual representation of technical skills using icons or progress bars, highlighting proficiency in AI engineering, JavaScript, and IT support.
4. **Contact Form**: A responsive contact form that allows potential employers or collaborators to reach out directly.
5. **Blog/Articles Section**: A space to share insights, tutorials, or personal experiences related to AI and development.
6. **Testimonials**: A section for feedback from colleagues or mentors to build credibility and showcase professional relationships.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist, focusing on clean lines, ample white space, and a streamlined aesthetic that emphasizes typography.
- **Color Mode**: Light theme with dark text on light backgrounds, using a color palette of blue, black, and white to create a modern and professional look.
- **Layout**: 
  - A fixed navigation bar at the top with links to each section.
  - A hero image or background with a welcoming message on the homepage.
  - Grid layout for the projects section, allowing for a responsive display of project cards.
  - Clear separation between sections using horizontal dividers and adequate padding.
- **Typography**: 
  - Use a modern sans-serif font for headlines (e.g., Montserrat or Open Sans) and a clean serif font for body text to enhance readability.
  - Maintain a clear hierarchy with larger font sizes for headings and smaller for subheadings and body text.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS for utility-first styling approach.
- **UI Components**: Utilize shadcn/ui for pre-built components that align with the minimalist aesthetic.
- **State Management**: Use React's context API or any preferred state management library if needed for global state management.

## IMPLEMENTATION STEPS
1. **Setup the Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Layout Components**: Build the main layout with a fixed navbar and a main content area.
3. **Implement the Homepage**: Add a welcoming hero section and a brief bio with a call-to-action button linking to the projects section.
4. **Develop Core Sections**: Create components for the Projects, Skills, Blog, and Testimonials sections, ensuring they are responsive and visually appealing.
5. **Add Navigation**: Implement smooth scrolling navigation for easy access to different sections from the navbar.
6. **Set Up Contact Form**: Integrate a functional contact form with validation and submission handling.
7. **Test Responsiveness**: Ensure the layout adjusts seamlessly across different devices and screen sizes.
8. **Deploy the Portfolio**: Choose a hosting platform (e.g., Vercel or Netlify) to deploy the completed portfolio.

## USER EXPERIENCE
Key user interactions include smooth navigation through the navbar, an engaging portfolio showcase with hover effects on project cards, and an intuitive contact form that encourages outreach. The overall experience should be fluid and welcoming, making it easy for potential employers to navigate and understand the user’s skills and projects.