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

2
src/components/layout/Footer.tsx
View File

@ -3,7 +3,7 @@ import { FadeIn } from '../ui/FadeIn';
export const Footer = () => {
return (
<footer role="contentinfo" className="mt-20 sm:mt-32 theme-bg-gradient border-t theme-border">
<div className="max-w-screen-xl mx-auto px-4 sm:px-8 py-20 sm:py-32">
<div className="max-w-(--breakpoint-xl) mx-auto px-4 sm:px-8 py-20 sm:py-32">
<div className="grid gap-16 sm:gap-24">
<FadeIn>
<div className="text-center space-y-4 sm:space-y-5">

2
src/components/layout/Header.tsx
View File

@ -28,7 +28,7 @@ export const Header = () => {
delay: 0.2
}}
>
<div className="max-w-screen-xl mx-auto">
<div className="max-w-(--breakpoint-xl) mx-auto">
<nav className="py-5 px-6 sm:px-8 flex justify-between items-center font-['DM_Sans']" role="navigation" aria-label="Main navigation">
<div className="flex items-center">
<Link href="/" className="flex items-center gap-2 group" aria-label="Home">

6
src/components/layout/MobileMenu.tsx
View File

@ -48,7 +48,7 @@ export const MobileMenu = () => {
{isOpen && (
<>
<motion.div
className="fixed inset-0 bg-black z-[90]"
className="fixed inset-0 bg-black z-90"
initial={{ opacity: 0 }}
animate={{ opacity: 0.95 }}
exit={{ opacity: 0 }}
@ -58,7 +58,7 @@ export const MobileMenu = () => {
/>
<motion.div
className="fixed top-0 bottom-0 right-0 w-full sm:w-80 z-[100] h-[100dvh]"
className="fixed top-0 bottom-0 right-0 w-full sm:w-80 z-100 h-[100dvh]"
ref={menuRef}
initial={{ x: "100%" }}
animate={{ x: 0 }}
@ -69,7 +69,7 @@ export const MobileMenu = () => {
style={{ backdropFilter: 'blur(16px)', WebkitBackdropFilter: 'blur(16px)' }}>
<motion.button
onClick={() => setIsOpen(false)}
className="absolute top-4 right-4 p-2 theme-accent rounded-lg theme-border z-[110]"
className="absolute top-4 right-4 p-2 theme-accent rounded-lg theme-border z-110"
aria-label="Close menu"
initial={{ opacity: 0, scale: 0.8 }}
animate={{ opacity: 1, scale: 1 }}

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}