Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is a portfolio website designed to showcase the user's academic background, skills, projects, and personal journey in a minimalist and clean manner. The goal is to enhance the existing website's functionality by adding new internal pages and features while preserving the current design style, layout, and theme.

## CORE FEATURES
1. **Academic Background Page**: 
   - Inside the Developer section, a button labeled “Academic Background” opens a new page featuring modern cards for each subject (ICT, HTML & Web Basics, Mathematics, Physics, Chemistry, Biology), each with a title and a brief description.

2. **Innovation Overview Page**: 
   - In the Innovator card, a button labeled “Innovation Overview” leads to a detailed page about a specific project, including the project title, purpose, and technologies used, presented in a layout consistent with the existing theme.

3. **Detailed Skills Page**: 
   - A button in the Skills & Strengths section opens an expanded page showcasing HSC-level skills in a card-based layout, detailing ICT & Technical Knowledge, HTML Understanding, Problem Solving, and Science Background.

4. **Motivation & Learning Journey Page**: 
   - A new internal page titled “Motivation & Learning Journey” presents content in clean, small sections focusing on themes like quick learning abilities, self-driven mindsets, and personal growth.

5. **Dynamic Project Support**: 
   - The My Projects section is extended to allow for project name input, short descriptions, and PDF file uploads. Projects are displayed as cards, with clickable links leading to detailed pages featuring embedded PDF viewers.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist design with a focus on clean lines, ample white space, and limited color palettes to enhance readability and focus on content.
- **Color Mode**: Light theme with dark text on light backgrounds, ensuring clarity and a modern feel.
- **Layout**: The main layout will consist of a grid format for card displays, maintaining a consistent structure throughout each new page, with adequate spacing to ensure readability.
- **Typography**: Use sans-serif fonts for headings and body text, with a hierarchy that emphasizes titles clearly and distinctly. Suggested fonts could include "Roboto" or "Open Sans."

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for a robust and scalable frontend application.
- **Styling**: Tailwind CSS for utility-first styling, enabling rapid and responsive design adjustments.
- **UI Components**: Utilize shadcn/ui for pre-built components that align with the minimalist aesthetic.
- **State Management**: React's built-in state management or Context API as needed for managing state across features.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install necessary dependencies (Tailwind CSS, shadcn/ui).
2. **Create New Pages**: Add routes for each new internal page (Academic Background, Innovation Overview, Detailed Skills, Motivation & Learning Journey).
3. **Develop Components**: Create card components for each subject and skill, ensuring they follow the existing UI design.
4. **Implement Navigation**: Integrate buttons within the existing cards to link to the new internal pages seamlessly.
5. **Dynamic Project Support**: Develop functionality to allow users to input project details and upload PDFs, ensuring they are displayed as cards.
6. **Test Responsiveness**: Ensure all new components and pages are fully responsive across different devices.
7. **Final Review**: Conduct a thorough review to ensure no existing designs are altered and that new features function as intended.

## USER EXPERIENCE
Users will navigate the portfolio website easily thanks to a consistent layout and familiar UI components. The addition of new buttons and pages will enhance interactivity, allowing users to explore the academic background and skills in detail, while the new project support functionality will enable the sharing of documents seamlessly. The clean, minimalist design will ensure a focus on content, making the experience pleasant and straightforward for visitors.