Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is a web portfolio website intended to showcase academic achievements, technical skills, and personal projects while maintaining a minimalist design. The main purpose is to provide a structured presentation of the user's qualifications and projects, ensuring a clean user experience with a focus on content.

## CORE FEATURES
1. **Student/Certificate Section**: Displays user-uploaded certificates with options to view and download. Only the admin can upload certificates, and visitors can see messages for missing documents.
   
2. **Developer Page**: A dedicated page within the About section that outlines the user’s academic and technical background. It includes sections for subjects, conceptual skills, and technical learning, all presented in a clean card style.

3. **Innovator Page**: This new page under About showcases the user's personal portfolio project, including an overview, purpose, tools used, and key learnings, maintaining an attractive presentation.

4. **Projects Section**: An area for the admin to manage and add projects, featuring a modern card layout. Each project will include a name, short info, and a detailed view upon clicking.

5. **Responsive Design**: Ensures that the application functions seamlessly across devices, enhancing user accessibility and experience.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean and simple design with ample white space. The focus is on typography to ensure readability and aesthetic appeal.
- **Color Mode**: Dark theme with vibrant colors for highlights, ensuring a premium feel.
- **Layout**: The layout consists of a top navigation bar, a main content area displaying the sections (Certificates, Developer, Innovator, Projects), and a footer. Each section is easily accessible through the navigation.
- **Typography**: Utilize modern, sans-serif fonts for headings and body text, with clear hierarchy (larger sizes for headings, smaller for body text), ensuring clarity and a sleek appearance.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS for responsive and modern styling
- **UI Components**: Utilize shadcn/ui for consistent component design
- **State Management**: Use React Context API for managing state across components as needed

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui for styling.
2. **Create Folder Structure**: Organize components, pages, and assets in a logical structure (e.g., components, pages, styles).
3. **Develop Student/Certificate Section**: Implement the server logic to handle certificate uploads by the admin and display them for visitors, applying the specified rules.
4. **Build Developer and Innovator Pages**: Create the new pages under the About section, ensuring to follow the layout and design specifications, using cards for content presentation.
5. **Implement Projects Section**: Develop a section where the admin can add projects, ensuring each project has a detailed view and follows the design aesthetics.
6. **Apply Responsive Design**: Test the application across various screen sizes, ensuring all components adjust smoothly.

## USER EXPERIENCE
Users will navigate through a top navigation bar to access different sections. The Student/Certificate section will allow visitors to view and download certificates while the admin maintains control over uploads. The Developer and Innovator pages will provide insightful content in a visually appealing manner. The Projects section will enable an easy way for the admin to manage and showcase projects, enhancing the overall user engagement on the portfolio site. The minimalist design ensures that visitors can focus on the content without distractions.