Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This is a web application designed as an academic portfolio that presents users' educational achievements, certifications, and participation in competitions in a professional and visually appealing manner. The application will showcase personal details, certificates, and participation photos in a structured format, ensuring an engaging user experience.

## CORE FEATURES
1. **Profile Section**: A dedicated area that displays the user's profile picture along with a brief biography, providing visitors with a personal touch.
2. **Achievement Gallery**: An organized display of certificates from 10th and 12th grades, along with participation photos from competitions, highlighting the user's academic journey.
3. **Certificates Display**: A visually appealing layout to showcase certificates and accolades with clear labeling and descriptions.
4. **Responsive Design**: The application will be fully responsive, ensuring a seamless experience across devices (mobile, tablet, desktop).
5. **Downloadable Portfolio**: Users can download their academic portfolio as a PDF for easy sharing and printing.
6. **Contact Section**: A simple form for visitors to reach out for inquiries or collaborations.

## 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 main layout will follow a vertical flow with a header, followed by the profile section, achievement gallery, and contact form at the bottom, ensuring a clear hierarchy and easy navigation.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not required for this application, but can be implemented if necessary for managing form states or user interactions.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui for styling components.
2. **Create the Layout**: Structure the main components including Header, Profile, Achievements, and Contact sections.
3. **Profile Component**: Develop the Profile section to include an image upload feature for the profile picture, along with fields for the biography.
4. **Achievement Gallery**: Implement a grid layout to display certificates and participation photos, ensuring they are visually distinct and labeled correctly.
5. **Responsive Design**: Use Tailwind CSS utilities to ensure that the application is responsive and looks great on all devices.
6. **Contact Form**: Create a simple form to collect user inquiries, implementing basic validation.
7. **Testing**: Test the application on various devices and browsers to ensure compatibility and responsiveness.
8. **Deployment**: Deploy the application on a suitable hosting platform to make it accessible online.

## USER EXPERIENCE
The application will provide a user-friendly interface where visitors can easily navigate through the portfolio. Users will have a straightforward process to upload their profile picture and certificates, view their achievements in an organized manner, and easily contact for further inquiries. The minimalist design will ensure that the focus remains on the content, making it easy for potential collaborators or employers to assess the user's qualifications quickly.