|
|
<!DOCTYPE html> |
|
|
<html lang="en" class="dark"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Quantum Coder | ML & LLM Specialist</title> |
|
|
<link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
|
|
<link rel="stylesheet" href="style.css"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
darkMode: 'class', |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: '#6d28d9', |
|
|
secondary: '#10b981', |
|
|
dark: '#0f172a', |
|
|
darker: '#020617' |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet"> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
</head> |
|
|
<body class="bg-darker text-gray-200 font-sans antialiased"> |
|
|
<custom-navbar></custom-navbar> |
|
|
|
|
|
|
|
|
<section id="hero" class="min-h-screen flex items-center justify-center relative overflow-hidden"> |
|
|
<div class="absolute inset-0 bg-gradient-to-br from-primary/10 via-darker to-darker z-0"></div> |
|
|
<div class="container mx-auto px-6 py-24 z-10 relative"> |
|
|
<div class="flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-12 md:mb-0"> |
|
|
<h4 class="text-secondary font-mono mb-4">Hi, I'm</h4> |
|
|
<h1 class="text-5xl md:text-7xl font-bold mb-6 leading-tight">Quantum <span class="text-primary">Coder</span></h1> |
|
|
<h2 class="text-xl md:text-2xl mb-6 text-gray-400">ML Engineer & LLM Specialist</h2> |
|
|
<p class="text-gray-400 mb-8 max-w-lg">Building intelligent systems that understand and generate human language.</p> |
|
|
<div class="flex gap-4"> |
|
|
<a href="#projects" class="bg-primary hover:bg-primary/80 text-white px-6 py-3 rounded-md transition-all flex items-center gap-2"> |
|
|
<i data-feather="code"></i> View Projects |
|
|
</a> |
|
|
<a href="#" class="border border-primary text-primary hover:bg-primary/10 px-6 py-3 rounded-md transition-all flex items-center gap-2"> |
|
|
<i data-feather="download"></i> Download CV |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 flex justify-center"> |
|
|
<div class="relative"> |
|
|
<div class="w-64 h-64 md:w-80 md:h-80 bg-gradient-to-br from-primary to-secondary rounded-full opacity-20 blur-3xl absolute -z-10"></div> |
|
|
<img src="http://static.photos/technology/640x360/42" alt="Profile" class="rounded-full w-64 h-64 md:w-80 md:h-80 object-cover border-4 border-primary/50"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="about" class="py-20 bg-dark"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<h2 class="text-3xl font-bold mb-12 text-center"><span class="text-primary">//</span> About Me</h2> |
|
|
<div class="flex flex-col md:flex-row gap-12 items-center"> |
|
|
<div class="md:w-1/3 flex justify-center"> |
|
|
<img src="http://static.photos/workspace/640x360/23" alt="Working" class="rounded-lg w-full max-w-md shadow-xl border border-primary/20"> |
|
|
</div> |
|
|
<div class="md:w-2/3"> |
|
|
<p class="text-gray-400 mb-6 leading-relaxed"> |
|
|
I'm a passionate data scientist and software developer specializing in machine learning and large language models. With 5+ years of experience, I've built intelligent systems that process, understand, and generate human language at scale. |
|
|
</p> |
|
|
<p class="text-gray-400 mb-6 leading-relaxed"> |
|
|
My approach combines cutting-edge ML techniques with robust software engineering principles. I believe in building systems that are not just technically impressive but also practical and maintainable in production environments. |
|
|
</p> |
|
|
<p class="text-gray-400 mb-8 leading-relaxed"> |
|
|
When I'm not training models, you can find me contributing to open-source projects, writing technical blogs, or exploring new developments in AI research. |
|
|
</p> |
|
|
<div class="flex flex-wrap gap-4"> |
|
|
<a href="#" class="flex items-center gap-2 text-gray-400 hover:text-secondary transition-colors"> |
|
|
<i data-feather="github"></i> GitHub |
|
|
</a> |
|
|
<a href="#" class="flex items-center gap-2 text-gray-400 hover:text-secondary transition-colors"> |
|
|
<i data-feather="linkedin"></i> LinkedIn |
|
|
</a> |
|
|
<a href="#" class="flex items-center gap-2 text-gray-400 hover:text-secondary transition-colors"> |
|
|
<i data-feather="twitter"></i> Twitter |
|
|
</a> |
|
|
<a href="#" class="flex items-center gap-2 text-gray-400 hover:text-secondary transition-colors"> |
|
|
<i data-feather="file-text"></i> View Full Resume |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="skills" class="py-20 bg-darker"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<h2 class="text-3xl font-bold mb-12 text-center"><span class="text-primary">//</span> Skills & Technologies</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-dark p-6 rounded-xl border border-gray-800"> |
|
|
<div class="flex items-center gap-3 mb-6"> |
|
|
<div class="bg-primary/20 p-3 rounded-lg"> |
|
|
<i data-feather="cpu" class="text-primary"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold">Machine Learning</h3> |
|
|
</div> |
|
|
<div class="flex flex-wrap gap-3"> |
|
|
<span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm">TensorFlow</span> |
|
|
<span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm">PyTorch</span> |
|
|
<span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm">Transformers</span> |
|
|
<span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm">LLMs</span> |
|
|
<span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm">NLP</span> |
|
|
<span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm">Computer Vision</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-dark p-6 rounded-xl border border-gray-800"> |
|
|
<div class="flex items-center gap-3 mb-6"> |
|
|
<div class="bg-secondary/20 p-3 rounded-lg"> |
|
|
<i data-feather="code" class="text-secondary"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold">Software Development</h3> |
|
|
</div> |
|
|
<div class="flex flex-wrap gap-3"> |
|
|
<span class="bg-secondary/10 text-secondary px-3 py-1 rounded-full text-sm">Python</span> |
|
|
<span class="bg-secondary/10 text-secondary px-3 py-1 rounded-full text-sm">JavaScript</span> |
|
|
<span class="bg-secondary/10 text-secondary px-3 py-1 rounded-full text-sm">Docker</span> |
|
|
<span class="bg-secondary/10 text-secondary px-3 py-1 rounded-full text-sm">Kubernetes</span> |
|
|
<span class="bg-secondary/10 text-secondary px-3 py-1 rounded-full text-sm">FastAPI</span> |
|
|
<span class="bg-secondary/10 text-secondary px-3 py-1 rounded-full text-sm">PostgreSQL</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-dark p-6 rounded-xl border border-gray-800"> |
|
|
<div class="flex items-center gap-3 mb-6"> |
|
|
<div class="bg-gray-500/20 p-3 rounded-lg"> |
|
|
<i data-feather="tool" class="text-gray-400"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold">Tools & Platforms</h3> |
|
|
</div> |
|
|
<div class="flex flex-wrap gap-3"> |
|
|
<span class="bg-gray-500/10 text-gray-400 px-3 py-1 rounded-full text-sm">AWS</span> |
|
|
<span class="bg-gray-500/10 text-gray-400 px-3 py-1 rounded-full text-sm">GCP</span> |
|
|
<span class="bg-gray-500/10 text-gray-400 px-3 py-1 rounded-full text-sm">Git</span> |
|
|
<span class="bg-gray-500/10 text-gray-400 px-3 py-1 rounded-full text-sm">MLflow</span> |
|
|
<span class="bg-gray-500/10 text-gray-400 px-3 py-1 rounded-full text-sm">Airflow</span> |
|
|
<span class="bg-gray-500/10 text-gray-400 px-3 py-1 rounded-full text-sm">Weights & Biases</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="projects" class="py-20 bg-dark"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<h2 class="text-3xl font-bold mb-12 text-center"><span class="text-primary">//</span> Featured Projects</h2> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16 items-center"> |
|
|
<div class="relative group"> |
|
|
<div class="absolute inset-0 bg-gradient-to-br from-primary to-secondary opacity-30 rounded-xl blur-md group-hover:opacity-50 transition-all"></div> |
|
|
<img src="http://static.photos/technology/1024x576/89" alt="LLM Project" class="rounded-xl w-full h-auto border border-gray-700 relative group-hover:scale-[1.02] transition-all"> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-2xl font-bold mb-3">Enterprise LLM Platform</h3> |
|
|
<p class="text-gray-400 mb-4">A customizable large language model platform for businesses to deploy private, domain-specific AI assistants.</p> |
|
|
<div class="flex flex-wrap gap-2 mb-6"> |
|
|
<span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm">Python</span> |
|
|
<span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm">PyTorch</span> |
|
|
<span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm">FastAPI</span> |
|
|
<span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm">Docker</span> |
|
|
</div> |
|
|
<div class="flex gap-4"> |
|
|
<a href="#" class="flex items-center gap-2 text-gray-400 hover:text-primary transition-colors"> |
|
|
<i data-feather="external-link"></i> Live Demo |
|
|
</a> |
|
|
<a href="#" class="flex items-center gap-2 text-gray-400 hover:text-primary transition-colors"> |
|
|
<i data-feather="github"></i> Source Code |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16 items-center"> |
|
|
<div class="md:order-2 relative group"> |
|
|
<div class="absolute inset-0 bg-gradient-to-br from-secondary to-primary opacity-30 rounded-xl blur-md group-hover:opacity-50 transition-all"></div> |
|
|
<img src="http://static.photos/technology/1024x576/34" alt="Sentiment Analysis" class="rounded-xl w-full h-auto border border-gray-700 relative group-hover:scale-[1.02] transition-all"> |
|
|
</div> |
|
|
<div class="md:order-1"> |
|
|
<h3 class="text-2xl font-bold mb-3">Real-time Sentiment Analysis</h3> |
|
|
<p class="text-gray-400 mb-4">A streaming pipeline that analyzes sentiment of customer support conversations in real-time using transformers.</p> |
|
|
<div class="flex flex-wrap gap-2 mb-6"> |
|
|
<span class="bg-secondary/10 text-secondary px-3 py-1 rounded-full text-sm">Python</span> |
|
|
<span class="bg-secondary/10 text-secondary px-3 py-1 rounded-full text-sm">Kafka</span> |
|
|
<span class="bg-secondary/10 text-secondary px-3 py-1 rounded-full text-sm">Spark</span> |
|
|
<span class="bg-secondary/10 text-secondary px-3 py-1 rounded-full text-sm">HuggingFace</span> |
|
|
</div> |
|
|
<div class="flex gap-4"> |
|
|
<a href="#" class="flex items-center gap-2 text-gray-400 hover:text-secondary transition-colors"> |
|
|
<i data-feather="external-link"></i> Live Demo |
|
|
</a> |
|
|
<a href="#" class="flex items-center gap-2 text-gray-400 hover:text-secondary transition-colors"> |
|
|
<i data-feather="github"></i> Source Code |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center"> |
|
|
<div class="relative group"> |
|
|
<div class="absolute inset-0 bg-gradient-to-br from-primary to-purple-500 opacity-30 rounded-xl blur-md group-hover:opacity-50 transition-all"></div> |
|
|
<img src="http://static.photos/technology/1024x576/76" alt="Recommendation System" class="rounded-xl w-full h-auto border border-gray-700 relative group-hover:scale-[1.02] transition-all"> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-2xl font-bold mb-3">Personalized Recommendation Engine</h3> |
|
|
<p class="text-gray-400 mb-4">A hybrid recommendation system combining collaborative filtering and content-based approaches for an e-commerce platform.</p> |
|
|
<div class="flex flex-wrap gap-2 mb-6"> |
|
|
<span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm">Python</span> |
|
|
<span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm">TensorFlow</span> |
|
|
<span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm">Flask</span> |
|
|
<span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm">Redis</span> |
|
|
</div> |
|
|
<div class="flex gap-4"> |
|
|
<a href="#" class="flex items-center gap-2 text-gray-400 hover:text-primary transition-colors"> |
|
|
<i data-feather="external-link"></i> Live Demo |
|
|
</a> |
|
|
<a href="#" class="flex items-center gap-2 text-gray-400 hover:text-primary transition-colors"> |
|
|
<i data-feather="github"></i> Source Code |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="contact" class="py-20 bg-darker"> |
|
|
<div class="container mx-auto px-6 max-w-4xl"> |
|
|
<h2 class="text-3xl font-bold mb-12 text-center"><span class="text-primary">//</span> Get In Touch</h2> |
|
|
<div class="bg-dark p-8 rounded-xl border border-gray-800"> |
|
|
<form class="space-y-6"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
<div> |
|
|
<label for="name" class="block text-gray-400 mb-2">Name</label> |
|
|
<input type="text" id="name" class="w-full bg-gray-900 border border-gray-700 rounded-md px-4 py-3 text-gray-300 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="email" class="block text-gray-400 mb-2">Email</label> |
|
|
<input type="email" id="email" class="w-full bg-gray-900 border border-gray-700 rounded-md px-4 py-3 text-gray-300 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<label for="subject" class="block text-gray-400 mb-2">Subject</label> |
|
|
<input type="text" id="subject" class="w-full bg-gray-900 border border-gray-700 rounded-md px-4 py-3 text-gray-300 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="message" class="block text-gray-400 mb-2">Message</label> |
|
|
<textarea id="message" rows="5" class="w-full bg-gray-900 border border-gray-700 rounded-md px-4 py-3 text-gray-300 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"></textarea> |
|
|
</div> |
|
|
<button type="submit" class="bg-primary hover:bg-primary/90 text-white px-6 py-3 rounded-md transition-all w-full md:w-auto flex items-center justify-center gap-2"> |
|
|
<i data-feather="send"></i> Send Message |
|
|
</button> |
|
|
</form> |
|
|
|
|
|
<div class="mt-12 pt-8 border-t border-gray-800"> |
|
|
<h3 class="text-xl font-bold mb-6">Or reach out directly</h3> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
<div class="flex items-center gap-4"> |
|
|
<div class="bg-primary/20 p-3 rounded-lg"> |
|
|
<i data-feather="mail" class="text-primary"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-gray-400 mb-1">Email</h4> |
|
|
<a href="mailto:hello@quantumcoder.com" class="text-gray-200 hover:text-primary transition-colors">hello@quantumcoder.com</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center gap-4"> |
|
|
<div class="bg-secondary/20 p-3 rounded-lg"> |
|
|
<i data-feather="github" class="text-secondary"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-gray-400 mb-1">GitHub</h4> |
|
|
<a href="https://github.com/quantumcoder" class="text-gray-200 hover:text-secondary transition-colors">github.com/quantumcoder</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center gap-4"> |
|
|
<div class="bg-blue-500/20 p-3 rounded-lg"> |
|
|
<i data-feather="linkedin" class="text-blue-500"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-gray-400 mb-1">LinkedIn</h4> |
|
|
<a href="https://linkedin.com/in/quantumcoder" class="text-gray-200 hover:text-blue-500 transition-colors">linkedin.com/in/quantumcoder</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center gap-4"> |
|
|
<div class="bg-purple-500/20 p-3 rounded-lg"> |
|
|
<i data-feather="twitter" class="text-purple-500"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-gray-400 mb-1">Twitter</h4> |
|
|
<a href="https://twitter.com/quantumcoder" class="text-gray-200 hover:text-purple-500 transition-colors">@quantumcoder</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<custom-footer></custom-footer> |
|
|
|
|
|
<script src="components/navbar.js"></script> |
|
|
<script src="components/footer.js"></script> |
|
|
<script src="script.js"></script> |
|
|
<script>feather.replace();</script> |
|
|
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> |
|
|
</body> |
|
|
</html> |
