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

fix: update Tailwind CSS and adjust related styles

Browse Source
This commit is contained in:
Jan-Marlon Leibl
2025-03-09 12:39:34 +01:00
parent 29a58817be
commit 0ab11c240c
11 changed files with 59 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/sections/About.tsx
View File

@ -31,20 +31,20 @@ const interests: Interest[] = [
export const About = () => {
return (
<section id="about" className="py-20 sm:py-40 px-4 sm:px-8 theme-bg-gradient">
<div className="max-w-screen-xl mx-auto">
<div className="max-w-(--breakpoint-xl) mx-auto">
<FadeIn>
<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 theme-primary">
About
</h2>
<div className="h-px flex-grow bg-white/10 relative top-[-4px]"></div>
<div className="h-px grow bg-white/10 relative top-[-4px]"></div>
</div>
</FadeIn>
<div className="grid md:grid-cols-[1fr,2fr] gap-12 sm:gap-24">
<div className="grid md:grid-cols-[1fr_2fr] gap-12 sm:gap-24">
<div className="space-y-6 sm:space-y-8">
<FadeIn>
<div className="aspect-square bg-gradient-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 className="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">
<Image
src="/profile-image.jpg"
alt="Jan-Marlon Leibl - Fullstack Software Developer"
@ -84,7 +84,7 @@ export const About = () => {
<h3 className="text-sm sm:text-base theme-text-40 uppercase tracking-[0.2em]">
Technologies
</h3>
<div className="h-px flex-grow theme-border"></div>
<div className="h-px grow theme-border"></div>
</div>
<ul className="space-y-4 sm:space-y-5">
{technologies.map((tech) => (
@ -104,7 +104,7 @@ export const About = () => {
<h3 className="text-sm sm:text-base theme-text-40 uppercase tracking-[0.2em]">
Interests
</h3>
<div className="h-px flex-grow theme-border"></div>
<div className="h-px grow theme-border"></div>
</div>
<ul className="space-y-4 sm:space-y-5">
{interests.map((interest) => (

2
src/components/sections/Hero.tsx
View File

@ -6,7 +6,7 @@ export const Hero = () => {
return (
<section className="min-h-[100dvh] flex items-center px-4 sm:px-8 relative pt-24 sm:pt-8">
<div className="absolute inset-0 theme-bg-gradient"></div>
<div className="max-w-screen-xl w-full relative pt-8 sm:pt-24">
<div className="max-w-(--breakpoint-xl) w-full relative pt-8 sm:pt-24">
<FadeIn className="space-y-8 sm:space-y-16">
<div className="space-y-6 sm:space-y-8">
<div className="space-y-6 sm:space-y-8">

12
src/components/sections/Work.tsx
View File

@ -107,8 +107,8 @@ const sortedProjects = [...projects].sort((a, b) => {
export const Work = () => {
return (
<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 theme-bg-gradient"></div>
<div className="max-w-screen-xl mx-auto relative">
<div className="absolute inset-0 bg-linear-to-b from-transparent via-white/[0.02] to-transparent pointer-events-none theme-bg-gradient"></div>
<div className="max-w-(--breakpoint-xl) mx-auto relative">
<FadeIn>
<div className="flex flex-col gap-3 mb-12 sm:mb-24">
<span className="theme-text-40 uppercase tracking-[0.2em] text-sm sm:text-base font-['Instrument_Sans']">
@ -118,7 +118,7 @@ export const Work = () => {
<h2 className="font-['DM_Sans'] text-3xl sm:text-6xl font-semibold tracking-tight theme-primary">
Selected Work
</h2>
<div className="h-px flex-grow theme-border"></div>
<div className="h-px grow theme-border"></div>
</div>
</div>
</FadeIn>
@ -131,10 +131,10 @@ export const Work = () => {
<div className="font-['Instrument_Sans'] text-sm sm:text-base theme-text-40 uppercase tracking-[0.2em] py-2 pr-4">
{project.year}
</div>
<div className="h-px flex-grow theme-border"></div>
<div className="h-px grow theme-border"></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">
<h3 className="font-['DM_Sans'] text-3xl sm:text-6xl font-semibold tracking-tight theme-primary group-hover:theme-text-90 transition-colors">
{project.title}
@ -153,7 +153,7 @@ export const Work = () => {
{project.tags.map((tag, tagIndex) => (
<span
key={tagIndex}
className="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-sm"
className="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"
>
<span className="mr-2 flex items-center">{tag.icon}</span>
{tag.name}