Spaces:

vamcrizer
/

anycoder-78b05e60

Build error

App Files Files Community

vamcrizer commited on Jan 30

Commit

c1aea3f

verified ·

1 Parent(s): 1dba7fe

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +696 -620

index.html CHANGED Viewed

@@ -1,16 +1,19 @@
 <!DOCTYPE html>
 <html lang="en" class="scroll-smooth">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vu Hoang Anh | AI Engineer Portfolio</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
-    <script>
-        tailwind.config = {
             darkMode: 'class',
             theme: {
                 extend: {
@@ -56,210 +59,322 @@
                 }
             }
         }
-    </script>
-    <style>
-        .gradient-text {
-            background: linear-gradient(135deg, #38bdf8 0%, #818cf8 50%, #c084fc 100%);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-        }
-        .glass-card {
-            background: rgba(30, 41, 59, 0.7);
-            backdrop-filter: blur(12px);
-            border: 1px solid rgba(148, 163, 184, 0.1);
-        }
-        .code-block {
-            background: #0d1117;
-            border-radius: 0.5rem;
-        }
-        .skill-tag {
-            transition: all 0.3s ease;
-        }
-        .skill-tag:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 10px 25px -5px rgba(14, 165, 233, 0.3);
-        }
-        .timeline-line {
-            background: linear-gradient(to bottom, #38bdf8, #818cf8, transparent);
-        }
-        .project-card {
-            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-        }
-        .project-card:hover {
-            transform: translateY(-8px);
-        }
-        .metric-card {
-            background: linear-gradient(145deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.9));
-        }
-        /* Custom scrollbar */
-        ::-webkit-scrollbar {
-            width: 8px;
-        }
-        ::-webkit-scrollbar-track {
-            background: #0f172a;
-        }
-        ::-webkit-scrollbar-thumb {
-            background: #475569;
-            border-radius: 4px;
-        }
-        ::-webkit-scrollbar-thumb:hover {
-            background: #64748b;
-        }
-        .typing-cursor::after {
-            content: '|';
-            animation: blink 1s step-end infinite;
-        }
-        @keyframes blink {
-            50% { opacity: 0; }
-        }
-    </style>
 </head>
 <body class="bg-dark-900 text-slate-300 font-sans antialiased selection:bg-primary-500 selection:text-white">
-    <!-- Navigation -->
-    <nav class="fixed top-0 left-0 right-0 z-50 glass-card border-b border-slate-800/50">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="flex justify-between items-center h-16">
-                <div class="flex items-center space-x-3">
-                    <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-primary-500 to-purple-600 flex items-center justify-center">
-                        <span class="text-white font-bold text-lg">VA</span>
-                    </div>
-                    <span class="font-mono font-semibold text-slate-100 hidden sm:block">vu.hoang.anh</span>
-                </div>
-                <div class="hidden md:flex items-center space-x-8">
-                    <a href="#about" class="text-sm font-medium text-slate-400 hover:text-primary-400 transition-colors">About</a>
-                    <a href="#experience" class="text-sm font-medium text-slate-400 hover:text-primary-400 transition-colors">Experience</a>
-                    <a href="#projects" class="text-sm font-medium text-slate-400 hover:text-primary-400 transition-colors">Projects</a>
-                    <a href="#skills" class="text-sm font-medium text-slate-400 hover:text-primary-400 transition-colors">Skills</a>
-                    <a href="mailto:anhvh189@gmail.com" class="px-4 py-2 rounded-lg bg-primary-600 hover:bg-primary-500 text-white text-sm font-medium transition-colors">
-                        Contact
-                    </a>
-                </div>
-                <button id="mobile-menu-btn" class="md:hidden text-slate-400 hover:text-white">
                     <i class="fas fa-bars text-xl"></i>
                 </button>
-            </div>
         </div>
-        <!-- Mobile Menu -->
-        <div id="mobile-menu" class="hidden md:hidden glass-card border-t border-slate-800">
-            <div class="px-4 py-3 space-y-2">
-                <a href="#about" class="block py-2 text-slate-400 hover:text-primary-400">About</a>
-                <a href="#experience" class="block py-2 text-slate-400 hover:text-primary-400">Experience</a>
-                <a href="#projects" class="block py-2 text-slate-400 hover:text-primary-400">Projects</a>
-                <a href="#skills" class="block py-2 text-slate-400 hover:text-primary-400">Skills</a>
-            </div>
         </div>
-    </nav>
-    <!-- Hero Section -->
-    <section class="relative min-h-screen flex items-center justify-center pt-16 overflow-hidden">
-        <!-- Background Effects -->
-        <div class="absolute inset-0 overflow-hidden">
-            <div class="absolute -top-40 -right-40 w-80 h-80 bg-primary-500/20 rounded-full blur-3xl animate-pulse-slow"></div>
-            <div class="absolute -bottom-40 -left-40 w-96 h-96 bg-purple-500/20 rounded-full blur-3xl animate-pulse-slow" style="animation-delay: 1s;"></div>
-            <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-blue-500/10 rounded-full blur-3xl"></div>
         </div>
-        <!-- Grid Pattern -->
-        <div class="absolute inset-0 bg-[linear-gradient(rgba(30,41,59,0.3)_1px,transparent_1px),linear-gradient(90deg,rgba(30,41,59,0.3)_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_50%,#000_70%,transparent_100%)]"></div>
-        <div class="relative z-10 max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-            <div class="animate-fade-in">
-                <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary-500/10 border border-primary-500/20 text-primary-400 text-sm font-mono mb-6">
-                    <span class="w-2 h-2 rounded-full bg-primary-400 animate-pulse"></span>
-                    Available for Internship
-                </div>
-                <h1 class="text-4xl sm:text-5xl md:text-7xl font-bold text-white mb-6 tracking-tight">
-                    <span class="gradient-text">Vu Hoang Anh</span>
-                </h1>
-                <div class="text-xl sm:text-2xl md:text-3xl text-slate-400 mb-4 font-mono">
-                    <span id="typing-text" class="typing-cursor"></span>
-                </div>
-                <p class="text-lg text-slate-500 max-w-2xl mx-auto mb-8">
-                    AI Engineer Intern specializing in Machine Learning, NLP, and Large Language Models.
-                    Focused on fine-tuning, evaluation, and production-scale deployment.
-                </p>
-                <!-- Quick Stats -->
-                <div class="flex flex-wrap justify-center gap-4 mb-10">
-                    <div class="flex items-center gap-2 px-4 py-2 rounded-lg bg-dark-800 border border-slate-700">
-                        <i class="fas fa-map-marker-alt text-primary-400"></i>
-                        <span class="text-sm">Hanoi, Vietnam</span>
-                    </div>
-                    <div class="flex items-center gap-2 px-4 py-2 rounded-lg bg-dark-800 border border-slate-700">
-                        <i class="fas fa-graduation-cap text-primary-400"></i>
-                        <span class="text-sm">GPA 3.86/4.00</span>
-                    </div>
-                    <div class="flex items-center gap-2 px-4 py-2 rounded-lg bg-dark-800 border border-slate-700">
-                        <i class="fas fa-award text-primary-400"></i>
-                        <span class="text-sm">4× Scholarship</span>
-                    </div>
-                </div>
-                <!-- CTA Buttons -->
-                <div class="flex flex-wrap justify-center gap-4">
-                    <a href="mailto:anhvh189@gmail.com" class="group px-6 py-3 rounded-lg bg-gradient-to-r from-primary-600 to-purple-600 text-white font-medium hover:shadow-lg hover:shadow-primary-500/25 transition-all">
-                        <i class="fas fa-envelope mr-2"></i>
-                        Get In Touch
-                    </a>
-                    <a href="https://github.com/vamcrizer" target="_blank" class="group px-6 py-3 rounded-lg bg-dark-800 border border-slate-700 text-slate-300 hover:border-primary-500/50 hover:text-white transition-all">
-                        <i class="fab fa-github mr-2"></i>
-                        GitHub
-                    </a>
-                    <a href="https://linkedin.com/in/hoang-anh-vu-477a64288" target="_blank" class="group px-6 py-3 rounded-lg bg-dark-800 border border-slate-700 text-slate-300 hover:border-primary-500/50 hover:text-white transition-all">
-                        <i class="fab fa-linkedin mr-2"></i>
-                        LinkedIn
-                    </a>
-                </div>
-            </div>
         </div>
-        <!-- Scroll Indicator -->
-        <div class="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce">
-            <i class="fas fa-chevron-down text-slate-500"></i>
         </div>
-    </section>
-    <!-- Career Objective -->
-    <section id="about" class="py-20 relative">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="grid md:grid-cols-2 gap-12 items-center">
-                <div class="animate-slide-up">
-                    <h2 class="text-3xl font-bold text-white mb-6">
-                        <span class="text-primary-400">~/</span>career-objective
-                    </h2>
-                    <div class="space-y-4 text-slate-400">
-                        <p>
-                            Research-oriented AI Engineer with hands-on engineering capabilities. My focus areas include:
-                        </p>
-                        <ul class="space-y-3">
-                            <li class="flex items-start gap-3">
-                                <i class="fas fa-brain text-primary-400 mt-1"></i>
-                                <span><strong class="text-slate-200">Machine Learning</strong> — Deep understanding of algorithms and model architectures</span>
-                            </li>
-                            <li class="flex items-start gap-3">
-                                <i class="fas fa-language text-purple-400 mt-1"></i>
-                                <span><strong class="text-slate-200">Natural Language Processing</strong> — Text processing, embeddings, and transformers</span>
-                            </li>
-                            <li class="flex items-start gap-3">
-                                <i class="fas fa-robot text-pink-400 mt-1"></i>
-                                <span><strong class="text-slate-200">Large Language Models</strong> — Fine-tuning, evaluation, and production deployment</span>
-                            </li>
-                        </ul>
-                        <p class="pt-4 border-t border-slate-800">
-                            Seeking an internship to contribute to real AI projects while deepening expertise in LLM architecture and reasoning capabilities.
-                        </p>
-                    </div>
-                </div>
-                <div class="relative">
-                    <div class="code-block p-6 font-mono text-sm">
-                        <div class="flex items-center gap-2 mb-4 pb-4 border-b border-slate-800">
-                            <div class="w-3 h-3 rounded-full bg-red-500"></div>
-                            <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
-                            <div class="w-3 h-3 rounded-full bg-green-500"></div>
-                            <span class="ml-2 text-slate-500">objective.py</span>
-                        </div>
-                        <pre class="text-slate-300 overflow-x-auto"><code><span class="text-purple-400">class</span> <span class="text-yellow-400">AIEngineer</span>:
     <span class="text-purple-400">def</span> <span class="text-blue-400">__init__</span>(self):
         self.focus = [<span class="text-green-400">"ML"</span>, <span class="text-green-400">"NLP"</span>, <span class="text-green-400">"LLMs"</span>]
         self.mindset = <span class="text-green-400">"research + engineering"</span>
@@ -271,439 +386,400 @@
             <span class="text-green-400">"deep_dive"</span>: <span class="green-400">"LLM architecture"</span>,
             <span class="text-green-400">"master"</span>: <span class="text-green-400">"reasoning capabilities"</span>
         }</code></pre>
-                    </div>
-                </div>
             </div>
         </div>
-    </section>
-    <!-- Education -->
-    <section class="py-20 bg-dark-800/50">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <h2 class="text-3xl font-bold text-white mb-10">
-                <span class="text-primary-400">~/</span>education
-            </h2>
-            <div class="glass-card rounded-2xl p-8">
-                <div class="flex flex-col md:flex-row md:items-start md:justify-between gap-6">
-                    <div class="flex-1">
-                        <div class="flex items-start gap-4">
-                            <div class="w-14 h-14 rounded-xl bg-gradient-to-br from-primary-500 to-purple-600 flex items-center justify-center flex-shrink-0">
-                                <i class="fas fa-university text-white text-xl"></i>
-                            </div>
-                            <div>
-                                <h3 class="text-xl font-bold text-white">Posts and Telecommunications Institute of Technology (PTIT)</h3>
-                                <p class="text-primary-400 font-medium">Engineer of Information Technology — High-Quality Program</p>
-                                <p class="text-slate-500 text-sm mt-1">Aug 2023 – Apr 2028 (Expected)</p>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="text-right">
-                        <div class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-green-500/10 border border-green-500/20">
-                            <i class="fas fa-star text-green-400"></i>
-                            <span class="text-green-400 font-bold text-lg">3.86 / 4.00</span>
-                        </div>
-                        <p class="text-slate-500 text-sm mt-2">CGPA</p>
-                    </div>
-                </div>
-                <!-- Scholarships -->
-                <div class="mt-8 pt-6 border-t border-slate-700">
-                    <h4 class="text-sm font-medium text-slate-400 uppercase tracking-wider mb-4">Scholarships</h4>
-                    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
-                        <div class="flex items-center gap-3 p-3 rounded-lg bg-dark-900/50">
-                            <i class="fas fa-trophy text-yellow-400"></i>
-                            <div>
-                                <p class="text-sm font-medium text-slate-200">Fall 2023–2024</p>
-                                <p class="text-xs text-slate-500">Academic Excellence</p>
-                            </div>
-                        </div>
-                        <div class="flex items-center gap-3 p-3 rounded-lg bg-dark-900/50">
-                            <i class="fas fa-trophy text-yellow-400"></i>
-                            <div>
-                                <p class="text-sm font-medium text-slate-200">Spring 2023–2024</p>
-                                <p class="text-xs text-slate-500">Academic Excellence</p>
-                            </div>
-                        </div>
-                        <div class="flex items-center gap-3 p-3 rounded-lg bg-dark-900/50">
-                            <i class="fas fa-trophy text-yellow-400"></i>
-                            <div>
-                                <p class="text-sm font-medium text-slate-200">Spring 2024–2025</p>
-                                <p class="text-xs text-slate-500">Academic Excellence</p>
-                            </div>
-                        </div>
-                        <div class="flex items-center gap-3 p-3 rounded-lg bg-dark-900/50">
-                            <i class="fas fa-trophy text-yellow-400"></i>
-                            <div>
-                                <p class="text-sm font-medium text-slate-200">Fall 2024–2025</p>
-                                <p class="text-xs text-slate-500">Academic Excellence</p>
-                            </div>
-                        </div>
-                    </div>
-                </div>
             </div>
         </div>
-    </section>
-    <!-- Professional Experience -->
-    <section id="experience" class="py-20">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <h2 class="text-3xl font-bold text-white mb-10">
-                <span class="text-primary-400">~/</span>experience
-            </h2>
-            <div class="relative">
-                <!-- Timeline Line -->
-                <div class="hidden md:block absolute left-8 top-0 bottom-0 w-0.5 timeline-line"></div>
-                <div class="space-y-8">
-                    <div class="relative md:pl-20">
-                        <!-- Timeline Dot -->
-                        <div class="hidden md:flex absolute left-4 w-8 h-8 rounded-full bg-primary-500 items-center justify-center">
-                            <i class="fas fa-briefcase text-white text-sm"></i>
-                        </div>
-                        <div class="glass-card rounded-xl p-6 project-card">
-                            <div class="flex flex-col md:flex-row md:items-start md:justify-between gap-4 mb-4">
-                                <div>
-                                    <h3 class="text-xl font-bold text-white">AI & Backend Developer</h3>
-                                    <p class="text-primary-400">PTIT IEC — Part-time</p>
-                                </div>
-                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-primary-500/10 text-primary-400">
                                     Oct 2024 – Present
                                 </span>
-                            </div>
-                            <ul class="space-y-3 text-slate-400">
-                                <li class="flex items-start gap-3">
-                                    <i class="fas fa-check-circle text-green-400 mt-1 text-sm"></i>
-                                    <span>Participated in academic and startup lab projects involving applied AI and automation</span>
-                                </li>
-                                <li class="flex items-start gap-3">
-                                    <i class="fas fa-check-circle text-green-400 mt-1 text-sm"></i>
-                                    <span>Optimized and refactored legacy research code, focusing on <strong class="text-slate-200">runtime performance</strong> and <strong class="text-slate-200">maintainability</strong></span>
-                                </li>
-                                <li class="flex items-start gap-3">
-                                    <i class="fas fa-check-circle text-green-400 mt-1 text-sm"></i>
-                                    <span>Integrated custom LLM modules into backend systems to enhance context-aware response capabilities</span>
-                                </li>
-                            </ul>
-                            <div class="mt-4 pt-4 border-t border-slate-700">
-                                <p class="text-sm text-slate-500">
-                                    <i class="fas fa-info-circle mr-2"></i>
-                                    Not typo-fixing intern — real backend + AI integration work
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                </div>
             </div>
         </div>
-    </section>
-    <!-- Projects -->
-    <section id="projects" class="py-20 bg-dark-800/50">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <h2 class="text-3xl font-bold text-white mb-4">
-                <span class="text-primary-400">~/</span>projects
-            </h2>
-            <p class="text-slate-500 mb-10">Selected projects demonstrating research + production capabilities</p>
-            <div class="grid lg:grid-cols-2 gap-8">
-                <!-- Project 1: Code Vulnerability -->
-                <div class="glass-card rounded-2xl p-6 project-card border-l-4 border-primary-500">
-                    <div class="flex items-start justify-between mb-4">
-                        <div>
-                            <h3 class="text-xl font-bold text-white">Code Vulnerability Detection with LLMs</h3>
-                            <p class="text-sm text-slate-500">Apr 2025 – Sep 2025</p>
-                        </div>
-                        <div class="flex gap-2">
-                            <span class="px-2 py-1 rounded text-xs bg-purple-500/20 text-purple-400">Leader</span>
-                            <span class="px-2 py-1 rounded text-xs bg-blue-500/20 text-blue-400">Researcher</span>
-                        </div>
-                    </div>
-                    <p class="text-slate-400 text-sm mb-4">Research + production pipeline for detecting and explaining security vulnerabilities in source code using LLMs.</p>
-                    <!-- Metrics -->
-                    <div class="grid grid-cols-2 gap-3 mb-4">
-                        <div class="metric-card p-3 rounded-lg">
-                            <p class="text-2xl font-bold text-green-400">0.80</p>
-                            <p class="text-xs text-slate-500">GraphCodeBERT Accuracy</p>
-                        </div>
-                        <div class="metric-card p-3 rounded-lg">
-                            <p class="text-2xl font-bold text-green-400">0.82</p>
-                            <p class="text-xs text-slate-500">F1-Score</p>
-                        </div>
-                        <div class="metric-card p-3 rounded-lg">
-                            <p class="text-2xl font-bold text-primary-400">78.7%</p>
-                            <p class="text-xs text-slate-500">Qwen2.5 Accuracy</p>
-                        </div>
-                        <div class="metric-card p-3 rounded-lg">
-                            <p class="text-2xl font-bold text-primary-400">64.3%</p>
-                            <p class="text-xs text-slate-500">Explanation Clarity</p>
-                        </div>
-                    </div>
-                    <!-- Tech Stack -->
-                    <div class="flex flex-wrap gap-2 mb-4">
-                        <span class="px-2 py-1 rounded-md bg-dark-900 text-xs text-slate-400">GPT-4o-mini</span>
-                        <span class="px-2 py-1 rounded-md bg-dark-900 text-xs text-slate-400">GraphCodeBERT</span>
-                        <span class="px-2 py-1 rounded-md bg-dark-900 text-xs text-slate-400">Qwen2.5-Coder-14B</span>
-                        <span class="px-2 py-1 rounded-md bg-dark-900 text-xs text-slate-400">LoRA SFT</span>
-                        <span class="px-2 py-1 rounded-md bg-dark-900 text-xs text-slate-400">GGUF</span>
-                        <span class="px-2 py-1 rounded-md bg-dark-900 text-xs text-slate-400">Docker</span>
-                    </div>
-                    <details class="group">
-                        <summary class="cursor-pointer text-sm text-primary-400 hover:text-primary-300 flex items-center gap-2">
-                            <i class="fas fa-chevron-down transition-transform group-open:rotate-180"></i>
-                            Technical Details
-                        </summary>
-                        <ul class="mt-3 space-y-2 text-sm text-slate-400 pl-4">
-                            <li>• Collected 30,000 code samples from DiverseVul (20k vulnerable, 10k non-vulnerable)</li>
-                            <li>• Applied oversampling to balance dataset (20k–20k)</li>
-                            <li>• Generated structured explanations via GPT-4o-mini API for classification and explanation tasks</li>
-                            <li>• Fine-tuned GraphCodeBERT with LoRA SFT on Qwen2.5-Coder-14B</li>
-                            <li>• Quantized to GGUF using llama.cpp, containerized with Docker</li>
-                        </ul>
-                    </details>
-                </div>
-                <!-- Project 2: RAG Pipeline -->
-                <div class="glass-card rounded-2xl p-6 project-card border-l-4 border-purple-500">
-                    <div class="flex items-start justify-between mb-4">
-                        <div>
-                            <h3 class="text-xl font-bold text-white">Efficient RAG Pipeline</h3>
-                            <p class="text-sm text-slate-500">Jan 2026 – Present</p>
-                        </div>
-                        <span class="px-2 py-1 rounded text-xs bg-purple-500/20 text-purple-400">AI Engineer</span>
-                    </div>
-                    <p class="text-slate-400 text-sm mb-4">Production-oriented RAG system with custom model selection, hybrid retrieval, and comprehensive evaluation.</p>
-                    <!-- Metrics -->
-                    <div class="grid grid-cols-2 gap-3 mb-4">
-                        <div class="metric-card p-3 rounded-lg">
-                            <p class="text-2xl font-bold text-green-400">0.98</p>
-                            <p class="text-xs text-slate-500">RAGAS Faithfulness</p>
-                        </div>
-                        <div class="metric-card p-3 rounded-lg">
-                            <p class="text-2xl font-bold text-green-400">0.99</p>
-                            <p class="text-xs text-slate-500">Answer Relevance</p>
-                        </div>
-                    </div>
-                    <!-- Architecture Diagram -->
-                    <div class="code-block p-4 mb-4 text-xs font-mono">
-                        <p class="text-slate-500 mb-2"># RAG Architecture</p>
-                        <p><span class="text-purple-400">Input</span> → <span class="text-yellow-400">Dynamic Chunking</span> → <span class="text-blue-400">Hybrid Retrieval</span></p>
-                        <p class="pl-4 text-slate-400">├─ Milvus (Vector)</p>
-                        <p class="pl-4 text-slate-400">├─ Elasticsearch (Keyword)</p>
-                        <p class="pl-4 text-slate-400">└─ RRF Fusion</p>
-                        <p>→ <span class="text-green-400">GGUF Trio</span> (Embed/Rerank/Gen) → <span class="text-purple-400">Output</span></p>
-                    </div>
-                    <!-- Tech Stack -->
-                    <div class="flex flex-wrap gap-2 mb-4">
-                        <span class="px-2 py-1 rounded-md bg-dark-900 text-xs text-slate-400">llama.cpp</span>
-                        <span class="px-2 py-1 rounded-md bg-dark-900 text-xs text-slate-400">Milvus</span>
-                        <span class="px-2 py-1 rounded-md bg-dark-900 text-xs text-slate-400">Elasticsearch</span>
-                        <span class="px-2 py-1 rounded-md bg-dark-900 text-xs text-slate-400">RRF</span>
-                        <span class="px-2 py-1 rounded-md bg-dark-900 text-xs text-slate-400">RAGAS</span>
-                        <span class="px-2 py-1 rounded-md bg-dark-900 text-xs text-slate-400">GGUF</span>
-                    </div>
-                    <details class="group">
-                        <summary class="cursor-pointer text-sm text-purple-400 hover:text-purple-300 flex items-center gap-2">
-                            <i class="fas fa-chevron-down transition-transform group-open:rotate-180"></i>
-                            Technical Details
-                        </summary>
-                        <ul class="mt-3 space-y-2 text-sm text-slate-400 pl-4">
-                            <li>• Hand-picked GGUF model trio: Embedding, Reranking, Generation</li>
-                            <li>• Full llama.cpp inference stack</li>
-                            <li>• Dynamic hierarchical chunking strategy</li>
-                            <li>• Hybrid retrieval: Milvus (vector) + Elasticsearch (keyword)</li>
-                            <li>• Reciprocal Rank Fusion for result combination</li>
-                            <li>• Evaluated with RAGAS on AWS RAG documentation (Gemini 3 Pro)</li>
-                        </ul>
-                    </details>
-                </div>
-                <!-- Project 3: Tea Leaves System -->
-                <div class="glass-card rounded-2xl p-6 project-card border-l-4 border-green-500 lg:col-span-2">
-                    <div class="flex flex-col md:flex-row md:items-start justify-between gap-4 mb-4">
-                        <div>
-                            <h3 class="text-xl font-bold text-white">Tea Leaves Intelligent System</h3>
-                            <p class="text-sm text-slate-500">Feb 2025 – May 2025</p>
-                        </div>
-                        <div class="flex gap-2">
-                            <span class="px-2 py-1 rounded text-xs bg-green-500/20 text-green-400">Leader</span>
-                            <span class="px-2 py-1 rounded text-xs bg-orange-500/20 text-orange-400">Team: 4</span>
-                        </div>
-                    </div>
-                    <div class="grid md:grid-cols-2 gap-6">
-                        <div>
-                            <p class="text-slate-400 text-sm mb-4">IoT architecture for real-time tea harvest management with enterprise-grade backend security.</p>
-                            <ul class="space-y-2 text-sm text-slate-400">
-                                <li class="flex items-start gap-2">
-                                    <i class="fas fa-wifi text-green-400 mt-0.5"></i>
-                                    <span>Real-time IoT data collection via MQTT</span>
-                                </li>
-                                <li class="flex items-start gap-2">
-                                    <i class="fas fa-shield-alt text-green-400 mt-0.5"></i>
-                                    <span>Spring Security + JWT authentication</span>
-                                </li>
-                                <li class="flex items-start gap-2">
-                                    <i class="fas fa-weight text-green-400 mt-0.5"></i>
-                                    <span>Automatic weight recording system</span>
-                                </li>
-                                <li class="flex items-start gap-2">
-                                    <i class="fas fa-id-card text-green-400 mt-0.5"></i>
-                                    <span>Farmer ID tracking integration</span>
-                                </li>
-                            </ul>
-                        </div>
-                        <div class="code-block p-4 font-mono text-xs">
-                            <p class="text-slate-500 mb-2"># Tech Stack</p>
-                            <p><span class="text-green-400">backend:</span></p>
-                            <p class="pl-2">- Spring Boot</p>
-                            <p class="pl-2">- Spring Security</p>
-                            <p class="pl-2">- JWT</p>
-                            <p><span class="text-green-400">iot:</span></p>
-                            <p class="pl-2">- MQTT</p>
-                            <p class="pl-2">- Real-time sensors</p>
-                            <p><span class="text-green-400">data:</span></p>
-                            <p class="pl-2">- MySQL</p>
-                            <p class="pl-2">- Docker</p>
-                        </div>
-                    </div>
-                    <div class="mt-4 pt-4 border-t border-slate-700">
-                        <p class="text-sm text-slate-500">
-                            <i class="fas fa-lightbulb text-yellow-400 mr-2"></i>
-                            Demonstrates system thinking beyond pure AI — enterprise backend + IoT integration
-                        </p>
-                    </div>
-                </div>
             </div>
         </div>
-    </section>
-    <!-- Skills -->
-    <section id="skills" class="py-20">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <h2 class="text-3xl font-bold text-white mb-10">
-                <span class="text-primary-400">~/</span>skills
-            </h2>
-            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
-                <!-- Programming Languages -->
-                <div class="glass-card rounded-xl p-6">
-                    <div class="flex items-center gap-3 mb-4">
-                        <div class="w-10 h-10 rounded-lg bg-blue-500/20 flex items-center justify-center">
-                            <i class="fas fa-code text-blue-400"></i>
-                        </div>
-                        <h3 class="font-semibold text-white">Programming</h3>
-                    </div>
-                    <div class="flex flex-wrap gap-2">
-                        <span class="skill-tag px-3 py-1.5 rounded-lg bg-dark-900 border border-slate-700 text-sm text-slate-300 hover:border-blue-500/50 hover:text-blue-400">Python</span>
-                        <span class="skill-tag px-3 py-1.5 rounded-lg bg-dark-900 border border-slate-700 text-sm text-slate-300 hover:border-blue-500/50 hover:text-blue-400">C++</span>
-                        <span class="skill-tag px-3 py-1.5 rounded-lg bg-dark-900 border border-slate-700 text-sm text-slate-300 hover:border-blue-500/50 hover:text-blue-400">Java</span>
-                        <span class="skill-tag px-3 py-1.5 rounded-lg bg-dark-900 border border-slate-700 text-sm text-slate-300 hover:border-blue-500/50 hover:text-blue-400">SQL</span>
-                    </div>
-                </div>
-                <!-- LLM & AI -->
-                <div class="glass-card rounded-xl p-6">
-                    <div class="flex items-center gap-3 mb-4">
-                        <div class="w-10 h-10 rounded-lg bg-purple-500/20 flex items-center justify-center">
-                            <i class="fas fa-brain text-purple-400"></i>
-                        </div>
-                        <h3 class="font-semibold text-white">LLM & AI</h3>
-                    </div>
-                    <div class="flex flex-wrap gap-2">
-                        <span class="skill-tag px-3 py-1.5 rounded-lg bg-dark-900 border border-slate-700 text-sm text-slate-300 hover:border-purple-500/50 hover:text-purple-400">Transformers</span>
-                        <span class="skill-tag px-3 py-1.5 rounded-lg bg-dark-900 border border-slate-700 text-sm text-slate-300 hover:border-purple-500/50 hover:text-purple-400">PyTorch</span>
-                        <span class="skill-tag px-3 py-1.5 rounded-lg bg-dark-900 border border-slate-700 text-sm text-slate-300 hover:border-purple-500/50 hover:text-purple-400">Unsloth</span>
-                        <span class="skill-tag px-3 py-1.5 rounded-lg bg-dark-900 border border-slate-700 text-sm text-slate-300 hover:border-purple-500/50 hover:text-purple-400">LLaMA.cpp</span>
-                        <span class="skill-tag px-3 py-1.5 rounded-lg bg-dark-900 border border-slate-700 text-sm text-slate-300 hover:border-purple-500/50 hover:text-purple-400">Ollama</span>
-                        <span class="skill-tag px-3 py-1.5 rounded-lg bg-dark-900 border border-slate-700 text-sm text-slate-300 hover:border-purple-500/50 hover:text-purple-400">LangChain</span>
-                    </div>
-                </div>
-                <!-- Frameworks -->
-                <div class="glass-card rounded-xl p-6">
-                    <div class="flex items-center gap-3 mb-4">
-                        <div class="w-10 h-10 rounded-lg bg-green-500/20 flex items-center justify-center">
-                            <i class="fas fa-layer-group text-green-400"></i>
-                        </div>
-                        <h3 class="font-semibold text-white">Frameworks</h3>
-                    </div>
-                    <div class="flex flex-wrap gap-2">
-                        <span class="skill-tag px-3 py-1.5 rounded-lg bg-dark-900 border border-slate-700 text-sm text-slate-300 hover:border-green-500/50 hover:text-green-400">FastAPI</span>
-                        <span class="skill-tag px-3 py-1.5 rounded-lg bg-dark-900 border border-slate-700 text-sm text-slate-300 hover:border-green-500/50 hover:text-green-400">Spring Boot</span>
-                    </div>
-                </div>
-                <!-- Databases -->
-                <div class="glass-card rounded-xl p-6">
-                    <div class="flex items-center gap-3 mb-4">
-                        <div class="w-10 h-10 rounded-lg bg-orange-500/20 flex items-center justify-center">
-                            <i class="fas fa-database text-orange-400"></i>
-                        </div>
-                        <h3 class="font-semibold text-white">Databases</h3>
-                    </div>
-                    <div class="flex flex-wrap gap-2">
-                        <span class="skill-tag px-3 py-1.5 rounded-lg bg-dark-900 border border-slate-700 text-sm text-slate-300 hover:border-orange-500/50 hover:text-orange-400">MySQL</span>
-                        <span class="skill-tag px-3 py-1.5 rounded-lg bg-dark-900 border border-slate-700 text-sm text-slate-300 hover:border-orange-500/50 hover:text-orange-400">PostgreSQL</span>
-                        <span class="skill-tag px-3 py-1.5 rounded-lg bg-dark-900 border border-slate-700 text-sm text-slate-300 hover:border-orange-500/50 hover:text-orange-400">Milvus</span>
-                        <span class="skill-tag px-3 py-1.5 rounded-lg bg-dark-900 border border-slate-700 text-sm text-slate-300 hover:border-orange-500/50 hover:text-orange-400">Elasticsearch</span>
-                    </div>
-                </div>
-                <!-- Tools -->
-                <div class="glass-card rounded-xl p-6">
-                    <div class="flex items-center gap-3 mb-4">
-                        <div class="w-10 h-10 rounded-lg bg-cyan-500/20 flex items-center justify-center">
-                            <i class="fas fa-tools text-cyan-400"></i>
-                        </div>
-                        <h3 class="font-semibold text-white">Tools</h3>
-                    </div>
-                    <div class="flex flex-wrap gap-2">
-                        <span class="skill-tag px-3 py-1.5 rounded-lg bg-dark-900 border border-slate-700 text-sm text-slate-300 hover:border-cyan-500/50 hover:text-cyan-400">Git</span>
-                        <span class="skill-tag px-3 py-1.5 rounded-lg bg-dark-900 border border-slate-700 text-sm text-slate-300 hover:border-cyan-500/50 hover:text-cyan-400">Docker</span>
-                        <span class="skill-tag px-3 py-1.5 rounded-lg bg-dark-900 border border-slate-700 text-sm text-slate-300 hover:border-cyan-500/50 hover:text-cyan-400">Ubuntu</span>
-                    </div>
-                </div>
-                <!-- Languages -->
-                <div class="glass-card rounded-xl p-6">
-                    <div class="flex items-center gap-3 mb-4">
-                        <div class="w-10 h-10 rounded-lg bg-pink-500/20 flex items-center justify-center">
-                            <i class="fas fa-globe text-pink-400"></i>
-                        </div>
-                        <h3 class="font-semibold text-white">Languages</h3>
-                    </div>
-                    <div class="space-y-2">
-                        <div class="flex justify-between items-center">
-                            <span class="text-slate-400">Vietnamese</span>
-                            <span class="text-sm text-pink-400">Native</span>
-                        </div>
-                        <div class="flex justify-between items-center">
-                            <span class="text-slate-400">English</span>
-                            <span class="text-sm text-pink-400">Conversational (IELTS 7.0)</span>
-                        </div>
-                    </div>
-                </div>
             </div>
         </div>
-    </section>
-    <!-- Certifications -->
-    <section class="py-20 bg-dark-800/50">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <h2 class="text-3xl font-bold text-white mb-10">
-                <span class="text-primary-400">~/</span>certifications
-            </h2>
-            <p class="text-slate-

 <!DOCTYPE html>
 <html lang="en" class="scroll-smooth">
 <head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Vu Hoang Anh | AI Engineer Portfolio</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link
+    href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap"
+    rel="stylesheet">
+  <script>
+    tailwind.config = {
             darkMode: 'class',
             theme: {
                 extend: {
                 }
             }
         }
+  </script>
+  <style>
+    .gradient-text {
+      background: linear-gradient(135deg, #38bdf8 0%, #818cf8 50%, #c084fc 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+    .glass-card {
+      background: rgba(30, 41, 59, 0.7);
+      backdrop-filter: blur(12px);
+      border: 1px solid rgba(148, 163, 184, 0.1);
+    }
+    .code-block {
+      background: #0d1117;
+      border-radius: 0.5rem;
+    }
+    .skill-tag {
+      transition: all 0.3s ease;
+    }
+    .skill-tag:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 10px 25px -5px rgba(14, 165, 233, 0.3);
+    }
+    .timeline-line {
+      background: linear-gradient(to bottom, #38bdf8, #818cf8, transparent);
+    }
+    .project-card {
+      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .project-card:hover {
+      transform: translateY(-8px);
+    }
+    .metric-card {
+      background: linear-gradient(145deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.9));
+    }
+    .cert-card {
+      transition: all 0.3s ease;
+      position: relative;
+      overflow: hidden;
+    }
+    .cert-card::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: -100%;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.1), transparent);
+      transition: left 0.5s ease;
+    }
+    .cert-card:hover::before {
+      left: 100%;
+    }
+    .cert-card:hover {
+      transform: translateY(-4px);
+      border-color: rgba(56, 189, 248, 0.3);
+    }
+    .cert-badge {
+      background: linear-gradient(135deg, #38bdf8 0%, #818cf8 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+    /* Custom scrollbar */
+    ::-webkit-scrollbar {
+      width: 8px;
+    }
+    ::-webkit-scrollbar-track {
+      background: #0f172a;
+    }
+    ::-webkit-scrollbar-thumb {
+      background: #475569;
+      border-radius: 4px;
+    }
+    ::-webkit-scrollbar-thumb:hover {
+      background: #64748b;
+    }
+    .typing-cursor::after {
+      content: '|';
+      animation: blink 1s step-end infinite;
+    }
+    @keyframes blink {
+      50% {
+        opacity: 0;
+      }
+    }
+    .cert-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+      gap: 1.5rem;
+    }
+    @media (max-width: 640px) {
+      .cert-grid {
+        grid-template-columns: 1fr;
+      }
+    }
+    .verify-btn {
+      position: relative;
+      overflow: hidden;
+    }
+    .verify-btn::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 0;
+      height: 0;
+      background: rgba(255, 255, 255, 0.1);
+      border-radius: 50%;
+      transform: translate(-50%, -50%);
+      transition: width 0.3s ease, height 0.3s ease;
+    }
+    .verify-btn:hover::after {
+      width: 100%;
+      height: 100%;
+    }
+  </style>
 </head>
 <body class="bg-dark-900 text-slate-300 font-sans antialiased selection:bg-primary-500 selection:text-white">
+  <!-- Built with anycoder -->
+  <div class="fixed top-20 right-4 z-40">
+    <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="group flex items-center gap-2 px-3 py-2 rounded-lg bg-dark-800/90 border border-slate-700/50 hover:border-primary-500/50 transition-all text-xs font-medium text-slate-400 hover:text-primary-400 backdrop-blur-sm">
+      <i class="fas fa-code text-primary-400"></i>
+      <span>Built with anycoder</span>
+    </a>
+  </div>
+  <!-- Navigation -->
+  <nav class="fixed top-0 left-0 right-0 z-50 glass-card border-b border-slate-800/50">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div class="flex justify-between items-center h-16">
+        <div class="flex items-center space-x-3">
+          <div
+            class="w-10 h-10 rounded-lg bg-gradient-to-br from-primary-500 to-purple-600 flex items-center justify-center">
+            <span class="text-white font-bold text-lg">VA</span>
+          </div>
+          <span class="font-mono font-semibold text-slate-100 hidden sm:block">vu.hoang.anh</span>
+        </div>
+        <div class="hidden md:flex items-center space-x-8">
+          <a href="#about" class="text-sm font-medium text-slate-400 hover:text-primary-400 transition-colors">About</a>
+          <a href="#experience"
+            class="text-sm font-medium text-slate-400 hover:text-primary-400 transition-colors">Experience</a>
+          <a href="#projects"
+            class="text-sm font-medium text-slate-400 hover:text-primary-400 transition-colors">Projects</a>
+          <a href="#skills"
+            class="text-sm font-medium text-slate-400 hover:text-primary-400 transition-colors">Skills</a>
+          <a href="#certifications"
+            class="text-sm font-medium text-slate-400 hover:text-primary-400 transition-colors">Certifications</a>
+          <a href="mailto:anhvh189@gmail.com"
+            class="px-4 py-2 rounded-lg bg-primary-600 hover:bg-primary-500 text-white text-sm font-medium transition-colors">
+            Contact
+          </a>
+        </div>
+        <button id="mobile-menu-btn" class="md:hidden text-slate-400 hover:text-white">
                     <i class="fas fa-bars text-xl"></i>
                 </button>
+      </div>
+    </div>
+    <!-- Mobile Menu -->
+    <div id="mobile-menu" class="hidden md:hidden glass-card border-t border-slate-800">
+      <div class="px-4 py-3 space-y-2">
+        <a href="#about" class="block py-2 text-slate-400 hover:text-primary-400">About</a>
+        <a href="#experience" class="block py-2 text-slate-400 hover:text-primary-400">Experience</a>
+        <a href="#projects" class="block py-2 text-slate-400 hover:text-primary-400">Projects</a>
+        <a href="#skills" class="block py-2 text-slate-400 hover:text-primary-400">Skills</a>
+        <a href="#certifications" class="block py-2 text-slate-400 hover:text-primary-400">Certifications</a>
+      </div>
+    </div>
+  </nav>
+  <!-- Hero Section -->
+  <section class="relative min-h-screen flex items-center justify-center pt-16 overflow-hidden">
+    <!-- Background Effects -->
+    <div class="absolute inset-0 overflow-hidden">
+      <div class="absolute -top-40 -right-40 w-80 h-80 bg-primary-500/20 rounded-full blur-3xl animate-pulse-slow">
+      </div>
+      <div class="absolute -bottom-40 -left-40 w-96 h-96 bg-purple-500/20 rounded-full blur-3xl animate-pulse-slow"
+        style="animation-delay: 1s;"></div>
+      <div
+        class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-blue-500/10 rounded-full blur-3xl">
+      </div>
+    </div>
+    <!-- Grid Pattern -->
+    <div
+      class="absolute inset-0 bg-[linear-gradient(rgba(30,41,59,0.3)_1px,transparent_1px),linear-gradient(90deg,rgba(30,41,59,0.3)_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_50%,#000_70%,transparent_100%)]">
+    </div>
+    <div class="relative z-10 max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+      <div class="animate-fade-in">
+        <div
+          class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary-500/10 border border-primary-500/20 text-primary-400 text-sm font-mono mb-6">
+          <span class="w-2 h-2 rounded-full bg-primary-400 animate-pulse"></span>
+          Available for Internship
         </div>
+        <h1 class="text-4xl sm:text-5xl md:text-7xl font-bold text-white mb-6 tracking-tight">
+          <span class="gradient-text">Vu Hoang Anh</span>
+        </h1>
+        <div class="text-xl sm:text-2xl md:text-3xl text-slate-400 mb-4 font-mono">
+          <span id="typing-text" class="typing-cursor"></span>
         </div>
+        <p class="text-lg text-slate-500 max-w-2xl mx-auto mb-8">
+          AI Engineer Intern specializing in Machine Learning, NLP, and Large Language Models.
+          Focused on fine-tuning, evaluation, and production-scale deployment.
+        </p>
+        <!-- Quick Stats -->
+        <div class="flex flex-wrap justify-center gap-4 mb-10">
+          <div class="flex items-center gap-2 px-4 py-2 rounded-lg bg-dark-800 border border-slate-700">
+            <i class="fas fa-map-marker-alt text-primary-400"></i>
+            <span class="text-sm">Hanoi, Vietnam</span>
+          </div>
+          <div class="flex items-center gap-2 px-4 py-2 rounded-lg bg-dark-800 border border-slate-700">
+            <i class="fas fa-graduation-cap text-primary-400"></i>
+            <span class="text-sm">GPA 3.86/4.00</span>
+          </div>
+          <div class="flex items-center gap-2 px-4 py-2 rounded-lg bg-dark-800 border border-slate-700">
+            <i class="fas fa-award text-primary-400"></i>
+            <span class="text-sm">4× Scholarship</span>
+          </div>
         </div>
+        <!-- CTA Buttons -->
+        <div class="flex flex-wrap justify-center gap-4">
+          <a href="mailto:anhvh189@gmail.com"
+            class="group px-6 py-3 rounded-lg bg-gradient-to-r from-primary-600 to-purple-600 text-white font-medium hover:shadow-lg hover:shadow-primary-500/25 transition-all">
+            <i class="fas fa-envelope mr-2"></i>
+            Get In Touch
+          </a>
+          <a href="https://github.com/vamcrizer" target="_blank"
+            class="group px-6 py-3 rounded-lg bg-dark-800 border border-slate-700 text-slate-300 hover:border-primary-500/50 hover:text-white transition-all">
+            <i class="fab fa-github mr-2"></i>
+            GitHub
+          </a>
+          <a href="https://linkedin.com/in/hoang-anh-vu-477a64288" target="_blank"
+            class="group px-6 py-3 rounded-lg bg-dark-800 border border-slate-700 text-slate-300 hover:border-primary-500/50 hover:text-white transition-all">
+            <i class="fab fa-linkedin mr-2"></i>
+            LinkedIn
+          </a>
         </div>
+      </div>
+    </div>
+    <!-- Scroll Indicator -->
+    <div class="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce">
+      <i class="fas fa-chevron-down text-slate-500"></i>
+    </div>
+  </section>
+  <!-- Career Objective -->
+  <section id="about" class="py-20 relative">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div class="grid md:grid-cols-2 gap-12 items-center">
+        <div class="animate-slide-up">
+          <h2 class="text-3xl font-bold text-white mb-6">
+            <span class="text-primary-400">~/</span>career-objective
+          </h2>
+          <div class="space-y-4 text-slate-400">
+            <p>
+              Research-oriented AI Engineer with hands-on engineering capabilities. My focus areas include:
+            </p>
+            <ul class="space-y-3">
+              <li class="flex items-start gap-3">
+                <i class="fas fa-brain text-primary-400 mt-1"></i>
+                <span><strong class="text-slate-200">Machine Learning</strong> — Deep understanding of algorithms and model architectures</span>
+              </li>
+              <li class="flex items-start gap-3">
+                <i class="fas fa-language text-purple-400 mt-1"></i>
+                <span><strong class="text-slate-200">Natural Language Processing</strong> — Text processing, embeddings, and transformers</span>
+              </li>
+              <li class="flex items-start gap-3">
+                <i class="fas fa-robot text-pink-400 mt-1"></i>
+                <span><strong class="text-slate-200">Large Language Models</strong> — Fine-tuning, evaluation, and production deployment</span>
+              </li>
+            </ul>
+            <p class="pt-4 border-t border-slate-800">
+              Seeking an internship to contribute to real AI projects while deepening expertise in LLM architecture and
+              reasoning capabilities.
+            </p>
+          </div>
         </div>
+        <div class="relative">
+          <div class="code-block p-6 font-mono text-sm">
+            <div class="flex items-center gap-2 mb-4 pb-4 border-b border-slate-800">
+              <div class="w-3 h-3 rounded-full bg-red-500"></div>
+              <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
+              <div class="w-3 h-3 rounded-full bg-green-500"></div>
+              <span class="ml-2 text-slate-500">objective.py</span>
+            </div>
+            <pre class="text-slate-300 overflow-x-auto"><code><span class="text-purple-400">class</span> <span class="text-yellow-400">AIEngineer</span>:
     <span class="text-purple-400">def</span> <span class="text-blue-400">__init__</span>(self):
         self.focus = [<span class="text-green-400">"ML"</span>, <span class="text-green-400">"NLP"</span>, <span class="text-green-400">"LLMs"</span>]
         self.mindset = <span class="text-green-400">"research + engineering"</span>
             <span class="text-green-400">"deep_dive"</span>: <span class="green-400">"LLM architecture"</span>,
             <span class="text-green-400">"master"</span>: <span class="text-green-400">"reasoning capabilities"</span>
         }</code></pre>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- Education -->
+  <section class="py-20 bg-dark-800/50">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <h2 class="text-3xl font-bold text-white mb-10">
+        <span class="text-primary-400">~/</span>education
+      </h2>
+      <div class="glass-card rounded-2xl p-8">
+        <div class="flex flex-col md:flex-row md:items-start md:justify-between gap-6">
+          <div class="flex-1">
+            <div class="flex items-start gap-4">
+              <div
+                class="w-14 h-14 rounded-xl bg-gradient-to-br from-primary-500 to-purple-600 flex items-center justify-center flex-shrink-0">
+                <i class="fas fa-university text-white text-xl"></i>
+              </div>
+              <div>
+                <h3 class="text-xl font-bold text-white">Posts and Telecommunications Institute of Technology (PTIT)
+                </h3>
+                <p class="text-primary-400 font-medium">Engineer of Information Technology — High-Quality Program</p>
+                <p class="text-slate-500 text-sm mt-1">Aug 2023 – Apr 2028 (Expected)</p>
+              </div>
+            </div>
+          </div>
+          <div class="text-right">
+            <div class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-green-500/10 border border-green-500/20">
+              <i class="fas fa-star text-green-400"></i>
+              <span class="text-green-400 font-bold text-lg">3.86 / 4.00</span>
             </div>
+            <p class="text-slate-500 text-sm mt-2">CGPA</p>
+          </div>
         </div>
+        <!-- Scholarships -->
+        <div class="mt-8 pt-6 border-t border-slate-700">
+          <h4 class="text-sm font-medium text-slate-400 uppercase tracking-wider mb-4">Scholarships</h4>
+          <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+            <div class="flex items-center gap-3 p-3 rounded-lg bg-dark-900/50">
+              <i class="fas fa-trophy text-yellow-400"></i>
+              <div>
+                <p class="text-sm font-medium text-slate-200">Fall 2023–2024</p>
+                <p class="text-xs text-slate-500">Academic Excellence</p>
+              </div>
+            </div>
+            <div class="flex items-center gap-3 p-3 rounded-lg bg-dark-900/50">
+              <i class="fas fa-trophy text-yellow-400"></i>
+              <div>
+                <p class="text-sm font-medium text-slate-200">Spring 2023–2024</p>
+                <p class="text-xs text-slate-500">Academic Excellence</p>
+              </div>
             </div>
+            <div class="flex items-center gap-3 p-3 rounded-lg bg-dark-900/50">
+              <i class="fas fa-trophy text-yellow-400"></i>
+              <div>
+                <p class="text-sm font-medium text-slate-200">Spring 2024–2025</p>
+                <p class="text-xs text-slate-500">Academic Excellence</p>
+              </div>
+            </div>
+            <div class="flex items-center gap-3 p-3 rounded-lg bg-dark-900/50">
+              <i class="fas fa-trophy text-yellow-400"></i>
+              <div>
+                <p class="text-sm font-medium text-slate-200">Fall 2024–2025</p>
+                <p class="text-xs text-slate-500">Academic Excellence</p>
+              </div>
+            </div>
+          </div>
         </div>
+      </div>
+    </div>
+  </section>
+  <!-- Professional Experience -->
+  <section id="experience" class="py-20">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <h2 class="text-3xl font-bold text-white mb-10">
+        <span class="text-primary-400">~/</span>experience
+      </h2>
+      <div class="relative">
+        <!-- Timeline Line -->
+        <div class="hidden md:block absolute left-8 top-0 bottom-0 w-0.5 timeline-line"></div>
+        <div class="space-y-8">
+          <div class="relative md:pl-20">
+            <!-- Timeline Dot -->
+            <div class="hidden md:flex absolute left-4 w-8 h-8 rounded-full bg-primary-500 items-center justify-center">
+              <i class="fas fa-briefcase text-white text-sm"></i>
+            </div>
+            <div class="glass-card rounded-xl p-6 project-card">
+              <div class="flex flex-col md:flex-row md:items-start md:justify-between gap-4 mb-4">
+                <div>
+                  <h3 class="text-xl font-bold text-white">AI & Backend Developer</h3>
+                  <p class="text-primary-400">PTIT IEC — Part-time</p>
+                </div>
+                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-primary-500/10 text-primary-400">
                                     Oct 2024 – Present
                                 </span>
+              </div>
+              <ul class="space-y-3 text-slate-400">
+                <li class="flex items-start gap-3">
+                  <i class="fas fa-check-circle text-green-400 mt-1 text-sm"></i>
+                  <span>Participated in academic and startup lab projects involving applied AI and automation</span>
+                </li>
+                <li class="flex items-start gap-3">
+                  <i class="fas fa-check-circle text-green-400 mt-1 text-sm"></i>
+                  <span>Optimized and refactored legacy research code, focusing on <strong class="text-slate-200">runtime performance</strong> and <strong class="text-slate-200">maintainability</strong></span>
+                </li>
+                <li class="flex items-start gap-3">
+                  <i class="fas fa-check-circle text-green-400 mt-1 text-sm"></i>
+                  <span>Integrated custom LLM modules into backend systems to enhance context-aware response capabilities</span>
+                </li>
+              </ul>
+              <div class="mt-4 pt-4 border-t border-slate-700">
+                <p class="text-sm text-slate-500">
+                  <i class="fas fa-info-circle mr-2"></i>
+                  Not typo-fixing intern — real backend + AI integration work
+                </p>
+              </div>
             </div>
+          </div>
         </div>
+      </div>
+    </div>
+  </section>
+  <!-- Projects -->
+  <section id="projects" class="py-20 bg-dark-800/50">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <h2 class="text-3xl font-bold text-white mb-4">
+        <span class="text-primary-400">~/</span>projects
+      </h2>
+      <p class="text-slate-500 mb-10">Selected projects demonstrating research + production capabilities</p>
+      <div class="grid lg:grid-cols-2 gap-8">
+        <!-- Project 1: Code Vulnerability -->
+        <div class="glass-card rounded-2xl p-6 project-card border-l-4 border-primary-500">
+          <div class="flex items-start justify-between mb-4">
+            <div>
+              <h3 class="text-xl font-bold text-white">Code Vulnerability Detection with LLMs</h3>
+              <p class="text-sm text-slate-500">Apr 2025 – Sep 2025</p>
+            </div>
+            <div class="flex gap-2">
+              <span class="px-2 py-1 rounded text-xs bg-purple-500/20 text-purple-400">Leader</span>
+              <span class="px-2 py-1 rounded text-xs bg-blue-500/20 text-blue-400">Researcher</span>
             </div>
+          </div>
+          <p class="text-slate-400 text-sm mb-4">Research + production pipeline for detecting and explaining security
+            vulnerabilities in source code using LLMs.</p>
+          <!-- Metrics -->
+          <div class="grid grid-cols-2 gap-3 mb-4">
+            <div class="metric-card p-3 rounded-lg">
+              <p class="text-2xl font-bold text-green-400">0.80</p>
+              <p class="text-xs text-slate-500">GraphCodeBERT Accuracy</p>
+            </div>
+            <div class="metric-card p-3 rounded-lg">
+              <p class="text-2xl font-bold text-green-400">0.82</p>
+              <p class="text-xs text-slate-500">F1-Score</p>
+            </div>
+            <div class="metric-card p-3 rounded-lg">
+              <p class="text-2xl font-bold text-primary-400">78.7%</p>
+              <p class="text-xs text-slate-500">Qwen2.5 Accuracy</p>
+            </div>
+            <div class="metric-card p-3 rounded-lg">
+              <p class="text-2xl font-bold text-primary-400">64.3%</p>
+              <p class="text-xs text-slate-500">Explanation Clarity</p>
+            </div>
+          </div>
+          <!-- Tech Stack -->
+          <div class="flex flex-wrap gap-2 mb-4">
+            <span class="px-2 py-1 rounded-md bg-dark-900 text-xs text-slate-400">GPT-4o-mini</span>
+            <span class="px-2 py-1 rounded-md bg-dark-900 text-xs text-slate-400">GraphCodeBERT</span>
+            <span class="px-2 py-1 rounded-md bg-dark-900 text-xs text-slate-400">Qwen2.5-Coder-14B</span>
+            <span class="px-2 py-1 rounded-md bg-dark-900 text-xs text-slate-400">LoRA SFT</span>
+            <span class="px-2 py-1 rounded-md bg-dark-900 text-xs text-slate-400">GGUF</span>
+            <span class="px-2 py-1 rounded-md bg-dark-900 text-xs text-slate-400">Docker</span>
+          </div>
+          <details class="group">
+            <summary class="cursor-pointer text-sm text-primary-400 hover:text-primary-300 flex items-center gap-2">
+              <i class="fas fa-chevron-down transition-transform group-open:rotate-180"></i>
+              Technical Details
+            </summary>
+            <ul class="mt-3 space-y-2 text-sm text-slate-400 pl-4">
+              <li>• Collected 30,000 code samples from DiverseVul (20k vulnerable, 10k non-vulnerable)</li>
+              <li>• Applied oversampling to balance dataset (20k–20k)</li>
+              <li>• Generated structured explanations via GPT-4o-mini API for classification and explanation tasks</li>
+              <li>• Fine-tuned GraphCodeBERT with LoRA SFT on Qwen2.5-Coder-14B</li>
+              <li>• Quantized to GGUF using llama.cpp, containerized with Docker</li>
+            </ul>
+          </details>
         </div>
+        <!-- Project 2: RAG Pipeline -->
+        <div class="glass-card rounded-2xl p-6 project-card border-l-4 border-purple-500">
+          <div class="flex items-start justify-between mb-4">
+            <div>
+              <h3 class="text-xl font-bold text-white">Efficient RAG Pipeline</h3>
+              <p class="text-sm text-slate-500">Jan 2026 – Present</p>
+            </div>
+            <span class="px-2 py-1 rounded text-xs bg-purple-500/20 text-purple-400">AI Engineer</span>
+          </div>
+          <p class="text-slate-400 text-sm mb-4">Production-oriented RAG system with custom model selection, hybrid
+            retrieval, and comprehensive evaluation.</p>
+          <!-- Metrics -->
+          <div class="grid grid-cols-2 gap-3 mb-4">
+            <div class="metric-card p-3 rounded-lg">
+              <p class="text-2xl font-bold text-green-400">0.98</p>
+              <p class="text-xs text-slate-500">RAGAS Faithfulness</p>
+            </div>
+            <div class="metric-card p-3 rounded-lg">
+              <p class="text-2xl font-bold text-green-400">0.99</p>
+              <p class="text-xs text-slate-500">Answer Relevance</p>
+            </div>
+          </div>
+          <!-- Architecture Diagram -->
+          <div class="code-block p-4 mb-4 text-xs font-mono">
+            <p class="text-slate-500 mb-2"># RAG Architecture</p>
+            <p><span class="text-purple-400">Input</span> → <span class="text-yellow-400">Dynamic Chunking</span> →
+              <span class="text-blue-400">Hybrid Retrieval</span>
+            </p>
+            <p class="pl-4 text-slate-400">├─ Milvus (Vector)</p>
+            <p class="pl-4 text-slate-400">├─ Elasticsearch (Keyword)</p>
+            <p class="pl-4 text-slate-400">└─ RRF Fusion</p>
+            <p>→ <span class="text-green-400">GGUF Trio</span> (Embed/Rerank/Gen) →
+              <span class="text-purple-400">Output</span>
+            </p>
+          </div>
+          <!-- Tech Stack -->
+          <div class="flex flex-wrap gap-2 mb-4">
+            <span class="px-2 py-1 rounded-md bg-dark-900 text-xs text-slate-400">llama.cpp</span>
+            <span class="px-2 py-1 rounded-md bg-dark-900 text-xs text-slate-400">Milvus</span>
+            <span class="px-2 py-1 rounded-md bg-dark-900 text-xs text-slate-400">Elasticsearch</span>
+            <span class="px-2 py-1 rounded-md bg-dark-900 text-xs text-slate-400">RRF</span>
+            <span class="px-2 py-1 rounded-md bg-dark-900 text-xs text-slate-400">RAGAS</span>
+            <span class="px-2 py-1 rounded-md bg-dark-900 text-xs text-slate-400">GGUF</span>
+          </div>
+          <details class="group">
+            <summary class="cursor-pointer text-sm text-purple-400 hover:text-purple-300 flex items-center gap-2">
+              <i class="fas fa-chevron-down transition-transform group-open:rotate-180"></i>
+              Technical Details
+            </summary>
+            <ul class="mt-3 space-y-2 text-sm text-slate-400 pl-4">
+              <li>• Hand-picked GGUF model trio: Embedding, Reranking, Generation</li>
+              <li>• Full llama.cpp inference stack</li>
+              <li>• Dynamic hierarchical chunking strategy</li>
+              <li>• Hybrid retrieval: Milvus (vector) + Elasticsearch (keyword)</li>
+              <li>• Reciprocal Rank Fusion for result combination</li>
+              <li>• Evaluated with RAGAS on AWS RAG documentation (Gemini 3 Pro)</li>
+            </ul>
+          </details>
+        </div>
+        <!-- Project 3: Tea Leaves System -->
+        <div class="glass-card rounded-2xl p-6 project-card border-l-4 border-green-500 lg:col-span-2">
+          <div class="flex flex-col md:flex-row md:items-start justify-between gap-4 mb-4">
+            <div>
+              <h3 class="text-xl font-bold text-white">Tea Leaves Intelligent System</h3>
+              <p class="text-sm text-slate-500">Feb 2025 – May 2025</p>
+            </div>
+            <div class="flex gap-2">
+              <span class="px-2 py-1 rounded text-xs bg-green-500/20 text-green-400">Leader</span>
+              <span class="px-2 py-1 rounded text-xs bg-orange-500/20 text-orange-400">Team: 4</span>
+            </div>
+          </div>
+          <div class="grid md:grid-cols-2 gap-6">
+            <div>
+              <p class="text-slate-400 text-sm mb-4">IoT architecture for real-time tea harvest management with
+                enterprise-grade backend security.</p>
+              <ul class="space-y-2 text-sm text-slate-400">
+                <li class="flex items-start gap-2">
+                  <i class="fas fa-wifi text-green-400 mt-0.5"></i>
+                  <span>Real-time IoT data collection via MQTT</span>
+                </li>
+                <li class="flex items-start gap-2">
+                  <i class="fas fa-shield-alt text-green-400 mt-0.5"></i>
+                  <span>Spring Security + JWT authentication</span>
+                </li>
+                <li class="flex items-start gap-2">
+                  <i class="fas fa-weight text-green-400 mt-0.5"></i>
+                  <span>Automatic weight recording system</span>
+                </li>
+                <li class="flex items-start gap-2">
+                  <i class="fas fa-id-card text-green-400 mt-0.5"></i>
+                  <span>Farmer ID tracking integration</span>
+                </li>
+              </ul>
             </div>
+            <div class="code-block p-4 font-mono text-xs">
+              <p class="text-slate-500 mb-2"># Tech Stack</p>
+              <p><span class="text-green-400">backend:</span></p>
+              <p class="pl-2">- Spring Boot</p>
+              <p class="pl-2">- Spring Security</p>
+              <p class="pl-2">- JWT</p>
+              <p><span class="text-green-400">iot:</span></p>
+              <p class="pl-2">- MQTT</p>
+              <p class="pl-2">- Real-time sensors</p>
+              <p><span class="text-green-400">data:</span></p>
+              <p class="pl-2">- MySQL</p>
+              <p class="pl-2">- Docker</p>
+            </div>
+          </div>
+          <div class="mt-4 pt-4 border-t border-slate-700">
+            <p class="text-sm text-slate-500">
+              <i class="fas fa-lightbulb text-yellow-400 mr-2"></i>
+              Demonstrates system thinking beyond pure AI — enterprise backend + IoT integration
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- Skills -->
+  <section id="skills" class="py-20">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <h2 class="text-3xl font-bold text-white mb-10">
+        <span class="text-primary-400">~/</span>skills
+      </h2>
+      <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+        <!-- Programming Languages -->
+        <div class="glass-card rounded-xl p-6">
+          <div class="flex items-center gap-3 mb-4">
+            <div class="w-10 h-10 rounded-lg bg-blue-500/20 flex items-center justify-center">
+              <i class="fas fa-code text-blue-400"></i>
+            </div>
+            <h3 class="font-semibold text-white">Programming</h3>
+          </div>
+          <div class="flex flex-wrap gap-2">
+            <span class="skill-tag px-3 py-1.5 rounded-lg bg-dark-900 border border-slate-700 text-sm text-slate-300 hover:border-blue-500/50 hover:text-blue-400">Python</span>
+            <span class="skill-tag px-3 py-1.5 rounded-lg bg-dark-900 border border-slate-700 text-sm text-slate-300 hover:border-blue-500/50 hover:text-blue-400">C++</span>
+            <span class="skill-tag px-3 py-1.5 rounded-lg bg-dark-900 border border-slate-700 text-sm text-slate-300 hover:border-blue-500/50 hover:text-blue-400">Java</span>
+            <span class="skill-tag px-3 py-1.5 rounded-lg bg-dark-900 border border-slate-700 text-sm text-slate-300 hover:border-blue-500/50 hover:text-blue-400">SQL</span>
+          </div>
         </div>
+        <!-- LLM & AI -->
+        <div class="glass-card rounded-xl p-6">
+          <div class="flex items-center gap-3 mb-4">
+            <div class="w-10 h-10 rounded-lg bg-purple-500/20 flex items-center justify-center">
+              <i class="fas fa-brain text-purple-400"></i>
+            </div>
+            <h3 class="font-semibold text-white">LLM & AI</h3>
+          </div>
+          <div class="flex flex-wrap gap-2">
+            <span class="skill-tag px-3 py-1.5 rounded-lg bg-dark-900 border border-slate-700 text-sm text-slate-300 hover:border-purple-500/50 hover:text-purple-400">Transformers</span>
+            <span class="skill-tag px-3 py-1.5 rounded-lg bg-dark-900 border border-slate-700 text-sm text-slate-300 hover:border-purple-500/50 hover:text-purple-400">PyTorch</span>
+            <span class="skill-tag px-3 py-1.5 rounded-lg bg-dark-900 border border-slate-700 text-sm text-slate-300 hover:border-purple-500/50 hover:text-purple-400">Unsloth</span>
+            <span class="skill-tag px-3 py-1.5 rounded-lg bg-dark-900 border border-slate-700 text-sm text-slate-300 hover:border-purple-500/50 hover:text-purple-400">LLaMA.cpp</span>
+            <span class="skill-tag px-3 py-1.5 rounded-lg bg-dark-900 border border-slate-700 text-sm text-slate-300 hover:border-purple-500/50 hover:text-purple-400">Ollama</span>
+            <span class="skill-tag px-3 py-1.5 rounded-lg bg-dark-900 border border-slate-700 text-sm text-slate-300 hover:border-purple-500/50 hover:text-purple-400">LangChain</span>
+          </div>
+        </div>
+        <!-- Frameworks -->
+        <div class="glass-card rounded-xl p-6">
+          <div class="flex items-center gap-3 mb-4">
+            <div class="w-10 h-10 rounded-lg bg-green-500/20 flex items-center justify-center">
+              <i class="fas fa-layer-group text-green-400"></i>
+            </div>
+            <h3 class="font-semibold text-white">Frameworks</h3>
+          </div>
+          <div class="flex flex-wrap gap-2">
+            <span class="skill-tag px-3 py-1.5 rounded-lg bg-dark-900 border border-slate-700 text-sm text-slate-300 hover:border-green-500/50 hover:text-green-400">FastAPI</span>
+            <span class="skill-tag px-3 py-1.5 rounded-lg bg-dark-900 border border-slate-700 text-sm text-slate-300 hover:border-green-500/50 hover:text-green-400">Spring Boot</span>
+          </div>
+        </div>
+        <!-- Databases -->
+        <div class="glass-card rounded-xl p-6">
+          <div class="flex items-center gap-3 mb-4">
+            <div class="w-10 h-10 rounded-lg bg-orange-500/20 flex items-center justify-center">
+              <i class="fas fa-database text-orange-400"></i>
+            </div>
+            <h3 class="font-semibold text-white">Databases</h3>
+          </div>
+          <div class="flex flex-wrap gap-2">
+            <span class="skill-tag px-3 py-1.5 rounded-lg bg-dark-900 border border-slate-700 text-sm text-slate-300 hover:border-orange-500/50 hover:text-orange-400">MySQL</span>
+            <span class="skill-tag px-3 py-1.5 rounded-lg bg-dark-900 border border-slate-700 text-sm text-slate-300 hover:border-orange-500/50 hover:text-orange-400">PostgreSQL</span>
+            <span class="skill-tag px-3 py-1.5 rounded-lg bg-dark-900 border border-slate-700 text-sm text-slate-300 hover:border-orange-500/50 hover:text-orange-400">Milvus</span>
+            <span class="skill-tag px-3