|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>AI Engineer Portfolio</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
scroll-behavior: smooth; |
|
|
} |
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #1e3a8a 0%, #06b6d4 100%); |
|
|
} |
|
|
.typing-text::after { |
|
|
content: "|"; |
|
|
animation: blink 1s infinite; |
|
|
} |
|
|
@keyframes blink { |
|
|
0%, 100% { opacity: 1; } |
|
|
50% { opacity: 0; } |
|
|
} |
|
|
.project-card: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); |
|
|
} |
|
|
.skill-bar { |
|
|
transition: width 1.5s ease-in-out; |
|
|
} |
|
|
.dark-mode { |
|
|
background-color: #1a202c; |
|
|
color: #f7fafc; |
|
|
} |
|
|
.dark-mode .bg-white { |
|
|
background-color: #2d3748; |
|
|
color: #f7fafc; |
|
|
} |
|
|
.dark-mode .text-gray-800 { |
|
|
color: #f7fafc; |
|
|
} |
|
|
.dark-mode .border-gray-200 { |
|
|
border-color: #4a5568; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 text-gray-800 transition-colors duration-300"> |
|
|
|
|
|
<nav class="bg-white shadow-sm fixed w-full z-10 dark:bg-gray-800"> |
|
|
<div class="max-w-7xl 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-blue-600 dark:text-cyan-400">AI Portfolio</span> |
|
|
</div> |
|
|
<div class="hidden md:flex items-center space-x-8"> |
|
|
<a href="#home" class="text-gray-700 hover:text-blue-600 px-3 py-2 dark:text-gray-300 dark:hover:text-cyan-400">Home</a> |
|
|
<a href="#about" class="text-gray-700 hover:text-blue-600 px-3 py-2 dark:text-gray-300 dark:hover:text-cyan-400">About</a> |
|
|
<a href="#projects" class="text-gray-700 hover:text-blue-600 px-3 py-2 dark:text-gray-300 dark:hover:text-cyan-400">Projects</a> |
|
|
<a href="#skills" class="text-gray-700 hover:text-blue-600 px-3 py-2 dark:text-gray-300 dark:hover:text-cyan-400">Skills</a> |
|
|
<a href="#contact" class="text-gray-700 hover:text-blue-600 px-3 py-2 dark:text-gray-300 dark:hover:text-cyan-400">Contact</a> |
|
|
<button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700"> |
|
|
<i class="fas fa-moon text-gray-700 dark:text-yellow-300"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="md:hidden flex items-center"> |
|
|
<button id="mobile-menu-button" class="p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700"> |
|
|
<i class="fas fa-bars text-gray-700 dark:text-gray-300"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="mobile-menu" class="hidden md:hidden bg-white dark:bg-gray-800"> |
|
|
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> |
|
|
<a href="#home" class="block px-3 py-2 text-gray-700 hover:text-blue-600 dark:text-gray-300 dark:hover:text-cyan-400">Home</a> |
|
|
<a href="#about" class="block px-3 py-2 text-gray-700 hover:text-blue-600 dark:text-gray-300 dark:hover:text-cyan-400">About</a> |
|
|
<a href="#projects" class="block px-3 py-2 text-gray-700 hover:text-blue-600 dark:text-gray-300 dark:hover:text-cyan-400">Projects</a> |
|
|
<a href="#skills" class="block px-3 py-2 text-gray-700 hover:text-blue-600 dark:text-gray-300 dark:hover:text-cyan-400">Skills</a> |
|
|
<a href="#contact" class="block px-3 py-2 text-gray-700 hover:text-blue-600 dark:text-gray-300 dark:hover:text-cyan-400">Contact</a> |
|
|
<button id="theme-toggle-mobile" class="block px-3 py-2 text-left text-gray-700 hover:text-blue-600 dark:text-gray-300 dark:hover:text-cyan-400"> |
|
|
Toggle Dark Mode |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section id="home" class="gradient-bg text-white pt-32 pb-20 px-4 sm:px-6 lg:px-8"> |
|
|
<div class="max-w-7xl mx-auto flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-10 md:mb-0"> |
|
|
<h1 class="text-4xl md:text-5xl font-bold mb-4">Hi, I'm <span class="text-cyan-300">Alex Chen</span></h1> |
|
|
<div class="text-2xl md:text-3xl font-semibold mb-6"> |
|
|
<span class="typing-text" id="typing-text">AI Engineer</span> |
|
|
</div> |
|
|
<p class="text-lg mb-8 max-w-lg">Passionate about building intelligent solutions using artificial intelligence and machine learning to solve real-world problems.</p> |
|
|
<div class="flex flex-wrap gap-4"> |
|
|
<a href="#" class="bg-cyan-500 hover:bg-cyan-600 text-white font-bold py-3 px-6 rounded-lg transition duration-300 flex items-center"> |
|
|
<i class="fas fa-download mr-2"></i> Download Resume |
|
|
</a> |
|
|
<a href="#contact" class="bg-transparent hover:bg-white hover:text-blue-800 text-white font-bold py-3 px-6 border-2 border-white rounded-lg transition duration-300 flex items-center"> |
|
|
<i class="fas fa-paper-plane mr-2"></i> Get in Touch |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 flex justify-center"> |
|
|
<div class="relative w-64 h-64 sm:w-80 sm:h-80"> |
|
|
<div class="absolute inset-0 bg-cyan-400 rounded-full opacity-20 blur-xl animate-pulse"></div> |
|
|
<img src="https://images.unsplash.com/photo-1571171637578-41bc2dd41cd2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80" |
|
|
alt="AI Engineer" |
|
|
class="relative w-full h-full object-cover rounded-full border-4 border-white shadow-xl"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="about" class="py-20 px-4 sm:px-6 lg:px-8 bg-white dark:bg-gray-800"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12 dark:text-white">About Me</h2> |
|
|
<div class="flex flex-col lg:flex-row gap-12"> |
|
|
<div class="lg:w-1/2"> |
|
|
<h3 class="text-2xl font-semibold mb-4 text-blue-600 dark:text-cyan-400">Who I Am</h3> |
|
|
<p class="text-gray-700 mb-6 dark:text-gray-300"> |
|
|
I'm a Computer Science graduate with a specialization in Artificial Intelligence from Stanford University. |
|
|
My journey in AI began when I built my first neural network to predict stock prices, and I've been fascinated |
|
|
by the potential of machine learning ever since. |
|
|
</p> |
|
|
<p class="text-gray-700 mb-6 dark:text-gray-300"> |
|
|
Currently, I'm working as an AI Research Intern at DeepMind, where I contribute to cutting-edge research in |
|
|
reinforcement learning and natural language processing. My goal is to develop AI systems that are not only |
|
|
powerful but also ethical and beneficial to society. |
|
|
</p> |
|
|
<p class="text-gray-700 dark:text-gray-300"> |
|
|
When I'm not coding, you can find me reading research papers, participating in Kaggle competitions, or |
|
|
mentoring students in AI through various online platforms. |
|
|
</p> |
|
|
</div> |
|
|
<div class="lg:w-1/2"> |
|
|
<h3 class="text-2xl font-semibold mb-4 text-blue-600 dark:text-cyan-400">My Strengths</h3> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
|
<div class="bg-gray-100 p-4 rounded-lg dark:bg-gray-700"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-3 dark:bg-blue-900"> |
|
|
<i class="fas fa-brain text-blue-600 dark:text-blue-300"></i> |
|
|
</div> |
|
|
<h4 class="font-semibold dark:text-white">Deep Learning</h4> |
|
|
</div> |
|
|
<p class="text-gray-600 dark:text-gray-300">Specialized in neural networks, CNN, RNN, and Transformers.</p> |
|
|
</div> |
|
|
<div class="bg-gray-100 p-4 rounded-lg dark:bg-gray-700"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center mr-3 dark:bg-green-900"> |
|
|
<i class="fas fa-chart-line text-green-600 dark:text-green-300"></i> |
|
|
</div> |
|
|
<h4 class="font-semibold dark:text-white">Data Analysis</h4> |
|
|
</div> |
|
|
<p class="text-gray-600 dark:text-gray-300">Expert in extracting insights from complex datasets.</p> |
|
|
</div> |
|
|
<div class="bg-gray-100 p-4 rounded-lg dark:bg-gray-700"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center mr-3 dark:bg-purple-900"> |
|
|
<i class="fas fa-comments text-purple-600 dark:text-purple-300"></i> |
|
|
</div> |
|
|
<h4 class="font-semibold dark:text-white">NLP</h4> |
|
|
</div> |
|
|
<p class="text-gray-600 dark:text-gray-300">Experience with BERT, GPT, and other language models.</p> |
|
|
</div> |
|
|
<div class="bg-gray-100 p-4 rounded-lg dark:bg-gray-700"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="w-8 h-8 bg-red-100 rounded-full flex items-center justify-center mr-3 dark:bg-red-900"> |
|
|
<i class="fas fa-eye text-red-600 dark:text-red-300"></i> |
|
|
</div> |
|
|
<h4 class="font-semibold dark:text-white">Computer Vision</h4> |
|
|
</div> |
|
|
<p class="text-gray-600 dark:text-gray-300">Skilled in image classification and object detection.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="projects" class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-50 dark:bg-gray-900"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12 dark:text-white">My Projects</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="project-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300 dark:bg-gray-800"> |
|
|
<div class="h-48 overflow-hidden"> |
|
|
<img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=765&q=80" |
|
|
alt="Medical Diagnosis AI" |
|
|
class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center mb-3"> |
|
|
<div class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded dark:bg-blue-900 dark:text-blue-300"> |
|
|
Deep Learning |
|
|
</div> |
|
|
<div class="bg-green-100 text-green-800 text-xs font-semibold px-2.5 py-0.5 rounded ml-2 dark:bg-green-900 dark:text-green-300"> |
|
|
Healthcare |
|
|
</div> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-2 dark:text-white">AI-Powered Medical Diagnosis</h3> |
|
|
<p class="text-gray-600 mb-4 dark:text-gray-300"> |
|
|
A deep learning model that analyzes medical images to detect early signs of diseases with 94% accuracy. |
|
|
</p> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="text-xs bg-gray-100 text-gray-800 px-2 py-1 rounded dark:bg-gray-700 dark:text-gray-300">Python</span> |
|
|
<span class="text-xs bg-gray-100 text-gray-800 px-2 py-1 rounded dark:bg-gray-700 dark:text-gray-300">TensorFlow</span> |
|
|
<span class="text-xs bg-gray-100 text-gray-800 px-2 py-1 rounded dark:bg-gray-700 dark:text-gray-300">OpenCV</span> |
|
|
</div> |
|
|
<div class="flex justify-between"> |
|
|
<a href="#" class="text-blue-600 hover:text-blue-800 font-medium flex items-center dark:text-cyan-400 dark:hover:text-cyan-300"> |
|
|
<i class="fab fa-github mr-2"></i> View Code |
|
|
</a> |
|
|
<a href="#" class="text-gray-600 hover:text-gray-800 font-medium flex items-center dark:text-gray-400 dark:hover:text-gray-300"> |
|
|
<i class="fas fa-external-link-alt mr-2"></i> Live Demo |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="project-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300 dark:bg-gray-800"> |
|
|
<div class="h-48 overflow-hidden"> |
|
|
<img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" |
|
|
alt="Sentiment Analysis" |
|
|
class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center mb-3"> |
|
|
<div class="bg-purple-100 text-purple-800 text-xs font-semibold px-2.5 py-0.5 rounded dark:bg-purple-900 dark:text-purple-300"> |
|
|
NLP |
|
|
</div> |
|
|
<div class="bg-yellow-100 text-yellow-800 text-xs font-semibold px-2.5 py-0.5 rounded ml-2 dark:bg-yellow-900 dark:text-yellow-300"> |
|
|
Social Media |
|
|
</div> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-2 dark:text-white">Real-time Sentiment Analysis</h3> |
|
|
<p class="text-gray-600 mb-4 dark:text-gray-300"> |
|
|
A transformer-based model that analyzes social media posts to determine public sentiment on trending topics. |
|
|
</p> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="text-xs bg-gray-100 text-gray-800 px-2 py-1 rounded dark:bg-gray-700 dark:text-gray-300">Python</span> |
|
|
<span class="text-xs bg-gray-100 text-gray-800 px-2 py-1 rounded dark:bg-gray-700 dark:text-gray-300">PyTorch</span> |
|
|
<span class="text-xs bg-gray-100 text-gray-800 px-2 py-1 rounded dark:bg-gray-700 dark:text-gray-300">HuggingFace</span> |
|
|
</div> |
|
|
<div class="flex justify-between"> |
|
|
<a href="#" class="text-blue-600 hover:text-blue-800 font-medium flex items-center dark:text-cyan-400 dark:hover:text-cyan-300"> |
|
|
<i class="fab fa-github mr-2"></i> View Code |
|
|
</a> |
|
|
<a href="#" class="text-gray-600 hover:text-gray-800 font-medium flex items-center dark:text-gray-400 dark:hover:text-gray-300"> |
|
|
<i class="fas fa-external-link-alt mr-2"></i> Live Demo |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="project-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300 dark:bg-gray-800"> |
|
|
<div class="h-48 overflow-hidden"> |
|
|
<img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" |
|
|
alt="Autonomous Vehicle" |
|
|
class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center mb-3"> |
|
|
<div class="bg-red-100 text-red-800 text-xs font-semibold px-2.5 py-0.5 rounded dark:bg-red-900 dark:text-red-300"> |
|
|
Computer Vision |
|
|
</div> |
|
|
<div class="bg-indigo-100 text-indigo-800 text-xs font-semibold px-2.5 py-0.5 rounded ml-2 dark:bg-indigo-900 dark:text-indigo-300"> |
|
|
Robotics |
|
|
</div> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-2 dark:text-white">Autonomous Vehicle Simulation</h3> |
|
|
<p class="text-gray-600 mb-4 dark:text-gray-300"> |
|
|
A reinforcement learning system that enables self-driving cars to navigate complex urban environments. |
|
|
</p> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="text-xs bg-gray-100 text-gray-800 px-2 py-1 rounded dark:bg-gray-700 dark:text-gray-300">Python</span> |
|
|
<span class="text-xs bg-gray-100 text-gray-800 px-2 py-1 rounded dark:bg-gray-700 dark:text-gray-300">OpenAI Gym</span> |
|
|
<span class="text-xs bg-gray-100 text-gray-800 px-2 py-1 rounded dark:bg-gray-700 dark:text-gray-300">CARLA</span> |
|
|
</div> |
|
|
<div class="flex justify-between"> |
|
|
<a href="#" class="text-blue-600 hover:text-blue-800 font-medium flex items-center dark:text-cyan-400 dark:hover:text-cyan-300"> |
|
|
<i class="fab fa-github mr-2"></i> View Code |
|
|
</a> |
|
|
<a href="#" class="text-gray-600 hover:text-gray-800 font-medium flex items-center dark:text-gray-400 dark:hover:text-gray-300"> |
|
|
<i class="fas fa-external-link-alt mr-2"></i> Live Demo |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-center mt-12"> |
|
|
<a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 transition duration-300 dark:bg-cyan-600 dark:hover:bg-cyan-700"> |
|
|
View All Projects |
|
|
<i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="skills" class="py-20 px-4 sm:px-6 lg:px-8 bg-white dark:bg-gray-800"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12 dark:text-white">Technical Skills</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-12"> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-xl font-semibold mb-6 flex items-center dark:text-white"> |
|
|
<i class="fas fa-code mr-3 text-blue-600 dark:text-cyan-400"></i> |
|
|
Programming Languages |
|
|
</h3> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="font-medium text-gray-700 dark:text-gray-300">Python</span> |
|
|
<span class="text-sm font-medium text-gray-500 dark:text-gray-400">95%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700"> |
|
|
<div class="skill-bar bg-blue-600 h-2.5 rounded-full dark:bg-cyan-500" style="width: 95%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="font-medium text-gray-700 dark:text-gray-300">C++</span> |
|
|
<span class="text-sm font-medium text-gray-500 dark:text-gray-400">85%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700"> |
|
|
<div class="skill-bar bg-blue-600 h-2.5 rounded-full dark:bg-cyan-500" style="width: 85%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="font-medium text-gray-700 dark:text-gray-300">JavaScript</span> |
|
|
<span class="text-sm font-medium text-gray-500 dark:text-gray-400">75%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700"> |
|
|
<div class="skill-bar bg-blue-600 h-2.5 rounded-full dark:bg-cyan-500" style="width: 75%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="font-medium text-gray-700 dark:text-gray-300">R</span> |
|
|
<span class="text-sm font-medium text-gray-500 dark:text-gray-400">70%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700"> |
|
|
<div class="skill-bar bg-blue-600 h-2.5 rounded-full dark:bg-cyan-500" style="width: 70%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<h3 class="text-xl font-semibold mb-6 flex items-center dark:text-white"> |
|
|
<i class="fas fa-brain mr-3 text-purple-600 dark:text-purple-400"></i> |
|
|
ML/DL Frameworks |
|
|
</h3> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="font-medium text-gray-700 dark:text-gray-300">TensorFlow</span> |
|
|
<span class="text-sm font-medium text-gray-500 dark:text-gray-400">90%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700"> |
|
|
<div class="skill-bar bg-purple-600 h-2.5 rounded-full dark:bg-purple-500" style="width: 90%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="font-medium text-gray-700 dark:text-gray-300">PyTorch</span> |
|
|
<span class="text-sm font-medium text-gray-500 dark:text-gray-400">88%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700"> |
|
|
<div class="skill-bar bg-purple-600 h-2.5 rounded-full dark:bg-purple-500" style="width: 88%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="font-medium text-gray-700 dark:text-gray-300">Scikit-learn</span> |
|
|
<span class="text-sm font-medium text-gray-500 dark:text-gray-400">92%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700"> |
|
|
<div class="skill-bar bg-purple-600 h-2.5 rounded-full dark:bg-purple-500" style="width: 92%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="font-medium text-gray-700 dark:text-gray-300">Keras</span> |
|
|
<span class="text-sm font-medium text-gray-500 dark:text-gray-400">85%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700"> |
|
|
<div class="skill-bar bg-purple-600 h-2.5 rounded-full dark:bg-purple-500" style="width: 85%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<h3 class="text-xl font-semibold mb-6 flex items-center dark:text-white"> |
|
|
<i class="fas fa-tools mr-3 text-green-600 dark:text-green-400"></i> |
|
|
Tools & Platforms |
|
|
</h3> |
|
|
<div class="flex flex-wrap gap-3"> |
|
|
<div class="flex items-center bg-gray-100 px-3 py-2 rounded-lg dark:bg-gray-700"> |
|
|
<i class="fab fa-git-alt text-gray-700 mr-2 dark:text-gray-300"></i> |
|
|
<span class="text-gray-700 dark:text-gray-300">Git</span> |
|
|
</div> |
|
|
<div class="flex items-center bg-gray-100 px-3 py-2 rounded-lg dark:bg-gray-700"> |
|
|
<i class="fas fa-server text-gray-700 mr-2 dark:text-gray-300"></i> |
|
|
<span class="text-gray-700 dark:text-gray-300">Docker</span> |
|
|
</div> |
|
|
<div class="flex items-center bg-gray-100 px-3 py-2 rounded-lg dark:bg-gray-700"> |
|
|
<i class="fas fa-cloud text-gray-700 mr-2 dark:text-gray-300"></i> |
|
|
<span class="text-gray-700 dark:text-gray-300">AWS</span> |
|
|
</div> |
|
|
<div class="flex items-center bg-gray-100 px-3 py-2 rounded-lg dark:bg-gray-700"> |
|
|
<i class="fas fa-terminal text-gray-700 mr-2 dark:text-gray-300"></i> |
|
|
<span class="text-gray-700 dark:text-gray-300">Linux</span> |
|
|
</div> |
|
|
<div class="flex items-center bg-gray-100 px-3 py-2 rounded-lg dark:bg-gray-700"> |
|
|
<i class="fas fa-code-branch text-gray-700 mr-2 dark:text-gray-300"></i> |
|
|
<span class="text-gray-700 dark:text-gray-300">Jupyter</span> |
|
|
</div> |
|
|
<div class="flex items-center bg-gray-100 px-3 py-2 rounded-lg dark:bg-gray-700"> |
|
|
<i class="fas fa-database text-gray-700 mr-2 dark:text-gray-300"></i> |
|
|
<span class="text-gray-700 dark:text-gray-300">SQL</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<h3 class="text-xl font-semibold mb-6 flex items-center dark:text-white"> |
|
|
<i class="fas fa-chart-bar mr-3 text-yellow-600 dark:text-yellow-400"></i> |
|
|
Data Processing |
|
|
</h3> |
|
|
<div class="grid grid-cols-2 gap-3"> |
|
|
<div class="flex items-center bg-gray-100 px-3 py-2 rounded-lg dark:bg-gray-700"> |
|
|
<i class="fab fa-python text-gray-700 mr-2 dark:text-gray-300"></i> |
|
|
<span class="text-gray-700 dark:text-gray-300">Pandas</span> |
|
|
</div> |
|
|
<div class="flex items-center bg-gray-100 px-3 py-2 rounded-lg dark:bg-gray-700"> |
|
|
<i class="fas fa-calculator text-gray-700 mr-2 dark:text-gray-300"></i> |
|
|
<span class="text-gray-700 dark:text-gray-300">NumPy</span> |
|
|
</div> |
|
|
<div class="flex items-center bg-gray-100 px-3 py-2 rounded-lg dark:bg-gray-700"> |
|
|
<i class="fas fa-chart-line text-gray-700 mr-2 dark:text-gray-300"></i> |
|
|
<span class="text-gray-700 dark:text-gray-300">Matplotlib</span> |
|
|
</div> |
|
|
<div class="flex items-center bg-gray-100 px-3 py-2 rounded-lg dark:bg-gray-700"> |
|
|
<i class="fas fa-chart-pie text-gray-700 mr-2 dark:text-gray-300"></i> |
|
|
<span class="text-gray-700 dark:text-gray-300">Seaborn</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-50 dark:bg-gray-900"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12 dark:text-white">Certifications & Courses</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-md dark:bg-gray-800"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/Deep_Learning_Logo.png/220px-Deep_Learning_Logo.png" |
|
|
alt="Deep Learning Specialization" |
|
|
class="w-16 h-16 object-contain mr-4"> |
|
|
<div> |
|
|
<h3 class="font-bold text-lg dark:text-white">Deep Learning Specialization</h3> |
|
|
<p class="text-gray-600 text-sm dark:text-gray-400">DeepLearning.AI</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-700 mb-4 dark:text-gray-300"> |
|
|
Mastered neural networks, CNNs, RNNs, and Transformers through hands-on projects. |
|
|
</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-sm text-gray-500 dark:text-gray-400">Completed: May 2022</span> |
|
|
<a href="#" class="text-blue-600 hover:text-blue-800 text-sm font-medium dark:text-cyan-400 dark:hover:text-cyan-300"> |
|
|
View Certificate |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-md dark:bg-gray-800"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/Deep_Learning_Logo.png/220px-Deep_Learning_Logo.png" |
|
|
alt="Machine Learning" |
|
|
class="w-16 h-16 object-contain mr-4"> |
|
|
<div> |
|
|
<h3 class="font-bold text-lg dark:text-white">Machine Learning</h3> |
|
|
<p class="text-gray-600 text-sm dark:text-gray-400">Stanford University</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-700 mb-4 dark:text-gray-300"> |
|
|
Learned fundamentals of machine learning algorithms and their practical applications. |
|
|
</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-sm text-gray-500 dark:text-gray-400">Completed: Dec 2021</span> |
|
|
<a href="#" class="text-blue-600 hover:text-blue-800 text-sm font-medium dark:text-cyan-400 dark:hover:text-cyan-300"> |
|
|
View Certificate |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-md dark:bg-gray-800"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/Deep_Learning_Logo.png/220px-Deep_Learning_Logo.png" |
|
|
alt="TensorFlow Developer" |
|
|
class="w-16 h-16 object-contain mr-4"> |
|
|
<div> |
|
|
<h3 class="font-bold text-lg dark:text-white">TensorFlow Developer</h3> |
|
|
<p class="text-gray-600 text-sm dark:text-gray-400">Google</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-700 mb-4 dark:text-gray-300"> |
|
|
Gained practical skills in building and training models with TensorFlow. |
|
|
</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-sm text-gray-500 dark:text-gray-400">Completed: Aug 2022</span> |
|
|
<a href="#" class="text-blue-600 hover:text-blue-800 text-sm font-medium dark:text-cyan-400 dark:hover:text-cyan-300"> |
|
|
View Certificate |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="contact" class="py-20 px-4 sm:px-6 lg:px-8 bg-white dark:bg-gray-800"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12 dark:text-white">Get In Touch</h2> |
|
|
<div class="flex flex-col lg:flex-row gap-12"> |
|
|
<div class="lg:w-1/2"> |
|
|
<h3 class="text-xl font-semibold mb-4 dark:text-white">Let's Talk About AI</h3> |
|
|
<p class="text-gray-700 mb-6 dark:text-gray-300"> |
|
|
I'm always open to discussing AI projects, research opportunities, or potential collaborations. |
|
|
Whether you have a question or just want to say hi, I'll try my best to get back to you! |
|
|
</p> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-4 dark:bg-blue-900"> |
|
|
<i class="fas fa-envelope text-blue-600 dark:text-blue-300"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-500 text-sm dark:text-gray-400">Email me at</p> |
|
|
<a href="mailto:alex.chen@aiengineer.com" class="text-gray-800 font-medium hover:text-blue-600 dark:text-white dark:hover:text-cyan-400">alex.chen@aiengineer.com</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-4 dark:bg-green-900"> |
|
|
<i class="fas fa-map-marker-alt text-green-600 dark:text-green-300"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-500 text-sm dark:text-gray-400">Based in</p> |
|
|
<p class="text-gray-800 font-medium dark:text-white">San Francisco, CA</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-8"> |
|
|
<h4 class="text-lg font-semibold mb-4 dark:text-white">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-600 hover:text-white transition duration-300 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-blue-600"> |
|
|
<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-900 hover:text-white transition duration-300 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-900"> |
|
|
<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-400 hover:text-white transition duration-300 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-blue-400"> |
|
|
<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-red-600 hover:text-white transition duration-300 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-red-600"> |
|
|
<i class="fab fa-youtube"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="lg:w-1/2"> |
|
|
<form class="space-y-6"> |
|
|
<div> |
|
|
<label for="name" class="block text-sm font-medium text-gray-700 mb-1 dark:text-gray-300">Your Name</label> |
|
|
<input type="text" id="name" name="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 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:focus:ring-cyan-500" placeholder="John Doe" required> |
|
|
</div> |
|
|
<div> |
|
|
<label for="email" class="block text-sm font-medium text-gray-700 mb-1 dark:text-gray-300">Email Address</label> |
|
|
<input type="email" id="email" name="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 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:focus:ring-cyan-500" placeholder="john@example.com" required> |
|
|
</div> |
|
|
<div> |
|
|
<label for="subject" class="block text-sm font-medium text-gray-700 mb-1 dark:text-gray-300">Subject</label> |
|
|
<input type="text" id="subject" name="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 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:focus:ring-cyan-500" placeholder="AI Project Collaboration"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="message" class="block text-sm font-medium text-gray-700 mb-1 dark:text-gray-300">Message</label> |
|
|
<textarea id="message" name="message" rows="5" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:focus:ring-cyan-500" placeholder="Tell me about your project..." required></textarea> |
|
|
</div> |
|
|
<button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300 flex items-center justify-center dark:bg-cyan-600 dark:hover:bg-cyan-700"> |
|
|
<i class="fas fa-paper-plane mr-2"></i> Send Message |
|
|
</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<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"> |
|
|
<h2 class="text-2xl font-bold">Alex Chen</h2> |
|
|
<p class="text-gray-400 mt-2">AI Engineer | ML Enthusiast | Data Explorer</p> |
|
|
</div> |
|
|
<div class="flex space-x-6"> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition duration-300"> |
|
|
<i class="fab fa-linkedin-in text-xl"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition duration-300"> |
|
|
<i class="fab fa-github text-xl"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition duration-300"> |
|
|
<i class="fab fa-twitter text-xl"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition duration-300"> |
|
|
<i class="fab fa-medium text-xl"></i> |
|
|
</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-400 text-sm mb-4 md:mb-0">© 2023 Alex Chen. All rights reserved.</p> |
|
|
<div class="flex space-x-6"> |
|
|
<a href="#" class="text-gray-400 hover:text-white text-sm transition duration-300">Privacy Policy</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white text-sm transition duration-300">Terms of Service</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white text-sm transition duration-300">Sitemap</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
const typingText = document.getElementById('typing-text'); |
|
|
const jobTitles = ["AI Engineer", "ML Enthusiast", "Data Explorer", "Deep Learning Specialist"]; |
|
|
let currentIndex = 0; |
|
|
let charIndex = 0; |
|
|
let isDeleting = false; |
|
|
let isEnd = false; |
|
|
|
|
|
function type() { |
|
|
const currentText = jobTitles[currentIndex]; |
|
|
|
|
|
if (isDeleting) { |
|
|
typingText.textContent = currentText.substring(0, charIndex - 1); |
|
|
charIndex--; |
|
|
} else { |
|
|
typingText.textContent = currentText.substring(0, charIndex + 1); |
|
|
charIndex++; |
|
|
} |
|
|
|
|
|
if (!isDeleting && charIndex === currentText.length) { |
|
|
isEnd = true; |
|
|
setTimeout(type, 2000); |
|
|
} else if (isDeleting && charIndex === 0) { |
|
|
isDeleting = false; |
|
|
currentIndex = (currentIndex + 1) % jobTitles.length; |
|
|
setTimeout(type, 500); |
|
|
} else { |
|
|
const speed = isDeleting ? 100 : 150; |
|
|
setTimeout(type, speed); |
|
|
} |
|
|
|
|
|
if (isEnd) { |
|
|
isDeleting = true; |
|
|
isEnd = false; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
setTimeout(type, 1000); |
|
|
|
|
|
|
|
|
const mobileMenuButton = document.getElementById('mobile-menu-button'); |
|
|
const mobileMenu = document.getElementById('mobile-menu'); |
|
|
|
|
|
mobileMenuButton.addEventListener('click', () => { |
|
|
mobileMenu.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
const themeToggle = document.getElementById('theme-toggle'); |
|
|
const themeToggleMobile = document.getElementById('theme-toggle-mobile'); |
|
|
const html = document.documentElement; |
|
|
|
|
|
function toggleTheme() { |
|
|
html.classList.toggle('dark'); |
|
|
localStorage.setItem('theme', html.classList.contains('dark') ? 'dark' : 'light'); |
|
|
} |
|
|
|
|
|
themeToggle.addEventListener('click', toggleTheme); |
|
|
themeToggleMobile.addEventListener('click', toggleTheme); |
|
|
|
|
|
|
|
|
if (localStorage.getItem('theme') === 'dark' || |
|
|
(!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) { |
|
|
html.classList.add('dark'); |
|
|
} |
|
|
|
|
|
|
|
|
function animateSkillBars() { |
|
|
const skillBars = document.querySelectorAll('.skill-bar'); |
|
|
skillBars.forEach(bar => { |
|
|
const width = bar.style.width; |
|
|
bar.style.width = '0'; |
|
|
setTimeout(() => { |
|
|
bar.style.width = width; |
|
|
}, 100); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
const observer = new IntersectionObserver((entries) => { |
|
|
entries.forEach(entry => { |
|
|
if (entry.isIntersecting) { |
|
|
animateSkillBars(); |
|
|
observer.unobserve(entry.target); |
|
|
} |
|
|
}); |
|
|
}, { threshold: 0.1 }); |
|
|
|
|
|
const skillsSection = document.getElementById('skills'); |
|
|
if (skillsSection) { |
|
|
observer.observe(skillsSection); |
|
|
} |
|
|
|
|
|
|
|
|
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' |
|
|
}); |
|
|
|
|
|
|
|
|
if (!mobileMenu.classList.contains('hidden')) { |
|
|
mobileMenu.classList.add('hidden'); |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
</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=m-Kairo/portfolio" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
