add: admin, add: fully customizable information via admin side

This commit is contained in:
ssbg04 committed 2026-06-05 19:39:17 +08:00
1 parent 2d5a7850d5
commit 7eb61827f5
23 files changed
+2160 -178

No files matched your search

+50 -59
View File
@@ -20,11 +20,21 @@
<div class="site-wrapper">
<nav>
<nav id="main-nav">
<div class="logo">CG.</div>
<div class="nav-links">
<a href="index.php">← Home</a>
<a href="projects.php">Projects</a>
<div class="hamburger" id="hamburger" aria-label="Toggle menu" aria-expanded="false" role="button" tabindex="0">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<div class="nav-links" id="nav-links" role="navigation">
<a href="index.php#about" class="nav-item">About</a>
<a href="index.php#projects" class="nav-item">Work</a>
<a href="index.php#certificates" class="nav-item">Certs</a>
<a href="blog.php" class="nav-item">Blog</a>
<a href="index.php#contact" class="nav-item">Contact</a>
<label for="dark-mode-toggle" class="mode-btn" title="Toggle Theme" aria-label="Toggle dark/light mode">
<span class="icon-moon">🌙</span>
<span class="icon-sun">☀️</span>
@@ -42,61 +52,7 @@
<section class="section-pad">
<div class="cert-grid">
<div class="cert-card reveal reveal-delay-1">
<div class="cert-icon">🏆</div>
<div class="cert-info">
<h3>Responsive Web Design</h3>
<p class="issuer">FreeCodeCamp</p>
<span class="date">Issued Dec 2024</span>
</div>
</div>
<div class="cert-card reveal reveal-delay-2">
<div class="cert-icon">📜</div>
<div class="cert-info">
<h3>JavaScript Algorithms</h3>
<p class="issuer">HackerRank</p>
<span class="date">Issued Nov 2024</span>
</div>
</div>
<div class="cert-card reveal reveal-delay-3">
<div class="cert-icon">☁️</div>
<div class="cert-info">
<h3>Cloud Fundamentals</h3>
<p class="issuer">AWS</p>
<span class="date">Issued Oct 2024</span>
</div>
</div>
<div class="cert-card reveal reveal-delay-1">
<div class="cert-icon">🐍</div>
<div class="cert-info">
<h3>Python for Data Science</h3>
<p class="issuer">Coursera</p>
<span class="date">Issued Sept 2024</span>
</div>
</div>
<div class="cert-card reveal reveal-delay-2">
<div class="cert-icon">🔒</div>
<div class="cert-info">
<h3>Cybersecurity Essentials</h3>
<p class="issuer">Cisco</p>
<span class="date">Issued Aug 2024</span>
</div>
</div>
<div class="cert-card reveal reveal-delay-3">
<div class="cert-icon">⚛️</div>
<div class="cert-info">
<h3>React Advanced Patterns</h3>
<p class="issuer">Udemy</p>
<span class="date">Issued July 2024</span>
</div>
</div>
<?php include('views/certifications.php'); ?>
</div>
</section>
@@ -126,6 +82,41 @@
const themeToggle = document.getElementById("dark-mode-toggle");
themeToggle.checked = localStorage.getItem("theme") !== "light";
themeToggle.addEventListener("change", () => localStorage.setItem("theme", themeToggle.checked ? "dark" : "light"));
// HAMBURGER MENU
const hamburger = document.getElementById("hamburger");
const navLinks = document.getElementById("nav-links");
const navItems = document.querySelectorAll(".nav-item");
function closeMenu() {
hamburger.classList.remove("active");
navLinks.classList.remove("active");
hamburger.setAttribute("aria-expanded", "false");
}
hamburger.addEventListener("click", (e) => {
e.stopPropagation();
const isOpen = hamburger.classList.toggle("active");
navLinks.classList.toggle("active");
hamburger.setAttribute("aria-expanded", isOpen);
});
// Close on nav link click
navItems.forEach(item => item.addEventListener("click", closeMenu));
// Close when clicking outside the menu
document.addEventListener("click", (e) => {
if (navLinks.classList.contains("active") && !navLinks.contains(e.target) && !hamburger.contains(e.target)) {
closeMenu();
}
});
// Close on scroll
window.addEventListener('scroll', () => {
if (navLinks.classList.contains('active')) {
closeMenu();
}
});
});
</script>
</body>