mmintel/mintel.me
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases 1 Wiki Activity

feat: ultra-aggressive mobile spacing refinement & native fidelity navigation redesign

Browse Source
This commit is contained in:
Marc Mintel
2026-02-15 20:15:04 +01:00
parent 6244425551
commit cb32b9d62f
19 changed files with 722 additions and 376 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
apps/web/src/components/Section.tsx
View File

@@ -49,7 +49,7 @@ export const Section: React.FC<SectionProps> = ({
return (
<section
className={cn(
"relative py-24 md:py-40 group overflow-hidden",
"relative py-6 md:py-40 group overflow-hidden",
bgClass,
borderTopClass,
borderBottomClass,
@@ -81,41 +81,43 @@ export const Section: React.FC<SectionProps> = ({
{effects}
<div className={cn("relative z-10", containerClass)}>
<div className="grid grid-cols-1 md:grid-cols-12 gap-12 md:gap-24">
<div className="grid grid-cols-1 md:grid-cols-12 gap-4 md:gap-24">
{/* Sidebar: Number & Title (Only if provided) */}
{(number || title || illustration) && (
<div className="md:col-span-3">
<div className="md:sticky md:top-40 space-y-8">
{number && (
<Reveal delay={delay}>
<span className="block text-7xl md:text-8xl font-bold text-slate-100 leading-none select-none tracking-tighter relative">
{number}
{/* Subtle binary overlay on number */}
<span
className="absolute top-1 left-0 text-[8px] font-mono text-slate-200/30 tracking-wider leading-none select-none pointer-events-none"
aria-hidden="true"
>
{parseInt(number || "0")
.toString(2)
.padStart(8, "0")}
<div className="md:sticky md:top-40 flex flex-col gap-4 md:gap-8">
<div className="flex items-end md:flex-col md:items-start gap-6 md:gap-8">
{number && (
<Reveal delay={delay}>
<span className="block text-4xl md:text-8xl font-bold text-slate-100 leading-none select-none tracking-tighter relative">
{number}
{/* Subtle binary overlay on number */}
<span
className="absolute -top-1 md:top-1 left-0 text-[7px] md:text-[8px] font-mono text-slate-200/30 tracking-wider leading-none select-none pointer-events-none"
aria-hidden="true"
>
{parseInt(number || "0")
.toString(2)
.padStart(8, "0")}
</span>
</span>
</span>
</Reveal>
)}
{title && (
<Reveal delay={delay + 0.1}>
<div className="flex items-center gap-4">
{/* Animated dot indicator */}
<div className="w-1.5 h-1.5 rounded-full bg-slate-300 animate-circuit-pulse shrink-0" />
<Label className="text-slate-900 text-[10px] tracking-[0.4em]">
{title}
</Label>
</div>
</Reveal>
)}
</Reveal>
)}
{title && (
<Reveal delay={delay + 0.1}>
<div className="flex items-center gap-3 md:gap-4 mb-2 md:mb-0">
{/* Animated dot indicator */}
<div className="w-1.5 h-1.5 rounded-full bg-slate-300 animate-circuit-pulse shrink-0" />
<Label className="text-slate-900 text-[9px] md:text-[10px] tracking-[0.3em] md:tracking-[0.4em]">
{title}
</Label>
</div>
</Reveal>
)}
</div>
{illustration && (
<Reveal delay={delay + 0.2}>
<div className="pt-8 opacity-100 group-hover:scale-105 transition-transform duration-1000 ease-out origin-left grayscale hover:grayscale-0">
<div className="pt-2 md:pt-8 opacity-100 group-hover:scale-105 transition-transform duration-1000 ease-out origin-left grayscale hover:grayscale-0">
{illustration}
</div>
</Reveal>