Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Dr. Alex Chen | AI Researcher</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=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| scroll-behavior: smooth; | |
| background-color: #f8fafc; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, #3b82f6, #8b5cf6); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .hero-bg { | |
| background: radial-gradient(circle at 10% 20%, rgba(59, 130, 246, 0.1) 0%, rgba(255, 255, 255, 0) 30%), | |
| radial-gradient(circle at 90% 20%, rgba(139, 92, 246, 0.1) 0%, rgba(255, 255, 255, 0) 30%); | |
| } | |
| .card-hover { | |
| transition: all 0.3s ease; | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .timeline-item:not(:last-child)::after { | |
| content: ''; | |
| position: absolute; | |
| left: 24px; | |
| top: 32px; | |
| height: calc(100% - 32px); | |
| width: 2px; | |
| background-color: #e2e8f0; | |
| } | |
| .animate-float { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-20px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .animate-pulse-slow { | |
| animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| .tech-icon { | |
| transition: all 0.3s ease; | |
| } | |
| .tech-icon:hover { | |
| transform: scale(1.2); | |
| } | |
| .project-card { | |
| perspective: 1000px; | |
| } | |
| .project-inner { | |
| transition: transform 0.6s; | |
| transform-style: preserve-3d; | |
| } | |
| .project-card:hover .project-inner { | |
| transform: rotateY(180deg); | |
| } | |
| .project-front, .project-back { | |
| backface-visibility: hidden; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .project-back { | |
| transform: rotateY(180deg); | |
| } | |
| </style> | |
| </head> | |
| <body class="text-gray-800"> | |
| <!-- Navigation --> | |
| <nav class="fixed w-full bg-white bg-opacity-90 backdrop-filter backdrop-blur-lg z-50 shadow-sm"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16 items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <span class="text-xl font-bold gradient-text">Dr. Alex Chen</span> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-baseline space-x-8"> | |
| <a href="#home" class="text-gray-900 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition-colors">Home</a> | |
| <a href="#about" class="text-gray-900 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition-colors">About</a> | |
| <a href="#research" class="text-gray-900 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition-colors">Research</a> | |
| <a href="#publications" class="text-gray-900 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition-colors">Publications</a> | |
| <a href="#contact" class="text-gray-900 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition-colors">Contact</a> | |
| </div> | |
| </div> | |
| <div class="md:hidden"> | |
| <button id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-700 hover:text-blue-600 focus:outline-none"> | |
| <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-white shadow-lg"> | |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> | |
| <a href="#home" class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:text-blue-600">Home</a> | |
| <a href="#about" class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:text-blue-600">About</a> | |
| <a href="#research" class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:text-blue-600">Research</a> | |
| <a href="#publications" class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:text-blue-600">Publications</a> | |
| <a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:text-blue-600">Contact</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section id="home" class="hero-bg pt-32 pb-20 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="lg:flex lg:items-center lg:justify-between"> | |
| <div class="lg:w-1/2"> | |
| <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight mb-6"> | |
| <span class="gradient-text">Dr. Alex Chen</span><br> | |
| <span class="text-gray-800">AI Researcher & Machine Learning Expert</span> | |
| </h1> | |
| <p class="text-lg text-gray-600 mb-8 max-w-lg"> | |
| Pioneering research at the intersection of deep learning, computer vision, and natural language processing. | |
| Committed to advancing AI for social good. | |
| </p> | |
| <div class="flex flex-wrap gap-4"> | |
| <a href="#research" class="px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white font-medium rounded-lg hover:shadow-lg transition-all duration-300"> | |
| Explore Research | |
| </a> | |
| <a href="#contact" class="px-6 py-3 border border-gray-300 text-gray-700 font-medium rounded-lg hover:bg-gray-50 transition-all duration-300"> | |
| Contact Me | |
| </a> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2 mt-12 lg:mt-0 flex justify-center"> | |
| <div class="relative w-64 h-64 sm:w-80 sm:h-80"> | |
| <div class="absolute inset-0 bg-gradient-to-br from-blue-400 to-purple-500 rounded-full opacity-20 blur-xl animate-pulse-slow"></div> | |
| <img src="https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" | |
| alt="Dr. Alex Chen" | |
| class="relative w-full h-full rounded-full object-cover border-4 border-white shadow-xl animate-float"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 px-4 sm:px-6 lg:px-8 bg-white"> | |
| <div class="max-w-7xl mx-auto"> | |
| <h2 class="text-3xl font-bold text-center mb-12 gradient-text">About Me</h2> | |
| <div class="lg:flex lg:items-center lg:space-x-12"> | |
| <div class="lg:w-1/2 mb-12 lg:mb-0"> | |
| <h3 class="text-2xl font-semibold text-gray-800 mb-6">Biography</h3> | |
| <p class="text-gray-600 mb-6"> | |
| I am an AI researcher with a passion for developing innovative machine learning solutions to complex real-world problems. | |
| My research focuses on advancing the frontiers of artificial intelligence through interdisciplinary approaches. | |
| </p> | |
| <p class="text-gray-600 mb-6"> | |
| Currently, I lead the AI Research Lab at Stanford University, where my team explores novel architectures for | |
| multimodal learning, interpretable AI, and robust machine learning systems. | |
| </p> | |
| <p class="text-gray-600"> | |
| My work has been recognized with several awards including the NSF CAREER Award and the AAAI Outstanding Paper Award. | |
| I'm committed to mentoring the next generation of AI researchers and promoting ethical AI development. | |
| </p> | |
| <div class="mt-8"> | |
| <h4 class="text-lg font-semibold text-gray-800 mb-4">Research Interests</h4> | |
| <div class="flex flex-wrap gap-3"> | |
| <span class="px-3 py-1 bg-blue-50 text-blue-600 rounded-full text-sm">Deep Learning</span> | |
| <span class="px-3 py-1 bg-purple-50 text-purple-600 rounded-full text-sm">Computer Vision</span> | |
| <span class="px-3 py-1 bg-green-50 text-green-600 rounded-full text-sm">NLP</span> | |
| <span class="px-3 py-1 bg-yellow-50 text-yellow-600 rounded-full text-sm">Multimodal Learning</span> | |
| <span class="px-3 py-1 bg-red-50 text-red-600 rounded-full text-sm">Interpretable AI</span> | |
| <span class="px-3 py-1 bg-indigo-50 text-indigo-600 rounded-full text-sm">Robust ML</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <h3 class="text-2xl font-semibold text-gray-800 mb-6">Education & Experience</h3> | |
| <div class="space-y-8 relative"> | |
| <!-- Timeline items --> | |
| <div class="timeline-item relative pl-12"> | |
| <div class="absolute left-0 top-0 w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white"> | |
| <i class="fas fa-graduation-cap"></i> | |
| </div> | |
| <h4 class="text-lg font-semibold text-gray-800">PhD in Computer Science</h4> | |
| <p class="text-gray-600">Stanford University | 2015-2019</p> | |
| <p class="text-gray-500 mt-1">Thesis: "Advancing Multimodal Learning Through Neural Architecture Search"</p> | |
| </div> | |
| <div class="timeline-item relative pl-12"> | |
| <div class="absolute left-0 top-0 w-8 h-8 rounded-full bg-purple-500 flex items-center justify-center text-white"> | |
| <i class="fas fa-briefcase"></i> | |
| </div> | |
| <h4 class="text-lg font-semibold text-gray-800">AI Research Scientist</h4> | |
| <p class="text-gray-600">Google Brain | 2019-2021</p> | |
| <p class="text-gray-500 mt-1">Led research on self-supervised learning for computer vision applications</p> | |
| </div> | |
| <div class="timeline-item relative pl-12"> | |
| <div class="absolute left-0 top-0 w-8 h-8 rounded-full bg-green-500 flex items-center justify-center text-white"> | |
| <i class="fas fa-university"></i> | |
| </div> | |
| <h4 class="text-lg font-semibold text-gray-800">Assistant Professor</h4> | |
| <p class="text-gray-600">Stanford University | 2021-Present</p> | |
| <p class="text-gray-500 mt-1">Director of the AI Research Lab, focusing on interpretable and robust AI systems</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Skills --> | |
| <div class="mt-20"> | |
| <h3 class="text-2xl font-semibold text-center text-gray-800 mb-8">Technical Expertise</h3> | |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-6"> | |
| <div class="flex flex-col items-center p-4 bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300"> | |
| <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg" class="w-12 h-12 tech-icon" alt="Python"> | |
| <span class="mt-2 text-sm font-medium text-gray-700">Python</span> | |
| </div> | |
| <div class="flex flex-col items-center p-4 bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300"> | |
| <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/pytorch/pytorch-original.svg" class="w-12 h-12 tech-icon" alt="PyTorch"> | |
| <span class="mt-2 text-sm font-medium text-gray-700">PyTorch</span> | |
| </div> | |
| <div class="flex flex-col items-center p-4 bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300"> | |
| <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/tensorflow/tensorflow-original.svg" class="w-12 h-12 tech-icon" alt="TensorFlow"> | |
| <span class="mt-2 text-sm font-medium text-gray-700">TensorFlow</span> | |
| </div> | |
| <div class="flex flex-col items-center p-4 bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300"> | |
| <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/numpy/numpy-original.svg" class="w-12 h-12 tech-icon" alt="NumPy"> | |
| <span class="mt-2 text-sm font-medium text-gray-700">NumPy</span> | |
| </div> | |
| <div class="flex flex-col items-center p-4 bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300"> | |
| <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/pandas/pandas-original.svg" class="w-12 h-12 tech-icon" alt="Pandas"> | |
| <span class="mt-2 text-sm font-medium text-gray-700">Pandas</span> | |
| </div> | |
| <div class="flex flex-col items-center p-4 bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300"> | |
| <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/docker/docker-original.svg" class="w-12 h-12 tech-icon" alt="Docker"> | |
| <span class="mt-2 text-sm font-medium text-gray-700">Docker</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Research Section --> | |
| <section id="research" class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto"> | |
| <h2 class="text-3xl font-bold text-center mb-12 gradient-text">Research Areas</h2> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Research Card 1 --> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-md card-hover"> | |
| <div class="h-48 bg-gradient-to-r from-blue-400 to-blue-600 flex items-center justify-center"> | |
| <i class="fas fa-brain text-white text-6xl"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-3">Multimodal Learning</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Developing novel architectures that effectively combine vision, language, and other modalities | |
| for more comprehensive AI understanding. | |
| </p> | |
| <a href="#" class="text-blue-600 font-medium inline-flex items-center"> | |
| Learn more <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Research Card 2 --> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-md card-hover"> | |
| <div class="h-48 bg-gradient-to-r from-purple-400 to-purple-600 flex items-center justify-center"> | |
| <i class="fas fa-eye text-white text-6xl"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-3">Interpretable AI</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Creating methods to make complex neural networks more transparent and explainable | |
| without sacrificing performance. | |
| </p> | |
| <a href="#" class="text-purple-600 font-medium inline-flex items-center"> | |
| Learn more <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Research Card 3 --> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-md card-hover"> | |
| <div class="h-48 bg-gradient-to-r from-green-400 to-green-600 flex items-center justify-center"> | |
| <i class="fas fa-shield-alt text-white text-6xl"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-3">Robust ML</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Building machine learning systems that maintain performance under distribution shifts, | |
| adversarial attacks, and real-world noise. | |
| </p> | |
| <a href="#" class="text-green-600 font-medium inline-flex items-center"> | |
| Learn more <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Research Card 4 --> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-md card-hover"> | |
| <div class="h-48 bg-gradient-to-r from-yellow-400 to-yellow-600 flex items-center justify-center"> | |
| <i class="fas fa-language text-white text-6xl"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-3">Language Understanding</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Advancing neural language models with better contextual understanding, | |
| reasoning capabilities, and multilingual performance. | |
| </p> | |
| <a href="#" class="text-yellow-600 font-medium inline-flex items-center"> | |
| Learn more <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Research Card 5 --> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-md card-hover"> | |
| <div class="h-48 bg-gradient-to-r from-red-400 to-red-600 flex items-center justify-center"> | |
| <i class="fas fa-robot text-white text-6xl"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-3">Embodied AI</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Developing AI systems that learn through interaction with physical environments, | |
| bridging the gap between virtual and real-world learning. | |
| </p> | |
| <a href="#" class="text-red-600 font-medium inline-flex items-center"> | |
| Learn more <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Research Card 6 --> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-md card-hover"> | |
| <div class="h-48 bg-gradient-to-r from-indigo-400 to-indigo-600 flex items-center justify-center"> | |
| <i class="fas fa-heartbeat text-white text-6xl"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-3">AI for Social Good</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Applying cutting-edge AI techniques to address global challenges in healthcare, | |
| education, environmental sustainability, and more. | |
| </p> | |
| <a href="#" class="text-indigo-600 font-medium inline-flex items-center"> | |
| Learn more <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Publications Section --> | |
| <section id="publications" class="py-20 px-4 sm:px-6 lg:px-8 bg-white"> | |
| <div class="max-w-7xl mx-auto"> | |
| <h2 class="text-3xl font-bold text-center mb-12 gradient-text">Selected Publications</h2> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <!-- Publication 1 --> | |
| <div class="project-card relative h-64"> | |
| <div class="project-inner relative w-full h-full"> | |
| <div class="project-front absolute w-full h-full bg-gradient-to-br from-blue-50 to-purple-50 rounded-xl p-6 shadow-md flex flex-col justify-between"> | |
| <div> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-2">Cross-Modal Attention for Vision-Language Integration</h3> | |
| <p class="text-gray-600 text-sm">NeurIPS 2022</p> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-xs font-medium">Computer Vision</span> | |
| <span class="text-gray-500 text-sm">Citations: 142</span> | |
| </div> | |
| </div> | |
| <div class="project-back absolute w-full h-full bg-gradient-to-br from-blue-100 to-purple-100 rounded-xl p-6 shadow-md"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-3">Cross-Modal Attention for Vision-Language Integration</h3> | |
| <p class="text-gray-600 text-sm mb-4"> | |
| We propose a novel attention mechanism that dynamically learns to attend to relevant | |
| information across vision and language modalities, achieving state-of-the-art results | |
| on multiple benchmarks. | |
| </p> | |
| <a href="#" class="text-blue-600 font-medium inline-flex items-center text-sm"> | |
| Read Paper <i class="fas fa-external-link-alt ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Publication 2 --> | |
| <div class="project-card relative h-64"> | |
| <div class="project-inner relative w-full h-full"> | |
| <div class="project-front absolute w-full h-full bg-gradient-to-br from-green-50 to-blue-50 rounded-xl p-6 shadow-md flex flex-col justify-between"> | |
| <div> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-2">Interpretable Neural Architecture Search</h3> | |
| <p class="text-gray-600 text-sm">ICML 2021</p> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-xs font-medium">NAS</span> | |
| <span class="text-gray-500 text-sm">Citations: 89</span> | |
| </div> | |
| </div> | |
| <div class="project-back absolute w-full h-full bg-gradient-to-br from-green-100 to-blue-100 rounded-xl p-6 shadow-md"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-3">Interpretable Neural Architecture Search</h3> | |
| <p class="text-gray-600 text-sm mb-4"> | |
| This work introduces a novel NAS framework that not only discovers high-performing architectures | |
| but also provides interpretable insights into why certain architectural choices perform better. | |
| </p> | |
| <a href="#" class="text-green-600 font-medium inline-flex items-center text-sm"> | |
| Read Paper <i class="fas fa-external-link-alt ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Publication 3 --> | |
| <div class="project-card relative h-64"> | |
| <div class="project-inner relative w-full h-full"> | |
| <div class="project-front absolute w-full h-full bg-gradient-to-br from-purple-50 to-pink-50 rounded-xl p-6 shadow-md flex flex-col justify-between"> | |
| <div> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-2">Robust Self-Supervised Learning</h3> | |
| <p class="text-gray-600 text-sm">CVPR 2020</p> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="px-3 py-1 bg-purple-100 text-purple-800 rounded-full text-xs font-medium">Self-Supervised</span> | |
| <span class="text-gray-500 text-sm">Citations: 210</span> | |
| </div> | |
| </div> | |
| <div class="project-back absolute w-full h-full bg-gradient-to-br from-purple-100 to-pink-100 rounded-xl p-6 shadow-md"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-3">Robust Self-Supervised Learning</h3> | |
| <p class="text-gray-600 text-sm mb-4"> | |
| We present a new framework for self-supervised learning that is robust to distribution shifts | |
| and adversarial perturbations, significantly outperforming previous approaches in challenging | |
| real-world scenarios. | |
| </p> | |
| <a href="#" class="text-purple-600 font-medium inline-flex items-center text-sm"> | |
| Read Paper <i class="fas fa-external-link-alt ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Publication 4 --> | |
| <div class="project-card relative h-64"> | |
| <div class="project-inner relative w-full h-full"> | |
| <div class="project-front absolute w-full h-full bg-gradient-to-br from-yellow-50 to-orange-50 rounded-xl p-6 shadow-md flex flex-col justify-between"> | |
| <div> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-2">Dynamic Neural Networks for Efficient Inference</h3> | |
| <p class="text-gray-600 text-sm">AAAI 2019</p> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs font-medium">Efficiency</span> | |
| <span class="text-gray-500 text-sm">Citations: 76</span> | |
| </div> | |
| </div> | |
| <div class="project-back absolute w-full h-full bg-gradient-to-br from-yellow-100 to-orange-100 rounded-xl p-6 shadow-md"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-3">Dynamic Neural Networks for Efficient Inference</h3> | |
| <p class="text-gray-600 text-sm mb-4"> | |
| This paper introduces a new class of dynamic neural networks that adapt their computation | |
| based on input complexity, achieving significant efficiency gains without sacrificing accuracy. | |
| </p> | |
| <a href="#" class="text-yellow-600 font-medium inline-flex items-center text-sm"> | |
| Read Paper <i class="fas fa-external-link-alt ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <a href="#" class="px-6 py-3 bg-gray-800 text-white font-medium rounded-lg hover:bg-gray-700 transition-colors duration-300 inline-flex items-center"> | |
| View All Publications <i class="fas fa-list ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto"> | |
| <h2 class="text-3xl font-bold text-center mb-12 gradient-text">Get In Touch</h2> | |
| <div class="lg:flex lg:space-x-12"> | |
| <div class="lg:w-1/2 mb-12 lg:mb-0"> | |
| <div class="bg-white rounded-xl shadow-md p-8 h-full"> | |
| <h3 class="text-2xl font-semibold text-gray-800 mb-6">Contact Information</h3> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-blue-100 rounded-lg p-3"> | |
| <i class="fas fa-envelope text-blue-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-sm font-medium text-gray-500">Email</h4> | |
| <a href="mailto:[email protected]" class="text-base text-gray-800 hover:text-blue-600">[email protected]</a> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-purple-100 rounded-lg p-3"> | |
| <i class="fas fa-building text-purple-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-sm font-medium text-gray-500">Office</h4> | |
| <p class="text-base text-gray-800">Gates Computer Science Building, Room 392</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-green-100 rounded-lg p-3"> | |
| <i class="fas fa-map-marker-alt text-green-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-sm font-medium text-gray-500">Address</h4> | |
| <p class="text-base text-gray-800">353 Serra Mall, Stanford, CA 94305</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-yellow-100 rounded-lg p-3"> | |
| <i class="fas fa-phone-alt text-yellow-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-sm font-medium text-gray-500">Phone</h4> | |
| <p class="text-base text-gray-800">(650) 725-1234</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <h4 class="text-lg font-semibold text-gray-800 mb-4">Connect With Me</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center text-gray-700 hover:bg-blue-100 hover:text-blue-600"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center text-gray-700 hover:bg-blue-700 hover:text-white"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center text-gray-700 hover:bg-gray-800 hover:text-white"> | |
| <i class="fab fa-github"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center text-gray-700 hover:bg-blue-600 hover:text-white"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center text-gray-700 hover:bg-red-600 hover:text-white"> | |
| <i class="fab fa-google"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <div class="bg-white rounded-xl shadow-md p-8 h-full"> | |
| <h3 class="text-2xl font-semibold text-gray-800 mb-6">Send Me a Message</h3> | |
| <form> | |
| <div class="grid grid-cols-1 gap-6"> | |
| <div> | |
| <label for="name" class="block text-sm font-medium text-gray-700 mb-1">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-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label> | |
| <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label for="subject" class="block text-sm font-medium text-gray-700 mb-1">Subject</label> | |
| <input type="text" id="subject" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-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-blue-500 focus:border-blue-500"></textarea> | |
| </div> | |
| <div> | |
| <button type="submit" class="w-full px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white font-medium rounded-lg hover:shadow-lg transition-all duration-300"> | |
| Send Message | |
| </button> | |
| </div> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-6 md:mb-0"> | |
| <span class="text-xl font-bold gradient-text">Dr. Alex Chen</span> | |
| <p class="text-gray-400 mt-2">Advancing AI Research for a Better Future</p> | |
| </div> | |
| <div class="flex flex-wrap gap-6"> | |
| <a href="#home" class="text-gray-400 hover:text-white transition-colors">Home</a> | |
| <a href="#about" class="text-gray-400 hover:text-white transition-colors">About</a> | |
| <a href="#research" class="text-gray-400 hover:text-white transition-colors">Research</a> | |
| <a href="#publications" class="text-gray-400 hover:text-white transition-colors">Publications</a> | |
| <a href="#contact" class="text-gray-400 hover:text-white transition-colors">Contact</a> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-500 text-sm mb-4 md:mb-0">© 2023 Dr. Alex Chen. All rights reserved.</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-500 hover:text-white transition-colors"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-500 hover:text-white transition-colors"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="text-gray-500 hover:text-white transition-colors"> | |
| <i class="fab fa-github"></i> | |
| </a> | |
| <a href="#" class="text-gray-500 hover:text-white transition-colors"> | |
| <i class="fab fa-google-scholar"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Smooth scrolling for navigation 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' | |
| }); | |
| // Close mobile menu if open | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| }); | |
| }); | |
| // Add shadow to navbar on scroll | |
| window.addEventListener('scroll', function() { | |
| const nav = document.querySelector('nav'); | |
| if (window.scrollY > 10) { | |
| nav.classList.add('shadow-lg'); | |
| nav.classList.remove('shadow-sm'); | |
| } else { | |
| nav.classList.remove('shadow-lg'); | |
| nav.classList.add('shadow-sm'); | |
| } | |
| }); | |
| // Animate elements when they come into view | |
| const observerOptions = { | |
| threshold: 0.1 | |
| }; | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('animate-fadeIn'); | |
| } | |
| }); | |
| }, observerOptions); | |
| document.querySelectorAll('.timeline-item, .tech-icon, .card-hover, .project-card').forEach(el => { | |
| observer.observe(el); | |
| }); | |
| // Add fade-in animation to elements | |
| const style = document.createElement('style'); | |
| style.textContent = ` | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .animate-fadeIn { | |
| animation: fadeIn 0.6s ease-out forwards; | |
| } | |
| `; | |
| document.head.appendChild(style); | |
| </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=Aedelon/deepsite-t1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |