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

feat(blog): complete blog experience overhaul
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 5s
Details
Build & Deploy / 🧪 QA (push) Failing after 1m4s
Details
Build & Deploy / 🏗️ Build (push) Failing after 3m51s
Details
Build & Deploy / 🚀 Deploy (push) Has been skipped
Details
Build & Deploy / 🩺 Health Check (push) Has been skipped
Details
Build & Deploy / 🔔 Notify (push) Successful in 2s
Details

Browse Source 
- Implemented minimalist vertical teaser list (MediumCard)
- Consolidated and refined 20 engineering-focused blog posts
- Rebuilt blog overview with narrow, centered layout (max-w-3xl)
- Introduced BlogCommandBar for integrated search and tag filtering
- Consolidated tags to 6-8 core technical categories
- Redesigned blog detail pages with industrial 'Technical Frame' layout
- Added SectionHeader component for consistent industrial titling
- Optimized vertical space by removing redundant PageHeaders
This commit is contained in:
Marc Mintel
2026-02-15 18:52:48 +01:00
parent c1295546a6
commit 386a07aa53
36 changed files with 4141 additions and 688 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -82,48 +82,58 @@ export const Section: React.FC<SectionProps> = ({
<div className={cn("relative z-10", containerClass)}>
<div className="grid grid-cols-1 md:grid-cols-12 gap-12 md:gap-24">
{/* Sidebar: Number & Title */}
<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")}
{/* 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")}
</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>
)}
{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">
{illustration}
</div>
</Reveal>
)}
</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>
)}
{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">
{illustration}
</div>
</Reveal>
)}
</div>
</div>
</div>
)}
{/* Main Content */}
<div className="md:col-span-9">{children}</div>
<div
className={cn(
number || title || illustration
? "md:col-span-9"
: "md:col-span-12",
)}
>
{children}
</div>
</div>
</div>
</section>