jleibl/jleibl.net
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: update styles for consistency and responsiveness

Browse Source
This commit is contained in:
Jan-Marlon Leibl
2025-03-10 11:34:57 +01:00
parent 93b5e3ae31
commit 8e95fa4937
9 changed files with 296 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/layout/Footer.astro
View File

@ -5,19 +5,22 @@ import { FaGithub, FaLinkedin, FaEnvelope } from "react-icons/fa";
<footer
role="contentinfo"
class="mt-20 sm:mt-32 theme-bg-gradient border-t theme-border"
class="mt-20 sm:mt-40 relative"
>
<div class="max-w-(--breakpoint-xl) mx-auto px-4 sm:px-8 py-20 sm:py-32">
<div class="absolute inset-0 theme-bg-gradient opacity-30"></div>
<div class="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/10 to-transparent"></div>
<div class="max-w-(--breakpoint-xl) mx-auto px-4 sm:px-8 py-20 sm:py-32 relative">
<div class="grid gap-16 sm:gap-24">
<FadeIn>
<div class="text-center space-y-4 sm:space-y-5">
<div class="text-center space-y-5 sm:space-y-6">
<h2
class="font-['DM_Sans'] text-4xl sm:text-7xl font-semibold tracking-tight theme-primary"
class="font-['DM_Sans'] text-4xl sm:text-6xl font-semibold tracking-tight theme-primary"
>
Let&apos;s Connect
</h2>
<p
class="font-['Instrument_Sans'] theme-text-70 text-lg sm:text-2xl max-w-2xl mx-auto"
class="font-['Instrument_Sans'] theme-text-70 text-lg sm:text-2xl max-w-2xl mx-auto leading-relaxed"
>
Always interested in new opportunities and collaborations.
</p>
@ -25,42 +28,44 @@ import { FaGithub, FaLinkedin, FaEnvelope } from "react-icons/fa";
</FadeIn>
<FadeIn delay={0.1}>
<div class="flex flex-col items-center gap-8 sm:gap-12 font-['Instrument_Sans']">
<div class="flex flex-col items-center gap-10 sm:gap-14 font-['Instrument_Sans']">
<a
href="mailto:jleibl@proton.me"
class="group flex items-center gap-3 text-xl sm:text-4xl theme-text-90 hover:theme-primary transition-colors"
class="group flex items-center gap-3 text-xl sm:text-3xl theme-text-90 hover:theme-primary transition-all hover:scale-105 duration-300"
>
<FaEnvelope className="w-6 h-6 sm:w-8 sm:h-8" />
<span class="p-2 rounded-xl theme-bg-05 border theme-border">
<FaEnvelope className="w-5 h-5 sm:w-6 sm:h-6" />
</span>
jleibl@proton.me
</a>
<div class="flex gap-6 sm:gap-10">
<div class="flex gap-6 sm:gap-8">
<a
href="https://github.com/AtomicWasTaken"
target="_blank"
rel="noopener noreferrer"
class="group theme-text-70 hover:theme-primary transition-colors"
class="p-3 sm:p-4 rounded-xl theme-bg-05 border theme-border theme-text-70 hover:theme-text-90 hover:scale-105 transition-all duration-300 shadow-sm"
aria-label="GitHub Profile"
>
<FaGithub className="w-8 h-8 sm:w-10 sm:h-10" />
<FaGithub className="w-6 h-6 sm:w-7 sm:h-7" />
</a>
<a
href="https://www.linkedin.com/in/janmarlonleibl/"
target="_blank"
rel="noopener noreferrer"
class="group theme-text-70 hover:theme-primary transition-colors"
class="p-3 sm:p-4 rounded-xl theme-bg-05 border theme-border theme-text-70 hover:theme-text-90 hover:scale-105 transition-all duration-300 shadow-sm"
aria-label="LinkedIn Profile"
>
<FaLinkedin className="w-8 h-8 sm:w-10 sm:h-10" />
<FaLinkedin className="w-6 h-6 sm:w-7 sm:h-7" />
</a>
</div>
</div>
</FadeIn>
<FadeIn delay={0.2}>
<div class="pt-6 sm:pt-12 text-center">
<p class="font-['Instrument_Sans'] theme-text-40 text-xs sm:text-sm tracking-[0.1em]">
<div class="pt-8 sm:pt-16 text-center">
<p class="font-['Instrument_Sans'] theme-text-40 text-xs sm:text-sm tracking-wider">
© {new Date().getFullYear()} Jan-Marlon Leibl. All rights reserved.
</p>
</div>

59
src/components/layout/Header.astro
View File

@ -7,25 +7,25 @@ import MobileMenu from './MobileMenu.astro';
role="banner"
>
<div class="max-w-(--breakpoint-xl) mx-auto">
<nav class="py-5 px-6 sm:px-8 flex justify-between items-center font-['DM_Sans']" role="navigation" aria-label="Main navigation">
<nav class="py-4 px-6 sm:px-8 flex justify-between items-center font-['Instrument_Sans']" role="navigation" aria-label="Main navigation">
<div class="flex items-center">
<a href="#hero" class="flex items-center gap-2 group" aria-label="Home">
<div class="relative w-10 h-10 rounded-full theme-accent flex items-center justify-center border theme-border overflow-hidden group-hover:border-opacity-80 transition-all duration-300">
<span class="text-lg font-bold tracking-tight theme-primary theme-transition">JL</span>
<a href="#hero" class="flex items-center gap-2.5 group" aria-label="Home">
<div class="relative w-9 h-9 rounded-xl theme-accent flex items-center justify-center border theme-border overflow-hidden group-hover:border-opacity-80 transition-all duration-300 shadow-sm">
<span class="text-base font-bold tracking-tight theme-primary theme-transition">JL</span>
<div class="absolute inset-0 theme-bg-05 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
</div>
<span class="text-lg font-medium tracking-tight theme-primary theme-transition hidden sm:block">
<span class="text-base font-medium tracking-tight theme-primary theme-transition hidden sm:block">
Jan-Marlon Leibl
</span>
</a>
</div>
<div class="hidden md:flex items-center">
<div class="flex bg-black/10 backdrop-blur-md rounded-full overflow-hidden theme-border border divide-x divide-white/5">
{["About", "Work"].map((item) => (
<div class="flex bg-black/5 backdrop-blur-md overflow-hidden theme-border border divide-x divide-white/5 shadow-sm rounded-xl">
{["About", "Work"].map((item, index) => (
<a
href={`#${item.toLowerCase()}`}
class="nav-item px-6 py-2 theme-secondary hover:theme-primary theme-transition"
class={`nav-item px-5 py-2 theme-secondary hover:theme-primary theme-transition ${index === 0 ? "rounded-l-xl rounded-r-none" : "rounded-r-xl rounded-l-none"}`}
aria-label={`View my ${item.toLowerCase()}`}
>
{item}
@ -36,14 +36,14 @@ import MobileMenu from './MobileMenu.astro';
<div class="ml-6">
<a
href="mailto:jleibl@proton.me"
class="flex items-center gap-2 px-6 py-2 theme-bg-05 theme-primary border theme-border rounded-full hover:bg-opacity-100 transition-all duration-300 group"
class="flex items-center gap-2 px-5 py-2 theme-bg-05 theme-primary border theme-border rounded-xl hover:bg-opacity-100 transition-all duration-300 group shadow-sm"
aria-label="Contact me via email"
>
<svg class="w-4 h-4 theme-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
</svg>
<span class="text-sm">Contact</span>
<div class="w-0 overflow-hidden group-hover:w-4 transition-all duration-500">
<span class="text-sm font-medium">Contact</span>
<div class="w-0 overflow-hidden group-hover:w-4 transition-all duration-300">
<svg class="w-4 h-4 theme-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M5 12h14M12 5l7 7-7 7"/>
</svg>
@ -57,8 +57,6 @@ import MobileMenu from './MobileMenu.astro';
</div>
</nav>
</div>
<div class="h-px w-full theme-border opacity-50"></div>
</header>
<script>
@ -68,6 +66,30 @@ import MobileMenu from './MobileMenu.astro';
header.style.transform = 'translateY(0)';
header.style.opacity = '1';
}
let lastScrollY = window.scrollY;
window.addEventListener('scroll', () => {
if (!header) return;
const currentScrollY = window.scrollY;
// Apply subtle shadow and border when scrolling down
if (currentScrollY > 20) {
header.classList.add('scrolled');
} else {
header.classList.remove('scrolled');
}
// Hide header when scrolling down, show when scrolling up
if (currentScrollY > lastScrollY && currentScrollY > 100) {
header.style.transform = 'translateY(-100%)';
} else {
header.style.transform = 'translateY(0)';
}
lastScrollY = currentScrollY;
});
});
</script>
@ -75,6 +97,15 @@ import MobileMenu from './MobileMenu.astro';
header {
transform: translateY(-100px);
opacity: 0;
transition: transform 0.5s ease-out, opacity 0.5s ease-out;
transition: transform 0.4s ease-out, opacity 0.5s ease-out, border 0.3s ease;
}
header.scrolled {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.nav-item {
border-radius: 0;
}
</style>

22
src/components/layout/MobileMenu.astro
View File

@ -5,7 +5,7 @@ import GermanyFlag from '../ui/GermanyFlag.astro';
<div class="mobile-menu">
<button
id="mobile-menu-toggle"
class="p-2 theme-accent rounded-lg theme-border"
class="p-2.5 theme-accent rounded-xl theme-border border shadow-sm hover:theme-bg-05 transition-all duration-300"
aria-label="Open menu"
aria-expanded="false"
>
@ -20,7 +20,7 @@ import GermanyFlag from '../ui/GermanyFlag.astro';
<div class="nav-glass w-full h-full flex flex-col shadow-2xl" style="backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);">
<button
id="mobile-menu-close"
class="absolute top-4 right-4 p-2 theme-accent rounded-lg theme-border z-110"
class="absolute top-4 right-4 p-2.5 theme-accent rounded-xl theme-border border z-110 shadow-sm hover:theme-bg-05 transition-all duration-300"
aria-label="Close menu"
>
<svg class="w-5 h-5 theme-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@ -30,17 +30,17 @@ import GermanyFlag from '../ui/GermanyFlag.astro';
<div class="w-full h-full p-6 pt-16 flex flex-col overflow-y-auto">
<nav class="mb-8">
<div class="flex flex-col space-y-2">
<div class="flex flex-col space-y-3">
{[
{ href: "#about", label: "About" },
{ href: "#work", label: "Work" }
].map((item) => (
<a
href={item.href}
class="menu-link p-4 text-xl theme-primary rounded-lg theme-accent flex items-center hover:theme-bg-05 transition-colors"
class="menu-link p-4 text-xl font-medium theme-primary rounded-xl theme-bg-05 border theme-border flex items-center hover:bg-white/[0.03] transition-all duration-300 shadow-sm"
>
<span>{item.label}</span>
<svg class="ml-auto w-5 h-5 theme-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<svg class="ml-auto w-5 h-5 theme-primary opacity-70" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M5 12h14M12 5l7 7-7 7"/>
</svg>
</a>
@ -49,19 +49,19 @@ import GermanyFlag from '../ui/GermanyFlag.astro';
</nav>
<div class="mt-auto">
<div class="pt-4 border-t theme-border">
<div class="pt-6 border-t theme-border">
<a
href="mailto:jleibl@proton.me"
class="flex items-center justify-center gap-3 w-full py-4 px-6 theme-primary border theme-border rounded-lg hover:theme-bg-05 transition-colors"
class="flex items-center justify-center gap-3 w-full py-4 px-6 theme-button-primary rounded-xl transition-all duration-300 shadow-sm hover:shadow-md"
>
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
</svg>
<span>Contact Me</span>
<span class="font-medium">Contact Me</span>
</a>
</div>
<div class="pt-6 flex justify-center pb-6">
<div class="pt-8 flex justify-center pb-6 opacity-70">
<GermanyFlag />
</div>
</div>
@ -82,7 +82,7 @@ import GermanyFlag from '../ui/GermanyFlag.astro';
document.body.style.overflow = 'hidden';
toggle?.setAttribute('aria-expanded', 'true');
overlay?.classList.remove('opacity-0', 'pointer-events-none');
overlay?.classList.add('opacity-95');
overlay?.classList.add('opacity-90');
panel?.classList.remove('translate-x-full');
}
@ -90,7 +90,7 @@ import GermanyFlag from '../ui/GermanyFlag.astro';
document.body.style.overflow = '';
toggle?.setAttribute('aria-expanded', 'false');
overlay?.classList.add('opacity-0', 'pointer-events-none');
overlay?.classList.remove('opacity-95');
overlay?.classList.remove('opacity-90');
panel?.classList.add('translate-x-full');
}