forked from jleibl/jleibl.net
style: update theme-secondary color opacity values
This commit is contained in:
@ -137,9 +137,9 @@ export default function Home() {
|
||||
.red .theme-primary { color: rgba(255, 0, 0, 0.9); }
|
||||
.gold .theme-primary { color: rgba(255, 204, 0, 0.9); }
|
||||
|
||||
.black .theme-secondary { color: rgba(255, 255, 255, 0.7); }
|
||||
.red .theme-secondary { color: rgba(255, 0, 0, 0.7); }
|
||||
.gold .theme-secondary { color: rgba(255, 204, 0, 0.7); }
|
||||
.black .theme-secondary { color: rgba(255, 255, 255, 0.6); }
|
||||
.red .theme-secondary { color: rgba(255, 0, 0, 0.6); }
|
||||
.gold .theme-secondary { color: rgba(255, 204, 0, 0.6); }
|
||||
|
||||
.black .theme-accent { background-color: rgba(255, 255, 255, 0.03); }
|
||||
.red .theme-accent { background-color: rgba(255, 0, 0, 0.03); }
|
||||
@ -152,39 +152,6 @@ export default function Home() {
|
||||
.theme-transition {
|
||||
transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
|
||||
}
|
||||
|
||||
/* Focus styles for accessibility */
|
||||
a:focus-visible, button:focus-visible {
|
||||
outline: 2px solid #4D90FE;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Improved touch targets for mobile */
|
||||
@media (max-width: 640px) {
|
||||
a, button {
|
||||
min-height: 44px;
|
||||
min-width: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Skip to content */
|
||||
.skip-to-content {
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
top: 0;
|
||||
z-index: 999;
|
||||
padding: 1rem;
|
||||
background-color: white;
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
transform: translateY(-100%);
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.skip-to-content:focus {
|
||||
left: 0;
|
||||
transform: translateY(0);
|
||||
}
|
||||
`}</style>
|
||||
<div className="min-h-screen theme-transition">
|
||||
<Head>
|
||||
@ -224,24 +191,21 @@ export default function Home() {
|
||||
<link rel="canonical" href="https://jleibl.net/" />
|
||||
</Head>
|
||||
|
||||
{/* Skip to content link for keyboard users */}
|
||||
<a href="#main-content" className="skip-to-content">Skip to content</a>
|
||||
|
||||
<header className="fixed top-0 left-0 right-0 z-40 backdrop-blur-md bg-black/20 border-b theme-border theme-transition" role="banner">
|
||||
<nav className="max-w-screen-xl mx-auto px-4 sm:px-8 py-3 sm:py-4 flex flex-wrap justify-between items-center font-['DM_Sans']" role="navigation" aria-label="Main navigation">
|
||||
<Link href="/" className="text-xl sm:text-xl font-medium tracking-tight theme-primary theme-transition flex items-center min-h-[44px]" aria-label="Home">
|
||||
<Link href="/" className="text-xl sm:text-xl font-medium tracking-tight theme-primary theme-transition" aria-label="Home">
|
||||
JL
|
||||
</Link>
|
||||
<div className="flex items-center gap-4 sm:gap-12 text-sm sm:text-base tracking-wide">
|
||||
<a href="#work" className="theme-secondary hover:theme-primary theme-transition min-h-[44px] flex items-center" aria-label="View my work">
|
||||
<a href="#work" className="theme-secondary hover:theme-primary theme-transition" aria-label="View my work">
|
||||
Work
|
||||
</a>
|
||||
<a href="#about" className="theme-secondary hover:theme-primary theme-transition min-h-[44px] flex items-center" aria-label="About me">
|
||||
<a href="#about" className="theme-secondary hover:theme-primary theme-transition" aria-label="About me">
|
||||
About
|
||||
</a>
|
||||
<a
|
||||
href="mailto:jleibl@proton.me"
|
||||
className="px-4 sm:px-6 py-2 sm:py-2.5 text-sm sm:text-base theme-accent theme-border hover:bg-white/[0.06] theme-transition rounded-lg sm:rounded-none flex items-center justify-center"
|
||||
className="px-4 sm:px-6 py-2 sm:py-2.5 text-sm sm:text-base theme-accent theme-border hover:bg-white/[0.06] theme-transition rounded-lg sm:rounded-none"
|
||||
aria-label="Contact me via email"
|
||||
>
|
||||
Contact
|
||||
@ -250,21 +214,20 @@ export default function Home() {
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main id="main-content" tabIndex={-1}>
|
||||
<section className="min-h-[100dvh] flex items-center px-4 sm:px-8 relative pt-16 sm:pt-0" aria-labelledby="hero-title">
|
||||
<section className="min-h-[100dvh] flex items-center px-4 sm:px-8 relative pt-16 sm:pt-0">
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-white/[0.02] via-white/[0.01] to-transparent"></div>
|
||||
<div className="max-w-screen-xl w-full relative pt-8 sm:pt-24">
|
||||
<FadeIn className="space-y-8 sm:space-y-16">
|
||||
<div className="space-y-6 sm:space-y-8">
|
||||
<div className="space-y-6 sm:space-y-8">
|
||||
<div className="inline-flex items-center gap-2.5 px-4 py-2 rounded-full theme-accent theme-border hover:theme-border theme-transition">
|
||||
<span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" aria-hidden="true"></span>
|
||||
<span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
|
||||
<span className="theme-secondary uppercase tracking-[0.2em] text-xs sm:text-sm font-['Instrument_Sans']">Available for Work</span>
|
||||
</div>
|
||||
<div className="space-y-2 sm:space-y-3">
|
||||
<h2 className="font-['DM_Sans'] text-xl sm:text-3xl theme-secondary tracking-wide font-medium theme-transition">Jan-Marlon Leibl</h2>
|
||||
<div>
|
||||
<h1 id="hero-title" className="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 className="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">
|
||||
Software Developer
|
||||
<br />
|
||||
<span className="theme-secondary">based in <GermanyText /></span>
|
||||
@ -279,7 +242,6 @@ export default function Home() {
|
||||
<a
|
||||
href="#work"
|
||||
className="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 bg-white text-black rounded-lg sm:rounded-full hover:bg-white/90 transition-colors text-sm sm:text-base tracking-wide font-medium group"
|
||||
aria-label="View my work portfolio"
|
||||
>
|
||||
View My Work
|
||||
<svg
|
||||
@ -288,7 +250,6 @@ export default function Home() {
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7"/>
|
||||
</svg>
|
||||
@ -296,7 +257,6 @@ export default function Home() {
|
||||
<a
|
||||
href="mailto:jleibl@proton.me"
|
||||
className="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 border-white/10 rounded-lg sm:rounded-full hover:bg-white/[0.05] transition-colors text-sm sm:text-base tracking-wide group"
|
||||
aria-label="Contact me by email"
|
||||
>
|
||||
Get in Touch
|
||||
<svg
|
||||
@ -305,7 +265,6 @@ export default function Home() {
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7"/>
|
||||
</svg>
|
||||
@ -319,10 +278,9 @@ export default function Home() {
|
||||
<a
|
||||
href="mailto:jleibl@proton.me"
|
||||
className="hover:text-white/90 transition-colors flex items-center gap-2 sm:gap-2.5 group-hover:gap-3 duration-300"
|
||||
aria-label="Send email to jleibl@proton.me"
|
||||
>
|
||||
jleibl@proton.me
|
||||
<svg className="w-4 h-4 sm:w-5 sm:h-5 opacity-0 group-hover:opacity-100 transition-all -translate-x-4 group-hover:translate-x-0 duration-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
|
||||
<svg className="w-4 h-4 sm:w-5 sm:h-5 opacity-0 group-hover:opacity-100 transition-all -translate-x-4 group-hover:translate-x-0 duration-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M5 12h14M12 5l7 7-7 7"/>
|
||||
</svg>
|
||||
</a>
|
||||
@ -340,12 +298,12 @@ export default function Home() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="about" className="py-20 sm:py-40 px-4 sm:px-8 bg-gradient-to-b from-white/[0.02] to-transparent" aria-labelledby="about-heading">
|
||||
<section id="about" className="py-20 sm:py-40 px-4 sm:px-8 bg-gradient-to-b from-white/[0.02] to-transparent">
|
||||
<div className="max-w-screen-xl mx-auto">
|
||||
<FadeIn>
|
||||
<div className="flex items-baseline gap-4 mb-12 sm:mb-24">
|
||||
<h2 id="about-heading" className="font-['DM_Sans'] text-3xl sm:text-6xl font-semibold tracking-tight">About</h2>
|
||||
<div className="h-px flex-grow bg-white/10 relative top-[-4px]" aria-hidden="true"></div>
|
||||
<h2 className="font-['DM_Sans'] text-3xl sm:text-6xl font-semibold tracking-tight">About</h2>
|
||||
<div className="h-px flex-grow bg-white/10 relative top-[-4px]"></div>
|
||||
</div>
|
||||
</FadeIn>
|
||||
|
||||
@ -386,15 +344,15 @@ export default function Home() {
|
||||
<div className="space-y-6 sm:space-y-8">
|
||||
<div className="flex items-baseline gap-4">
|
||||
<h3 className="text-sm sm:text-base text-white/40 uppercase tracking-[0.2em]">Technologies</h3>
|
||||
<div className="h-px flex-grow bg-white/10" aria-hidden="true"></div>
|
||||
<div className="h-px flex-grow bg-white/10"></div>
|
||||
</div>
|
||||
<ul className="space-y-4 sm:space-y-5" aria-label="Technologies I specialize in">
|
||||
<ul className="space-y-4 sm:space-y-5">
|
||||
{['PHP', 'JavaScript', 'MySQL', 'React'].map((tech) => (
|
||||
<li
|
||||
key={tech}
|
||||
className="text-base sm:text-lg group flex items-center gap-3 hover:text-white/90 transition-colors cursor-default"
|
||||
>
|
||||
<span className="w-2 h-2 rounded-full bg-white/40 group-hover:bg-white/90 transition-colors" aria-hidden="true"></span>
|
||||
<span className="w-2 h-2 rounded-full bg-white/40 group-hover:bg-white/90 transition-colors"></span>
|
||||
{tech}
|
||||
</li>
|
||||
))}
|
||||
@ -404,9 +362,9 @@ export default function Home() {
|
||||
<div className="space-y-6 sm:space-y-8">
|
||||
<div className="flex items-baseline gap-4">
|
||||
<h3 className="text-sm sm:text-base text-white/40 uppercase tracking-[0.2em]">Interests</h3>
|
||||
<div className="h-px flex-grow bg-white/10" aria-hidden="true"></div>
|
||||
<div className="h-px flex-grow bg-white/10"></div>
|
||||
</div>
|
||||
<ul className="space-y-4 sm:space-y-5" aria-label="Professional interests">
|
||||
<ul className="space-y-4 sm:space-y-5">
|
||||
{[
|
||||
'Web Development',
|
||||
'System Architecture',
|
||||
@ -417,7 +375,7 @@ export default function Home() {
|
||||
key={interest}
|
||||
className="text-base sm:text-lg group flex items-center gap-3 hover:text-white/90 transition-colors cursor-default"
|
||||
>
|
||||
<span className="w-2 h-2 rounded-full bg-white/40 group-hover:bg-white/90 transition-colors" aria-hidden="true"></span>
|
||||
<span className="w-2 h-2 rounded-full bg-white/40 group-hover:bg-white/90 transition-colors"></span>
|
||||
{interest}
|
||||
</li>
|
||||
))}
|
||||
@ -431,7 +389,6 @@ export default function Home() {
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="w-full text-center px-6 sm:px-8 py-3 sm:py-4 border border-white/10 rounded-lg sm:rounded-full hover:bg-white/[0.05] transition-colors text-sm sm:text-base tracking-wide font-medium"
|
||||
aria-label="View my GitHub profile, opens in a new tab"
|
||||
>
|
||||
View GitHub
|
||||
</a>
|
||||
@ -440,7 +397,6 @@ export default function Home() {
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="w-full text-center px-6 sm:px-8 py-3 sm:py-4 border border-white/10 rounded-lg sm:rounded-full hover:bg-white/[0.05] transition-colors text-sm sm:text-base tracking-wide font-medium"
|
||||
aria-label="Connect with me on LinkedIn, opens in a new tab"
|
||||
>
|
||||
Connect on LinkedIn
|
||||
</a>
|
||||
@ -451,15 +407,15 @@ export default function Home() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="work" className="py-20 sm:py-40 px-4 sm:px-8 relative" aria-labelledby="work-heading">
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-transparent via-white/[0.02] to-transparent pointer-events-none" aria-hidden="true"></div>
|
||||
<section id="work" className="py-20 sm:py-40 px-4 sm:px-8 relative">
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-transparent via-white/[0.02] to-transparent pointer-events-none"></div>
|
||||
<div className="max-w-screen-xl mx-auto relative">
|
||||
<FadeIn>
|
||||
<div className="flex flex-col gap-3 mb-12 sm:mb-24">
|
||||
<span className="text-white/40 uppercase tracking-[0.2em] text-sm sm:text-base font-['Instrument_Sans']">Portfolio</span>
|
||||
<div className="flex items-baseline gap-4">
|
||||
<h2 id="work-heading" className="font-['DM_Sans'] text-3xl sm:text-6xl font-semibold tracking-tight">Selected Work</h2>
|
||||
<div className="h-px flex-grow bg-white/10" aria-hidden="true"></div>
|
||||
<h2 className="font-['DM_Sans'] text-3xl sm:text-6xl font-semibold tracking-tight">Selected Work</h2>
|
||||
<div className="h-px flex-grow bg-white/10"></div>
|
||||
</div>
|
||||
</div>
|
||||
</FadeIn>
|
||||
@ -492,24 +448,20 @@ export default function Home() {
|
||||
}
|
||||
].map((project, index) => (
|
||||
<FadeIn key={index} delay={index * 0.1}>
|
||||
<div
|
||||
className="group relative p-4 sm:p-6 hover:bg-white/[0.01] rounded-2xl sm:rounded-3xl transition-colors"
|
||||
tabIndex={0}
|
||||
aria-label={`Project: ${project.title}`}
|
||||
>
|
||||
<div className="absolute top-0 left-0 right-0 flex items-center gap-4 px-4 sm:px-6">
|
||||
<div className="group relative">
|
||||
<div className="absolute top-0 left-0 right-0 flex items-center gap-4">
|
||||
<div className="font-['Instrument_Sans'] text-sm sm:text-base text-white/40 uppercase tracking-[0.2em] py-2 pr-4">
|
||||
{project.year}
|
||||
</div>
|
||||
<div className="h-px flex-grow bg-white/10" aria-hidden="true"></div>
|
||||
<div className="h-px flex-grow bg-white/10"></div>
|
||||
</div>
|
||||
|
||||
<div className="pt-12 sm:pt-16 grid grid-cols-1 lg:grid-cols-[1.5fr,1fr] gap-6 sm:gap-16">
|
||||
<div className="space-y-4 sm:space-y-8">
|
||||
<h3 className="font-['DM_Sans'] text-3xl sm:text-6xl font-semibold tracking-tight text-white group-hover:text-white group-focus:text-white transition-colors">
|
||||
<h3 className="font-['DM_Sans'] text-3xl sm:text-6xl font-semibold tracking-tight text-white group-hover:text-white/90 transition-colors">
|
||||
{project.title}
|
||||
</h3>
|
||||
<p className="font-['Instrument_Sans'] text-base sm:text-xl text-white/70 leading-relaxed group-hover:text-white/80 group-focus:text-white/80 transition-colors max-w-xl">
|
||||
<p className="font-['Instrument_Sans'] text-base sm:text-xl text-white/70 leading-relaxed group-hover:text-white/80 transition-colors max-w-xl">
|
||||
{project.description}
|
||||
</p>
|
||||
</div>
|
||||
@ -524,7 +476,7 @@ export default function Home() {
|
||||
className="text-sm sm:text-base text-white/70 font-['Instrument_Sans'] tracking-wide py-1 sm:py-2 group-hover:text-white/80 transition-colors"
|
||||
>
|
||||
{tag}{tagIndex !== project.tags.length - 1 && (
|
||||
<span className="mx-3 sm:mx-4 text-white/20 select-none" aria-hidden="true">•</span>
|
||||
<span className="mx-3 sm:mx-4 text-white/20 select-none">•</span>
|
||||
)}
|
||||
</span>
|
||||
))}
|
||||
@ -532,13 +484,14 @@ export default function Home() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="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:border-white/5 transition-colors"></div>
|
||||
</div>
|
||||
</FadeIn>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer role="contentinfo" className="mt-20 sm:mt-32 bg-gradient-to-b from-white/[0.02] via-white/[0.03] to-white/[0.02] border-t border-white/[0.05]">
|
||||
<div className="max-w-screen-xl mx-auto px-4 sm:px-8 py-20 sm:py-32">
|
||||
@ -557,13 +510,13 @@ export default function Home() {
|
||||
<a
|
||||
href="mailto:jleibl@proton.me"
|
||||
className="group flex items-center gap-2 sm:gap-3 text-xl sm:text-4xl text-white/90 hover:text-white transition-colors"
|
||||
aria-label="Email me at jleibl@proton.me"
|
||||
>
|
||||
jleibl@proton.me
|
||||
<svg className="w-5 h-5 sm:w-8 sm:h-8 opacity-0 group-hover:opacity-100 transition-all -translate-x-4 group-hover:translate-x-0 duration-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
|
||||
<svg className="w-5 h-5 sm:w-8 sm:h-8 opacity-0 group-hover:opacity-100 transition-all -translate-x-4 group-hover:translate-x-0 duration-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M5 12h14M12 5l7 7-7 7"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</FadeIn>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user