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

style: update theme-secondary color opacity values

Browse Source
This commit is contained in:
Jan-Marlon Leibl
2025-02-24 22:50:59 +01:00
parent c472800d10
commit cd1281e7cf
1 changed files with 262 additions and 309 deletions
Download Patch File Download Diff File Expand all files Collapse all files

571
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.7); } .black .theme-secondary { color: rgba(255, 255, 255, 0.6); }
.red .theme-secondary { color: rgba(255, 0, 0, 0.7); } .red .theme-secondary { color: rgba(255, 0, 0, 0.6); }
.gold .theme-secondary { color: rgba(255, 204, 0, 0.7); } .gold .theme-secondary { color: rgba(255, 204, 0, 0.6); }
.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,39 +152,6 @@ 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>
@ -224,24 +191,21 @@ 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 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 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 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 Work
</a> </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 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 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" aria-label="Contact me via email"
> >
Contact Contact
@ -250,295 +214,284 @@ export default function Home() {
</nav> </nav>
</header> </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">
<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> </h1>
</h1>
</div>
</div> </div>
</div> </div>
<p className="font-['Instrument_Sans'] theme-secondary text-lg sm:text-2xl max-w-2xl leading-relaxed tracking-wide theme-transition"> </div>
Passionate about creating digital experiences, with a focus on PHP and modern web technologies. <p className="font-['Instrument_Sans'] theme-secondary text-lg sm:text-2xl max-w-2xl leading-relaxed tracking-wide theme-transition">
</p> Passionate about creating digital experiences, with a focus on PHP and modern web technologies.
<div className="flex flex-col sm:flex-row gap-3 sm:gap-4"> </p>
<a <div className="flex flex-col sm:flex-row gap-3 sm:gap-4">
href="#work" <a
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" href="#work"
aria-label="View my work portfolio" 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"
>
View My Work
<svg
className="w-4 h-4 sm:w-5 sm:h-5 transform group-hover:translate-x-1 transition-transform"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
> >
View My Work <path d="M5 12h14M12 5l7 7-7 7"/>
<svg </svg>
className="w-4 h-4 sm:w-5 sm:h-5 transform group-hover:translate-x-1 transition-transform" </a>
viewBox="0 0 24 24" <a
fill="none" href="mailto:jleibl@proton.me"
stroke="currentColor" 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"
strokeWidth="2" >
aria-hidden="true" Get in Touch
> <svg
<path d="M5 12h14M12 5l7 7-7 7"/> className="w-4 h-4 sm:w-5 sm:h-5 transform group-hover:translate-x-1 transition-transform"
</svg> viewBox="0 0 24 24"
</a> fill="none"
<a stroke="currentColor"
href="mailto:jleibl@proton.me" strokeWidth="2"
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 <path d="M5 12h14M12 5l7 7-7 7"/>
<svg </svg>
className="w-4 h-4 sm:w-5 sm:h-5 transform group-hover:translate-x-1 transition-transform" </a>
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
aria-hidden="true"
>
<path d="M5 12h14M12 5l7 7-7 7"/>
</svg>
</a>
</div>
</div> </div>
</div>
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4 sm:gap-8 font-['Instrument_Sans'] text-sm sm:text-base tracking-wide border-t border-white/10 pt-6 sm:pt-8"> <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 sm:gap-8 font-['Instrument_Sans'] text-sm sm:text-base tracking-wide border-t border-white/10 pt-6 sm:pt-8">
<div className="space-y-1.5 sm:space-y-2.5 group"> <div className="space-y-1.5 sm:space-y-2.5 group">
<span className="text-white/40 block uppercase tracking-[0.2em] text-xs sm:text-sm">Email</span> <span className="text-white/40 block uppercase tracking-[0.2em] text-xs sm:text-sm">Email</span>
<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>
</div>
<div className="space-y-1.5 sm:space-y-2.5">
<span className="text-white/40 block uppercase tracking-[0.2em] text-xs sm:text-sm">Role</span>
<span className="text-white/90">Fullstack Developer</span>
</div>
<div className="space-y-1.5 sm:space-y-2.5">
<span className="text-white/40 block uppercase tracking-[0.2em] text-xs sm:text-sm">Experience</span>
<span className="text-white/90">5+ Years</span>
</div>
</div> </div>
</FadeIn> <div className="space-y-1.5 sm:space-y-2.5">
</div> <span className="text-white/40 block uppercase tracking-[0.2em] text-xs sm:text-sm">Role</span>
</section> <span className="text-white/90">Fullstack Developer</span>
<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">
<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>
</div> </div>
</FadeIn> <div className="space-y-1.5 sm:space-y-2.5">
<span className="text-white/40 block uppercase tracking-[0.2em] text-xs sm:text-sm">Experience</span>
<div className="grid md:grid-cols-[1fr,2fr] gap-12 sm:gap-24"> <span className="text-white/90">5+ Years</span>
<div className="space-y-6 sm:space-y-8">
<FadeIn>
<div className="aspect-square bg-gradient-to-tr from-white/[0.05] to-white/[0.02] rounded-2xl overflow-hidden border border-white/[0.05] hover:border-white/10 transition-colors mx-auto md:mx-0 max-w-[280px] md:max-w-none">
<Image
src="/profile-image.jpg"
alt="Jan-Marlon Leibl - Fullstack Software Developer"
width={400}
height={400}
priority
className="object-cover w-full h-full hover:scale-105 transition-transform duration-700"
/>
</div>
</FadeIn>
<FadeIn delay={0.1}>
<div className="space-y-2 text-center md:text-left">
<h3 className="font-['DM_Sans'] text-xl sm:text-2xl font-medium">Jan-Marlon Leibl</h3>
<p className="font-['Instrument_Sans'] text-white/70 text-base sm:text-lg">Fullstack Developer</p>
</div>
</FadeIn>
</div> </div>
</div>
<FadeIn delay={0.2}> </FadeIn>
<div className="space-y-10 sm:space-y-16 font-['Instrument_Sans']"> </div>
<div className="space-y-6 sm:space-y-8"> </section>
<p className="text-xl sm:text-2xl text-white/90 leading-relaxed">
Hello! I&apos;m Jan-Marlon, but please call me Jan. I started my journey in programming at the age of 11 with C#, fascinated by a desktop application my friend created.
</p>
<p className="text-base sm:text-xl text-white/70 leading-relaxed">
Today, I specialize in PHP and TypeScript development, constantly pushing the boundaries of what&apos;s possible on the web. My journey has led me from creating simple applications to developing complex systems used by thousands.
</p>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-10 sm:gap-16"> <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="space-y-6 sm:space-y-8"> <div className="max-w-screen-xl mx-auto">
<div className="flex items-baseline gap-4"> <FadeIn>
<h3 className="text-sm sm:text-base text-white/40 uppercase tracking-[0.2em]">Technologies</h3> <div className="flex items-baseline gap-4 mb-12 sm:mb-24">
<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">About</h2>
</div> <div className="h-px flex-grow bg-white/10 relative top-[-4px]"></div>
<ul className="space-y-4 sm:space-y-5" aria-label="Technologies I specialize in"> </div>
{['PHP', 'JavaScript', 'MySQL', 'React'].map((tech) => ( </FadeIn>
<li
key={tech} <div className="grid md:grid-cols-[1fr,2fr] gap-12 sm:gap-24">
className="text-base sm:text-lg group flex items-center gap-3 hover:text-white/90 transition-colors cursor-default" <div className="space-y-6 sm:space-y-8">
> <FadeIn>
<span className="w-2 h-2 rounded-full bg-white/40 group-hover:bg-white/90 transition-colors" aria-hidden="true"></span> <div className="aspect-square bg-gradient-to-tr from-white/[0.05] to-white/[0.02] rounded-2xl overflow-hidden border border-white/[0.05] hover:border-white/10 transition-colors mx-auto md:mx-0 max-w-[280px] md:max-w-none">
{tech} <Image
</li> src="/profile-image.jpg"
))} alt="Jan-Marlon Leibl - Fullstack Software Developer"
</ul> width={400}
</div> height={400}
priority
<div className="space-y-6 sm:space-y-8"> className="object-cover w-full h-full hover:scale-105 transition-transform duration-700"
<div className="flex items-baseline gap-4"> />
<h3 className="text-sm sm:text-base text-white/40 uppercase tracking-[0.2em]">Interests</h3> </div>
<div className="h-px flex-grow bg-white/10" aria-hidden="true"></div> </FadeIn>
</div> <FadeIn delay={0.1}>
<ul className="space-y-4 sm:space-y-5" aria-label="Professional interests"> <div className="space-y-2 text-center md:text-left">
{[ <h3 className="font-['DM_Sans'] text-xl sm:text-2xl font-medium">Jan-Marlon Leibl</h3>
'Web Development', <p className="font-['Instrument_Sans'] text-white/70 text-base sm:text-lg">Fullstack Developer</p>
'System Architecture',
'UI/UX Design',
'Performance Optimization'
].map((interest) => (
<li
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>
{interest}
</li>
))}
</ul>
</div>
</div>
<div className="pt-6 sm:pt-8 flex flex-col sm:flex-row gap-3 sm:gap-6">
<a
href="https://github.com/AtomicWasTaken"
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>
<a
href="https://www.linkedin.com/in/janmarlonleibl/"
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>
</div>
</div> </div>
</FadeIn> </FadeIn>
</div> </div>
</div>
</section> <FadeIn delay={0.2}>
<div className="space-y-10 sm:space-y-16 font-['Instrument_Sans']">
<div className="space-y-6 sm:space-y-8">
<p className="text-xl sm:text-2xl text-white/90 leading-relaxed">
Hello! I&apos;m Jan-Marlon, but please call me Jan. I started my journey in programming at the age of 11 with C#, fascinated by a desktop application my friend created.
</p>
<p className="text-base sm:text-xl text-white/70 leading-relaxed">
Today, I specialize in PHP and TypeScript development, constantly pushing the boundaries of what&apos;s possible on the web. My journey has led me from creating simple applications to developing complex systems used by thousands.
</p>
</div>
<section id="work" className="py-20 sm:py-40 px-4 sm:px-8 relative" aria-labelledby="work-heading"> <div className="grid grid-cols-1 sm:grid-cols-2 gap-10 sm:gap-16">
<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="space-y-6 sm:space-y-8">
<div className="max-w-screen-xl mx-auto relative"> <div className="flex items-baseline gap-4">
<FadeIn> <h3 className="text-sm sm:text-base text-white/40 uppercase tracking-[0.2em]">Technologies</h3>
<div className="flex flex-col gap-3 mb-12 sm:mb-24"> <div className="h-px flex-grow bg-white/10"></div>
<span className="text-white/40 uppercase tracking-[0.2em] text-sm sm:text-base font-['Instrument_Sans']">Portfolio</span> </div>
<div className="flex items-baseline gap-4"> <ul className="space-y-4 sm:space-y-5">
<h2 id="work-heading" className="font-['DM_Sans'] text-3xl sm:text-6xl font-semibold tracking-tight">Selected Work</h2> {['PHP', 'JavaScript', 'MySQL', 'React'].map((tech) => (
<div className="h-px flex-grow bg-white/10" aria-hidden="true"></div> <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"></span>
{tech}
</li>
))}
</ul>
</div>
<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"></div>
</div>
<ul className="space-y-4 sm:space-y-5">
{[
'Web Development',
'System Architecture',
'UI/UX Design',
'Performance Optimization'
].map((interest) => (
<li
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"></span>
{interest}
</li>
))}
</ul>
</div>
</div>
<div className="pt-6 sm:pt-8 flex flex-col sm:flex-row gap-3 sm:gap-6">
<a
href="https://github.com/AtomicWasTaken"
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"
>
View GitHub
</a>
<a
href="https://www.linkedin.com/in/janmarlonleibl/"
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"
>
Connect on LinkedIn
</a>
</div> </div>
</div> </div>
</FadeIn> </FadeIn>
</div>
<div className="grid gap-24 sm:gap-40"> </div>
{[ </section>
{
title: 'ventry.host v2', <section id="work" className="py-20 sm:py-40 px-4 sm:px-8 relative">
year: '2025', <div className="absolute inset-0 bg-gradient-to-b from-transparent via-white/[0.02] to-transparent pointer-events-none"></div>
description: 'Free file hosting revamped with a modern design and improved user experience.', <div className="max-w-screen-xl mx-auto relative">
tags: ['Next.js', 'Tailwind CSS', 'TypeScript'] <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>
title: 'ventry.host', <div className="flex items-baseline gap-4">
year: '2023', <h2 className="font-['DM_Sans'] text-3xl sm:text-6xl font-semibold tracking-tight">Selected Work</h2>
description: 'A free file hosting solution with thousands of daily visitors.', <div className="h-px flex-grow bg-white/10"></div>
tags: ['PHP', 'JavaScript', 'MySQL'] </div>
}, </div>
{ </FadeIn>
title: 'ShareUpload',
year: '2022', <div className="grid gap-24 sm:gap-40">
description: 'High-performance file sharing platform with unlimited storage.', {[
tags: ['PHP', 'MySQL', 'Performance'] {
}, title: 'ventry.host v2',
{ year: '2025',
title: 'RestoreM', description: 'Free file hosting revamped with a modern design and improved user experience.',
year: '2023', tags: ['Next.js', 'Tailwind CSS', 'TypeScript']
description: 'Discord server backup and restoration service.', },
tags: ['PHP', 'MySQL', 'Discord API'] {
} title: 'ventry.host',
].map((project, index) => ( year: '2023',
<FadeIn key={index} delay={index * 0.1}> description: 'A free file hosting solution with thousands of daily visitors.',
<div tags: ['PHP', 'JavaScript', 'MySQL']
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}`} title: 'ShareUpload',
> year: '2022',
<div className="absolute top-0 left-0 right-0 flex items-center gap-4 px-4 sm:px-6"> description: 'High-performance file sharing platform with unlimited storage.',
<div className="font-['Instrument_Sans'] text-sm sm:text-base text-white/40 uppercase tracking-[0.2em] py-2 pr-4"> tags: ['PHP', 'MySQL', 'Performance']
{project.year} },
</div> {
<div className="h-px flex-grow bg-white/10" aria-hidden="true"></div> title: 'RestoreM',
year: '2023',
description: 'Discord server backup and restoration service.',
tags: ['PHP', 'MySQL', 'Discord API']
}
].map((project, index) => (
<FadeIn key={index} delay={index * 0.1}>
<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"></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/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 transition-colors max-w-xl">
{project.description}
</p>
</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-6 sm:space-y-12">
<div className="space-y-4 sm:space-y-8"> <div className="space-y-4 sm:space-y-6">
<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"> <h4 className="font-['Instrument_Sans'] text-sm sm:text-base text-white/40 uppercase tracking-[0.2em]">Technologies</h4>
{project.title} <div className="flex flex-wrap items-center gap-3 sm:gap-4">
</h3> {project.tags.map((tag, tagIndex) => (
<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"> <span
{project.description} key={tagIndex}
</p> 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"
</div> >
{tag}{tagIndex !== project.tags.length - 1 && (
<div className="space-y-6 sm:space-y-12"> <span className="mx-3 sm:mx-4 text-white/20 select-none">•</span>
<div className="space-y-4 sm:space-y-6"> )}
<h4 className="font-['Instrument_Sans'] text-sm sm:text-base text-white/40 uppercase tracking-[0.2em]">Technologies</h4> </span>
<div className="flex flex-wrap items-center gap-3 sm:gap-4"> ))}
{project.tags.map((tag, tagIndex) => (
<span
key={tagIndex}
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>
))}
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</FadeIn>
))} <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>
))}
</div> </div>
</section> </div>
</main> </section>
<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">
@ -557,13 +510,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" 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"/> <path d="M5 12h14M12 5l7 7-7 7"/>
</svg> </svg>
</a> </a>
</div> </div>
</FadeIn> </FadeIn>