feat: enhance components and layouts

- fix: prevent code components from growing width during animation
- feat: enforce 100% width on browser frames (CodeWindow)
- feat: remove "Zurück" links project-wide from PageHeader
- feat: enable imgproxy face detection support for about page avatar

apps/web/app/about/page.tsx

@@ -30,6 +30,7 @@ import {
   CodeSnippet,
   AbstractCircuit,
 } from "../../src/components/Effects";
+import { getImgproxyUrl } from "../../src/utils/imgproxy";
 import { Marker } from "../../src/components/Marker";
 
 export default function AboutPage() {
@@ -49,11 +50,15 @@ export default function AboutPage() {
 
                 <div className="relative w-40 h-40 rounded-full overflow-hidden border border-slate-200 shadow-xl bg-white p-1 group">
                   <div className="w-full h-full rounded-full overflow-hidden relative aspect-square">
-                    <Image
-                      src="/marc-mintel.png"
+                    <img
+                      src={getImgproxyUrl("/marc-mintel.png", {
+                        width: 400,
+                        height: 400,
+                        resizing_type: "fill",
+                        gravity: "sm",
+                      })}
                       alt="Marc Mintel"
-                      fill
-                      className="object-cover grayscale transition-all duration-1000 ease-in-out scale-110 group-hover:scale-100 group-hover:grayscale-0"
+                      className="object-cover grayscale transition-all duration-1000 ease-in-out scale-110 group-hover:scale-100 group-hover:grayscale-0 w-full h-full"
                     />
                   </div>
                 </div>
@@ -77,7 +82,6 @@ export default function AboutPage() {
                   </>
                 }
                 description="15 Jahre Erfahrung. Ein Ziel: Websites, die ihre Versprechen halten."
-                backLink={{ href: "/", label: "Zurück" }}
                 className="pt-0 md:pt-0"
               />
             </div>

apps/web/app/blog/[slug]/page.tsx

@@ -44,7 +44,6 @@ export default async function BlogPostPage({
         variant="blog"
         title={post.title}
         description={post.description}
-        backLink={{ href: "/blog", label: "Zurück zum Blog" }}
         backgroundSymbol={slug.charAt(0).toUpperCase()}
       />
 

apps/web/app/case-studies/page.tsx

@@ -22,7 +22,6 @@ export default function CaseStudiesPage() {
           </>
         }
         description="Ergebnisse statt Versprechen. Was ich gebaut habe und was es bewirkt."
-        backLink={{ href: "/", label: "Zurück" }}
         backgroundSymbol="C"
       />
 

apps/web/app/contact/page.tsx

@@ -18,7 +18,6 @@ export default function ContactPage() {
           </>
         }
         description="Beschreiben Sie kurz Ihr Vorhaben. Ich melde mich zeitnah bei Ihnen."
-        backLink={{ href: "/", label: "Zurück" }}
         backgroundSymbol="@"
       />
 

apps/web/app/websites/page.tsx

@@ -45,7 +45,6 @@ export default function WebsitesPage() {
           </>
         }
         description="Kein Baukasten. Kein Plugin-Chaos. Maßgeschneiderte Architektur für maximale Performance."
-        backLink={{ href: "/", label: "Zurück" }}
         backgroundSymbol="W"
       />
 

apps/web/src/components/Effects/CodeWindow.tsx

@@ -28,7 +28,7 @@ export const CodeWindow: React.FC<CodeWindowProps> = ({
   return (
     <div
       className={cn(
-        "relative rounded-xl border border-slate-100 bg-slate-50/50 backdrop-blur-sm overflow-hidden w-full max-w-[600px] mx-auto flex-shrink-0 flex flex-col",
+        "relative rounded-xl border border-slate-100 bg-slate-50/50 backdrop-blur-sm overflow-hidden w-full flex-shrink-0 flex flex-col",
         fixedHeight && "h-[400px]",
         className,
       )}

apps/web/src/components/PageHeader.tsx

@@ -1,6 +1,4 @@
 import * as React from "react";
-import { ArrowLeft } from "lucide-react";
-import Link from "next/link";
 import { Reveal } from "./Reveal";
 import { H1, LeadText } from "./Typography";
 import { cn } from "../utils/cn";
@@ -8,10 +6,6 @@ import { cn } from "../utils/cn";
 interface PageHeaderProps {
   title: React.ReactNode;
   description?: string;
-  backLink?: {
-    href: string;
-    label: string;
-  };
   backgroundSymbol?: string;
   className?: string;
   variant?: "default" | "blog";
@@ -20,7 +14,6 @@ interface PageHeaderProps {
 export const PageHeader: React.FC<PageHeaderProps> = ({
   title,
   description,
-  backLink,
   backgroundSymbol,
   className = "",
   variant = "default",
@@ -57,16 +50,6 @@ export const PageHeader: React.FC<PageHeaderProps> = ({
         />
       )}
 
-      {backLink && (
-        <Link
-          href={backLink.href}
-          className="inline-flex items-center gap-2 text-slate-400 hover:text-slate-900 mb-8 md:mb-12 transition-colors font-bold text-[10px] uppercase tracking-[0.4em] group"
-        >
-          <ArrowLeft className="w-3 h-3 group-hover:-translate-x-1 transition-transform" />{" "}
-          {backLink.label}
-        </Link>
-      )}
-
       <div
         className={cn("space-y-6 md:space-y-8 relative", isBlog && "max-w-7xl")}
       >

apps/web/src/components/Reveal.tsx

@@ -15,7 +15,7 @@ interface RevealProps {
 
 export const Reveal: React.FC<RevealProps> = ({
   children,
-  width = "fit-content",
+  width = "100%",
   delay = 0.25,
   className = "",
   direction = "up",

apps/web/src/utils/imgproxy.ts

@@ -58,7 +58,7 @@ export function getImgproxyUrl(
     width = 0,
     height = 0,
     resizing_type = "fit",
-    gravity = "sm",
+    gravity = "sm", // Default to smart gravity
     enlarge = false,
     extension = "",
   } = options;