RUANG BELAJAR: Oktober 2025

<!DOCTYPE html>

<html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Portfolio - Microsite</title> <script src="https://cdn.tailwindcss.com"></script> <style> body { box-sizing: border-box; } .section { display: none; } .section.active { display: block; } .nav-item.active { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; } .card-hover { transition: all 0.3s ease; } .card-hover:hover { transform: translateY(-5px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } .gradient-bg { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } .fade-in { animation: fadeIn 0.5s ease-in; } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } </style> </head> <body class="bg-gray-50 font-sans">  <header class="gradient-bg text-white py-8"> <div class="container mx-auto px-6 text-center"> <div class="w-24 h-24 bg-white rounded-full mx-auto mb-4 flex items-center justify-center"> <span class="text-4xl">👤</span> </div> <h1 class="text-3xl font-bold mb-2">Portfolio Saya</h1> <p class="text-lg opacity-90">Selamat datang di microsite portfolio</p> </div> </header>  <nav class="bg-white shadow-md sticky top-0 z-50"> <div class="container mx-auto px-6"> <div class="flex justify-center space-x-1 py-4"> <button onclick="showSection('data-diri')" class="nav-item px-6 py-3 rounded-lg font-medium transition-all duration-300 active"> 📋 Data Diri </button> <button onclick="showSection('penghargaan')" class="nav-item px-6 py-3 rounded-lg font-medium transition-all duration-300 text-gray-600 hover:bg-gray-100"> 🏆 Penghargaan </button> <button onclick="showSection('karya')" class="nav-item px-6 py-3 rounded-lg font-medium transition-all duration-300 text-gray-600 hover:bg-gray-100"> 🎨 Karya </button> <button onclick="showSection('dokumentasi')" class="nav-item px-6 py-3 rounded-lg font-medium transition-all duration-300 text-gray-600 hover:bg-gray-100"> 📸 Dokumentasi </button> </div> </div> </nav>  <main class="container mx-auto px-6 py-8">  <section id="data-diri" class="section active fade-in"> <div class="max-w-4xl mx-auto"> <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">Data Diri</h2> <div class="bg-white rounded-xl shadow-lg p-8"> <div class="grid md:grid-cols-2 gap-8"> <div> <h3 class="text-xl font-semibold text-gray-800 mb-4">Informasi Pribadi</h3> <div class="space-y-3"> <div class="flex items-center"> <span class="w-6 text-blue-600">👤</span> <span class="ml-3"><strong>Nama:</strong> Ahmad Rizki</span> </div> <div class="flex items-center"> <span class="w-6 text-blue-600">📧</span> <span class="ml-3"><strong>Email:</strong> ahmad.rizki@email.com</span> </div> <div class="flex items-center"> <span class="w-6 text-blue-600">📱</span> <span class="ml-3"><strong>Telepon:</strong> +62 812-3456-7890</span> </div> <div class="flex items-center"> <span class="w-6 text-blue-600">📍</span> <span class="ml-3"><strong>Alamat:</strong> Jakarta, Indonesia</span> </div> </div> </div> <div> <h3 class="text-xl font-semibold text-gray-800 mb-4">Tentang Saya</h3> <p class="text-gray-600 leading-relaxed"> Saya adalah seorang profesional yang berpengalaman dalam bidang teknologi dan desain. Memiliki passion dalam menciptakan solusi inovatif dan berkualitas tinggi. Selalu antusias untuk belajar hal-hal baru dan berkontribusi dalam tim. </p> <div class="mt-6"> <h4 class="font-semibold text-gray-800 mb-2">Keahlian:</h4> <div class="flex flex-wrap gap-2"> <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Web Development</span> <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm">UI/UX Design</span> <span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm">Project Management</span> </div> </div> </div> </div> </div> </div> </section>  <section id="penghargaan" class="section"> <div class="max-w-4xl mx-auto"> <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">Penghargaan</h2> <div class="grid md:grid-cols-2 gap-6"> <div class="bg-white rounded-xl shadow-lg p-6 card-hover"> <div class="text-center mb-4"> <div class="w-16 h-16 bg-yellow-100 rounded-full mx-auto flex items-center justify-center mb-3"> <span class="text-2xl">🥇</span> </div> <h3 class="text-xl font-semibold text-gray-800">Best Developer Award</h3> <p class="text-gray-600">2023</p> </div> <p class="text-gray-600 text-center"> Penghargaan sebagai developer terbaik dalam kompetisi nasional pengembangan aplikasi web. </p> </div> <div class="bg-white rounded-xl shadow-lg p-6 card-hover"> <div class="text-center mb-4"> <div class="w-16 h-16 bg-blue-100 rounded-full mx-auto flex items-center justify-center mb-3"> <span class="text-2xl">🏆</span> </div> <h3 class="text-xl font-semibold text-gray-800">Innovation Excellence</h3> <p class="text-gray-600">2022</p> </div> <p class="text-gray-600 text-center"> Penghargaan inovasi terbaik untuk solusi teknologi yang memberikan dampak positif. </p> </div> <div class="bg-white rounded-xl shadow-lg p-6 card-hover"> <div class="text-center mb-4"> <div class="w-16 h-16 bg-green-100 rounded-full mx-auto flex items-center justify-center mb-3"> <span class="text-2xl">🎖️</span> </div> <h3 class="text-xl font-semibold text-gray-800">Team Leadership</h3> <p class="text-gray-600">2022</p> </div> <p class="text-gray-600 text-center"> Penghargaan kepemimpinan tim terbaik dalam mengelola proyek berskala besar. </p> </div> <div class="bg-white rounded-xl shadow-lg p-6 card-hover"> <div class="text-center mb-4"> <div class="w-16 h-16 bg-purple-100 rounded-full mx-auto flex items-center justify-center mb-3"> <span class="text-2xl">⭐</span> </div> <h3 class="text-xl font-semibold text-gray-800">Rising Star</h3> <p class="text-gray-600">2021</p> </div> <p class="text-gray-600 text-center"> Penghargaan sebagai talenta muda yang menunjukkan potensi dan prestasi luar biasa. </p> </div> </div> </div> </section>  <section id="karya" class="section"> <div class="max-w-6xl mx-auto"> <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">Karya</h2> <div class="grid md:grid-cols-3 gap-6"> <div class="bg-white rounded-xl shadow-lg overflow-hidden card-hover"> <div class="h-48 bg-gradient-to-br from-blue-400 to-purple-500 flex items-center justify-center"> <span class="text-6xl text-white">🌐</span> </div> <div class="p-6"> <h3 class="text-xl font-semibold text-gray-800 mb-2">E-Commerce Platform</h3> <p class="text-gray-600 mb-4">Platform e-commerce modern dengan fitur lengkap dan user experience yang optimal.</p> <div class="flex flex-wrap gap-2"> <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-sm">React</span> <span class="bg-green-100 text-green-800 px-2 py-1 rounded text-sm">Node.js</span> </div> </div> </div> <div class="bg-white rounded-xl shadow-lg overflow-hidden card-hover"> <div class="h-48 bg-gradient-to-br from-green-400 to-blue-500 flex items-center justify-center"> <span class="text-6xl text-white">📱</span> </div> <div class="p-6"> <h3 class="text-xl font-semibold text-gray-800 mb-2">Mobile App Design</h3> <p class="text-gray-600 mb-4">Desain aplikasi mobile yang intuitif dengan fokus pada kemudahan penggunaan.</p> <div class="flex flex-wrap gap-2"> <span class="bg-purple-100 text-purple-800 px-2 py-1 rounded text-sm">Figma</span> <span class="bg-pink-100 text-pink-800 px-2 py-1 rounded text-sm">UI/UX</span> </div> </div> </div> <div class="bg-white rounded-xl shadow-lg overflow-hidden card-hover"> <div class="h-48 bg-gradient-to-br from-yellow-400 to-red-500 flex items-center justify-center"> <span class="text-6xl text-white">📊</span> </div> <div class="p-6"> <h3 class="text-xl font-semibold text-gray-800 mb-2">Data Analytics Dashboard</h3> <p class="text-gray-600 mb-4">Dashboard analitik data yang komprehensif untuk monitoring bisnis real-time.</p> <div class="flex flex-wrap gap-2"> <span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded text-sm">Python</span> <span class="bg-red-100 text-red-800 px-2 py-1 rounded text-sm">D3.js</span> </div> </div> </div> <div class="bg-white rounded-xl shadow-lg overflow-hidden card-hover"> <div class="h-48 bg-gradient-to-br from-purple-400 to-pink-500 flex items-center justify-center"> <span class="text-6xl text-white">🎨</span> </div> <div class="p-6"> <h3 class="text-xl font-semibold text-gray-800 mb-2">Brand Identity Design</h3> <p class="text-gray-600 mb-4">Desain identitas brand yang kuat dan memorable untuk berbagai klien.</p> <div class="flex flex-wrap gap-2"> <span class="bg-purple-100 text-purple-800 px-2 py-1 rounded text-sm">Illustrator</span> <span class="bg-pink-100 text-pink-800 px-2 py-1 rounded text-sm">Branding</span> </div> </div> </div> <div class="bg-white rounded-xl shadow-lg overflow-hidden card-hover"> <div class="h-48 bg-gradient-to-br from-indigo-400 to-cyan-500 flex items-center justify-center"> <span class="text-6xl text-white">🤖</span> </div> <div class="p-6"> <h3 class="text-xl font-semibold text-gray-800 mb-2">AI Chatbot</h3> <p class="text-gray-600 mb-4">Chatbot AI yang cerdas untuk customer service dengan natural language processing.</p> <div class="flex flex-wrap gap-2"> <span class="bg-indigo-100 text-indigo-800 px-2 py-1 rounded text-sm">Python</span> <span class="bg-cyan-100 text-cyan-800 px-2 py-1 rounded text-sm">NLP</span> </div> </div> </div> <div class="bg-white rounded-xl shadow-lg overflow-hidden card-hover"> <div class="h-48 bg-gradient-to-br from-teal-400 to-green-500 flex items-center justify-center"> <span class="text-6xl text-white">🔒</span> </div> <div class="p-6"> <h3 class="text-xl font-semibold text-gray-800 mb-2">Security System</h3> <p class="text-gray-600 mb-4">Sistem keamanan terintegrasi dengan teknologi biometrik dan enkripsi tingkat tinggi.</p> <div class="flex flex-wrap gap-2"> <span class="bg-teal-100 text-teal-800 px-2 py-1 rounded text-sm">Cybersecurity</span> <span class="bg-green-100 text-green-800 px-2 py-1 rounded text-sm">Encryption</span> </div> </div> </div> </div> </div> </section>  <section id="dokumentasi" class="section"> <div class="max-w-6xl mx-auto"> <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">Dokumentasi</h2> <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6"> <div class="bg-white rounded-xl shadow-lg overflow-hidden card-hover"> <div class="h-48 bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center"> <span class="text-6xl text-white">🎤</span> </div> <div class="p-4"> <h3 class="font-semibold text-gray-800 mb-2">Tech Conference 2023</h3> <p class="text-gray-600 text-sm">Presentasi tentang "Future of Web Development" di konferensi teknologi nasional.</p> </div> </div> <div class="bg-white rounded-xl shadow-lg overflow-hidden card-hover"> <div class="h-48 bg-gradient-to-br from-green-500 to-teal-600 flex items-center justify-center"> <span class="text-6xl text-white">🏢</span> </div> <div class="p-4"> <h3 class="font-semibold text-gray-800 mb-2">Workshop UI/UX</h3> <p class="text-gray-600 text-sm">Memimpin workshop desain UI/UX untuk 50+ peserta dari berbagai perusahaan.</p> </div> </div> <div class="bg-white rounded-xl shadow-lg overflow-hidden card-hover"> <div class="h-48 bg-gradient-to-br from-yellow-500 to-orange-600 flex items-center justify-center"> <span class="text-6xl text-white">👥</span> </div> <div class="p-4"> <h3 class="font-semibold text-gray-800 mb-2">Team Building</h3> <p class="text-gray-600 text-sm">Kegiatan team building bersama tim development untuk meningkatkan kolaborasi.</p> </div> </div> <div class="bg-white rounded-xl shadow-lg overflow-hidden card-hover"> <div class="h-48 bg-gradient-to-br from-red-500 to-pink-600 flex items-center justify-center"> <span class="text-6xl text-white">🎓</span> </div> <div class="p-4"> <h3 class="font-semibold text-gray-800 mb-2">Mentoring Session</h3> <p class="text-gray-600 text-sm">Sesi mentoring untuk junior developer tentang best practices dalam coding.</p> </div> </div> <div class="bg-white rounded-xl shadow-lg overflow-hidden card-hover"> <div class="h-48 bg-gradient-to-br from-indigo-500 to-blue-600 flex items-center justify-center"> <span class="text-6xl text-white">🚀</span> </div> <div class="p-4"> <h3 class="font-semibold text-gray-800 mb-2">Product Launch</h3> <p class="text-gray-600 text-sm">Peluncuran produk aplikasi mobile yang telah dikembangkan selama 6 bulan.</p> </div> </div> <div class="bg-white rounded-xl shadow-lg overflow-hidden card-hover"> <div class="h-48 bg-gradient-to-br from-purple-500 to-indigo-600 flex items-center justify-center"> <span class="text-6xl text-white">🤝</span> </div> <div class="p-4"> <h3 class="font-semibold text-gray-800 mb-2">Client Meeting</h3> <p class="text-gray-600 text-sm">Pertemuan dengan klien untuk presentasi proposal dan diskusi requirement proyek.</p> </div> </div> </div> </div> </section> </main>  <footer class="bg-gray-800 text-white py-8 mt-16"> <div class="container mx-auto px-6 text-center"> <p class="mb-4">© 2024 Portfolio Saya. Semua hak dilindungi.</p> <div class="flex justify-center space-x-6"> <a href="#" class="text-gray-400 hover:text-white transition-colors">📧 Email</a> <a href="#" class="text-gray-400 hover:text-white transition-colors">💼 LinkedIn</a> <a href="#" class="text-gray-400 hover:text-white transition-colors">🐙 GitHub</a> </div> </div> </footer> <script> function showSection(sectionId) { // Hide all sections const sections = document.querySelectorAll('.section'); sections.forEach(section => { section.classList.remove('active'); }); // Remove active class from all nav items const navItems = document.querySelectorAll('.nav-item'); navItems.forEach(item => { item.classList.remove('active'); item.classList.add('text-gray-600', 'hover:bg-gray-100'); }); // Show selected section const targetSection = document.getElementById(sectionId); if (targetSection) { targetSection.classList.add('active', 'fade-in'); } // Add active class to clicked nav item event.target.classList.add('active'); event.target.classList.remove('text-gray-600', 'hover:bg-gray-100'); } </script> <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'98f8277303c2bff8',t:'MTc2MDYyMzk3Ny4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body> </html>

laman

Kamis, 16 Oktober 2025

Webistr