Spaces:

hitty28
/

portfolio

Running

App Files Files Community

Dannylova31 commited on Jun 1, 2025

Commit

39d0651

verified ·

1 Parent(s): b44c6c5

Upload index_modified.html

Browse files

Files changed (1) hide show

index_modified.html +1194 -0

index_modified.html ADDED Viewed

	@@ -0,0 +1,1194 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>By Imed Ramdani & Nawel Ramdani | Portfolio</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vanta@0.5.24/dist/vanta.net.min.js"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+        :root {
+            --primary: #3b82f6;
+            --secondary: #10b981;
+            --dark: #1e293b;
+            --light: #f8fafc;
+        }
+        body {
+            font-family: 'Poppins', sans-serif;
+            background-color: #f1f5f9;
+            color: var(--dark);
+            overflow-x: hidden;
+            transition: background-color 0.3s, color 0.3s;
+        }
+        .dark {
+            background-color: #0f172a;
+            color: #f8fafc;
+        }
+        .dark .card {
+            background-color: #1e293b;
+            color: #f8fafc;
+        }
+        .dark .bg-white {
+            background-color: #1e293b !important;
+            color: #f8fafc;
+        }
+        .dark .bg-slate-50 {
+            background-color: #0f172a !important;
+        }
+        .dark .text-slate-600, .dark .text-slate-700 {
+            color: #e2e8f0 !important;
+        }
+        .dark .bg-gradient-to-br {
+            background-image: linear-gradient(to bottom right, #1e293b, #1e293b) !important;
+        }
+        .dark .border-slate-300 {
+            border-color: #334155 !important;
+        }
+        .dark .shadow-md {
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -1px rgba(0, 0, 0, 0.12) !important;
+        }
+        .gradient-text {
+            background: linear-gradient(90deg, var(--primary), var(--secondary));
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+        }
+        .card {
+            transition: all 0.3s ease;
+            transform: translateY(0);
+        }
+        .card:hover {
+            transform: translateY(-10px);
+            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+        }
+        .timeline-item::before {
+            content: '';
+            position: absolute;
+            left: -40px;
+            top: 0;
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background: var(--primary);
+            border: 4px solid white;
+        }
+        .dark .timeline-item::before {
+            border-color: #1e293b;
+        }
+        .timeline::before {
+            content: '';
+            position: absolute;
+            left: 30px;
+            top: 0;
+            height: 100%;
+            width: 2px;
+            background: #e2e8f0;
+        }
+        .dark .timeline::before {
+            background: #334155;
+        }
+        .skill-bar {
+            height: 8px;
+            border-radius: 4px;
+            background: #e2e8f0;
+            overflow: hidden;
+        }
+        .dark .skill-bar {
+            background: #334155;
+        }
+        .skill-progress {
+            height: 100%;
+            background: linear-gradient(90deg, var(--primary), var(--secondary));
+            transition: width 1s ease-in-out;
+        }
+        .floating {
+            animation: floating 3s ease-in-out infinite;
+        }
+        @keyframes floating {
+            0% { transform: translateY(0px); }
+            50% { transform: translateY(-15px); }
+            100% { transform: translateY(0px); }
+        }
+        .fade-in {
+            opacity: 0;
+            animation: fadeIn 1s ease-in forwards;
+        }
+        @keyframes fadeIn {
+            to { opacity: 1; }
+        }
+        .delay-1 { animation-delay: 0.2s; }
+        .delay-2 { animation-delay: 0.4s; }
+        .delay-3 { animation-delay: 0.6s; }
+        .delay-4 { animation-delay: 0.8s; }
+        .glow {
+            box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
+        }
+        .typewriter {
+            overflow: hidden;
+            border-right: 3px solid var(--primary);
+            white-space: nowrap;
+            animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
+        }
+        @keyframes typing {
+            from { width: 0 }
+            to { width: 100% }
+        }
+        @keyframes blink-caret {
+            from, to { border-color: transparent }
+            50% { border-color: var(--primary) }
+        }
+        .parallax {
+            background-attachment: fixed;
+            background-position: center;
+            background-repeat: no-repeat;
+            background-size: cover;
+        }
+        .hover-underline-animation {
+            display: inline-block;
+            position: relative;
+        }
+        .hover-underline-animation::after {
+            content: '';
+            position: absolute;
+            width: 100%;
+            transform: scaleX(0);
+            height: 2px;
+            bottom: 0;
+            left: 0;
+            background: linear-gradient(90deg, var(--primary), var(--secondary));
+            transform-origin: bottom right;
+            transition: transform 0.25s ease-out;
+        }
+        .hover-underline-animation:hover::after {
+            transform: scaleX(1);
+            transform-origin: bottom left;
+        }
+        /* Dark mode toggle */
+        .toggle-checkbox:checked {
+            right: 0;
+            background-color: #10b981;
+        }
+        .toggle-checkbox:checked + .toggle-label {
+            background-color: #1e293b;
+        }
+        /* 3D Character Container */
+        .character-container {
+            width: 300px;
+            height: 300px;
+            position: relative;
+            margin: 0 auto;
+        }
+        @media (max-width: 768px) {
+            .character-container {
+                width: 250px;
+                height: 250px;
+            }
+        }
+        /* Floating animations */
+        @keyframes float1 {
+            0% { transform: translateY(0px); }
+            50% { transform: translateY(-20px); }
+            100% { transform: translateY(0px); }
+        }
+        @keyframes float2 {
+            0% { transform: translateY(0px) rotate(0deg); }
+            50% { transform: translateY(-10px) rotate(5deg); }
+            100% { transform: translateY(0px) rotate(0deg); }
+        }
+        .float-animation1 {
+            animation: float1 4s ease-in-out infinite;
+        }
+        .float-animation2 {
+            animation: float2 5s ease-in-out infinite;
+        }
+        /* Cursor interaction styles */
+        .character-hover-effect {
+            transition: transform 0.3s ease;
+        }
+        /* Responsive adjustments */
+        @media (max-width: 1024px) {
+            .hero-content {
+                flex-direction: column;
+                text-align: center;
+            }
+            .hero-buttons {
+                justify-content: center;
+            }
+            #about .grid-cols-3 {
+                grid-template-columns: 1fr;
+            }
+            .timeline::before {
+                left: 20px;
+            }
+            .timeline-item::before {
+                left: -30px;
+            }
+        }
+        @media (max-width: 768px) {
+            .project-grid {
+                grid-template-columns: 1fr;
+            }
+            .skill-grid {
+                grid-template-columns: 1fr;
+            }
+            .contact-box {
+                flex-direction: column;
+            }
+            .contact-info {
+                width: 100%;
+            }
+            .contact-form {
+                width: 100%;
+            }
+            .footer-content {
+                flex-direction: column;
+                text-align: center;
+            }
+            .footer-social {
+                justify-content: center;
+                margin-top: 1rem;
+            }
+        }
+        /* No select for particles */
+        .particles, .particles * {
+            user-select: none;
+            -webkit-user-select: none;
+        }
+        /* Preloader */
+        .preloader {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: #0f172a;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            z-index: 9999;
+            transition: opacity 0.5s ease;
+        }
+        .preloader-content {
+            text-align: center;
+        }
+        .spinner {
+            width: 70px;
+            height: 70px;
+            border: 5px solid rgba(255, 255, 255, 0.3);
+            border-radius: 50%;
+            border-top-color: #3b82f6;
+            animation: spin 1s ease-in-out infinite;
+            margin: 0 auto 1rem;
+        }
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+    </style>
+</head>
+<body class="min-h-screen">
+    <!-- Preloader -->
+    <div class="preloader" id="preloader">
+        <div class="preloader-content">
+            <div class="spinner"></div>
+            <div class="text-white text-xl font-medium">Loading Portfolio...</div>
+        </div>
+    </div>
+    <!-- Interactive Background -->
+    <div id="vanta-background" class="fixed inset-0 -z-10 overflow-hidden"></div>
+    <!-- Floating Particles -->
+    <div class="fixed inset-0 -z-10 overflow-hidden pointer-events-none">
+        <div class="particles">
+            <!-- These will be added via JS -->
+        </div>
+    </div>
+    <!-- Header/Navbar -->
+    <header class="fixed top-0 left-0 right-0 bg-white/80 backdrop-blur-md shadow-sm z-50 dark:bg-slate-900/80">
+        <div class="container mx-auto px-6 py-4">
+            <div class="flex justify-between items-center">
+                <a href="#" class="text-2xl font-bold gradient-text hover-underline-animation">By Imed Ramdani & Nawel Ramdani</a>
+                <nav class="hidden md:flex space-x-8 items-center">
+                    <a href="#about" class="text-slate-700 hover:text-blue-500 transition hover-underline-animation dark:text-slate-300">About</a>
+                    <a href="#experience" class="text-slate-700 hover:text-blue-500 transition hover-underline-animation dark:text-slate-300">Experience</a>
+                    <a href="#projects" class="text-slate-700 hover:text-blue-500 transition hover-underline-animation dark:text-slate-300">Projects</a>
+                    <a href="#skills" class="text-slate-700 hover:text-blue-500 transition hover-underline-animation dark:text-slate-300">Skills</a>
+                    <a href="#contact" class="text-slate-700 hover:text-blue-500 transition hover-underline-animation dark:text-slate-300">Contact</a>
+                    <!-- Dark mode toggle -->
+                    <div class="relative inline-block w-12 h-6 mx-2 align-middle select-none transition duration-200 ease-in">
+                        <input type="checkbox" id="toggle" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"/>
+                        <label for="toggle" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
+                    </div>
+                    <label for="toggle" class="text-gray-600 dark:text-gray-300 ml-1">
+                        <i class="fas fa-moon dark:hidden"></i>
+                        <i class="fas fa-sun hidden dark:inline"></i>
+                    </label>
+                </nav>
+                <button class="md:hidden text-slate-700 dark:text-slate-300" id="mobile-menu-button">
+                    <i class="fas fa-bars text-2xl"></i>
+                </button>
+            </div>
+        </div>
+    </header>
+    <!-- Mobile menu -->
+    <div id="mobile-menu" class="fixed inset-0 z-40 bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm hidden flex-col items-center justify-center space-y-6">
+        <button id="close-menu" class="absolute top-4 right-4 text-3xl text-slate-700 dark:text-slate-300">
+            <i class="fas fa-times"></i>
+        </button>
+        <a href="#about" class="text-2xl text-slate-700 hover:text-blue-500 dark:text-slate-300">About</a>
+        <a href="#experience" class="text-2xl text-slate-700 hover:text-blue-500 dark:text-slate-300">Experience</a>
+        <a href="#projects" class="text-2xl text-slate-700 hover:text-blue-500 dark:text-slate-300">Projects</a>
+        <a href="#skills" class="text-2xl text-slate-700 hover:text-blue-500 dark:text-slate-300">Skills</a>
+        <a href="#contact" class="text-2xl text-slate-700 hover:text-blue-500 dark:text-slate-300">Contact</a>
+        <div class="flex items-center mt-6">
+            <div class="relative inline-block w-12 h-6 mx-2 align-middle select-none transition duration-200 ease-in">
+                <input type="checkbox" id="toggle-mobile" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"/>
+                <label for="toggle-mobile" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
+            </div>
+            <label for="toggle-mobile" class="text-gray-600 dark:text-gray-300 ml-1">
+                <i class="fas fa-moon dark:hidden"></i>
+                <i class="fas fa-sun hidden dark:inline"></i>
+            </label>
+        </div>
+    </div>
+    <!-- Hero Section -->
+    <section class="min-h-screen flex items-center pt-20">
+        <div class="container mx-auto px-6 py-20">
+            <div class="flex flex-col md:flex-row items-center hero-content">
+                <div class="md:w-1/2 mb-10 md:mb-0 fade-in">
+                    <h1 class="text-4xl md:text-6xl font-bold mb-6 dark:text-white">
+                        <span class="gradient-text">Innovative</span> Data Science Engineer
+                    </h1>
+                    <p class="text-xl text-slate-600 mb-8 typewriter dark:text-slate-300">
+                        Specializing in AI product development and machine learning.
+                    </p>
+                    <div class="flex space-x-4 hero-buttons">
+                        <a href="#contact" class="px-6 py-3 bg-gradient-to-r from-blue-500 to-emerald-500 text-white rounded-full font-medium hover:shadow-lg transition-all transform hover:scale-105">
+                            Contact Me
+                        </a>
+                        <a href="#projects" class="px-6 py-3 border border-blue-500 text-blue-500 rounded-full font-medium hover:bg-blue-50 transition-all transform hover:scale-105 dark:border-blue-400 dark:text-blue-400 dark:hover:bg-slate-800">
+                            View Projects
+                        </a>
+                    </div>
+                </div>
+                <div class="md:w-1/2 flex justify-center fade-in delay-1">
+                    <div class="character-container" id="character-container">
+                        <!-- 3D Model will be rendered here -->
+                        <canvas id="character-canvas"></canvas>
+                        <div class="absolute -bottom-6 left-1/2 transform -translate-x-1/2 bg-white px-4 py-2 rounded-full shadow-md dark:bg-slate-800">
+                            <!-- <span class="font-bold gradient-text">SAI ROHITH VULAPU</span> -->
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- About Section -->
+    <section id="about" class="py-20 bg-white dark:bg-slate-800">
+        <div class="container mx-auto px-6">
+            <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 gradient-text fade-in">Professional Summary</h2>
+            <div class="max-w-4xl mx-auto bg-gradient-to-r from-blue-50 to-emerald-50 rounded-2xl p-8 shadow-lg card fade-in delay-1 dark:from-blue-900/20 dark:to-emerald-900/20">
+                <div class="flex items-start">
+                    <div class="mr-6 text-blue-500 text-3xl dark:text-blue-400">
+                        <i class="fas fa-user-tie"></i>
+                    </div>
+                    <div>
+                        <p class="text-lg text-slate-700 leading-relaxed dark:text-slate-300">
+                            Innovative Data Science Engineer at APEX CURA HEALTHCARE IT, specializing in AI product development and machine learning.
+                            Successfully built an AI-powered SaaS product, fine-tuned LLMs for medical applications, and implemented a chatbot RAG pipeline.
+                            Proficient in Python and decision-making, driving impactful solutions in healthcare technology.
+                        </p>
+                    </div>
+                </div>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-12">
+                <div class="bg-white rounded-xl shadow-md p-6 card fade-in delay-2 dark:bg-slate-700">
+                    <div class="text-blue-500 text-3xl mb-4 dark:text-blue-400">
+                        <i class="fas fa-graduation-cap"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3 dark:text-white">Education</h3>
+                    <ul class="space-y-3">
+                        <li class="flex items-start">
+                            <span class="text-emerald-500 mr-2">•</span>
+                            <span class="dark:text-slate-300">JNTUA College of Engineering, B.Tech CSE (8.3 CGPA)</span>
+                        </li>
+                        <li class="flex items-start">
+                            <span class="text-emerald-500 mr-2">•</span>
+                            <span class="dark:text-slate-300">Narayana IIT Academy, Intermediate (9.8 CGPA)</span>
+                        </li>
+                        <li class="flex items-start">
+                            <span class="text-emerald-500 mr-2">•</span>
+                            <span class="dark:text-slate-300">Sri Chaitanya Techno School, SSC (10 CGPA)</span>
+                        </li>
+                    </ul>
+                </div>
+                <div class="bg-white rounded-xl shadow-md p-6 card fade-in delay-3 dark:bg-slate-700">
+                    <div class="text-blue-500 text-3xl mb-4 dark:text-blue-400">
+                        <i class="fas fa-trophy"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3 dark:text-white">Achievements</h3>
+                    <ul class="space-y-3">
+                        <li class="flex items-start">
+                            <span class="text-emerald-500 mr-2">•</span>
+                            <span class="dark:text-slate-300">Built AI-powered SaaS product for hospitals</span>
+                        </li>
+                        <li class="flex items-start">
+                            <span class="text-emerald-500 mr-2">•</span>
+                            <span class="dark:text-slate-300">Fine-tuned LLMs for medical applications</span>
+                        </li>
+                        <li class="flex items-start">
+                            <span class="text-emerald-500 mr-2">•</span>
+                            <span class="dark:text-slate-300">Implemented RAG pipeline for hospital chatbot</span>
+                        </li>
+                    </ul>
+                </div>
+                <div class="bg-white rounded-xl shadow-md p-6 card fade-in delay-4 dark:bg-slate-700">
+                    <div class="text-blue-500 text-3xl mb-4 dark:text-blue-400">
+                        <i class="fas fa-heartbeat"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3 dark:text-white">Passion</h3>
+                    <p class="text-slate-600 dark:text-slate-300">
+                        Creating AI solutions that transform healthcare, making it more accessible and efficient through cutting-edge technology.
+                    </p>
+                    <div class="mt-4">
+                        <span class="inline-block bg-blue-100 text-blue-800 text-sm px-3 py-1 rounded-full mr-2 mb-2 dark:bg-blue-900/30 dark:text-blue-300">#AI</span>
+                        <span class="inline-block bg-emerald-100 text-emerald-800 text-sm px-3 py-1 rounded-full mr-2 mb-2 dark:bg-emerald-900/30 dark:text-emerald-300">#Healthcare</span>
+                        <span class="inline-block bg-purple-100 text-purple-800 text-sm px-3 py-1 rounded-full mr-2 mb-2 dark:bg-purple-900/30 dark:text-purple-300">#Innovation</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Experience Section -->
+    <section id="experience" class="py-20 bg-slate-50 dark:bg-slate-900">
+        <div class="container mx-auto px-6">
+            <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 gradient-text fade-in">Professional Experience</h2>
+            <div class="max-w-4xl mx-auto relative pl-16 timeline">
+                <!-- APEX CURA -->
+                <div class="mb-12 relative timeline-item fade-in delay-1">
+                    <div class="bg-white p-6 rounded-xl shadow-md card dark:bg-slate-800">
+                        <div class="flex justify-between items-start mb-2">
+                            <h3 class="text-xl font-bold dark:text-white">Apex Cura Helathcare It</h3>
+                            <span class="bg-blue-100 text-blue-800 text-sm px-3 py-1 rounded-full dark:bg-blue-900/30 dark:text-blue-300">April 2024 - Present</span>
+                        </div>
+                        <ul class="list-disc pl-5 space-y-2 text-slate-600 dark:text-slate-300">
+                            <li>Building a AI powered SaaS product for hospitals</li>
+                            <li>Fine-tuning LLM's to achieve the medical knowledge</li>
+                            <li>Implemented a RAG pipeline for a hospital specific chatbot</li>
+                            <li>Created a AI based Suggestion system to help doctors write the prescription effortlessly</li>
+                            <li>Built a Copilot for our product</li>
+                        </ul>
+                    </div>
+                </div>
+                <!-- AURORA E-LABS -->
+                <div class="mb-12 relative timeline-item fade-in delay-2">
+                    <div class="bg-white p-6 rounded-xl shadow-md card dark:bg-slate-800">
+                        <div class="flex justify-between items-start mb-2">
+                            <h3 class="text-xl font-bold dark:text-white">A U R O R A E - L A B S</h3>
+                            <span class="bg-blue-100 text-blue-800 text-sm px-3 py-1 rounded-full dark:bg-blue-900/30 dark:text-blue-300">Aug 2023 - Mar 2024</span>
+                        </div>
+                        <ul class="list-disc pl-5 space-y-2 text-slate-600 dark:text-slate-300">
+                            <li>Built POC for converting natural language to SQL/Cypher query</li>
+                            <li>Another POC includes audio transcription using LLM's</li>
+                        </ul>
+                    </div>
+                </div>
+                <!-- ANUBRAIN -->
+                <div class="mb-12 relative timeline-item fade-in delay-3">
+                    <div class="bg-white p-6 rounded-xl shadow-md card dark:bg-slate-800">
+                        <div class="flex justify-between items-start mb-2">
+                            <h3 class="text-xl font-bold dark:text-white">ANUBRAIN TECHNOLOGY</h3>
+                            <span class="bg-blue-100 text-blue-800 text-sm px-3 py-1 rounded-full dark:bg-blue-900/30 dark:text-blue-300">Mar 2023 - July 2023</span>
+                        </div>
+                        <p class="text-slate-600 dark:text-slate-300">
+                            Executed numerous data science projects as a freelancer, delivering solutions tailored to client needs and requirements.
+                        </p>
+                    </div>
+                </div>
+                <!-- SHUNYAOS -->
+                <div class="relative timeline-item fade-in delay-4">
+                    <div class="bg-white p-6 rounded-xl shadow-md card dark:bg-slate-800">
+                        <div class="flex justify-between items-start mb-2">
+                            <h3 class="text-xl font-bold dark:text-white">S H U N Y A O S</h3>
+                            <span class="bg-blue-100 text-blue-800 text-sm px-3 py-1 rounded-full dark:bg-blue-900/30 dark:text-blue-300">Jan 2023 - March 2023</span>
+                        </div>
+                        <p class="text-slate-600 dark:text-slate-300">
+                            Spearheaded pedestrian detection projects, undertaking data labeling tasks independently to ensure high-quality training data.
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Projects Section -->
+    <section id="projects" class="py-20 bg-white dark:bg-slate-800">
+        <div class="container mx-auto px-6">
+            <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 gradient-text fade-in">Featured Projects</h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 project-grid">
+                <!-- Brain Tumor Segmentation -->
+                <div class="bg-gradient-to-br from-blue-50 to-emerald-50 rounded-xl overflow-hidden shadow-lg card fade-in delay-1 dark:from-blue-900/20 dark:to-emerald-900/20">
+                    <div class="h-48 bg-gradient-to-r from-blue-400 to-emerald-400 flex items-center justify-center">
+                        <i class="fas fa-brain text-white text-6xl"></i>
+                    </div>
+                    <div class="p-6">
+                        <div class="flex justify-between items-start mb-3">
+                            <h3 class="text-xl font-bold dark:text-white">Brain Tumor Segmentation</h3>
+                            <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full dark:bg-blue-900/30 dark:text-blue-300">2024</span>
+                        </div>
+                        <p class="text-slate-600 mb-4 dark:text-slate-300">
+                            Developed a Brain Tumor Segmentation project utilizing UNet architecture for accurate segmentation results.
+                        </p>
+                        <div class="flex flex-wrap gap-2">
+                            <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded dark:bg-blue-900/30 dark:text-blue-300">Python</span>
+                            <span class="text-xs bg-emerald-100 text-emerald-800 px-2 py-1 rounded dark:bg-emerald-900/30 dark:text-emerald-300">TensorFlow</span>
+                            <span class="text-xs bg-purple-100 text-purple-800 px-2 py-1 rounded dark:bg-purple-900/30 dark:text-purple-300">UNet</span>
+                        </div>
+                    </div>
+                </div>
+                <!-- NLP Search -->
+                <div class="bg-gradient-to-br from-blue-50 to-emerald-50 rounded-xl overflow-hidden shadow-lg card fade-in delay-2 dark:from-blue-900/20 dark:to-emerald-900/20">
+                    <div class="h-48 bg-gradient-to-r from-purple-400 to-blue-400 flex items-center justify-center">
+                        <i class="fas fa-search text-white text-6xl"></i>
+                    </div>
+                    <div class="p-6">
+                        <div class="flex justify-between items-start mb-3">
+                            <h3 class="text-xl font-bold dark:text-white">NLP Search</h3>
+                            <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full dark:bg-blue-900/30 dark:text-blue-300">2023</span>
+                        </div>
+                        <p class="text-slate-600 mb-4 dark:text-slate-300">
+                            Revolutionizing database interaction by developing intuitive solutions for crafting SQL queries using natural language.
+                        </p>
+                        <div class="flex flex-wrap gap-2">
+                            <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded dark:bg-blue-900/30 dark:text-blue-300">NLP</span>
+                            <span class="text-xs bg-emerald-100 text-emerald-800 px-2 py-1 rounded dark:bg-emerald-900/30 dark:text-emerald-300">LLMs</span>
+                            <span class="text-xs bg-purple-100 text-purple-800 px-2 py-1 rounded dark:bg-purple-900/30 dark:text-purple-300">SQL</span>
+                        </div>
+                    </div>
+                </div>
+                <!-- Pedestrian Detection -->
+                <div class="bg-gradient-to-br from-blue-50 to-emerald-50 rounded-xl overflow-hidden shadow-lg card fade-in delay-3 dark:from-blue-900/20 dark:to-emerald-900/20">
+                    <div class="h-48 bg-gradient-to-r from-orange-400 to-pink-400 flex items-center justify-center">
+                        <i class="fas fa-walking text-white text-6xl"></i>
+                    </div>
+                    <div class="p-6">
+                        <div class="flex justify-between items-start mb-3">
+                            <h3 class="text-xl font-bold dark:text-white">Pedestrian Detection</h3>
+                            <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full dark:bg-blue-900/30 dark:text-blue-300">2023</span>
+                        </div>
+                        <p class="text-slate-600 mb-4 dark:text-slate-300">
+                            Implementing TensorFlow Object Detection models to accurately identify pedestrians in images or videos.
+                        </p>
+                        <div class="flex flex-wrap gap-2">
+                            <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded dark:bg-blue-900/30 dark:text-blue-300">TFOD</span>
+                            <span class="text-xs bg-emerald-100 text-emerald-800 px-2 py-1 rounded dark:bg-emerald-900/30 dark:text-emerald-300">Computer Vision</span>
+                            <span class="text-xs bg-purple-100 text-purple-800 px-2 py-1 rounded dark:bg-purple-900/30 dark:text-purple-300">Object Detection</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Skills Section -->
+    <section id="skills" class="py-20 bg-slate-50 dark:bg-slate-900">
+        <div class="container mx-auto px-6">
+            <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 gradient-text fade-in">Technical Skills</h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto skill-grid">
+                <div class="bg-white rounded-xl shadow-md p-6 card fade-in delay-1 dark:bg-slate-800">
+                    <h3 class="text-xl font-bold mb-6 text-center dark:text-white">Core Competencies</h3>
+                    <div class="space-y-5">
+                        <div>
+                            <div class="flex justify-between mb-1">
+                                <span class="font-medium dark:text-slate-300">Python</span>
+                                <span class="text-blue-500 dark:text-blue-400">95%</span>
+                            </div>
+                            <div class="skill-bar">
+                                <div class="skill-progress" style="width: 95%"></div>
+                            </div>
+                        </div>
+                        <div>
+                            <div class="flex justify-between mb-1">
+                                <span class="font-medium dark:text-slate-300">Machine Learning</span>
+                                <span class="text-blue-500 dark:text-blue-400">90%</span>
+                            </div>
+                            <div class="skill-bar">
+                                <div class="skill-progress" style="width: 90%"></div>
+                            </div>
+                        </div>
+                        <div>
+                            <div class="flex justify-between mb-1">
+                                <span class="font-medium dark:text-slate-300">AI Product Development</span>
+                                <span class="text-blue-500 dark:text-blue-400">88%</span>
+                            </div>
+                            <div class="skill-bar">
+                                <div class="skill-progress" style="width: 88%"></div>
+                            </div>
+                        </div>
+                        <div>
+                            <div class="flex justify-between mb-1">
+                                <span class="font-medium dark:text-slate-300">Neural Networks</span>
+                                <span class="text-blue-500 dark:text-blue-400">85%</span>
+                            </div>
+                            <div class="skill-bar">
+                                <div class="skill-progress" style="width: 85%"></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="bg-white rounded-xl shadow-md p-6 card fade-in delay-2 dark:bg-slate-800">
+                    <h3 class="text-xl font-bold mb-6 text-center dark:text-white">Technologies & Tools</h3>
+                    <div class="grid grid-cols-2 gap-4">
+                        <div class="flex items-center p-3 bg-blue-50 rounded-lg dark:bg-blue-900/20">
+                            <i class="fab fa-python text-blue-500 text-2xl mr-3 dark:text-blue-400"></i>
+                            <span class="dark:text-slate-300">Python</span>
+                        </div>
+                        <div class="flex items-center p-3 bg-blue-50 rounded-lg dark:bg-blue-900/20">
+                            <i class="fas fa-brain text-blue-500 text-2xl mr-3 dark:text-blue-400"></i>
+                            <span class="dark:text-slate-300">TensorFlow</span>
+                        </div>
+                        <div class="flex items-center p-3 bg-blue-50 rounded-lg dark:bg-blue-900/20">
+                            <i class="fas fa-database text-blue-500 text-2xl mr-3 dark:text-blue-400"></i>
+                            <span class="dark:text-slate-300">MySQL</span>
+                        </div>
+                        <div class="flex items-center p-3 bg-blue-50 rounded-lg dark:bg-blue-900/20">
+                            <i class="fab fa-aws text-blue-500 text-2xl mr-3 dark:text-blue-400"></i>
+                            <span class="dark:text-slate-300">AWS</span>
+                        </div>
+                        <div class="flex items-center p-3 bg-blue-50 rounded-lg dark:bg-blue-900/20">
+                            <i class="fas fa-project-diagram text-blue-500 text-2xl mr-3 dark:text-blue-400"></i>
+                            <span class="dark:text-slate-300">Cypher QL</span>
+                        </div>
+                        <div class="flex items-center p-3 bg-blue-50 rounded-lg dark:bg-blue-900/20">
+                            <i class="fas fa-robot text-blue-500 text-2xl mr-3 dark:text-blue-400"></i>
+                            <span class="dark:text-slate-300">LLMs</span>
+                        </div>
+                        <div class="flex items-center p-3 bg-blue-50 rounded-lg dark:bg-blue-900/20">
+                            <i class="fas fa-eye text-blue-500 text-2xl mr-3 dark:text-blue-400"></i>
+                            <span class="dark:text-slate-300">Computer Vision</span>
+                        </div>
+                        <div class="flex items-center p-3 bg-blue-50 rounded-lg dark:bg-blue-900/20">
+                            <i class="fas fa-comments text-blue-500 text-2xl mr-3 dark:text-blue-400"></i>
+                            <span class="dark:text-slate-300">NLP</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Contact Section -->
+    <section id="contact" class="py-20 bg-gradient-to-r from-blue-500 to-emerald-500 text-white">
+        <div class="container mx-auto px-6">
+            <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 fade-in">Get In Touch</h2>
+            <div class="max-w-4xl mx-auto bg-white rounded-2xl shadow-xl overflow-hidden card fade-in delay-1 contact-box">
+                <div class="md:flex">
+                    <div class="md:w-1/2 bg-gradient-to-br from-blue-400 to-emerald-400 p-10 flex flex-col justify-center contact-info">
+                        <h3 class="text-2xl font-bold mb-6">Contact Information</h3>
+                        <div class="space-y-4">
+                            <div class="flex items-start">
+                                <i class="fas fa-envelope mt-1 mr-4"></i>
+                                <div>
+                                    <h4 class="font-medium">Email</h4>
+                                    <p class="text-blue-100">vulapusairohith28@gmail.com</p>
+                                </div>
+                            </div>
+                            <div class="flex items-start">
+                                <i class="fas fa-phone-alt mt=1 mr-4"></i>
+                                <div>
+                                    <h4 class="font-medium">Phone</h4>
+                                    <p class="text-blue-100">+91 6302052294</p>
+                                </div>
+                            </div>
+                            <div class="flex items-start">
+                                <i class="fab fa-github mt-1 mr-4"></i>
+                                <div>
+                                    <h4 class="font-medium">GitHub</h4>
+                                    <p class="text-blue-100">github.com/yourusername</p>
+                                </div>
+                            </div>
+                            <div class="flex items-start">
+                                <i class="fab fa-linkedin-in mt-1 mr-4"></i>
+                                <div>
+                                    <h4 class="font-medium">LinkedIn</h4>
+                                    <p class="text-blue-100">linkedin.com/in/yourprofile</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="mt-8 flex space-x-4">
+                            <a href="#" class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center hover:bg-white/30 transition">
+                                <i class="fab fa-github"></i>
+                            </a>
+                            <a href="#" class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center hover:bg-white/30 transition">
+                                <i class="fab fa-linkedin-in"></i>
+                            </a>
+                            <a href="#" class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center hover:bg-white/30 transition">
+                                <i class="fab fa-twitter"></i>
+                            </a>
+                            <a href="#" class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center hover:bg-white/30 transition">
+                                <i class="fab fa-instagram"></i>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="md:w-1/2 p-10 contact-form">
+                        <h3 class="text-2xl font-bold mb-6 text-slate-800 dark:text-slate-200">Send Me a Message</h3>
+                        <form class="space-y-4">
+                            <div>
+                                <label for="name" class="block text-sm font-medium text-slate-600 mb-1 dark:text-slate-300">Name</label>
+                                <input type="text" id="name" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-slate-700 dark:border-slate-600 dark:text-white">
+                            </div>
+                            <div>
+                                <label for="email" class="block text-sm font-medium text-slate-600 mb-1 dark:text-slate-300">Email</label>
+                                <input type="email" id="email" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-slate-700 dark:border-slate-600 dark:text-white">
+                            </div>
+                            <div>
+                                <label for="message" class="block text-sm font-medium text-slate-600 mb-1 dark:text-slate-300">Message</label>
+                                <textarea id="message" rows="4" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-slate-700 dark:border-slate-600 dark:text-white"></textarea>
+                            </div>
+                            <button type="submit" class="w-full bg-gradient-to-r from-blue-500 to-emerald-500 text-white py-3 rounded-lg font-medium hover:shadow-lg transition-all transform hover:scale-105">
+                                Send Message
+                            </button>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="bg-slate-900 text-white py-12">
+        <div class="container mx-auto px-6">
+            <div class="flex flex-col md:flex-row justify-between items-center footer-content">
+                <div class="mb-6 md:mb-0">
+                    <a href="#" class="text-2xl font-bold gradient-text">By Imed Ramdani & Nawel Ramdani</a>
+                    <p class="mt-2 text-slate-400">Innovative Data Science Engineer</p>
+                </div>
+                <div class="flex space-x-6 footer-social">
+                    <a href="#" class="text-slate-400 hover:text-white transition">
+                        <i class="fab fa-github text-xl"></i>
+                    </a>
+                    <a href="#" class="text-slate-400 hover:text-white transition">
+                        <i class="fab fa-linkedin-in text-xl"></i>
+                    </a>
+                    <a href="#" class="text-slate-400 hover:text-white transition">
+                        <i class="fab fa-twitter text-xl"></i>
+                    </a>
+                    <a href="#" class="text-slate-400 hover:text-white transition">
+                        <i class="fab fa-instagram text-xl"></i>
+                    </a>
+                </div>
+            </div>
+            <div class="border-t border-slate-800 mt-8 pt-8 text-center text-slate-400">
+                <p>&copy; 2024 Sai Rohith Vulapu. All rights reserved.</p>
+            </div>
+        </div>
+    </footer>
+    <!-- Floating AI Elements -->
+    <div class="fixed top-20 right-20 z-0 opacity-30 float-animation1">
+        <div class="w-20 h-20 bg-blue-400 rounded-full blur-xl dark:bg-blue-800/30"></div>
+    </div>
+    <div class="fixed bottom-32 left-40 z-0 opacity-30 float-animation2">
+        <div class="w-24 h-24 bg-emerald-400 rounded-full blur-xl dark:bg-emerald-800/30"></div>
+    </div>
+    <div class="fixed top-1/3 left-1/4 z-0 opacity-20 float-animation1">
+        <div class="w-32 h-32 bg-purple-400 rounded-full blur-xl dark:bg-purple-800/30"></div>
+    </div>
+    <script>
+        // Preloader
+        window.addEventListener('load', function() {
+            setTimeout(function() {
+                const preloader = document.getElementById('preloader');
+                preloader.style.opacity = '0';
+                setTimeout(() => preloader.style.display = 'none', 500);
+            }, 1000);
+        });
+        // Interactive Background
+        VANTA.NET({
+            el: "#vanta-background",
+            color: 0x3b82f6,
+            backgroundColor: 0xf1f5f9,
+            points: 10,
+            maxDistance: 22,
+            spacing: 16,
+            showDots: false
+        });
+        // Dark mode toggle functionality
+        const toggle = document.getElementById('toggle');
+        const toggleMobile = document.getElementById('toggle-mobile');
+        const body = document.body;
+        // Check for saved user preference, if any
+        if (localStorage.getItem('dark-mode') === 'enabled') {
+            body.classList.add('dark');
+            toggle.checked = true;
+            if (toggleMobile) toggleMobile.checked = true;
+            // Change Vanta.js background for dark mode
+            VANTA.NET({
+                el: "#vanta-background",
+                color: 0x3b82f6,
+                backgroundColor: 0x0f172a,
+                points: 10,
+                maxDistance: 22,
+                spacing: 16,
+                showDots: false
+            });
+        }
+        // Desktop toggle
+        toggle.addEventListener('change', function() {
+            if (this.checked) {
+                body.classList.add('dark');
+                localStorage.setItem('dark-mode', 'enabled');
+                if (toggleMobile) toggleMobile.checked = true;
+                // Change Vanta.js background for dark mode
+                VANTA.NET({
+                    el: "#vanta-background",
+                    color: 0x3b82f6,
+                    backgroundColor: 0x0f172a,
+                    points: 10,
+                    maxDistance: 22,
+                    spacing: 16,
+                    showDots: false
+                });
+            } else {
+                body.classList.remove('dark');
+                localStorage.setItem('dark-mode', 'disabled');
+                if (toggleMobile) toggleMobile.checked = false;
+                // Change Vanta.js background for light mode
+                VANTA.NET({
+                    el: "#vanta-background",
+                    color: 0x3b82f6,
+                    backgroundColor: 0xf1f5f9,
+                    points: 10,
+                    maxDistance: 22,
+                    spacing: 16,
+                    showDots: false
+                });
+            }
+        });
+        // Mobile toggle
+        if (toggleMobile) {
+            toggleMobile.addEventListener('change', function() {
+                if (this.checked) {
+                    body.classList.add('dark');
+                    localStorage.setItem('dark-mode', 'enabled');
+                    toggle.checked = true;
+                    // Change Vanta.js background for dark mode
+                    VANTA.NET({
+                        el: "#vanta-background",
+                        color: 0x3b82f6,
+                        backgroundColor: 0x0f172a,
+                        points: 10,
+                        maxDistance: 22,
+                        spacing: 16,
+                        showDots: false
+                    });
+                } else {
+                    body.classList.remove('dark');
+                    localStorage.setItem('dark-mode', 'disabled');
+                    toggle.checked = false;
+                    // Change Vanta.js background for light mode
+                    VANTA.NET({
+                        el: "#vanta-background",
+                        color: 0x3b82f6,
+                        backgroundColor: 0xf1f5f9,
+                        points: 10,
+                        maxDistance: 22,
+                        spacing: 16,
+                        showDots: false
+                    });
+                }
+            });
+        }
+        // Mobile menu functionality
+        const mobileMenuButton = document.getElementById('mobile-menu-button');
+        const mobileMenu = document.getElementById('mobile-menu');
+        const closeMenu = document.getElementById('close-menu');
+        mobileMenuButton.addEventListener('click', function() {
+            mobileMenu.classList.remove('hidden');
+            mobileMenu.classList.add('flex');
+        });
+        closeMenu.addEventListener('click', function() {
+            mobileMenu.classList.add('hidden');
+            mobileMenu.classList.remove('flex');
+        });
+        // Close menu when clicking on links
+        const mobileLinks = mobileMenu.querySelectorAll('a');
+        mobileLinks.forEach(link => {
+            link.addEventListener('click', function() {
+                mobileMenu.classList.add('hidden');
+                mobileMenu.classList.remove('flex');
+            });
+        });
+        // Create floating particles
+        document.addEventListener('DOMContentLoaded', function() {
+            const particlesContainer = document.querySelector('.particles');
+            const particleCount = window.innerWidth < 768 ? 15 : 30;
+            for (let i = 0; i < particleCount; i++) {
+                const particle = document.createElement('div');
+                particle.classList.add('absolute', 'rounded-full', 'bg-blue-300', 'dark:bg-blue-600/30');
+                // Random size
+                const size = Math.random() * 6 + 2;
+                particle.style.width = `${size}px`;
+                particle.style.height = `${size}px`;
+                // Random position
+                particle.style.left = `${Math.random() * 100}%`;
+                particle.style.top = `${Math.random() * 100}%`;
+                // Random animation
+                const duration = Math.random() * 20 + 10;
+                particle.style.animation = `float ${duration}s ease-in-out infinite`;
+                particle.style.animationDelay = `${Math.random() * 5}s`;
+                particlesContainer.appendChild(particle);
+            }
+        });
+        // Animate skill bars on scroll
+        window.addEventListener('scroll', function() {
+            const skillBars = document.querySelectorAll('.skill-progress');
+            const skillsSection = document.getElementById('skills');
+            const sectionPosition = skillsSection.getBoundingClientRect().top;
+            const screenPosition = window.innerHeight / 1.3;
+            if (sectionPosition < screenPosition) {
+                skillBars.forEach(bar => {
+                    const width = bar.style.width;
+                    bar.style.width = '0';
+                    setTimeout(() => {
+                        bar.style.width = width;
+                    }, 100);
+                });
+            }
+        });
+        // Smooth scrolling for anchor links
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function (e) {
+                e.preventDefault();
+                const targetId = this.getAttribute('href');
+                const targetElement = document.querySelector(targetId);
+                if (targetElement) {
+                    window.scrollTo({
+                        top: targetElement.offsetTop - 80,
+                        behavior: 'smooth'
+                    });
+                }
+            });
+        });
+        // 3D Character Animation
+        document.addEventListener('DOMContentLoaded', function() {
+            const container = document.getElementById('character-container');
+            const canvas = document.getElementById('character-canvas');
+            // Create a simple 3D character (simplified for this example)
+            // In a real implementation, you would use a 3D model loader like GLTFLoader
+            // and a pre-made 3D model of a data scientist
+            if (canvas && typeof THREE !== 'undefined') {
+                // Set canvas size
+                canvas.width = container.clientWidth;
+                canvas.height = container.clientHeight;
+                // Scene setup
+                const scene = new THREE.Scene();
+                const camera = new THREE.PerspectiveCamera(
+                    75,
+                    canvas.width / canvas.height,
+                    0.1,
+                    1000
+                );
+                camera.position.z = 5;
+                // Renderer
+                const renderer = new THREE.WebGLRenderer({
+                    canvas: canvas,
+                    alpha: true,
+                    antialias: true
+                });
+                renderer.setClearColor(0x000000, 0);
+                renderer.setSize(canvas.width, canvas.height);
+                // Simple character geometry (could be replaced with a proper 3D model)
+                const geometry = new THREE.BoxGeometry(1, 1, 1);
+                const material = new THREE.MeshBasicMaterial({
+                    color: 0x3b82f6,
+                    wireframe: true
+                });
+                const cube = new THREE.Mesh(geometry, material);
+                scene.add(cube);
+                // Add some floating AI elements around the character
+                const aiElements = [];
+                const aiGeometry = new THREE.SphereGeometry(0.1, 16, 16);
+                const aiMaterial = new THREE.MeshBasicMaterial({
+                    color: 0x10b981
+                });
+                for (let i = 0; i < 5; i++) {
+                    const aiElement = new THREE.Mesh(aiGeometry, aiMaterial);
+                    aiElement.position.x = (Math.random() - 0.5) * 2;
+                    aiElement.position.y = (Math.random() - 0.5) * 2;
+                    aiElement.position.z = (Math.random() - 0.5) * 2;
+                    scene.add(aiElement);
+                    aiElements.push(aiElement);
+                }
+                // Animation loop
+                function animate() {
+                    requestAnimationFrame(animate);
+                    // Rotate character
+                    cube.rotation.x += 0.01;
+                    cube.rotation.y += 0.01;
+                    // Animate AI elements
+                    aiElements.forEach((element, index) => {
+                        element.position.x = Math.sin(Date.now() * 0.001 + index) * 1.5;
+                        element.position.y = Math.cos(Date.now() * 0.001 + index * 2) * 1.5;
+                        element.position.z = Math.sin(Date.now() * 0.001 + index * 0.5) * 1.5;
+                    });
+                    renderer.render(scene, camera);
+                }
+                animate();
+                // Cursor interaction
+                container.addEventListener('mousemove', (event) => {
+                    const rect = container.getBoundingClientRect();
+                    const x = ((event.clientX - rect.left) / container.clientWidth) * 2 - 1;
+                    const y = -((event.clientY - rect.top) / container.clientHeight) * 2 + 1;
+                    // Rotate character based on cursor position
+                    cube.rotation.y = x * 0.5;
+                    cube.rotation.x = y * 0.5;
+                    // Make AI elements follow cursor
+                    aiElements[0].position.x = x * 2;
+                    aiElements[0].position.y = y * 2;
+                });
+                // Hover effect
+                container.addEventListener('mouseenter', () => {
+                    cube.material.color.setHex(0x10b981);
+                    cube.scale.set(1.1, 1.1, 1.1);
+                });
+                container.addEventListener('mouseleave', () => {
+                    cube.material.color.setHex(0x3b82f6);
+                    cube.scale.set(1, 1, 1);
+                });
+            }
+        });
+        // Responsive adjustments on resize
+        window.addEventListener('resize', function() {
+            // Update character canvas size
+            const container = document.getElementById('character-container');
+            const canvas = document.getElementById('character-canvas');
+            if (canvas && container) {
+                canvas.width = container.clientWidth;
+                canvas.height = container.clientHeight;
+            }
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=hitty28/portfolio" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
+</html>