"Create a modern, highly interactive, and visually striking personal portfolio website. The website should leverage React.js with Next.js for server-side rendering and routing, Tailwind CSS for utility-first styling, TypeScript for type safety, Three.js for stunning 3D graphics, and Framer Motion for sophisticated animations.

I. Core Requirements & Theme:

Black Theme: The primary aesthetic should be a sleek, dark/black theme. Use a palette of dark grays, deep blacks, and subtle accents (e.g., electric blue, neon green, or a soft glow) to create a professional and engaging look. Ensure high contrast for readability.

High Performance: The site must be optimized for fast loading and smooth interactions across all devices.

Fully Responsive: The design must adapt seamlessly to desktop, tablet, and mobile screens.

Clean & Modern UI/UX: Prioritize a minimalist design, intuitive navigation, and an excellent user experience.

II. Website Structure & Content Sections:

The portfolio should include the following sections, each designed to showcase skills and experience effectively. Use placeholder content for all text and image assets, indicating where actual content (from the resume and personal photos) should be inserted.

Hero Section (Landing Page):

Content: Your name prominently displayed, a concise and impactful tagline (e.g., "Full Stack Developer | AI Enthusiast"), a brief, engaging introduction.

Call to Action: A clear button like "View Projects" or "Learn More About Me."

3D Element (Three.js): Integrate an interactive, subtle 3D background element. This could be:

A flowing, abstract particle system.

A low-poly, futuristic cityscape.

An interactive, geometric shape that responds to mouse movement (parallax or rotation).

The 3D element should complement the dark theme and provide a sense of depth without distracting from the main content.

Animation (Framer Motion): Implement entrance animations for text elements (e.g., staggered fade-in, slide-up) and a subtle animation for the call-to-action button.

About Me Section:

Content: A detailed biography covering your professional journey, passion for technology, interests, and unique personality.

Photo Integration: Include a placeholder for your professional photo, designed to be prominently displayed, perhaps with a subtle glow or parallax effect.

Animation (Framer Motion): Implement scroll-triggered animations for text blocks and the image, making them appear gracefully as the user scrolls.

Skills Section:

Content: Categorize your technical skills (e.g., Programming Languages, Frameworks, Libraries, Databases, Tools, Cloud Platforms) and soft skills.

Visual Representation: Use a visually appealing layout (e.g., a grid of skill cards).

Interactive Elements/3D Icons: Consider:

Subtle hover effects on skill cards (e.g., scale-up, background change).

Small, stylized 3D icons (Three.js) representing key technologies (e.g., a React logo, a Node.js icon) that animate on hover or scroll.

Animation (Framer Motion): Staggered appearance of skill cards on scroll, and hover animations for individual cards.

Experience Section:

Content: A chronological list of your work experience, including company name, job title, dates, and bullet points detailing responsibilities and key achievements.

Layout: Present this as a timeline or accordion-style layout for easy readability.

Animation (Framer Motion): Smooth reveal of each experience entry as the user scrolls, perhaps with a subtle slide-in from the side or a fade effect.

Projects Section:

Content: Showcase 3-5 of your best projects. For each project, include:

Project Title

Brief Description

Technologies Used (icons or tags)

Links to Live Demo (if applicable) and GitHub Repository

Placeholder for a project screenshot/thumbnail (adaptable to dark theme).

Layout: Use a grid layout for project cards.

Interactive Elements:

Engaging hover effects on project cards (e.g., overlay with details, slight lift/shadow, border animation).

Consider a subtle 3D tilt effect on hover using Framer Motion.

Animation (Framer Motion): Staggered appearance of project cards, and interactive hover effects.

Education Section:

Content: Academic background, including degree, institution, graduation date, and relevant coursework or achievements.

Layout: Clean and concise list.

Contact Section:

Content: A contact form (using client-side validation) for inquiries, along with direct links to your professional profiles (LinkedIn, GitHub, email).

Animation (Framer Motion): Subtle entrance animations for form fields and social media icons.

3D Element (Optional): A small, non-distracting 3D icon or illustration related to contact/connection.

III. Navigation & Overall Site Features:

Sticky Navigation Bar: A sleek, dark-themed navigation bar at the top, which becomes sticky on scroll.

Links: Hero, About, Skills, Experience, Projects, Contact.

Animation (Framer Motion): Smooth transition/underline effect on hover for navigation links.

Smooth Scrolling: Implement smooth scrolling for all internal links.

Loading Screen (Optional but Recommended): A subtle, quick loading animation (e.g., a pulsating logo or a simple progress bar) to enhance user experience while assets load.

IV. Technical Implementation Details:

Next.js Features: Utilize Next.js features like file-system routing, Image component for optimized images, and API routes (if a backend for the contact form is desired, otherwise a mailto: link is sufficient).

Tailwind CSS: Apply Tailwind classes extensively for all styling, ensuring consistency and responsiveness.

TypeScript: All components, props, and utility functions should be strictly typed.

Three.js Integration: Ensure Three.js scenes are optimized for performance and integrate seamlessly into React components (e.g., using @react-three/fiber or direct Three.js canvas management within a React component). The 3D elements should be interactive but not overly complex to maintain load times.

Framer Motion: Use motion components and useAnimation hook for orchestrating advanced animations. Focus on creating fluid and subtle transitions.

V. Placeholder Content Strategy:

For all text, use Lorem ipsum or similar placeholder text of appropriate length.

For images, use https://placehold.co/ with width x height and background color/text color placeholders. For example, https://placehold.co/400x300/000000/FFFFFF?text=Project+Screenshot.

For the personal photo, use https://placehold.co/200x200/000000/FFFFFF?text=Your+Photo as a circular or square placeholder.

This detailed prompt should enable the creation of a stunning and functional portfolio that meets all your requirements."