File size: 2,788 Bytes
e762863 4bda677 e762863 4bda677 c68ac8c 4bda677 12e936c 4bda677 c68ac8c 4bda677 12e936c 4bda677 12e936c 4bda677 c68ac8c 4bda677 07012de 4bda677 07012de 4bda677 12e936c 4bda677 e762863 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio Interaktif</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Selamat Datang di Portfolio Saya</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<!-- Tombol Mode Gelap dengan Ikon -->
<button id="toggleDarkMode" aria-label="Toggle Dark Mode">🌙</button>
</header>
<section id="home">
<h2>Hi, Saya [Nama Kamu]</h2>
<p>Seorang developer AI dan Blockchain yang selalu belajar.</p>
<button id="chatButton">Tanya Saya</button>
<div id="chatbox" class="hidden">
<p id="chatMessage">Halo! Saya adalah chatbot mini. Tanyakan apa saja tentang saya!</p>
</div>
</section>
<section id="skills">
<h2>Skills</h2>
<ul>
<li>Generative AI</li>
<li>Blockchain</li>
<li>Software Engineering</li>
</ul>
</section>
<section id="projects">
<h2>Projects</h2>
<div class="project">
<h3>Sentiment Analysis</h3>
<p>Web app untuk analisis sentimen dalam Bahasa Indonesia.</p>
</div>
<div class="project">
<h3>Visualisasi Squad Sepak Bola</h3>
<p>Tools untuk membuat formasi tim sepak bola dengan statistik pemain.</p>
</div>
</section>
<section id="contact">
<h2>Contact</h2>
<form>
<input type="text" placeholder="Nama" required>
<input type="email" placeholder="Email" required>
<textarea placeholder="Pesan"></textarea>
<button type="submit">Kirim</button>
</form>
</section>
<footer>
<p>© 2025 [Nama Kamu]</p>
</footer>
<!-- JavaScript -->
<script>
// Fungsi untuk mengubah mode gelap
const toggleDarkModeButton = document.getElementById("toggleDarkMode");
// Cek apakah mode gelap sudah dipilih sebelumnya
if (localStorage.getItem('darkMode') === 'enabled') {
document.body.classList.add('dark-mode');
toggleDarkModeButton.textContent = '☀️'; // Ubah ikon ke matahari
}
// Event listener untuk tombol mode gelap
toggleDarkModeButton.addEventListener("click", function () {
document.body.classList.toggle("dark-mode");
if (document.body.classList.contains("dark-mode")) {
localStorage.setItem("darkMode", "enabled");
toggleDarkModeButton.textContent = '☀️'; // Ubah ikon ke matahari
} else {
localStorage.setItem("darkMode", "disabled");
toggleDarkModeButton.textContent = '🌙'; // Ubah ikon ke bulan
}
});
</script>
</body>
</html> |