ghndrx/gregh.dev
1
0
Fork 0
mirror of https://github.com/ghndrx/gregh.dev.git synced 2026-02-10 06:44:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #9 from ghndrx/fix/nav

Browse Source 
fix: fixes nav on mobile
This commit is contained in:
Greg Hendrickson
2025-02-20 01:07:12 -08:00
committed by GitHub
parent b3b8a1ba8a 6d477f087a
commit 3f8c7ff27f
1 changed files with 26 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/index.html
View File

@@ -21,22 +21,37 @@
<nav class="fixed top-0 left-0 right-0 z-50 bg-black bg-opacity-75 shadow-lg backdrop-blur-md"> <nav class="fixed top-0 left-0 right-0 z-50 bg-black bg-opacity-75 shadow-lg backdrop-blur-md">
<div class="container mx-auto px-4 sm:px-6 lg:px-8"> <div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16"> <div class="flex items-center justify-between h-16">
<div class="flex-shrink-0">
<span class="text-2xl font-bold text-[#64ffda]">Greg</span>
</div>
<div class="hidden md:flex space-x-6"> <div class="hidden md:flex space-x-6">
<a href="#about" class="px-3 py-2 rounded-md text-sm font-medium text-white hover:text-[#64ffda] transition-colors">About</a> <a href="#about" class="px-3 py-2 rounded-md text-sm font-medium text-white hover:text-[#64ffda] transition-colors">About</a>
<a href="#experience" class="px-3 py-2 rounded-md text-sm font-medium text-white hover:text-[#64ffda] transition-colors">Experience</a> <a href="#experience" class="px-3 py-2 rounded-md text-sm font-medium text-white hover:text-[#64ffda] transition-colors">Experience</a>
<a href="#tools" class="px-3 py-2 rounded-md text-sm font-medium text-white hover:text-[#64ffda] transition-colors">Tools</a> <a href="#tools" class="px-3 py-2 rounded-md text-sm font-medium text-white hover:text-[#64ffda] transition-colors">Tools</a>
<a href="#projects" class="px-3 py-2 rounded-md text-sm font-medium text-white hover:text-[#64ffda] transition-colors">Projects</a> <a href="#projects" class="px-3 py-2 rounded-md text-sm font-medium text-white hover:text-[#64ffda] transition-colors">Projects</a>
</div> </div>
<!-- Optional: Mobile menu icon --> <!-- Mobile menu button -->
<div class="md:hidden"> <div class="md:hidden">
<button class="text-white hover:text-[#64ffda] focus:outline-none focus:text-[#64ffda]"> <button id="mobile-menu-button" class="text-white hover:text-[#64ffda] focus:outline-none focus:text-[#64ffda]">
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/> viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16M4 12h16M4 18h16"/>
</svg> </svg>
</button> </button>
</div> </div>
</div> </div>
</div> </div>
<!-- Mobile Menu -->
<div id="mobile-menu" class="hidden md:hidden bg-black bg-opacity-95">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<a href="#about" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:text-[#64ffda]">About</a>
<a href="#experience" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:text-[#64ffda]">Experience</a>
<a href="#tools" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:text-[#64ffda]">Tools</a>
<a href="#projects" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:text-[#64ffda]">Projects</a>
</div>
</div>
</nav> </nav>
<main class="pt-20 relative"> <main class="pt-20 relative">
@@ -235,7 +250,6 @@
</div> </div>
</footer> </footer>
<!-- Add this before closing body tag -->
<script> <script>
document.addEventListener("DOMContentLoaded", function() { document.addEventListener("DOMContentLoaded", function() {
// Initialize particles.js // Initialize particles.js
@@ -267,6 +281,13 @@
}); });
}); });
</script> </script>
<script>
// Toggle mobile menu visibility
document.getElementById("mobile-menu-button").addEventListener("click", function() {
const mobileMenu = document.getElementById("mobile-menu");
mobileMenu.classList.toggle("hidden");
});
</script>
<script> <script>
// After DOM content is loaded // After DOM content is loaded
document.addEventListener("DOMContentLoaded", function() { document.addEventListener("DOMContentLoaded", function() {