Spaces:

GarGerry
/

Flux-web

Running

App Files Files Community

Flux-web / Backup-html

GarGerry

Update Backup-html

4bda677 verified over 1 year ago

raw

history blame contribute delete

2.79 kB

	<!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>