forked from jleibl/jleibl.net
style: update spacing and formatting in index.tsx
This commit is contained in:
@ -192,11 +192,11 @@ export default function Home() {
|
|||||||
</Head>
|
</Head>
|
||||||
|
|
||||||
<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-4 sm:py-4 flex 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" aria-label="Home">
|
||||||
JL
|
JL
|
||||||
</Link>
|
</Link>
|
||||||
<div className="flex items-center gap-6 sm:gap-12 text-base 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" aria-label="View my work">
|
||||||
Work
|
Work
|
||||||
</a>
|
</a>
|
||||||
@ -205,7 +205,7 @@ export default function Home() {
|
|||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
href="mailto:jleibl@proton.me"
|
href="mailto:jleibl@proton.me"
|
||||||
className="px-6 py-2.5 theme-accent theme-border hover:bg-white/[0.06] theme-transition"
|
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
|
||||||
@ -214,20 +214,20 @@ export default function Home() {
|
|||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<section className="min-h-[100dvh] flex items-center px-4 sm:px-8 relative">
|
<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="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-24">
|
<div className="max-w-screen-xl w-full relative pt-8 sm:pt-24">
|
||||||
<FadeIn className="space-y-12 sm:space-y-16">
|
<FadeIn className="space-y-8 sm:space-y-16">
|
||||||
<div className="space-y-8 sm:space-y-8">
|
<div className="space-y-6 sm:space-y-8">
|
||||||
<div className="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"></span>
|
||||||
<span className="theme-secondary uppercase tracking-[0.2em] 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-3">
|
<div className="space-y-2 sm:space-y-3">
|
||||||
<h2 className="font-['DM_Sans'] text-2xl 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-6xl sm:text-6xl md:text-7xl lg:text-8xl font-bold tracking-tight 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
|
Software Developer
|
||||||
<br />
|
<br />
|
||||||
<span className="theme-secondary">based in <GermanyText /></span>
|
<span className="theme-secondary">based in <GermanyText /></span>
|
||||||
@ -235,17 +235,17 @@ export default function Home() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p className="font-['Instrument_Sans'] theme-secondary text-xl sm:text-2xl max-w-2xl leading-relaxed tracking-wide theme-transition">
|
<p className="font-['Instrument_Sans'] theme-secondary text-lg sm:text-2xl max-w-2xl leading-relaxed tracking-wide 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 className="flex flex-wrap gap-4 sm:gap-4">
|
<div className="flex flex-col sm:flex-row gap-3 sm:gap-4">
|
||||||
<a
|
<a
|
||||||
href="#work"
|
href="#work"
|
||||||
className="flex-1 sm:flex-none text-center inline-flex items-center justify-center gap-2.5 px-8 py-4 bg-white text-black rounded-full hover:bg-white/90 transition-colors 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"
|
||||||
>
|
>
|
||||||
View My Work
|
View My Work
|
||||||
<svg
|
<svg
|
||||||
className="w-5 h-5 transform group-hover:translate-x-1 transition-transform"
|
className="w-4 h-4 sm:w-5 sm:h-5 transform group-hover:translate-x-1 transition-transform"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
fill="none"
|
fill="none"
|
||||||
stroke="currentColor"
|
stroke="currentColor"
|
||||||
@ -256,11 +256,11 @@ export default function Home() {
|
|||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
href="mailto:jleibl@proton.me"
|
href="mailto:jleibl@proton.me"
|
||||||
className="flex-1 sm:flex-none text-center inline-flex items-center justify-center gap-2.5 px-8 py-4 border border-white/10 rounded-full hover:bg-white/[0.05] transition-colors 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"
|
||||||
>
|
>
|
||||||
Get in Touch
|
Get in Touch
|
||||||
<svg
|
<svg
|
||||||
className="w-5 h-5 transform group-hover:translate-x-1 transition-transform"
|
className="w-4 h-4 sm:w-5 sm:h-5 transform group-hover:translate-x-1 transition-transform"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
fill="none"
|
fill="none"
|
||||||
stroke="currentColor"
|
stroke="currentColor"
|
||||||
@ -272,25 +272,25 @@ export default function Home() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-6 sm:gap-8 font-['Instrument_Sans'] text-base tracking-wide border-t border-white/10 pt-8 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-2.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-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.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"
|
||||||
>
|
>
|
||||||
jleibl@proton.me
|
jleibl@proton.me
|
||||||
<svg className="w-5 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">
|
||||||
<path d="M5 12h14M12 5l7 7-7 7"/>
|
<path d="M5 12h14M12 5l7 7-7 7"/>
|
||||||
</svg>
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div className="space-y-2.5 sm:space-y-2.5">
|
<div className="space-y-1.5 sm:space-y-2.5">
|
||||||
<span className="text-white/40 block uppercase tracking-[0.2em] text-sm">Role</span>
|
<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>
|
<span className="text-white/90">Fullstack Developer</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="space-y-2.5 sm:space-y-2.5">
|
<div className="space-y-1.5 sm:space-y-2.5">
|
||||||
<span className="text-white/40 block uppercase tracking-[0.2em] text-sm">Experience</span>
|
<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>
|
<span className="text-white/90">5+ Years</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -298,19 +298,19 @@ export default function Home() {
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section id="about" className="py-32 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">
|
||||||
<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-16 sm:mb-24">
|
<div className="flex items-baseline gap-4 mb-12 sm:mb-24">
|
||||||
<h2 className="font-['DM_Sans'] text-5xl sm:text-6xl font-semibold tracking-tight">About</h2>
|
<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 className="h-px flex-grow bg-white/10 relative top-[-4px]"></div>
|
||||||
</div>
|
</div>
|
||||||
</FadeIn>
|
</FadeIn>
|
||||||
|
|
||||||
<div className="grid md:grid-cols-[1fr,2fr] gap-16 sm:gap-24">
|
<div className="grid md:grid-cols-[1fr,2fr] gap-12 sm:gap-24">
|
||||||
<div className="space-y-8 sm:space-y-8">
|
<div className="space-y-6 sm:space-y-8">
|
||||||
<FadeIn>
|
<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">
|
<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
|
<Image
|
||||||
src="/profile-image.jpg"
|
src="/profile-image.jpg"
|
||||||
alt="Jan-Marlon Leibl - Fullstack Software Developer"
|
alt="Jan-Marlon Leibl - Fullstack Software Developer"
|
||||||
@ -322,35 +322,35 @@ export default function Home() {
|
|||||||
</div>
|
</div>
|
||||||
</FadeIn>
|
</FadeIn>
|
||||||
<FadeIn delay={0.1}>
|
<FadeIn delay={0.1}>
|
||||||
<div className="space-y-2.5">
|
<div className="space-y-2 text-center md:text-left">
|
||||||
<h3 className="font-['DM_Sans'] text-2xl font-medium">Jan-Marlon Leibl</h3>
|
<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-lg">Fullstack Developer</p>
|
<p className="font-['Instrument_Sans'] text-white/70 text-base sm:text-lg">Fullstack Developer</p>
|
||||||
</div>
|
</div>
|
||||||
</FadeIn>
|
</FadeIn>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<FadeIn delay={0.2}>
|
<FadeIn delay={0.2}>
|
||||||
<div className="space-y-12 sm:space-y-16 font-['Instrument_Sans']">
|
<div className="space-y-10 sm:space-y-16 font-['Instrument_Sans']">
|
||||||
<div className="space-y-8 sm:space-y-8">
|
<div className="space-y-6 sm:space-y-8">
|
||||||
<p className="text-2xl sm:text-2xl text-white/90 leading-relaxed">
|
<p className="text-xl sm:text-2xl text-white/90 leading-relaxed">
|
||||||
Hello! I'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.
|
Hello! I'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>
|
||||||
<p className="text-xl sm:text-xl text-white/70 leading-relaxed">
|
<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's possible on the web. My journey has led me from creating simple applications to developing complex systems used by thousands.
|
Today, I specialize in PHP and TypeScript development, constantly pushing the boundaries of what's possible on the web. My journey has led me from creating simple applications to developing complex systems used by thousands.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="grid grid-cols-2 gap-12 sm:gap-16">
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-10 sm:gap-16">
|
||||||
<div className="space-y-8 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-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"></div>
|
||||||
</div>
|
</div>
|
||||||
<ul className="space-y-5">
|
<ul className="space-y-4 sm:space-y-5">
|
||||||
{['PHP', 'JavaScript', 'MySQL', 'React'].map((tech) => (
|
{['PHP', 'JavaScript', 'MySQL', 'React'].map((tech) => (
|
||||||
<li
|
<li
|
||||||
key={tech}
|
key={tech}
|
||||||
className="text-lg 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"></span>
|
||||||
{tech}
|
{tech}
|
||||||
@ -359,12 +359,12 @@ export default function Home() {
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="space-y-8 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-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"></div>
|
||||||
</div>
|
</div>
|
||||||
<ul className="space-y-5">
|
<ul className="space-y-4 sm:space-y-5">
|
||||||
{[
|
{[
|
||||||
'Web Development',
|
'Web Development',
|
||||||
'System Architecture',
|
'System Architecture',
|
||||||
@ -373,7 +373,7 @@ export default function Home() {
|
|||||||
].map((interest) => (
|
].map((interest) => (
|
||||||
<li
|
<li
|
||||||
key={interest}
|
key={interest}
|
||||||
className="text-lg 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"></span>
|
||||||
{interest}
|
{interest}
|
||||||
@ -383,12 +383,12 @@ export default function Home() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="pt-8 sm:pt-8 flex gap-4 sm:gap-6">
|
<div className="pt-6 sm:pt-8 flex flex-col sm:flex-row gap-3 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"
|
||||||
className="flex-1 text-center px-8 py-4 border border-white/10 rounded-full hover:bg-white/[0.05] transition-colors 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"
|
||||||
>
|
>
|
||||||
View GitHub
|
View GitHub
|
||||||
</a>
|
</a>
|
||||||
@ -396,7 +396,7 @@ export default function Home() {
|
|||||||
href="https://www.linkedin.com/in/janmarlonleibl/"
|
href="https://www.linkedin.com/in/janmarlonleibl/"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
className="flex-1 text-center px-8 py-4 border border-white/10 rounded-full hover:bg-white/[0.05] transition-colors 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"
|
||||||
>
|
>
|
||||||
Connect on LinkedIn
|
Connect on LinkedIn
|
||||||
</a>
|
</a>
|
||||||
@ -407,20 +407,20 @@ export default function Home() {
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section id="work" className="py-32 sm:py-40 px-4 sm:px-8 relative">
|
<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="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">
|
<div className="max-w-screen-xl mx-auto relative">
|
||||||
<FadeIn>
|
<FadeIn>
|
||||||
<div className="flex flex-col gap-3 mb-16 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-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-5xl sm:text-6xl font-semibold tracking-tight">Selected Work</h2>
|
<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 className="h-px flex-grow bg-white/10"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</FadeIn>
|
</FadeIn>
|
||||||
|
|
||||||
<div className="grid gap-32 sm:gap-40">
|
<div className="grid gap-24 sm:gap-40">
|
||||||
{[
|
{[
|
||||||
{
|
{
|
||||||
title: 'ventry.host v2',
|
title: 'ventry.host v2',
|
||||||
@ -450,33 +450,33 @@ export default function Home() {
|
|||||||
<FadeIn key={index} delay={index * 0.1}>
|
<FadeIn key={index} delay={index * 0.1}>
|
||||||
<div className="group relative">
|
<div className="group relative">
|
||||||
<div className="absolute top-0 left-0 right-0 flex items-center gap-4">
|
<div className="absolute top-0 left-0 right-0 flex items-center gap-4">
|
||||||
<div className="font-['Instrument_Sans'] 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"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="pt-16 sm:pt-16 grid grid-cols-1 lg:grid-cols-[1.5fr,1fr] gap-8 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-6 sm:space-y-8">
|
<div className="space-y-4 sm:space-y-8">
|
||||||
<h3 className="font-['DM_Sans'] text-5xl 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/90 transition-colors">
|
||||||
{project.title}
|
{project.title}
|
||||||
</h3>
|
</h3>
|
||||||
<p className="font-['Instrument_Sans'] text-xl 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 transition-colors max-w-xl">
|
||||||
{project.description}
|
{project.description}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="space-y-8 sm:space-y-12">
|
<div className="space-y-6 sm:space-y-12">
|
||||||
<div className="space-y-5 sm:space-y-6">
|
<div className="space-y-4 sm:space-y-6">
|
||||||
<h4 className="font-['Instrument_Sans'] text-base text-white/40 uppercase tracking-[0.2em]">Technologies</h4>
|
<h4 className="font-['Instrument_Sans'] text-sm sm:text-base text-white/40 uppercase tracking-[0.2em]">Technologies</h4>
|
||||||
<div className="flex flex-wrap items-center gap-4 sm:gap-4">
|
<div className="flex flex-wrap items-center gap-3 sm:gap-4">
|
||||||
{project.tags.map((tag, tagIndex) => (
|
{project.tags.map((tag, tagIndex) => (
|
||||||
<span
|
<span
|
||||||
key={tagIndex}
|
key={tagIndex}
|
||||||
className="text-base text-white/70 font-['Instrument_Sans'] tracking-wide 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-4 sm:mx-4 text-white/20 select-none">•</span>
|
<span className="mx-3 sm:mx-4 text-white/20 select-none">•</span>
|
||||||
)}
|
)}
|
||||||
</span>
|
</span>
|
||||||
))}
|
))}
|
||||||
@ -485,7 +485,7 @@ export default function Home() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="absolute -inset-x-6 sm:-inset-x-8 -inset-y-6 rounded-3xl border border-white/0 group-hover:border-white/5 transition-colors"></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>
|
||||||
))}
|
))}
|
||||||
@ -493,26 +493,26 @@ export default function Home() {
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<footer role="contentinfo" className="mt-32 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-32 sm:py-32">
|
<div className="max-w-screen-xl mx-auto px-4 sm:px-8 py-20 sm:py-32">
|
||||||
<div className="grid gap-20 sm:gap-24">
|
<div className="grid gap-16 sm:gap-24">
|
||||||
<FadeIn>
|
<FadeIn>
|
||||||
<div className="text-center space-y-5">
|
<div className="text-center space-y-4 sm:space-y-5">
|
||||||
<h2 className="font-['DM_Sans'] text-6xl sm:text-7xl font-semibold tracking-tight">Let's Connect</h2>
|
<h2 className="font-['DM_Sans'] text-4xl sm:text-7xl font-semibold tracking-tight">Let's Connect</h2>
|
||||||
<p className="font-['Instrument_Sans'] text-white/70 text-xl sm:text-2xl max-w-2xl mx-auto">
|
<p className="font-['Instrument_Sans'] text-white/70 text-lg sm:text-2xl max-w-2xl mx-auto">
|
||||||
Always interested in new opportunities and collaborations.
|
Always interested in new opportunities and collaborations.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</FadeIn>
|
</FadeIn>
|
||||||
|
|
||||||
<FadeIn delay={0.1}>
|
<FadeIn delay={0.1}>
|
||||||
<div className="flex flex-col items-center gap-10 sm:gap-12">
|
<div className="flex flex-col items-center gap-8 sm:gap-12">
|
||||||
<a
|
<a
|
||||||
href="mailto:jleibl@proton.me"
|
href="mailto:jleibl@proton.me"
|
||||||
className="group flex items-center gap-3 text-3xl 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"
|
||||||
>
|
>
|
||||||
jleibl@proton.me
|
jleibl@proton.me
|
||||||
<svg className="hidden sm:block w-8 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">
|
||||||
<path d="M5 12h14M12 5l7 7-7 7"/>
|
<path d="M5 12h14M12 5l7 7-7 7"/>
|
||||||
</svg>
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
@ -521,8 +521,8 @@ export default function Home() {
|
|||||||
</FadeIn>
|
</FadeIn>
|
||||||
|
|
||||||
<FadeIn delay={0.2}>
|
<FadeIn delay={0.2}>
|
||||||
<div className="pt-8 sm:pt-12 text-center">
|
<div className="pt-6 sm:pt-12 text-center">
|
||||||
<p className="text-white/40 text-sm tracking-[0.1em]">
|
<p className="text-white/40 text-xs sm:text-sm tracking-[0.1em]">
|
||||||
© {new Date().getFullYear()} Jan-Marlon Leibl. All rights reserved.
|
© {new Date().getFullYear()} Jan-Marlon Leibl. All rights reserved.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user