ssbg04/portfoliowai
1
0 Fork 0
Code Issues Packages Projects Releases Wiki Activity

module: navbar, add: logo navigation

Browse Source
This commit is contained in:
ssbg04 committed 2026-06-05 20:18:07 +08:00
1 parent 7eb61827f5
commit d71e80d1d3
9 files changed
+138 -242
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

index.php
+2 -62
View File
@@ -46,6 +46,7 @@ $contactEmail = getenv('CONTACT_EMAIL') ?: ($_ENV['CONTACT_EMAIL']
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Cris Charles Garcia — BSIT Software Development student based in Laguna, Philippines. Building digital products with purpose using MERN Stack and PHP.">
<title>Cris Charles Garcia | Software Developer</title>
<link rel="icon" type="image/svg+xml" href="assets/img/favicon.svg">
<link rel="stylesheet" href="assets/css/style.css">
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
@@ -63,27 +64,7 @@ $contactEmail = getenv('CONTACT_EMAIL') ?: ($_ENV['CONTACT_EMAIL']
<div class="site-wrapper">
<!-- ===== NAV ===== -->
<nav id="main-nav">
<div class="logo">CG.</div>
<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="#about" class="nav-item">About</a>
<a href="#projects" class="nav-item">Work</a>
<a href="#certificates" class="nav-item">Certs</a>
<a href="blog.php" class="nav-item">Blog</a>
<a href="#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>
</label>
</div>
</nav>
<?php include('views/nav.php'); ?>
<!-- ===== HERO ===== -->
<header class="hero reveal">
@@ -285,47 +266,6 @@ $contactEmail = getenv('CONTACT_EMAIL') ?: ($_ENV['CONTACT_EMAIL']
backToTop.classList.toggle("show", window.scrollY > 300);
});
// 4. PERSISTENT DARK MODE
const themeToggle = document.getElementById("dark-mode-toggle");
themeToggle.checked = localStorage.getItem("theme") !== "light";
themeToggle.addEventListener("change", () => {
localStorage.setItem("theme", themeToggle.checked ? "dark" : "light");
});
// 5. 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();
}
});
});
// Prevent right-click & drag on images