Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Quantum Scholar | Academic Portfolio</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/controls/OrbitControls.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/loaders/GLTFLoader.js"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --primary-glow: rgba(0, 195, 255, 0.7); | |
| --secondary-glow: rgba(121, 80, 242, 0.6); | |
| --bg-dark: #0a0a1a; | |
| --bg-light: #f0f8ff; | |
| } | |
| body { | |
| font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; | |
| background-color: var(--bg-dark); | |
| color: #e0e0e0; | |
| overflow-x: hidden; | |
| transition: all 0.5s ease; | |
| } | |
| .theme-neon { | |
| --primary-glow: rgba(0, 255, 179, 0.7); | |
| --secondary-glow: rgba(255, 0, 221, 0.6); | |
| --bg-dark: #050510; | |
| } | |
| .theme-cyberpunk { | |
| --primary-glow: rgba(255, 0, 98, 0.7); | |
| --secondary-glow: rgba(255, 187, 0, 0.6); | |
| --bg-dark: #0f0a1a; | |
| } | |
| .theme-minimal-tech { | |
| --primary-glow: rgba(0, 157, 255, 0.7); | |
| --secondary-glow: rgba(0, 255, 255, 0.3); | |
| --bg-dark: #0a1420; | |
| } | |
| .theme-dark-matter { | |
| --primary-glow: rgba(140, 0, 255, 0.7); | |
| --secondary-glow: rgba(255, 0, 191, 0.3); | |
| --bg-dark: #050510; | |
| } | |
| .glow-text { | |
| text-shadow: 0 0 8px var(--primary-glow); | |
| } | |
| .glow-box { | |
| box-shadow: 0 0 15px var(--primary-glow); | |
| } | |
| .gradient-border { | |
| position: relative; | |
| border-radius: 0.5rem; | |
| } | |
| .gradient-border::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| border-radius: 0.5rem; | |
| padding: 2px; | |
| background: linear-gradient(45deg, var(--primary-glow), var(--secondary-glow)); | |
| -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); | |
| -webkit-mask-composite: xor; | |
| mask-composite: exclude; | |
| pointer-events: none; | |
| } | |
| .holographic-card { | |
| backdrop-filter: blur(16px) saturate(180%); | |
| -webkit-backdrop-filter: blur(16px) saturate(180%); | |
| background-color: rgba(17, 25, 40, 0.5); | |
| border: 1px solid rgba(255, 255, 255, 0.125); | |
| } | |
| .holographic-panel { | |
| backdrop-filter: blur(16px) saturate(180%); | |
| -webkit-backdrop-filter: blur(16px) saturate(180%); | |
| background-color: rgba(17, 25, 40, 0.75); | |
| border: 1px solid rgba(255, 255, 255, 0.125); | |
| } | |
| .grid-pattern { | |
| background-image: | |
| linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px); | |
| background-size: 40px 40px; | |
| } | |
| .section-title { | |
| position: relative; | |
| display: inline-block; | |
| } | |
| .section-title::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -8px; | |
| left: 0; | |
| width: 100%; | |
| height: 2px; | |
| background: linear-gradient(90deg, var(--primary-glow), transparent); | |
| } | |
| .nav-link { | |
| position: relative; | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -2px; | |
| left: 0; | |
| width: 0; | |
| height: 2px; | |
| background: var(--primary-glow); | |
| transition: width 0.3s ease; | |
| } | |
| .nav-link:hover::after { | |
| width: 100%; | |
| } | |
| .floating { | |
| animation: floating 6s ease-in-out infinite; | |
| } | |
| @keyframes floating { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-15px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { box-shadow: 0 0 0 0 rgba(0, 195, 255, 0.7); } | |
| 70% { box-shadow: 0 0 0 10px rgba(0, 195, 255, 0); } | |
| 100% { box-shadow: 0 0 0 0 rgba(0, 195, 255, 0); } | |
| } | |
| #canvas-container { | |
| position: relative; | |
| width: 100%; | |
| height: 100%; | |
| min-height: 400px; | |
| } | |
| .model-controls { | |
| position: absolute; | |
| bottom: 20px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| z-index: 10; | |
| } | |
| .theme-selector { | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .theme-selector:hover { | |
| transform: scale(1.1); | |
| filter: brightness(1.2); | |
| } | |
| @media (max-width: 768px) { | |
| .holographic-card { | |
| backdrop-filter: blur(8px) saturate(180%); | |
| -webkit-backdrop-filter: blur(8px) saturate(180%); | |
| } | |
| #canvas-container { | |
| min-height: 300px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="grid-pattern"> | |
| <!-- Theme Selector Floating Button --> | |
| <div class="fixed bottom-8 right-8 z-50 flex flex-col space-y-4"> | |
| <div class="theme-selector w-12 h-12 rounded-full bg-gradient-to-br from-blue-400 to-cyan-500 shadow-lg glow-box" onclick="changeTheme('default')" title="Default Theme"></div> | |
| <div class="theme-selector w-12 h-12 rounded-full bg-gradient-to-br from-green-400 to-pink-500 shadow-lg" onclick="changeTheme('neon')" title="Neon Grid"></div> | |
| <div class="theme-selector w-12 h-12 rounded-full bg-gradient-to-br from-red-400 to-yellow-400 shadow-lg" onclick="changeTheme('cyberpunk')" title="Cyberpunk"></div> | |
| <div class="theme-selector w-12 h-12 rounded-full bg-gradient-to-br from-blue-500 to-teal-400 shadow-lg" onclick="changeTheme('minimal-tech')" title="Minimal Tech"></div> | |
| <div class="theme-selector w-12 h-12 rounded-full bg-gradient-to-br from-purple-600 to-pink-500 shadow-lg" onclick="changeTheme('dark-matter')" title="Dark Matter"></div> | |
| </div> | |
| <!-- Navigation --> | |
| <nav class="fixed top-0 left-0 right-0 z-40 holographic-panel py-4 px-6"> | |
| <div class="container mx-auto flex justify-between items-center"> | |
| <div class="text-2xl font-bold glow-text"> | |
| <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-cyan-400">QUANTUM</span> SCHOLAR | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#home" class="nav-link text-white hover:text-cyan-300">Home</a> | |
| <a href="#bio" class="nav-link text-white hover:text-cyan-300">Bio</a> | |
| <a href="#research" class="nav-link text-white hover:text-cyan-300">Research</a> | |
| <a href="#projects" class="nav-link text-white hover:text-cyan-300">Projects</a> | |
| <a href="#contact" class="nav-link text-white hover:text-cyan-300">Contact</a> | |
| </div> | |
| <button class="md:hidden text-white focus:outline-none"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section id="home" class="min-h-screen flex items-center justify-center relative overflow-hidden pt-20"> | |
| <div class="absolute inset-0 z-0 opacity-20"> | |
| <div id="particles-js" class="w-full h-full"></div> | |
| </div> | |
| <div class="container mx-auto px-6 py-20 z-10 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-12 md:mb-0"> | |
| <h1 class="text-5xl md:text-6xl font-bold mb-6 glow-text"> | |
| <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-cyan-400">Dr. Alex</span> Quantum | |
| </h1> | |
| <h2 class="text-2xl md:text-3xl font-light mb-8 text-cyan-300">Quantum Computing Researcher & AI Specialist</h2> | |
| <p class="text-lg mb-8 text-gray-300 max-w-lg"> | |
| Pioneering the intersection of quantum algorithms and artificial intelligence to solve complex problems in molecular simulation and optimization. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <a href="#research" class="px-8 py-3 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-full text-white font-medium hover:opacity-90 transition-all transform hover:scale-105 shadow-lg glow-box"> | |
| Explore Research | |
| </a> | |
| <a href="#contact" class="px-8 py-3 border border-cyan-400 rounded-full text-cyan-300 font-medium hover:bg-cyan-900 hover:bg-opacity-30 transition-all transform hover:scale-105"> | |
| Contact Me | |
| </a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div id="canvas-container" class="w-full h-96 md:h-[500px] rounded-xl overflow-hidden gradient-border"> | |
| <!-- 3D Model will be rendered here --> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Bio Section --> | |
| <section id="bio" class="py-20 relative"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-16 text-white section-title"> | |
| <span class="glow-text">Academic</span> Profile | |
| </h2> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <div class="holographic-card rounded-xl p-8 gradient-border"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-16 h-16 rounded-full bg-gradient-to-r from-blue-500 to-cyan-500 flex items-center justify-center mr-4"> | |
| <i class="fas fa-user-graduate text-2xl text-white"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-white">Education</h3> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="pl-2 border-l-2 border-cyan-400"> | |
| <h4 class="text-lg font-semibold text-cyan-300">PhD in Quantum Computing</h4> | |
| <p class="text-gray-300">MIT Quantum Lab • 2018-2022</p> | |
| <p class="text-gray-400 mt-1">Thesis: "Quantum Neural Networks for Molecular Property Prediction"</p> | |
| </div> | |
| <div class="pl-2 border-l-2 border-cyan-400"> | |
| <h4 class="text-lg font-semibold text-cyan-300">MSc in Artificial Intelligence</h4> | |
| <p class="text-gray-300">Stanford University • 2016-2018</p> | |
| </div> | |
| <div class="pl-2 border-l-2 border-cyan-400"> | |
| <h4 class="text-lg font-semibold text-cyan-300">BSc in Computer Science</h4> | |
| <p class="text-gray-300">ETH Zurich • 2012-2016</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="holographic-card rounded-xl p-8 gradient-border"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-16 h-16 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center mr-4"> | |
| <i class="fas fa-flask text-2xl text-white"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-white">Experience</h3> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="pl-2 border-l-2 border-pink-400"> | |
| <h4 class="text-lg font-semibold text-pink-300">Senior Researcher</h4> | |
| <p class="text-gray-300">Google Quantum AI • 2022-Present</p> | |
| <p class="text-gray-400 mt-1">Leading research on quantum machine learning applications</p> | |
| </div> | |
| <div class="pl-2 border-l-2 border-pink-400"> | |
| <h4 class="text-lg font-semibold text-pink-300">Research Scientist</h4> | |
| <p class="text-gray-300">IBM Research • 2020-2022</p> | |
| </div> | |
| <div class="pl-2 border-l-2 border-pink-400"> | |
| <h4 class="text-lg font-semibold text-pink-300">AI Engineer</h4> | |
| <p class="text-gray-300">DeepMind • 2018-2020</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="holographic-card rounded-xl p-8 gradient-border"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-16 h-16 rounded-full bg-gradient-to-r from-green-500 to-teal-500 flex items-center justify-center mr-4"> | |
| <i class="fas fa-trophy text-2xl text-white"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-white">Achievements</h3> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="pl-2 border-l-2 border-teal-400"> | |
| <h4 class="text-lg font-semibold text-teal-300">Breakthrough Prize</h4> | |
| <p class="text-gray-300">2023 • Quantum Computing</p> | |
| <p class="text-gray-400 mt-1">For pioneering work in quantum algorithm optimization</p> | |
| </div> | |
| <div class="pl-2 border-l-2 border-teal-400"> | |
| <h4 class="text-lg font-semibold text-teal-300">MIT Innovator Award</h4> | |
| <p class="text-gray-300">2021 • Technology</p> | |
| </div> | |
| <div class="pl-2 border-l-2 border-teal-400"> | |
| <h4 class="text-lg font-semibold text-teal-300">Forbes 30 Under 30</h4> | |
| <p class="text-gray-300">2020 • Science</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Research Section --> | |
| <section id="research" class="py-20 relative"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-16 text-white section-title"> | |
| <span class="glow-text">Research</span> Focus | |
| </h2> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-16"> | |
| <div class="holographic-card rounded-xl p-8 gradient-border"> | |
| <div class="flex items-start mb-6"> | |
| <div class="w-14 h-14 rounded-lg bg-gradient-to-r from-blue-500 to-cyan-500 flex items-center justify-center mr-4"> | |
| <i class="fas fa-atom text-xl text-white"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-2xl font-bold text-white mb-2">Quantum Machine Learning</h3> | |
| <p class="text-gray-400">Developing novel algorithms that leverage quantum properties for enhanced machine learning capabilities</p> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <h4 class="text-lg font-semibold text-cyan-300 mb-3">Key Publications</h4> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <span class="text-cyan-400 mr-2">•</span> | |
| <span class="text-gray-300">"Quantum-enhanced neural networks", Nature Quantum Information (2023)</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="text-cyan-400 mr-2">•</span> | |
| <span class="text-gray-300">"Hybrid quantum-classical architectures for drug discovery", Science Advances (2022)</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="text-cyan-400 mr-2">•</span> | |
| <span class="text-gray-300">"Error mitigation in quantum neural networks", Physical Review X (2021)</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="holographic-card rounded-xl p-8 gradient-border"> | |
| <div class="flex items-start mb-6"> | |
| <div class="w-14 h-14 rounded-lg bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center mr-4"> | |
| <i class="fas fa-dna text-xl text-white"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-2xl font-bold text-white mb-2">Molecular Simulation</h3> | |
| <p class="text-gray-400">Applying quantum computing to simulate molecular structures and chemical reactions</p> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <h4 class="text-lg font-semibold text-pink-300 mb-3">Current Projects</h4> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <span class="text-pink-400 mr-2">•</span> | |
| <span class="text-gray-300">Quantum simulation of protein folding (Google Quantum AI)</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="text-pink-400 mr-2">•</span> | |
| <span class="text-gray-300">Drug discovery using hybrid quantum-classical models (NIH Collaboration)</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="text-pink-400 mr-2">•</span> | |
| <span class="text-gray-300">Materials design for quantum processors (NSF Grant)</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="holographic-card rounded-xl p-8 gradient-border mt-12"> | |
| <h3 class="text-2xl font-bold text-white mb-6">Research Visualization</h3> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <div class="group relative rounded-lg overflow-hidden h-48"> | |
| <div class="absolute inset-0 bg-gradient-to-br from-blue-500 to-cyan-600 opacity-70 group-hover:opacity-90 transition-all duration-300"></div> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <i class="fas fa-project-diagram text-5xl text-white opacity-80 group-hover:opacity-100 transition-all duration-300"></i> | |
| </div> | |
| <div class="absolute bottom-0 left-0 right-0 p-4 bg-black bg-opacity-50"> | |
| <h4 class="text-white font-semibold">Quantum Circuit Design</h4> | |
| <p class="text-gray-300 text-sm">Interactive 3D model</p> | |
| </div> | |
| </div> | |
| <div class="group relative rounded-lg overflow-hidden h-48"> | |
| <div class="absolute inset-0 bg-gradient-to-br from-purple-500 to-pink-600 opacity-70 group-hover:opacity-90 transition-all duration-300"></div> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <i class="fas fa-brain text-5xl text-white opacity-80 group-hover:opacity-100 transition-all duration-300"></i> | |
| </div> | |
| <div class="absolute bottom-0 left-0 right-0 p-4 bg-black bg-opacity-50"> | |
| <h4 class="text-white font-semibold">Neural Network Architecture</h4> | |
| <p class="text-gray-300 text-sm">Holographic visualization</p> | |
| </div> | |
| </div> | |
| <div class="group relative rounded-lg overflow-hidden h-48"> | |
| <div class="absolute inset-0 bg-gradient-to-br from-green-500 to-teal-600 opacity-70 group-hover:opacity-90 transition-all duration-300"></div> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <i class="fas fa-vial text-5xl text-white opacity-80 group-hover:opacity-100 transition-all duration-300"></i> | |
| </div> | |
| <div class="absolute bottom-0 left-0 right-0 p-4 bg-black bg-opacity-50"> | |
| <h4 class="text-white font-semibold">Molecular Structure</h4> | |
| <p class="text-gray-300 text-sm">3D protein folding</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Projects Section --> | |
| <section id="projects" class="py-20 relative"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-16 text-white section-title"> | |
| <span class="glow-text">Featured</span> Projects | |
| </h2> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> | |
| <div class="holographic-card rounded-xl p-8 gradient-border group hover:shadow-lg transition-all duration-300"> | |
| <div class="flex items-start mb-6"> | |
| <div class="w-14 h-14 rounded-lg bg-gradient-to-r from-blue-500 to-cyan-500 flex items-center justify-center mr-4 group-hover:rotate-12 transition-transform duration-300"> | |
| <i class="fas fa-quantum-computer text-xl text-white"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-2xl font-bold text-white mb-2">QML Framework</h3> | |
| <div class="flex flex-wrap gap-2 mb-3"> | |
| <span class="px-3 py-1 bg-cyan-900 bg-opacity-40 text-cyan-300 rounded-full text-xs">Quantum</span> | |
| <span class="px-3 py-1 bg-blue-900 bg-opacity-40 text-blue-300 rounded-full text-xs">Python</span> | |
| <span class="px-3 py-1 bg-purple-900 bg-opacity-40 text-purple-300 rounded-full text-xs">TensorFlow</span> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-400 mb-6"> | |
| An open-source framework for developing quantum machine learning models with seamless integration with classical ML libraries. | |
| </p> | |
| <div class="flex justify-between items-center"> | |
| <a href="#" class="text-cyan-400 hover:text-cyan-300 flex items-center"> | |
| <i class="fas fa-external-link-alt mr-2"></i> View Project | |
| </a> | |
| <div class="flex space-x-2"> | |
| <a href="#" class="w-8 h-8 rounded-full bg-gray-800 hover:bg-gray-700 flex items-center justify-center text-gray-300 hover:text-white"> | |
| <i class="fab fa-github"></i> | |
| </a> | |
| <a href="#" class="w-8 h-8 rounded-full bg-gray-800 hover:bg-gray-700 flex items-center justify-center text-gray-300 hover:text-white"> | |
| <i class="fas fa-file-pdf"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="holographic-card rounded-xl p-8 gradient-border group hover:shadow-lg transition-all duration-300"> | |
| <div class="flex items-start mb-6"> | |
| <div class="w-14 h-14 rounded-lg bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center mr-4 group-hover:rotate-12 transition-transform duration-300"> | |
| <i class="fas fa-pills text-xl text-white"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-2xl font-bold text-white mb-2">QuantumDrug</h3> | |
| <div class="flex flex-wrap gap-2 mb-3"> | |
| <span class="px-3 py-1 bg-pink-900 bg-opacity-40 text-pink-300 rounded-full text-xs">Chemistry</span> | |
| <span class="px-3 py-1 bg-indigo-900 bg-opacity-40 text-indigo-300 rounded-full text-xs">Q#</span> | |
| <span class="px-3 py-1 bg-red-900 bg-opacity-40 text-red-300 rounded-full text-xs">Azure Quantum</span> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-400 mb-6"> | |
| A platform for accelerated drug discovery using quantum computing to simulate molecular interactions and predict drug efficacy. | |
| </p> | |
| <div class="flex justify-between items-center"> | |
| <a href="#" class="text-pink-400 hover:text-pink-300 flex items-center"> | |
| <i class="fas fa-external-link-alt mr-2"></i> View Project | |
| </a> | |
| <div class="flex space-x-2"> | |
| <a href="#" class="w-8 h-8 rounded-full bg-gray-800 hover:bg-gray-700 flex items-center justify-center text-gray-300 hover:text-white"> | |
| <i class="fab fa-github"></i> | |
| </a> | |
| <a href="#" class="w-8 h-8 rounded-full bg-gray-800 hover:bg-gray-700 flex items-center justify-center text-gray-300 hover:text-white"> | |
| <i class="fas fa-video"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="holographic-card rounded-xl p-8 gradient-border group hover:shadow-lg transition-all duration-300"> | |
| <div class="flex items-start mb-6"> | |
| <div class="w-14 h-14 rounded-lg bg-gradient-to-r from-green-500 to-teal-500 flex items-center justify-center mr-4 group-hover:rotate-12 transition-transform duration-300"> | |
| <i class="fas fa-network-wired text-xl text-white"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-2xl font-bold text-white mb-2">QuantumNet</h3> | |
| <div class="flex flex-wrap gap-2 mb-3"> | |
| <span class="px-3 py-1 bg-teal-900 bg-opacity-40 text-teal-300 rounded-full text-xs">Networking</span> | |
| <span class="px-3 py-1 bg-green-900 bg-opacity-40 text-green-300 rounded-full text-xs">C++</span> | |
| <span class="px-3 py-1 bg-yellow-900 bg-opacity-40 text-yellow-300 rounded-full text-xs">QKD</span> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-400 mb-6"> | |
| A quantum key distribution network implementation for ultra-secure communication protocols resistant to quantum attacks. | |
| </p> | |
| <div class="flex justify-between items-center"> | |
| <a href="#" class="text-teal-400 hover:text-teal-300 flex items-center"> | |
| <i class="fas fa-external-link-alt mr-2"></i> View Project | |
| </a> | |
| <div class="flex space-x-2"> | |
| <a href="#" class="w-8 h-8 rounded-full bg-gray-800 hover:bg-gray-700 flex items-center justify-center text-gray-300 hover:text-white"> | |
| <i class="fab fa-github"></i> | |
| </a> | |
| <a href="#" class="w-8 h-8 rounded-full bg-gray-800 hover:bg-gray-700 flex items-center justify-center text-gray-300 hover:text-white"> | |
| <i class="fas fa-link"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="holographic-card rounded-xl p-8 gradient-border group hover:shadow-lg transition-all duration-300"> | |
| <div class="flex items-start mb-6"> | |
| <div class="w-14 h-14 rounded-lg bg-gradient-to-r from-yellow-500 to-orange-500 flex items-center justify-center mr-4 group-hover:rotate-12 transition-transform duration-300"> | |
| <i class="fas fa-robot text-xl text-white"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-2xl font-bold text-white mb-2">NeuroQuantum</h3> | |
| <div class="flex flex-wrap gap-2 mb-3"> | |
| <span class="px-3 py-1 bg-orange-900 bg-opacity-40 text-orange-300 rounded-full text-xs">AI</span> | |
| <span class="px-3 py-1 bg-amber-900 bg-opacity-40 text-amber-300 rounded-full text-xs">PyTorch</span> | |
| <span class="px-3 py-1 bg-rose-900 bg-opacity-40 text-rose-300 rounded-full text-xs">Hybrid</span> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-400 mb-6"> | |
| A hybrid quantum-classical neural network architecture for solving complex optimization problems in robotics and automation. | |
| </p> | |
| <div class="flex justify-between items-center"> | |
| <a href="#" class="text-orange-400 hover:text-orange-300 flex items-center"> | |
| <i class="fas fa-external-link-alt mr-2"></i> View Project | |
| </a> | |
| <div class="flex space-x-2"> | |
| <a href="#" class="w-8 h-8 rounded-full bg-gray-800 hover:bg-gray-700 flex items-center justify-center text-gray-300 hover:text-white"> | |
| <i class="fab fa-github"></i> | |
| </a> | |
| <a href="#" class="w-8 h-8 rounded-full bg-gray-800 hover:bg-gray-700 flex items-center justify-center text-gray-300 hover:text-white"> | |
| <i class="fas fa-laptop-code"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 text-center"> | |
| <a href="#" class="inline-flex items-center px-6 py-3 border border-cyan-400 rounded-full text-cyan-300 font-medium hover:bg-cyan-900 hover:bg-opacity-30 transition-all transform hover:scale-105"> | |
| <i class="fas fa-archive mr-2"></i> View All Projects | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 relative"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-16 text-white section-title"> | |
| <span class="glow-text">Get</span> In Touch | |
| </h2> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-12"> | |
| <div class="holographic-card rounded-xl p-8 gradient-border"> | |
| <h3 class="text-2xl font-bold text-white mb-6">Contact Form</h3> | |
| <form class="space-y-6"> | |
| <div> | |
| <label for="name" class="block text-sm font-medium text-gray-300 mb-1">Full Name</label> | |
| <input type="text" id="name" class="w-full px-4 py-3 bg-gray-800 bg-opacity-50 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-transparent text-white placeholder-gray-500 transition-all" placeholder="Enter your name"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-gray-300 mb-1">Email Address</label> | |
| <input type="email" id="email" class="w-full px-4 py-3 bg-gray-800 bg-opacity-50 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-transparent text-white placeholder-gray-500 transition-all" placeholder="your.email@example.com"> | |
| </div> | |
| <div> | |
| <label for="subject" class="block text-sm font-medium text-gray-300 mb-1">Subject</label> | |
| <select id="subject" class="w-full px-4 py-3 bg-gray-800 bg-opacity-50 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-transparent text-white placeholder-gray-500 transition-all"> | |
| <option value="">Select a subject</option> | |
| <option value="collaboration">Research Collaboration</option> | |
| <option value="speaking">Speaking Engagement</option> | |
| <option value="consulting">Consulting Inquiry</option> | |
| <option value="other">Other</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="message" class="block text-sm font-medium text-gray-300 mb-1">Message</label> | |
| <textarea id="message" rows="5" class="w-full px-4 py-3 bg-gray-800 bg-opacity-50 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-transparent text-white placeholder-gray-500 transition-all" placeholder="Your message here..."></textarea> | |
| </div> | |
| <div> | |
| <button type="submit" class="w-full px-6 py-3 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-lg text-white font-medium hover:opacity-90 transition-all transform hover:scale-[1.02] shadow-lg glow-box"> | |
| Send Message | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| <div class="space-y-8"> | |
| <div class="holographic-card rounded-xl p-8 gradient-border"> | |
| <h3 class="text-2xl font-bold text-white mb-6">Contact Information</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="w-12 h-12 rounded-full bg-gradient-to-r from-blue-500 to-cyan-500 flex items-center justify-center mr-4"> | |
| <i class="fas fa-map-marker-alt text-white"></i> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold text-white">Location</h4> | |
| <p class="text-gray-400">Google Quantum AI Lab</p> | |
| <p class="text-gray-400">340 Main St, Venice, CA 90291</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-12 h-12 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center mr-4"> | |
| <i class="fas fa-envelope text-white"></i> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold text-white">Email</h4> | |
| <p class="text-gray-400">alex.quantum@research.google.com</p> | |
| <p class="text-gray-400">personal@alexquantum.org</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-12 h-12 rounded-full bg-gradient-to-r from-green-500 to-teal-500 flex items-center justify-center mr-4"> | |
| <i class="fas fa-phone-alt text-white"></i> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold text-white">Phone</h4> | |
| <p class="text-gray-400">+1 (310) 555-0192 (Office)</p> | |
| <p class="text-gray-400">+1 (310) 555-0193 (Lab)</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="holographic-card rounded-xl p-8 gradient-border"> | |
| <h3 class="text-2xl font-bold text-white mb-6">Connect With Me</h3> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> | |
| <a href="#" class="flex flex-col items-center justify-center p-4 bg-gray-800 bg-opacity-50 rounded-lg hover:bg-cyan-900 hover:bg-opacity-30 transition-all transform hover:scale-105"> | |
| <i class="fab fa-github text-3xl text-white mb-2"></i> | |
| <span class="text-sm text-gray-300">GitHub</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center justify-center p-4 bg-gray-800 bg-opacity-50 rounded-lg hover:bg-blue-900 hover:bg-opacity-30 transition-all transform hover:scale-105"> | |
| <i class="fab fa-linkedin-in text-3xl text-white mb-2"></i> | |
| <span class="text-sm text-gray-300">LinkedIn</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center justify-center p-4 bg-gray-800 bg-opacity-50 rounded-lg hover:bg-orange-900 hover:bg-opacity-30 transition-all transform hover:scale-105"> | |
| <i class="fab fa-google-scholar text-3xl text-white mb-2"></i> | |
| <span class="text-sm text-gray-300">Scholar</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center justify-center p-4 bg-gray-800 bg-opacity-50 rounded-lg hover:bg-twitter-900 hover:bg-opacity-30 transition-all transform hover:scale-105"> | |
| <i class="fab fa-twitter text-3xl text-white mb-2"></i> | |
| <span class="text-sm text-gray-300">Twitter</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center justify-center p-4 bg-gray-800 bg-opacity-50 rounded-lg hover:bg-red-900 hover:bg-opacity-30 transition-all transform hover:scale-105"> | |
| <i class="fab fa-youtube text-3xl text-white mb-2"></i> | |
| <span class="text-sm text-gray-300">YouTube</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center justify-center p-4 bg-gray-800 bg-opacity-50 rounded-lg hover:bg-indigo-900 hover:bg-opacity-30 transition-all transform hover:scale-105"> | |
| <i class="fab fa-researchgate text-3xl text-white mb-2"></i> | |
| <span class="text-sm text-gray-300">ResearchGate</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center justify-center p-4 bg-gray-800 bg-opacity-50 rounded-lg hover:bg-pink-900 hover:bg-opacity-30 transition-all transform hover:scale-105"> | |
| <i class="fab fa-medium text-3xl text-white mb-2"></i> | |
| <span class="text-sm text-gray-300">Medium</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center justify-center p-4 bg-gray-800 bg-opacity-50 rounded-lg hover:bg-gray-700 hover:bg-opacity-30 transition-all transform hover:scale-105"> | |
| <i class="fas fa-rss text-3xl text-white mb-2"></i> | |
| <span class="text-sm text-gray-300">Blog</span> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="py-12 relative border-t border-gray-800"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-6 md:mb-0"> | |
| <div class="text-2xl font-bold glow-text mb-2"> | |
| <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-cyan-400">QUANTUM</span> SCHOLAR | |
| </div> | |
| <p class="text-gray-500">Pushing the boundaries of quantum computing and artificial intelligence</p> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-cyan-400 transition-colors"> | |
| <i class="fab fa-github text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-cyan-400 transition-colors"> | |
| <i class="fab fa-linkedin-in text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-cyan-400 transition-colors"> | |
| <i class="fab fa-twitter text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-cyan-400 transition-colors"> | |
| <i class="fab fa-google-scholar text-xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="mt-12 pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-500 text-sm mb-4 md:mb-0">© 2023 Quantum Scholar. All rights reserved.</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-cyan-400 text-sm transition-colors">Privacy Policy</a> | |
| <a href="#" class="text-gray-400 hover:text-cyan-400 text-sm transition-colors">Terms of Service</a> | |
| <a href="#" class="text-gray-400 hover:text-cyan-400 text-sm transition-colors">Cookie Policy</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Theme switching | |
| function changeTheme(theme) { | |
| document.body.className = ''; | |
| if (theme !== 'default') { | |
| document.body.classList.add(`theme-${theme}`); | |
| } | |
| document.body.classList.add('grid-pattern'); | |
| // Update active theme button | |
| const themeButtons = document.querySelectorAll('.theme-selector'); | |
| themeButtons.forEach(btn => { | |
| btn.classList.remove('glow-box', 'pulse'); | |
| }); | |
| if (theme === 'default') { | |
| themeButtons[0].classList.add('glow-box', 'pulse'); | |
| } else { | |
| document.querySelector(`.theme-selector[onclick="changeTheme('${theme}')"]`).classList.add('glow-box', 'pulse'); | |
| } | |
| } | |
| // Initialize with default theme | |
| changeTheme('default'); | |
| // Smooth scrolling for navigation links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| // 3D Model Viewer with Three.js | |
| let scene, camera, renderer, model, controls; | |
| function init3DViewer() { | |
| const container = document.getElementById('canvas-container'); | |
| // Scene setup | |
| scene = new THREE.Scene(); | |
| scene.background = new THREE.Color(0x050510); | |
| scene.fog = new THREE.FogExp2(0x050510, 0.001); | |
| // Camera setup | |
| camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000); | |
| camera.position.z = 5; | |
| // Renderer setup | |
| renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); | |
| renderer.setSize(container.clientWidth, container.clientHeight); | |
| renderer.setPixelRatio(window.devicePixelRatio); | |
| renderer.shadowMap.enabled = true; | |
| container.appendChild(renderer.domElement); | |
| // Add lights | |
| const ambientLight = new THREE.AmbientLight(0x404040); | |
| scene.add(ambientLight); | |
| const directionalLight = new THREE.DirectionalLight(0x00c3ff, 1); | |
| directionalLight.position.set(1, 1, 1); | |
| directionalLight.castShadow = true; | |
| scene.add(directionalLight); | |
| const pointLight = new THREE.PointLight(0x7950f2, 2, 10); | |
| pointLight.position.set(0, 3, 2); | |
| scene.add(pointLight); | |
| // Add a simple geometry (replace with your actual model) | |
| const geometry = new THREE.TorusKnotGeometry(1, 0.4, 100, 16); | |
| const material = new THREE.MeshPhongMaterial({ | |
| color: 0x00c3ff, | |
| emissive: 0x00c3ff, | |
| emissiveIntensity: 0.2, | |
| specular: 0xffffff, | |
| shininess: 50, | |
| transparent: true, | |
| opacity: 0.9, | |
| wireframe: false | |
| }); | |
| model = new THREE.Mesh(geometry, material); | |
| scene.add(model); | |
| // Add orbit controls | |
| controls = new THREE.OrbitControls(camera, renderer.domElement); | |
| controls.enableDamping = true; | |
| controls.dampingFactor = 0.05; | |
| controls.screenSpacePanning = false; | |
| controls.maxPolarAngle = Math.PI; | |
| controls.minPolarAngle = 0; | |
| controls.enableZoom = true; | |
| // Handle window resize | |
| window.addEventListener('resize', onWindowResize); | |
| // Start animation loop | |
| animate(); | |
| } | |
| function onWindowResize() { | |
| const container = document.getElementById('canvas-container'); | |
| camera.aspect = container.clientWidth / container.clientHeight; | |
| camera.updateProjectionMatrix(); | |
| renderer.setSize(container.clientWidth, container.clientHeight); | |
| } | |
| function animate() { | |
| requestAnimationFrame(animate); | |
| if (model) { | |
| model.rotation.x += 0.005; | |
| model.rotation.y += 0.01; | |
| } | |
| controls.update(); | |
| renderer.render(scene, camera); | |
| } | |
| // Initialize when DOM is loaded | |
| document.addEventListener('DOMContentLoaded', () => { | |
| init3DViewer(); | |
| // Add floating particles in the background | |
| // This is a simplified version - consider using a proper particles.js implementation | |
| const particles = []; | |
| const particleCount = 100; | |
| const container = document.createElement('div'); | |
| container.className = 'particles'; | |
| container.style.position = 'absolute'; | |
| container.style.top = '0'; | |
| container.style.left = '0'; | |
| container.style.width = '100%'; | |
| container.style.height = '100%'; | |
| container.style.pointerEvents = 'none'; | |
| document.querySelector('#home').appendChild(container); | |
| for (let i = 0; i < particleCount; i++) { | |
| const particle = document.createElement('div'); | |
| particle.style.position = 'absolute'; | |
| particle.style.width = Math.random() * 3 + 1 + 'px'; | |
| particle.style.height = particle.style.width; | |
| particle.style.backgroundColor = `rgba(0, 195, 255, ${Math.random() * 0.5 + 0.1})`; | |
| particle.style.borderRadius = '50%'; | |
| particle.style.top = Math.random() * 100 + '%'; | |
| particle.style.left = Math.random() * 100 + '%'; | |
| container.appendChild(particle); | |
| particles.push({ | |
| element: particle, | |
| x: Math.random() * 100, | |
| y: Math.random() * 100, | |
| speedX: Math.random() * 0.2 - 0.1, | |
| speedY: Math.random() * 0.2 - 0.1 | |
| }); | |
| } | |
| function moveParticles() { | |
| particles.forEach(p => { | |
| p.x += p.speedX; | |
| p.y += p.speedY; | |
| if (p.x < 0 || p.x > 100) p.speedX *= -1; | |
| if (p.y < 0 || p.y > 100) p.speedY *= -1; | |
| p.element.style.left = p.x + '%'; | |
| p.element.style.top = p.y + '%'; | |
| }); | |
| requestAnimationFrame(moveParticles); | |
| } | |
| moveParticles(); | |
| }); | |
| </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=triton7777/quantum-scholar" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |