Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
AJEET-OS – The Synaptic Portfolio is a fully functional, interactive web application designed as a 3D operating system that visualizes the engineering mind of the user as a synaptic network. The application serves as a portfolio to showcase projects and skills, primarily targeting recruiters and technical peers, providing an immersive experience through visually stunning 3D elements and engaging animations.

## CORE FEATURES
1. **Boot Sequence**: A captivating full-screen boot sequence that initializes the application with a typing animation and a sound chime, transitioning smoothly into the main 3D scene.
2. **3D Synaptic Map**: An interactive 3D scene depicting project nodes and skills connected by threads, with intuitive camera controls and glowing interactions based on user engagement.
3. **Neural Dive Animation**: A deep dive animation that transitions the user into detailed project blueprints upon double-clicking a project node, showcasing performance metrics and engineering logs.
4. **Engineering Log**: A detailed log with insights on project development, tradeoff notes, and commit messages displayed in a stylish blueprint overlay.
5. **Tech Filter Bar**: An interactive HUD at the top-right corner allowing users to filter projects by technology tags, highlighting related nodes and connections.
6. **Recruiter Escape Mode**: A graceful transition that collapses the 3D scene into a print-friendly resume when the Escape key is pressed, allowing for easy sharing of professional credentials.

## 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 consists of a centered 3D synaptic map with a functional UI overlay for navigation and interaction, complemented by responsive design elements for mobile and desktop views.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Zustand for managing application state.

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project using Vite and TypeScript. Install necessary dependencies including React Three Fiber, Zustand, Tailwind CSS, and Howler.js.
2. **File Structure**: Create the complete file structure as specified, ensuring all components, data, and hooks are correctly placed in their respective directories.
3. **Develop Boot Sequence**: Implement the boot sequence in `BootSequence.tsx`, utilizing Howler.js for sound and animating the text output.
4. **Create 3D Scene**: Develop the `Scene.tsx` to render the 3D synaptic map with interactive nodes using React Three Fiber and d3-force for layout.
5. **Implement Node Interactivity**: Build `ProjectNode.tsx` to handle mouse interactions, tooltips, and animations on hover and double-click.
6. **Design Blueprint View**: Create the `BlueprintView.tsx` for displaying project details and engineering logs with glassmorphism effects.
7. **Tech Filter Bar**: Implement `TechFilterBar.tsx` to filter projects based on technology tags, managing interactions with Zustand.
8. **Recruiter Escape Mode**: Code the global Escape key listener to handle transitions between the 3D scene and the recruiter resume.
9. **AI Companion Messages**: Set up the `AICompanion.tsx` to display contextual hints based on user interactions.
10. **Contact Form**: Develop `ContactSlide.tsx` to handle user inquiries and integrate with Vercel serverless functions using Resend API.
11. **Testing and Optimization**: Ensure the application runs smoothly on various devices, optimizing performance for the specified requirements.
12. **Deployment**: Prepare the application for deployment on Vercel, including configuring meta tags, robots.txt, and sitemap.xml.

## USER EXPERIENCE
Users will be welcomed by a captivating boot sequence that smoothly transitions into an immersive 3D environment. They can interact with project nodes, diving deep into engineering logs and performance metrics. The intuitive filter bar allows for quick navigation through technologies, enhancing the exploration of projects. The recruiter escape mode provides a seamless way to access professional information, making it easy to share accomplishments. Each interaction is designed to be engaging and informative, elevating the user's experience as they navigate through AJEET-OS.