Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project involves creating a minimalist landing page that serves as a portfolio for Michele Canciello. The page will utilize an interactive 3D force graph to visually represent various elements of the portfolio, allowing users to explore different areas of Michele's work in a dynamic and engaging way.

## CORE FEATURES
1. **3D Force Graph**: A central graph featuring a main node labeled "Mic" with connections to various subcategories: Progettazione Culturale, Melt, Formazione e CV, Progetti TD, and Altro. The graph will maintain a central focus, with the main node returning to the center when dragged.
   
2. **Interactive Control Panel**: A user-friendly panel that allows Michele to add or remove nodes (spheres), adjust their size and color, and manage the overall graph content dynamically.

3. **Contact Link**: A prominent "Contatti" link positioned in the top right corner that opens a popup displaying all contact information.

4. **Custom Typography and Color Scheme**: The design will feature custom fonts and colors to maintain a unique aesthetic, avoiding generic styles.

5. **Responsive Design**: The layout will be fully responsive, ensuring an optimal viewing experience on various devices.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Emphasizing clean lines, ample white space, and a focus on typography to enhance readability.
- **Color Mode**: Light theme with dark text on light backgrounds to ensure clarity and a modern look.
- **Layout**: 
  - The main layout will feature the 3D force graph centered in the middle of the page.
  - Michele's name will be displayed prominently in the top left corner.
  - The "Contatti" link will be easily accessible in the top right corner.
- **Typography**: 
  - Custom fonts that convey professionalism and creativity, maintaining a hierarchy where the name is the largest, followed by headings for different portfolio sections.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for building the interactive components.
- **Styling**: Tailwind CSS for rapid styling and utility-first approach.
- **UI Components**: Use of shadcn/ui for consistent design and component structure.
- **State Management**: React's built-in state management for handling graph updates and interactions.

## IMPLEMENTATION STEPS
1. **Set up the React project**: Initialize a new React application with TypeScript and install necessary dependencies including Tailwind CSS and 3D Force Graph library.
2. **Create the main layout**: Implement the HTML structure to include the graph area, name display, and contact link.
3. **Integrate the 3D Force Graph**: Utilize the specified GitHub library to create the interactive graph and set up nodes as per the user requirements.
4. **Develop the control panel**: Build a control panel component that allows dynamic manipulation of the graph elements.
5. **Implement the contact popup**: Create a modal component that displays contact information when the "Contatti" link is clicked.
6. **Style the application**: Use Tailwind CSS to apply the minimalist design principles, ensuring proper spacing, typography, and responsiveness.
7. **Test and refine**: Conduct thorough testing to ensure all components function correctly and the design remains consistent across devices.

## USER EXPERIENCE
Users will interact with the portfolio by hovering over nodes in the 3D graph to explore different projects and areas of expertise. The contact link will provide quick access to Michele's contact details, enhancing engagement. The control panel will allow real-time updates to the graph, making it easy for Michele to manage and showcase his work effectively. The overall experience will be intuitive, fluid, and visually appealing, reflecting Michele's professional identity.