Update configuration, enhance navigation, and improve layout responsiveness
- Changed image service in `astro.config.mjs` from "cloudflare" to "compile". - Adjusted GridOverlay component to remove unnecessary height styling. - Refined Navigation component with a mobile menu toggle and improved accessibility features. - Updated FeaturedProject and Hero sections to use `min-h-[100dvh]` for better responsiveness. - Modified global CSS to disable smooth scroll on mobile for performance and added a mobile viewport height fix.
This commit is contained in:
parent
13b661986f
commit
30ac82c3c4
@ -20,10 +20,10 @@ export default defineConfig({
|
||||
enabled: true
|
||||
},
|
||||
|
||||
imageService: "cloudflare"
|
||||
imageService: "compile"
|
||||
}),
|
||||
|
||||
vite: {
|
||||
plugins: [tailwindcss()],
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
---
|
||||
<!-- Fixed Grid Overlay -->
|
||||
<div class="fixed inset-0 grid-overlay h-screen w-screen"></div>
|
||||
<div class="fixed inset-0 grid-overlay"></div>
|
||||
|
||||
<!-- 12 Column Guide (Visual Only - Low Opacity) -->
|
||||
<div
|
||||
|
||||
@ -22,15 +22,118 @@
|
||||
</div>
|
||||
|
||||
<a href="/contact"
|
||||
class="border border-slate-600 px-5 lg:px-6 py-2.5 lg:py-3 text-xs font-bold uppercase tracking-[0.15em] text-white hover:border-brand-accent hover:bg-brand-accent hover:text-brand-dark transition-all duration-300">
|
||||
class="hidden md:block border border-slate-600 px-5 lg:px-6 py-2.5 lg:py-3 text-xs font-bold uppercase tracking-[0.15em] text-white hover:border-brand-accent hover:bg-brand-accent hover:text-brand-dark transition-all duration-300">
|
||||
Let's Talk
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Mobile menu button (optional, for future) -->
|
||||
<button class="md:hidden p-2 text-slate-400 hover:text-white transition-colors" aria-label="Menu">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
|
||||
<!-- Mobile menu button -->
|
||||
<button
|
||||
id="mobile-menu-toggle"
|
||||
class="md:hidden p-2 text-slate-400 hover:text-white transition-colors z-[60]"
|
||||
aria-label="Toggle menu"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<!-- Hamburger icon -->
|
||||
<svg id="menu-icon-open" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 6h16M4 12h16M4 18h16"></path>
|
||||
</svg>
|
||||
<!-- Close icon (hidden by default) -->
|
||||
<svg id="menu-icon-close" class="w-6 h-6 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6M6 6l12 12"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<!-- Mobile Menu Overlay -->
|
||||
<div
|
||||
id="mobile-menu"
|
||||
class="fixed inset-0 z-40 bg-brand-dark/98 backdrop-blur-xl transform translate-x-full transition-transform duration-300 ease-out md:hidden"
|
||||
>
|
||||
<!-- Menu Content -->
|
||||
<div class="flex flex-col justify-center items-center h-full px-8">
|
||||
<!-- Navigation Links -->
|
||||
<nav class="flex flex-col items-center gap-8 mb-12">
|
||||
<a
|
||||
href="/"
|
||||
class="mobile-nav-link text-3xl font-bold uppercase tracking-wider text-white hover:text-brand-accent transition-colors duration-300"
|
||||
>
|
||||
Home
|
||||
</a>
|
||||
<a
|
||||
href="/blog"
|
||||
class="mobile-nav-link text-3xl font-bold uppercase tracking-wider text-white hover:text-brand-accent transition-colors duration-300"
|
||||
>
|
||||
Blog
|
||||
</a>
|
||||
<a
|
||||
href="/contact"
|
||||
class="mobile-nav-link text-3xl font-bold uppercase tracking-wider text-white hover:text-brand-accent transition-colors duration-300"
|
||||
>
|
||||
Contact
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<!-- CTA Button -->
|
||||
<a
|
||||
href="/contact"
|
||||
class="border border-brand-accent px-8 py-4 text-sm font-bold uppercase tracking-[0.2em] text-brand-accent hover:bg-brand-accent hover:text-brand-dark transition-all duration-300"
|
||||
>
|
||||
Let's Talk
|
||||
</a>
|
||||
|
||||
<!-- Decorative Elements -->
|
||||
<div class="absolute bottom-12 left-8 right-8">
|
||||
<div class="flex justify-between items-center text-[10px] font-mono text-slate-600 uppercase tracking-widest">
|
||||
<span>NV / 2026</span>
|
||||
<span>Menu</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const toggle = document.getElementById('mobile-menu-toggle');
|
||||
const menu = document.getElementById('mobile-menu');
|
||||
const iconOpen = document.getElementById('menu-icon-open');
|
||||
const iconClose = document.getElementById('menu-icon-close');
|
||||
const mobileNavLinks = document.querySelectorAll('.mobile-nav-link');
|
||||
|
||||
let isOpen = false;
|
||||
|
||||
function toggleMenu() {
|
||||
isOpen = !isOpen;
|
||||
|
||||
if (isOpen) {
|
||||
menu?.classList.remove('translate-x-full');
|
||||
menu?.classList.add('translate-x-0');
|
||||
iconOpen?.classList.add('hidden');
|
||||
iconClose?.classList.remove('hidden');
|
||||
document.body.style.overflow = 'hidden';
|
||||
toggle?.setAttribute('aria-expanded', 'true');
|
||||
} else {
|
||||
menu?.classList.add('translate-x-full');
|
||||
menu?.classList.remove('translate-x-0');
|
||||
iconOpen?.classList.remove('hidden');
|
||||
iconClose?.classList.add('hidden');
|
||||
document.body.style.overflow = '';
|
||||
toggle?.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
}
|
||||
|
||||
toggle?.addEventListener('click', toggleMenu);
|
||||
|
||||
// Close menu when clicking a link
|
||||
mobileNavLinks.forEach(link => {
|
||||
link.addEventListener('click', () => {
|
||||
if (isOpen) toggleMenu();
|
||||
});
|
||||
});
|
||||
|
||||
// Close menu on escape key
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape' && isOpen) {
|
||||
toggleMenu();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
---
|
||||
<section id="work" class="relative overflow-hidden group min-h-screen flex flex-col cursor-pointer">
|
||||
<section id="work" class="relative overflow-hidden group min-h-[100dvh] flex flex-col cursor-pointer">
|
||||
<!-- Main Link Overlay -->
|
||||
<a href="/blog/gstar-raw-olympics/" class="absolute inset-0 z-30" aria-label="View G-Star Raw Olympics Case Study"></a>
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
---
|
||||
<section id="hero" class="relative w-full h-screen overflow-hidden bg-brand-dark">
|
||||
<section id="hero" class="relative w-full h-[100dvh] overflow-hidden bg-brand-dark">
|
||||
<!-- Background Image (Portrait) -->
|
||||
<div class="absolute top-0 right-0 w-full md:w-1/2 h-full z-0">
|
||||
<div class="relative w-full h-full">
|
||||
|
||||
@ -120,11 +120,23 @@ body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Smooth scroll behavior */
|
||||
/* Smooth scroll behavior - disabled on mobile for better performance */
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
html {
|
||||
scroll-behavior: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile viewport height fix - uses dvh with vh fallback */
|
||||
:root {
|
||||
--vh-full: 100vh;
|
||||
--vh-full: 100dvh;
|
||||
}
|
||||
|
||||
/* Custom Scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user