layout

app/layout.tsx

@@ -21,6 +21,9 @@ export const metadata: Metadata = {
   },
   description: "Technical problem solver's blog - practical insights and learning notes",
   metadataBase: new URL('https://mintel.me'),
+  icons: {
+    icon: '/favicon.svg',
+  },
 };
 
 export default function RootLayout({

src/components/Header.tsx

@@ -1,22 +1,61 @@
 'use client';
 
-import * as React from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+import Image from 'next/image';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
+import * as React from 'react';
+
+import IconWhite from '../assets/logo/Icon White Transparent.svg';
+import LogoBlack from '../assets/logo/Logo Black Transparent.svg';
 
 export const Header: React.FC = () => {
   const pathname = usePathname();
+  const [isScrolled, setIsScrolled] = React.useState(false);
+
+  React.useEffect(() => {
+    const handleScroll = () => {
+      setIsScrolled(window.scrollY > 20);
+    };
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
 
   const isActive = (path: string) => pathname === path;
 
   return (
     <header className="bg-white/80 backdrop-blur-md sticky top-0 z-50 border-b border-slate-50">
       <div className="narrow-container py-4 flex items-center justify-between">
-        <Link href="/" className="flex items-center gap-3 group">
-          <div className="w-10 h-10 bg-slate-900 rounded-xl flex items-center justify-center group-hover:bg-slate-800 group-hover:scale-105 transition-all duration-500 shadow-sm">
-            <span className="text-white text-lg font-bold">M</span>
+        <Link href="/" className="flex items-center gap-4 group">
+          <div className="flex items-center gap-3">
+            <div className="w-12 h-12 bg-black rounded-xl flex items-center justify-center group-hover:scale-105 transition-all duration-500 shadow-sm shrink-0">
+              <Image
+                src={IconWhite}
+                alt="Marc Mintel Icon"
+                width={32}
+                height={32}
+                className="w-8 h-8"
+              />
+            </div>
+            <AnimatePresence mode="wait">
+              {!isScrolled && (
+                <motion.div
+                  initial={{ opacity: 0, x: -10, width: 0 }}
+                  animate={{ opacity: 1, x: 0, width: 'auto' }}
+                  exit={{ opacity: 0, x: -10, width: 0 }}
+                  transition={{ duration: 0.3, ease: "easeOut" }}
+                  className="overflow-hidden flex items-center"
+                >
+                  <Image
+                    src={LogoBlack}
+                    alt="Marc Mintel"
+                    height={54}
+                    priority
+                  />
+                </motion.div>
+              )}
+            </AnimatePresence>
           </div>
-          <span className="text-slate-900 font-bold tracking-tighter text-2xl group-hover:tracking-tight transition-all duration-500">Marc Mintel</span>
         </Link>
         
         <nav className="flex items-center gap-8">

src/types/svg.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+  const content: any;
+  export default content;
+}