Spaces:
Running
Running
| <html lang="en" class="light"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Alex Chen | AI Engineer</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 500: '#6b9080', | |
| 600: '#4a6b5d' | |
| }, | |
| secondary: { | |
| 500: '#edafb8', | |
| 600: '#d89ca5' | |
| }, | |
| accent: { | |
| 500: '#ff6b6b', | |
| 600: '#e05555' | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| scroll-behavior: smooth; | |
| } | |
| .section { | |
| scroll-margin-top: 80px; | |
| } | |
| .project-card:hover .project-image { | |
| transform: scale(1.05); | |
| } | |
| .dark { | |
| background-color: #f8f9fa; | |
| color: #1e293b; | |
| } | |
| .light { | |
| background-color: #f8f9fa; | |
| color: #1e293b; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 dark:bg-slate-900 transition-colors duration-300"> | |
| <!-- Navigation --> | |
| <nav class="fixed w-full bg-white/80 dark:bg-slate-900/80 backdrop-blur-md z-50 border-b border-gray-200 dark:border-slate-800"> | |
| <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <span class="text-xl font-bold text-primary-600 dark:text-primary-500">Alex Chen</span> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="#about" class="text-slate-700 dark:text-slate-300 hover:text-primary-600 dark:hover:text-primary-500 transition">About</a> | |
| <a href="#skills" class="text-slate-700 dark:text-slate-300 hover:text-primary-600 dark:hover:text-primary-500 transition">Skills</a> | |
| <a href="#experience" class="text-slate-700 dark:text-slate-300 hover:text-primary-600 dark:hover:text-primary-500 transition">Experience</a> | |
| <a href="#projects" class="text-slate-700 dark:text-slate-300 hover:text-primary-600 dark:hover:text-primary-500 transition">Projects</a> | |
| <a href="#education" class="text-slate-700 dark:text-slate-300 hover:text-[#6b9080] dark:hover:text-[#6b9080] transition">Education</a> | |
| <a href="#contact" class="text-slate-700 dark:text-slate-300 hover:text-[#6b9080] dark:hover:text-[#6b9080] transition">Contact</a> | |
| <a href="/resume.pdf" target="_blank" class="text-slate-700 dark:text-slate-300 hover:text-[#6b9080] dark:hover:text-[#6b9080] transition">Resume</a> | |
| <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-slate-700 transition"> | |
| <i data-feather="moon" class="hidden dark:block"></i> | |
| <i data-feather="sun" class="dark:hidden"></i> | |
| </button> | |
| </div> | |
| <div class="md:hidden flex items-center"> | |
| <button id="mobile-menu-button" class="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-slate-700 transition"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-white dark:bg-slate-900 border-t border-gray-200 dark:border-slate-800"> | |
| <div class="px-2 pt-2 pb-3 space-y-1"> | |
| <a href="#about" class="block px-3 py-2 rounded-md text-slate-700 dark:text-slate-300 hover:text-primary-600 dark:hover:text-primary-500 hover:bg-gray-100 dark:hover:bg-slate-800 transition">About</a> | |
| <a href="#skills" class="block px-3 py-2 rounded-md text-slate-700 dark:text-slate-300 hover:text-primary-600 dark:hover:text-primary-500 hover:bg-gray-100 dark:hover:bg-slate-800 transition">Skills</a> | |
| <a href="#experience" class="block px-3 py-2 rounded-md text-slate-700 dark:text-slate-300 hover:text-primary-600 dark:hover:text-primary-500 hover:bg-gray-100 dark:hover:bg-slate-800 transition">Experience</a> | |
| <a href="#projects" class="block px-3 py-2 rounded-md text-slate-700 dark:text-slate-300 hover:text-primary-600 dark:hover:text-primary-500 hover:bg-gray-100 dark:hover:bg-slate-800 transition">Projects</a> | |
| <a href="#education" class="block px-3 py-2 rounded-md text-slate-700 dark:text-slate-300 hover:text-primary-600 dark:hover:text-primary-500 hover:bg-gray-100 dark:hover:bg-slate-800 transition">Education</a> | |
| <a href="#contact" class="block px-3 py-2 rounded-md text-slate-700 dark:text-slate-300 hover:text-primary-600 dark:hover:text-primary-500 hover:bg-gray-100 dark:hover:bg-slate-800 transition">Contact</a> | |
| <button id="mobile-theme-toggle" class="block w-full text-left px-3 py-2 rounded-md text-slate-700 dark:text-slate-300 hover:text-primary-600 dark:hover:text-primary-500 hover:bg-gray-100 dark:hover:bg-slate-800 transition"> | |
| Toggle Theme | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="pt-24 pb-16 md:pt-32 md:pb-24 relative overflow-hidden" id="home"> | |
| <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="relative z-10"> | |
| <div class="text-center md:text-left md:flex items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-slate-800 dark:text-white mb-4">Hello, I'm <span class="text-primary-600 dark:text-primary-500">Alex Chen</span></h1> | |
| <h2 class="text-2xl md:text-3xl text-slate-600 dark:text-slate-300 mb-6">AI Engineer & Machine Learning Specialist</h2> | |
| <p class="text-lg text-slate-500 dark:text-slate-400 mb-8 max-w-lg">Building intelligent systems that solve real-world problems through cutting-edge AI and machine learning.</p> | |
| <div class="flex space-x-4 justify-center md:justify-start"> | |
| <a href="https://linkedin.com" target="_blank" class="px-6 py-3 bg-[#6b9080] hover:bg-[#4a6b5d] text-white rounded-lg font-medium transition flex items-center"> | |
| <i data-feather="linkedin" class="mr-2"></i> LinkedIn | |
| </a> | |
| <a href="https://github.com" target="_blank" class="px-6 py-3 bg-[#edafb8] hover:bg-[#d89ca5] text-white rounded-lg font-medium transition flex items-center"> | |
| <i data-feather="github" class="mr-2"></i> GitHub | |
| </a> | |
| <a href="/resume.pdf" target="_blank" class="px-6 py-3 bg-[#ff6b6b] hover:bg-[#e05555] text-white rounded-lg font-medium transition flex items-center"> | |
| <i data-feather="file-text" class="mr-2"></i> Resume | |
| </a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="relative w-64 h-64 md:w-80 md:h-80 rounded-full overflow-hidden border-4 border-primary-600 dark:border-primary-500 shadow-xl"> | |
| <img src="http://static.photos/technology/640x360/42" alt="Alex Chen" class="w-full h-full object-cover"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="vanta-bg" class="absolute inset-0 -z-10"></div> | |
| </section> | |
| <!-- About Section --> | |
| <section class="py-16 bg-gray-50 dark:bg-slate-800" id="about"> | |
| <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-slate-800 dark:text-white mb-4">About <span class="text-primary-600 dark:text-primary-500">Me</span></h2> | |
| <div class="w-20 h-1 bg-primary-600 dark:bg-primary-500 mx-auto"></div> | |
| </div> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/3 mb-8 md:mb-0 flex justify-center"> | |
| <div class="relative w-64 h-64 rounded-lg overflow-hidden shadow-xl"> | |
| <img src="http://static.photos/technology/640x360/10" alt="About Alex" class="w-full h-full object-cover"> | |
| </div> | |
| </div> | |
| <div class="md:w-2/3 md:pl-12"> | |
| <h3 class="text-2xl font-semibold text-slate-800 dark:text-white mb-4">Passionate About AI & Machine Learning</h3> | |
| <p class="text-slate-600 dark:text-slate-300 mb-4"> | |
| I'm an AI Engineer with 5+ years of experience specializing in deep learning, computer vision, and natural language processing. My passion lies in developing innovative AI solutions that bridge the gap between research and real-world applications. | |
| </p> | |
| <p class="text-slate-600 dark:text-slate-300 mb-6"> | |
| With a strong background in both theoretical foundations and practical implementations, I thrive on tackling complex problems and creating intelligent systems that enhance human capabilities. | |
| </p> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="flex items-center"> | |
| <i data-feather="code" class="text-primary-600 dark:text-primary-500 mr-3"></i> | |
| <span class="text-slate-700 dark:text-slate-300">AI Development</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i data-feather="cpu" class="text-primary-600 dark:text-primary-500 mr-3"></i> | |
| <span class="text-slate-700 dark:text-slate-300">Deep Learning</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i data-feather="eye" class="text-primary-600 dark:text-primary-500 mr-3"></i> | |
| <span class="text-slate-700 dark:text-slate-300">Computer Vision</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i data-feather="message-square" class="text-primary-600 dark:text-primary-500 mr-3"></i> | |
| <span class="text-slate-700 dark:text-slate-300">NLP</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Skills Section --> | |
| <section class="py-16 section" id="skills"> | |
| <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-slate-800 dark:text-white mb-4">My <span class="text-primary-600 dark:text-primary-500">Skills</span></h2> | |
| <div class="w-20 h-1 bg-primary-600 dark:bg-primary-500 mx-auto"></div> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"> | |
| <!-- Technical Skills --> | |
| <div class="bg-white dark:bg-slate-800 p-6 rounded-xl shadow-md hover:shadow-lg transition"> | |
| <div class="flex items-center mb-4"> | |
| <i data-feather="code" class="text-primary-600 dark:text-primary-500 mr-3"></i> | |
| <h3 class="text-lg font-semibold text-slate-800 dark:text-white">Programming</h3> | |
| </div> | |
| <ul class="space-y-2"> | |
| <li class="text-slate-600 dark:text-slate-300 flex items-center"> | |
| <span class="w-2 h-2 bg-primary-600 dark:bg-primary-500 rounded-full mr-2"></span> | |
| Python (Expert) | |
| </li> | |
| <li class="text-slate-600 dark:text-slate-300 flex items-center"> | |
| <span class="w-2 h-2 bg-primary-600 dark:bg-primary-500 rounded-full mr-2"></span> | |
| C++ | |
| </li> | |
| <li class="text-slate-600 dark:text-slate-300 flex items-center"> | |
| <span class="w-2 h-2 bg-primary-600 dark:bg-primary-500 rounded-full mr-2"></span> | |
| JavaScript | |
| </li> | |
| <li class="text-slate-600 dark:text-slate-300 flex items-center"> | |
| <span class="w-2 h-2 bg-primary-600 dark:bg-primary-500 rounded-full mr-2"></span> | |
| Java | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- ML/DL Frameworks --> | |
| <div class="bg-white dark:bg-slate-800 p-6 rounded-xl shadow-md hover:shadow-lg transition"> | |
| <div class="flex items-center mb-4"> | |
| <i data-feather="cpu" class="text-primary-600 dark:text-primary-500 mr-3"></i> | |
| <h3 class="text-lg font-semibold text-slate-800 dark:text-white">ML/DL Frameworks</h3> | |
| </div> | |
| <ul class="space-y-2"> | |
| <li class="text-slate-600 dark:text-slate-300 flex items-center"> | |
| <span class="w-2 h-2 bg-primary-600 dark:bg-primary-500 rounded-full mr-2"></span> | |
| TensorFlow | |
| </li> | |
| <li class="text-slate-600 dark:text-slate-300 flex items-center"> | |
| <span class="w-2 h-2 bg-primary-600 dark:bg-primary-500 rounded-full mr-2"></span> | |
| PyTorch | |
| </li> | |
| <li class="text-slate-600 dark:text-slate-300 flex items-center"> | |
| <span class="w-2 h-2 bg-primary-600 dark:bg-primary-500 rounded-full mr-2"></span> | |
| Keras | |
| </li> | |
| <li class="text-slate-600 dark:text-slate-300 flex items-center"> | |
| <span class="w-2 h-2 bg-primary-600 dark:bg-primary-500 rounded-full mr-2"></span> | |
| Scikit-learn | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Computer Vision --> | |
| <div class="bg-white dark:bg-slate-800 p-6 rounded-xl shadow-md hover:shadow-lg transition"> | |
| <div class="flex items-center mb-4"> | |
| <i data-feather="eye" class="text-primary-600 dark:text-primary-500 mr-3"></i> | |
| <h3 class="text-lg font-semibold text-slate-800 dark:text-white">Computer Vision</h3> | |
| </div> | |
| <ul class="space-y-2"> | |
| <li class="text-slate-600 dark:text-slate-300 flex items-center"> | |
| <span class="w-2 h-2 bg-primary-600 dark:bg-primary-500 rounded-full mr-2"></span> | |
| OpenCV | |
| </li> | |
| <li class="text-slate-600 dark:text-slate-300 flex items-center"> | |
| <span class="w-2 h-2 bg-primary-600 dark:bg-primary-500 rounded-full mr-2"></span> | |
| YOLO | |
| </li> | |
| <li class="text-slate-600 dark:text-slate-300 flex items-center"> | |
| <span class="w-2 h-2 bg-primary-600 dark:bg-primary-500 rounded-full mr-2"></span> | |
| Detectron2 | |
| </li> | |
| <li class="text-slate-600 dark:text-slate-300 flex items-center"> | |
| <span class="w-2 h-2 bg-primary-600 dark:bg-primary-500 rounded-full mr-2"></span> | |
| MediaPipe | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- NLP --> | |
| <div class="bg-white dark:bg-slate-800 p-6 rounded-xl shadow-md hover:shadow-lg transition"> | |
| <div class="flex items-center mb-4"> | |
| <i data-feather="message-square" class="text-primary-600 dark:text-primary-500 mr-3"></i> | |
| <h3 class="text-lg font-semibold text-slate-800 dark:text-white">NLP</h3> | |
| </div> | |
| <ul class="space-y-2"> | |
| <li class="text-slate-600 dark:text-slate-300 flex items-center"> | |
| <span class="w-2 h-2 bg-primary-600 dark:bg-primary-500 rounded-full mr-2"></span> | |
| Transformers | |
| </li> | |
| <li class="text-slate-600 dark:text-slate-300 flex items-center"> | |
| <span class="w-2 h-2 bg-primary-600 dark:bg-primary-500 rounded-full mr-2"></span> | |
| BERT/GPT | |
| </li> | |
| <li class="text-slate-600 dark:text-slate-300 flex items-center"> | |
| <span class="w-2 h-2 bg-primary-600 dark:bg-primary-500 rounded-full mr-2"></span> | |
| NLTK | |
| </li> | |
| <li class="text-slate-600 dark:text-slate-300 flex items-center"> | |
| <span class="w-2 h-2 bg-primary-600 dark:bg-primary-500 rounded-full mr-2"></span> | |
| SpaCy | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Data Processing --> | |
| <div class="bg-white dark:bg-slate-800 p-6 rounded-xl shadow-md hover:shadow-lg transition"> | |
| <div class="flex items-center mb-4"> | |
| <i data-feather="database" class="text-primary-600 dark:text-primary-500 mr-3"></i> | |
| <h3 class="text-lg font-semibold text-slate-800 dark:text-white">Data Processing</h3> | |
| </div> | |
| <ul class="space-y-2"> | |
| <li class="text-slate-600 dark:text-slate-300 flex items-center"> | |
| <span class="w-2 h-2 bg-primary-600 dark:bg-primary-500 rounded-full mr-2"></span> | |
| Pandas | |
| </li> | |
| <li class="text-slate-600 dark:text-slate-300 flex items-center"> | |
| <span class="w-2 h-2 bg-primary-600 dark:bg-primary-500 rounded-full mr-2"></span> | |
| NumPy | |
| </li> | |
| <li class="text-slate-600 dark:text-slate-300 flex items-center"> | |
| <span class="w-2 h-2 bg-primary-600 dark:bg-primary-500 rounded-full mr-2"></span> | |
| SQL | |
| </li> | |
| <li class="text-slate-600 dark:text-slate-300 flex items-center"> | |
| <span class="w-2 h-2 bg-primary-600 dark:bg-primary-500 rounded-full mr-2"></span> | |
| Apache Spark | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Deployment --> | |
| <div class="bg-white dark:bg-slate-800 p-6 rounded-xl shadow-md hover:shadow-lg transition"> | |
| <div class="flex items-center mb-4"> | |
| <i data-feather="cloud" class="text-primary-600 dark:text-primary-500 mr-3"></i> | |
| <h3 class="text-lg font-semibold text-slate-800 dark:text-white">Deployment</h3> | |
| </div> | |
| <ul class="space-y-2"> | |
| <li class="text-slate-600 dark:text-slate-300 flex items-center"> | |
| <span class="w-2 h-2 bg-primary-600 dark:bg-primary-500 rounded-full mr-2"></span> | |
| Docker | |
| </li> | |
| <li class="text-slate-600 dark:text-slate-300 flex items-center"> | |
| <span class="w-2 h-2 bg-primary-600 dark:bg-primary-500 rounded-full mr-2"></span> | |
| Kubernetes | |
| </li> | |
| <li class="text-slate-600 dark:text-slate-300 flex items-center"> | |
| <span class="w-2 h-2 bg-primary-600 dark:bg-primary-500 rounded-full mr-2"></span> | |
| AWS/GCP | |
| </li> | |
| <li class="text-slate-600 dark:text-slate-300 flex items-center"> | |
| <span class="w-2 h-2 bg-primary-600 dark:bg-primary-500 rounded-full mr-2"></span> | |
| FastAPI | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Tools --> | |
| <div class="bg-white dark:bg-slate-800 p-6 rounded-xl shadow-md hover:shadow-lg transition"> | |
| <div class="flex items-center mb-4"> | |
| <i data-feather="tool" class="text-primary-600 dark:text-primary-500 mr-3"></i> | |
| <h3 class="text-lg font-semibold text-slate-800 dark:text-white">Tools</h3> | |
| </div> | |
| <ul class="space-y-2"> | |
| <li class="text-slate-600 dark:text-slate-300 flex items-center"> | |
| <span class="w-2 h-2 bg-primary-600 dark:bg-primary-500 rounded-full mr-2"></span> | |
| Git | |
| </li> | |
| <li class="text-slate-600 dark:text-slate-300 flex items-center"> | |
| <span class="w-2 h-2 bg-primary-600 dark:bg-primary-500 rounded-full mr-2"></span> | |
| Jupyter | |
| </li> | |
| <li class="text-slate-600 dark:text-slate-300 flex items-center"> | |
| <span class="w-2 h-2 bg-primary-600 dark:bg-primary-500 rounded-full mr-2"></span> | |
| VS Code | |
| </li> | |
| <li class="text-slate-600 dark:text-slate-300 flex items-center"> | |
| <span class="w-2 h-2 bg-primary-600 dark:bg-primary-500 rounded-full mr-2"></span> | |
| Linux | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Soft Skills --> | |
| <div class="bg-white dark:bg-slate-800 p-6 rounded-xl shadow-md hover:shadow-lg transition"> | |
| <div class="flex items-center mb-4"> | |
| <i data-feather="users" class="text-primary-600 dark:text-primary-500 mr-3"></i> | |
| <h3 class="text-lg font-semibold text-slate-800 dark:text-white">Soft Skills</h3> | |
| </div> | |
| <ul class="space-y-2"> | |
| <li class="text-slate-600 dark:text-slate-300 flex items-center"> | |
| <span class="w-2 h-2 bg-primary-600 dark:bg-primary-500 rounded-full mr-2"></span> | |
| Team Leadership | |
| </li> | |
| <li class="text-slate-600 dark:text-slate-300 flex items-center"> | |
| <span class="w-2 h-2 bg-primary-600 dark:bg-primary-500 rounded-full mr-2"></span> | |
| Problem Solving | |
| </li> | |
| <li class="text-slate-600 dark:text-slate-300 flex items-center"> | |
| <span class="w-2 h-2 bg-primary-600 dark:bg-primary-500 rounded-full mr-2"></span> | |
| Research | |
| </li> | |
| <li class="text-slate-600 dark:text-slate-300 flex items-center"> | |
| <span class="w-2 h-2 bg-primary-600 dark:bg-primary-500 rounded-full mr-2"></span> | |
| Technical Writing | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Experience Section --> | |
| <section class="py-16 bg-gray-50 dark:bg-slate-800 section" id="experience"> | |
| <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-slate-800 dark:text-white mb-4">Work <span class="text-primary-600 dark:text-primary-500">Experience</span></h2> | |
| <div class="w-20 h-1 bg-primary-600 dark:bg-primary-500 mx-auto"></div> | |
| </div> | |
| <div class="relative"> | |
| <!-- Timeline line --> | |
| <div class="absolute left-4 md:left-1/2 h-full w-0.5 bg-[#edafb8] dark:bg-[#4a6b5d] transform -translate-x-1/2"></div> | |
| <!-- Timeline items --> | |
| <div class="space-y-8"> | |
| <!-- Experience 1 --> | |
| <div class="relative flex flex-col md:flex-row items-center"> | |
| <div class="hidden md:flex md:w-1/2 justify-end pr-8"> | |
| <div class="text-right"> | |
| <h3 class="text-xl font-semibold text-slate-800 dark:text-white">Senior AI Engineer</h3> | |
| <p class="text-primary-600 dark:text-primary-500">TechNova AI Solutions</p> | |
| <p class="text-sm text-slate-500 dark:text-slate-400">Jan 2021 - Present</p> | |
| </div> | |
| </div> | |
| <div class="absolute left-2 md:left-1/2 w-4 h-4 rounded-full bg-[#edafb8] dark:bg-[#6b9080] transform -translate-x-1/2 z-10 border-2 border-white dark:border-slate-800"></div> | |
| <div class="hidden md:flex absolute left-2 md:left-1/2 -ml-20 top-0 w-16 h-16 rounded-full bg-white dark:bg-slate-700 shadow-md overflow-hidden transform -translate-x-1/2 z-10"> | |
| <img src="http://static.photos/technology/200x200/1" alt="TechNova" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="md:hidden w-16 h-16 rounded-full bg-white dark:bg-slate-700 shadow-md overflow-hidden mb-4 mx-auto"> | |
| <img src="http://static.photos/technology/200x200/1" alt="TechNova" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="md:w-1/2 md:pl-8"> | |
| <div class="md:hidden mb-2"> | |
| <h3 class="text-xl font-semibold text-slate-800 dark:text-white">Senior AI Engineer</h3> | |
| <p class="text-primary-600 dark:text-primary-500">TechNova AI Solutions</p> | |
| <p class="text-sm text-slate-500 dark:text-slate-400">Jan 2021 - Present</p> | |
| </div> | |
| <div class="bg-white dark:bg-slate-700 p-6 rounded-lg shadow-md"> | |
| <ul class="list-disc pl-5 space-y-2 text-slate-600 dark:text-slate-300"> | |
| <li>Led a team of 5 AI engineers to develop a computer vision system for industrial defect detection with 98% accuracy</li> | |
| <li>Architected and deployed a scalable NLP pipeline processing 10M+ documents monthly</li> | |
| <li>Implemented advanced ML algorithms reducing operational costs by 30%</li> | |
| <li>Published 3 research papers on novel deep learning architectures</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Experience 2 --> | |
| <div class="relative flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 md:pr-8 md:text-right"> | |
| <div class="hidden md:block"> | |
| <h3 class="text-xl font-semibold text-slate-800 dark:text-white">AI Engineer</h3> | |
| <p class="text-primary-600 dark:text-primary-500">DeepMind Analytics</p> | |
| <p class="text-sm text-slate-500 dark:text-slate-400">Mar 2018 - Dec 2020</p> | |
| </div> | |
| </div> | |
| <div class="hidden md:flex absolute left-2 md:left-1/2 -ml-20 top-0 w-16 h-16 rounded-full bg-white dark:bg-slate-700 shadow-md overflow-hidden transform -translate-x-1/2 z-10"> | |
| <img src="http://static.photos/office/200x200/2" alt="DeepMind" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="md:hidden w-16 h-16 rounded-full bg-white dark:bg-slate-700 shadow-md overflow-hidden mb-4 mx-auto"> | |
| <img src="http://static.photos/office/200x200/2" alt="DeepMind" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="absolute left-2 md:left-1/2 w-4 h-4 rounded-full bg-[#edafb8] dark:bg-primary-500 transform -translate-x-1/2 z-10"></div> | |
| <div class="md:w-1/2 md:pl-8"> | |
| <div class="md:hidden mb-2"> | |
| <h3 class="text-xl font-semibold text-slate-800 dark:text-white">AI Engineer</h3> | |
| <p class="text-primary-600 dark:text-primary-500">DeepMind Analytics</p> | |
| <p class="text-sm text-slate-500 dark:text-slate-400">Mar 2018 - Dec 2020</p> | |
| </div> | |
| <div class="bg-white dark:bg-slate-700 p-6 rounded-lg shadow-md"> | |
| <ul class="list-disc pl-5 space-y-2 text-slate-600 dark:text-slate-300"> | |
| <li>Developed a recommendation engine that increased user engagement by 40%</li> | |
| <li>Created novel time-series forecasting models for financial predictions</li> | |
| <li>Optimized neural networks for edge devices achieving 5x speed improvements</li> | |
| <li>Mentored junior engineers and conducted internal training sessions</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Experience 3 --> | |
| <div class="relative flex flex-col md:flex-row items-center"> | |
| <div class="hidden md:flex md:w-1/2 justify-end pr-8"> | |
| <div class="text-right"> | |
| <h3 class="text-xl font-semibold text-slate-800 dark:text-white">Machine Learning Intern</h3> | |
| <p class="text-primary-600 dark:text-primary-500">Quantum AI Research</p> | |
| <p class="text-sm text-slate-500 dark:text-slate-400">Jun 2017 - Feb 2018</p> | |
| </div> | |
| </div> | |
| <div class="hidden md:flex absolute left-2 md:left-1/2 -ml-20 top-0 w-16 h-16 rounded-full bg-white dark:bg-slate-700 shadow-md overflow-hidden transform -translate-x-1/2 z-10"> | |
| <img src="http://static.photos/science/200x200/3" alt="Quantum AI" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="md:hidden w-16 h-16 rounded-full bg-white dark:bg-slate-700 shadow-md overflow-hidden mb-4 mx-auto"> | |
| <img src="http://static.photos/science/200x200/3" alt="Quantum AI" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="absolute left-2 md:left-1/2 w-4 h-4 rounded-full bg-[#edafb8] dark:bg-primary-500 transform -translate-x-1/2 z-10"></div> | |
| <div class="md:w-1/2 md:pl-8"> | |
| <div class="md:hidden mb-2"> | |
| <h3 class="text-xl font-semibold text-slate-800 dark:text-white">Machine Learning Intern</h3> | |
| <p class="text-primary-600 dark:text-primary-500">Quantum AI Research</p> | |
| <p class="text-sm text-slate-500 dark:text-slate-400">Jun 2017 - Feb 2018</p> | |
| </div> | |
| <div class="bg-white dark:bg-slate-700 p-6 rounded-lg shadow-md"> | |
| <ul class="list-disc pl-5 space-y-2 text-slate-600 dark:text-slate-300"> | |
| <li>Researched and implemented state-of-the-art reinforcement learning algorithms</li> | |
| <li>Assisted in developing a medical diagnosis AI system with 92% accuracy</li> | |
| <li>Created automated data preprocessing pipelines reducing manual work by 80%</li> | |
| <li>Co-authored a research paper on explainable AI techniques</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Projects Section --> | |
| <section class="py-16 section" id="projects"> | |
| <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-slate-800 dark:text-white mb-4">Featured <span class="text-primary-600 dark:text-primary-500">Projects</span></h2> | |
| <div class="w-20 h-1 bg-primary-600 dark:bg-primary-500 mx-auto"></div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Project 1 --> | |
| <div class="project-card bg-white dark:bg-slate-800 rounded-xl overflow-hidden shadow-md hover:shadow-xl transition duration-300"> | |
| <div class="relative h-48 overflow-hidden"> | |
| <img src="http://static.photos/technology/640x360/1" alt="Autonomous Drone Navigation" class="project-image w-full h-full object-cover transition duration-500"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-4"> | |
| <h3 class="text-xl font-bold text-white">Autonomous Drone Navigation</h3> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="px-3 py-1 bg-primary-100 dark:bg-slate-700 text-primary-800 dark:text-primary-400 text-xs rounded-full">Computer Vision</span> | |
| <span class="px-3 py-1 bg-primary-100 dark:bg-slate-700 text-primary-800 dark:text-primary-400 text-xs rounded-full">Deep Learning</span> | |
| <span class="px-3 py-1 bg-primary-100 dark:bg-slate-700 text-primary-800 dark:text-primary-400 text-xs rounded-full">ROS</span> | |
| </div> | |
| <p class="text-slate-600 dark:text-slate-300 mb-4"> | |
| Developed a vision-based autonomous navigation system for drones using YOLOv5 and reinforcement learning, achieving 95% accuracy in obstacle avoidance. | |
| </p> | |
| <div class="flex justify-between items-center"> | |
| <a href="#" class="text-primary-600 dark:text-primary-500 hover:underline flex items-center"> | |
| <i data-feather="github" class="mr-1"></i> View Code | |
| </a> | |
| <a href="#" class="text-slate-600 dark:text-slate-300 hover:text-primary-600 dark:hover:text-primary-500 flex items-center"> | |
| <i data-feather="external-link" class="mr-1"></i> Live Demo | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 2 --> | |
| <div class="project-card bg-white dark:bg-slate-800 rounded-xl overflow-hidden shadow-md hover:shadow-xl transition duration-300"> | |
| <div class="relative h-48 overflow-hidden"> | |
| <img src="http://static.photos/technology/640x360/2" alt="Medical Diagnosis AI" class="project-image w-full h-full object-cover transition duration-500"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-4"> | |
| <h3 class="text-xl font-bold text-white">Medical Diagnosis AI</h3> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="px-3 py-1 bg-primary-100 dark:bg-slate-700 text-primary-800 dark:text-primary-400 text-xs rounded-full">Healthcare</span> | |
| <span class="px-3 py-1 bg-primary-100 dark:bg-slate-700 text-primary-800 dark:text-primary-400 text-xs rounded-full">TensorFlow</span> | |
| <span class="px-3 py-1 bg-primary-100 dark:bg-slate-700 text-primary-800 dark:text-primary-400 text-xs rounded-full">CNN</span> | |
| </div> | |
| <p class="text-slate-600 dark:text-slate-300 mb-4"> | |
| Built a deep learning system for early detection of diabetic retinopathy from retinal images with 97% accuracy, deployed in 5 hospitals. | |
| </p> | |
| <div class="flex justify-between items-center"> | |
| <a href="#" class="text-primary-600 dark:text-primary-500 hover:underline flex items-center"> | |
| <i data-feather="github" class="mr-1"></i> View Code | |
| </a> | |
| <a href="#" class="text-slate-600 dark:text-slate-300 hover:text-primary-600 dark:hover:text-primary-500 flex items-center"> | |
| <i data-feather="external-link" class="mr-1"></i> Case Study | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 3 --> | |
| <div class="project-card bg-white dark:bg-slate-800 rounded-xl overflow-hidden shadow-md hover:shadow-xl transition duration-300"> | |
| <div class="relative h-48 overflow-hidden"> | |
| <img src="http://static.photos/technology/640x360/3" alt="Sentiment Analysis API" class="project-image w-full h-full object-cover transition duration-500"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-4"> | |
| <h3 class="text-xl font-bold text-white">Sentiment Analysis API</h3> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="px-3 py-1 bg-primary-100 dark:bg-slate-700 text-primary-800 dark:text-primary-400 text-xs rounded-full">NLP</span> | |
| <span class="px-3 py-1 bg-primary-100 dark:bg-slate-700 text-primary-800 dark:text-primary-400 text-xs rounded-full">Transformers</span> | |
| <span class="px-3 py-1 bg-primary-100 dark:bg-slate-700 text-primary-800 dark:text-primary-400 text-xs rounded-full">FastAPI</span> | |
| </div> | |
| <p class="text-slate-600 dark:text-slate-300 mb-4"> | |
| Created a multilingual sentiment analysis API using BERT that processes 10K+ requests per second with 93% accuracy across 15 languages. | |
| </p> | |
| <div class="flex justify-between items-center"> | |
| <a href="#" class="text-primary-600 dark:text-primary-500 hover:underline flex items-center"> | |
| <i data-feather="github" class="mr-1"></i> View Code | |
| </a> | |
| <a href="#" class="text-slate-600 dark:text-slate-300 hover:text-primary-600 dark:hover:text-primary-500 flex items-center"> | |
| <i data-feather="external-link" class="mr-1"></i> API Docs | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 4 --> | |
| <div class="project-card bg-white dark:bg-slate-800 rounded-xl overflow-hidden shadow-md hover:shadow-xl transition duration-300"> | |
| <div class="relative h-48 overflow-hidden"> | |
| <img src="http://static.photos/technology/640x360/4" alt="Smart Factory System" class="project-image w-full h-full object-cover transition duration-500"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-4"> | |
| <h3 class="text-xl font-bold text-white">Smart Factory System</h3> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="px-3 py-1 bg-primary-100 dark:bg-slate-700 text-primary-800 dark:text-primary-400 text-xs rounded-full">IoT</span> | |
| <span class="px-3 py-1 bg-primary-100 dark:bg-slate-700 text-primary-800 dark:text-primary-400 text-xs rounded-full">Edge AI</span> | |
| <span class="px-3 py-1 bg-primary-100 dark:bg-slate-700 text-primary-800 dark:text-primary-400 text-xs rounded-full">Time Series</span> | |
| </div> | |
| <p class="text-slate-600 dark:text-slate-300 mb-4"> | |
| Implemented an AI-powered predictive maintenance system for manufacturing equipment, reducing downtime by 45%. | |
| </p> | |
| <div class="flex justify-between items-center"> | |
| <a href="#" class="text-primary-600 dark:text-primary-500 hover:underline flex items-center"> | |
| <i data-feather="github" class="mr-1"></i> View Code | |
| </a> | |
| <a href="#" class="text-slate-600 dark:text-slate-300 hover:text-primary-600 dark:hover:text-primary-500 flex items-center"> | |
| <i data-feather="external-link" class="mr-1"></i> Whitepaper | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 5 --> | |
| <div class="project-card bg-white dark:bg-slate-800 rounded-xl overflow-hidden shadow-md hover:shadow-xl transition duration-300"> | |
| <div class="relative h-48 overflow-hidden"> | |
| <img src="http://static.photos/technology/640x360/5" alt="Facial Authentication" class="project-image w-full h-full object-cover transition duration-500"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-4"> | |
| <h3 class="text-xl font-bold text-white">Facial Authentication</h3> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="px-3 py-1 bg-primary-100 dark:bg-slate-700 text-primary-800 dark:text-primary-400 text-xs rounded-full">Face Recognition</span> | |
| <span class="px-3 py-1 bg-primary-100 dark:bg-slate-700 text-primary-800 dark:text-primary-400 text-xs rounded-full">Security</span> | |
| <span class="px-3 py-1 bg-primary-100 dark:bg-slate-700 text-primary-800 dark:text-primary-400 text-xs rounded-full">MTCNN</span> | |
| </div> | |
| <p class="text-slate-600 dark:text-slate-300 mb-4"> | |
| Developed a real-time facial authentication system with anti-spoofing capabilities achieving 99.8% accuracy under various lighting conditions. | |
| </p> | |
| <div class="flex justify-between items-center"> | |
| <a href="#" class="text-primary-600 dark:text-primary-500 hover:underline flex items-center"> | |
| <i data-feather="github" class="mr-1"></i> View Code | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 6 --> | |
| <div class="project-card bg-white dark:bg-slate-800 rounded-xl overflow-hidden shadow-md hover:shadow-xl transition duration-300"> | |
| <div class="relative h-48 overflow-hidden"> | |
| <img src="http://static.photos/technology/640x360/6" alt="Financial Forecasting" class="project-image w-full h-full object-cover transition duration-500"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-4"> | |
| <h3 class="text-xl font-bold text-white">Financial Forecasting</h3> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="px-3 py-1 bg-primary-100 dark:bg-slate-700 text-primary-800 dark:text-primary-400 text-xs rounded-full">Time Series</span> | |
| <span class="px-3 py-1 bg-primary-100 dark:bg-slate-700 text-primary-800 dark:text-primary-400 text-xs rounded-full">LSTM</span> | |
| <span class="px-3 py-1 bg-primary-100 dark:bg-slate-700 text-primary-800 dark:text-primary-400 text-xs rounded-full">Finance</span> | |
| </div> | |
| <p class="text-slate-600 dark:text-slate-300 mb-4"> | |
| Created a hybrid neural network model for stock price prediction that outperformed traditional models by 22% in backtesting. | |
| </p> | |
| <div class="flex justify-between items-center"> | |
| <a href="#" class="text-primary-600 dark:text-primary-500 hover:underline flex items-center"> | |
| <i data-feather="github" class="mr-1"></i> View Code | |
| </a> | |
| <a href="#" class="text-slate-600 dark:text-slate-300 hover:text-primary-600 dark:hover:text-primary-500 flex items-center"> | |
| <i data-feather="external-link" class="mr-1"></i> Research Paper | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <a href="#" class="inline-flex items-center px-6 py-3 border border-primary-600 dark:border-primary-500 text-primary-600 dark:text-primary-500 rounded-lg hover:bg-primary-50 dark:hover:bg-slate-800 transition"> | |
| View All Projects | |
| <i data-feather="arrow-right" class="ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Education Section --> | |
| <section class="py-16 bg-[#f7e1d7] dark:bg-slate-800 section" id="education"> | |
| <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-slate-800 dark:text-white mb-4">My <span class="text-primary-600 dark:text-primary-500">Education</span></h2> | |
| <div class="w-20 h-1 bg-primary-600 dark:bg-primary-500 mx-auto"></div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <!-- Education 1 --> | |
| <div class="bg-white dark:bg-slate-700 rounded-xl shadow-md overflow-hidden"> | |
| <div class="h-48 overflow-hidden"> | |
| <img src="http://static.photos/education/640x360/1" alt="Stanford University" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold text-slate-800 dark:text-white">PhD in Artificial Intelligence</h3> | |
| <p class="text-primary-600 dark:text-primary-500 mb-2">Stanford University</p> | |
| <p class="text-sm text-slate-500 dark:text-slate-400 mb-4">2016 - 2020</p> | |
| <p class="text-slate-600 dark:text-slate-300 mb-4"> | |
| Focused on explainable AI and neural architecture search. Published 8 papers in top-tier conferences. | |
| </p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="px-3 py-1 bg-[#edafb8] dark:bg-slate-600 text-white dark:text-[#edafb8] text-xs rounded-full">Thesis: 4.0 GPA</span> | |
| <span class="px-3 py-1 bg-[#6b9080] dark:bg-slate-600 text-white dark:text-[#6b9080] text-xs rounded-full">Research Fellowship</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Education 2 --> | |
| <div class="bg-white dark:bg-slate-700 rounded-xl shadow-md overflow-hidden"> | |
| <div class="h-48 overflow-hidden"> | |
| <img src="http://static.photos/education/640x360/2" alt="MIT" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold text-slate-800 dark:text-white">MSc in Computer Science</h3> | |
| <p class="text-primary-600 dark:text-primary-500 mb-2">MIT</p> | |
| <p class="text-sm text-slate-500 dark:text-slate-400 mb-4">2014 - 2016</p> | |
| <p class="text-slate-600 dark:text-slate-300 mb-4"> | |
| Specialized in machine learning and data science. Developed novel algorithms for time-series forecasting. | |
| </p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="px-3 py-1 bg-[#edafb8] dark:bg-slate-600 text-white dark:text-[#edafb8] text-xs rounded-full">Summa Cum Laude</span> | |
| <span class="px-3 py-1 bg-[#6b9080] dark:bg-slate-600 text-white dark:text-[#6b9080] text-xs rounded-full">Dean's List</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Education 3 --> | |
| <div class="bg-white dark:bg-slate-700 rounded-xl shadow-md overflow-hidden"> | |
| <div class="h-48 overflow-hidden"> | |
| <img src="http://static.photos/education/640x360/3" alt="UC Berkeley" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold text-slate-800 dark:text-white">BSc in Computer Engineering</h3> | |
| <p class="text-primary-600 dark:text-primary-500 mb-2">UC Berkeley</p> | |
| <p class="text-sm text-slate-500 dark:text-slate-400 mb-4">2010 - 2014</p> | |
| <p class="text-slate-600 dark:text-slate-300 mb-4"> | |
| Double major in Mathematics. Led AI student research group and won 3 national coding competitions. | |
| </p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="px-3 py-1 bg-[#edafb8] dark:bg-slate-600 text-white dark:text-[#edafb8] text-xs rounded-full">Valedictorian</span> | |
| <span class="px-3 py-1 bg-[#6b9080] dark:bg-slate-600 text-white dark:text-[#6b9080] text-xs rounded-full">Gold Medal</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Education 4 --> | |
| <div class="bg-white dark:bg-slate-700 rounded-xl shadow-md overflow-hidden"> | |
| <div class="h-48 overflow-hidden"> | |
| <img src="http://static.photos/education/640x360/4" alt="Certifications" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold text-slate-800 dark:text-white">Certifications</h3> | |
| <p class="text-primary-600 dark:text-primary-500 mb-2">Various Institutions</p> | |
| <p class="text-sm text-slate-500 dark:text-slate-400 mb-4">Ongoing</p> | |
| <p class="text-slate-600 dark:text-slate-300 mb-4"> | |
| Continuous learning through specialized courses and certifications in emerging AI technologies. | |
| </p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="px-3 py-1 bg-[#edafb8] dark:bg-slate-600 text-white dark:text-[#edafb8] text-xs rounded-full">AWS ML</span> | |
| <span class="px-3 py-1 bg-[#6b9080] dark:bg-slate-600 text-white dark:text-[#6b9080] text-xs rounded-full">TensorFlow</span> | |
| <span class="px-3 py-1 bg-[#edafb8] dark:bg-slate-600 text-white dark:text-[#edafb8] text-xs rounded-full">PyTorch</span> | |
| <span class="px-3 py-1 bg-[#6b9080] dark:bg-slate-600 text-white dark:text-[#6b9080] text-xs rounded-full">NLP</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section class="py-16 section" id="contact"> | |
| <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-slate-800 dark:text-white mb-4">Get In <span class="text-primary-600 dark:text-primary-500">Touch</span></h2> | |
| <div class="w-20 h-1 bg-primary-600 dark:bg-primary-500 mx-auto"></div> | |
| </div> | |
| <div class="flex flex-col md:flex-row gap-12"> | |
| <div class="md:w-1/2"> | |
| <h3 class="text-2xl font-semibold text-slate-800 dark:text-white mb-6">Contact Information</h3> | |
| <p class="text-slate-600 dark:text-slate-300 mb-8"> | |
| I'm currently open to new opportunities, collaborations, or just a friendly chat about AI. Feel free to reach out through any of the channels below. | |
| </p> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-primary-100 dark:bg-slate-700 p-3 rounded-lg mr-4"> | |
| <i data-feather="mail" class="text-primary-600 dark:text-primary-400"></i> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-medium text-slate-800 dark:text-white mb-1">Email</h4> | |
| <a href="mailto:alex.chen@example.com" class="text-slate-600 dark:text-slate-300 hover:text-primary-600 dark:hover:text-primary-500 transition">alex.chen@example.com</a> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-primary-100 dark:bg-slate-700 p-3 rounded-lg mr-4"> | |
| <i data-feather="phone" class="text-primary-600 dark:text-primary-400"></i> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-medium text-slate-800 dark:text-white mb-1">Phone</h4> | |
| <a href="tel:+11234567890" class="text-slate-600 dark:text-slate-300 hover:text-primary-600 dark:hover:text-primary-500 transition">+1 (123) 456-7890</a> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-primary-100 dark:bg-slate-700 p-3 rounded-lg mr-4"> | |
| <i data-feather="map-pin" class="text-primary-600 dark:text-primary-400"></i> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-medium text-slate-800 dark:text-white mb-1">Location</h4> | |
| <p class="text-slate-600 dark:text-slate-300">San Francisco, CA</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <h4 class="text-lg font-medium text-slate-800 dark:text-white mb-4">Connect With Me</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="w-10 h-10 bg-primary-100 dark:bg-slate-700 rounded-full flex items-center justify-center text-primary-600 dark:text-primary-400 hover:bg-primary-200 dark:hover:bg-slate-600 transition"> | |
| <i data-feather="github"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-primary-100 dark:bg-slate-700 rounded-full flex items-center justify-center text-primary-600 dark:text-primary-400 hover:bg-primary-200 dark:hover:bg-slate-600 transition"> | |
| <i data-feather="linkedin"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-primary-100 dark:bg-slate-700 rounded-full flex items-center justify-center text-primary-600 dark:text-primary-400 hover:bg-primary-200 dark:hover:bg-slate-600 transition"> | |
| <i data-feather="twitter"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-primary-100 dark:bg-slate-700 rounded-full flex items-center justify-center text-primary-600 dark:text-primary-400 hover:bg-primary-200 dark:hover:bg-slate-600 transition"> | |
| <i data-feather="youtube"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <form class="space-y-6"> | |
| <div> | |
| <label for="name" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Your Name</label> | |
| <input type="text" id="name" class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-slate-600 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:bg-slate-800 dark:text-white transition"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Email Address</label> | |
| <input type="email" id="email" class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-slate-600 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:bg-slate-800 dark:text-white transition"> | |
| </div> | |
| <div> | |
| <label for="subject" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Subject</label> | |
| <input type="text" id="subject" class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-slate-600 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:bg-slate-800 dark:text-white transition"> | |
| </div> | |
| <div> | |
| <label for="message" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Message</label> | |
| <textarea id="message" rows="5" class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-slate-600 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:bg-slate-800 dark:text-white transition"></textarea> | |
| </div> | |
| <button type="submit" class="w-full px-6 py-3 bg-primary-600 hover:bg-primary-700 text-white rounded-lg font-medium transition flex items-center justify-center"> | |
| <i data-feather="send" class="mr-2"></i> Send Message | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-100 dark:bg-slate-800 py-8 border-t border-gray-200 dark:border-slate-700"> | |
| <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <span class="text-xl font-bold text-primary-600 dark:text-primary-500">Alex Chen</span> | |
| <p class="text-sm text-slate-600 dark:text-slate-400 mt-1">AI Engineer & Machine Learning Specialist</p> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-slate-600 dark:text-slate-400 hover:text-primary-600 dark:hover:text-primary-500 transition"> | |
| <i data-feather="github"></i> | |
| </a> | |
| <a href="#" class="text-slate-600 dark:text-slate-400 hover:text-primary-600 dark:hover:text-primary-500 transition"> | |
| <i data-feather="linkedin"></i> | |
| </a> | |
| <a href="#" class="text-slate-600 dark:text-slate-400 hover:text-primary-600 dark:hover:text-primary-500 transition"> | |
| <i data-feather="twitter"></i> | |
| </a> | |
| <a href="#" class="text-slate-600 dark:text-slate-400 hover:text-primary-600 dark:hover:text-primary-500 transition"> | |
| <i data-feather="youtube"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="mt-8 text-center"> | |
| <p class="text-sm text-slate-500 dark:text-slate-400"> | |
| © <span id="current-year"></span> Alex Chen. All rights reserved. | |
| </p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Set current year in footer | |
| document.getElementById('current-year').textContent = new Date().getFullYear(); | |
| // Mobile menu toggle | |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // Theme toggle | |
| const themeToggle = document.getElementById('theme-toggle'); | |
| const mobileThemeToggle = document.getElementById('mobile-theme-toggle'); | |
| const html = document.documentElement; | |
| function toggleTheme() { | |
| html.classList.toggle('dark'); | |
| localStorage.setItem('theme', html.classList.contains('dark') ? 'dark' : 'light'); | |
| } | |
| themeToggle.addEventListener('click', toggleTheme); | |
| mobileThemeToggle.addEventListener('click', toggleTheme); | |
| // Set initial theme based on preference | |
| if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) { | |
| html.classList.add('dark'); | |
| } | |
| // Initialize Vanta.js background | |
| VANTA.NET({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x6b9080, | |
| backgroundColor: 0xf8f9fa, | |
| points: 10.00, | |
| maxDistance: 25.00, | |
| spacing: 18.00 | |
| }); | |
| // Update Vanta.js on theme change | |
| const observer = new MutationObserver(function(mutations) { | |
| mutations.forEach(function(mutation) { | |
| if (mutation.attributeName === "class") { | |
| const vanta = document.querySelector('#vanta-bg > canvas'); | |
| if (vanta) vanta.style.backgroundColor = '#f8f9fa'; | |
| } | |
| }); | |
| }); | |
| observer.observe(html, { attributes: true }); | |
| // Initialize feather icons | |
| feather.replace(); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| targetElement.scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| // Close mobile menu if open | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |