Spaces:

fluxKawaii
/

portfolio

Running

App Files Files Community

fluxKawaii commited on Apr 20

Commit

3a6deac

verified ·

1 Parent(s): 4f8f9f1

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +632 -19
prompts.txt +0 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Portfolio
-emoji: 😻
-colorFrom: pink
-colorTo: pink
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: portfolio
+emoji: 🐳
+colorFrom: gray
+colorTo: gray
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,632 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Ayush Raj | Tech-Meets-Medicine</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">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;800&display=swap');
+        body {
+            font-family: 'Poppins', sans-serif;
+            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            scroll-behavior: smooth;
+        }
+        .blob {
+            border-radius: 50%;
+            filter: blur(40px);
+            opacity: 0.8;
+            position: absolute;
+            z-index: -1;
+            animation: float 8s ease-in-out infinite;
+        }
+        @keyframes float {
+            0%, 100% { transform: translateY(0) rotate(0deg); }
+            50% { transform: translateY(-20px) rotate(5deg); }
+        }
+        .card-hover {
+            transition: all 0.3s ease;
+            transform-style: preserve-3d;
+        }
+        .card-hover:hover {
+            transform: translateY(-10px) rotateX(5deg);
+            box-shadow: 0 20px 30px -10px rgba(0,0,0,0.2);
+        }
+        .timeline-item::before {
+            content: '';
+            position: absolute;
+            left: -40px;
+            top: 0;
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border: 4px solid white;
+        }
+        .skill-bubble {
+            transition: all 0.3s ease;
+        }
+        .skill-bubble:hover {
+            transform: scale(1.1) translateY(-5px);
+            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
+        }
+        .wave {
+            animation: wave 2s infinite;
+            transform-origin: 70% 70%;
+            display: inline-block;
+        }
+        @keyframes wave {
+            0% { transform: rotate(0deg); }
+            10% { transform: rotate(14deg); }
+            20% { transform: rotate(-8deg); }
+            30% { transform: rotate(14deg); }
+            40% { transform: rotate(-4deg); }
+            50% { transform: rotate(10deg); }
+            60% { transform: rotate(0deg); }
+            100% { transform: rotate(0deg); }
+        }
+        .fade-in {
+            opacity: 0;
+            transition: opacity 0.6s ease-in, transform 0.6s ease-out;
+            transform: translateY(20px);
+        }
+        .fade-in.visible {
+            opacity: 1;
+            transform: translateY(0);
+        }
+        .social-blob {
+            transition: all 0.3s ease;
+            transform-style: preserve-3d;
+        }
+        .social-blob:hover {
+            transform: scale(1.05) rotate(5deg);
+            box-shadow: 0 15px 30px -5px rgba(0,0,0,0.2);
+        }
+        .video-thumbnail::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0,0,0,0.3);
+            border-radius: 1rem;
+            transition: all 0.3s ease;
+        }
+        .video-thumbnail:hover::after {
+            background: rgba(0,0,0,0.1);
+        }
+        .play-icon {
+            transition: all 0.3s ease;
+        }
+        .video-thumbnail:hover .play-icon {
+            transform: scale(1.2);
+        }
+    </style>
+</head>
+<body class="overflow-x-hidden">
+    <!-- Blob Background Elements -->
+    <div class="blob w-64 h-64 bg-purple-300 top-20 left-10"></div>
+    <div class="blob w-80 h-80 bg-blue-300 bottom-20 right-10 animation-delay-2000"></div>
+    <div class="blob w-96 h-96 bg-pink-200 top-1/2 right-1/4 animation-delay-4000"></div>
+    <!-- Hero Section -->
+    <section class="min-h-screen flex items-center justify-center relative overflow-hidden px-4">
+        <div class="max-w-6xl mx-auto text-center z-10">
+            <h1 class="text-5xl md:text-7xl font-bold mb-6 text-gray-800">
+                <span class="wave">👋</span> Hello World!
+            </h1>
+            <h2 class="text-4xl md:text-6xl font-bold mb-8 bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-blue-500">
+                I'm Ayush Raj
+            </h2>
+            <p class="text-xl md:text-2xl text-gray-600 mb-12 max-w-2xl mx-auto">
+                An OT & Anesthesia Student | Tech Enthusiast | Future Med-Tech Innovator
+            </p>
+            <div class="relative inline-block mb-16">
+                <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80"
+                     alt="Ayush Raj"
+                     class="w-40 h-40 md:w-48 md:h-48 rounded-full object-cover border-4 border-white shadow-xl transform transition-all hover:scale-105">
+                <div class="absolute -bottom-3 -right-3 bg-gradient-to-r from-purple-500 to-pink-500 text-white p-2 rounded-full">
+                    <i class="fas fa-code text-xl"></i>
+                </div>
+            </div>
+            <div class="animate-bounce mt-12">
+                <p class="text-gray-500 mb-2">Scroll to explore my world</p>
+                <i class="fas fa-chevron-down text-gray-400 text-2xl"></i>
+            </div>
+        </div>
+    </section>
+    <!-- About Me Section -->
+    <section class="py-20 px-4 relative">
+        <div class="max-w-6xl mx-auto">
+            <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 text-gray-800">
+                About <span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-purple-600">Me</span>
+            </h2>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <!-- Who I Am Card -->
+                <div class="bg-white rounded-2xl p-8 shadow-xl card-hover fade-in">
+                    <div class="text-blue-500 mb-4 text-4xl">
+                        <i class="fas fa-user"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-4 text-gray-800">Who I Am</h3>
+                    <p class="text-gray-600">
+                        A passionate OT & Anesthesia student with a deep fascination for technology's role in modern medicine.
+                        I bridge the gap between surgical practice and technological innovation, constantly exploring how
+                        coding and medical knowledge can intersect to create better healthcare solutions.
+                    </p>
+                </div>
+                <!-- Hobbies Card -->
+                <div class="bg-white rounded-2xl p-8 shadow-xl card-hover fade-in" style="transition-delay: 0.2s">
+                    <div class="text-purple-500 mb-4 text-4xl">
+                        <i class="fas fa-heart"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-4 text-gray-800">Hobbies & Interests</h3>
+                    <div class="grid grid-cols-2 gap-4">
+                        <div class="flex items-center">
+                            <i class="fas fa-laptop-code text-blue-500 mr-2"></i>
+                            <span>Coding</span>
+                        </div>
+                        <div class="flex items-center">
+                            <i class="fas fa-syringe text-green-500 mr-2"></i>
+                            <span>Surgical Tech</span>
+                        </div>
+                        <div class="flex items-center">
+                            <i class="fas fa-robot text-yellow-500 mr-2"></i>
+                            <span>Exploring Gadgets</span>
+                        </div>
+                        <div class="flex items-center">
+                            <i class="fas fa-paint-brush text-pink-500 mr-2"></i>
+                            <span>Web Design</span>
+                        </div>
+                    </div>
+                </div>
+                <!-- Fun Fact Card -->
+                <div class="bg-white rounded-2xl p-8 shadow-xl card-hover fade-in" style="transition-delay: 0.4s">
+                    <div class="text-pink-500 mb-4 text-4xl">
+                        <i class="fas fa-lightbulb"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-4 text-gray-800">Fun Fact</h3>
+                    <div class="bg-gradient-to-r from-purple-100 to-pink-100 p-4 rounded-xl">
+                        <p class="italic text-gray-700">
+                            "I see the future of surgery in silicon and steel."
+                        </p>
+                    </div>
+                    <p class="mt-4 text-gray-600 text-sm">
+                        This belief drives my passion for medical technology and robotic-assisted surgery innovations.
+                    </p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Education Journey -->
+    <section class="py-20 px-4 relative bg-gray-50">
+        <div class="max-w-6xl mx-auto">
+            <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 text-gray-800">
+                My <span class="bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-blue-500">Education</span> Journey
+            </h2>
+            <div class="relative pl-8 md:pl-16">
+                <div class="absolute left-0 top-0 h-full w-1 bg-gradient-to-b from-purple-500 to-blue-500"></div>
+                <!-- 10th Grade -->
+                <div class="mb-12 relative timeline-item fade-in">
+                    <div class="bg-white p-6 rounded-xl shadow-md">
+                        <div class="flex items-center mb-2">
+                            <div class="bg-blue-100 p-2 rounded-full mr-4">
+                                <i class="fas fa-school text-blue-500"></i>
+                            </div>
+                            <h3 class="text-xl font-bold text-gray-800">10th Grade</h3>
+                        </div>
+                        <p class="text-gray-600 mb-2">Guru Gobind Singh Public School, Kamre, Ranchi</p>
+                        <p class="text-sm text-gray-500">2016-2017</p>
+                    </div>
+                </div>
+                <!-- Intermediate -->
+                <div class="mb-12 relative timeline-item fade-in" style="transition-delay: 0.2s">
+                    <div class="bg-white p-6 rounded-xl shadow-md">
+                        <div class="flex items-center mb-2">
+                            <div class="bg-purple-100 p-2 rounded-full mr-4">
+                                <i class="fas fa-flask text-purple-500"></i>
+                            </div>
+                            <h3 class="text-xl font-bold text-gray-800">Intermediate</h3>
+                        </div>
+                        <p class="text-gray-600 mb-2">Science Stream (Bio, Chem, Physics + C++)</p>
+                        <p class="text-sm text-gray-500">2017-2019</p>
+                    </div>
+                </div>
+                <!-- Current -->
+                <div class="relative timeline-item fade-in" style="transition-delay: 0.4s">
+                    <div class="bg-white p-6 rounded-xl shadow-md">
+                        <div class="flex items-center mb-2">
+                            <div class="bg-pink-100 p-2 rounded-full mr-4">
+                                <i class="fas fa-user-graduate text-pink-500"></i>
+                            </div>
+                            <h3 class="text-xl font-bold text-gray-800">Current</h3>
+                        </div>
+                        <p class="text-gray-600 mb-2">B.Voc in AOTT at Emversity, Ranchi</p>
+                        <p class="text-sm text-gray-500">2021-Present</p>
+                        <div class="mt-4 bg-gradient-to-r from-blue-50 to-purple-50 p-3 rounded-lg">
+                            <p class="text-sm text-gray-700">
+                                Specializing in Operation Theatre Technology and Anesthesia with parallel tech skill development.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Technical Skills -->
+    <section class="py-20 px-4 relative">
+        <div class="max-w-6xl mx-auto">
+            <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 text-gray-800">
+                My <span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-purple-600">Technical</span> Skills
+            </h2>
+            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6">
+                <!-- Linux -->
+                <div class="skill-bubble bg-white p-6 rounded-xl shadow-md text-center fade-in">
+                    <div class="bg-gradient-to-r from-orange-100 to-red-100 p-3 rounded-full inline-block mb-3">
+                        <i class="fab fa-linux text-orange-500 text-3xl"></i>
+                    </div>
+                    <h3 class="font-bold text-gray-800">Linux Terminal</h3>
+                    <p class="text-sm text-gray-500">Proficiency</p>
+                </div>
+                                <div class="skill-bubble bg-white p-6 rounded-xl shadow-md text-center fade-in" style="transition-delay: 0.1s">
+                <!-- C++ -->
+                    <div class="bg-gradient-to-r from-blue-100 to-indigo-100 p-3 rounded-full inline-block mb-3">
+                        <i class="fas fa-code text-blue-500 text-3xl"></i>
+                    </div>
+                    <h3 class="font-bold text-gray-800">C++</h3>
+                    <p class="text-sm text-gray-500">Basics</p>
+                </div>
+                <!-- JavaScript -->
+                <div class="skill-bubble bg-white p-6 rounded-xl shadow-md text-center fade-in" style="transition-delay: 0.2s">
+                    <div class="bg-gradient-to-r from-yellow-100 to-amber-100 p-3 rounded-full inline-block mb-3">
+                        <i class="fab fa-js-square text-yellow-500 text-3xl"></i>
+                    </div>
+                    <h3 class="font-bold text-gray-800">JavaScript</h3>
+                    <p class="text-sm text-gray-500">Fundamentals</p>
+                </div>
+                <!-- HTML/CSS -->
+                <div class="skill-bubble bg-white p-6 rounded-xl shadow-md text-center fade-in" style="transition-delay: 0.3s">
+                    <div class="bg-gradient-to-r from-pink-100 to-red-100 p-3 rounded-full inline-block mb-3">
+                        <i class="fab fa-html5 text-red-500 text-3xl"></i>
+                    </div>
+                    <h3 class="font-bold text-gray-800">HTML/CSS</h3>
+                    <p class="text-sm text-gray-500">Strong</p>
+                </div>
+                <!-- Git -->
+                <div class="skill-bubble bg-white p-6 rounded-xl shadow-md text-center fade-in" style="transition-delay: 0.4s">
+                    <div class="bg-gradient-to-r from-gray-100 to-blue-gray-100 p-3 rounded-full inline-block mb-3">
+                        <i class="fab fa-git-alt text-gray-500 text-3xl"></i>
+                    </div>
+                    <h3 class="font-bold text-gray-800">Git & GitHub</h3>
+                    <p class="text-sm text-gray-500">Version Control</p>
+                </div>
+                <!-- Surgical -->
+                <div class="skill-bubble bg-white p-6 rounded-xl shadow-md text-center fade-in" style="transition-delay: 0.5s">
+                    <div class="bg-gradient-to-r from-green-100 to-teal-100 p-3 rounded-full inline-block mb-3">
+                        <i class="fas fa-syringe text-green-500 text-3xl"></i>
+                    </div>
+                    <h3 class="font-bold text-gray-800">Surgical Instruments</h3>
+                    <p class="text-sm text-gray-500">Knowledge</p>
+                </div>
+                <!-- Robotic -->
+                <div class="skill-bubble bg-white p-6 rounded-xl shadow-md text-center fade-in" style="transition-delay: 0.6s">
+                    <div class="bg-gradient-to-r from-purple-100 to-indigo-100 p-3 rounded-full inline-block mb-3">
+                        <i class="fas fa-robot text-purple-500 text-3xl"></i>
+                    </div>
+                    <h3 class="font-bold text-gray-800">Robotic Tech</h3>
+                    <p class="text-sm text-gray-500">Interest</p>
+                </div>
+                <!-- Web Design -->
+                <div class="skill-bubble bg-white p-6 rounded-xl shadow-md text-center fade-in" style="transition-delay: 0.7s">
+                    <div class="bg-gradient-to-r from-blue-100 to-cyan-100 p-3 rounded-full inline-block mb-3">
+                        <i class="fas fa-paint-brush text-cyan-500 text-3xl"></i>
+                    </div>
+                    <h3 class="font-bold text-gray-800">Web Design</h3>
+                    <p class="text-sm text-gray-500">Creative</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Research & Blog -->
+    <section class="py-20 px-4 relative bg-gray-50">
+        <div class="max-w-6xl mx-auto">
+            <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 text-gray-800">
+                Research, <span class="bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-blue-500">Documents</span> & Blog
+            </h2>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <!-- Research Papers -->
+                <div class="bg-white rounded-2xl shadow-xl overflow-hidden card-hover fade-in">
+                    <div class="bg-gradient-to-r from-purple-500 to-blue-500 p-6 text-white">
+                        <i class="fas fa-file-alt text-4xl mb-4"></i>
+                        <h3 class="text-xl font-bold">Research Papers</h3>
+                    </div>
+                    <div class="p-6">
+                        <p class="text-gray-600 mb-4">
+                            Explore my research on medical technology advancements and surgical innovations.
+                        </p>
+                        <div class="space-y-3">
+                            <a href="#" class="block p-3 bg-gray-100 rounded-lg hover:bg-gray-200 transition">
+                                <p class="font-medium">Robotic-Assisted Surgery: A Review</p>
+                                <p class="text-sm text-gray-500">2023</p>
+                            </a>
+                            <a href="#" class="block p-3 bg-gray-100 rounded-lg hover:bg-gray-200 transition">
+                                <p class="font-medium">AI in Anesthesia Monitoring</p>
+                                <p class="text-sm text-gray-500">2022</p>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+                <!-- Documents -->
+                <div class="bg-white rounded-2xl shadow-xl overflow-hidden card-hover fade-in" style="transition-delay: 0.2s">
+                    <div class="bg-gradient-to-r from-blue-500 to-cyan-500 p-6 text-white">
+                        <i class="fas fa-folder-open text-4xl mb-4"></i>
+                        <h3 class="text-xl font-bold">Documents</h3>
+                    </div>
+                    <div class="p-6">
+                        <p class="text-gray-600 mb-4">
+                            My professional documents including resume, certificates, and academic records.
+                        </p>
+                        <div class="space-y-3">
+                            <a href="#" class="block p-3 bg-gray-100 rounded-lg hover:bg-gray-200 transition">
+                                <p class="font-medium">Resume (2023)</p>
+                                <p class="text-sm text-gray-500">PDF, 2MB</p>
+                            </a>
+                            <a href="#" class="block p-3 bg-gray-100 rounded-lg hover:bg-gray-200 transition">
+                                <p class="font-medium">AOTT Certification</p>
+                                <p class="text-sm text-gray-500">PDF, 1.5MB</p>
+                            </a>
+                            <a href="#" class="block p-3 bg-gray-100 rounded-lg hover:bg-gray-200 transition">
+                                <p class="font-medium">Academic Transcripts</p>
+                                <p class="text-sm text-gray-500">PDF, 3MB</p>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+                <!-- Blog -->
+                <div class="bg-white rounded-2xl shadow-xl overflow-hidden card-hover fade-in" style="transition-delay: 0.4s">
+                    <div class="bg-gradient-to-r from-pink-500 to-rose-500 p-6 text-white">
+                        <i class="fas fa-blog text-4xl mb-4"></i>
+                        <h3 class="text-xl font-bold">Blog</h3>
+                    </div>
+                    <div class="p-6">
+                        <p class="text-gray-600 mb-4">
+                            Thoughts on tech in surgery, tools I use, and experiences as a med-tech student.
+                        </p>
+                        <div class="space-y-3">
+                            <a href="#" class="block p-3 bg-gray-100 rounded-lg hover:bg-gray-200 transition">
+                                <p class="font-medium">How Coding Helps Me Understand Surgical Tech</p>
+                                <p class="text-sm text-gray-500">May 2023</p>
+                            </a>
+                            <a href="#" class="block p-3 bg-gray-100 rounded-lg hover:bg-gray-200 transition">
+                                <p class="font-medium">Essential Linux Commands for Med-Tech Students</p>
+                                <p class="text-sm text-gray-500">March 2023</p>
+                            </a>
+                            <a href="#" class="block p-3 bg-gray-100 rounded-lg hover:bg-gray-200 transition">
+                                <p class="font-medium">A Day in the Life: OT Student + Tech Enthusiast</p>
+                                <p class="text-sm text-gray-500">January 2023</p>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Webinars & Videos -->
+    <section class="py-20 px-4 relative">
+        <div class="max-w-6xl mx-auto">
+            <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 text-gray-800">
+                Webinars & <span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-purple-600">Videos</span>
+            </h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <!-- Video 1 -->
+                <div class="video-thumbnail rounded-xl overflow-hidden relative fade-in">
+                    <img src="https://images.unsplash.com/photo-1579684385127-1ef15d508118?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
+                         alt="Webinar thumbnail"
+                         class="w-full h-48 object-cover">
+                    <div class="absolute inset-0 flex items-center justify-center">
+                        <div class="play-icon bg-white bg-opacity-80 p-4 rounded-full text-blue-500">
+                            <i class="fas fa-play text-xl"></i>
+                        </div>
+                    </div>
+                    <div class="bg-white p-4">
+                        <h3 class="font-bold text-gray-800">Med-Tech Innovations 2023</h3>
+                        <p class="text-sm text-gray-500">Hosted webinar on emerging technologies</p>
+                    </div>
+                </div>
+                <!-- Video 2 -->
+                <div class="video-thumbnail rounded-xl overflow-hidden relative fade-in" style="transition-delay: 0.2s">
+                    <img src="https://images.unsplash.com/photo-1581094794329-c8112a89af12?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
+                         alt="Webinar thumbnail"
+                         class="w-full h-48 object-cover">
+                    <div class="absolute inset-0 flex items-center justify-center">
+                        <div class="play-icon bg-white bg-opacity-80 p-4 rounded-full text-blue-500">
+                            <i class="fas fa-play text-xl"></i>
+                        </div>
+                    </div>
+                    <div class="bg-white p-4">
+                        <h3 class="font-bold text-gray-800">Surgical Robotics Demo</h3>
+                        <p class="text-sm text-gray-500">Hands-on demonstration of robotic tools</p>
+                    </div>
+                </div>
+                <!-- Video 3 -->
+                <div class="video-thumbnail rounded-xl overflow-hidden relative fade-in" style="transition-delay: 0.4s">
+                    <img src="https://images.unsplash.com/photo-1530026186672-2cd00ffc50fe?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
+                         alt="Webinar thumbnail"
+                         class="w-full h-48 object-cover">
+                    <div class="absolute inset-0 flex items-center justify-center">
+                        <div class="play-icon bg-white bg-opacity-80 p-4 rounded-full text-blue-500">
+                            <i class="fas fa-play text-xl"></i>
+                        </div>
+                    </div>
+                    <div class="bg-white p-4">
+                        <h3 class="font-bold text-gray-800">Coding for Med Students</h3>
+                        <p class="text-sm text-gray-500">Why every med student should learn to code</p>
+                    </div>
+                </div>
+            </div>
+            <div class="text-center mt-12 fade-in" style="transition-delay: 0.6s">
+                <a href="#" class="inline-block px-6 py-3 bg-gradient-to-r from-purple-500 to-blue-500 text-white rounded-full font-medium hover:shadow-lg transition-all">
+                    View All Videos <i class="fas fa-arrow-right ml-2"></i>
+                </a>
+            </div>
+        </div>
+    </section>
+    <!-- Contact & Social -->
+    <section class="py-20 px-4 relative bg-gradient-to-br from-purple-50 to-blue-50">
+        <div class="max-w-6xl mx-auto">
+            <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 text-gray-800">
+                Let's <span class="bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-blue-500">Connect</span>
+            </h2>
+            <div class="flex flex-col md:flex-row items-center justify-center gap-12">
+                <!-- Big Social Blob -->
+                <div class="relative w-64 h-64 rounded-full bg-gradient-to-r from-purple-100 to-blue-100 shadow-xl flex items-center justify-center social-blob">
+                    <div class="w-40 h-40 rounded-full bg-white flex items-center justify-center shadow-inner">
+                        <i class="fab fa-github text-5xl text-gray-800"></i>
+                    </div>
+                    <div class="absolute -bottom-4 -right-4 bg-white p-3 rounded-full shadow-lg">
+                        <i class="fas fa-plus text-purple-500"></i>
+                    </div>
+                </div>
+                <!-- Contact Form -->
+                <div class="max-w-md w-full bg-white p-8 rounded-2xl shadow-lg fade-in">
+                    <h3 class="text-2xl font-bold text-center mb-6 text-gray-800">
+                        Wanna collaborate or just say hi?
+                    </h3>
+                    <form class="space-y-4">
+                        <div>
+                            <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Your Name</label>
+                            <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
+                        </div>
+                        <div>
+                            <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
+                            <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
+                        </div>
+                        <div>
+                            <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Message</label>
+                            <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500"></textarea>
+                        </div>
+                        <button type="submit" class="w-full py-3 bg-gradient-to-r from-purple-500 to-blue-500 text-white rounded-lg font-medium hover:shadow-lg transition-all">
+                            Send Message <i class="fas fa-paper-plane ml-2"></i>
+                        </button>
+                    </form>
+                </div>
+                <!-- Small Social Blobs -->
+                <div class="flex flex-col gap-8">
+                    <div class="w-24 h-24 rounded-full bg-gradient-to-r from-blue-100 to-cyan-100 shadow-xl flex items-center justify-center social-blob">
+                        <a href="#" class="text-3xl text-blue-600">
+                            <i class="fab fa-linkedin-in"></i>
+                        </a>
+                    </div>
+                    <div class="w-24 h-24 rounded-full bg-gradient-to-r from-pink-100 to-rose-100 shadow-xl flex items-center justify-center social-blob">
+                        <a href="#" class="text-3xl text-rose-500">
+                            <i class="fas fa-envelope"></i>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="py-8 px-4 bg-gray-800 text-white">
+        <div class="max-w-6xl mx-auto text-center">
+            <p class="mb-2">© 2023 Ayush Raj. All rights reserved.</p>
+            <p class="text-gray-400 text-sm">Bridging technology and medicine for a better healthcare future.</p>
+        </div>
+    </footer>
+    <script>
+        // Scroll animation
+        document.addEventListener('DOMContentLoaded', function() {
+            const fadeElements = document.querySelectorAll('.fade-in');
+            const fadeObserver = new IntersectionObserver((entries) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        entry.target.classList.add('visible');
+                    }
+                });
+            }, {
+                threshold: 0.1
+            });
+            fadeElements.forEach(el => {
+                fadeObserver.observe(el);
+            });
+            // Blob animation
+            const blobs = document.querySelectorAll('.blob');
+            blobs.forEach((blob, index) => {
+                blob.style.animationDelay = `${index * 2}s`;
+            });
+            // Waving hand on hover
+            const wave = document.querySelector('.wave');
+            wave.addEventListener('mouseover', () => {
+                wave.style.animation = 'none';
+                wave.offsetHeight; // trigger reflow
+                wave.style.animation = 'wave 2s infinite';
+            });
+        });
+    </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=fluxKawaii/portfolio" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

File without changes