Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Pandu Dhaulagiri | Ars Paradox</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Space Grotesk', sans-serif; | |
| background-color: #0f172a; | |
| color: #e2e8f0; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, #38bdf8, #818cf8, #c084fc); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .card-gradient { | |
| background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); | |
| } | |
| .timeline-item::before { | |
| content: ''; | |
| position: absolute; | |
| left: -32px; | |
| top: 0; | |
| height: 100%; | |
| width: 2px; | |
| background: #3b82f6; | |
| } | |
| .section-divider { | |
| position: relative; | |
| height: 1px; | |
| background: linear-gradient(90deg, transparent, #3b82f6, transparent); | |
| margin: 3rem 0; | |
| } | |
| .glow-effect { | |
| box-shadow: 0 0 15px rgba(59, 130, 246, 0.5); | |
| } | |
| .social-icon { | |
| transition: all 0.3s ease; | |
| } | |
| .social-icon:hover { | |
| transform: scale(1.1); | |
| filter: drop-shadow(0 0 8px rgba(129, 140, 248, 0.7)); | |
| } | |
| .section-title { | |
| position: relative; | |
| display: inline-block; | |
| } | |
| .section-title::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -8px; | |
| left: 0; | |
| width: 100%; | |
| height: 3px; | |
| background: linear-gradient(90deg, #38bdf8, #818cf8); | |
| border-radius: 3px; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <!-- Navigation --> | |
| <nav class="sticky top-0 z-50 bg-slate-900/80 backdrop-blur-md border-b border-slate-800/50"> | |
| <div class="container mx-auto px-6 py-4"> | |
| <div class="flex items-center justify-between"> | |
| <a href="#" class="text-2xl font-bold gradient-text">Ars Paradox</a> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#about" class="text-slate-300 hover:text-white transition">About</a> | |
| <a href="#projects" class="text-slate-300 hover:text-white transition">Projects</a> | |
| <a href="#experience" class="text-slate-300 hover:text-white transition">Experience</a> | |
| <a href="#skills" class="text-slate-300 hover:text-white transition">Skills</a> | |
| <a href="#contact" class="text-slate-300 hover:text-white transition">Contact</a> | |
| </div> | |
| <button class="md:hidden text-slate-300 focus:outline-none"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="relative py-20 px-6"> | |
| <div class="absolute inset-0 -z-10"> | |
| <div class="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-10"></div> | |
| <div class="absolute inset-0 bg-gradient-to-br from-blue-900/20 via-slate-900 to-purple-900/20"></div> | |
| </div> | |
| <div class="container mx-auto flex flex-col lg:flex-row items-center justify-between"> | |
| <div class="lg:w-1/2 mb-10 lg:mb-0"> | |
| <h1 class="text-5xl md:text-6xl font-bold mb-6"> | |
| <span class="gradient-text">Pandu Dhaulagiri</span> | |
| </h1> | |
| <h2 class="text-2xl md:text-3xl font-semibold mb-6 text-slate-300">AI Engineer & Creative Technologist</h2> | |
| <p class="text-lg text-slate-300 mb-8 leading-relaxed"> | |
| Building unconventional systems at the intersection of AI, gaming, and interactive storytelling. | |
| Passionate about reverse engineering, local AI systems, and creating unique digital experiences. | |
| </p> | |
| <div class="flex space-x-6 mb-8"> | |
| <a href="mailto:[email protected]" class="social-icon text-blue-400 text-2xl"> | |
| <i class="fas fa-envelope"></i> | |
| </a> | |
| <a href="https://github.com/Iteranya" target="_blank" class="social-icon text-slate-200 text-2xl"> | |
| <i class="fab fa-github"></i> | |
| </a> | |
| <a href="https://linkedin.com/in/pandu-dhaulagiri" target="_blank" class="social-icon text-blue-500 text-2xl"> | |
| <i class="fab fa-linkedin"></i> | |
| </a> | |
| <a href="https://discordapp.com/users/pandu.paradox" target="_blank" class="social-icon text-indigo-400 text-2xl"> | |
| <i class="fab fa-discord"></i> | |
| </a> | |
| </div> | |
| <a href="#contact" class="bg-gradient-to-r from-blue-600 to-indigo-600 text-white px-6 py-3 rounded-full font-medium hover:shadow-lg transition-all hover:translate-y-[-2px] inline-flex items-center"> | |
| Get in touch <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <div class="lg:w-1/2 flex justify-center"> | |
| <div class="relative w-64 h-64 md:w-80 md:h-80 lg:w-96 lg:h-96"> | |
| <div class="absolute inset-0 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 opacity-20 blur-xl"></div> | |
| <div class="absolute inset-0 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 opacity-10 blur-lg"></div> | |
| <div class="relative w-full h-full bg-slate-800/50 border border-slate-700 rounded-xl overflow-hidden flex items-center justify-center"> | |
| <div class="text-center p-6"> | |
| <i class="fas fa-robot text-7xl md:text-8xl text-indigo-400 mb-4"></i> | |
| <h3 class="text-xl font-bold gradient-text">Ars Paradox</h3> | |
| <p class="text-slate-400">"Engineered Serendipity"</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-16 px-6"> | |
| <div class="container mx-auto"> | |
| <h2 class="text-3xl font-bold mb-12 text-center section-title"> | |
| <span class="gradient-text">About Me</span> | |
| </h2> | |
| <div class="grid md:grid-cols-2 gap-10 items-center"> | |
| <div> | |
| <p class="text-lg text-slate-300 mb-6 leading-relaxed"> | |
| I'm an unconventional engineer with a passion for pushing boundaries. My work blends technical | |
| expertise with creative problem-solving, often resulting in unique systems you won't find anywhere else. | |
| </p> | |
| <p class="text-lg text-slate-300 mb-6 leading-relaxed"> | |
| With a background in mentoring, reverse engineering, and AI system design, I thrive in environments | |
| where standard solutions don't apply. Whether it's embedding a visual novel engine in Minecraft or | |
| creating personality-infused AI models, I love the challenge of making the impossible work. | |
| </p> | |
| <div class="flex flex-wrap gap-4 mt-8"> | |
| <span class="bg-slate-800/50 border border-slate-700 px-4 py-2 rounded-full text-sm font-medium"> | |
| <i class="fas fa-microchip mr-2 text-blue-400"></i> AI Systems | |
| </span> | |
| <span class="bg-slate-800/50 border border-slate-700 px-4 py-2 rounded-full text-sm font-medium"> | |
| <i class="fas fa-gamepad mr-2 text-purple-400"></i> Game Engineering | |
| </span> | |
| <span class="bg-slate-800/50 border border-slate-700 px-4 py-2 rounded-full text-sm font-medium"> | |
| <i class="fas fa-brain mr-2 text-indigo-400"></i> LLM Fine-tuning | |
| </span> | |
| <span class="bg-slate-800/50 border border-slate-700 px-4 py-2 rounded-full text-sm font-medium"> | |
| <i class="fas fa-book mr-2 text-pink-400"></i> Interactive Storytelling | |
| </span> | |
| </div> | |
| </div> | |
| <div class="bg-slate-800/30 border border-slate-700 rounded-xl p-8 card-gradient glow-effect"> | |
| <h3 class="text-xl font-bold text-white mb-4">Contact Information</h3> | |
| <ul class="space-y-4"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-envelope mr-3 mt-1 text-blue-400"></i> | |
| <span>[email protected]</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-phone-alt mr-3 mt-1 text-green-400"></i> | |
| <span>(+62) 859-6597-5929</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fab fa-discord mr-3 mt-1 text-indigo-400"></i> | |
| <span>@pandu.paradox</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fab fa-github mr-3 mt-1 text-slate-200"></i> | |
| <span>@Iteranya</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fab fa-linkedin mr-3 mt-1 text-blue-500"></i> | |
| <span>linkedin.com/in/pandu-dhaulagiri</span> | |
| </li> | |
| </ul> | |
| <div class="mt-6"> | |
| <h4 class="font-medium text-slate-300 mb-2">Interests Beyond Tech</h4> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-slate-700/50 px-3 py-1 rounded-full text-xs">Psychology</span> | |
| <span class="bg-slate-700/50 px-3 py-1 rounded-full text-xs">Philosophy</span> | |
| <span class="bg-slate-700/50 px-3 py-1 rounded-full text-xs">Creative Writing</span> | |
| <span class="bg-slate-700/50 px-3 py-1 rounded-full text-xs">Economy</span> | |
| <span class="bg-slate-700/50 px-3 py-1 rounded-full text-xs">Cooking</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <div class="section-divider container mx-auto"></div> | |
| <!-- Projects Section --> | |
| <section id="projects" class="py-16 px-6"> | |
| <div class="container mx-auto"> | |
| <h2 class="text-3xl font-bold mb-12 text-center section-title"> | |
| <span class="gradient-text">Featured Projects</span> | |
| </h2> | |
| <div class="space-y-12"> | |
| <!-- Project 1 --> | |
| <div class="card-gradient rounded-xl overflow-hidden border border-slate-700 glow-effect"> | |
| <div class="md:flex"> | |
| <div class="md:w-1/3 bg-slate-800 p-6 flex items-center justify-center"> | |
| <div class="text-center"> | |
| <i class="fas fa-book-open text-6xl mb-4 text-purple-400"></i> | |
| <h3 class="text-xl font-bold">MobTalkerRedux</h3> | |
| <div class="flex justify-center space-x-2 mt-4"> | |
| <span class="bg-slate-700 px-2 py-1 rounded-full text-xs">Python</span> | |
| <span class="bg-slate-700 px-2 py-1 rounded-full text-xs">Java</span> | |
| <span class="bg-slate-700 px-2 py-1 rounded-full text-xs">Minecraft</span> | |
| </div> | |
| <a href="https://github.com/Iteranya/MobTalkerRedux" target="_blank" class="inline-block mt-4 text-blue-400 hover:text-blue-300"> | |
| View on GitHub <i class="fas fa-external-link-alt ml-1"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="md:w-2/3 p-8"> | |
| <h3 class="text-2xl font-bold mb-4">Embedded Visual Novel Engine</h3> | |
| <p class="text-slate-300 mb-4"> | |
| Created an entire Visual Novel Game Engine from scratch that runs within Minecraft, featuring: | |
| </p> | |
| <ul class="space-y-2 mb-6"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check mr-2 mt-1 text-green-400"></i> | |
| <span>A pseudo-DSL (domain-specific language) for creating scripts</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check mr-2 mt-1 text-green-400"></i> | |
| <span>Python compiler that transforms readable scripts into JSON Finite State Machines</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check mr-2 mt-1 text-green-400"></i> | |
| <span>Deep understanding of working with obfuscated codebases (Minecraft)</span> | |
| </li> | |
| </ul> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-slate-800/70 border border-slate-700 px-3 py-1 rounded-full text-xs">Game Engine</span> | |
| <span class="bg-slate-800/70 border border-slate-700 px-3 py-1 rounded-full text-xs">DSL Creation</span> | |
| <span class="bg-slate-800/70 border border-slate-700 px-3 py-1 rounded-full text-xs">Reverse Engineering</span> | |
| <span class="bg-slate-800/70 border border-slate-700 px-3 py-1 rounded-full text-xs">Finite State Machines</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 2 --> | |
| <div class="card-gradient rounded-xl overflow-hidden border border-slate-700 glow-effect"> | |
| <div class="md:flex"> | |
| <div class="md:w-1/3 bg-slate-800 p-6 flex items-center justify-center"> | |
| <div class="text-center"> | |
| <i class="fas fa-robot text-6xl mb-4 text-blue-400"></i> | |
| <h3 class="text-xl font-bold">Aktiva AI</h3> | |
| <div class="flex justify-center space-x-2 mt-4"> | |
| <span class="bg-slate-700 px-2 py-1 rounded-full text-xs">Python</span> | |
| <span class="bg-slate-700 px-2 py-1 rounded-full text-xs">LLM</span> | |
| <span class="bg-slate-700 px-2 py-1 rounded-full text-xs">Discord</span> | |
| </div> | |
| <a href="https://github.com/Iteranya/AktivaAI" target="_blank" class="inline-block mt-4 text-blue-400 hover:text-blue-300"> | |
| View on GitHub <i class="fas fa-external-link-alt ml-1"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="md:w-2/3 p-8"> | |
| <h3 class="text-2xl font-bold mb-4">Multi-Agent Character AI Discord Bot</h3> | |
| <p class="text-slate-300 mb-4"> | |
| Developed an AI wrapper in a Discord bot for multi-character AI implementation with local AI capabilities: | |
| </p> | |
| <ul class="space-y-2 mb-6"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check mr-2 mt-1 text-green-400"></i> | |
| <span>Deep understanding of Large Language Model operations</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check mr-2 mt-1 text-green-400"></i> | |
| <span>Expertise in Python asynchronous task development</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check mr-2 mt-1 text-green-400"></i> | |
| <span>Running local AI on consumer hardware with 3rd party service integration</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check mr-2 mt-1 text-green-400"></i> | |
| <span>Advanced prompt engineering and AI context manipulation</span> | |
| </li> | |
| </ul> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-slate-800/70 border border-slate-700 px-3 py-1 rounded-full text-xs">Local AI Deployment</span> | |
| <span class="bg-slate-800/70 border border-slate-700 px-3 py-1 rounded-full text-xs">Multi-Agent Systems</span> | |
| <span class="bg-slate-800/70 border border-slate-700 px-3 py-1 rounded-full text-xs">Discord API</span> | |
| <span class="bg-slate-800/70 border border-slate-700 px-3 py-1 rounded-full text-xs">AI Interaction Design</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 3 --> | |
| <div class="card-gradient rounded-xl overflow-hidden border border-slate-700 glow-effect"> | |
| <div class="md:flex"> | |
| <div class="md:w-1/3 bg-slate-800 p-6 flex items-center justify-center"> | |
| <div class="text-center"> | |
| <i class="fas fa-brain text-6xl mb-4 text-indigo-400"></i> | |
| <h3 class="text-xl font-bold">Viel-Mistral</h3> | |
| <div class="flex justify-center space-x-2 mt-4"> | |
| <span class="bg-slate-700 px-2 py-1 rounded-full text-xs">Python</span> | |
| <span class="bg-slate-700 px-2 py-1 rounded-full text-xs">LLM</span> | |
| <span class="bg-slate-700 px-2 py-1 rounded-full text-xs">LoRA</span> | |
| </div> | |
| <a href="https://huggingface.co/ArsParadox/Viel-Mistral-v3" target="_blank" class="inline-block mt-4 text-blue-400 hover:text-blue-300"> | |
| View on HuggingFace <i class="fas fa-external-link-alt ml-1"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="md:w-2/3 p-8"> | |
| <h3 class="text-2xl font-bold mb-4">Personality-Embedded LLM</h3> | |
| <p class="text-slate-300 mb-4"> | |
| Created a customized large language model with built-in personality traits through dataset modification and fine-tuning: | |
| </p> | |
| <ul class="space-y-2 mb-6"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check mr-2 mt-1 text-green-400"></i> | |
| <span>Modified 52k Alpaca training dataset with unique personality characteristics</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check mr-2 mt-1 text-green-400"></i> | |
| <span>Developed automated scripts for large dataset manipulation using Kluster Batch format</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check mr-2 mt-1 text-green-400"></i> | |
| <span>Fine-tuned Mistral 7B using Low-Rank Adaptation (LoRA) on limited hardware</span> | |
| </li> | |
| </ul> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-slate-800/70 border border-slate-700 px-3 py-1 rounded-full text-xs">LLM Fine-tuning</span> | |
| <span class="bg-slate-800/70 border border-slate-700 px-3 py-1 rounded-full text-xs">Dataset Engineering</span> | |
| <span class="bg-slate-800/70 border border-slate-700 px-3 py-1 rounded-full text-xs">Personality AI</span> | |
| <span class="bg-slate-800/70 border border-slate-700 px-3 py-1 rounded-full text-xs">LoRA</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <div class="section-divider container mx-auto"></div> | |
| <!-- Experience Section --> | |
| <section id="experience" class="py-16 px-6"> | |
| <div class="container mx-auto"> | |
| <h2 class="text-3xl font-bold mb-12 text-center section-title"> | |
| <span class="gradient-text">Professional Experience</span> | |
| </h2> | |
| <div class="max-w-3xl mx-auto"> | |
| <!-- Experience 1 --> | |
| <div class="relative pl-10 mb-12 timeline-item"> | |
| <div class="absolute left-0 top-1 w-4 h-4 rounded-full bg-blue-500 border-4 border-slate-900"></div> | |
| <div class="bg-slate-800/50 border border-slate-700 rounded-xl p-6 glow-effect"> | |
| <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-4"> | |
| <h3 class="text-xl font-bold">Bangkit Academy</h3> | |
| <span class="text-sm bg-blue-900/30 text-blue-300 px-3 py-1 rounded-full">Nov 2022 - Nov 2023</span> | |
| </div> | |
| <h4 class="text-lg text-blue-300 mb-4">Mentor & Discord Moderator</h4> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <i class="fas fa-graduation-cap mr-3 mt-1 text-blue-400"></i> | |
| <p>Android Developer Mentor with the highest graduation rate in class, helping 40+ students with various backgrounds and skill levels</p> | |
| </div> | |
| <div class="flex items-start"> | |
| <i class="fas fa-users mr-3 mt-1 text-blue-400"></i> | |
| <p>Mentored 3 student groups in startup building from ideation through to securing investment funding</p> | |
| </div> | |
| <div class="flex items-start"> | |
| <i class="fas fa-comments mr-3 mt-1 text-blue-400"></i> | |
| <p>Provided life advice and soft skills training during weekly meetings through storytelling and guided discussions</p> | |
| </div> | |
| <div class="flex items-start"> | |
| <i class="fas fa-shield-alt mr-3 mt-1 text-blue-400"></i> | |
| <p>Discord Moderator for multiple cohorts, managing server activities, conflict resolution, online events, and community upkeep</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Experience 2 --> | |
| <div class="relative pl-10 mb-12 timeline-item"> | |
| <div class="absolute left-0 top-1 w-4 h-4 rounded-full bg-blue-500 border-4 border-slate-900"></div> | |
| <div class="bg-slate-800/50 border border-slate-700 rounded-xl p-6 glow-effect"> | |
| <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-4"> | |
| <h3 class="text-xl font-bold">PT. Vimayo</h3> | |
| <span class="text-sm bg-blue-900/30 text-blue-300 px-3 py-1 rounded-full">Oct 2020 - Present</span> | |
| </div> | |
| <h4 class="text-lg text-blue-300 mb-4">On-Site Technician</h4> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <i class="fas fa-file-excel mr-3 mt-1 text-blue-400"></i> | |
| <p>Created Excel automation solutions using VBA to streamline company workflows</p> | |
| </div> | |
| <div class="flex items-start"> | |
| <i class="fas fa-tools mr-3 mt-1 text-blue-400"></i> | |
| <p>Solved miscellaneous technical and hardware issues as the primary on-site support technician</p> | |
| </div> | |
| <div class="flex items-start"> | |
| <i class="fas fa-globe mr-3 mt-1 text-blue-400"></i> | |
| <p>Developed and managed company websites, handling both frontend and backend requirements</p> | |
| </div> | |
| <div class="flex items-start"> | |
| <i class="fas fa-file-invoice-dollar mr-3 mt-1 text-blue-400"></i> | |
| <p>Compiled and organized tax reports, ensuring compliance with financial regulations</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <div class="section-divider container mx-auto"></div> | |
| <!-- Skills Section --> | |
| <section id="skills" class="py-16 px-6"> | |
| <div class="container mx-auto"> | |
| <h2 class="text-3xl font-bold mb-12 text-center section-title"> | |
| <span class="gradient-text">Skills & Certifications</span> | |
| </h2> | |
| <div class="grid md:grid-cols-2 gap-10 max-w-4xl mx-auto"> | |
| <!-- Technical Skills --> | |
| <div class="bg-slate-800/50 border border-slate-700 rounded-xl p-8 glow-effect"> | |
| <h3 class="text-2xl font-bold mb-6 flex items-center"> | |
| <i class="fas fa-code mr-3 text-blue-400"></i> | |
| <span>Technical Skills</span> | |
| </h3> | |
| <div class="space-y-6"> | |
| <div> | |
| <h4 class="text-lg font-medium mb-3">Core Competencies</h4> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-slate-700/70 px-3 py-1 rounded-full text-sm">Rapid System Integration</span> | |
| <span class="bg-slate-700/70 px-3 py-1 rounded-full text-sm">Reverse Engineering</span> | |
| <span class="bg-slate-700/70 px-3 py-1 rounded-full text-sm">Multi-Stage AI Design</span> | |
| <span class="bg-slate-700/70 px-3 py-1 rounded-full text-sm">Local AI Optimization</span> | |
| <span class="bg-slate-700/70 px-3 py-1 rounded-full text-sm">Cross-Platform Architecture</span> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-medium mb-3">Programming Languages</h4> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-slate-700/70 px-3 py-1 rounded-full text-sm">Python (Expert)</span> | |
| <span class="bg-slate-700/70 px-3 py-1 rounded-full text-sm">Java</span> | |
| <span class="bg-slate-700/70 px-3 py-1 rounded-full text-sm">VBA</span> | |
| <span class="bg-slate-700/70 px-3 py-1 rounded-full text-sm">JavaScript</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Certifications --> | |
| <div class="bg-slate-800/50 border border-slate-700 rounded-xl p-8 glow-effect"> | |
| <h3 class="text-2xl font-bold mb-6 flex items-center"> | |
| <i class="fas fa-certificate mr-3 text-blue-400"></i> | |
| <span>Certifications</span> | |
| </h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-900/50 rounded-md p-2 mr-4"> | |
| <i class="fas fa-mobile-alt text-lg text-blue-300"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Associate Android Developer</h4> | |
| <p class="text-sm text-slate-300">Bangkit Academy</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-900/50 rounded-md p-2 mr-4"> | |
| <i class="fas fa-trophy text-lg text-blue-300"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Distinction Graduate</h4> | |
| <p class="text-sm text-slate-300">Bangkit Academy</p> | |
| </div> | |
| </div> | |
| </div> | |
| <h3 class="text-2xl font-bold mt-10 mb-6 flex items-center"> | |
| <i class="fas fa-star mr-3 text-blue-400"></i> | |
| <span>Interests</span> | |
| </h3> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-slate-700/70 px-3 py-1 rounded-full text-sm">AI Research</span> | |
| <span class="bg-slate-700/70 px-3 py-1 rounded-full text-sm">DIY Projects</span> | |
| <span class="bg-slate-700/70 px-3 py-1 rounded-full text-sm">Fanfiction Writing</span> | |
| <span class="bg-slate-700/70 px-3 py-1 rounded-full text-sm">Psychology</span> | |
| <span class="bg-slate-700/70 px-3 py-1 rounded-full text-sm">Economic Systems</span> | |
| <span class="bg-slate-700/70 px-3 py-1 rounded-full text-sm">Philosophy</span> | |
| <span class="bg-slate-700/70 px-3 py-1 rounded-full text-sm">Culinary Arts</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <div class="section-divider container mx-auto"></div> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-16 px-6"> | |
| <div class="container mx-auto max-w-4xl"> | |
| <h2 class="text-3xl font-bold mb-12 text-center section-title"> | |
| <span class="gradient-text">Get In Touch</span> | |
| </h2> | |
| <div class="grid md:grid-cols-2 gap-10"> | |
| <div class="bg-slate-800/50 border border-slate-700 rounded-xl p-8 glow-effect"> | |
| <h3 class="text-xl font-bold mb-6">Contact Information</h3> | |
| <ul class="space-y-4"> | |
| <li class="flex items-start"> | |
| <div class="bg-blue-900/30 p-2 rounded-lg mr-4"> | |
| <i class="fas fa-envelope text-blue-300"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Email</h4> | |
| <p class="text-slate-300">[email protected]</p> | |
| </div> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="bg-blue-900/30 p-2 rounded-lg mr-4"> | |
| <i class="fas fa-phone-alt text-blue-300"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Phone</h4> | |
| <p class="text-slate-300">(+62) 859-6597-5929</p> | |
| </div> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="bg-blue-900/30 p-2 rounded-lg mr-4"> | |
| <i class="fab fa-discord text-blue-300"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Discord</h4> | |
| <p class="text-slate-300">@pandu.paradox</p> | |
| </div> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="bg-blue-900/30 p-2 rounded-lg mr-4"> | |
| <i class="fab fa-github text-blue-300"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">GitHub</h4> | |
| <p class="text-slate-300">@Iteranya</p> | |
| </div> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="bg-blue-900/30 p-2 rounded-lg mr-4"> | |
| <i class="fab fa-linkedin-in text-blue-300"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">LinkedIn</h4> | |
| <p class="text-slate-300">linkedin.com/in/pandu-dhaulagiri</p> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="bg-slate-800/50 border border-slate-700 rounded-xl p-8 glow-effect"> | |
| <h3 class="text-xl font-bold mb-6">Send Me a Message</h3> | |
| <form class="space-y-4"> | |
| <div> | |
| <label for="name" class="block mb-2 text-sm font-medium">Your Name</label> | |
| <input type="text" id="name" class="w-full bg-slate-800/50 border border-slate-700 rounded-lg p-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div> | |
| <label for="email" class="block mb-2 text-sm font-medium">Your Email</label> | |
| <input type="email" id="email" class="w-full bg-slate-800/50 border border-slate-700 rounded-lg p-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div> | |
| <label for="message" class="block mb-2 text-sm font-medium">Message</label> | |
| <textarea id="message" rows="4" class="w-full bg-slate-800/50 border border-slate-700 rounded-lg p-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea> | |
| </div> | |
| <button type="submit" class="w-full bg-gradient-to-r from-blue-600 to-indigo-600 text-white px-6 py-3 rounded-lg font-medium hover:shadow-lg transition-all"> | |
| Send Message <i class="fas fa-paper-plane ml-2"></i> | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-slate-900/70 border-t border-slate-800/50 py-8"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-6 md:mb-0"> | |
| <a href="#" class="text-xl font-bold gradient-text">Ars Paradox</a> | |
| <p class="text-sm text-slate-400 mt-2">Engineered Serendipity</p> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="mailto:[email protected]" class="text-slate-400 hover:text-blue-400"> | |
| <i class="fab fa-google text-xl"></i> | |
| </a> | |
| <a href="https://github.com/Iteranya" class="text-slate-400 hover:text-slate-200"> | |
| <i class="fab fa-github text-xl"></i> | |
| </a> | |
| <a href="https://linkedin.com/in/pandu-dhaulagiri" class="text-slate-400 hover:text-blue-500"> | |
| <i class="fab fa-linkedin-in text-xl"></i> | |
| </a> | |
| <a href="https://discordapp.com/users/pandu.paradox" class="text-slate-400 hover:text-indigo-400"> | |
| <i class="fab fa-discord text-xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <hr class="border-slate-800/50 my-6"> | |
| <p class="text-sm text-center text-slate-500">© 2025 Pandu Dhaulagiri. All rights reserved.</p> | |
| </div> | |
| </footer> | |
| <script> | |
| // Simple smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| // Mobile menu toggle (would need implementation) | |
| const mobileMenuButton = document.querySelector('.md\\:hidden'); | |
| // You would add click handler here for a mobile menu | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=ArsParadox/my-resume" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> | |
| </html> |