Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project aims to create a landing page that serves as a personal portfolio for Michele Canciello. The page will feature an interactive 3D graph utilizing the 3D Force Graph library (https://github.com/vasturiano/3d-force-graph?tab=readme-ov-file), showcasing various projects and areas of expertise through visually engaging spheres. The design will prioritize user experience, ensuring easy navigation and accessibility of contact information.

## CORE FEATURES
1. **Interactive 3D Graph**: A larger graph with approximately 4,000 elements that visually represents different projects and fields of work, with a central sphere labeled “Mic”.
2. **Central Sphere with Personal Image**: The central sphere will display Michele's photo, remaining centered on the page. Clicking it will enlarge the sphere and reveal more details about projects.
3. **Connected Spheres**: Surrounding spheres, including "Progettazione Culturale", "Melt", "Formazione e CV", "Progetti TD", and "Altro", will link to additional content.
4. **Pop-Up Project Details**: Each sphere, when clicked, will open a large pop-up window to display project descriptions, images, and links to other pages.
5. **Control Panel**: An admin panel will allow for the addition, removal, and customization of spheres regarding size, color, and other parameters.
6. **Contact Information Popup**: A contact link in the top right corner will trigger a pop-up displaying all contact information.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with ample white space and a focus on typography.
- **Color Mode**: Light theme with dark text on light backgrounds.
- **Layout**: The layout will center around the interactive graph, with the name "Michele Canciello" placed prominently on the left and the contact link on the right. The spheres should be evenly spaced, ensuring they are neither too close nor too far apart.
- **Typography**: Custom font choices that reflect a modern aesthetic, ensuring clear hierarchy and readability.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS for responsive design
- **UI Components**: shadcn/ui for a cohesive look and feel
- **State Management**: Use React's built-in state management for controlling sphere properties and content

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Graph Component**: Develop a component for the 3D Force Graph, integrating the specified library to render the larger graph.
3. **Implement Central Sphere**: Add the central sphere with Michele's photo and ensure it remains centered on the page.
4. **Add Connected Spheres**: Create the surrounding spheres and set up their connections to the central sphere.
5. **Develop Pop-Up Functionality**: Implement pop-up windows for project details and contact information.
6. **Build Control Panel**: Create an admin panel for managing the spheres, including functionalities to add, remove, and customize them.
7. **Responsive Design**: Ensure the entire page is responsive, adjusting the layout and elements for various screen sizes.

## USER EXPERIENCE
The user will be welcomed by a clean, minimalist landing page where they can easily navigate through the interactive 3D graph. Clicking on any sphere will provide a detailed view of projects, while the contact link will facilitate quick access to Michele's contact information. The control panel will ensure that managing the content remains user-friendly and straightforward, allowing for future updates to the portfolio.