|
|
<!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> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
|
const toggleDarkModeButton = document.getElementById("toggleDarkMode"); |
|
|
|
|
|
|
|
|
if (localStorage.getItem('darkMode') === 'enabled') { |
|
|
document.body.classList.add('dark-mode'); |
|
|
toggleDarkModeButton.textContent = '☀️'; |
|
|
} |
|
|
|
|
|
|
|
|
toggleDarkModeButton.addEventListener("click", function () { |
|
|
document.body.classList.toggle("dark-mode"); |
|
|
|
|
|
if (document.body.classList.contains("dark-mode")) { |
|
|
localStorage.setItem("darkMode", "enabled"); |
|
|
toggleDarkModeButton.textContent = '☀️'; |
|
|
} else { |
|
|
localStorage.setItem("darkMode", "disabled"); |
|
|
toggleDarkModeButton.textContent = '🌙'; |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
