Daniel/ndsolutionswebsite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: replace bento grid with hybrid liquid glass design and add darkmode toggle
All checks were successful
Production Build & Deploy / build-and-deploy (push) Successful in 31s
Details

Browse Source
This commit is contained in:
DanielS
2026-07-18 03:33:18 +02:00
parent ef290a92f5
commit 78bd444bdb
5 changed files with 303 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
src/components/Navbar.astro
View File

@@ -3,33 +3,45 @@
import { FaBars, FaTimes } from 'react-icons/fa';
---
<header id="main-header" class="fixed top-0 left-0 w-full z-50 transition-all duration-300 py-3 bg-brand-darkBg/30 backdrop-blur-xl border-b border-brand-darkBorder">
<header id="main-header" class="fixed top-0 left-0 w-full z-50 transition-all duration-300 py-3 bg-white/30 dark:bg-brand-darkBg/30 backdrop-blur-xl border-b border-slate-200 dark:border-brand-darkBorder">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-14">
<!-- Logo -->
<a href="#" class="flex items-center gap-2 group">
<span class="text-lg sm:text-xl font-bold tracking-wider text-white select-none">
<span class="text-lg sm:text-xl font-bold tracking-wider text-slate-900 dark:text-white select-none transition-colors duration-300">
N&D <span class="bg-gradient-to-r from-brand-arcticBlue to-blue-500 bg-clip-text text-transparent">i-t SOLUTIONS</span>
</span>
</a>
<!-- Desktop Nav Links -->
<nav class="hidden md:flex items-center gap-8">
<a href="#services" class="text-xs tracking-wider uppercase font-medium text-zinc-400 hover:text-brand-arcticBlue transition-colors">Leistungen</a>
<a href="#tech" class="text-xs tracking-wider uppercase font-medium text-zinc-400 hover:text-brand-arcticBlue transition-colors">Tech-Stack</a>
<a href="#concept" class="text-xs tracking-wider uppercase font-medium text-zinc-400 hover:text-brand-arcticBlue transition-colors">Ablauf</a>
<a href="#services" class="text-xs tracking-wider uppercase font-medium text-slate-600 dark:text-zinc-400 hover:text-brand-arcticBlue dark:hover:text-brand-arcticBlue transition-colors">Leistungen</a>
<a href="#tech" class="text-xs tracking-wider uppercase font-medium text-slate-600 dark:text-zinc-400 hover:text-brand-arcticBlue dark:hover:text-brand-arcticBlue transition-colors">Tech-Stack</a>
<a href="#concept" class="text-xs tracking-wider uppercase font-medium text-slate-600 dark:text-zinc-400 hover:text-brand-arcticBlue dark:hover:text-brand-arcticBlue transition-colors">Ablauf</a>
</nav>
<!-- Right controls -->
<div class="flex items-center gap-4">
<!-- Theme Toggle Button -->
<button id="theme-toggle" class="p-2 rounded-lg border border-slate-200 dark:border-brand-darkBorder bg-white/50 dark:bg-zinc-900/50 text-slate-700 dark:text-zinc-400 hover:text-brand-arcticBlue dark:hover:text-brand-arcticBlue transition-all duration-200" aria-label="Farbschema wechseln">
<!-- Moon Icon (shows when light mode is active -> switches to dark) -->
<svg id="theme-toggle-dark-icon" class="hidden w-4 h-4 fill-current" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
</svg>
<!-- Sun Icon (shows when dark mode is active -> switches to light) -->
<svg id="theme-toggle-light-icon" class="hidden w-4 h-4 fill-current" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.46 5.05l-.707-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path>
</svg>
</button>
<!-- CTA button -->
<a href="#contact" class="hidden sm:inline-flex items-center justify-center px-4 py-1.5 text-xs font-semibold tracking-wider text-white border border-brand-darkBorder rounded bg-zinc-900/50 hover:border-brand-arcticBlue hover:text-brand-arcticBlue transition-all duration-200">
<a href="#contact" class="hidden sm:inline-flex items-center justify-center px-4 py-1.5 text-xs font-semibold tracking-wider text-slate-700 dark:text-white border border-slate-200 dark:border-brand-darkBorder rounded bg-white/50 dark:bg-zinc-900/50 hover:border-brand-arcticBlue hover:text-brand-arcticBlue transition-all duration-200">
Erstgespräch buchen
</a>
<!-- Mobile menu button -->
<button id="mobile-menu-btn" class="md:hidden p-2 rounded bg-zinc-900 text-white hover:bg-zinc-800 transition-all focus:outline-none" aria-label="Open Menu">
<button id="mobile-menu-btn" class="md:hidden p-2 rounded bg-white dark:bg-zinc-900 text-slate-700 dark:text-white border border-slate-200 dark:border-brand-darkBorder hover:bg-slate-50 dark:hover:bg-zinc-800 transition-all focus:outline-none" aria-label="Open Menu">
<FaBars class="w-5 h-5" />
</button>
</div>
@@ -38,20 +50,20 @@ import { FaBars, FaTimes } from 'react-icons/fa';
</div>
<!-- Mobile Menu Drawer -->
<div id="mobile-menu" class="fixed inset-0 z-50 bg-brand-darkBg/98 backdrop-blur-xl md:hidden translate-x-full transition-transform duration-300 ease-in-out">
<div class="flex justify-between items-center p-6 border-b border-brand-darkBorder">
<span class="text-lg font-bold tracking-wider text-white">
<div id="mobile-menu" class="fixed inset-0 z-50 bg-white dark:bg-brand-darkBg backdrop-blur-xl md:hidden translate-x-full transition-transform duration-300 ease-in-out">
<div class="flex justify-between items-center p-6 border-b border-slate-200 dark:border-brand-darkBorder">
<span class="text-lg font-bold tracking-wider text-slate-900 dark:text-white">
N&D <span class="bg-gradient-to-r from-brand-arcticBlue to-blue-500 bg-clip-text text-transparent">i-t SOLUTIONS</span>
</span>
<button id="mobile-close-btn" class="p-2 rounded bg-zinc-900 text-white hover:bg-zinc-800 transition-all" aria-label="Close Menu">
<button id="mobile-close-btn" class="p-2 rounded bg-slate-100 dark:bg-zinc-900 text-slate-700 dark:text-white hover:bg-slate-200 dark:hover:bg-zinc-800 transition-all" aria-label="Close Menu">
<FaTimes class="w-5 h-5" />
</button>
</div>
<nav class="flex flex-col gap-6 p-8 text-center text-lg font-semibold text-white">
<a href="#services" class="hover:text-brand-arcticBlue transition-colors py-2 border-b border-brand-darkBorder/50" id="mobile-link-1">Leistungen</a>
<a href="#tech" class="hover:text-brand-arcticBlue transition-colors py-2 border-b border-brand-darkBorder/50" id="mobile-link-2">Tech-Stack</a>
<a href="#concept" class="hover:text-brand-arcticBlue transition-colors py-2 border-b border-brand-darkBorder/50" id="mobile-link-3">Ablauf</a>
<a href="#contact" class="inline-flex justify-center items-center py-2.5 bg-zinc-900 text-brand-arcticBlue border border-brand-darkBorder font-bold rounded mt-4" id="mobile-link-4">
<nav class="flex flex-col gap-6 p-8 text-center text-lg font-semibold text-slate-900 dark:text-white">
<a href="#services" class="hover:text-brand-arcticBlue transition-colors py-2 border-b border-slate-100 dark:border-brand-darkBorder/50" id="mobile-link-1">Leistungen</a>
<a href="#tech" class="hover:text-brand-arcticBlue transition-colors py-2 border-b border-slate-100 dark:border-brand-darkBorder/50" id="mobile-link-2">Tech-Stack</a>
<a href="#concept" class="hover:text-brand-arcticBlue transition-colors py-2 border-b border-slate-100 dark:border-brand-darkBorder/50" id="mobile-link-3">Ablauf</a>
<a href="#contact" class="inline-flex justify-center items-center py-2.5 bg-slate-100 dark:bg-zinc-900 text-brand-arcticBlue border border-slate-200 dark:border-brand-darkBorder font-bold rounded mt-4" id="mobile-link-4">
Erstgespräch buchen
</a>
</nav>
@@ -65,14 +77,14 @@ import { FaBars, FaTimes } from 'react-icons/fa';
const mobileCloseBtn = document.getElementById('mobile-close-btn');
const mobileMenu = document.getElementById('mobile-menu');
// Change header opacity on scroll
// Change header styling on scroll
window.addEventListener('scroll', () => {
if (window.scrollY > 30) {
header?.classList.remove('bg-brand-darkBg/30');
header?.classList.add('bg-brand-darkBg/80', 'shadow-lg');
header?.classList.remove('bg-white/30', 'dark:bg-brand-darkBg/30');
header?.classList.add('bg-white/80', 'dark:bg-brand-darkBg/80', 'shadow-md');
} else {
header?.classList.remove('bg-brand-darkBg/80', 'shadow-lg');
header?.classList.add('bg-brand-darkBg/30');
header?.classList.remove('bg-white/80', 'dark:bg-brand-darkBg/80', 'shadow-md');
header?.classList.add('bg-white/30', 'dark:bg-brand-darkBg/30');
}
});
@@ -89,4 +101,34 @@ import { FaBars, FaTimes } from 'react-icons/fa';
const link = document.getElementById(`mobile-link-${i}`);
link?.addEventListener('click', toggleMobileMenu);
}
// Darkmode Toggle Logic
const themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
const themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
const themeToggleBtn = document.getElementById('theme-toggle');
// Set initial icon state based on DOM class
function updateToggleIcons() {
if (document.documentElement.classList.contains('dark')) {
themeToggleLightIcon?.classList.remove('hidden');
themeToggleDarkIcon?.classList.add('hidden');
} else {
themeToggleDarkIcon?.classList.remove('hidden');
themeToggleLightIcon?.classList.add('hidden');
}
}
updateToggleIcons();
themeToggleBtn?.addEventListener('click', () => {
// Toggle class
if (document.documentElement.classList.contains('dark')) {
document.documentElement.classList.remove('dark');
localStorage.setItem('theme', 'light');
} else {
document.documentElement.classList.add('dark');
localStorage.setItem('theme', 'dark');
}
updateToggleIcons();
});
</script>