Marco/einfach-produktiv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(About): photo overlaps text column with gradient blend

Browse Source
This commit is contained in:
Marco
2026-06-30 22:13:06 +00:00
parent 4dcf578b16
commit e5091d88f6
1 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/About.tsx
+6 -6
View File
@@ -2,8 +2,8 @@ export function About() {
return (
<section id="ueber-bjoern" className="bg-[#111] flex items-stretch w-full">
{/* Left: text content — flex-[1_0_0] = flex: 1 0 0, no shrink, exactly 50% */}
<div className="flex-[1_0_0] flex flex-col gap-4 justify-center px-[5rem] py-8 min-w-0">
{/* Left: text content — relative + z-10 so it renders above the overlapping photo */}
<div className="flex-[1_0_0] flex flex-col gap-4 justify-center px-[5rem] py-8 min-w-0 relative z-10">
{/* Large serif statement — width-constrained as per design */}
<p
@@ -57,15 +57,15 @@ export function About() {
</div>
</div>
{/* Right: author photo — slightly wider than 50% */}
<div className="flex-[1.4_0_0] relative overflow-hidden" style={{ minHeight: "14rem" }}>
{/* Right: author photo — overlaps text column via -ml-32, gradient covers the overlap */}
<div className="flex-[1.4_0_0] relative overflow-hidden -ml-32" style={{ minHeight: "14rem" }}>
<img
alt="Björn"
src="/about-author.jpg"
className="absolute inset-0 w-full h-full object-cover object-center pointer-events-none"
/>
{/* Left gradient: blends hard edge into dark background */}
<div className="absolute inset-y-0 left-0 w-48 bg-gradient-to-r from-[#111] to-transparent pointer-events-none" />
{/* Left gradient: wide enough to cover the text-column overlap */}
<div className="absolute inset-y-0 left-0 w-72 bg-gradient-to-r from-[#111] to-transparent pointer-events-none" />
</div>
</section>