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 <footer
role="contentinfo" 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"> <div class="grid gap-16 sm:gap-24">
<FadeIn> <FadeIn>
<div class="text-center space-y-4 sm:space-y-5"> <div class="text-center space-y-5 sm:space-y-6">
<h2 <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 Let&apos;s Connect
</h2> </h2>
<p <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. Always interested in new opportunities and collaborations.
</p> </p>
@ -25,42 +28,44 @@ import { FaGithub, FaLinkedin, FaEnvelope } from "react-icons/fa";
</FadeIn> </FadeIn>
<FadeIn delay={0.1}> <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 <a
href="mailto:jleibl@proton.me" 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 jleibl@proton.me
</a> </a>
<div class="flex gap-6 sm:gap-10"> <div class="flex gap-6 sm:gap-8">
<a <a
href="https://github.com/AtomicWasTaken" href="https://github.com/AtomicWasTaken"
target="_blank" target="_blank"
rel="noopener noreferrer" 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" 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>
<a <a
href="https://www.linkedin.com/in/janmarlonleibl/" href="https://www.linkedin.com/in/janmarlonleibl/"
target="_blank" target="_blank"
rel="noopener noreferrer" 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" 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> </a>
</div> </div>
</div> </div>
</FadeIn> </FadeIn>
<FadeIn delay={0.2}> <FadeIn delay={0.2}>
<div class="pt-6 sm:pt-12 text-center"> <div class="pt-8 sm:pt-16 text-center">
<p class="font-['Instrument_Sans'] theme-text-40 text-xs sm:text-sm tracking-[0.1em]"> <p class="font-['Instrument_Sans'] theme-text-40 text-xs sm:text-sm tracking-wider">
© {new Date().getFullYear()} Jan-Marlon Leibl. All rights reserved. © {new Date().getFullYear()} Jan-Marlon Leibl. All rights reserved.
</p> </p>
</div> </div>

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

@ -7,25 +7,25 @@ import MobileMenu from './MobileMenu.astro';
role="banner" role="banner"
> >
<div class="max-w-(--breakpoint-xl) mx-auto"> <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"> <div class="flex items-center">
<a href="#hero" class="flex items-center gap-2 group" aria-label="Home"> <a href="#hero" class="flex items-center gap-2.5 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"> <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-lg font-bold tracking-tight theme-primary theme-transition">JL</span> <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 class="absolute inset-0 theme-bg-05 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
</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 Jan-Marlon Leibl
</span> </span>
</a> </a>
</div> </div>
<div class="hidden md:flex items-center"> <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"> <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) => ( {["About", "Work"].map((item, index) => (
<a <a
href={`#${item.toLowerCase()}`} 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()}`} aria-label={`View my ${item.toLowerCase()}`}
> >
{item} {item}
@ -36,14 +36,14 @@ import MobileMenu from './MobileMenu.astro';
<div class="ml-6"> <div class="ml-6">
<a <a
href="mailto:jleibl@proton.me" 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" 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"> <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"/> <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> </svg>
<span class="text-sm">Contact</span> <span class="text-sm font-medium">Contact</span>
<div class="w-0 overflow-hidden group-hover:w-4 transition-all duration-500"> <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"> <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"/> <path d="M5 12h14M12 5l7 7-7 7"/>
</svg> </svg>
@ -57,8 +57,6 @@ import MobileMenu from './MobileMenu.astro';
</div> </div>
</nav> </nav>
</div> </div>
<div class="h-px w-full theme-border opacity-50"></div>
</header> </header>
<script> <script>
@ -68,6 +66,30 @@ import MobileMenu from './MobileMenu.astro';
header.style.transform = 'translateY(0)'; header.style.transform = 'translateY(0)';
header.style.opacity = '1'; 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> </script>
@ -75,6 +97,15 @@ import MobileMenu from './MobileMenu.astro';
header { header {
transform: translateY(-100px); transform: translateY(-100px);
opacity: 0; 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> </style>

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

@ -5,7 +5,7 @@ import GermanyFlag from '../ui/GermanyFlag.astro';
<div class="mobile-menu"> <div class="mobile-menu">
<button <button
id="mobile-menu-toggle" 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-label="Open menu"
aria-expanded="false" 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);"> <div class="nav-glass w-full h-full flex flex-col shadow-2xl" style="backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);">
<button <button
id="mobile-menu-close" 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" aria-label="Close menu"
> >
<svg class="w-5 h-5 theme-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <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"> <div class="w-full h-full p-6 pt-16 flex flex-col overflow-y-auto">
<nav class="mb-8"> <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: "#about", label: "About" },
{ href: "#work", label: "Work" } { href: "#work", label: "Work" }
].map((item) => ( ].map((item) => (
<a <a
href={item.href} 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> <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"/> <path d="M5 12h14M12 5l7 7-7 7"/>
</svg> </svg>
</a> </a>
@ -49,19 +49,19 @@ import GermanyFlag from '../ui/GermanyFlag.astro';
</nav> </nav>
<div class="mt-auto"> <div class="mt-auto">
<div class="pt-4 border-t theme-border"> <div class="pt-6 border-t theme-border">
<a <a
href="mailto:jleibl@proton.me" 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"> <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"/> <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> </svg>
<span>Contact Me</span> <span class="font-medium">Contact Me</span>
</a> </a>
</div> </div>
<div class="pt-6 flex justify-center pb-6"> <div class="pt-8 flex justify-center pb-6 opacity-70">
<GermanyFlag /> <GermanyFlag />
</div> </div>
</div> </div>
@ -82,7 +82,7 @@ import GermanyFlag from '../ui/GermanyFlag.astro';
document.body.style.overflow = 'hidden'; document.body.style.overflow = 'hidden';
toggle?.setAttribute('aria-expanded', 'true'); toggle?.setAttribute('aria-expanded', 'true');
overlay?.classList.remove('opacity-0', 'pointer-events-none'); overlay?.classList.remove('opacity-0', 'pointer-events-none');
overlay?.classList.add('opacity-95'); overlay?.classList.add('opacity-90');
panel?.classList.remove('translate-x-full'); panel?.classList.remove('translate-x-full');
} }
@ -90,7 +90,7 @@ import GermanyFlag from '../ui/GermanyFlag.astro';
document.body.style.overflow = ''; document.body.style.overflow = '';
toggle?.setAttribute('aria-expanded', 'false'); toggle?.setAttribute('aria-expanded', 'false');
overlay?.classList.add('opacity-0', 'pointer-events-none'); overlay?.classList.add('opacity-0', 'pointer-events-none');
overlay?.classList.remove('opacity-95'); overlay?.classList.remove('opacity-90');
panel?.classList.add('translate-x-full'); panel?.classList.add('translate-x-full');
} }

41
src/components/sections/About.astro
View File

@ -22,28 +22,31 @@ const interests = [
]; ];
--- ---
<section id="about" class="py-20 sm:py-40 px-4 sm:px-8 theme-bg-gradient"> <section id="about" class="py-24 sm:py-40 px-4 sm:px-8 relative">
<div class="max-w-(--breakpoint-xl) mx-auto"> <div class="absolute inset-0 theme-bg-gradient opacity-50"></div>
<div class="max-w-(--breakpoint-xl) mx-auto relative">
<FadeIn> <FadeIn>
<div class="flex items-baseline gap-4 mb-12 sm:mb-24"> <div class="flex items-baseline gap-4 mb-12 sm:mb-24">
<h2 class="font-['DM_Sans'] text-3xl sm:text-6xl font-semibold tracking-tight theme-primary"> <h2 class="font-['DM_Sans'] text-3xl sm:text-5xl font-semibold tracking-tight theme-primary">
About About
</h2> </h2>
<div class="h-px grow bg-white/10 relative top-[-4px]"></div> <div class="h-px grow theme-border opacity-60"></div>
</div> </div>
</FadeIn> </FadeIn>
<div class="grid md:grid-cols-[1fr_2fr] gap-12 sm:gap-24"> <div class="grid md:grid-cols-[1fr_2fr] gap-12 sm:gap-24">
<div class="space-y-6 sm:space-y-8"> <div class="space-y-6 sm:space-y-8">
<FadeIn> <FadeIn>
<div class="aspect-square bg-linear-to-tr theme-bg-05 rounded-2xl overflow-hidden border theme-border hover:border-white/10 transition-colors mx-auto md:mx-0 max-w-[280px] md:max-w-none"> <div class="aspect-square theme-bg-05 rounded-2xl overflow-hidden border theme-border hover:border-white/20 transition-all duration-300 shadow-md hover:shadow-lg mx-auto md:mx-0 max-w-[280px] md:max-w-none relative group">
<Image <Image
src="/profile-image.jpg" src="/profile-image.jpg"
alt="Jan-Marlon Leibl - Fullstack Software Developer" alt="Jan-Marlon Leibl - Fullstack Software Developer"
width="400" width="400"
height="400" height="400"
class="object-cover w-full h-full hover:scale-105 transition-transform duration-700" class="object-cover w-full h-full group-hover:scale-105 transition-transform duration-700"
/> />
<div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
</div> </div>
</FadeIn> </FadeIn>
<FadeIn delay={0.1}> <FadeIn delay={0.1}>
@ -72,14 +75,14 @@ const interests = [
<div class="grid grid-cols-1 sm:grid-cols-2 gap-10 sm:gap-16"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-10 sm:gap-16">
<div class="space-y-6 sm:space-y-8"> <div class="space-y-6 sm:space-y-8">
<div class="flex items-baseline gap-4"> <div class="flex items-baseline gap-4">
<h3 class="text-sm sm:text-base theme-text-40 uppercase tracking-[0.2em]"> <h3 class="text-sm sm:text-base theme-text-40 uppercase tracking-wider font-medium">
Technologies Technologies
</h3> </h3>
<div class="h-px grow theme-border"></div> <div class="h-px grow theme-border opacity-30"></div>
</div> </div>
<ul class="space-y-4 sm:space-y-5"> <ul class="space-y-4 sm:space-y-5">
{technologies.map((tech) => ( {technologies.map((tech) => (
<li class="text-base sm:text-lg group flex items-center gap-3 theme-text-70 hover:theme-text-90 transition-colors cursor-default bg-white/[0.02] px-3 py-2 rounded-md"> <li class="text-base sm:text-lg group flex items-center gap-3 theme-text-70 hover:theme-text-90 transition-colors cursor-default theme-bg-05 px-4 py-2.5 rounded-xl shadow-sm hover:shadow-md border border-transparent hover:theme-border transition-all duration-300">
<span class="theme-text-40 group-hover:theme-text-90 flex items-center justify-center w-6 h-6 transition-colors"> <span class="theme-text-40 group-hover:theme-text-90 flex items-center justify-center w-6 h-6 transition-colors">
<tech.icon className="w-5 h-5" /> <tech.icon className="w-5 h-5" />
</span> </span>
@ -91,14 +94,14 @@ const interests = [
<div class="space-y-6 sm:space-y-8"> <div class="space-y-6 sm:space-y-8">
<div class="flex items-baseline gap-4"> <div class="flex items-baseline gap-4">
<h3 class="text-sm sm:text-base theme-text-40 uppercase tracking-[0.2em]"> <h3 class="text-sm sm:text-base theme-text-40 uppercase tracking-wider font-medium">
Interests Interests
</h3> </h3>
<div class="h-px grow theme-border"></div> <div class="h-px grow theme-border opacity-30"></div>
</div> </div>
<ul class="space-y-4 sm:space-y-5"> <ul class="space-y-4 sm:space-y-5">
{interests.map((interest) => ( {interests.map((interest) => (
<li class="text-base sm:text-lg group flex items-center gap-3 theme-text-70 hover:theme-text-90 transition-colors cursor-default bg-white/[0.02] px-3 py-2 rounded-md"> <li class="text-base sm:text-lg group flex items-center gap-3 theme-text-70 hover:theme-text-90 transition-colors cursor-default theme-bg-05 px-4 py-2.5 rounded-xl shadow-sm hover:shadow-md border border-transparent hover:theme-border transition-all duration-300">
<span class="theme-text-40 group-hover:theme-text-90 flex items-center justify-center w-6 h-6 transition-colors"> <span class="theme-text-40 group-hover:theme-text-90 flex items-center justify-center w-6 h-6 transition-colors">
<interest.icon className="w-5 h-5" /> <interest.icon className="w-5 h-5" />
</span> </span>
@ -109,12 +112,12 @@ const interests = [
</div> </div>
</div> </div>
<div class="pt-6 sm:pt-8 flex flex-col sm:flex-row gap-3 sm:gap-6"> <div class="pt-8 sm:pt-10 flex flex-col sm:flex-row gap-4 sm:gap-6">
<a <a
href="https://github.com/AtomicWasTaken" href="https://github.com/AtomicWasTaken"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
class="animate-button w-full text-center px-6 sm:px-8 py-3 sm:py-4 border theme-border rounded-lg sm:rounded-full hover:theme-bg-05 transition-colors text-sm sm:text-base tracking-wide font-medium theme-text-90 flex items-center justify-center gap-2" class="animate-button w-full text-center px-6 sm:px-8 py-3 sm:py-4 border theme-border rounded-xl theme-button-secondary hover:theme-bg-05 transition-all duration-300 text-sm sm:text-base tracking-tight font-medium flex items-center justify-center gap-2 shadow-sm"
> >
<FaGithub className="w-5 h-5" /> <FaGithub className="w-5 h-5" />
View GitHub View GitHub
@ -123,7 +126,7 @@ const interests = [
href="https://www.linkedin.com/in/janmarlonleibl/" href="https://www.linkedin.com/in/janmarlonleibl/"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
class="animate-button w-full text-center px-6 sm:px-8 py-3 sm:py-4 border theme-border rounded-lg sm:rounded-full hover:theme-bg-05 transition-colors text-sm sm:text-base tracking-wide font-medium theme-text-90 flex items-center justify-center gap-2" class="animate-button w-full text-center px-6 sm:px-8 py-3 sm:py-4 border theme-border rounded-xl theme-button-secondary hover:theme-bg-05 transition-all duration-300 text-sm sm:text-base tracking-tight font-medium flex items-center justify-center gap-2 shadow-sm"
> >
<FaLinkedin className="w-5 h-5" /> <FaLinkedin className="w-5 h-5" />
Connect on LinkedIn Connect on LinkedIn
@ -137,10 +140,14 @@ const interests = [
<style> <style>
.animate-button { .animate-button {
transition: transform 0.2s ease-out; transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
} }
.animate-button:hover { .animate-button:hover {
transform: scale(1.02); transform: translateY(-2px);
}
.animate-button:active {
transform: scale(0.98);
} }
</style> </style>

51
src/components/sections/Hero.astro
View File

@ -3,36 +3,37 @@ import FadeIn from '../ui/FadeIn.astro';
import GermanyFlag from '../ui/GermanyFlag.astro'; import GermanyFlag from '../ui/GermanyFlag.astro';
--- ---
<section class="min-h-[100dvh] flex items-center justify-center px-4 sm:px-8 relative pt-24 sm:pt-8" id="hero"> <section class="min-h-[100dvh] flex items-center justify-center px-4 sm:px-8 relative pt-24 pb-16" id="hero">
<div class="absolute inset-0 theme-bg-gradient"></div> <div class="absolute inset-0 theme-bg-gradient opacity-80"></div>
<div class="max-w-7xl w-full relative pt-8 sm:pt-24"> <div class="max-w-7xl w-full relative pt-8 sm:pt-24">
<FadeIn className="space-y-8 sm:space-y-16"> <FadeIn className="space-y-10 sm:space-y-16">
<div class="space-y-8 sm:space-y-10">
<div class="space-y-6 sm:space-y-8"> <div class="space-y-6 sm:space-y-8">
<div class="space-y-6 sm:space-y-8"> <div class="inline-flex items-center gap-2.5 px-4 py-2 rounded-xl theme-accent theme-border border theme-transition shadow-sm">
<div class="inline-flex items-center gap-2.5 px-4 py-2 rounded-full theme-accent theme-border theme-transition">
<span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span> <span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
<span class="theme-secondary uppercase tracking-[0.2em] text-xs sm:text-sm font-['Instrument_Sans']">Available for Work</span> <span class="theme-secondary uppercase tracking-wider text-xs sm:text-sm font-medium font-['Instrument_Sans']">Available for Work</span>
</div> </div>
<div class="space-y-2 sm:space-y-3"> <div class="space-y-3 sm:space-y-4">
<h2 class="font-['DM_Sans'] text-xl sm:text-3xl theme-secondary tracking-wide font-medium theme-transition"> <h2 class="font-['Instrument_Sans'] text-xl sm:text-2xl theme-secondary tracking-tight font-medium theme-transition">
Jan-Marlon Leibl Jan-Marlon Leibl
</h2> </h2>
<div> <div>
<h1 class="font-['DM_Sans'] text-4xl sm:text-6xl md:text-7xl lg:text-8xl font-bold tracking-tight leading-[1.1] sm:leading-[0.95] max-w-4xl theme-primary theme-transition"> <h1 class="font-['DM_Sans'] text-4xl sm:text-6xl md:text-7xl lg:text-8xl font-bold tracking-tight leading-[1.05] sm:leading-[0.95] max-w-4xl theme-primary theme-transition">
Software Developer Software Developer
<br /> <br />
<span class="theme-secondary">based in <GermanyFlag /></span> <span class="theme-secondary inline-flex items-center gap-2">based in <GermanyFlag /></span>
</h1> </h1>
</div> </div>
</div> </div>
</div> </div>
<p class="font-['Instrument_Sans'] theme-secondary text-lg sm:text-2xl max-w-2xl leading-relaxed tracking-wide theme-transition"> <p class="font-['Instrument_Sans'] theme-secondary text-lg sm:text-2xl max-w-2xl leading-relaxed tracking-tight theme-transition">
Passionate about creating digital experiences, with a focus on PHP and modern web technologies. Passionate about creating digital experiences, with a focus on PHP and modern web technologies.
</p> </p>
<div class="flex flex-col sm:flex-row gap-3 sm:gap-4"> <div class="flex flex-col sm:flex-row gap-4 sm:gap-5">
<a <a
href="#work" href="#work"
class="animate-button w-full sm:w-auto text-center inline-flex items-center justify-center gap-2 px-6 sm:px-8 py-3 sm:py-4 theme-button-primary rounded-lg sm:rounded-full transition-colors text-sm sm:text-base tracking-wide font-medium group" class="animate-button w-full sm:w-auto text-center inline-flex items-center justify-center gap-2 px-6 sm:px-8 py-3 sm:py-4 theme-button-primary rounded-xl transition-all text-sm sm:text-base tracking-tight font-medium group shadow-sm"
> >
View My Work View My Work
<svg <svg
@ -47,7 +48,7 @@ import GermanyFlag from '../ui/GermanyFlag.astro';
</a> </a>
<a <a
href="mailto:jleibl@proton.me" href="mailto:jleibl@proton.me"
class="animate-button w-full sm:w-auto text-center inline-flex items-center justify-center gap-2 px-6 sm:px-8 py-3 sm:py-4 border theme-border rounded-lg sm:rounded-full theme-button-secondary hover:theme-bg-05 transition-colors text-sm sm:text-base tracking-wide group" class="animate-button w-full sm:w-auto text-center inline-flex items-center justify-center gap-2 px-6 sm:px-8 py-3 sm:py-4 border theme-border rounded-xl theme-button-secondary hover:theme-bg-05 transition-all text-sm sm:text-base tracking-tight font-medium group shadow-sm"
> >
Get in Touch Get in Touch
<svg <svg
@ -63,11 +64,11 @@ import GermanyFlag from '../ui/GermanyFlag.astro';
</div> </div>
</div> </div>
<div class="border-t theme-border pt-5 pb-5"> <div class="border-t theme-border pt-8 mt-10">
<div class="grid grid-cols-1 sm:grid-cols-3 w-full gap-8 sm:gap-0 py-6 sm:py-8 font-['Instrument_Sans']"> <div class="grid grid-cols-1 sm:grid-cols-3 w-full gap-6 sm:gap-0 py-6 sm:py-8 font-['Instrument_Sans']">
<div class="text-center sm:border-r theme-border last:border-r-0"> <div class="sm:border-r theme-border last:border-r-0 px-4">
<div class="mb-3 sm:mb-4"> <div class="mb-3 sm:mb-4">
<span class="theme-text-40 uppercase tracking-[0.2em] text-xs sm:text-sm">EMAIL</span> <span class="theme-text-40 uppercase tracking-wider text-xs sm:text-sm font-medium">EMAIL</span>
</div> </div>
<a <a
href="mailto:jleibl@proton.me" href="mailto:jleibl@proton.me"
@ -77,18 +78,18 @@ import GermanyFlag from '../ui/GermanyFlag.astro';
</a> </a>
</div> </div>
<div class="text-center sm:border-r theme-border last:border-r-0"> <div class="sm:border-r theme-border last:border-r-0 px-4">
<div class="mb-3 sm:mb-4"> <div class="mb-3 sm:mb-4">
<span class="theme-text-40 uppercase tracking-[0.2em] text-xs sm:text-sm">ROLE</span> <span class="theme-text-40 uppercase tracking-wider text-xs sm:text-sm font-medium">ROLE</span>
</div> </div>
<span class="theme-text-90 text-base sm:text-lg"> <span class="theme-text-90 text-base sm:text-lg">
Fullstack Developer Fullstack Developer
</span> </span>
</div> </div>
<div class="text-center"> <div class="px-4">
<div class="mb-3 sm:mb-4"> <div class="mb-3 sm:mb-4">
<span class="theme-text-40 uppercase tracking-[0.2em] text-xs sm:text-sm">EXPERIENCE</span> <span class="theme-text-40 uppercase tracking-wider text-xs sm:text-sm font-medium">EXPERIENCE</span>
</div> </div>
<span class="theme-text-90 text-base sm:text-lg"> <span class="theme-text-90 text-base sm:text-lg">
5+ Years 5+ Years
@ -102,14 +103,14 @@ import GermanyFlag from '../ui/GermanyFlag.astro';
<style> <style>
.animate-button { .animate-button {
transition: transform 0.2s ease-out; transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
} }
.animate-button:hover { .animate-button:hover {
transform: scale(1.03); transform: translateY(-2px);
} }
.animate-button:active { .animate-button:active {
transform: scale(0.97); transform: scale(0.98);
} }
</style> </style>

33
src/components/sections/Work.astro
View File

@ -104,47 +104,48 @@ const sortedProjects = [...projects].sort((a, b) => {
}); });
--- ---
<section id="work" class="py-20 sm:py-40 px-4 sm:px-8 relative"> <section id="work" class="py-24 sm:py-40 px-4 sm:px-8 relative">
<div class="absolute inset-0 bg-linear-to-b from-transparent via-white/[0.02] to-transparent pointer-events-none theme-bg-gradient"></div> <div class="absolute inset-0 theme-bg-gradient opacity-30"></div>
<div class="max-w-(--breakpoint-xl) mx-auto relative"> <div class="max-w-(--breakpoint-xl) mx-auto relative">
<FadeIn> <FadeIn>
<div class="flex flex-col gap-3 mb-12 sm:mb-24"> <div class="flex flex-col gap-3 mb-12 sm:mb-24">
<span class="theme-text-40 uppercase tracking-[0.2em] text-sm sm:text-base font-['Instrument_Sans']"> <span class="theme-text-40 uppercase tracking-wider text-sm sm:text-base font-medium font-['Instrument_Sans']">
Portfolio Portfolio
</span> </span>
<div class="flex items-baseline gap-4"> <div class="flex items-baseline gap-4">
<h2 class="font-['DM_Sans'] text-3xl sm:text-6xl font-semibold tracking-tight theme-primary"> <h2 class="font-['DM_Sans'] text-3xl sm:text-5xl font-semibold tracking-tight theme-primary">
Selected Work Selected Work
</h2> </h2>
<div class="h-px grow theme-border"></div> <div class="h-px grow theme-border opacity-60"></div>
</div> </div>
</div> </div>
</FadeIn> </FadeIn>
<div class="grid gap-24 sm:gap-40"> <div class="grid gap-20 sm:gap-28">
{sortedProjects.map((project, index) => ( {sortedProjects.map((project, index) => (
<FadeIn delay={index * 0.1}> <FadeIn delay={index * 0.1}>
<div class="group relative"> <div class="group relative">
<div class="absolute top-0 left-0 right-0 flex items-center gap-4"> <div class="absolute top-0 left-0 right-0 flex items-center gap-4">
<div class="font-['Instrument_Sans'] text-sm sm:text-base theme-text-40 uppercase tracking-[0.2em] py-2 pr-4"> <div class="font-['Instrument_Sans'] text-sm sm:text-base theme-text-40 uppercase tracking-wider font-medium py-2 pr-4">
{project.year} {project.year}
</div> </div>
<div class="h-px grow theme-border"></div> <div class="h-px grow theme-border opacity-30"></div>
</div> </div>
<div class="pt-12 sm:pt-16 grid grid-cols-1 lg:grid-cols-[1.5fr_1fr] gap-6 sm:gap-16"> <div class="pt-12 sm:pt-16 grid grid-cols-1 lg:grid-cols-[1.5fr_1fr] gap-8 sm:gap-16">
<div class="space-y-4 sm:space-y-8"> <div class="space-y-4 sm:space-y-6">
<h3 class="font-['DM_Sans'] text-3xl sm:text-6xl font-semibold tracking-tight theme-primary group-hover:theme-text-90 transition-colors"> <h3 class="font-['DM_Sans'] text-3xl sm:text-5xl font-semibold tracking-tight theme-primary group-hover:theme-text-90 transition-colors">
{project.title} {project.title}
</h3> </h3>
<p class="font-['Instrument_Sans'] text-base sm:text-xl theme-text-70 leading-relaxed group-hover:theme-text-70 transition-colors max-w-xl"> <p class="font-['Instrument_Sans'] text-base sm:text-xl theme-text-70 leading-relaxed group-hover:theme-text-90 transition-colors max-w-xl">
{project.description} {project.description}
</p> </p>
</div> </div>
<div class="space-y-6 sm:space-y-12"> <div class="space-y-6 sm:space-y-10">
<div class="space-y-4 sm:space-y-6"> <div class="space-y-4 sm:space-y-6">
<h4 class="font-['Instrument_Sans'] text-sm sm:text-base theme-text-40 uppercase tracking-[0.2em]"> <h4 class="font-['Instrument_Sans'] text-sm sm:text-base theme-text-40 uppercase tracking-wider font-medium">
Technologies Technologies
</h4> </h4>
<div class="flex flex-wrap items-center gap-3 sm:gap-4"> <div class="flex flex-wrap items-center gap-3 sm:gap-4">
@ -152,7 +153,7 @@ const sortedProjects = [...projects].sort((a, b) => {
const Icon = tag.icon; const Icon = tag.icon;
return ( return (
<span <span
class="flex items-center text-sm sm:text-base theme-text-70 font-['Instrument_Sans'] tracking-wide py-1 sm:py-2 group-hover:theme-text-90 transition-colors bg-white/[0.02] px-3 sm:px-4 rounded-full shadow-xs" class="flex items-center text-sm sm:text-base theme-text-70 font-['Instrument_Sans'] tracking-tight font-medium py-1.5 sm:py-2 group-hover:theme-text-90 transition-all duration-300 theme-bg-05 px-4 sm:px-5 rounded-xl shadow-sm border border-transparent group-hover:theme-border"
> >
<span class="mr-2 flex items-center"> <span class="mr-2 flex items-center">
<Icon className="text-lg" /> <Icon className="text-lg" />
@ -169,7 +170,7 @@ const sortedProjects = [...projects].sort((a, b) => {
</div> </div>
</div> </div>
<div class="absolute -inset-x-4 sm:-inset-x-8 -inset-y-4 sm:-inset-y-6 rounded-2xl sm:rounded-3xl border border-white/0 group-hover:theme-border transition-colors"></div> <div class="absolute -inset-x-6 sm:-inset-x-8 -inset-y-6 sm:-inset-y-8 rounded-2xl sm:rounded-3xl border border-transparent hover:theme-border group-hover:bg-white/[0.01] transition-all duration-300 shadow-sm group-hover:shadow-md"></div>
</div> </div>
</FadeIn> </FadeIn>
))} ))}

2
src/pages/index.astro
View File

@ -48,7 +48,7 @@ import '@fontsource/instrument-sans/500.css';
<link rel="canonical" href="https://jleibl.net/" /> <link rel="canonical" href="https://jleibl.net/" />
</head> </head>
<body> <body>
<div id="app-root" class="min-h-screen theme-transition black"> <div id="app-root" class="min-h-screen theme-transition black overflow-hidden">
<Header /> <Header />
<Hero /> <Hero />
<About /> <About />

49
src/styles/global.css
View File

@ -5,14 +5,6 @@
--color-foreground: var(--foreground); --color-foreground: var(--foreground);
} }
/*
The default border color has changed to `currentColor` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
looks the same as it did with Tailwind CSS v3.
If we ever want to remove these styles, we need to add an explicit border
color utility to any element that depends on these defaults.
*/
@layer base { @layer base {
*, *,
::after, ::after,
@ -26,18 +18,55 @@
:root { :root {
--background: #ffffff; --background: #ffffff;
--foreground: #171717; --foreground: #171717;
--primary: #2563eb;
--primary-hover: #1d4ed8;
--primary-light: #dbeafe;
--gray-50: #f9fafb;
--gray-100: #f3f4f6;
--gray-200: #e5e7eb;
--gray-300: #d1d5db;
--gray-400: #9ca3af;
--gray-500: #6b7280;
--gray-600: #4b5563;
--gray-700: #374151;
--gray-800: #1f2937;
--gray-900: #111827;
--radius-sm: 0.25rem;
--radius-md: 0.375rem;
--radius-lg: 0.5rem;
--radius-xl: 0.75rem;
--radius-2xl: 1rem;
--radius-full: 9999px;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
--background: #0a0a0a; --background: #0a0a0a;
--foreground: #ededed; --foreground: #f3f4f6;
--primary: #3b82f6;
--primary-hover: #60a5fa;
--primary-light: #1e3a8a;
--gray-50: #18181b;
--gray-100: #27272a;
--gray-200: #3f3f46;
--gray-300: #52525b;
--gray-400: #71717a;
--gray-500: #a1a1aa;
--gray-600: #d4d4d8;
--gray-700: #e4e4e7;
--gray-800: #f4f4f5;
--gray-900: #fafafa;
} }
} }
body { body {
color: var(--foreground); color: var(--foreground);
background: var(--background); background: var(--background);
font-family: Arial, Helvetica, sans-serif; font-family: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
letter-spacing: -0.025em;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
} }

164
src/styles/theme.css
View File

@ -1,68 +1,76 @@
.black { background: #0A0A0A; } .black { background: #0A0A0A; }
.red { background: #1A0000; } .red { background: #170c0c; }
.gold { background: #1A1400; } .gold { background: #121107; }
.black .theme-primary { color: rgba(255, 255, 255, 0.9); } .black .theme-primary { color: rgba(255, 255, 255, 0.95); }
.red .theme-primary { color: rgba(255, 0, 0, 0.9); } .red .theme-primary { color: #f87171; }
.gold .theme-primary { color: rgba(255, 204, 0, 0.9); } .gold .theme-primary { color: #fbbf24; }
.black .theme-secondary { color: rgba(255, 255, 255, 0.6); } .black .theme-secondary { color: rgba(255, 255, 255, 0.7); }
.red .theme-secondary { color: rgba(255, 0, 0, 0.6); } .red .theme-secondary { color: rgba(248, 113, 113, 0.85); }
.gold .theme-secondary { color: rgba(255, 204, 0, 0.6); } .gold .theme-secondary { color: rgba(251, 191, 36, 0.85); }
.black .theme-accent { background-color: rgba(255, 255, 255, 0.03); } .black .theme-accent { background-color: rgba(255, 255, 255, 0.05); }
.red .theme-accent { background-color: rgba(255, 0, 0, 0.03); } .red .theme-accent { background-color: rgba(248, 113, 113, 0.08); }
.gold .theme-accent { background-color: rgba(255, 204, 0, 0.03); } .gold .theme-accent { background-color: rgba(251, 191, 36, 0.08); }
.black .theme-border { border-color: rgba(255, 255, 255, 0.1); } .black .theme-border { border-color: rgba(255, 255, 255, 0.1); }
.red .theme-border { border-color: rgba(255, 0, 0, 0.1); } .red .theme-border { border-color: rgba(248, 113, 113, 0.15); }
.gold .theme-border { border-color: rgba(255, 204, 0, 0.1); } .gold .theme-border { border-color: rgba(251, 191, 36, 0.15); }
.black .theme-text-40 { color: rgba(255, 255, 255, 0.4); } .black .theme-text-40 { color: rgba(255, 255, 255, 0.5); }
.red .theme-text-40 { color: rgba(255, 0, 0, 0.4); } .red .theme-text-40 { color: rgba(248, 113, 113, 0.6); }
.gold .theme-text-40 { color: rgba(255, 204, 0, 0.4); } .gold .theme-text-40 { color: rgba(251, 191, 36, 0.6); }
.black .theme-text-70 { color: rgba(255, 255, 255, 0.7); } .black .theme-text-70 { color: rgba(255, 255, 255, 0.7); }
.red .theme-text-70 { color: rgba(255, 0, 0, 0.7); } .red .theme-text-70 { color: rgba(248, 113, 113, 0.75); }
.gold .theme-text-70 { color: rgba(255, 204, 0, 0.7); } .gold .theme-text-70 { color: rgba(251, 191, 36, 0.75); }
.black .theme-text-90 { color: rgba(255, 255, 255, 0.9); } .black .theme-text-90 { color: rgba(255, 255, 255, 0.9); }
.red .theme-text-90 { color: rgba(255, 0, 0, 0.9); } .red .theme-text-90 { color: rgba(248, 113, 113, 0.95); }
.gold .theme-text-90 { color: rgba(255, 204, 0, 0.9); } .gold .theme-text-90 { color: rgba(251, 191, 36, 0.95); }
.black .theme-bg-05 { background-color: rgba(255, 255, 255, 0.05); } .black .theme-bg-05 { background-color: rgba(255, 255, 255, 0.05); }
.red .theme-bg-05 { background-color: rgba(255, 0, 0, 0.05); } .red .theme-bg-05 { background-color: rgba(248, 113, 113, 0.06); }
.gold .theme-bg-05 { background-color: rgba(255, 204, 0, 0.05); } .gold .theme-bg-05 { background-color: rgba(251, 191, 36, 0.06); }
.black .nav-glass { .black .nav-glass {
background: rgba(10, 10, 10, 0.8); background: rgba(10, 10, 10, 0.8);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); backdrop-filter: blur(12px);
box-shadow: 0 4px 32px rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
} }
.red .nav-glass { .red .nav-glass {
background: rgba(26, 0, 0, 0.8); background: rgba(23, 12, 12, 0.8);
box-shadow: 0 8px 32px rgba(26, 0, 0, 0.1); backdrop-filter: blur(12px);
box-shadow: 0 4px 32px rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(248, 113, 113, 0.1);
} }
.gold .nav-glass { .gold .nav-glass {
background: rgba(26, 20, 0, 0.8); background: rgba(18, 17, 7, 0.8);
box-shadow: 0 8px 32px rgba(26, 20, 0, 0.1); backdrop-filter: blur(12px);
box-shadow: 0 4px 32px rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(251, 191, 36, 0.1);
} }
.black .nav-item-active { .black .nav-item-active {
background: rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.08);
border-bottom: 2px solid rgba(255, 255, 255, 0.8); border-bottom: 2px solid rgba(255, 255, 255, 0.8);
} }
.red .nav-item-active { .red .nav-item-active {
background: rgba(255, 0, 0, 0.05); background: rgba(248, 113, 113, 0.08);
border-bottom: 2px solid rgba(255, 0, 0, 0.8); border-bottom: 2px solid rgba(248, 113, 113, 0.8);
} }
.gold .nav-item-active { .gold .nav-item-active {
background: rgba(255, 204, 0, 0.05); background: rgba(251, 191, 36, 0.08);
border-bottom: 2px solid rgba(255, 204, 0, 0.8); border-bottom: 2px solid rgba(251, 191, 36, 0.8);
} }
.nav-item { .nav-item {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
font-weight: 500;
transition: all 0.2s ease;
} }
.nav-item::after { .nav-item::after {
@ -73,43 +81,97 @@
width: 100%; width: 100%;
height: 2px; height: 2px;
transform: translateX(-100%); transform: translateX(-100%);
transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
} }
.black .nav-item::after { .black .nav-item::after {
background-color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.8);
} }
.red .nav-item::after { .red .nav-item::after {
background-color: rgba(255, 0, 0, 0.8); background-color: rgba(248, 113, 113, 0.8);
} }
.gold .nav-item::after { .gold .nav-item::after {
background-color: rgba(255, 204, 0, 0.8); background-color: rgba(251, 191, 36, 0.8);
} }
.nav-item:hover::after { .nav-item:hover::after {
transform: translateX(0); transform: translateX(0);
} }
.black .theme-bg-gradient { background: linear-gradient(to bottom, rgba(255, 255, 255, 0.02), transparent); } .black .theme-bg-gradient {
.red .theme-bg-gradient { background: linear-gradient(to bottom, rgba(255, 0, 0, 0.02), transparent); } background: linear-gradient(to bottom, rgba(255, 255, 255, 0.03), transparent);
.gold .theme-bg-gradient { background: linear-gradient(to bottom, rgba(255, 204, 0, 0.02), transparent); } }
.red .theme-bg-gradient {
background: linear-gradient(to bottom, rgba(248, 113, 113, 0.04), transparent);
}
.gold .theme-bg-gradient {
background: linear-gradient(to bottom, rgba(251, 191, 36, 0.04), transparent);
}
.black .theme-button-primary { background-color: rgba(255, 255, 255, 0.9); color: #0A0A0A; } .black .theme-button-primary {
.red .theme-button-primary { background-color: rgba(255, 0, 0, 0.9); color: #1A0000; } background-color: rgba(255, 255, 255, 0.9);
.gold .theme-button-primary { background-color: rgba(255, 204, 0, 0.9); color: #1A1400; } color: #0A0A0A;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.red .theme-button-primary {
background-color: #f87171;
color: #0f0606;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.gold .theme-button-primary {
background-color: #fbbf24;
color: #0f0b02;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.black .theme-button-primary:hover { background-color: rgba(255, 255, 255, 0.8); } .black .theme-button-primary:hover {
.red .theme-button-primary:hover { background-color: rgba(255, 0, 0, 0.8); } background-color: rgba(255, 255, 255, 1);
.gold .theme-button-primary:hover { background-color: rgba(255, 204, 0, 0.8); } transform: translateY(-1px);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.red .theme-button-primary:hover {
background-color: #ef4444;
transform: translateY(-1px);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.gold .theme-button-primary:hover {
background-color: #f59e0b;
transform: translateY(-1px);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.black .theme-button-secondary { border-color: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.9); } .black .theme-button-secondary {
.red .theme-button-secondary { border-color: rgba(255, 0, 0, 0.1); color: rgba(255, 0, 0, 0.9); } border-color: rgba(255, 255, 255, 0.15);
.gold .theme-button-secondary { border-color: rgba(255, 204, 0, 0.1); color: rgba(255, 204, 0, 0.9); } color: rgba(255, 255, 255, 0.9);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.red .theme-button-secondary {
border-color: rgba(248, 113, 113, 0.2);
color: rgba(248, 113, 113, 1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.gold .theme-button-secondary {
border-color: rgba(251, 191, 36, 0.2);
color: rgba(251, 191, 36, 1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.black .theme-button-secondary:hover { background-color: rgba(255, 255, 255, 0.05); } .black .theme-button-secondary:hover {
.red .theme-button-secondary:hover { background-color: rgba(255, 0, 0, 0.05); } background-color: rgba(255, 255, 255, 0.08);
.gold .theme-button-secondary:hover { background-color: rgba(255, 204, 0, 0.05); } transform: translateY(-1px);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.red .theme-button-secondary:hover {
background-color: rgba(248, 113, 113, 0.08);
transform: translateY(-1px);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.gold .theme-button-secondary:hover {
background-color: rgba(251, 191, 36, 0.08);
transform: translateY(-1px);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.theme-transition { .theme-transition {
transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease; transition: all 0.25s ease;
} }