jank/jleibl.net
1
0
Fork 0
forked from jleibl/jleibl.net
Code Pull Requests Activity

feat: enhance accessibility and improve styling in Home page

Browse Source
This commit is contained in:
Jan-Marlon Leibl
2025-02-24 22:45:26 +01:00
parent 8483d22d68
commit c472800d10
1 changed files with 307 additions and 260 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
src/pages/index.tsx
View File

@ -137,9 +137,9 @@ export default function Home() {
.red .theme-primary { color: rgba(255, 0, 0, 0.9); } .red .theme-primary { color: rgba(255, 0, 0, 0.9); }
.gold .theme-primary { color: rgba(255, 204, 0, 0.9); } .gold .theme-primary { color: rgba(255, 204, 0, 0.9); }
.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(255, 0, 0, 0.7); }
.gold .theme-secondary { color: rgba(255, 204, 0, 0.6); } .gold .theme-secondary { color: rgba(255, 204, 0, 0.7); }
.black .theme-accent { background-color: rgba(255, 255, 255, 0.03); } .black .theme-accent { background-color: rgba(255, 255, 255, 0.03); }
.red .theme-accent { background-color: rgba(255, 0, 0, 0.03); } .red .theme-accent { background-color: rgba(255, 0, 0, 0.03); }
@ -152,6 +152,39 @@ export default function Home() {
.theme-transition { .theme-transition {
transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease; 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> `}</style>
<div className="min-h-screen theme-transition"> <div className="min-h-screen theme-transition">
<Head> <Head>
@ -191,21 +224,24 @@ export default function Home() {
<link rel="canonical" href="https://jleibl.net/" /> <link rel="canonical" href="https://jleibl.net/" />
</Head> </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"> <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"> <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" aria-label="Home"> <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">
JL JL
</Link> </Link>
<div className="flex items-center gap-4 sm:gap-12 text-sm sm:text-base tracking-wide"> <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" aria-label="View my work"> <a href="#work" className="theme-secondary hover:theme-primary theme-transition min-h-[44px] flex items-center" aria-label="View my work">
Work Work
</a> </a>
<a href="#about" className="theme-secondary hover:theme-primary theme-transition" aria-label="About me"> <a href="#about" className="theme-secondary hover:theme-primary theme-transition min-h-[44px] flex items-center" aria-label="About me">
About About
</a> </a>
<a <a
href="mailto:jleibl@proton.me" 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" 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"
aria-label="Contact me via email" aria-label="Contact me via email"
> >
Contact Contact
@ -214,20 +250,21 @@ export default function Home() {
</nav> </nav>
</header> </header>
<section className="min-h-[100dvh] flex items-center px-4 sm:px-8 relative pt-16 sm:pt-0"> <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">
<div className="absolute inset-0 bg-gradient-to-b from-white/[0.02] via-white/[0.01] to-transparent"></div> <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"> <div className="max-w-screen-xl w-full relative pt-8 sm:pt-24">
<FadeIn className="space-y-8 sm:space-y-16"> <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="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"> <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"></span> <span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" aria-hidden="true"></span>
<span className="theme-secondary uppercase tracking-[0.2em] text-xs sm:text-sm font-['Instrument_Sans']">Available for Work</span> <span className="theme-secondary uppercase tracking-[0.2em] text-xs sm:text-sm font-['Instrument_Sans']">Available for Work</span>
</div> </div>
<div className="space-y-2 sm:space-y-3"> <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> <h2 className="font-['DM_Sans'] text-xl sm:text-3xl theme-secondary tracking-wide font-medium theme-transition">Jan-Marlon Leibl</h2>
<div> <div>
<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"> <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">
Software Developer Software Developer
<br /> <br />
<span className="theme-secondary">based in <GermanyText /></span> <span className="theme-secondary">based in <GermanyText /></span>
@ -242,6 +279,7 @@ export default function Home() {
<a <a
href="#work" 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" 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 View My Work
<svg <svg
@ -250,6 +288,7 @@ export default function Home() {
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
strokeWidth="2" strokeWidth="2"
aria-hidden="true"
> >
<path d="M5 12h14M12 5l7 7-7 7"/> <path d="M5 12h14M12 5l7 7-7 7"/>
</svg> </svg>
@ -257,6 +296,7 @@ export default function Home() {
<a <a
href="mailto:jleibl@proton.me" 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" 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 Get in Touch
<svg <svg
@ -265,6 +305,7 @@ export default function Home() {
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
strokeWidth="2" strokeWidth="2"
aria-hidden="true"
> >
<path d="M5 12h14M12 5l7 7-7 7"/> <path d="M5 12h14M12 5l7 7-7 7"/>
</svg> </svg>
@ -278,9 +319,10 @@ export default function Home() {
<a <a
href="mailto:jleibl@proton.me" 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" 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 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"> <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">
<path d="M5 12h14M12 5l7 7-7 7"/> <path d="M5 12h14M12 5l7 7-7 7"/>
</svg> </svg>
</a> </a>
@ -298,12 +340,12 @@ export default function Home() {
</div> </div>
</section> </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"> <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">
<div className="max-w-screen-xl mx-auto"> <div className="max-w-screen-xl mx-auto">
<FadeIn> <FadeIn>
<div className="flex items-baseline gap-4 mb-12 sm:mb-24"> <div className="flex items-baseline gap-4 mb-12 sm:mb-24">
<h2 className="font-['DM_Sans'] text-3xl sm:text-6xl font-semibold tracking-tight">About</h2> <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]"></div> <div className="h-px flex-grow bg-white/10 relative top-[-4px]" aria-hidden="true"></div>
</div> </div>
</FadeIn> </FadeIn>
@ -344,15 +386,15 @@ export default function Home() {
<div className="space-y-6 sm:space-y-8"> <div className="space-y-6 sm:space-y-8">
<div className="flex items-baseline gap-4"> <div className="flex items-baseline gap-4">
<h3 className="text-sm sm:text-base text-white/40 uppercase tracking-[0.2em]">Technologies</h3> <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"></div> <div className="h-px flex-grow bg-white/10" aria-hidden="true"></div>
</div> </div>
<ul className="space-y-4 sm:space-y-5"> <ul className="space-y-4 sm:space-y-5" aria-label="Technologies I specialize in">
{['PHP', 'JavaScript', 'MySQL', 'React'].map((tech) => ( {['PHP', 'JavaScript', 'MySQL', 'React'].map((tech) => (
<li <li
key={tech} key={tech}
className="text-base sm:text-lg group flex items-center gap-3 hover:text-white/90 transition-colors cursor-default" 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"></span> <span className="w-2 h-2 rounded-full bg-white/40 group-hover:bg-white/90 transition-colors" aria-hidden="true"></span>
{tech} {tech}
</li> </li>
))} ))}
@ -362,9 +404,9 @@ export default function Home() {
<div className="space-y-6 sm:space-y-8"> <div className="space-y-6 sm:space-y-8">
<div className="flex items-baseline gap-4"> <div className="flex items-baseline gap-4">
<h3 className="text-sm sm:text-base text-white/40 uppercase tracking-[0.2em]">Interests</h3> <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"></div> <div className="h-px flex-grow bg-white/10" aria-hidden="true"></div>
</div> </div>
<ul className="space-y-4 sm:space-y-5"> <ul className="space-y-4 sm:space-y-5" aria-label="Professional interests">
{[ {[
'Web Development', 'Web Development',
'System Architecture', 'System Architecture',
@ -375,7 +417,7 @@ export default function Home() {
key={interest} key={interest}
className="text-base sm:text-lg group flex items-center gap-3 hover:text-white/90 transition-colors cursor-default" 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"></span> <span className="w-2 h-2 rounded-full bg-white/40 group-hover:bg-white/90 transition-colors" aria-hidden="true"></span>
{interest} {interest}
</li> </li>
))} ))}
@ -389,6 +431,7 @@ export default function Home() {
target="_blank" target="_blank"
rel="noopener noreferrer" 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" 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 View GitHub
</a> </a>
@ -397,6 +440,7 @@ export default function Home() {
target="_blank" target="_blank"
rel="noopener noreferrer" 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" 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 Connect on LinkedIn
</a> </a>
@ -407,15 +451,15 @@ export default function Home() {
</div> </div>
</section> </section>
<section id="work" className="py-20 sm:py-40 px-4 sm:px-8 relative"> <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"></div> <div className="absolute inset-0 bg-gradient-to-b from-transparent via-white/[0.02] to-transparent pointer-events-none" aria-hidden="true"></div>
<div className="max-w-screen-xl mx-auto relative"> <div className="max-w-screen-xl mx-auto relative">
<FadeIn> <FadeIn>
<div className="flex flex-col gap-3 mb-12 sm:mb-24"> <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> <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"> <div className="flex items-baseline gap-4">
<h2 className="font-['DM_Sans'] text-3xl sm:text-6xl font-semibold tracking-tight">Selected Work</h2> <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"></div> <div className="h-px flex-grow bg-white/10" aria-hidden="true"></div>
</div> </div>
</div> </div>
</FadeIn> </FadeIn>
@ -448,20 +492,24 @@ export default function Home() {
} }
].map((project, index) => ( ].map((project, index) => (
<FadeIn key={index} delay={index * 0.1}> <FadeIn key={index} delay={index * 0.1}>
<div className="group relative"> <div
<div className="absolute top-0 left-0 right-0 flex items-center gap-4"> 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="font-['Instrument_Sans'] text-sm sm:text-base text-white/40 uppercase tracking-[0.2em] py-2 pr-4"> <div className="font-['Instrument_Sans'] text-sm sm:text-base text-white/40 uppercase tracking-[0.2em] py-2 pr-4">
{project.year} {project.year}
</div> </div>
<div className="h-px flex-grow bg-white/10"></div> <div className="h-px flex-grow bg-white/10" aria-hidden="true"></div>
</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="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"> <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/90 transition-colors"> <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">
{project.title} {project.title}
</h3> </h3>
<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"> <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">
{project.description} {project.description}
</p> </p>
</div> </div>
@ -476,7 +524,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" 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 && ( {tag}{tagIndex !== project.tags.length - 1 && (
<span className="mx-3 sm:mx-4 text-white/20 select-none">•</span> <span className="mx-3 sm:mx-4 text-white/20 select-none" aria-hidden="true">•</span>
)} )}
</span> </span>
))} ))}
@ -484,14 +532,13 @@ export default function Home() {
</div> </div>
</div> </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> </div>
</FadeIn> </FadeIn>
))} ))}
</div> </div>
</div> </div>
</section> </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]"> <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"> <div className="max-w-screen-xl mx-auto px-4 sm:px-8 py-20 sm:py-32">
@ -510,13 +557,13 @@ export default function Home() {
<a <a
href="mailto:jleibl@proton.me" 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" 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 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"> <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">
<path d="M5 12h14M12 5l7 7-7 7"/> <path d="M5 12h14M12 5l7 7-7 7"/>
</svg> </svg>
</a> </a>
</div> </div>
</FadeIn> </FadeIn>