jleibl/jleibl.net
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: update styles for consistency and responsiveness

Browse Source
This commit is contained in:
Jan-Marlon Leibl
2025-03-10 11:34:57 +01:00
parent 93b5e3ae31
commit 8e95fa4937
9 changed files with 296 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

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