diff --git a/README.md b/README.md
index b3b246b..1b7f411 100644
--- a/README.md
+++ b/README.md
@@ -125,6 +125,12 @@ Site icons live in `public/icons/`:
 
 To regenerate PNGs after editing the SVG: `npm run generate:icons` (requires `sharp` as a devDependency).
 
+## 🖼️ Social Share Image
+
+`public/images/og-image.png` is the Open Graph / Twitter Card image shown when a link to the site is shared. It's generated from `public/images/profile.jpg` plus the site's brand colors.
+
+To regenerate it after updating the profile photo or brand colors: `npm run generate:og-image` (requires `sharp` as a devDependency).
+
 ## 📝 Content Management
 
 - **Blog Posts**: Written in Markdown and stored in `content/blog/`
diff --git a/app/about/page.tsx b/app/about/page.tsx
index decd1c9..c23d35e 100644
--- a/app/about/page.tsx
+++ b/app/about/page.tsx
@@ -1,5 +1,7 @@
 import Image from 'next/image'
 import type { Metadata } from 'next'
+import { RoleTypewriter } from '@/components/RoleTypewriter'
+import { ScrollReveal } from '@/components/ScrollReveal'
 
 export const metadata: Metadata = {
   title: 'About',
@@ -16,7 +18,9 @@ export default function About() {
         <div className="max-w-6xl mx-auto">
           {/* Header section with role tag */}
           <div className="mb-12 fade-in-up">
-            <p className="text-sm text-accent mb-4 font-mono typewriter-cursor">PRODUCT MANAGER & SOFTWARE DESIGNER</p>
+            <p className="text-sm text-accent mb-4 font-mono typewriter-cursor">
+              <RoleTypewriter />
+            </p>
             <h1 className="text-6xl md:text-7xl font-bold mb-8">
               <span className="gradient-text">
                 Thomas Bohn
@@ -54,7 +58,8 @@ export default function About() {
             </div>
 
             {/* Right column - About content */}
-            <div className="prose prose-lg max-w-none fade-in-up fade-in-up-delay-2">
+            <div className="prose prose-lg max-w-none">
+              <ScrollReveal>
               <section className="mb-10">
                 <h2 className="text-2xl font-semibold mb-6 text-text-primary font-mono flex items-center gap-3">
                   <span className="text-accent-orange">{'⟩'}</span>
@@ -108,7 +113,9 @@ export default function About() {
                 </p>
               </div>
             </section>
+            </ScrollReveal>
 
+            <ScrollReveal>
             <section className="mb-10">
               <h2 className="text-2xl font-semibold mb-6 text-text-primary font-mono flex items-center gap-3">
                 <span className="text-accent-orange">{'⟩'}</span>
@@ -145,7 +152,9 @@ export default function About() {
                 </p>
               </div>
             </section>
+            </ScrollReveal>
 
+            <ScrollReveal>
             <section className="mb-10">
               <h2 className="text-2xl font-semibold mb-6 text-text-primary font-mono flex items-center gap-3">
                 <span className="text-accent-orange">{'⟩'}</span>
@@ -182,7 +191,9 @@ export default function About() {
                 </p>
               </div>
             </section>
+            </ScrollReveal>
 
+            <ScrollReveal>
             <section className="mb-10">
               <h2 className="text-2xl font-semibold mb-6 text-text-primary font-mono flex items-center gap-3">
                 <span className="text-accent-orange">{'⟩'}</span>
@@ -235,7 +246,9 @@ export default function About() {
                 </p>
               </div>
             </section>
+            </ScrollReveal>
 
+            <ScrollReveal>
             <section className="mb-10">
               <h2 className="text-2xl font-semibold mb-6 text-text-primary font-mono flex items-center gap-3">
                 <span className="text-accent-orange">{'⟩'}</span>
@@ -270,7 +283,9 @@ export default function About() {
                 </p>
               </div>
             </section>
+            </ScrollReveal>
 
+            <ScrollReveal>
             <section>
               <h2 className="text-2xl font-semibold mb-4 text-text-primary font-mono flex items-center gap-3">
                 <span className="text-accent-orange">{'⟩'}</span>
@@ -291,6 +306,7 @@ export default function About() {
                 Contact Me
               </a>
             </section>
+            </ScrollReveal>
           </div>
         </div>
         </div>
diff --git a/app/blog/[slug]/page.tsx b/app/blog/[slug]/page.tsx
index efe7041..25e5521 100644
--- a/app/blog/[slug]/page.tsx
+++ b/app/blog/[slug]/page.tsx
@@ -3,6 +3,8 @@ import { getBlogPost, getBlogPosts } from '@/lib/blog'
 import { notFound } from 'next/navigation'
 import Link from 'next/link'
 import { FaMedium } from 'react-icons/fa'
+import { ReadingProgressBar } from '@/components/blog/ReadingProgressBar'
+import { ShareButton } from '@/components/blog/ShareButton'
 
 export const dynamicParams = false
 
@@ -30,10 +32,11 @@ export default async function BlogPost({ params }: { params: Promise<{ slug: str
 
   return (
     <div className="container mx-auto px-4 py-12">
+      <ReadingProgressBar />
       <div className="max-w-6xl mx-auto">
         <div className="mb-8">
           <p className="text-sm text-accent mb-4 font-mono">{'>'} SOFTWARE ENGINEER</p>
-          <div className="flex items-center justify-between mb-6">
+          <div className="flex items-center justify-between mb-6 flex-wrap gap-3">
             <h1 className="text-2xl font-semibold text-text-primary font-mono">
               {'// BLOG'}
             </h1>
@@ -44,6 +47,7 @@ export default async function BlogPost({ params }: { params: Promise<{ slug: str
               >
                 ← Back to Blog
               </Link>
+              <ShareButton title={post.title} />
               {post.mediumUrl && (
                 <a
                   href={post.mediumUrl}
@@ -61,12 +65,16 @@ export default async function BlogPost({ params }: { params: Promise<{ slug: str
 
         <article className="prose prose-lg max-w-6xl">
           <div className="mb-4">
-            <p className="text-text-secondary text-sm">
-              {new Date(post.date).toLocaleDateString('en-US', {
-                year: 'numeric',
-                month: 'long',
-                day: 'numeric',
-              })}
+            <p className="text-text-secondary text-sm flex items-center gap-2">
+              <span>
+                {new Date(post.date).toLocaleDateString('en-US', {
+                  year: 'numeric',
+                  month: 'long',
+                  day: 'numeric',
+                })}
+              </span>
+              <span aria-hidden="true">&middot;</span>
+              <span>{post.readingTimeMinutes} min read</span>
             </p>
           </div>
           {post.title.includes(':') ? (
diff --git a/app/blog/page.tsx b/app/blog/page.tsx
index 3b51d3f..134f40d 100644
--- a/app/blog/page.tsx
+++ b/app/blog/page.tsx
@@ -2,6 +2,8 @@ import Link from 'next/link'
 import type { Metadata } from 'next'
 import { getBlogPosts } from '@/lib/blog'
 import { FaMedium } from 'react-icons/fa'
+import { RoleTypewriter } from '@/components/RoleTypewriter'
+import { ScrollReveal } from '@/components/ScrollReveal'
 
 export const metadata: Metadata = {
   title: 'Blog',
@@ -19,7 +21,9 @@ export default async function Blog() {
       <div className="container mx-auto px-4 py-12 relative z-10">
         <div className="max-w-6xl mx-auto">
           <div className="mb-12 fade-in-up">
-            <p className="text-sm text-accent mb-4 font-mono typewriter-cursor">PRODUCT MANAGER & SOFTWARE DESIGNER</p>
+            <p className="text-sm text-accent mb-4 font-mono typewriter-cursor">
+              <RoleTypewriter />
+            </p>
             <h1 className="text-2xl font-semibold mb-4 text-text-primary font-mono flex items-center gap-3">
               <span className="text-accent-orange">{'⟩'}</span>
               {'BLOG'}
@@ -37,10 +41,10 @@ export default async function Blog() {
               </p>
             </div>
           ) : (
-            <div className="space-y-8 fade-in-up fade-in-up-delay-1">
-              {posts.map((post) => (
+            <div className="space-y-8">
+              {posts.map((post, index) => (
+                <ScrollReveal key={post.slug} delayMs={Math.min(index, 4) * 80}>
                 <article
-                  key={post.slug}
                   className="glass-card shine-effect rounded-xl p-6 hover:border-accent transition-all"
                 >
                 <div className="flex items-start justify-between gap-4 mb-2">
@@ -73,12 +77,16 @@ export default async function Blog() {
                     </a>
                   )}
                 </div>
-                <p className="text-text-secondary text-sm mb-4">
-                  {new Date(post.date).toLocaleDateString('en-US', {
-                    year: 'numeric',
-                    month: 'long',
-                    day: 'numeric',
-                  })}
+                <p className="text-text-secondary text-sm mb-4 flex items-center gap-2">
+                  <span>
+                    {new Date(post.date).toLocaleDateString('en-US', {
+                      year: 'numeric',
+                      month: 'long',
+                      day: 'numeric',
+                    })}
+                  </span>
+                  <span aria-hidden="true">&middot;</span>
+                  <span>{post.readingTimeMinutes} min read</span>
                 </p>
                 <p className="text-text-secondary leading-loose">
                   {post.excerpt}
@@ -93,6 +101,7 @@ export default async function Blog() {
                   </svg>
                 </Link>
               </article>
+              </ScrollReveal>
             ))}
           </div>
         )}
diff --git a/app/certifications/page.tsx b/app/certifications/page.tsx
index a90e367..0e54dbd 100644
--- a/app/certifications/page.tsx
+++ b/app/certifications/page.tsx
@@ -2,6 +2,8 @@ import type { Metadata } from 'next'
 import { getLearningData } from '@/lib/hub'
 import { LearningSection } from '@/components/hub/LearningSection'
 import { LearningPageHeader } from '@/components/hub/LearningPageHeader'
+import { RoleTypewriter } from '@/components/RoleTypewriter'
+import { ScrollReveal } from '@/components/ScrollReveal'
 
 export const metadata: Metadata = {
   title: 'Certifications',
@@ -19,7 +21,9 @@ export default async function Certifications() {
       <div className="container mx-auto px-4 py-12 relative z-10">
         <div className="max-w-6xl mx-auto">
           <div className="mb-12 fade-in-up">
-            <p className="text-sm text-accent mb-4 font-mono typewriter-cursor">PRODUCT MANAGER & SOFTWARE DESIGNER</p>
+            <p className="text-sm text-accent mb-4 font-mono typewriter-cursor">
+              <RoleTypewriter />
+            </p>
             <div className="flex items-center justify-between mb-4">
               <h1 className="text-2xl font-semibold text-text-primary font-mono flex items-center gap-3">
                 <span className="text-accent-orange">{'⟩'}</span>
@@ -32,13 +36,13 @@ export default async function Certifications() {
             </p>
           </div>
 
-          <div className="fade-in-up fade-in-up-delay-1">
+          <ScrollReveal>
             <LearningSection
               education={learningData.education}
               accomplished={learningData.accomplished}
               planning={learningData.planning}
             />
-          </div>
+          </ScrollReveal>
         </div>
       </div>
     </>
diff --git a/app/contact/page.tsx b/app/contact/page.tsx
index 4a81905..c65d9ee 100644
--- a/app/contact/page.tsx
+++ b/app/contact/page.tsx
@@ -2,6 +2,8 @@
 
 import { useState } from 'react'
 import { FaLinkedin, FaEnvelope, FaCopy, FaCheck, FaLock } from 'react-icons/fa'
+import { RoleTypewriter } from '@/components/RoleTypewriter'
+import { ScrollReveal } from '@/components/ScrollReveal'
 
 export default function Contact() {
   const [copied, setCopied] = useState(false)
@@ -27,18 +29,21 @@ export default function Contact() {
       <div className="container mx-auto px-4 py-12 relative z-10">
         <div className="max-w-6xl mx-auto">
           <div className="mb-12 fade-in-up">
-            <p className="text-sm text-accent mb-4 font-mono typewriter-cursor">PRODUCT MANAGER & SOFTWARE DESIGNER</p>
+            <p className="text-sm text-accent mb-4 font-mono typewriter-cursor">
+              <RoleTypewriter />
+            </p>
             <h1 className="text-2xl font-semibold mb-4 text-text-primary font-mono flex items-center gap-3">
               <span className="text-accent-orange">{'⟩'}</span>
               {'CONTACT'}
             </h1>
 <p className="text-text-secondary leading-loose text-lg">
-            I'm always open to discussing new opportunities, technical challenges, or potential collaborations. Reach out through any of the channels below.
+            I&apos;m always open to discussing new opportunities, technical challenges, or potential collaborations. Reach out through any of the channels below.
           </p>
           </div>
 
-          <div className="space-y-6 fade-in-up fade-in-up-delay-1">
+          <div className="space-y-6">
             {/* Email Section */}
+            <ScrollReveal>
             <div className="glass-card shine-effect rounded-xl p-6">
               <div className="flex items-center gap-4 mb-4">
                 <div className="w-12 h-12 bg-gradient-to-br from-accent to-accent-hover rounded-xl flex items-center justify-center icon-bounce shadow-lg">
@@ -72,8 +77,10 @@ export default function Contact() {
               </svg>
             </a>
           </div>
+          </ScrollReveal>
 
           {/* LinkedIn Section */}
+          <ScrollReveal delayMs={100}>
           <div className="glass-card shine-effect rounded-xl p-6">
             <div className="flex items-center gap-4 mb-4">
               <div className="w-12 h-12 bg-gradient-to-br from-[#0077b5] to-[#005582] rounded-xl flex items-center justify-center icon-bounce shadow-lg">
@@ -97,8 +104,10 @@ export default function Contact() {
               </svg>
             </a>
           </div>
+          </ScrollReveal>
 
           {/* Other Section */}
+          <ScrollReveal delayMs={200}>
           <div className="glass-card rounded-xl p-6 border-l-4 border-l-accent-orange">
             <h2 className="text-2xl font-semibold mb-4 text-text-primary">More Ways to Connect</h2>
             <p className="text-text-secondary mb-4">
@@ -118,6 +127,7 @@ export default function Contact() {
               </p>
             </div>
           </div>
+          </ScrollReveal>
           </div>
         </div>
       </div>
diff --git a/app/layout.tsx b/app/layout.tsx
index 7d75af5..d5b915b 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -6,6 +6,7 @@ import { Header } from '@/components/Header'
 import { Footer } from '@/components/Footer'
 import { XangaShell } from '@/components/XangaShell'
 import { XangaLayoutWrapper } from '@/components/XangaLayoutWrapper'
+import { BackToTop } from '@/components/BackToTop'
 
 const openSans = Open_Sans({ 
   subsets: ['latin'],
@@ -36,11 +37,20 @@ export const metadata: Metadata = {
     url: 'https://thomaslbohn.com',
     siteName: 'Thomas Bohn',
     type: 'website',
+    images: [
+      {
+        url: '/images/og-image.png',
+        width: 1200,
+        height: 630,
+        alt: 'Thomas Bohn - Product Manager & Software Designer',
+      },
+    ],
   },
   twitter: {
-    card: 'summary',
+    card: 'summary_large_image',
     title: 'Thomas Bohn',
     description: 'Personal website and blog',
+    images: ['/images/og-image.png'],
   },
 }
 
@@ -84,14 +94,21 @@ export default function RootLayout({
         <meta name="referrer" content="strict-origin-when-cross-origin" />
       </head>
       <body className={`${openSans.className} ${openSans.variable}`} suppressHydrationWarning>
+        <a
+          href="#main-content"
+          className="sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 focus:z-[100] focus:rounded focus:bg-accent focus:px-4 focus:py-2 focus:text-white focus:shadow-lg"
+        >
+          Skip to content
+        </a>
         <ThemeProvider>
           <XangaLayoutWrapper>
             <div className="min-h-screen flex flex-col">
               <Header />
-              <main className="flex-grow">
+              <main id="main-content" className="flex-grow">
                 <XangaShell>{children}</XangaShell>
               </main>
               <Footer />
+              <BackToTop />
             </div>
           </XangaLayoutWrapper>
         </ThemeProvider>
diff --git a/app/page.tsx b/app/page.tsx
index da7d76a..91559fa 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,5 +1,7 @@
 import Image from 'next/image'
 import mediumHomepage from '@/data/medium-homepage.json'
+import { RoleTypewriter } from '@/components/RoleTypewriter'
+import { ScrollReveal } from '@/components/ScrollReveal'
 
 export default function Home() {
   const featuredMediumArticles = Array.isArray(mediumHomepage.featuredArticles)
@@ -19,7 +21,9 @@ export default function Home() {
       <div className="container mx-auto px-4 py-12 relative z-10">
         <div className="max-w-6xl mx-auto">
           {/* Role tag with fade-in animation */}
-          <p className="text-sm text-accent mb-4 font-mono fade-in-up typewriter-cursor">PRODUCT MANAGER & SOFTWARE DESIGNER</p>
+          <p className="text-sm text-accent mb-4 font-mono fade-in-up typewriter-cursor">
+            <RoleTypewriter />
+          </p>
           
           {/* Main content area - two column layout */}
           <div className="grid md:grid-cols-2 gap-12 mb-16">
@@ -85,7 +89,7 @@ export default function Home() {
         <hr className="gradient-divider fade-in-up fade-in-up-delay-2" />
 
         {/* Project Cards Section */}
-        <div className="mb-12 fade-in-up fade-in-up-delay-3">
+        <ScrollReveal className="mb-12">
           <h2 className="text-2xl font-bold mb-10 text-text-primary font-mono flex items-center gap-3">
             <span className="text-accent-orange">{'⟩'}</span>
             {'MY WORK'}
@@ -205,13 +209,13 @@ export default function Home() {
               </a>
             </div>
           </div>
-        </div>
+        </ScrollReveal>
 
         {/* Gradient Divider */}
-        <hr className="gradient-divider fade-in-up fade-in-up-delay-4" />
+        <hr className="gradient-divider" />
 
         {/* Dig Deeper Section */}
-        <div className="mb-8 fade-in-up fade-in-up-delay-4">
+        <ScrollReveal className="mb-8">
           <h2 className="text-2xl font-bold mb-8 text-text-primary font-mono flex items-center gap-3">
             <span className="text-accent-orange">{'⟩'}</span>
             {'DIG DEEPER'}
@@ -242,7 +246,7 @@ export default function Home() {
               Request VIP Access
             </a>
           </div>
-        </div>
+        </ScrollReveal>
         </div>
       </div>
     </>
diff --git a/app/projects/page.tsx b/app/projects/page.tsx
index 8de7e19..d5b8795 100644
--- a/app/projects/page.tsx
+++ b/app/projects/page.tsx
@@ -2,6 +2,8 @@ import type { Metadata } from 'next'
 import { getProjects } from '@/lib/projects'
 import { ProjectsSection } from '@/components/projects/ProjectsSection'
 import { ProjectsPageHeader } from '@/components/projects/ProjectsPageHeader'
+import { RoleTypewriter } from '@/components/RoleTypewriter'
+import { ScrollReveal } from '@/components/ScrollReveal'
 
 export const metadata: Metadata = {
   title: 'Projects',
@@ -19,7 +21,9 @@ export default async function Projects() {
       <div className="container mx-auto px-4 py-12 relative z-10">
         <div className="max-w-6xl mx-auto">
           <div className="mb-12 fade-in-up">
-            <p className="text-sm text-accent mb-4 font-mono typewriter-cursor">PRODUCT MANAGER & SOFTWARE DESIGNER</p>
+            <p className="text-sm text-accent mb-4 font-mono typewriter-cursor">
+              <RoleTypewriter />
+            </p>
             <div className="flex items-center justify-between mb-4">
               <h1 className="text-2xl font-semibold text-text-primary font-mono flex items-center gap-3">
                 <span className="text-accent-orange">{'⟩'}</span>
@@ -32,9 +36,9 @@ export default async function Projects() {
             </p>
           </div>
 
-          <div className="fade-in-up fade-in-up-delay-1">
+          <ScrollReveal>
             <ProjectsSection themes={projectsData.themes} />
-          </div>
+          </ScrollReveal>
         </div>
       </div>
     </>
diff --git a/components/BackToTop.tsx b/components/BackToTop.tsx
new file mode 100644
index 0000000..814975f
--- /dev/null
+++ b/components/BackToTop.tsx
@@ -0,0 +1,48 @@
+'use client'
+
+import { useCallback, useEffect, useState } from 'react'
+
+const SHOW_AFTER_PX = 400
+
+export function BackToTop() {
+  const [visible, setVisible] = useState(false)
+
+  useEffect(() => {
+    const handleScroll = () => setVisible(window.scrollY > SHOW_AFTER_PX)
+    handleScroll()
+    window.addEventListener('scroll', handleScroll, { passive: true })
+    return () => window.removeEventListener('scroll', handleScroll)
+  }, [])
+
+  const scrollToTop = useCallback(() => {
+    const prefersReducedMotion =
+      typeof window !== 'undefined' &&
+      window.matchMedia &&
+      window.matchMedia('(prefers-reduced-motion: reduce)').matches
+    window.scrollTo({ top: 0, behavior: prefersReducedMotion ? 'auto' : 'smooth' })
+  }, [])
+
+  return (
+    <button
+      type="button"
+      onClick={scrollToTop}
+      aria-label="Back to top"
+      title="Back to top"
+      className={`fixed bottom-6 right-6 z-40 flex h-11 w-11 items-center justify-center rounded-full border border-border bg-bg-primary text-accent shadow-lg transition-all duration-300 hover:bg-accent hover:text-white hover:border-accent focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent ${
+        visible
+          ? 'opacity-100 translate-y-0 pointer-events-auto'
+          : 'opacity-0 translate-y-4 pointer-events-none'
+      }`}
+    >
+      <svg
+        className="h-5 w-5"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+        aria-hidden="true"
+      >
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 15l7-7 7 7" />
+      </svg>
+    </button>
+  )
+}
diff --git a/components/Header.tsx b/components/Header.tsx
index 2e74a93..1fc87e1 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -1,5 +1,6 @@
 'use client'
 
+import { useEffect, useState } from 'react'
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 import { useTheme } from './ThemeProvider'
@@ -123,14 +124,76 @@ function LockIcon({ className }: { className?: string }) {
   )
 }
 
+// Desktop nav link with an animated underline indicator that grows in from
+// the center on hover, and stays put (in the accent color) on the active page.
+function DesktopNavLink({
+  href,
+  label,
+  isActive,
+  vip,
+}: {
+  href: string
+  label: string
+  isActive: boolean
+  vip?: boolean
+}) {
+  return (
+    <Link
+      href={href}
+      className={`group relative flex items-center gap-1.5 pb-1 transition-colors ${
+        isActive ? 'text-accent font-semibold' : 'text-text-secondary hover:text-accent-orange'
+      }`}
+      title={vip ? 'VIP Content - Login Required' : undefined}
+    >
+      {vip && <LockIcon className="opacity-60 group-hover:opacity-100 transition-opacity" />}
+      <span>{label}</span>
+      {vip && (
+        <span className="absolute -top-1 -right-1 text-[9px] font-bold text-accent-orange opacity-0 group-hover:opacity-100 transition-opacity">
+          VIP
+        </span>
+      )}
+      <span
+        aria-hidden="true"
+        className={`absolute -bottom-0.5 left-0 h-0.5 w-full origin-center scale-x-0 bg-accent-orange transition-transform duration-300 ease-out group-hover:scale-x-100 ${
+          isActive ? 'scale-x-100 bg-accent' : ''
+        }`}
+      />
+    </Link>
+  )
+}
+
+function HamburgerIcon({ open }: { open: boolean }) {
+  return (
+    <svg
+      className="h-5 w-5"
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+      aria-hidden="true"
+    >
+      {open ? (
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+      ) : (
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+      )}
+    </svg>
+  )
+}
+
 export function Header() {
   const pathname = usePathname()
   const { theme, setTheme } = useTheme()
   const layout = useXangaLayoutOptional()
-  
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+
   const isXanga = theme === 'xanga'
   const showCollapsedIcon = isXanga && layout !== null && layout.sidebarSide === 'hide'
 
+  // Close the mobile menu whenever the route changes (e.g. after tapping a link).
+  useEffect(() => {
+    setMobileMenuOpen(false)
+  }, [pathname])
+
   return (
     <header className="border-b border-border bg-bg-primary sticky top-0 z-50 backdrop-blur-sm bg-opacity-90">
       <div className="container mx-auto px-4 py-4">
@@ -145,17 +208,12 @@ export function Header() {
                 const isActive = pathname === item.href || 
                   (item.href !== '/' && pathname?.startsWith(item.href))
                 return (
-                  <Link
+                  <DesktopNavLink
                     key={item.href}
                     href={item.href}
-                    className={`transition-colors ${
-                      isActive
-                        ? 'text-accent font-semibold'
-                        : 'text-text-secondary hover:text-accent-orange'
-                    }`}
-                  >
-                    {item.label}
-                  </Link>
+                    label={item.label}
+                    isActive={isActive}
+                  />
                 )
               })}
               
@@ -167,22 +225,13 @@ export function Header() {
                 const isActive = pathname === item.href || 
                   (item.href !== '/' && pathname?.startsWith(item.href))
                 return (
-                  <Link
+                  <DesktopNavLink
                     key={item.href}
                     href={item.href}
-                    className={`group relative flex items-center gap-1.5 transition-colors ${
-                      isActive
-                        ? 'text-accent font-semibold'
-                        : 'text-text-secondary hover:text-accent-orange'
-                    }`}
-                    title="VIP Content - Login Required"
-                  >
-                    <LockIcon className="opacity-60 group-hover:opacity-100 transition-opacity" />
-                    <span>{item.label}</span>
-                    <span className="absolute -top-1 -right-1 text-[9px] font-bold text-accent-orange opacity-0 group-hover:opacity-100 transition-opacity">
-                      VIP
-                    </span>
-                  </Link>
+                    label={item.label}
+                    isActive={isActive}
+                    vip
+                  />
                 )
               })}
             </div>
@@ -220,83 +269,102 @@ export function Header() {
                 />
               )}
             </div>
+            {/* Hamburger toggle for mobile navigation */}
+            <button
+              type="button"
+              onClick={() => setMobileMenuOpen((open) => !open)}
+              aria-expanded={mobileMenuOpen}
+              aria-controls="mobile-nav"
+              aria-label={mobileMenuOpen ? 'Close menu' : 'Open menu'}
+              className="md:hidden relative w-9 h-9 flex items-center justify-center text-text-primary hover:bg-bg-secondary transition-colors"
+            >
+              <HamburgerIcon open={mobileMenuOpen} />
+            </button>
           </div>
         </nav>
-        {/* Mobile menu */}
-        <div className="md:hidden mt-4 pb-2">
-          <div className="flex flex-col gap-3">
-            {/* Public navigation items */}
-            <div className="flex flex-wrap justify-center gap-2">
-              {publicNavItems.map((item) => {
-                const isActive = pathname === item.href || 
-                  (item.href !== '/' && pathname?.startsWith(item.href))
-                return (
-                  <Link
-                    key={item.href}
-                    href={item.href}
-                    className={`px-4 py-1.5 rounded text-sm transition-colors flex-1 min-w-[70px] text-center ${
-                      isActive
-                        ? 'bg-accent text-white'
-                        : 'bg-bg-secondary text-text-secondary hover:bg-accent-orange hover:text-white'
-                    }`}
-                  >
-                    {item.label}
-                  </Link>
-                )
-              })}
-            </div>
-            
-            {/* Visual separator */}
-            <div className="flex items-center gap-2">
-              <div className="flex-1 h-px bg-border" aria-hidden="true" />
-              <span className="text-xs text-text-secondary/60 px-2">VIP</span>
-              <div className="flex-1 h-px bg-border" aria-hidden="true" />
-            </div>
-            
-            {/* VIP navigation items - Row 1: Hub, Links, V2ME */}
-            <div className="flex justify-center gap-2">
-              {vipNavItems.slice(0, 3).map((item) => {
-                const isActive = pathname === item.href || 
-                  (item.href !== '/' && pathname?.startsWith(item.href))
-                return (
-                  <Link
-                    key={item.href}
-                    href={item.href}
-                    className={`group relative px-3 py-1.5 rounded text-sm transition-colors flex items-center justify-center gap-1.5 flex-1 min-w-[70px] ${
-                      isActive
-                        ? 'bg-accent text-white'
-                        : 'bg-bg-secondary text-text-secondary hover:bg-accent-orange hover:text-white'
-                    }`}
-                    title="VIP Content - Login Required"
-                  >
-                    <LockIcon className={isActive ? 'opacity-100' : 'opacity-60'} />
-                    <span>{item.label}</span>
-                  </Link>
-                )
-              })}
-            </div>
-            
-            {/* VIP navigation items - Row 2: Learning, Projects */}
-            <div className="flex justify-center gap-2">
-              {vipNavItems.slice(3).map((item) => {
-                const isActive = pathname === item.href || 
-                  (item.href !== '/' && pathname?.startsWith(item.href))
-                return (
-                  <Link
-                    key={item.href}
-                    href={item.href}
-                    className={`group relative px-3 py-1.5 rounded text-sm transition-colors flex items-center justify-center gap-1.5 flex-1 min-w-[70px] ${
-                      isActive
-                        ? 'bg-accent text-white'
-                        : 'bg-bg-secondary text-text-secondary hover:bg-accent-orange hover:text-white'
-                    }`}
-                    title="VIP Content - Login Required"
-                  >
-                    <LockIcon className={isActive ? 'opacity-100' : 'opacity-60'} />
-                    <span>{item.label}</span>
-                  </Link>
-                )
-              })}
+
+        {/* Mobile menu - smoothly expands/collapses via the grid-rows trick (no JS height measuring needed) */}
+        <div
+          id="mobile-nav"
+          className={`md:hidden grid overflow-hidden transition-[grid-template-rows] duration-300 ease-in-out ${
+            mobileMenuOpen ? 'grid-rows-[1fr] mt-4' : 'grid-rows-[0fr]'
+          }`}
+        >
+          <div className="min-h-0 overflow-hidden">
+            <div className="flex flex-col gap-3 pb-2">
+              {/* Public navigation items */}
+              <div className="flex flex-wrap justify-center gap-2">
+                {publicNavItems.map((item) => {
+                  const isActive = pathname === item.href || 
+                    (item.href !== '/' && pathname?.startsWith(item.href))
+                  return (
+                    <Link
+                      key={item.href}
+                      href={item.href}
+                      className={`px-4 py-1.5 rounded text-sm transition-colors flex-1 min-w-[70px] text-center ${
+                        isActive
+                          ? 'bg-accent text-white'
+                          : 'bg-bg-secondary text-text-secondary hover:bg-accent-orange hover:text-white'
+                      }`}
+                    >
+                      {item.label}
+                    </Link>
+                  )
+                })}
+              </div>
+              
+              {/* Visual separator */}
+              <div className="flex items-center gap-2">
+                <div className="flex-1 h-px bg-border" aria-hidden="true" />
+                <span className="text-xs text-text-secondary/60 px-2">VIP</span>
+                <div className="flex-1 h-px bg-border" aria-hidden="true" />
+              </div>
+              
+              {/* VIP navigation items - Row 1: Hub, Links, V2ME */}
+              <div className="flex justify-center gap-2">
+                {vipNavItems.slice(0, 3).map((item) => {
+                  const isActive = pathname === item.href || 
+                    (item.href !== '/' && pathname?.startsWith(item.href))
+                  return (
+                    <Link
+                      key={item.href}
+                      href={item.href}
+                      className={`group relative px-3 py-1.5 rounded text-sm transition-colors flex items-center justify-center gap-1.5 flex-1 min-w-[70px] ${
+                        isActive
+                          ? 'bg-accent text-white'
+                          : 'bg-bg-secondary text-text-secondary hover:bg-accent-orange hover:text-white'
+                      }`}
+                      title="VIP Content - Login Required"
+                    >
+                      <LockIcon className={isActive ? 'opacity-100' : 'opacity-60'} />
+                      <span>{item.label}</span>
+                    </Link>
+                  )
+                })}
+              </div>
+              
+              {/* VIP navigation items - Row 2: Learning, Projects */}
+              <div className="flex justify-center gap-2">
+                {vipNavItems.slice(3).map((item) => {
+                  const isActive = pathname === item.href || 
+                    (item.href !== '/' && pathname?.startsWith(item.href))
+                  return (
+                    <Link
+                      key={item.href}
+                      href={item.href}
+                      className={`group relative px-3 py-1.5 rounded text-sm transition-colors flex items-center justify-center gap-1.5 flex-1 min-w-[70px] ${
+                        isActive
+                          ? 'bg-accent text-white'
+                          : 'bg-bg-secondary text-text-secondary hover:bg-accent-orange hover:text-white'
+                      }`}
+                      title="VIP Content - Login Required"
+                    >
+                      <LockIcon className={isActive ? 'opacity-100' : 'opacity-60'} />
+                      <span>{item.label}</span>
+                    </Link>
+                  )
+                })}
+              </div>
             </div>
           </div>
         </div>
diff --git a/components/RoleTypewriter.tsx b/components/RoleTypewriter.tsx
new file mode 100644
index 0000000..f455def
--- /dev/null
+++ b/components/RoleTypewriter.tsx
@@ -0,0 +1,89 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+// Cycles through prior roles before settling permanently on the final,
+// current role. The blinking cursor itself is rendered by the parent's
+// `typewriter-cursor` CSS class (see globals.css), so this component only
+// needs to manage the animated text.
+const ROLES = [
+  'PRODUCT MANAGER',
+  'PROGRAM MANAGER',
+  'SOFTWARE ENGINEER',
+  'SOLUTION ARCHITECT',
+  'PRODUCT MANAGER & SOFTWARE DESIGNER',
+] as const
+
+const FINAL_ROLE = ROLES[ROLES.length - 1]
+
+const TYPE_SPEED_MS = 55
+const DELETE_SPEED_MS = 32
+const PAUSE_AFTER_TYPE_MS = 1400
+const PAUSE_AFTER_DELETE_MS = 250
+
+type Phase = 'typing' | 'deleting'
+
+export function RoleTypewriter() {
+  const [roleIndex, setRoleIndex] = useState(0)
+  const [text, setText] = useState('')
+  const [phase, setPhase] = useState<Phase>('typing')
+  const [reducedMotion, setReducedMotion] = useState(false)
+
+  // Respect users who've asked for less motion - show the final role only.
+  useEffect(() => {
+    if (typeof window === 'undefined' || !window.matchMedia) return
+    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)')
+    setReducedMotion(mediaQuery.matches)
+    const handleChange = (event: MediaQueryListEvent) => setReducedMotion(event.matches)
+    mediaQuery.addEventListener('change', handleChange)
+    return () => mediaQuery.removeEventListener('change', handleChange)
+  }, [])
+
+  useEffect(() => {
+    if (reducedMotion) return
+
+    const isFinalRole = roleIndex === ROLES.length - 1
+    const currentRole = ROLES[roleIndex]
+
+    if (phase === 'typing') {
+      if (text.length < currentRole.length) {
+        const timer = setTimeout(
+          () => setText(currentRole.slice(0, text.length + 1)),
+          TYPE_SPEED_MS
+        )
+        return () => clearTimeout(timer)
+      }
+      // Fully typed. The final role stays on screen forever; earlier roles
+      // pause briefly, then get deleted to make room for the next one.
+      if (isFinalRole) return
+      const timer = setTimeout(() => setPhase('deleting'), PAUSE_AFTER_TYPE_MS)
+      return () => clearTimeout(timer)
+    }
+
+    // phase === 'deleting'
+    if (text.length > 0) {
+      const timer = setTimeout(
+        () => setText(currentRole.slice(0, text.length - 1)),
+        DELETE_SPEED_MS
+      )
+      return () => clearTimeout(timer)
+    }
+    const timer = setTimeout(() => {
+      setRoleIndex((index) => index + 1)
+      setPhase('typing')
+    }, PAUSE_AFTER_DELETE_MS)
+    return () => clearTimeout(timer)
+  }, [text, phase, roleIndex, reducedMotion])
+
+  if (reducedMotion) {
+    return <span>{FINAL_ROLE}</span>
+  }
+
+  return (
+    <span>
+      {/* Animated text is decorative; screen readers get the stable final role below. */}
+      <span aria-hidden="true">{text}</span>
+      <span className="sr-only">{FINAL_ROLE}</span>
+    </span>
+  )
+}
diff --git a/components/ScrollReveal.tsx b/components/ScrollReveal.tsx
new file mode 100644
index 0000000..00c8de9
--- /dev/null
+++ b/components/ScrollReveal.tsx
@@ -0,0 +1,69 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+
+interface ScrollRevealProps {
+  children: React.ReactNode
+  className?: string
+  /** Extra delay (ms) applied once the element enters the viewport - handy for staggering a list. */
+  delayMs?: number
+}
+
+// Fades + slides content into place the first time it scrolls into view,
+// rather than animating everything on mount (which meant content far below
+// the fold had already "finished" its entrance animation before a visitor
+// ever scrolled to it).
+export function ScrollReveal({ children, className = '', delayMs = 0 }: ScrollRevealProps) {
+  const ref = useRef<HTMLDivElement>(null)
+  const [visible, setVisible] = useState(false)
+
+  useEffect(() => {
+    const node = ref.current
+    if (!node) return
+
+    const prefersReducedMotion =
+      typeof window !== 'undefined' &&
+      window.matchMedia &&
+      window.matchMedia('(prefers-reduced-motion: reduce)').matches
+
+    if (typeof IntersectionObserver === 'undefined' || prefersReducedMotion) {
+      setVisible(true)
+      return
+    }
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setVisible(true)
+          observer.disconnect()
+        }
+      },
+      { threshold: 0.15, rootMargin: '0px 0px -60px 0px' }
+    )
+    observer.observe(node)
+
+    // Safety net: some capture/render paths (print preview, certain
+    // screenshot tools, instant/programmatic viewport resizes) never fire a
+    // scroll or intersection event. Never let content stay permanently
+    // hidden - reveal it unconditionally after a short delay if the user
+    // hasn't scrolled to it yet.
+    const fallbackTimer = setTimeout(() => setVisible(true), 2500)
+
+    return () => {
+      observer.disconnect()
+      clearTimeout(fallbackTimer)
+    }
+  }, [])
+
+  return (
+    <div
+      ref={ref}
+      className={`transition-all duration-700 ease-out ${
+        visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-6'
+      } ${className}`}
+      style={{ transitionDelay: visible ? `${delayMs}ms` : '0ms' }}
+    >
+      {children}
+    </div>
+  )
+}
diff --git a/components/ThemeProvider.tsx b/components/ThemeProvider.tsx
index 3a2094b..4409dd0 100644
--- a/components/ThemeProvider.tsx
+++ b/components/ThemeProvider.tsx
@@ -20,6 +20,10 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
     const savedTheme = localStorage.getItem('theme') as Theme | null
     if (savedTheme && (savedTheme === 'light' || savedTheme === 'dark' || savedTheme === 'xanga')) {
       setTheme(savedTheme)
+    } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      // No explicit choice saved yet - honor the OS/browser preference
+      // instead of always defaulting to light.
+      setTheme('dark')
     }
   }, [])
 
diff --git a/components/blog/ReadingProgressBar.tsx b/components/blog/ReadingProgressBar.tsx
new file mode 100644
index 0000000..77d2d84
--- /dev/null
+++ b/components/blog/ReadingProgressBar.tsx
@@ -0,0 +1,45 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+// Thin progress indicator pinned just under the sticky header, filling as
+// the reader scrolls through the article body.
+export function ReadingProgressBar() {
+  const [progress, setProgress] = useState(0)
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const scrollableHeight = document.documentElement.scrollHeight - window.innerHeight
+      if (scrollableHeight <= 0) {
+        setProgress(100)
+        return
+      }
+      const percent = (window.scrollY / scrollableHeight) * 100
+      setProgress(Math.min(100, Math.max(0, percent)))
+    }
+
+    handleScroll()
+    window.addEventListener('scroll', handleScroll, { passive: true })
+    window.addEventListener('resize', handleScroll)
+    return () => {
+      window.removeEventListener('scroll', handleScroll)
+      window.removeEventListener('resize', handleScroll)
+    }
+  }, [])
+
+  return (
+    <div
+      className="fixed top-0 left-0 z-[60] h-1 w-full bg-transparent"
+      role="progressbar"
+      aria-label="Reading progress"
+      aria-valuenow={Math.round(progress)}
+      aria-valuemin={0}
+      aria-valuemax={100}
+    >
+      <div
+        className="h-full bg-gradient-to-r from-accent-orange to-accent transition-[width] duration-150 ease-out"
+        style={{ width: `${progress}%` }}
+      />
+    </div>
+  )
+}
diff --git a/components/blog/ShareButton.tsx b/components/blog/ShareButton.tsx
new file mode 100644
index 0000000..ff09f36
--- /dev/null
+++ b/components/blog/ShareButton.tsx
@@ -0,0 +1,55 @@
+'use client'
+
+import { useState } from 'react'
+import { FaCheck, FaLink, FaShareAlt } from 'react-icons/fa'
+
+export function ShareButton({ title }: { title: string }) {
+  const [copied, setCopied] = useState(false)
+
+  const getUrl = () => (typeof window !== 'undefined' ? window.location.href : '')
+
+  const handleShare = async () => {
+    const url = getUrl()
+
+    if (typeof navigator !== 'undefined' && navigator.share) {
+      try {
+        await navigator.share({ title, url })
+        return
+      } catch {
+        // User cancelled the native share sheet, or it's unsupported for this
+        // context - fall back to copying the link instead.
+      }
+    }
+
+    try {
+      await navigator.clipboard.writeText(url)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    } catch (err) {
+      console.error('Failed to copy link:', err)
+    }
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={handleShare}
+      className="inline-flex items-center gap-2 px-4 py-2 bg-bg-secondary border border-border rounded-lg hover:bg-accent hover:text-white hover:border-accent transition-colors text-sm font-semibold"
+      title="Share this post"
+      aria-label="Share this post"
+    >
+      {copied ? (
+        <>
+          <FaCheck className="w-4 h-4" />
+          Link copied!
+        </>
+      ) : (
+        <>
+          <FaShareAlt className="w-4 h-4 hidden sm:block" />
+          <FaLink className="w-4 h-4 sm:hidden" />
+          Share
+        </>
+      )}
+    </button>
+  )
+}
diff --git a/components/hub/HubPageWrapper.tsx b/components/hub/HubPageWrapper.tsx
index bf95d9b..96b6297 100644
--- a/components/hub/HubPageWrapper.tsx
+++ b/components/hub/HubPageWrapper.tsx
@@ -4,6 +4,8 @@ import { useState } from 'react'
 import { HubSection } from './HubSection'
 import { HubSectionData } from '@/lib/hub'
 import { HubHeader } from './HubHeader'
+import { RoleTypewriter } from '@/components/RoleTypewriter'
+import { ScrollReveal } from '@/components/ScrollReveal'
 
 interface HubPageWrapperProps {
   sections: HubSectionData[]
@@ -48,7 +50,9 @@ export function HubPageWrapper({ sections }: HubPageWrapperProps) {
       <div className="container mx-auto px-4 py-12 relative z-10">
         <div className="max-w-6xl mx-auto">
           <div className="mb-8 fade-in-up">
-            <p className="text-sm text-accent mb-4 font-mono typewriter-cursor">PRODUCT MANAGER & SOFTWARE DESIGNER</p>
+            <p className="text-sm text-accent mb-4 font-mono typewriter-cursor">
+              <RoleTypewriter />
+            </p>
             <div className="flex items-center justify-between mb-3">
               <h1 className="text-2xl font-semibold text-text-primary font-mono flex items-center gap-3">
                 <span className="text-accent-orange">{'⟩'}</span>
@@ -61,15 +65,16 @@ export function HubPageWrapper({ sections }: HubPageWrapperProps) {
             </p>
           </div>
 
-          <div className="fade-in-up fade-in-up-delay-1">
-            {sections.map((section) => (
-              <HubSection
-                key={section.id}
-                title={section.title}
-                links={section.links}
-                isExpanded={expandedSections.has(section.id)}
-                onToggle={() => toggleSection(section.id)}
-              />
+          <div>
+            {sections.map((section, index) => (
+              <ScrollReveal key={section.id} delayMs={Math.min(index, 4) * 80}>
+                <HubSection
+                  title={section.title}
+                  links={section.links}
+                  isExpanded={expandedSections.has(section.id)}
+                  onToggle={() => toggleSection(section.id)}
+                />
+              </ScrollReveal>
             ))}
           </div>
         </div>
diff --git a/components/links/LinksPageWrapper.tsx b/components/links/LinksPageWrapper.tsx
index 256280d..fc812a0 100644
--- a/components/links/LinksPageWrapper.tsx
+++ b/components/links/LinksPageWrapper.tsx
@@ -4,6 +4,8 @@ import { useState } from 'react'
 import type { Link } from '@/lib/links'
 import { LinksHeader } from './LinksHeader'
 import { LinksSection } from './LinksSection'
+import { RoleTypewriter } from '@/components/RoleTypewriter'
+import { ScrollReveal } from '@/components/ScrollReveal'
 
 interface LinkSectionData {
   id: string
@@ -48,7 +50,9 @@ export function LinksPageWrapper({ sections }: LinksPageWrapperProps) {
       <div className="container mx-auto px-4 py-12 relative z-10">
         <div className="max-w-6xl mx-auto">
           <div className="mb-12 fade-in-up">
-            <p className="text-sm text-accent mb-4 font-mono typewriter-cursor">PRODUCT MANAGER & SOFTWARE DESIGNER</p>
+            <p className="text-sm text-accent mb-4 font-mono typewriter-cursor">
+              <RoleTypewriter />
+            </p>
             <div className="flex items-center justify-between mb-3">
               <h1 className="text-2xl font-semibold text-text-primary font-mono flex items-center gap-3">
                 <span className="text-accent-orange">{'⟩'}</span>
@@ -68,15 +72,16 @@ export function LinksPageWrapper({ sections }: LinksPageWrapperProps) {
               <p className="text-text-secondary text-sm">Links will be organized by category here.</p>
             </div>
           ) : (
-            <div className="fade-in-up fade-in-up-delay-1">
-              {sections.map((section) => (
-                <LinksSection
-                  key={section.id}
-                  title={section.title}
-                  links={section.links}
-                  isExpanded={expandedSections.has(section.id)}
-                  onToggle={() => toggleSection(section.id)}
-                />
+            <div>
+              {sections.map((section, index) => (
+                <ScrollReveal key={section.id} delayMs={Math.min(index, 4) * 80}>
+                  <LinksSection
+                    title={section.title}
+                    links={section.links}
+                    isExpanded={expandedSections.has(section.id)}
+                    onToggle={() => toggleSection(section.id)}
+                  />
+                </ScrollReveal>
               ))}
             </div>
           )}
diff --git a/components/v2me/V2MePageWrapper.tsx b/components/v2me/V2MePageWrapper.tsx
index 7ab16f8..3be6d14 100644
--- a/components/v2me/V2MePageWrapper.tsx
+++ b/components/v2me/V2MePageWrapper.tsx
@@ -11,6 +11,8 @@ import { MeasuresSection } from './MeasuresSection'
 import { ProgressBar } from './ProgressBar'
 import { DownloadUploadControls } from './DownloadUploadControls'
 import { V2MeHeader } from './V2MeHeader'
+import { RoleTypewriter } from '@/components/RoleTypewriter'
+import { ScrollReveal } from '@/components/ScrollReveal'
 
 interface V2MePageWrapperProps {
   initialData: V2MeData
@@ -130,7 +132,9 @@ export function V2MePageWrapper({ initialData }: V2MePageWrapperProps) {
       <div className="container mx-auto px-4 py-12 relative z-10">
         <div className="max-w-6xl mx-auto">
           <div className="mb-8 fade-in-up">
-            <p className="text-sm text-accent mb-4 font-mono typewriter-cursor">PRODUCT MANAGER & SOFTWARE DESIGNER</p>
+            <p className="text-sm text-accent mb-4 font-mono typewriter-cursor">
+              <RoleTypewriter />
+            </p>
             <div className="flex items-center justify-between mb-3">
               <h1 className="text-2xl font-semibold text-text-primary font-mono flex items-center gap-3">
                 <span className="text-accent-orange">{'⟩'}</span>
@@ -166,7 +170,7 @@ export function V2MePageWrapper({ initialData }: V2MePageWrapperProps) {
             className="hidden"
           />
 
-          <div className="fade-in-up fade-in-up-delay-1">
+          <ScrollReveal>
             <LearnMoreSection
               isExpanded={showLearnMore}
               onToggle={() => setShowLearnMore(!showLearnMore)}
@@ -210,7 +214,7 @@ export function V2MePageWrapper({ initialData }: V2MePageWrapperProps) {
                 onUpdate={updateMeasures}
               />
             </div>
-          </div>
+          </ScrollReveal>
         </div>
       </div>
     </>
diff --git a/lib/blog.ts b/lib/blog.ts
index 7a428dc..8726a05 100644
--- a/lib/blog.ts
+++ b/lib/blog.ts
@@ -48,6 +48,17 @@ export interface BlogPost {
   excerpt: string
   content: string
   mediumUrl?: string
+  readingTimeMinutes: number
+}
+
+// Average adult silent-reading speed. Used to estimate a "X min read" label
+// from the rendered HTML content (tags stripped before counting words).
+const WORDS_PER_MINUTE = 225
+
+function estimateReadingTimeMinutes(html: string): number {
+  const text = html.replace(/<[^>]*>/g, ' ')
+  const wordCount = text.split(/\s+/).filter(Boolean).length
+  return Math.max(1, Math.round(wordCount / WORDS_PER_MINUTE))
 }
 
 export async function getBlogPosts(): Promise<BlogPost[]> {
@@ -78,6 +89,7 @@ export async function getBlogPosts(): Promise<BlogPost[]> {
           excerpt,
           content: contentHtml,
           mediumUrl: data.mediumUrl,
+          readingTimeMinutes: estimateReadingTimeMinutes(contentHtml),
         }
       })
   )
@@ -113,5 +125,6 @@ export async function getBlogPost(slug: string): Promise<BlogPost | null> {
     excerpt,
     content: contentHtml,
     mediumUrl: data.mediumUrl,
+    readingTimeMinutes: estimateReadingTimeMinutes(contentHtml),
   }
 }
diff --git a/package.json b/package.json
index 65e61e6..8d388b3 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "export": "next build",
     "lint": "eslint .",
     "generate:icons": "node scripts/icons/generate-icons.js",
+    "generate:og-image": "node scripts/og-image/generate-og-image.js",
     "sync:medium": "node scripts/blog/sync-medium-content.js"
   },
   "dependencies": {
diff --git a/public/images/og-image.png b/public/images/og-image.png
new file mode 100644
index 0000000..28096a1
Binary files /dev/null and b/public/images/og-image.png differ
diff --git a/scripts/og-image/generate-og-image.js b/scripts/og-image/generate-og-image.js
new file mode 100644
index 0000000..d1993fc
--- /dev/null
+++ b/scripts/og-image/generate-og-image.js
@@ -0,0 +1,145 @@
+/**
+ * Generates a static 1200x630 Open Graph / Twitter share image at
+ * public/images/og-image.png, composed from the site's profile photo and
+ * brand colors (Tableau Color Blind palette, dark theme background).
+ *
+ * Run: node scripts/og-image/generate-og-image.js
+ * Requires: npm install sharp (devDependency)
+ */
+const path = require('path')
+const fs = require('fs')
+
+const projectRoot = path.resolve(__dirname, '../..')
+const profilePath = path.join(projectRoot, 'public', 'images', 'profile.jpg')
+const outPath = path.join(projectRoot, 'public', 'images', 'og-image.png')
+
+const WIDTH = 1200
+const HEIGHT = 630
+const PHOTO_SIZE = 360
+const PHOTO_CENTER_X = 950
+const PHOTO_CENTER_Y = HEIGHT / 2
+
+// Tableau Color Blind palette (matches app/globals.css dark theme).
+const COLORS = {
+  bgPrimary: '#0b1220',
+  bgSecondary: '#111a2e',
+  accentOrange: '#fc7d0b',
+  accentBlue: '#5fa2ce',
+  accentBlueDark: '#1170aa',
+  textPrimary: '#e5e7eb',
+  peach: '#ffbc79',
+}
+
+function buildBackgroundSvg() {
+  return `
+<svg width="${WIDTH}" height="${HEIGHT}" viewBox="0 0 ${WIDTH} ${HEIGHT}" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="${COLORS.bgPrimary}" />
+      <stop offset="100%" stop-color="${COLORS.bgSecondary}" />
+    </linearGradient>
+    <radialGradient id="nebula1" cx="15%" cy="20%" r="55%">
+      <stop offset="0%" stop-color="${COLORS.accentOrange}" stop-opacity="0.22" />
+      <stop offset="100%" stop-color="${COLORS.accentOrange}" stop-opacity="0" />
+    </radialGradient>
+    <radialGradient id="nebula2" cx="85%" cy="80%" r="60%">
+      <stop offset="0%" stop-color="${COLORS.accentBlue}" stop-opacity="0.18" />
+      <stop offset="100%" stop-color="${COLORS.accentBlue}" stop-opacity="0" />
+    </radialGradient>
+    <linearGradient id="nameGradient" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="${COLORS.textPrimary}" />
+      <stop offset="55%" stop-color="${COLORS.accentOrange}" />
+      <stop offset="100%" stop-color="${COLORS.accentBlue}" />
+    </linearGradient>
+    <linearGradient id="photoRing" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="${COLORS.accentOrange}" />
+      <stop offset="100%" stop-color="${COLORS.accentBlueDark}" />
+    </linearGradient>
+    <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
+      <feGaussianBlur stdDeviation="18" result="blur" />
+      <feMerge>
+        <feMergeNode in="blur" />
+        <feMergeNode in="SourceGraphic" />
+      </feMerge>
+    </filter>
+  </defs>
+
+  <rect width="${WIDTH}" height="${HEIGHT}" fill="url(#bg)" />
+  <rect width="${WIDTH}" height="${HEIGHT}" fill="url(#nebula1)" />
+  <rect width="${WIDTH}" height="${HEIGHT}" fill="url(#nebula2)" />
+
+  <!-- Subtle starfield -->
+  ${Array.from({ length: 40 })
+    .map(() => {
+      const x = Math.round(Math.random() * WIDTH)
+      const y = Math.round(Math.random() * HEIGHT)
+      const r = Math.random() < 0.7 ? 1 : 1.6
+      const opacity = (0.3 + Math.random() * 0.5).toFixed(2)
+      return `<circle cx="${x}" cy="${y}" r="${r}" fill="#ffffff" opacity="${opacity}" />`
+    })
+    .join('\n  ')}
+
+  <!-- Text block -->
+  <text x="80" y="245" font-family="DejaVu Sans Mono, monospace" font-size="24" letter-spacing="2"
+        fill="${COLORS.accentOrange}" font-weight="bold">PRODUCT MANAGER &amp; SOFTWARE DESIGNER</text>
+
+  <text x="76" y="335" font-family="DejaVu Sans, sans-serif" font-size="78" font-weight="bold"
+        fill="url(#nameGradient)">Thomas Bohn</text>
+
+  <text x="80" y="395" font-family="DejaVu Sans Mono, monospace" font-size="28" letter-spacing="1"
+        fill="${COLORS.accentBlue}">thomaslbohn.com</text>
+
+  <rect x="80" y="430" width="460" height="3" fill="url(#photoRing)" opacity="0.7" />
+
+  <!-- Photo frame / glow ring -->
+  <circle cx="${PHOTO_CENTER_X}" cy="${PHOTO_CENTER_Y}" r="${PHOTO_SIZE / 2 + 14}"
+          fill="none" stroke="url(#photoRing)" stroke-width="6" filter="url(#glow)" opacity="0.85" />
+</svg>`
+}
+
+async function main() {
+  let sharp
+  try {
+    sharp = require('sharp')
+  } catch {
+    console.error('sharp is required. Run: npm install sharp --save-dev')
+    process.exit(1)
+  }
+
+  if (!fs.existsSync(profilePath)) {
+    console.error('Profile photo not found at', profilePath)
+    process.exit(1)
+  }
+
+  const backgroundSvg = Buffer.from(buildBackgroundSvg())
+  const background = await sharp(backgroundSvg).png().toBuffer()
+
+  // Circular mask for the profile photo.
+  const circleMask = Buffer.from(
+    `<svg width="${PHOTO_SIZE}" height="${PHOTO_SIZE}"><circle cx="${PHOTO_SIZE / 2}" cy="${PHOTO_SIZE / 2}" r="${PHOTO_SIZE / 2}" fill="#fff" /></svg>`
+  )
+
+  const roundedPhoto = await sharp(profilePath)
+    .resize(PHOTO_SIZE, PHOTO_SIZE, { fit: 'cover' })
+    .composite([{ input: circleMask, blend: 'dest-in' }])
+    .png()
+    .toBuffer()
+
+  await sharp(background)
+    .composite([
+      {
+        input: roundedPhoto,
+        left: Math.round(PHOTO_CENTER_X - PHOTO_SIZE / 2),
+        top: Math.round(PHOTO_CENTER_Y - PHOTO_SIZE / 2),
+      },
+    ])
+    .png()
+    .toFile(outPath)
+
+  console.log('Wrote', outPath)
+}
+
+main().catch((err) => {
+  console.error(err)
+  process.exit(1)
+})