Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project involves creating a modern and minimalistic portfolio landing page for a software engineer. The primary goal is to showcase skills, projects, and contact information in a clean, visually appealing, and user-friendly manner, emphasizing simplicity and effective presentation.

## CORE FEATURES
1. **Hero Section**: A prominent introduction featuring the engineer's name, a brief tagline, and a call-to-action button leading to the contact section.
2. **About Section**: A concise summary of the engineer's background, skills, and experience, presented with a focus on clarity and readability.
3. **Projects Gallery**: A visually engaging display of selected projects, with images and descriptions that highlight key achievements and technologies used.
4. **Testimonials Section**: A section showcasing feedback from colleagues or clients to build trust and credibility.
5. **Contact Form**: A simple and easy-to-use contact form allowing visitors to reach out directly, integrated with email functionality.
6. **Footer**: Links to social media profiles and a copyright notice.

## 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**: A single-page layout with a smooth scroll feature, organized into distinct sections (hero, about, projects, testimonials, contact), utilizing a grid system for the project gallery.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: React's built-in state management or Context API if necessary.

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project with TypeScript and install Tailwind CSS following the official documentation.
2. **Create Components**: Build reusable components for each section (Hero, About, Projects, Testimonials, Contact).
3. **Implement Routing**: Use React Router to enable smooth scrolling between sections on the landing page.
4. **Design Layout**: Utilize Tailwind CSS classes to apply the minimalist design principles and spacing.
5. **Integrate Typography**: Import Inter font from Google Fonts and apply it to the entire application.
6. **Add Functionality**: Implement the contact form with basic validation and a submission handler that sends emails.
7. **Test Responsiveness**: Ensure the layout is mobile-friendly and performs well across different devices and screen sizes.
8. **Deploy**: Publish the portfolio on a hosting platform like GitHub Pages or Vercel.

## USER EXPERIENCE
Key user interactions include a smooth scrolling experience between sections, immediate access to project details in the gallery, and a straightforward contact form for inquiries. The clean layout and clear typography enhance readability and engagement, encouraging visitors to explore the engineer's work and reach out for collaboration.

https://nikao19.github.io/portfolio/