diff --git a/.claude/launch.json b/.claude/launch.json
new file mode 100644
index 000000000..d954f43f3
--- /dev/null
+++ b/.claude/launch.json
@@ -0,0 +1,11 @@
+{
+  "version": "0.0.1",
+  "configurations": [
+    {
+      "name": "profile-dev",
+      "runtimeExecutable": "./node_modules/.bin/next",
+      "runtimeArgs": ["dev"],
+      "port": 3000
+    }
+  ]
+}
diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index e0bfecad8..040483440 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -1,9 +1,12 @@
-import dompurify from 'isomorphic-dompurify';
 import type {Metadata, NextPage} from 'next';
-import AboutMeHero from '../../components/AboutMeHero';
+import {BlurringImage} from '../../components/BlurringImage';
 import NextLink from '../../components/basic/NextLink';
+import CodingActivity from '../../components/home/CodingActivity';
+import SectionLabel from '../../components/SectionLabel';
+import {socialLinks} from '../../components/social/social-links';
 import {newCommonMetaTags} from '../../frontend-utils/meta-tags';
 import {getBlurringImage} from '../../utils/contentful.utils';
+import {createTranslation} from '../i18n/server';
 import {aboutMeData} from '@/models/static-content';
 
 export async function generateMetadata(): Promise<Metadata> {
@@ -14,61 +17,124 @@ export async function generateMetadata(): Promise<Metadata> {
 }
 
 const AboutMePage: NextPage = async () => {
+  const {t} = await createTranslation('home');
+  const {t: tResume} = await createTranslation('resume');
   const {
-    props: {aboutMeDetails, img, svg},
+    props: {paragraphs, img, svg},
   } = await getStaticProps();
+
   return (
-    <>
-      <AboutMeHero img={img} svg={svg} />
-      <main>
-        <article className="mb-20 pt-20" id="about-me-details">
-          <h1 className="text-2xl sm:text-3xl">About Carlo Gino Catapang</h1>
-          {aboutMeDetails.map(detail => {
-            return (
-              <section
-                className="flex flex-col items-center p-2 not-last:mb-4"
-                key={detail.key}
-              >
-                <h3 className="mb-4 text-xl">{detail.label}</h3>
-                <div
-                  className="max-w-(--breakpoint-md) px-4 text-justify"
-                  dangerouslySetInnerHTML={{
-                    __html: dompurify.sanitize(detail.content),
-                  }}
-                />
-              </section>
-            );
-          })}
+    <main className="mx-auto max-w-6xl px-5">
+      <div className="grid gap-12 py-12 sm:py-16 lg:grid-cols-[minmax(0,1fr)_280px]">
+        <article aria-labelledby="about-title" className="max-w-[680px]">
+          <SectionLabel as="p">{t('about.kicker')}</SectionLabel>
+          <h1
+            id="about-title"
+            className="m-0 text-left text-3xl leading-tight font-semibold tracking-tight sm:text-4xl"
+          >
+            {t('about.title')}
+          </h1>
+          <p className="m-0 mt-4 text-lg text-balance text-ink-muted">
+            {tResume('tagline')}
+          </p>
+
+          <div className="mt-8 flex flex-col gap-5 text-[1.0625rem] leading-[1.75]">
+            {paragraphs.map(paragraph => (
+              <p key={paragraph} className="m-0 text-[length:inherit]">
+                {paragraph}
+              </p>
+            ))}
+          </div>
         </article>
 
-        <section className="pb-8">
-          <h4 className="text-center">
-            Here is the link to my&nbsp;
-            <NextLink
-              href="https://github.com/pogicodes/profile"
-              target="_blank"
-              aria-label="Github Repo"
-              className="text-primary-900 dark:text-primary-300"
-            >
-              Github Repo
-            </NextLink>
-            .
-          </h4>
-        </section>
-      </main>
-    </>
+        <aside className="space-y-10 lg:sticky lg:top-20 lg:self-start">
+          <div className="relative aspect-square w-40 overflow-hidden rounded-xl ring-1 ring-line lg:w-full">
+            <BlurringImage
+              img={img}
+              svg={svg}
+              alt="Carlo Gino Catapang"
+              title="Carlo Gino Catapang"
+              fill
+              sizes="(min-width: 1024px) 280px, 160px"
+              priority
+              className="object-cover"
+            />
+          </div>
+
+          <section aria-labelledby="about-elsewhere">
+            <SectionLabel id="about-elsewhere">
+              {t('about.elsewhere')}
+            </SectionLabel>
+            <ul className="m-0 list-none space-y-1.5 p-0 font-mono text-sm">
+              {socialLinks.map(link => (
+                <li key={link.url}>
+                  <a
+                    href={link.url}
+                    target="_blank"
+                    rel="noreferrer"
+                    className="text-sm lowercase hover:text-accent"
+                  >
+                    {link.label} ↗
+                  </a>
+                </li>
+              ))}
+              <li>
+                <a
+                  href="mailto:carloginocatapang@gmail.com"
+                  className="text-sm hover:text-accent"
+                >
+                  email
+                </a>
+              </li>
+            </ul>
+          </section>
+
+          <section aria-labelledby="about-more">
+            <SectionLabel id="about-more">{t('about.seeAlso')}</SectionLabel>
+            <ul className="m-0 list-none space-y-1.5 p-0 font-mono text-sm">
+              <li>
+                <NextLink href="/resume" className="text-sm hover:text-accent">
+                  ~/resume
+                </NextLink>
+              </li>
+              <li>
+                <NextLink href="/blog" className="text-sm hover:text-accent">
+                  ~/blog
+                </NextLink>
+              </li>
+              <li>
+                <a
+                  href="https://github.com/pogicodes/profile"
+                  target="_blank"
+                  rel="noreferrer"
+                  className="text-sm lowercase hover:text-accent"
+                >
+                  {t('about.source')} ↗
+                </a>
+              </li>
+            </ul>
+          </section>
+        </aside>
+      </div>
+
+      <CodingActivity />
+    </main>
   );
 };
 
 const getStaticProps = async () => {
-  // Use local about me data instead of Contentful
-  const aboutMeDetails = aboutMeData.sort((a, b) => a.order - b.order);
+  // First-person bio; the third-person copy is kept in the data for reuse.
+  const bio = aboutMeData.find(item => item.key === 'about_me_long_1st_pov');
+  const paragraphs = (bio?.content ?? '')
+    .split(/\n\s*\n/)
+    .map(paragraph => paragraph.trim())
+    .filter(Boolean);
 
-  const {img, svg} = await getBlurringImage('batman_cover.png');
+  const {img, svg} = await getBlurringImage('profile_picture.jpg');
 
   return {
     props: {
-      aboutMeDetails,
+      paragraphs,
       img,
       svg,
     },
diff --git a/src/app/blog/BlogsWrapper.tsx b/src/app/blog/BlogsWrapper.tsx
index be9e5352b..85ec68bd7 100644
--- a/src/app/blog/BlogsWrapper.tsx
+++ b/src/app/blog/BlogsWrapper.tsx
@@ -1,12 +1,28 @@
 'use client';
 import {parseAsArrayOf, parseAsString, useQueryState} from 'next-usequerystate';
 import {useMemo} from 'react';
+import PostListItem from '../../components/blog/PostListItem';
 import {IBlogMetadata} from '../../models/mdxFiles';
 import BlogsFilter from '../../modules/blog/BlogsFilter';
-import BlogCard from '../../modules/common/ContentCard';
+import {useTranslation} from '../i18n/client';
 import SearchField from './SearchField';
 
+const groupByYear = (blogs: IBlogMetadata[]) =>
+  blogs.reduce<[string, IBlogMetadata[]][]>((groups, blog) => {
+    const year = String(new Date(blog.date).getFullYear());
+    const last = groups.at(-1);
+
+    if (last?.[0] === year) {
+      last[1].push(blog);
+    } else {
+      groups.push([year, [blog]]);
+    }
+
+    return groups;
+  }, []);
+
 const BlogsWrapper = ({blogs}: {blogs: IBlogMetadata[]}) => {
+  const {t} = useTranslation('blog');
   const [selectedTags, setSelectedTags] = useQueryState(
     'tags',
     parseAsArrayOf(parseAsString).withDefault([]),
@@ -14,73 +30,83 @@ const BlogsWrapper = ({blogs}: {blogs: IBlogMetadata[]}) => {
 
   const [search, setSearch] = useQueryState('search');
 
-  let filtered = blogs;
-
-  filtered = search
-    ? blogs.filter(blog => {
-        if (
-          blog.title.toLowerCase().includes(search.toLowerCase()) ||
-          blog.description.toLowerCase().includes(search.toLowerCase())
-        ) {
-          return true;
-        }
-      })
-    : blogs;
-
-  filtered = selectedTags.length
-    ? blogs.filter(blog => selectedTags.every(tag => blog.tags.includes(tag)))
-    : filtered;
+  const query = search?.toLowerCase();
+  const filtered = blogs.filter(
+    blog =>
+      (!query ||
+        blog.title.toLowerCase().includes(query) ||
+        blog.description.toLowerCase().includes(query)) &&
+      selectedTags.every(tag => blog.tags.includes(tag)),
+  );
 
   const tags = useMemo(() => {
-    const generatedTags = blogs.reduce((acc: Set<string>, blog) => {
-      blog.tags.forEach(tag => {
-        if (!acc.has(tag)) {
-          acc.add(tag);
-        }
-      });
+    const counts = new Map<string, number>();
+    blogs.forEach(blog =>
+      blog.tags.forEach(tag => counts.set(tag, (counts.get(tag) ?? 0) + 1)),
+    );
 
-      return acc;
-    }, new Set<string>());
-
-    return Array.from(generatedTags);
+    return [...counts.entries()]
+      .sort((a, b) => b[1] - a[1])
+      .map(([tag]) => tag);
   }, [blogs]);
 
   return (
     <>
-      <SearchField />
-      <br />
-      <BlogsFilter
-        tags={tags}
-        selectedTags={selectedTags}
-        handleTagClick={tag => {
-          setSelectedTags(prev => {
-            // If the tag is already selected, remove it from the selected tags
+      <div className="mt-8 space-y-3">
+        <SearchField />
+        <BlogsFilter
+          tags={tags}
+          selectedTags={selectedTags}
+          onClear={() => setSelectedTags(null)}
+          handleTagClick={tag => {
+            setSelectedTags(prev => {
+              if (prev.includes(tag)) {
+                return prev.length === 1 ? null : prev.filter(t => t !== tag);
+              }
 
-            if (prev.includes(tag)) {
-              return prev.length === 1 ? null : prev.filter(t => t !== tag);
-            }
+              return [...prev, tag];
+            });
+          }}
+        />
+      </div>
 
-            // Otherwise, add it to the selected tags
-            return [...prev, tag];
-          });
-        }}
-      />
       {filtered.length > 0 ? (
-        filtered.map(blog => {
-          return <BlogCard key={blog.slug} blog={blog} />;
-        })
+        groupByYear(filtered).map(([year, posts], groupIndex) => (
+          <section
+            key={year}
+            aria-labelledby={`year-${year}`}
+            className="mt-10 border-t border-line pt-6"
+          >
+            <h2
+              id={`year-${year}`}
+              className="m-0 mb-4 text-left font-mono text-sm font-medium text-ink-muted"
+            >
+              {year}
+            </h2>
+            <ol className="m-0 list-none divide-y divide-line p-0">
+              {posts.map((blog, index) => (
+                <li key={blog.slug} className="py-6 first:pt-0">
+                  <PostListItem
+                    blog={blog}
+                    priority={groupIndex === 0 && index === 0}
+                  />
+                </li>
+              ))}
+            </ol>
+          </section>
+        ))
       ) : (
-        <section className="flex flex-col items-center">
-          <h2>Empty result👎</h2>
-          <h3>Try a different combination</h3>
+        <section className="mt-10 border-t border-line pt-10 text-center">
+          <p className="m-0 text-ink-muted">{t('noResults')}</p>
           <button
-            className="mt-4 rounded-md bg-primary-600 px-4 py-2 text-white hover:bg-primary-700"
+            type="button"
+            className="mt-4 rounded-md border border-line px-4 py-2 text-sm hover:bg-panel"
             onClick={() => {
               setSelectedTags(null);
               setSearch(null);
             }}
           >
-            Reset
+            {t('reset')}
           </button>
         </section>
       )}
diff --git a/src/app/blog/SearchField.tsx b/src/app/blog/SearchField.tsx
index 6cdbe064c..a03337f38 100644
--- a/src/app/blog/SearchField.tsx
+++ b/src/app/blog/SearchField.tsx
@@ -2,6 +2,7 @@
 
 import {parseAsString, useQueryState} from 'next-usequerystate';
 import {useEffect, useState} from 'react';
+import {useTranslation} from '../i18n/client';
 import SearchIcon from '../assets/icons/search-icon';
 import CloseIcon from '../assets/icons/close-icon';
 
@@ -49,14 +50,15 @@ function DebouncedInput({
   return (
     <input
       {...props}
-      className="w-full rounded-md bg-transparent ring-1 ring-neutral-500 focus:outline-hidden dark:ring-neutral-200 md:pl-8"
-      value={value}
+      className="w-full rounded-md border border-line bg-canvas py-2 pr-9 pl-9 text-sm outline-none focus:border-accent [&::-webkit-search-cancel-button]:hidden"
+      value={value ?? ''}
       onChange={e => setValue(e.target.value)}
     />
   );
 }
 
 export default function SearchField() {
+  const {t} = useTranslation('blog');
   const [searchFilter, setSearchFilter] = useQueryState(
     'search',
     parseAsString
@@ -77,10 +79,12 @@ export default function SearchField() {
   };
 
   return (
-    <div className="relative flex w-96 items-center">
-      <SearchIcon className="absolute ml-2 size-4 text-neutral-600  dark:text-neutral-200" />
+    <div className="relative flex w-full items-center">
+      <SearchIcon className="pointer-events-none absolute left-3 size-4 text-ink-muted" />
       <DebouncedInput
-        placeholder="Filter by title or description"
+        type="search"
+        aria-label={t('search')}
+        placeholder={t('search')}
         value={searchFilter}
         onChange={handleGlobalFilterChange}
       />
@@ -88,12 +92,12 @@ export default function SearchField() {
         <button
           type="button"
           aria-label="Clear search"
-          className="absolute right-0 mr-2 flex size-4"
+          className="absolute right-3 flex size-4 text-ink-muted hover:text-ink"
           onClick={() => {
             setSearchFilter(null);
           }}
         >
-          <CloseIcon className="text-red-600 dark:text-neutral-200 " />
+          <CloseIcon />
         </button>
       )}
     </div>
diff --git a/src/app/blog/[slug]/page.tsx b/src/app/blog/[slug]/page.tsx
index ebeeed66f..5c5119c2c 100644
--- a/src/app/blog/[slug]/page.tsx
+++ b/src/app/blog/[slug]/page.tsx
@@ -1,10 +1,10 @@
 import {getBlogBanner} from '@/data/blog-asset';
 import {newCommonMetaTags} from '@/frontend-utils/meta-tags';
 import type {IBlogMetadata} from '@/models/mdxFiles';
-import BlogContent from '@/modules/blog/BlogContent';
+import {renderBlog} from '@/modules/blog/BlogContent';
 import BlogFooter from '@/modules/blog/BlogFooter';
 import BlogHeader from '@/modules/blog/BlogHeader';
-import BlogLayout from '@/modules/common/ContentLayout';
+import OnThisPage from '@/modules/blog/OnThisPage';
 import {blurImage} from '@/utils/image-blur.utils';
 import {BLOGS_PATH, getBlogsMetadata} from '@/utils/mdx.utils';
 import fs from 'fs';
@@ -57,9 +57,10 @@ const BlogPage: NextPage<{
     img,
     svg,
     content,
-    scope,
   } = await getStaticProps(param.slug);
 
+  const {Content, toc} = await renderBlog(content);
+
   if (!blog) {
     return (
       <div className="h-[80vh] w-full bg-transparent pt-10 text-center">
@@ -93,18 +94,39 @@ const BlogPage: NextPage<{
         }}
       />
 
-      <main role="main">
-        <BlogLayout>
-          <BlogHeader blog={blog} img={img} svg={svg} />
-          <BlogContent content={content} scope={scope} />
-          <br />
-          <BlogFooter blog={blog} />
-        </BlogLayout>
+      <main className="mx-auto max-w-6xl px-5 py-10 lg:py-14">
+        <div className="lg:grid lg:grid-cols-[minmax(0,1fr)_220px] lg:gap-16">
+          <div className="max-w-[720px] min-w-0">
+            <BlogHeader
+              blog={blog}
+              readingMinutes={readingMinutes(content)}
+              img={img}
+              svg={svg}
+            />
+            <div className="mt-10 lg:hidden">
+              <OnThisPage toc={toc} variant="inline" />
+            </div>
+            <article className="prose-blog mt-10 lg:mt-12">
+              <Content />
+            </article>
+            <BlogFooter blog={blog} />
+          </div>
+          <aside className="hidden lg:block">
+            <div className="sticky top-24 max-h-[calc(100vh-8rem)] overflow-y-auto">
+              <OnThisPage toc={toc} variant="sidebar" />
+            </div>
+          </aside>
+        </div>
       </main>
     </>
   );
 };
 
+const WORDS_PER_MINUTE = 220;
+
+const readingMinutes = (content: string) =>
+  Math.max(1, Math.round(content.split(/\s+/).length / WORDS_PER_MINUTE));
+
 const getStaticProps = async (slug: string) => {
   const postFilePath = path.join(BLOGS_PATH, `${slug}.mdx`);
   const source = fs.readFileSync(postFilePath);
@@ -119,7 +141,6 @@ const getStaticProps = async (slug: string) => {
 
   return {
     content,
-    scope: data,
     frontMatter: {
       ...data,
       slug,
diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx
index ded2f7271..d5e8ad19c 100644
--- a/src/app/blog/page.tsx
+++ b/src/app/blog/page.tsx
@@ -1,3 +1,4 @@
+import SectionLabel from '@/components/SectionLabel';
 import SubscribeForm from '@/components/SubscribeForm';
 import {newCommonMetaTags} from '@/frontend-utils/meta-tags';
 import type {IBlogMetadata} from '@/models/mdxFiles';
@@ -17,15 +18,35 @@ async function BlogPage() {
     props: {blogs},
   } = await getStaticProps();
   const {t} = await createTranslation('blog');
+  const {t: tNewsletter} = await createTranslation('newsletter');
 
   return (
-    <>
-      <main className="flex flex-col items-center sm:pt-12">
-        <h1>{t('myBlogs')}</h1>
-        <BlogsWrapper blogs={blogs} />
-      </main>
-      <SubscribeForm />
-    </>
+    <main className="mx-auto max-w-4xl px-5 py-10 lg:py-14">
+      <div className="flex items-baseline justify-between gap-4">
+        <h1 className="m-0 text-left text-3xl font-semibold tracking-tight sm:text-4xl">
+          {t('myBlogs')}
+        </h1>
+        <p className="m-0 font-mono text-xs text-ink-muted">
+          {t('postCount', {count: blogs.length})}
+        </p>
+      </div>
+
+      <BlogsWrapper blogs={blogs} />
+
+      <section
+        id="subscribe"
+        aria-labelledby="blog-newsletter"
+        className="mt-12 rounded-xl border border-line bg-panel p-6"
+      >
+        <SectionLabel id="blog-newsletter">
+          {tNewsletter('form.button')}
+        </SectionLabel>
+        <p className="m-0 mb-4 max-w-prose text-ink-muted">
+          {tNewsletter('subtitle')}
+        </p>
+        <SubscribeForm layout="inline" />
+      </section>
+    </main>
   );
 }
 
diff --git a/src/app/i18n/locales/en/blog.json b/src/app/i18n/locales/en/blog.json
index bd7b107ab..a12d6b9ef 100644
--- a/src/app/i18n/locales/en/blog.json
+++ b/src/app/i18n/locales/en/blog.json
@@ -1,5 +1,18 @@
 {
   "myBlogs": "My Blogs",
   "filterByTags": "Filter by tags",
-  "date": "{{val, datetime}}"
+  "date": "{{val, datetime}}",
+  "search": "Search posts",
+  "moreTags": "+{{count}} more",
+  "fewerTags": "fewer",
+  "clearTags": "clear",
+  "noResults": "No posts match that.",
+  "reset": "Reset filters",
+  "minRead": "{{count}} min read",
+  "onThisPage": "On this page",
+  "share": "Share",
+  "copyLink": "Copy link",
+  "copied": "Copied",
+  "allPosts": "All posts",
+  "postCount": "{{count}} posts"
 }
diff --git a/src/app/i18n/locales/en/home.json b/src/app/i18n/locales/en/home.json
index 00876e623..ae194edf5 100644
--- a/src/app/i18n/locales/en/home.json
+++ b/src/app/i18n/locales/en/home.json
@@ -6,7 +6,12 @@
   "recent": "Recent",
   "about": {
     "kicker": "About me",
-    "viewResume": "View full resume"
+    "viewResume": "View full resume",
+    "more": "More about me",
+    "title": "About Carlo Gino Catapang",
+    "elsewhere": "Elsewhere",
+    "seeAlso": "See also",
+    "source": "Source of this site"
   },
   "skillsMarquee": {
     "kicker": "My stack",
@@ -33,13 +38,20 @@
   },
   "activity": {
     "kicker": "Coding activity",
-    "title": "Always building"
+    "title": "Always building",
+    "contributions": "contributions",
+    "last12Months": "last 12 months",
+    "languages": "languages",
+    "last7Days": "7 days"
   },
   "contact": {
     "kicker": "Get in touch",
     "title": "Let's talk",
     "description": "Pick a slot that works for you and let's chat about your project, an opportunity, or anything tech.",
-    "emailMe": "Email me instead"
+    "emailMe": "Email me instead",
+    "ratherTalk": "Rather talk?",
+    "or": "or",
+    "email": "email"
   },
   "greetings": {
     "filename": "Greetings.sh",
@@ -57,5 +69,17 @@
     "10": "Let's make them come into existence!",
     "11": "We'll create something marvelous together.",
     "12": "Scroll down to know more about me..."
+  },
+  "now": {
+    "label": "now",
+    "role": "role",
+    "based": "based",
+    "writing": "writing",
+    "building": "building",
+    "readBlog": "Read the blog",
+    "resume": "Resume"
+  },
+  "newsletter": {
+    "short": "Get new posts by email. No spam."
   }
 }
diff --git a/src/app/i18n/locales/sv/blog.json b/src/app/i18n/locales/sv/blog.json
index 4d11e59df..0eace5aaa 100644
--- a/src/app/i18n/locales/sv/blog.json
+++ b/src/app/i18n/locales/sv/blog.json
@@ -1,5 +1,18 @@
 {
   "myBlogs": "Mina bloggar",
   "filterByTags": "Filtrera efter taggar",
-  "date": "{{val, datetime}}"
+  "date": "{{val, datetime}}",
+  "search": "Sök inlägg",
+  "moreTags": "+{{count}} till",
+  "fewerTags": "färre",
+  "clearTags": "rensa",
+  "noResults": "Inga inlägg matchar.",
+  "reset": "Återställ filter",
+  "minRead": "{{count}} min läsning",
+  "onThisPage": "På den här sidan",
+  "share": "Dela",
+  "copyLink": "Kopiera länk",
+  "copied": "Kopierad",
+  "allPosts": "Alla inlägg",
+  "postCount": "{{count}} inlägg"
 }
diff --git a/src/app/i18n/locales/sv/home.json b/src/app/i18n/locales/sv/home.json
index 940a5cd00..28536d80b 100644
--- a/src/app/i18n/locales/sv/home.json
+++ b/src/app/i18n/locales/sv/home.json
@@ -6,7 +6,12 @@
   "recent": "Senaste",
   "about": {
     "kicker": "Om mig",
-    "viewResume": "Se hela CV:t"
+    "viewResume": "Se hela CV:t",
+    "more": "Mer om mig",
+    "title": "Om Carlo Gino Catapang",
+    "elsewhere": "På andra ställen",
+    "seeAlso": "Se även",
+    "source": "Källkoden till sidan"
   },
   "skillsMarquee": {
     "kicker": "Min stack",
@@ -33,13 +38,20 @@
   },
   "activity": {
     "kicker": "Kodningsaktivitet",
-    "title": "Bygger alltid"
+    "title": "Bygger alltid",
+    "contributions": "bidrag",
+    "last12Months": "senaste 12 månaderna",
+    "languages": "språk",
+    "last7Days": "7 dagar"
   },
   "contact": {
     "kicker": "Hör av dig",
     "title": "Låt oss prata",
     "description": "Välj en tid som passar dig så pratar vi om ditt projekt, en möjlighet eller vad som helst inom teknik.",
-    "emailMe": "Mejla mig i stället"
+    "emailMe": "Mejla mig i stället",
+    "ratherTalk": "Hellre prata?",
+    "or": "eller",
+    "email": "mejl"
   },
   "greetings": {
     "filename": "Hälsningsfraser.sh",
@@ -57,5 +69,17 @@
     "10": "Låt oss få dem att komma till stånd!",
     "11": "Vi skapar något fantastiskt tillsammans.",
     "12": "Scrolla ner för att veta mer om mig..."
+  },
+  "now": {
+    "label": "nu",
+    "role": "roll",
+    "based": "bor i",
+    "writing": "skriver",
+    "building": "bygger",
+    "readBlog": "Läs bloggen",
+    "resume": "CV"
+  },
+  "newsletter": {
+    "short": "Få nya inlägg via mejl. Ingen spam."
   }
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 7efb53272..5a6ff1970 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,7 +1,7 @@
 import {Viewport} from 'next';
 import GlobalEffects from './global-effects';
 import {Providers} from './providers';
-import {Inter, Roboto} from 'next/font/google';
+import {IBM_Plex_Mono, IBM_Plex_Sans} from 'next/font/google';
 import {twMerge} from 'tailwind-merge';
 import {LocaleProvider} from './hooks/locale-provider';
 import Header from '@/components/header/Header';
@@ -49,28 +49,34 @@ export const metadata = {
   ],
 };
 
-const inter = Inter({
+// next/font self-hosts these and generates size-adjusted fallbacks, so text
+// doesn't shift when the web fonts swap in.
+const plexSans = IBM_Plex_Sans({
   subsets: ['latin'],
-  weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
-  variable: '--font-inter',
+  weight: ['400', '500', '600', '700'],
+  variable: '--font-plex-sans',
 });
 
-const roboto = Roboto({
+const plexMono = IBM_Plex_Mono({
   subsets: ['latin'],
-  weight: ['400'],
-  variable: '--font-roboto',
+  weight: ['400', '500', '600'],
+  variable: '--font-plex-mono',
 });
 
 export default function RootLayout({children}: {children: React.ReactNode}) {
   return (
-    <html lang={FALLBACK_LOCALE} suppressHydrationWarning>
+    <html
+      lang={FALLBACK_LOCALE}
+      className={twMerge(plexSans.variable, plexMono.variable)}
+      suppressHydrationWarning
+    >
       <head>
         <link
           rel="stylesheet"
           href="https://sdk.birdeatsbug.com/latest/style.css"
         ></link>
       </head>
-      <body className={twMerge(inter.variable, roboto.variable)}>
+      <body>
         <LocaleProvider value={FALLBACK_LOCALE}>
           <Providers>
             <Header />
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 6e996f99c..409908704 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,22 +1,14 @@
-import GreetingsContent from '@/components/GreetingsContent';
 import type {NextPage} from 'next';
-import dynamicImport from 'next/dynamic';
-import {FullScreenWrapper} from '../components/FullScreenWrapper';
-import AboutTeaser from '../components/home/AboutTeaser';
+import AboutBlurb from '../components/home/AboutBlurb';
 import CodingActivity from '../components/home/CodingActivity';
-import ContactCta from '../components/home/ContactCta';
+import HomeTerminal from '../components/home/HomeTerminal';
+import LatestWriting from '../components/home/LatestWriting';
+import NewsletterCard from '../components/home/NewsletterCard';
+import NowPanel from '../components/home/NowPanel';
 import SideProjects from '../components/home/SideProjects';
-import SkillsHighlights from '../components/home/SkillsHighlights';
 import {newCommonMetaTags} from '../frontend-utils/meta-tags';
-import BlogSuggestionsList from '../modules/blog/BlogSuggestionsList';
 import {getBlurringImage} from '../utils/contentful.utils';
 import {getBlogsMetadata} from '../utils/mdx.utils';
-import {fetchSkills} from '../utils/resume-props';
-import ParallaxEyes from '../components/ParallaxEyes';
-
-const SubscribeForm = dynamicImport(
-  () => import('../components/SubscribeForm'),
-);
 
 export const metadata = {
   ...newCommonMetaTags('Home Page', '/'),
@@ -25,7 +17,7 @@ export const metadata = {
 
 const HomePage: NextPage = async () => {
   const {
-    props: {skills, profileImage, profileSvg, blogs},
+    props: {profileImage, profileSvg, blogs},
   } = await getStaticProps();
 
   return (
@@ -43,68 +35,23 @@ const HomePage: NextPage = async () => {
           }),
         }}
       />
-      <FullScreenWrapper
-        bl
-        className="flex h-screen min-h-screen w-full items-center justify-center bg-neutral-200 dark:bg-neutral-900"
-      >
-        <ParallaxEyes />
-        <GreetingsContent />
-
-        {/* Decorative background accents */}
-        <div
-          aria-hidden
-          className="bg-primary-300/20 dark:bg-primary-700/20 pointer-events-none absolute -top-24 right-[10%] size-72 rounded-full blur-3xl"
-        />
-        <div
-          aria-hidden
-          className="bg-primary-200/20 dark:bg-primary-800/20 pointer-events-none absolute -bottom-32 left-[5%] size-96 rounded-full blur-3xl"
-        />
-
-        <svg
-          className="absolute inset-0 -z-10 size-full stroke-primary-900 mask-[radial-gradient(50%_105%_at_bottom,black,transparent)] dark:stroke-primary-50"
-          aria-hidden="true"
-        >
-          <defs>
-            <pattern
-              id="0787a7c5-978c-4f66-83c7-11c213f99cb7"
-              width={200}
-              height={200}
-              x="50%"
-              y={-1}
-              patternUnits="userSpaceOnUse"
-            >
-              <path d="M.5 200V.5H200" fill="none" />
-            </pattern>
-          </defs>
-          <rect
-            width="100%"
-            height="100%"
-            strokeWidth={0}
-            fill="url(#0787a7c5-978c-4f66-83c7-11c213f99cb7)"
-          />
-        </svg>
-      </FullScreenWrapper>
-      <main>
-        <div id="resume-summary" className="bg-neutral-100 dark:bg-neutral-800">
-          <AboutTeaser img={profileImage} svg={profileSvg} />
-          <SkillsHighlights skills={skills} />
-        </div>
-        <div className="bg-neutral-50 dark:bg-neutral-700">
-          <SideProjects />
-        </div>
-        <div className="bg-neutral-100 dark:bg-neutral-800">
-          <BlogSuggestionsList blogs={blogs} />
+      <main className="mx-auto max-w-6xl px-5">
+        <div className="grid gap-6 py-10 lg:grid-cols-[1.5fr_1fr] lg:py-14">
+          <HomeTerminal />
+          <NowPanel img={profileImage} svg={profileSvg} latestBlog={blogs[0]} />
         </div>
-        <div className="bg-neutral-50 dark:bg-neutral-700">
-          <CodingActivity />
-        </div>
-        <div className="bg-neutral-100 dark:bg-neutral-800" id="contact">
-          <ContactCta />
+
+        <div className="grid gap-12 border-t border-line py-12 lg:grid-cols-[1fr_320px]">
+          <LatestWriting blogs={blogs} />
+          <aside className="space-y-10 lg:sticky lg:top-20 lg:self-start">
+            <SideProjects />
+            <AboutBlurb />
+            <NewsletterCard />
+          </aside>
         </div>
+
+        <CodingActivity />
       </main>
-      <div className="bg-neutral-50 dark:bg-neutral-700" id="subscribe">
-        <SubscribeForm />
-      </div>
     </>
   );
 };
@@ -116,13 +63,10 @@ const getStaticProps = async () => {
 
   const blogs = (await getBlogsMetadata())
     .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
-    .slice(0, 4);
-
-  const skills = await fetchSkills(true);
+    .slice(0, 5);
 
   return {
     props: {
-      skills,
       blogs,
       profileImage,
       profileSvg,
diff --git a/src/app/resume/DownloadButtons.tsx b/src/app/resume/DownloadButtons.tsx
deleted file mode 100644
index e0d5b7a18..000000000
--- a/src/app/resume/DownloadButtons.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-'use client';
-import {FC} from 'react';
-import {FaFilePdf} from '@react-icons/all-files/fa/FaFilePdf';
-import {FaFileWord} from '@react-icons/all-files/fa/FaFileWord';
-import NextLink from '../../components/basic/NextLink';
-import {useTranslation} from '../i18n/client';
-
-const DownloadButtons: FC<{
-  resumePdfUrl: string;
-  resumeWordUrl: string;
-}> = ({resumePdfUrl, resumeWordUrl}) => {
-  const {t} = useTranslation('resume');
-
-  return (
-    <div className="flex flex-wrap items-center justify-center gap-3">
-      <NextLink
-        href={resumePdfUrl}
-        target="_blank"
-        aria-label={t('downloadPdf')}
-        title={t('downloadPdf')}
-        rel="noopener noreferrer nofollow"
-        className="group inline-flex items-center gap-2 rounded-lg bg-primary-900 px-5 py-2.5 font-semibold text-white shadow-md transition-all duration-200 hover:-translate-y-0.5 hover:shadow-lg dark:bg-primary-300 dark:text-neutral-900"
-      >
-        <FaFilePdf className="transition-transform duration-200 group-hover:scale-110" />
-        {t('downloadPdf')}
-      </NextLink>
-      <NextLink
-        href={resumeWordUrl}
-        target="_blank"
-        aria-label={t('downloadWord')}
-        title={t('downloadWord')}
-        rel="noopener noreferrer nofollow"
-        className="group inline-flex items-center gap-2 rounded-lg border-2 border-primary-900 px-5 py-2.5 font-semibold text-primary-900 transition-all duration-200 hover:-translate-y-0.5 hover:bg-primary-900 hover:text-white dark:border-primary-300 dark:text-primary-300 dark:hover:bg-primary-300 dark:hover:text-neutral-900"
-      >
-        <FaFileWord className="transition-transform duration-200 group-hover:scale-110" />
-        {t('downloadWord')}
-      </NextLink>
-    </div>
-  );
-};
-
-export default DownloadButtons;
diff --git a/src/app/resume/ResumeContact.tsx b/src/app/resume/ResumeContact.tsx
new file mode 100644
index 000000000..d38794457
--- /dev/null
+++ b/src/app/resume/ResumeContact.tsx
@@ -0,0 +1,38 @@
+import BookACallButton from '../../components/booking/BookACallButton';
+import {createTranslation} from '../i18n/server';
+
+const actionClass =
+  'inline-flex items-center gap-1.5 rounded-md border border-line px-3 py-1.5 font-mono text-xs lowercase transition-colors hover:border-accent hover:text-accent';
+
+export default async function ResumeContact() {
+  const {t} = await createTranslation('resume');
+
+  return (
+    <section
+      aria-labelledby="resume-contact"
+      className="mt-16 rounded-xl border border-line bg-panel p-6 print:hidden"
+    >
+      <h2
+        id="resume-contact"
+        className="m-0 text-left text-xl font-semibold tracking-tight"
+      >
+        {t('ctaTitle')}
+      </h2>
+      <p className="m-0 mt-2 text-ink-muted">{t('ctaSubtitle')}</p>
+      <div className="mt-5 flex flex-wrap gap-3">
+        <a
+          href="mailto:carloginocatapang@gmail.com"
+          className="rounded-md bg-accent px-3 py-1.5 font-mono text-xs text-accent-ink lowercase"
+        >
+          {t('emailMe')}
+        </a>
+        <BookACallButton
+          label={t('bookACall')}
+          title={t('bookACallTitle')}
+          closeLabel={t('closeDialog')}
+          className={actionClass}
+        />
+      </div>
+    </section>
+  );
+}
diff --git a/src/app/resume/ResumeContactCta.tsx b/src/app/resume/ResumeContactCta.tsx
deleted file mode 100644
index f87edff10..000000000
--- a/src/app/resume/ResumeContactCta.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-'use client';
-import {FaEnvelopeSquare} from '@react-icons/all-files/fa/FaEnvelopeSquare';
-import {FaGithub} from '@react-icons/all-files/fa/FaGithub';
-import {FaLinkedin} from '@react-icons/all-files/fa/FaLinkedin';
-import {FC} from 'react';
-import {Fade} from 'react-awesome-reveal';
-import NextLink from '../../components/basic/NextLink';
-import BookACallButton from '../../components/booking/BookACallButton';
-import {useTranslation} from '../i18n/client';
-import DownloadButtons from './DownloadButtons';
-
-const ResumeContactCta: FC<{
-  resumePdfUrl: string;
-  resumeWordUrl: string;
-}> = ({resumePdfUrl, resumeWordUrl}) => {
-  const {t} = useTranslation('resume');
-
-  return (
-    <section className="mx-auto max-w-4xl px-4 pb-16 pt-8">
-      <Fade direction="up" triggerOnce>
-        <div className="rounded-2xl border border-neutral-200 bg-linear-to-br from-neutral-50 to-primary-50 p-8 text-center shadow-xs dark:border-neutral-700 dark:from-neutral-800 dark:to-neutral-800 sm:p-12">
-          <h2 className="m-0 text-3xl font-bold">{t('ctaTitle')}</h2>
-          <p className="mx-auto mt-3 max-w-xl text-lg text-neutral-600 dark:text-neutral-300">
-            {t('ctaSubtitle')}
-          </p>
-
-          <div className="mt-6 flex flex-wrap items-center justify-center gap-3">
-            <NextLink
-              href="mailto:carloginocatapang@gmail.com"
-              target="_blank"
-              rel="noreferrer"
-              aria-label={t('emailMe')}
-              title={t('emailMe')}
-              className="inline-flex items-center gap-2 rounded-lg bg-primary-900 px-5 py-2.5 font-semibold text-white shadow-md transition-all duration-200 hover:-translate-y-0.5 hover:shadow-lg dark:bg-primary-300 dark:text-neutral-900"
-            >
-              <FaEnvelopeSquare />
-              {t('emailMe')}
-            </NextLink>
-            <BookACallButton
-              label={t('bookACall')}
-              title={t('bookACallTitle')}
-              closeLabel={t('closeDialog')}
-              className="inline-flex items-center gap-2 rounded-lg border-2 border-neutral-300 px-5 py-2.5 font-semibold text-neutral-700 transition-all duration-200 hover:-translate-y-0.5 hover:border-primary-900 hover:text-primary-900 dark:border-neutral-600 dark:text-neutral-200 dark:hover:border-primary-300 dark:hover:text-primary-300"
-            />
-            <NextLink
-              href="https://www.linkedin.com/in/codegino"
-              target="_blank"
-              rel="noreferrer"
-              aria-label="LinkedIn"
-              title="LinkedIn"
-              className="inline-flex items-center gap-2 rounded-lg border-2 border-neutral-300 px-5 py-2.5 font-semibold text-neutral-700 transition-all duration-200 hover:-translate-y-0.5 hover:border-primary-900 hover:text-primary-900 dark:border-neutral-600 dark:text-neutral-200 dark:hover:border-primary-300 dark:hover:text-primary-300"
-            >
-              <FaLinkedin />
-              LinkedIn
-            </NextLink>
-            <NextLink
-              href="https://github.com/pogicodes"
-              target="_blank"
-              rel="noreferrer"
-              aria-label="GitHub"
-              title="GitHub"
-              className="inline-flex items-center gap-2 rounded-lg border-2 border-neutral-300 px-5 py-2.5 font-semibold text-neutral-700 transition-all duration-200 hover:-translate-y-0.5 hover:border-primary-900 hover:text-primary-900 dark:border-neutral-600 dark:text-neutral-200 dark:hover:border-primary-300 dark:hover:text-primary-300"
-            >
-              <FaGithub />
-              GitHub
-            </NextLink>
-          </div>
-
-          <div className="mt-8 border-t border-neutral-200 pt-6 dark:border-neutral-700">
-            <p className="mb-3 text-sm uppercase tracking-wide text-neutral-500 dark:text-neutral-400">
-              {t('grabACopy')}
-            </p>
-            <DownloadButtons
-              resumePdfUrl={resumePdfUrl}
-              resumeWordUrl={resumeWordUrl}
-            />
-          </div>
-        </div>
-      </Fade>
-    </section>
-  );
-};
-
-export default ResumeContactCta;
diff --git a/src/app/resume/ResumeExperience.tsx b/src/app/resume/ResumeExperience.tsx
new file mode 100644
index 000000000..c85af7b1f
--- /dev/null
+++ b/src/app/resume/ResumeExperience.tsx
@@ -0,0 +1,90 @@
+import dompurify from 'isomorphic-dompurify';
+import type {ReactNode} from 'react';
+import SectionLabel from '../../components/SectionLabel';
+import type {EducationExperience, WorkExperience} from '../../models/resume';
+import {createTranslation} from '../i18n/server';
+
+const formatMonth = (date: string) =>
+  new Intl.DateTimeFormat('en', {year: 'numeric', month: 'short'}).format(
+    new Date(date),
+  );
+
+function Entry({
+  exp,
+  present,
+  children,
+}: {
+  exp: WorkExperience | EducationExperience;
+  present: string;
+  children?: ReactNode;
+}) {
+  // The data marks an ongoing role by giving it the same start and end date.
+  const isCurrent = exp.endDate === exp.startDate;
+
+  return (
+    <li className="grid gap-x-8 gap-y-1 border-t border-line py-6 break-inside-avoid-page first:border-t-0 first:pt-0 sm:grid-cols-[9.5rem_minmax(0,1fr)] print:py-4">
+      <p className="m-0 font-mono text-xs text-ink-muted tabular-nums sm:pt-1">
+        {formatMonth(exp.startDate)} –{' '}
+        {isCurrent ? (
+          <span className="text-xs text-accent print:text-ink">{present}</span>
+        ) : (
+          formatMonth(exp.endDate)
+        )}
+      </p>
+      <div className="min-w-0">
+        <h3 className="m-0 text-left text-lg font-semibold">{exp.title}</h3>
+        <p className="m-0 text-ink-muted">
+          <a
+            href={exp.url}
+            target="_blank"
+            rel="noreferrer"
+            className="font-medium text-ink hover:text-accent"
+          >
+            {exp.organization}
+          </a>
+          <span className="text-sm"> · {exp.role}</span>
+        </p>
+        {children}
+      </div>
+    </li>
+  );
+}
+
+export default async function ResumeExperience({
+  workExperiences,
+  educationExperiences,
+}: {
+  workExperiences: WorkExperience[];
+  educationExperiences: EducationExperience[];
+}) {
+  const {t} = await createTranslation('resume');
+
+  return (
+    <>
+      <section aria-labelledby="resume-work" className="mt-14 print:mt-8">
+        <SectionLabel id="resume-work">{t('workExperiences')}</SectionLabel>
+        <ol className="m-0 list-none p-0">
+          {workExperiences.map(exp => (
+            <Entry key={exp.id} exp={exp} present={t('present')}>
+              <div
+                className="mt-3 text-[0.9375rem] leading-relaxed text-ink-muted print:text-ink [&_*]:text-[length:inherit] [&_li]:mb-1 [&_p]:m-0 [&_p]:mt-3 [&_p:first-child]:mt-0 [&_strong]:font-medium [&_strong]:text-ink [&_ul]:m-0 [&_ul]:mt-2 [&_ul]:list-disc [&_ul]:pl-5 [&_ul_ul]:list-[circle]"
+                dangerouslySetInnerHTML={{
+                  __html: dompurify.sanitize(exp.markdown),
+                }}
+              />
+            </Entry>
+          ))}
+        </ol>
+      </section>
+
+      <section aria-labelledby="resume-education" className="mt-14 print:mt-8">
+        <SectionLabel id="resume-education">{t('education')}</SectionLabel>
+        <ol className="m-0 list-none p-0">
+          {educationExperiences.map(exp => (
+            <Entry key={exp.id} exp={exp} present={t('present')} />
+          ))}
+        </ol>
+      </section>
+    </>
+  );
+}
diff --git a/src/app/resume/ResumeHeader.tsx b/src/app/resume/ResumeHeader.tsx
new file mode 100644
index 000000000..388157492
--- /dev/null
+++ b/src/app/resume/ResumeHeader.tsx
@@ -0,0 +1,104 @@
+import {BlurringImage} from '../../components/BlurringImage';
+import type {BlurImageType} from '../../utils/image-blur.utils';
+import {createTranslation} from '../i18n/server';
+
+const summary = {
+  company: 'Tre',
+  companyWebsite: 'https://www.tre.se',
+  email: 'carloginocatapang@gmail.com',
+  location: 'Stockholm, Sweden',
+  name: 'Carlo Gino Catapang',
+};
+
+const contactLinks = [
+  {label: summary.email, href: `mailto:${summary.email}`},
+  {label: 'carlogino.com', href: 'https://carlogino.com'},
+  {
+    label: 'linkedin.com/in/codegino',
+    href: 'https://www.linkedin.com/in/codegino',
+  },
+  {label: 'github.com/pogicodes', href: 'https://github.com/pogicodes'},
+];
+
+const linkClass = 'text-xs hover:text-accent print:text-ink';
+
+export default async function ResumeHeader({
+  img,
+  svg,
+  resumePdfUrl,
+  resumeWordUrl,
+}: Pick<BlurImageType, 'svg' | 'img'> & {
+  resumePdfUrl: string;
+  resumeWordUrl: string;
+}) {
+  const {t} = await createTranslation('resume');
+
+  return (
+    <header className="flex flex-col-reverse gap-6 sm:flex-row sm:items-start sm:justify-between">
+      <div className="min-w-0">
+        <h1 className="m-0 text-left text-3xl leading-tight font-semibold tracking-tight sm:text-4xl">
+          {summary.name}
+        </h1>
+        <p className="m-0 mt-1 text-lg text-ink-muted">
+          {t('jobTitle')} {t('at')}{' '}
+          <a
+            href={summary.companyWebsite}
+            target="_blank"
+            rel="noreferrer"
+            className="text-lg text-accent hover:underline print:text-ink"
+          >
+            {summary.company}
+          </a>
+        </p>
+        <p className="m-0 mt-4 max-w-2xl leading-relaxed">{t('tagline')}</p>
+
+        <ul className="m-0 mt-4 flex list-none flex-wrap gap-x-4 gap-y-1 p-0 font-mono text-xs text-ink-muted">
+          <li className="text-xs">{summary.location}</li>
+          <li className="text-xs">
+            10+ {t('yearsOfExperience')} · 5 {t('companies')}
+          </li>
+        </ul>
+        <ul className="m-0 mt-1 flex list-none flex-wrap gap-x-4 gap-y-1 p-0 font-mono text-xs text-ink-muted">
+          {contactLinks.map(link => (
+            <li key={link.href} className="text-xs">
+              <a href={link.href} className={linkClass}>
+                {link.label}
+              </a>
+            </li>
+          ))}
+        </ul>
+
+        <p className="m-0 mt-5 flex flex-wrap gap-x-4 gap-y-1 font-mono text-xs print:hidden">
+          <a
+            href={resumePdfUrl}
+            target="_blank"
+            rel="noopener noreferrer nofollow"
+            className="text-xs text-accent lowercase hover:underline"
+          >
+            {t('downloadPdf')} ↓
+          </a>
+          <a
+            href={resumeWordUrl}
+            target="_blank"
+            rel="noopener noreferrer nofollow"
+            className="text-xs text-accent lowercase hover:underline"
+          >
+            {t('downloadWord')} ↓
+          </a>
+        </p>
+      </div>
+
+      <div className="relative size-24 shrink-0 overflow-hidden rounded-xl ring-1 ring-line sm:size-28 print:hidden">
+        <BlurringImage
+          img={img}
+          svg={svg}
+          alt="Carlo Gino"
+          title="Carlo Gino"
+          fill
+          sizes="112px"
+          className="object-cover"
+        />
+      </div>
+    </header>
+  );
+}
diff --git a/src/app/resume/ResumeHero.tsx b/src/app/resume/ResumeHero.tsx
deleted file mode 100644
index 46954e18a..000000000
--- a/src/app/resume/ResumeHero.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-import {FaEnvelopeSquare} from '@react-icons/all-files/fa/FaEnvelopeSquare';
-import {FaMapMarkerAlt} from '@react-icons/all-files/fa/FaMapMarkerAlt';
-import {BlurringImage} from '../../components/BlurringImage';
-import NextLink from '../../components/basic/NextLink';
-import {createTranslation} from '../i18n/server';
-import type {BlurImageType} from '../../utils/image-blur.utils';
-import DownloadButtons from './DownloadButtons';
-
-const summary = {
-  company: 'Tre',
-  email: 'carloginocatapang@gmail.com',
-  address: 'Stockholm, Sweden',
-  name: 'Carlo Gino Catapang',
-  companyWebsite: 'https://www.tre.se',
-};
-
-export default async function ResumeHero({
-  img,
-  svg,
-  resumePdfUrl,
-  resumeWordUrl,
-}: Pick<BlurImageType, 'svg' | 'img'> & {
-  resumePdfUrl: string;
-  resumeWordUrl: string;
-}) {
-  const {t} = await createTranslation('resume');
-
-  return (
-    <section className="relative overflow-hidden px-4 py-14 sm:py-20">
-      {/* Decorative background accents */}
-      <div
-        aria-hidden
-        className="bg-primary-300/20 dark:bg-primary-700/20 pointer-events-none absolute -top-24 right-[10%] size-72 rounded-full blur-3xl"
-      />
-      <div
-        aria-hidden
-        className="bg-primary-200/20 dark:bg-primary-800/20 pointer-events-none absolute -bottom-32 left-[5%] size-96 rounded-full blur-3xl"
-      />
-
-      <div className="relative mx-auto flex max-w-5xl flex-col items-center gap-8 md:flex-row md:items-center md:gap-12">
-        <div className="relative shrink-0">
-          <div
-            aria-hidden
-            className="absolute -inset-2 rounded-full bg-linear-to-br from-primary-400 to-primary-800 opacity-70 blur-xs dark:from-primary-300 dark:to-primary-600"
-          />
-          <div className="relative size-40 overflow-hidden rounded-full ring-4 ring-white dark:ring-neutral-900 md:size-48">
-            <BlurringImage
-              img={img}
-              svg={svg}
-              alt="Carlo Gino"
-              title="Carlo Gino"
-              height={200}
-              width={200}
-            />
-          </div>
-        </div>
-
-        <div className="flex flex-col items-center gap-4 text-center md:items-start md:text-left">
-          <div>
-            <h1 className="m-0 text-4xl font-extrabold tracking-tight sm:text-5xl">
-              {summary.name}
-            </h1>
-            <h2 className="m-0 mt-1 text-xl font-semibold text-primary-900 dark:text-primary-300 sm:text-2xl">
-              {t('jobTitle')}{' '}
-              <span className="font-normal text-neutral-600 dark:text-neutral-400">
-                {t('at')}
-              </span>{' '}
-              <NextLink
-                href={summary.companyWebsite}
-                target="_blank"
-                aria-label="Company Website"
-                rel="noreferrer"
-                className="underline-on-hover"
-              >
-                {summary.company}
-              </NextLink>
-            </h2>
-          </div>
-
-          <p className="m-0 max-w-xl text-lg leading-relaxed text-neutral-700 dark:text-neutral-300">
-            {t('tagline')}
-          </p>
-
-          <div className="flex flex-wrap items-center justify-center gap-x-6 gap-y-2 text-neutral-700 dark:text-neutral-400 md:justify-start">
-            <span className="flex items-center gap-2 font-semibold">
-              <span className="text-2xl font-extrabold text-primary-900 dark:text-primary-300">
-                10+
-              </span>
-              {t('yearsOfExperience')}
-            </span>
-            <span
-              aria-hidden
-              className="hidden h-6 w-px bg-neutral-300 dark:bg-neutral-700 sm:block"
-            />
-            <span className="flex items-center gap-2 font-semibold">
-              <span className="text-2xl font-extrabold text-primary-900 dark:text-primary-300">
-                5
-              </span>
-              {t('companies')}
-            </span>
-            <span
-              aria-hidden
-              className="hidden h-6 w-px bg-neutral-300 dark:bg-neutral-700 sm:block"
-            />
-            <span className="flex items-center gap-1.5">
-              <FaMapMarkerAlt className="fill-primary-900 dark:fill-primary-400" />
-              {summary.address}
-            </span>
-          </div>
-
-          <NextLink
-            href={`mailto:${summary.email}`}
-            target="_blank"
-            aria-label="Email me"
-            title="Send me an email"
-            rel="noreferrer"
-            className="flex items-center gap-2 text-neutral-700 dark:text-neutral-400"
-          >
-            <FaEnvelopeSquare
-              size={22}
-              className="fill-primary-900 dark:fill-primary-400"
-            />
-            <span className="underline-on-hover text-lg">{summary.email}</span>
-          </NextLink>
-
-          <div className="mt-2">
-            <DownloadButtons
-              resumePdfUrl={resumePdfUrl}
-              resumeWordUrl={resumeWordUrl}
-            />
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-}
diff --git a/src/app/resume/ResumeSkills.tsx b/src/app/resume/ResumeSkills.tsx
index db0b285d4..6ee28edec 100644
--- a/src/app/resume/ResumeSkills.tsx
+++ b/src/app/resume/ResumeSkills.tsx
@@ -1,114 +1,70 @@
-'use client';
-import {FaCheckDouble} from '@react-icons/all-files/fa/FaCheckDouble';
-import {FaDatabase} from '@react-icons/all-files/fa/FaDatabase';
-import {FaNodeJs} from '@react-icons/all-files/fa/FaNodeJs';
-import {FaPalette} from '@react-icons/all-files/fa/FaPalette';
-import {FaRandom} from '@react-icons/all-files/fa/FaRandom';
-import {FaReact} from '@react-icons/all-files/fa/FaReact';
-import {FaServer} from '@react-icons/all-files/fa/FaServer';
-import {FaStar} from '@react-icons/all-files/fa/FaStar';
-import {FaThumbsUp} from '@react-icons/all-files/fa/FaThumbsUp';
-import {FaTools} from '@react-icons/all-files/fa/FaTools';
-import {Fade} from 'react-awesome-reveal';
-import type {CategorizedSkill, Skill, SkillCategory} from '../../models/skill';
-import NextLink from '../../components/basic/NextLink';
-import {useTranslation} from '../i18n/client';
+import SectionLabel from '../../components/SectionLabel';
+import type {CategorizedSkill, Skill} from '../../models/skill';
+import {createTranslation} from '../i18n/server';
 
 const byLevelDesc = (a: Skill, b: Skill) => b.level - a.level;
 
-export default function ResumeSkills({skills}: {skills: CategorizedSkill[]}) {
-  const {t} = useTranslation('resume');
+function SkillList({skills}: {skills: Skill[]}) {
+  return (
+    <ul className="m-0 flex list-none flex-wrap gap-x-1 p-0">
+      {[...skills].sort(byLevelDesc).map((skill, index) => (
+        <li key={skill.id}>
+          <a
+            href={skill.url}
+            target="_blank"
+            rel="noreferrer"
+            className="hover:text-accent"
+          >
+            {skill.name}
+          </a>
+          {index < skills.length - 1 ? (
+            <span aria-hidden className="text-ink-muted">
+              ,
+            </span>
+          ) : null}
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+export default async function ResumeSkills({
+  skills,
+}: {
+  skills: CategorizedSkill[];
+}) {
+  const {t} = await createTranslation('resume');
 
   const highlights =
-    skills.find(c => c.category === 'highlights')?.skills ?? [];
-  const otherCategories = skills.filter(
-    c => c.category !== 'highlights' && c.skills.length > 0,
-  );
+    skills.find(group => group.category === 'highlights')?.skills ?? [];
+  const groups = [
+    ...(highlights.length ? [{label: t('coreStack'), skills: highlights}] : []),
+    ...skills
+      .filter(
+        group => group.category !== 'highlights' && group.skills.length > 0,
+      )
+      .map(group => ({label: group.category, skills: group.skills})),
+  ];
 
   return (
-    <section className="mx-auto max-w-4xl px-4 py-12">
-      <h2 className="mb-10 text-center text-3xl font-bold">{t('skills')}</h2>
-
-      {/* Core stack highlights */}
-      {highlights.length > 0 && (
-        <Fade direction="up" triggerOnce>
-          <div className="mb-10">
-            <h3 className="mb-4 flex items-center justify-center gap-2 text-lg font-semibold uppercase tracking-wide text-neutral-500 dark:text-neutral-400">
-              <FaStar className="fill-primary-900 dark:fill-primary-300" />
-              {t('coreStack')}
-            </h3>
-            <div className="flex flex-wrap justify-center gap-3">
-              {[...highlights].sort(byLevelDesc).map(skill => (
-                <NextLink
-                  key={skill.id}
-                  href={skill.url}
-                  target="_blank"
-                  rel="noreferrer"
-                  aria-label={skill.name}
-                  title={`Click to visit ${skill.name}`}
-                  className="rounded-xl border border-primary-300 bg-primary-50 px-5 py-3 text-lg font-bold text-primary-900 shadow-xs transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md dark:border-primary-600 dark:bg-neutral-800 dark:text-primary-300"
-                >
-                  {skill.name}
-                </NextLink>
-              ))}
-            </div>
+    <section
+      id="skills"
+      aria-labelledby="resume-skills"
+      className="mt-14 print:mt-8"
+    >
+      <SectionLabel id="resume-skills">{t('skills')}</SectionLabel>
+      <dl className="m-0 grid gap-x-8 gap-y-3 sm:grid-cols-[9.5rem_minmax(0,1fr)]">
+        {groups.map(group => (
+          <div key={group.label} className="contents">
+            <dt className="font-mono text-xs text-ink-muted lowercase sm:pt-1">
+              {group.label}
+            </dt>
+            <dd className="m-0 mb-2 sm:mb-0">
+              <SkillList skills={group.skills} />
+            </dd>
           </div>
-        </Fade>
-      )}
-
-      {/* Categorized clusters */}
-      <div className="grid gap-6 sm:grid-cols-2">
-        {otherCategories.map(category => (
-          <Fade key={category.category} direction="up" triggerOnce>
-            <div className="h-full rounded-xl border border-neutral-200 bg-white p-5 shadow-xs dark:border-neutral-700 dark:bg-neutral-800">
-              <h3 className="mb-3 flex items-center gap-2 text-base font-semibold uppercase tracking-wide text-neutral-500 dark:text-neutral-400">
-                {getSkillCategoryIcon(category.category)}
-                {category.category}
-              </h3>
-              <div className="flex flex-wrap gap-2">
-                {[...category.skills].sort(byLevelDesc).map(skill => (
-                  <NextLink
-                    key={skill.id}
-                    href={skill.url}
-                    target="_blank"
-                    rel="noreferrer"
-                    aria-label={skill.name}
-                    title={`Click to visit ${skill.name}`}
-                    className="rounded-full bg-neutral-100 px-3 py-1 text-sm font-medium text-neutral-700 ring-1 ring-neutral-200 transition-colors hover:bg-primary-900 hover:text-white dark:bg-neutral-700 dark:text-neutral-200 dark:ring-neutral-600 dark:hover:bg-primary-300 dark:hover:text-neutral-900"
-                  >
-                    {skill.name}
-                  </NextLink>
-                ))}
-              </div>
-            </div>
-          </Fade>
         ))}
-      </div>
+      </dl>
     </section>
   );
 }
-
-function getSkillCategoryIcon(category: SkillCategory) {
-  switch (category) {
-    case 'backend':
-      return <FaNodeJs />;
-    case 'hosting':
-      return <FaServer />;
-    case 'styling':
-      return <FaPalette />;
-    case 'testing':
-      return <FaCheckDouble />;
-    case 'others':
-      return <FaRandom />;
-    case 'tools':
-      return <FaTools />;
-    case 'frontend':
-      return <FaReact />;
-    case 'database':
-      return <FaDatabase />;
-    case 'discipline':
-      return <FaThumbsUp />;
-    default:
-      return null;
-  }
-}
diff --git a/src/app/resume/ResumeTimeline.tsx b/src/app/resume/ResumeTimeline.tsx
deleted file mode 100644
index 07487d3b6..000000000
--- a/src/app/resume/ResumeTimeline.tsx
+++ /dev/null
@@ -1,190 +0,0 @@
-'use client';
-import {useState, type FunctionComponent} from 'react';
-import {FaBriefcase} from '@react-icons/all-files/fa/FaBriefcase';
-import {FaChevronDown} from '@react-icons/all-files/fa/FaChevronDown';
-import {FaGraduationCap} from '@react-icons/all-files/fa/FaGraduationCap';
-import dompurify from 'isomorphic-dompurify';
-import {Fade} from 'react-awesome-reveal';
-import {useTranslation} from '../i18n/client';
-import type {EducationExperience, WorkExperience} from '../../models/resume';
-import NextLink from '../../components/basic/NextLink';
-
-const EXPANDED_BY_DEFAULT = 2;
-
-export default function ResumeTimeline({
-  workExperiences,
-  educationExperiences,
-}: {
-  workExperiences: WorkExperience[];
-  educationExperiences: EducationExperience[];
-}) {
-  const {t} = useTranslation('resume');
-
-  return (
-    <section className="mx-auto max-w-4xl px-4 py-12">
-      <h2 className="mb-10 flex items-center justify-center gap-3 text-3xl font-bold">
-        <FaBriefcase className="fill-primary-900 dark:fill-primary-300" />
-        {t('workExperiences')}
-      </h2>
-      <div className="relative">
-        <TimelineLine />
-        {workExperiences.map((exp, i) => (
-          <Fade key={exp.id} direction="up" triggerOnce fraction={0.15}>
-            <WorkItem exp={exp} defaultExpanded={i < EXPANDED_BY_DEFAULT} />
-          </Fade>
-        ))}
-      </div>
-
-      <h2 className="mb-10 mt-16 flex items-center justify-center gap-3 text-3xl font-bold">
-        <FaGraduationCap className="fill-primary-900 dark:fill-primary-300" />
-        {t('education')}
-      </h2>
-      <div className="relative">
-        <TimelineLine />
-        {educationExperiences.map(exp => (
-          <Fade key={exp.id} direction="up" triggerOnce fraction={0.15}>
-            <EducationItem exp={exp} />
-          </Fade>
-        ))}
-      </div>
-    </section>
-  );
-}
-
-const TimelineLine = () => (
-  <div
-    aria-hidden
-    className="to-primary-400/30 dark:to-primary-300/30 absolute inset-y-2 left-[7px] w-0.5 rounded-sm bg-linear-to-b from-primary-400 via-primary-600 dark:from-primary-300 dark:via-primary-500 sm:left-[11px]"
-  />
-);
-
-const TimelineDot = () => (
-  <div className="absolute left-0 top-7 size-4 rounded-full border-2 border-primary-600 bg-white shadow-sm dark:border-primary-300 dark:bg-neutral-900 sm:size-6 sm:border-4" />
-);
-
-const DateRange: FunctionComponent<{
-  startDate: string;
-  endDate: string;
-}> = ({startDate, endDate}) => {
-  const {t} = useTranslation('common');
-  const {t: tResume} = useTranslation('resume');
-
-  const format = (date: string) =>
-    t('date', {
-      val: new Date(date),
-      formatParams: {val: {year: 'numeric', month: 'short'}},
-    });
-
-  return (
-    <p className="m-0 text-sm font-medium uppercase tracking-wide text-neutral-500 dark:text-neutral-400">
-      {format(startDate)}
-      {' — '}
-      {endDate === startDate ? (
-        <span className="font-bold text-primary-900 dark:text-primary-300">
-          {tResume('present')}
-        </span>
-      ) : (
-        format(endDate)
-      )}
-    </p>
-  );
-};
-
-const WorkItem: FunctionComponent<{
-  exp: WorkExperience;
-  defaultExpanded: boolean;
-}> = ({exp, defaultExpanded}) => {
-  const [expanded, setExpanded] = useState(defaultExpanded);
-  const {t} = useTranslation('resume');
-  const contentId = `exp-details-${exp.id}`;
-
-  return (
-    <div className="relative mb-8 pl-8 sm:pl-12">
-      <TimelineDot />
-      <div className="rounded-xl border border-neutral-200 bg-white shadow-xs transition-shadow duration-200 hover:shadow-md dark:border-neutral-700 dark:bg-neutral-800">
-        <button
-          type="button"
-          onClick={() => setExpanded(v => !v)}
-          aria-expanded={expanded}
-          aria-controls={contentId}
-          className="flex w-full items-start justify-between gap-4 p-5 text-left"
-        >
-          <div className="space-y-1">
-            <DateRange startDate={exp.startDate} endDate={exp.endDate} />
-            <h3 className="m-0 text-xl font-bold">{exp.title}</h3>
-            <p className="m-0 text-neutral-600 dark:text-neutral-300">
-              <span className="font-semibold text-primary-900 dark:text-primary-300">
-                {exp.organization}
-              </span>
-              <span className="text-sm">&nbsp;· {exp.role}</span>
-            </p>
-          </div>
-          <span
-            className={`mt-2 shrink-0 rounded-full bg-neutral-100 p-2 text-neutral-500 transition-transform duration-300 dark:bg-neutral-700 dark:text-neutral-300 ${
-              expanded ? 'rotate-180' : ''
-            }`}
-            title={expanded ? t('showLess') : t('showMore')}
-          >
-            <FaChevronDown />
-          </span>
-        </button>
-        <div
-          id={contentId}
-          className={`grid transition-[grid-template-rows] duration-300 ease-in-out ${
-            expanded ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'
-          }`}
-        >
-          <div className="overflow-hidden">
-            <div className="border-t border-neutral-200 px-5 pb-5 pt-4 dark:border-neutral-700">
-              <div
-                className="text-left text-neutral-700 dark:text-neutral-300 [&_a]:font-semibold [&_a]:underline [&_li]:mb-1 [&_p]:mb-2 [&_ul]:mb-2 [&_ul]:list-disc [&_ul]:pl-5"
-                dangerouslySetInnerHTML={{
-                  __html: dompurify.sanitize(exp.markdown),
-                }}
-              />
-              <NextLink
-                href={exp.url}
-                target="_blank"
-                rel="noreferrer"
-                aria-label={exp.organization}
-                title={`Click to visit ${exp.organization}`}
-                className="underline-on-hover mt-3 inline-block text-sm font-semibold text-primary-900 dark:text-primary-300"
-              >
-                {t('visitCompany', {company: exp.organization})} →
-              </NextLink>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-const EducationItem: FunctionComponent<{exp: EducationExperience}> = ({
-  exp,
-}) => {
-  return (
-    <div className="relative mb-8 pl-8 sm:pl-12">
-      <TimelineDot />
-      <div className="rounded-xl border border-neutral-200 bg-white p-5 shadow-xs transition-shadow duration-200 hover:shadow-md dark:border-neutral-700 dark:bg-neutral-800">
-        <div className="space-y-1">
-          <DateRange startDate={exp.startDate} endDate={exp.endDate} />
-          <h3 className="m-0 text-xl font-bold">{exp.title}</h3>
-          <p className="m-0 text-neutral-600 dark:text-neutral-300">
-            <NextLink
-              href={exp.url}
-              target="_blank"
-              rel="noreferrer"
-              aria-label={exp.organization}
-              title={`Click to visit ${exp.organization}`}
-              className="underline-on-hover font-semibold text-primary-900 dark:text-primary-300"
-            >
-              {exp.organization}
-            </NextLink>
-            <span className="text-sm">&nbsp;· {exp.role}</span>
-          </p>
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/src/app/resume/page.tsx b/src/app/resume/page.tsx
index c9d1b640f..21175b516 100644
--- a/src/app/resume/page.tsx
+++ b/src/app/resume/page.tsx
@@ -1,16 +1,11 @@
 import {NextPage} from 'next';
-import dynamicImport from 'next/dynamic';
 import {newCommonMetaTags} from '../../frontend-utils/meta-tags';
 import {getBlurringImage} from '../../utils/contentful.utils';
 import {fectchExperiences, fetchSkills} from '../../utils/resume-props';
-import ResumeContactCta from './ResumeContactCta';
-import ResumeHero from './ResumeHero';
+import ResumeContact from './ResumeContact';
+import ResumeExperience from './ResumeExperience';
+import ResumeHeader from './ResumeHeader';
 import ResumeSkills from './ResumeSkills';
-import ResumeTimeline from './ResumeTimeline';
-
-const CustomGithubCalendar = dynamicImport(
-  () => import('../../components/CustomGithubCalendar'),
-);
 
 export const metadata = {
   ...newCommonMetaTags('Resume Page', '/resume'),
@@ -31,29 +26,19 @@ const ResumePage: NextPage = async () => {
   } = await getStaticProps();
 
   return (
-    <main>
-      <ResumeHero
+    <main className="mx-auto max-w-3xl px-5 py-12 sm:py-16 print:max-w-none print:p-0">
+      <ResumeHeader
         img={profileImage}
         svg={profileSvg}
         resumePdfUrl={resumePdfUrl}
         resumeWordUrl={resumeWordUrl}
       />
-      <ResumeTimeline
+      <ResumeExperience
         workExperiences={workExperiences}
         educationExperiences={educationExperiences}
       />
-      <div id="skills">
-        <ResumeSkills skills={skills} />
-      </div>
-      <section className="flex w-full justify-center overflow-hidden px-4">
-        <div className="w-full max-w-4xl">
-          <CustomGithubCalendar />
-        </div>
-      </section>
-      <ResumeContactCta
-        resumePdfUrl={resumePdfUrl}
-        resumeWordUrl={resumeWordUrl}
-      />
+      <ResumeSkills skills={skills} />
+      <ResumeContact />
     </main>
   );
 };
diff --git a/src/components/AboutMeHero.tsx b/src/components/AboutMeHero.tsx
deleted file mode 100644
index c96d05fdf..000000000
--- a/src/components/AboutMeHero.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-'use client';
-
-import {useScrollToView} from '../utils/scroll-to-view-hook';
-import {GuideArrow} from './GuideArrow';
-import {Zoom} from 'react-awesome-reveal';
-import {BlurringImage} from './BlurringImage';
-import type {BlurImageType} from '../utils/image-blur.utils';
-
-const quote = [
-  'With great power',
-  'comes great',
-  'responsibility',
-  '- Superman',
-];
-
-export default function AboutMeHero({
-  img,
-  svg,
-}: Pick<BlurImageType, 'svg' | 'img'>) {
-  const {scrollToContent} = useScrollToView('#about-me-details');
-
-  return (
-    <div className="relative m-auto flex h-[92vh] max-w-[2100px] justify-center overflow-hidden">
-      <BlurringImage
-        alt="weird quote"
-        title="weird quote"
-        img={img}
-        svg={svg}
-        fill={true}
-        className="object-cover object-center"
-        priority={true}
-      />
-      <div
-        className="text-shadow absolute left-8 top-2 flex max-w-4xl
-          flex-col flex-wrap justify-start text-left sm:top-8"
-      >
-        {quote.map((word, i) => (
-          <Zoom
-            delay={i * 700 + i * i * 150}
-            key={i}
-            triggerOnce
-            className="last:mt-8"
-          >
-            <p className="bg-transparent text-4xl lg:text-6xl">{word}</p>
-          </Zoom>
-        ))}
-      </div>
-      <div className="absolute bottom-8 z-10">
-        <Zoom delay={4000} triggerOnce>
-          <GuideArrow onClick={scrollToContent} />
-        </Zoom>
-      </div>
-    </div>
-  );
-}
diff --git a/src/components/ClipboardCopyButton.tsx b/src/components/ClipboardCopyButton.tsx
index 8cc6c8fc2..0f8d869ac 100644
--- a/src/components/ClipboardCopyButton.tsx
+++ b/src/components/ClipboardCopyButton.tsx
@@ -59,23 +59,18 @@ function ClipboardCopyButton({value}: ClipboardCopyButtonProps) {
 
   return (
     <button
-      className="flex items-center border-none bg-transparent text-neutral-700 dark:text-neutral-300"
+      type="button"
+      className="flex items-center gap-1.5 font-mono text-xs text-white/55 transition-colors hover:text-white"
       onClick={() => setState(State.Copy)}
     >
-      <span className="mr-2 inline-block">
-        {state === State.Copied ? 'Copied' : 'Copy'}
-      </span>
       {state === State.Copied ? (
-        <CheckIcon
-          className="text-primary-500 dark:text-primary-300"
-          size={20}
-        />
+        <CheckIcon aria-hidden className="text-terminal-accent" size={12} />
       ) : (
-        <CopyIcon
-          className="text-neutral-800 dark:text-neutral-300"
-          size={18}
-        />
+        <CopyIcon aria-hidden size={12} />
       )}
+      <span className="text-xs">
+        {state === State.Copied ? 'copied' : 'copy'}
+      </span>
     </button>
   );
 }
diff --git a/src/components/Coffee.tsx b/src/components/Coffee.tsx
deleted file mode 100644
index 0fa499bbd..000000000
--- a/src/components/Coffee.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import {SiBuymeacoffee} from '@react-icons/all-files/si/SiBuymeacoffee';
-import Link from './basic/NextLink';
-
-function Coffee() {
-  return (
-    <div className="relative flex w-full justify-center text-center">
-      <Link
-        href="https://l.carlogino.com/bmac"
-        target="_blank"
-        aria-label="Buy me a coffee"
-        rel="noreferrer"
-      >
-        <span
-          className="relative flex h-12
-            w-64 items-center justify-center
-            rounded-xl bg-orange-700 p-3
-            leading-3 text-neutral-800 hover:shadow-md
-          "
-        >
-          <SiBuymeacoffee size={30} fill="white" />
-          <p className="ml-3 text-xl text-neutral-50">Buy me a coffee</p>
-        </span>
-      </Link>
-    </div>
-  );
-}
-
-export default Coffee;
diff --git a/src/components/CustomGithubCalendar.tsx b/src/components/CustomGithubCalendar.tsx
index c63fc6d69..f775bc086 100644
--- a/src/components/CustomGithubCalendar.tsx
+++ b/src/components/CustomGithubCalendar.tsx
@@ -29,7 +29,7 @@ export default function CustomGithubCalendar() {
 
         <div className="max-w-lg overflow-x-auto pb-4  sm:max-w-6xl [&_.react-activity-calendar]:px-10">
           <GitHubCalendar
-            username="codegino"
+            username="pogicodes"
             fontSize={30}
             blockMargin={4}
             blockRadius={1}
diff --git a/src/components/DarkModeToggle.tsx b/src/components/DarkModeToggle.tsx
index 9f0edc07b..3e79e4d25 100644
--- a/src/components/DarkModeToggle.tsx
+++ b/src/components/DarkModeToggle.tsx
@@ -53,11 +53,11 @@ function DarkModeToggle() {
     <button
       type="button"
       aria-label={mounted ? `Switch to ${otherTheme} theme` : 'Toggle theme'}
-      className="group flex rounded-full bg-white/90 px-3 py-2 shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur-sm transition dark:bg-zinc-800/90 dark:ring-white/10 dark:hover:ring-white/20"
+      className="flex size-9 items-center justify-center rounded text-ink-muted transition-colors hover:bg-panel hover:text-ink"
       onClick={() => setTheme(otherTheme)}
     >
-      <SunIcon className="size-6 fill-zinc-50 stroke-yellow-700 transition group-hover:fill-zinc-100 group-hover:stroke-yellow-800 dark:hidden [@media(prefers-color-scheme:dark)]:fill-primary-50 [@media(prefers-color-scheme:dark)]:stroke-primary-300 [@media(prefers-color-scheme:dark)]:group-hover:fill-primary-50 [@media(prefers-color-scheme:dark)]:group-hover:stroke-primary-400" />
-      <MoonIcon className="not-[@media_(prefers-color-scheme:dark)]:fill-primary-400/10 hidden size-6 fill-zinc-700 stroke-zinc-500 transition dark:block [@media(prefers-color-scheme:dark)]:group-hover:stroke-zinc-400 not-[@media_(prefers-color-scheme:dark)]:stroke-primary-300" />
+      <SunIcon className="size-5 fill-none stroke-current dark:hidden" />
+      <MoonIcon className="hidden size-5 fill-none stroke-current dark:block" />
     </button>
   );
 }
diff --git a/src/components/Eye.tsx b/src/components/Eye.tsx
deleted file mode 100644
index 44f96f25e..000000000
--- a/src/components/Eye.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-'use client';
-import React, {useState, useEffect} from 'react';
-import {useBlink} from '../contexts/BlinkContext';
-
-export default function Eye() {
-  const isBlinking = useBlink();
-  const [position, setPosition] = useState({x: 0, y: 0});
-  const [isMouseOver, setIsMouseOver] = useState(false);
-  const eyeRef = React.useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const handleMouseMove = (event: MouseEvent) => {
-      if (eyeRef.current && !isBlinking) {
-        const rect = eyeRef.current.getBoundingClientRect();
-        const eyeX = rect.left + rect.width / 2;
-        const eyeY = rect.top + rect.height / 2;
-        const deltaX = event.clientX - eyeX;
-        const deltaY = event.clientY - eyeY;
-        const angle = Math.atan2(deltaY, deltaX);
-        const distance = Math.min(10, Math.hypot(deltaX, deltaY));
-        setPosition({
-          x: distance * Math.cos(angle),
-          y: distance * Math.sin(angle),
-        });
-      }
-    };
-
-    window.addEventListener('mousemove', handleMouseMove);
-    return () => window.removeEventListener('mousemove', handleMouseMove);
-  }, [isBlinking]);
-
-  return (
-    <div
-      ref={eyeRef}
-      onMouseEnter={() => setIsMouseOver(true)}
-      onMouseLeave={() => setIsMouseOver(false)}
-      style={{
-        width: 120,
-        height: 60,
-        backgroundColor: '#fff',
-        border: '5px solid #000',
-        borderRadius: '60px / 30px', // Oval shape for human eye
-        position: 'relative',
-        overflow: 'hidden',
-      }}
-    >
-      <div
-        style={{
-          width: 30,
-          height: 30,
-          backgroundColor: '#000',
-          borderRadius: '50%',
-          position: 'absolute',
-          top: '50%',
-          left: '50%',
-          transform: `translate(${position.x}px, ${position.y}px) translate(-50%, -50%)`,
-          transition: 'transform 0.1s',
-        }}
-      />
-      {/* Eyelid */}
-      <div
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          width: '100%',
-          height: '100%',
-          backgroundColor: '#ccc', // Set eyelid color to light gray
-          transform:
-            isBlinking || isMouseOver ? 'translateY(0%)' : 'translateY(-100%)',
-          transition: 'transform 0.15s',
-        }}
-      />
-    </div>
-  );
-}
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 9a70396b6..22d570908 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,11 +1,8 @@
-import NextLink from './basic/NextLink';
-import BookACallButton from './booking/BookACallButton';
-import {BottomRightShape} from './extras/BottomRightShape';
-import {TopLeftShape} from './extras/TopLeftShape';
-import SocialMedia from './social/SocialMedia';
 import type {FC} from 'react';
 import {createTranslation} from '../app/i18n/server';
-import BuyMeACoffeeIcon from './social/BuyMeACoffeeIcon';
+import NextLink from './basic/NextLink';
+import BookACallButton from './booking/BookACallButton';
+import {socialLinks} from './social/social-links';
 
 const CURRENT_YEAR = new Date().getFullYear();
 
@@ -13,44 +10,42 @@ const Footer: FC = async () => {
   const {t} = await createTranslation('common');
 
   return (
-    <footer className="relative flex h-64 w-full justify-center overflow-hidden bg-neutral-900 text-white md:h-40">
-      <TopLeftShape />
-      <BottomRightShape />
-      <div
-        className="flex w-full flex-col-reverse items-center justify-center gap-y-4 text-center
-      sm:max-w-2xl sm:text-right md:flex-row md:justify-around"
-      >
-        <div className="m-1">
+    <footer className="border-t border-line print:hidden">
+      <div className="mx-auto flex max-w-6xl flex-col gap-4 px-5 py-8 font-mono text-xs text-ink-muted lowercase sm:flex-row sm:items-center sm:justify-between">
+        <ul className="m-0 flex list-none flex-wrap gap-x-4 gap-y-1 p-0">
+          {socialLinks.map(social => (
+            <li key={social.url}>
+              <a
+                href={social.url}
+                target="_blank"
+                rel="noreferrer"
+                className="text-xs transition-colors hover:text-accent"
+              >
+                {social.label} ↗
+              </a>
+            </li>
+          ))}
+        </ul>
+        <div className="flex flex-wrap items-center gap-x-4 gap-y-1">
+          <BookACallButton
+            label={t('bookACall')}
+            title={t('bookACallTitle')}
+            closeLabel={t('closeDialog')}
+            className="inline-flex items-center gap-1.5 text-xs lowercase transition-colors hover:text-accent"
+          />
           <NextLink
-            href="/sitemap.xml"
-            aria-label="Sitemap"
-            className="mr-4 font-bold"
+            href="/rss.xml"
+            className="text-xs transition-colors hover:text-accent"
           >
-            {t('sitemap')}
+            {t('rssFeed')}
           </NextLink>
           <NextLink
-            href="/rss.xml"
-            aria-label="Rss Feed"
-            rel="noreferrer"
-            className=" font-bold"
+            href="/sitemap.xml"
+            className="text-xs transition-colors hover:text-accent"
           >
-            {t('rssFeed')}
+            {t('sitemap')}
           </NextLink>
-          <p className="mt-2">{t('allRightsReserved')}</p>
-          <p>© Carlo Gino Catapang {CURRENT_YEAR}</p>
-        </div>
-        <div className="flex flex-col items-center gap-y-3">
-          <BookACallButton
-            label={t('bookACall')}
-            title={t('bookACallTitle')}
-            closeLabel={t('closeDialog')}
-            className="inline-flex items-center gap-2 rounded-lg border-2 border-neutral-600 px-4 py-2 text-sm font-bold transition-colors duration-200 hover:border-primary-300 hover:text-primary-300"
-          />
-          <div className="flex items-center">
-            <BuyMeACoffeeIcon className="mr-1" />
-
-            <SocialMedia />
-          </div>
+          <span className="text-xs">© {CURRENT_YEAR} Carlo Gino Catapang</span>
         </div>
       </div>
     </footer>
diff --git a/src/components/FullScreenWrapper.tsx b/src/components/FullScreenWrapper.tsx
deleted file mode 100644
index e9515eeea..000000000
--- a/src/components/FullScreenWrapper.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import type {FunctionComponent, ReactNode} from 'react';
-import clsx from 'clsx';
-import {BottomLeftShape} from './extras/BottomLeftShape';
-import {BottomRightShape} from './extras/BottomRightShape';
-import {TopLeftShape} from './extras/TopLeftShape';
-import {TopRightShape} from './extras/TopRightShape';
-
-export const FullScreenWrapper: FunctionComponent<{
-  tr?: boolean;
-  tl?: boolean;
-  bl?: boolean;
-  br?: boolean;
-  id?: string;
-  children: ReactNode;
-  className?: string;
-}> = ({children, tr, bl, br, tl, className, ...props}) => {
-  const classNames =
-    'min-h-screen min-w-full flex flex-col justify-center relative overflow-hidden';
-
-  return (
-    <div className={clsx(classNames, className)} {...props}>
-      {tr && <TopRightShape />}
-      {bl && <BottomLeftShape />}
-      {tl && <TopLeftShape />}
-      {br && <BottomRightShape />}
-      {children}
-    </div>
-  );
-};
diff --git a/src/components/GreetingsContent.tsx b/src/components/GreetingsContent.tsx
deleted file mode 100644
index 4bbfa7f18..000000000
--- a/src/components/GreetingsContent.tsx
+++ /dev/null
@@ -1,184 +0,0 @@
-'use client';
-import {useCallback, useMemo, useState} from 'react';
-import type {FC, FunctionComponent} from 'react';
-import {BsChevronRight} from '@react-icons/all-files/bs/BsChevronRight';
-import {BsTerminalFill} from '@react-icons/all-files/bs/BsTerminalFill';
-import clsx from 'clsx';
-import {useScrollToView} from '../utils/scroll-to-view-hook';
-import type {TypewriterChunk, TypewriterStep} from '../utils/typewriter-hook';
-import {useTypewriter} from '../utils/typewriter-hook';
-import {GuideArrow} from './GuideArrow';
-import {useTranslation} from '@/app/i18n/client';
-
-type TypedLine = {
-  hasPrompt: boolean;
-  texts: Extract<TypewriterChunk, {kind: 'text'}>[];
-};
-
-const GreetingsContent: FC = () => {
-  const {scrollToContent} = useScrollToView('#resume-summary');
-  const [isGuideVisible, setIsGuideVisible] = useState(false);
-
-  const {t} = useTranslation('home');
-
-  const steps = useMemo<TypewriterStep[]>(
-    () => [
-      {kind: 'prompt'},
-      {kind: 'delay', ms: 1200},
-      {kind: 'text', value: t('greetings.1')},
-      {kind: 'break'},
-      {kind: 'prompt'},
-      {kind: 'delay', ms: 500},
-      {kind: 'break'},
-      {kind: 'prompt'},
-      {kind: 'delay', ms: 500},
-      {kind: 'text', value: t('greetings.2')},
-      {kind: 'delay', ms: 500},
-      {kind: 'text', value: t('greetings.3')},
-      {kind: 'delay', ms: 1000},
-      {kind: 'backspace', count: Number(t('greetings.del1'))},
-      {kind: 'text', value: t('greetings.4')},
-      {kind: 'delay', ms: 1200},
-      {kind: 'backspace', count: Number(t('greetings.del2'))},
-      {
-        kind: 'text',
-        value: t('greetings.5'),
-        className: 'font-bold text-primary-500 dark:text-primary-100',
-      },
-      {kind: 'delay', ms: 200},
-      {kind: 'break'},
-      {kind: 'prompt'},
-      {kind: 'text', value: t('greetings.6')},
-      {kind: 'delay', ms: 1500},
-      {kind: 'break'},
-      {kind: 'prompt'},
-      {kind: 'delay', ms: 300},
-      {kind: 'break'},
-      {kind: 'prompt'},
-      {kind: 'text', value: t('greetings.7')},
-      {kind: 'delay', ms: 300},
-      {kind: 'text', value: t('greetings.8')},
-      {kind: 'delay', ms: 300},
-      {kind: 'text', value: t('greetings.9')},
-      {kind: 'break'},
-      {kind: 'prompt'},
-      {kind: 'text', value: t('greetings.10')},
-      {kind: 'break'},
-      {kind: 'prompt'},
-      {kind: 'text', value: t('greetings.11')},
-      {kind: 'break'},
-      {kind: 'prompt'},
-      {kind: 'delay', ms: 300},
-      {kind: 'break'},
-      {kind: 'prompt'},
-      {kind: 'delay', ms: 300},
-      {kind: 'break'},
-      {kind: 'prompt'},
-      {kind: 'delay', ms: 300},
-      {kind: 'break'},
-      {kind: 'prompt'},
-      {kind: 'delay', ms: 300},
-      {kind: 'break'},
-      {kind: 'prompt'},
-      {kind: 'delay', ms: 1000},
-      {kind: 'text', value: `${t('greetings.12')}.`},
-    ],
-    [t],
-  );
-
-  const onDone = useCallback(() => setIsGuideVisible(true), []);
-  const {chunks} = useTypewriter(steps, {charDelay: 10, onDone});
-
-  const lines = useMemo(
-    () =>
-      chunks.reduce<TypedLine[]>(
-        (grouped, chunk) => {
-          if (chunk.kind === 'break') {
-            return [...grouped, {hasPrompt: false, texts: []}];
-          }
-
-          const current = grouped.at(-1)!;
-          const updated =
-            chunk.kind === 'prompt'
-              ? {...current, hasPrompt: true}
-              : {...current, texts: [...current.texts, chunk]};
-
-          return [...grouped.slice(0, -1), updated];
-        },
-        [{hasPrompt: false, texts: []}],
-      ),
-    [chunks],
-  );
-
-  return (
-    <>
-      <div className="relative flex h-screen w-screen items-center justify-center pb-[25vh] md:max-w-160">
-        <div
-          className="
-            m-2 w-full overflow-hidden rounded-lg text-[7px] ring-2
-            ring-black/90 @container dark:ring-zinc-500/90  sm:m-0 sm:w-[95%] lg:w-200
-          "
-        >
-          <div className="relative flex h-8 min-h-8 items-center border-b border-black/20 bg-zinc-100 pl-2 dark:border-white/20 dark:bg-neutral-700">
-            <div className="mr-2 min-h-3 min-w-3 rounded-full bg-red-500" />
-            <div className="mr-2 min-h-3 min-w-3 rounded-full bg-yellow-300" />
-            <div className="mr-3 min-h-3 min-w-3 rounded-full bg-green-600" />
-            <BsTerminalFill size={18} />
-            <div className="relative w-full justify-self-center text-center font-mono text-base md:absolute">
-              {t('greetings.filename')}
-            </div>
-          </div>
-          <div
-            className="h-84 bg-neutral-100 p-1
-            font-mono text-[8px] leading-[1.2] text-neutral-900 @sm:h-80 @md:h-76 dark:bg-neutral-800 dark:text-neutral-50"
-          >
-            {lines.map((line, lineIndex) => (
-              <div key={lineIndex} className="flex items-center">
-                {line.hasPrompt ? <StyledBsChevronRight /> : null}
-                {/* Text stays in a single inline flow so spaces between chunks survive. */}
-                <div className="min-w-0">
-                  {line.texts.map((chunk, index) => (
-                    <Span key={index} className={chunk.className}>
-                      {chunk.value}
-                    </Span>
-                  ))}
-                  {lineIndex === lines.length - 1 ? (
-                    <Span className="animate-blink">|</Span>
-                  ) : null}
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-      {isGuideVisible ? (
-        <div className="absolute bottom-[10vh]">
-          <GuideArrow onClick={scrollToContent} />
-        </div>
-      ) : null}
-    </>
-  );
-};
-
-const StyledBsChevronRight = () => {
-  return (
-    <BsChevronRight className="shrink-0 text-[0.8rem] text-primary-700 dark:text-primary-100 xs:text-xs sm:text-sm md:text-base" />
-  );
-};
-
-const Span: FunctionComponent<{
-  className?: string;
-  children: React.ReactNode;
-}> = props => {
-  return (
-    <span
-      {...props}
-      className={clsx(
-        'text-[0.9rem] xs:text-sm sm:text-sm  md:text-base',
-        props.className,
-      )}
-    />
-  );
-};
-
-export default GreetingsContent;
diff --git a/src/components/GuideArrow.tsx b/src/components/GuideArrow.tsx
deleted file mode 100644
index e73ae3a32..000000000
--- a/src/components/GuideArrow.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import type {MouseEventHandler} from 'react';
-import {BsChevronDoubleDown} from '@react-icons/all-files/bs/BsChevronDoubleDown';
-
-type Props = {
-  onClick: MouseEventHandler;
-};
-
-export const GuideArrow = ({onClick}: Props) => {
-  return (
-    <div className="flex size-16 animate-bounce cursor-pointer items-center justify-center rounded-full bg-primary-600 text-3xl text-neutral-200">
-      <BsChevronDoubleDown
-        size={37}
-        className="guide-arrow"
-        onClick={onClick}
-      />
-    </div>
-  );
-};
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
deleted file mode 100644
index 8ea7d1314..000000000
--- a/src/components/Hero.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-'use client';
-import {useScrollToView} from '../utils/scroll-to-view-hook';
-import {GuideArrow} from './GuideArrow';
-import {BottomRightShape} from './extras/BottomRightShape';
-import {useTranslation} from '../app/i18n/client';
-import {Zoom} from 'react-awesome-reveal';
-import {BlurringImage} from './BlurringImage';
-import type {BlurImageType} from '../utils/image-blur.utils';
-
-export default function Hero({img, svg}: Pick<BlurImageType, 'svg' | 'img'>) {
-  const {scrollToContent} = useScrollToView('#greetings');
-
-  const {t} = useTranslation('home');
-
-  return (
-    <div className="relative flex h-[95vh] w-full items-center justify-center overflow-hidden">
-      <BlurringImage
-        alt="black hole"
-        title="black hole"
-        img={img}
-        svg={svg}
-        fill={true}
-        className="object-cover object-center"
-        priority={true}
-      />
-      <div className="absolute flex flex-col items-center sm:ml-8 xl:ml-8 2xl:ml-12">
-        <Zoom cascade duration={1500} delay={200} triggerOnce>
-          <h2 className="text-shadow text-center text-5xl text-white xl:text-6xl">
-            {t('hello')}
-          </h2>
-          <p className="text-shadow text-center text-3xl text-white">
-            {t('welcome')}
-          </p>
-        </Zoom>
-      </div>
-      <div className="absolute bottom-[8vh] z-10">
-        <Zoom delay={1900}>
-          <GuideArrow onClick={scrollToContent} />
-        </Zoom>
-      </div>
-      <BottomRightShape />
-    </div>
-  );
-}
diff --git a/src/components/ParallaxEyes.tsx b/src/components/ParallaxEyes.tsx
deleted file mode 100644
index 5fc0343fd..000000000
--- a/src/components/ParallaxEyes.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-'use client';
-import React, {useEffect, useState} from 'react';
-import Eye from './Eye';
-import {BlinkProvider} from '../contexts/BlinkContext';
-
-const ParallaxEyes: React.FC = () => {
-  const [gap, setGap] = useState(16); // Initial gap is 8px
-  const [offsetY, setOffsetY] = useState(0); // Initial vertical offset
-
-  useEffect(() => {
-    const handleScroll = () => {
-      const scrollY = window.scrollY;
-      // Adjust the gap based on scroll position
-      const newGap = 16 + scrollY * 0.1;
-      // Adjust the vertical position based on scroll position
-      const newOffsetY = scrollY * 0.1; // Adjust the multiplier as needed
-
-      setGap(newGap);
-      setOffsetY(newOffsetY);
-    };
-
-    window.addEventListener('scroll', handleScroll);
-    return () => window.removeEventListener('scroll', handleScroll);
-  }, []);
-
-  return (
-    <BlinkProvider>
-      <div
-        className="-pb-[15vh] sticky top-0 flex pt-[15vh]"
-        style={{
-          gap: `${gap}px`,
-          transform: `translateY(${offsetY}px)`,
-        }}
-      >
-        <Eye />
-        <Eye />
-      </div>
-    </BlinkProvider>
-  );
-};
-
-export default ParallaxEyes;
diff --git a/src/components/SectionLabel.tsx b/src/components/SectionLabel.tsx
new file mode 100644
index 000000000..42f97c510
--- /dev/null
+++ b/src/components/SectionLabel.tsx
@@ -0,0 +1,30 @@
+import type {ReactNode} from 'react';
+import clsx from 'clsx';
+
+/** Small mono "// label" used as the heading of every home section. */
+export default function SectionLabel({
+  as: Tag = 'h2',
+  id,
+  className,
+  children,
+}: {
+  as?: 'h2' | 'p';
+  id?: string;
+  className?: string;
+  children: ReactNode;
+}) {
+  return (
+    <Tag
+      id={id}
+      className={clsx(
+        'm-0 mb-4 font-mono text-xs font-medium text-ink-muted lowercase',
+        className,
+      )}
+    >
+      <span aria-hidden className="text-xs text-accent">
+        //{' '}
+      </span>
+      {children}
+    </Tag>
+  );
+}
diff --git a/src/components/SubscribeForm.tsx b/src/components/SubscribeForm.tsx
index 1e9383887..9d001f2f3 100644
--- a/src/components/SubscribeForm.tsx
+++ b/src/components/SubscribeForm.tsx
@@ -1,115 +1,97 @@
 'use client';
-import {BiCool} from '@react-icons/all-files/bi/BiCool';
-import {RiSpamLine} from '@react-icons/all-files/ri/RiSpamLine';
+import clsx from 'clsx';
 import {useRouter} from 'next/navigation';
 import type {SubmitEvent} from 'react';
-import {useState} from 'react';
-import {Fade} from 'react-awesome-reveal';
+import {useId, useState} from 'react';
 import {useTranslation} from '../app/i18n/client';
-import Button from './basic/Button';
-import Input from './basic/Input';
 import {addSubscriberAction} from './subscribe.action';
 
-interface FormElements extends HTMLFormControlsCollection {
-  firstName: HTMLInputElement;
-  lastName: HTMLInputElement;
-  email: HTMLInputElement;
-}
-interface SubscribeFormElement extends HTMLFormElement {
-  readonly elements: FormElements;
-}
+const inputClass =
+  'w-full min-w-0 rounded-md border border-line bg-canvas px-3 py-2 text-sm outline-none focus:border-accent';
 
-const SubscribeForm = () => {
+/** Newsletter sign-up fields. `inline` puts them on one row from `sm` up. */
+export default function SubscribeForm({
+  layout = 'stacked',
+  className,
+}: {
+  layout?: 'stacked' | 'inline';
+  className?: string;
+}) {
+  const {t} = useTranslation('newsletter');
+  const router = useRouter();
+  const id = useId();
   const [error, setError] = useState('');
   const [isLoading, setIsLoading] = useState(false);
 
-  const router = useRouter();
-
-  const {t} = useTranslation('newsletter');
-
-  const handleSubmit = async (e: SubmitEvent<HTMLFormElement>) => {
-    e.preventDefault();
+  const handleSubmit = async (event: SubmitEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const form = new FormData(event.currentTarget);
     setIsLoading(true);
-    const {email, firstName, lastName} = (
-      e.currentTarget as SubscribeFormElement
-    ).elements;
+    setError('');
 
-    await addSubscriberAction({
-      email: email.value,
-      firstName: firstName.value,
-      lastName: lastName.value,
-    }).then(res => {
-      if (res.success) {
-        router.push('/signup-success');
-      } else {
-        setError(res?.message as string);
-      }
+    const result = await addSubscriberAction({
+      email: String(form.get('email')),
+      firstName: String(form.get('firstName')),
+      lastName: '',
     });
 
-    setIsLoading(false);
+    if (result.success) {
+      router.push('/signup-success');
+    } else {
+      setError(result.message ?? '');
+      setIsLoading(false);
+    }
   };
 
   return (
-    <section className="mx-auto w-full max-w-4xl px-4 py-16 sm:py-20">
-      <Fade direction="up" triggerOnce>
-        <div className="flex flex-col items-center rounded-2xl border border-neutral-200 bg-linear-to-br from-neutral-50 to-primary-50 p-8 text-center shadow-xs dark:border-neutral-700 dark:from-neutral-800 dark:to-neutral-800 sm:p-12">
-          <div className="max-w-2xl text-center">
-            <h2 className="m-0 text-3xl font-bold sm:text-4xl">{t('title')}</h2>
-            <h3 className="mx-auto mt-3 max-w-xl text-lg font-normal text-neutral-600 dark:text-neutral-300">
-              {t('subtitle')}
-            </h3>
-            <h4 className="mt-4 font-normal text-neutral-700 dark:text-neutral-400">
-              {t('noSpam')}
-              <RiSpamLine size={25} />. {t('unsubscribe')}
-              <BiCool size={25} />
-            </h4>
-          </div>
-
-          <form
-            onSubmit={handleSubmit}
-            className="relative mt-8 w-full max-w-xl overflow-hidden rounded-2xl border border-neutral-200 bg-white/90 shadow-xs dark:border-neutral-600 dark:bg-neutral-800"
-            id="1j27oq"
-          >
-            <div className="flex items-center justify-center pt-6">
-              <p className="text-2xl font-semibold">{t('form.title')}</p>
-            </div>
-            <div className="flex flex-col gap-4 px-8 py-6">
-              <Input
-                type="email"
-                placeholder={'*' + t('form.email')}
-                name="email"
-                className="mb-2"
-                required
-              />
-              <Input
-                type="text"
-                placeholder={'*' + t('form.firstName')}
-                name="firstName"
-                required
-              />
-              <Input
-                type="text"
-                placeholder={t('form.lastName') ?? ''}
-                name="lastName"
-              />
-              {error && (
-                <div className="w-full text-center font-bold text-red-500">
-                  {error}
-                </div>
-              )}
-              <Button
-                type="submit"
-                className="mt-4 text-xl font-bold disabled:cursor-not-allowed disabled:bg-slate-500 disabled:text-slate-50"
-                disabled={isLoading}
-              >
-                {t('form.button')}
-              </Button>
-            </div>
-          </form>
-        </div>
-      </Fade>
-    </section>
+    <form onSubmit={handleSubmit} className={className}>
+      <div
+        className={clsx(
+          'flex flex-col gap-2',
+          layout === 'inline' && 'sm:flex-row',
+        )}
+      >
+        <label className="sr-only" htmlFor={`${id}-first-name`}>
+          {t('form.firstName')}
+        </label>
+        <input
+          id={`${id}-first-name`}
+          name="firstName"
+          required
+          // `given-name` is a valid token; the rule's list is incomplete.
+          // oxlint-disable-next-line jsx-a11y/autocomplete-valid
+          autoComplete="given-name"
+          placeholder={t('form.firstName')}
+          className={inputClass}
+        />
+        <label className="sr-only" htmlFor={`${id}-email`}>
+          {t('form.email')}
+        </label>
+        <input
+          id={`${id}-email`}
+          name="email"
+          type="email"
+          required
+          autoComplete="email"
+          placeholder="you@example.com"
+          className={inputClass}
+        />
+        <button
+          type="submit"
+          disabled={isLoading}
+          className="shrink-0 rounded-md bg-accent px-4 py-2 text-sm font-medium text-accent-ink disabled:opacity-60"
+        >
+          {t('form.button')}
+        </button>
+      </div>
+      {error ? (
+        <p
+          role="alert"
+          className="m-0 mt-2 text-sm text-red-600 dark:text-red-400"
+        >
+          {error}
+        </p>
+      ) : null}
+    </form>
   );
-};
-
-export default SubscribeForm;
+}
diff --git a/src/components/TechStackCarousel.tsx b/src/components/TechStackCarousel.tsx
deleted file mode 100644
index 8677b769c..000000000
--- a/src/components/TechStackCarousel.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-'use client';
-import Image from 'next/image';
-import {Carousel} from 'react-responsive-carousel';
-import 'react-responsive-carousel/lib/styles/carousel.min.css';
-
-export type TechStack = {
-  name: string;
-  icon?: string;
-  url?: string;
-};
-
-type Props = {
-  techStacks: TechStack[];
-};
-
-export default function TechStackCarousel({techStacks}: Props) {
-  return (
-    <div className="flex justify-center overflow-hidden text-center">
-      <div>
-        <Carousel
-          infiniteLoop
-          autoPlay
-          interval={3000}
-          showStatus={false}
-          swipeable
-          emulateTouch
-          showThumbs={false}
-        >
-          {techStacks.map(techstack => {
-            return (
-              <div
-                className="bg-light h-[300px] w-[40px] py-10"
-                key={techstack.name}
-              >
-                {techstack.url ? (
-                  <Image
-                    loader={({src}) => src}
-                    src={techstack.url}
-                    fill={true}
-                    alt={techstack.name}
-                    title={techstack.name}
-                  />
-                ) : null}
-              </div>
-            );
-          })}
-        </Carousel>
-      </div>
-    </div>
-  );
-}
diff --git a/src/components/WakatimeCharts.tsx b/src/components/WakatimeCharts.tsx
deleted file mode 100644
index ba78fa07e..000000000
--- a/src/components/WakatimeCharts.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-'use client';
-import {Zoom} from 'react-awesome-reveal';
-import {useTranslation} from '../app/i18n/client';
-import NextLink from './basic/NextLink';
-
-export default function WakatimeCharts() {
-  const {t} = useTranslation('resume');
-
-  return (
-    <div className="flex w-full flex-col overflow-hidden py-4 sm:px-24">
-      <p className="mb-4 text-center text-lg">
-        {t('my')}&nbsp;
-        <NextLink
-          href="https://wakatime.com/@codegino"
-          target="_blank"
-          aria-label="Wakatime profile"
-          rel="noreferrer"
-          title="Link to my Wakatime profile"
-          className="underline-on-hover underline--dark text-lg text-primary-900 dark:text-primary-300"
-        >
-          Wakatime
-        </NextLink>
-        &nbsp;{t('activity')}
-      </p>
-      <Zoom triggerOnce>
-        <figure className="flex justify-center">
-          {/* oxlint-disable-next-line nextjs/no-img-element */}
-          <img
-            className="w-full max-w-md md:max-w-lg"
-            src="https://wakatime.com/share/@codegino/aa8c74ed-2174-445a-805d-e46a869c3b8b.svg"
-            alt="Wakatime coding activity chart"
-            loading="lazy"
-          />
-        </figure>
-      </Zoom>
-    </div>
-  );
-}
diff --git a/src/components/basic/Button.tsx b/src/components/basic/Button.tsx
deleted file mode 100644
index 61a9f8f70..000000000
--- a/src/components/basic/Button.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import {forwardRef, type JSX} from 'react';
-
-const Button = forwardRef<HTMLButtonElement, JSX.IntrinsicElements['button']>(
-  ({className = '', ...props}, ref) => {
-    let classNames =
-      'py-3 px-2 rounded-xl bg-primary-900 text-neutral-50 hover:bg-primary-800 text-light hover:shadow-xs hover:shadow-dark';
-
-    if (className) {
-      classNames += ` ${className}`;
-    }
-
-    return <button {...props} ref={ref} className={classNames} />;
-  },
-);
-
-Button.displayName = 'Button';
-
-export default Button;
diff --git a/src/components/basic/Input.tsx b/src/components/basic/Input.tsx
deleted file mode 100644
index 89316d469..000000000
--- a/src/components/basic/Input.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import {forwardRef, type JSX} from 'react';
-
-const Input = forwardRef<HTMLInputElement, JSX.IntrinsicElements['input']>(
-  ({color: _color, className = '', ...props}, ref) => (
-    <input
-      {...props}
-      ref={ref}
-      className={`text-normal w-full rounded-xl px-4 py-3 ring-1 ring-neutral-700 ${
-        className ? ` ${className}` : ''
-      }`}
-    />
-  ),
-);
-
-Input.displayName = 'Input';
-
-export default Input;
diff --git a/src/components/basic/RoundButton.tsx b/src/components/basic/RoundButton.tsx
deleted file mode 100644
index 700f2c965..000000000
--- a/src/components/basic/RoundButton.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React, {FunctionComponent} from 'react';
-import clsx from 'clsx';
-
-const RoundButton: FunctionComponent<{
-  onClick?: () => void;
-  className?: string;
-  children: React.ReactNode;
-}> = ({onClick = () => {}, className, children}) => {
-  return (
-    <div
-      className={clsx(
-        'box-content cursor-pointer rounded-full shadow-lg',
-        'flex size-10 items-center justify-center bg-white',
-        className,
-      )}
-      onClick={onClick}
-      role="presentation"
-    >
-      {children}
-    </div>
-  );
-};
-
-export default RoundButton;
diff --git a/src/components/blog/PostListItem.tsx b/src/components/blog/PostListItem.tsx
new file mode 100644
index 000000000..5c9019d64
--- /dev/null
+++ b/src/components/blog/PostListItem.tsx
@@ -0,0 +1,61 @@
+import Image from 'next/image';
+import NextLink from '@/components/basic/NextLink';
+import {getBlogBanner} from '@/data/blog-asset';
+import type {IBlogMetadata} from '@/models/mdxFiles';
+
+const formatDate = (date: string) =>
+  new Intl.DateTimeFormat('en', {
+    year: 'numeric',
+    month: 'short',
+    day: '2-digit',
+  }).format(new Date(date));
+
+/** One post in a list: cover thumbnail, date and tags, title, description. */
+export default function PostListItem({
+  blog,
+  priority = false,
+  headingLevel: Heading = 'h3',
+}: {
+  blog: IBlogMetadata;
+  priority?: boolean;
+  headingLevel?: 'h2' | 'h3';
+}) {
+  const banner = getBlogBanner(blog.slug);
+
+  return (
+    <NextLink
+      href={`/blog/${blog.slug}`}
+      className="group grid gap-5 sm:grid-cols-[208px_1fr]"
+    >
+      <div className="relative aspect-video overflow-hidden rounded-lg bg-panel ring-1 ring-line">
+        {banner ? (
+          <Image
+            src={banner}
+            alt={blog.bannerDescription ?? blog.title}
+            fill
+            priority={priority}
+            sizes="(max-width: 640px) 100vw, 208px"
+            className="object-cover transition-transform duration-300 group-hover:scale-[1.03] motion-reduce:transition-none"
+          />
+        ) : null}
+      </div>
+      <div>
+        <div className="flex items-baseline justify-between gap-4 font-mono text-xs text-ink-muted">
+          <time dateTime={blog.date} className="text-xs">
+            {formatDate(blog.date)}
+          </time>
+          <span className="text-right text-xs">
+            {blog.tags
+              .slice(0, 3)
+              .map(tag => `#${tag}`)
+              .join(' ')}
+          </span>
+        </div>
+        <Heading className="m-0 mt-2 text-left text-xl font-semibold tracking-tight group-hover:text-accent">
+          {blog.title}
+        </Heading>
+        <p className="m-0 mt-1.5 text-ink-muted">{blog.description}</p>
+      </div>
+    </NextLink>
+  );
+}
diff --git a/src/components/extras/BottomLeftShape.tsx b/src/components/extras/BottomLeftShape.tsx
deleted file mode 100644
index 66997246e..000000000
--- a/src/components/extras/BottomLeftShape.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import {CornerShape} from './Triangle';
-
-export const BottomLeftShape = () => (
-  <CornerShape className="bottom-left-shape" />
-);
diff --git a/src/components/extras/BottomRightShape.tsx b/src/components/extras/BottomRightShape.tsx
deleted file mode 100644
index 9d95c471e..000000000
--- a/src/components/extras/BottomRightShape.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import {CornerShape} from './Triangle';
-
-export const BottomRightShape = () => (
-  <CornerShape className="bottom-right-shape" />
-);
diff --git a/src/components/extras/TopLeftShape.tsx b/src/components/extras/TopLeftShape.tsx
deleted file mode 100644
index a84fdb06c..000000000
--- a/src/components/extras/TopLeftShape.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import {CornerShape} from './Triangle';
-
-export const TopLeftShape = () => <CornerShape className="top-left-shape" />;
diff --git a/src/components/extras/TopRightShape.tsx b/src/components/extras/TopRightShape.tsx
deleted file mode 100644
index 9a13fae76..000000000
--- a/src/components/extras/TopRightShape.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import {CornerShape} from './Triangle';
-
-export const TopRightShape = () => <CornerShape className="top-right-shape" />;
diff --git a/src/components/extras/Triangle.tsx b/src/components/extras/Triangle.tsx
deleted file mode 100644
index 96fab81fe..000000000
--- a/src/components/extras/Triangle.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import type {FunctionComponent} from 'react';
-
-export const CornerShape: FunctionComponent<{className?: any}> = ({
-  className,
-  ...props
-}) => {
-  let classNames = 'absolute h-5 w-5 z-10';
-
-  if (className) {
-    classNames += ` ${className}`;
-  }
-
-  return <div {...props} className={classNames} />;
-};
diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx
index 100dc19f0..0832de3a4 100644
--- a/src/components/header/Header.tsx
+++ b/src/components/header/Header.tsx
@@ -1,50 +1,121 @@
 'use client';
-import {FunctionComponent, useState} from 'react';
-import dynamic from 'next/dynamic';
-import {InView} from 'react-intersection-observer';
-import {TopLeftShape} from '../extras/TopLeftShape';
-import Logo from './Logo';
-import {LogoWrapper} from './LogoWrapper';
-import WideScreenContentImpl from './WideScreenContent';
-import {HeaderProvider, useHeader} from './header-context';
-import {useScrollDirection} from './use-scroll-direction';
+import {useState} from 'react';
+import clsx from 'clsx';
+import Image from 'next/image';
+import {usePathname} from 'next/navigation';
+import {useTranslation} from '../../app/i18n/client';
+import DarkModeToggle from '../DarkModeToggle';
+import NextLink from '../basic/NextLink';
+import {socialLinks} from '../social/social-links';
+import {navigationLinks} from './nav-links';
 
-const SmallScreenSidebar = dynamic(() => import('./SmallScreenSidebar'), {
-  ssr: false,
-});
-
-const FloatingLogo: FunctionComponent = () => {
-  const {showSidebar, isSidebarVisible} = useHeader();
-
-  return !isSidebarVisible ? (
-    <Logo
-      onClick={showSidebar}
-      className={'fixed left-[17px] top-3 z-100 animate-spin-fast'}
-    />
-  ) : null;
-};
+const isActive = (path: string | null, url: string) =>
+  !!path && url.startsWith('/') && (path === url || path.startsWith(`${url}/`));
 
 export default function Header() {
-  const [inView, setInView] = useState(false);
-  const {direction} = useScrollDirection();
+  const path = usePathname();
+  const {t} = useTranslation('common');
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  const links = navigationLinks.map(link => ({
+    ...link,
+    text: t(link.label).toLowerCase(),
+    active: isActive(path, link.url),
+  }));
 
   return (
-    <HeaderProvider>
-      <InView
-        as="header"
-        onChange={setInView}
-        className="relative flex h-16 min-h-16 items-center bg-neutral-900 px-2 py-0"
-      >
-        <TopLeftShape />
-        <LogoWrapper />
-        <WideScreenContentImpl />
-        {!inView && direction !== 'down' && (
-          <>
-            <FloatingLogo />
-          </>
-        )}
-        {direction !== 'down' && <SmallScreenSidebar />}
-      </InView>
-    </HeaderProvider>
+    <header className="sticky top-0 z-50 print:hidden border-b border-line bg-canvas/90 backdrop-blur">
+      <div className="mx-auto flex h-14 max-w-6xl items-center justify-between px-5">
+        <NextLink
+          href="/"
+          aria-label="Code Gino home"
+          className="flex items-center gap-2 font-mono text-sm font-semibold"
+        >
+          <Image
+            priority
+            src="/assets/logo.svg"
+            alt=""
+            width={28}
+            height={28}
+            className="size-7 rounded-full bg-white p-0.5"
+          />
+          codegino
+        </NextLink>
+
+        <nav aria-label="Main" className="hidden md:block">
+          <ul className="m-0 flex list-none items-center gap-1 p-0">
+            {links.map(link => (
+              <li key={link.url}>
+                <NextLink
+                  href={link.url}
+                  target={link.target}
+                  aria-current={link.active ? 'page' : undefined}
+                  className={clsx(
+                    'rounded px-2 py-1 font-mono text-sm transition-colors hover:bg-panel hover:text-ink',
+                    link.active ? 'text-accent' : 'text-ink-muted',
+                  )}
+                >
+                  ~/{link.text}
+                </NextLink>
+              </li>
+            ))}
+          </ul>
+        </nav>
+
+        <div className="flex items-center gap-1">
+          <DarkModeToggle />
+          <button
+            type="button"
+            aria-expanded={isMenuOpen}
+            aria-controls="mobile-menu"
+            onClick={() => setIsMenuOpen(open => !open)}
+            className="rounded px-2 py-1 font-mono text-sm text-ink-muted hover:bg-panel hover:text-ink md:hidden"
+          >
+            {isMenuOpen ? 'close' : 'menu'}
+          </button>
+        </div>
+      </div>
+
+      {isMenuOpen ? (
+        <nav
+          id="mobile-menu"
+          aria-label="Main"
+          className="border-t border-line px-5 pt-3 pb-5 md:hidden"
+        >
+          <ul className="m-0 list-none p-0">
+            {links.map(link => (
+              <li key={link.url}>
+                <NextLink
+                  href={link.url}
+                  target={link.target}
+                  aria-current={link.active ? 'page' : undefined}
+                  onClick={() => setIsMenuOpen(false)}
+                  className={clsx(
+                    'block py-2 font-mono text-base',
+                    link.active ? 'text-accent' : 'text-ink',
+                  )}
+                >
+                  ~/{link.text}
+                </NextLink>
+              </li>
+            ))}
+          </ul>
+          <ul className="m-0 mt-3 flex list-none flex-wrap gap-x-4 gap-y-1 border-t border-line p-0 pt-4 font-mono text-xs text-ink-muted">
+            {socialLinks.map(social => (
+              <li key={social.url}>
+                <a
+                  href={social.url}
+                  target="_blank"
+                  rel="noreferrer"
+                  className="text-xs hover:text-accent"
+                >
+                  {social.label.toLowerCase()} ↗
+                </a>
+              </li>
+            ))}
+          </ul>
+        </nav>
+      ) : null}
+    </header>
   );
 }
diff --git a/src/components/header/Logo.tsx b/src/components/header/Logo.tsx
deleted file mode 100644
index 6fefff244..000000000
--- a/src/components/header/Logo.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React, {FunctionComponent} from 'react';
-import clsx from 'clsx';
-import Image from 'next/image';
-import RoundButton from '../basic/RoundButton';
-
-const Logo: FunctionComponent<{onClick?: () => void; className?: string}> = ({
-  onClick = () => {},
-  className,
-}) => {
-  return (
-    <RoundButton
-      onClick={onClick}
-      className={clsx(
-        'mr-0 flex items-center justify-center rounded-full bg-white text-black',
-        className,
-      )}
-    >
-      <Image
-        priority
-        src="/assets/logo.svg"
-        height={26}
-        width={26}
-        className="size-8"
-        alt="CG"
-        title="CG"
-        aria-label="CG Logo"
-      />
-    </RoundButton>
-  );
-};
-
-export default Logo;
diff --git a/src/components/header/LogoWrapper.tsx b/src/components/header/LogoWrapper.tsx
deleted file mode 100644
index 0620d0ce8..000000000
--- a/src/components/header/LogoWrapper.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import type {FunctionComponent} from 'react';
-import clsx from 'clsx';
-import {usePathname} from 'next/navigation';
-import NextLink from '../basic/NextLink';
-import Logo from './Logo';
-import {useHeader} from './header-context';
-import {twMerge} from 'tailwind-merge';
-
-export const LogoWrapper: FunctionComponent<{className?: string}> = ({
-  className,
-}) => {
-  const {showSidebar, isSidebarVisible} = useHeader();
-  const path = usePathname();
-
-  return (
-    <div className={clsx('ml-2.5 mr-6 flex min-w-max items-center', className)}>
-      <div className="relative -left-px z-50 size-10 lg:hidden ">
-        {!isSidebarVisible && (
-          <Logo className="animate-spin-fast" onClick={showSidebar} />
-        )}
-      </div>
-      <Logo className="relative -left-px hidden cursor-default  lg:flex" />
-
-      <NextLink href="/" aria-label="Code Gino">
-        <span
-          className={twMerge(
-            'underline-on-hover ml-2 text-2xl font-bold text-neutral-50',
-            path === '/' && 'text-primary-400',
-          )}
-        >
-          Code Gino
-        </span>
-      </NextLink>
-    </div>
-  );
-};
diff --git a/src/components/header/SmallScreenSidebar.tsx b/src/components/header/SmallScreenSidebar.tsx
deleted file mode 100644
index f8b7c815e..000000000
--- a/src/components/header/SmallScreenSidebar.tsx
+++ /dev/null
@@ -1,212 +0,0 @@
-import {AiOutlineClose} from '@react-icons/all-files/ai/AiOutlineClose';
-import {FaEnvelopeSquare} from '@react-icons/all-files/fa/FaEnvelopeSquare';
-import {FaFacebookMessenger} from '@react-icons/all-files/fa/FaFacebookMessenger';
-import clsx from 'clsx';
-import {usePathname} from 'next/navigation';
-import type {FunctionComponent, MouseEvent} from 'react';
-import {useRef} from 'react';
-import {CSSTransition} from 'react-transition-group';
-import {useTranslation} from '../../app/i18n/client';
-import DarkModeToggle from '../DarkModeToggle';
-import NextLink from '../basic/NextLink';
-import RoundButton from '../basic/RoundButton';
-import CustomIcon from '../icon/CustomIcon';
-import BuyMeACoffeeIcon from '../social/BuyMeACoffeeIcon';
-import SocialMedia from '../social/SocialMedia';
-import {useHeader} from './header-context';
-import {navigationLinks} from './nav-links';
-
-const sidebarLinks = [
-  {
-    url: '/',
-    label: 'home',
-  },
-  ...navigationLinks,
-];
-
-const CURRENT_YEAR = new Date().getFullYear();
-
-const SmallScreenSidebar: FunctionComponent = () => {
-  const EMAIL_ADDRESS = 'carloginocatapang@gmail.com';
-  const nodeRef = useRef(null);
-  const {hideSidebar, isSidebarVisible} = useHeader();
-  const path = usePathname() as string;
-
-  const sidebarClose = (e: MouseEvent<HTMLElement>) => {
-    e.stopPropagation();
-    hideSidebar();
-  };
-
-  const {t} = useTranslation('common');
-
-  return (
-    <>
-      {isSidebarVisible && (
-        <RoundButton
-          className="fixed left-[17px] top-3 z-100 animate-spin-fast"
-          onClick={hideSidebar}
-        >
-          <AiOutlineClose
-            size={32}
-            className="select-none fill-neutral-900 outline-hidden"
-          />
-        </RoundButton>
-      )}
-      <CSSTransition
-        in={isSidebarVisible}
-        timeout={100}
-        classNames="fade"
-        unmountOnExit
-        nodeRef={nodeRef}
-      >
-        <div
-          className="sidebar cursor-pointer"
-          onClick={sidebarClose}
-          ref={nodeRef}
-          role="presentation"
-        >
-          <div
-            onClick={e => e.stopPropagation()}
-            role="presentation"
-            className={clsx(
-              'absolute left-0 top-0 flex h-screen w-80 flex-col bg-neutral-50 dark:bg-neutral-900',
-              'cursor-default items-start p-4 text-2xl leading-10 shadow-md shadow-neutral-800',
-            )}
-          >
-            <div className={clsx('relative flex min-w-max items-center pb-4')}>
-              <span className="ml-14 text-2xl font-bold">Code Gino</span>
-            </div>
-            <section className="sidebar__content relative flex size-full flex-col justify-between overflow-y-auto">
-              <div>
-                <h3 className="mb-0 mt-3 text-xl">Links</h3>
-
-                <nav>
-                  <ul className="flex flex-col items-start">
-                    {sidebarLinks.map(link => (
-                      <li
-                        key={link.label}
-                        onClick={sidebarClose}
-                        role="presentation"
-                      >
-                        <NextLink
-                          href={link.url}
-                          className={clsx(
-                            'px-2 text-lg font-semibold hover:text-primary-600',
-                            {
-                              'text-primary-900 dark:text-primary-300':
-                                (link.url === '/' && path === '/') ||
-                                (link.url !== '/' && path.includes(link.url)),
-                            },
-                          )}
-                          aria-label={t(link.label)}
-                        >
-                          {t(link.label)}
-                        </NextLink>
-                      </li>
-                    ))}
-                  </ul>
-                </nav>
-
-                <h3 className="mb-0 mt-3 text-xl">Social</h3>
-                <div className="flex items-center [&_.icon]:text-neutral-900 dark:[&_.icon]:text-neutral-50">
-                  <SocialMedia />
-                  <BuyMeACoffeeIcon className="ml-4 [&_.icon]:fill-orange-700 hover:[&_.icon]:fill-orange-600" />
-                </div>
-                <h3 className="mb-0 mt-3 text-xl">Contact me</h3>
-                <div>
-                  <NextLink
-                    href={`mailto:${EMAIL_ADDRESS}`}
-                    target="_blank"
-                    title="Email me"
-                    aria-label="Email Me"
-                    rel="noreferrer"
-                    className="mr-2"
-                  >
-                    <CustomIcon
-                      color="#ea4335"
-                      title="Email Me"
-                      icon={FaEnvelopeSquare}
-                      hoverColor="red"
-                      size={30}
-                    />
-                  </NextLink>
-                  <NextLink
-                    href={'https://m.me/codegino'}
-                    target="_blank"
-                    title="Send me a facebook message"
-                    aria-label="Facebook Messenger"
-                  >
-                    <CustomIcon
-                      color="#3b5998"
-                      icon={FaFacebookMessenger}
-                      title="Facebook Messenger"
-                      hoverColor="blue"
-                      size={30}
-                    />
-                  </NextLink>
-                </div>
-                <section className="text-left">
-                  <h3 className="mb-0 mt-3 text-xl">Settings</h3>
-
-                  <div className="flex items-center py-2">
-                    <DarkModeToggle />
-                  </div>
-                </section>
-              </div>
-
-              <div className="flex flex-col">
-                <p>All rights reserved</p>
-                <p>© Carlo Gino Catapang {CURRENT_YEAR}</p>
-              </div>
-            </section>
-          </div>
-          <style jsx>{`
-            .sidebar {
-              position: fixed;
-              top: 0;
-              left: 0;
-              z-index: 20;
-              height: 100vh;
-              width: 200vw;
-              transition: transform 0.2s;
-            }
-
-            .sidebar__content {
-              -ms-overflow-style: none;
-              scrollbar-width: none;
-              overflow-y: scroll;
-            }
-
-            .sidebar__content::-webkit-scrollbar {
-              display: none;
-            }
-
-            // enter from
-            .sidebar.fade-enter {
-              transform: translateX(-100%);
-            }
-
-            // enter to
-            .sidebar.fade-enter-active {
-              transform: translateX(0%);
-            }
-
-            // exit from
-            .sidebar.fade-exit {
-              transform: translateX(0%);
-              transition: transform 2s;
-            }
-
-            // exit to
-            .sidebar.fade-exit-active {
-              transform: translateX(-100%);
-              transition: transform 2s;
-            }
-          `}</style>
-        </div>
-      </CSSTransition>
-    </>
-  );
-};
-
-export default SmallScreenSidebar;
diff --git a/src/components/header/WideScreenContent.tsx b/src/components/header/WideScreenContent.tsx
deleted file mode 100644
index e46deb0f1..000000000
--- a/src/components/header/WideScreenContent.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import clsx from 'clsx';
-import {usePathname} from 'next/navigation';
-import NextLink from '../basic/NextLink';
-import SocialMedia from '../social/SocialMedia';
-import {navigationLinks} from './nav-links';
-import {useTranslation} from '../../app/i18n/client';
-import BuyMeACoffeeIcon from '../social/BuyMeACoffeeIcon';
-import DarkModeToggle from '../DarkModeToggle';
-
-export default function WideScreenContentImpl() {
-  const path = usePathname();
-
-  const {t} = useTranslation('common');
-
-  return (
-    <div className="hidden w-full items-center justify-between lg:flex ">
-      <nav className="mx-auto items-center">
-        <ul className="m-0 flex items-center p-0">
-          {navigationLinks.map(link => (
-            <li
-              key={link.label}
-              className="underline-on-hover mr-3 text-neutral-100 last:mr-0"
-            >
-              <NextLink
-                href={link.url}
-                className={clsx('font-semibold hover:text-primary-200', {
-                  'text-primary-300': path?.includes(link.url),
-                })}
-                target={link.target}
-                aria-label={t(link.label)}
-              >
-                <span className="text-lg">{t(link.label)}</span>
-              </NextLink>
-            </li>
-          ))}
-        </ul>
-      </nav>
-      <div className="flex items-center pr-3">
-        <SocialMedia />
-        <BuyMeACoffeeIcon className="ml-4" />
-        <div className="ml-3 h-full">
-          <DarkModeToggle />
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/components/header/header-context.tsx b/src/components/header/header-context.tsx
deleted file mode 100644
index 111545e27..000000000
--- a/src/components/header/header-context.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import {createContext, useContext, useState} from 'react';
-import type {Dispatch, FunctionComponent, SetStateAction} from 'react';
-
-const HeaderContext = createContext<unknown>(null);
-
-export const HeaderProvider: FunctionComponent<{children: React.ReactNode}> = ({
-  children,
-}) => {
-  const state = useState(false);
-
-  return (
-    <HeaderContext.Provider value={state}>{children}</HeaderContext.Provider>
-  );
-};
-
-export const useHeader = () => {
-  const [isSidebarVisible, setIsSidebarVisible] = useContext(HeaderContext) as [
-    boolean,
-    Dispatch<SetStateAction<boolean>>,
-  ];
-
-  const showSidebar = () => {
-    setIsSidebarVisible(true);
-  };
-
-  const hideSidebar = () => {
-    setIsSidebarVisible(false);
-  };
-
-  return {
-    isSidebarVisible,
-    showSidebar,
-    hideSidebar,
-  };
-};
diff --git a/src/components/header/nav-links.ts b/src/components/header/nav-links.ts
index d1c8e74f3..f28b5b627 100644
--- a/src/components/header/nav-links.ts
+++ b/src/components/header/nav-links.ts
@@ -5,7 +5,6 @@ export const navigationLinks: NavLink[] = [
   {url: '/about', label: 'about'},
   {url: '/blog', label: 'blog'},
   {url: 'https://note.carlogino.com', label: 'Notes'},
-  {url: 'https://gpt.carlogino.com', label: 'Chatbot', target: '_blank'},
 ];
 
 type NavLink = {
diff --git a/src/components/header/use-scroll-direction.tsx b/src/components/header/use-scroll-direction.tsx
deleted file mode 100644
index 5f0a0253c..000000000
--- a/src/components/header/use-scroll-direction.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import {useEffect, useState} from 'react';
-
-export const useScrollDirection = (threshold = 150) => {
-  const [scrollDir, setScrollDir] = useState<'down' | 'up'>('up');
-
-  useEffect(() => {
-    let lastScrollY = window.pageYOffset;
-    let ticking = false;
-
-    const updateScrollDir = () => {
-      const scrollY = window.pageYOffset;
-
-      if (Math.abs(scrollY - lastScrollY) < threshold) {
-        ticking = false;
-        return;
-      }
-      setScrollDir(scrollY > lastScrollY ? 'down' : 'up');
-      lastScrollY = scrollY > 0 ? scrollY : 0;
-      ticking = false;
-    };
-
-    const onScroll = () => {
-      if (!ticking) {
-        window.requestAnimationFrame(updateScrollDir);
-        ticking = true;
-      }
-    };
-
-    window.addEventListener('scroll', onScroll);
-
-    return () => window.removeEventListener('scroll', onScroll);
-  }, [scrollDir, threshold]);
-
-  return {
-    direction: scrollDir,
-  };
-};
diff --git a/src/components/home/AboutBlurb.tsx b/src/components/home/AboutBlurb.tsx
new file mode 100644
index 000000000..6cc442753
--- /dev/null
+++ b/src/components/home/AboutBlurb.tsx
@@ -0,0 +1,18 @@
+import {createTranslation} from '@/app/i18n/server';
+import NextLink from '@/components/basic/NextLink';
+import SectionLabel from '@/components/SectionLabel';
+
+export default async function AboutBlurb() {
+  const {t} = await createTranslation('home');
+  const {t: tResume} = await createTranslation('resume');
+
+  return (
+    <section aria-labelledby="about-blurb">
+      <SectionLabel id="about-blurb">{t('about.kicker')}</SectionLabel>
+      <p className="m-0 text-sm leading-relaxed">{tResume('tagline')}</p>
+      <NextLink href="/about" className="mt-2 inline-block text-sm text-accent">
+        {t('about.more')} →
+      </NextLink>
+    </section>
+  );
+}
diff --git a/src/components/home/AboutTeaser.tsx b/src/components/home/AboutTeaser.tsx
deleted file mode 100644
index 4e65c5963..000000000
--- a/src/components/home/AboutTeaser.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import {FaMapMarkerAlt} from '@react-icons/all-files/fa/FaMapMarkerAlt';
-import {Fade} from 'react-awesome-reveal';
-import {BlurringImage} from '../BlurringImage';
-import NextLink from '../basic/NextLink';
-import {createTranslation} from '../../app/i18n/server';
-import type {BlurImageType} from '../../utils/image-blur.utils';
-
-const summary = {
-  company: 'Tre',
-  address: 'Stockholm, Sweden',
-  name: 'Carlo Gino Catapang',
-  companyWebsite: 'https://www.tre.se',
-};
-
-export default async function AboutTeaser({
-  img,
-  svg,
-}: Pick<BlurImageType, 'svg' | 'img'>) {
-  const {t} = await createTranslation('resume');
-  const {t: tHome} = await createTranslation('home');
-
-  return (
-    <section className="relative overflow-hidden px-4 py-16 sm:py-20">
-      {/* Decorative background accents */}
-      <div
-        aria-hidden
-        className="bg-primary-300/20 dark:bg-primary-700/20 pointer-events-none absolute -top-24 left-[10%] size-72 rounded-full blur-3xl"
-      />
-      <div
-        aria-hidden
-        className="bg-primary-200/20 dark:bg-primary-800/20 pointer-events-none absolute -bottom-32 right-[5%] size-96 rounded-full blur-3xl"
-      />
-
-      <Fade direction="up" triggerOnce>
-        <div className="relative mx-auto max-w-4xl rounded-2xl border border-neutral-200 bg-white/70 p-8 shadow-xs backdrop-blur-xs dark:border-neutral-700 dark:bg-neutral-800/70 sm:p-12">
-          <p className="m-0 mb-6 text-center text-sm font-semibold uppercase tracking-widest text-primary-900 dark:text-primary-300">
-            {tHome('about.kicker')}
-          </p>
-
-          <div className="flex flex-col items-center gap-8 md:flex-row md:gap-10">
-            <div className="relative shrink-0">
-              <div
-                aria-hidden
-                className="absolute -inset-2 rounded-full bg-linear-to-br from-primary-400 to-primary-800 opacity-70 blur-xs dark:from-primary-300 dark:to-primary-600"
-              />
-              <div className="relative size-36 overflow-hidden rounded-full ring-4 ring-white dark:ring-neutral-900 md:size-40">
-                <BlurringImage
-                  img={img}
-                  svg={svg}
-                  alt="Carlo Gino"
-                  title="Carlo Gino"
-                  height={200}
-                  width={200}
-                />
-              </div>
-            </div>
-
-            <div className="flex flex-col items-center gap-3 text-center md:items-start md:text-left">
-              <div>
-                <h2 className="m-0 text-3xl font-extrabold tracking-tight sm:text-4xl">
-                  {summary.name}
-                </h2>
-                <h3 className="m-0 mt-1 text-lg font-semibold text-primary-900 dark:text-primary-300 sm:text-xl">
-                  {t('jobTitle')}{' '}
-                  <span className="font-normal text-neutral-600 dark:text-neutral-400">
-                    {t('at')}
-                  </span>{' '}
-                  <NextLink
-                    href={summary.companyWebsite}
-                    target="_blank"
-                    aria-label="Company Website"
-                    rel="noreferrer"
-                    className="underline-on-hover"
-                  >
-                    {summary.company}
-                  </NextLink>
-                </h3>
-              </div>
-
-              <p className="m-0 max-w-xl leading-relaxed text-neutral-700 dark:text-neutral-300">
-                {t('tagline')}
-              </p>
-
-              <div className="flex flex-wrap items-center justify-center gap-x-6 gap-y-2 text-neutral-700 dark:text-neutral-400 md:justify-start">
-                <span className="flex items-center gap-2 font-semibold">
-                  <span className="text-2xl font-extrabold text-primary-900 dark:text-primary-300">
-                    10+
-                  </span>
-                  {t('yearsOfExperience')}
-                </span>
-                <span
-                  aria-hidden
-                  className="hidden h-6 w-px bg-neutral-300 dark:bg-neutral-700 sm:block"
-                />
-                <span className="flex items-center gap-2 font-semibold">
-                  <span className="text-2xl font-extrabold text-primary-900 dark:text-primary-300">
-                    5
-                  </span>
-                  {t('companies')}
-                </span>
-                <span
-                  aria-hidden
-                  className="hidden h-6 w-px bg-neutral-300 dark:bg-neutral-700 sm:block"
-                />
-                <span className="flex items-center gap-1.5">
-                  <FaMapMarkerAlt className="fill-primary-900 dark:fill-primary-400" />
-                  {summary.address}
-                </span>
-              </div>
-
-              <NextLink
-                href="/resume"
-                aria-label="View full resume"
-                title="View full resume"
-                className="mt-3 inline-flex items-center gap-2 rounded-lg bg-primary-900 px-5 py-2.5 font-semibold text-white shadow-md transition-all duration-200 hover:-translate-y-0.5 hover:shadow-lg dark:bg-primary-300 dark:text-neutral-900"
-              >
-                {tHome('about.viewResume')}
-              </NextLink>
-            </div>
-          </div>
-        </div>
-      </Fade>
-    </section>
-  );
-}
diff --git a/src/components/home/CodingActivity.tsx b/src/components/home/CodingActivity.tsx
index de8be4b8e..a98b974fe 100644
--- a/src/components/home/CodingActivity.tsx
+++ b/src/components/home/CodingActivity.tsx
@@ -1,45 +1,94 @@
-'use client';
-import dynamicImport from 'next/dynamic';
-import {Fade} from 'react-awesome-reveal';
-import {useTranslation} from '../../app/i18n/client';
-import SectionHeader from './SectionHeader';
+import type {ReactNode} from 'react';
+import {createTranslation} from '@/app/i18n/server';
+import ContributionCalendar from './ContributionCalendar';
+import SectionLabel from '@/components/SectionLabel';
+import {fetchTopLanguages} from './wakatime';
 
-// react-activity-calendar renders different markup on the server, so skip SSR
-const CustomGithubCalendar = dynamicImport(
-  () => import('../CustomGithubCalendar'),
-  {ssr: false},
-);
-
-const WakatimeCharts = dynamicImport(() => import('../WakatimeCharts'));
+function Card({
+  label,
+  detail,
+  href,
+  linkText,
+  children,
+}: {
+  label: string;
+  detail: string;
+  href: string;
+  linkText: string;
+  children: ReactNode;
+}) {
+  return (
+    <div className="flex min-w-0 flex-col rounded-xl border border-line bg-panel p-5">
+      <p className="m-0 mb-4 flex items-baseline justify-between gap-3 font-mono text-xs whitespace-nowrap text-ink-muted">
+        <span className="text-xs">
+          {label}
+          <span className="hidden text-xs sm:inline"> · {detail}</span>
+        </span>
+        <a
+          href={href}
+          target="_blank"
+          rel="noreferrer"
+          className="text-xs hover:text-accent"
+        >
+          {linkText} ↗
+        </a>
+      </p>
+      {children}
+    </div>
+  );
+}
 
-export default function CodingActivity() {
-  const {t} = useTranslation('home');
+export default async function CodingActivity() {
+  const {t} = await createTranslation('home');
+  const languages = await fetchTopLanguages();
 
   return (
-    <section className="relative overflow-hidden px-4 py-16 sm:py-20">
-      <div
-        aria-hidden
-        className="bg-primary-300/20 dark:bg-primary-700/20 pointer-events-none absolute -top-24 right-[15%] size-72 rounded-full blur-3xl"
-      />
-
-      <Fade direction="up" triggerOnce>
-        <SectionHeader
-          kicker={t('activity.kicker')}
-          title={t('activity.title')}
-        />
-      </Fade>
+    <section
+      aria-labelledby="coding-activity"
+      className="border-t border-line py-12"
+    >
+      <SectionLabel id="coding-activity">{t('activity.kicker')}</SectionLabel>
+      <div className="grid gap-6 lg:grid-cols-[auto_minmax(0,1fr)]">
+        <Card
+          label={t('activity.contributions')}
+          detail={t('activity.last12Months')}
+          href="https://github.com/pogicodes"
+          linkText="github"
+        >
+          <ContributionCalendar />
+        </Card>
 
-      <div className="relative mx-auto flex max-w-6xl flex-col items-center gap-8">
-        <Fade direction="up" triggerOnce className="w-full">
-          <div className="w-full overflow-hidden rounded-2xl border border-neutral-200 bg-white p-4 shadow-xs dark:border-neutral-700 dark:bg-neutral-800 sm:p-6">
-            <CustomGithubCalendar />
-          </div>
-        </Fade>
-        <Fade direction="up" triggerOnce className="w-full max-w-4xl">
-          <div className="w-full overflow-hidden rounded-2xl border border-neutral-200 bg-white p-4 shadow-xs dark:border-neutral-700 dark:bg-neutral-800 sm:p-6">
-            <WakatimeCharts />
-          </div>
-        </Fade>
+        {languages.length ? (
+          <Card
+            label={t('activity.languages')}
+            detail={t('activity.last7Days')}
+            href="https://wakatime.com/@codegino"
+            linkText="wakatime"
+          >
+            <ul className="m-0 my-auto list-none space-y-3 p-0 font-mono text-xs">
+              {languages.map((language, index) => (
+                <li key={language.name}>
+                  <div className="mb-1 flex justify-between">
+                    <span className="text-xs">{language.name}</span>
+                    <span className="text-xs text-ink-muted tabular-nums">
+                      {language.percent.toFixed(1)}%
+                    </span>
+                  </div>
+                  <div className="h-1.5 rounded-full bg-line">
+                    <div
+                      className="h-full rounded-full bg-accent"
+                      style={{
+                        width: `${language.percent}%`,
+                        opacity:
+                          language.name === 'Other' ? 0.35 : 1 - index * 0.1,
+                      }}
+                    />
+                  </div>
+                </li>
+              ))}
+            </ul>
+          </Card>
+        ) : null}
       </div>
     </section>
   );
diff --git a/src/components/home/ContactCta.tsx b/src/components/home/ContactCta.tsx
deleted file mode 100644
index e50969483..000000000
--- a/src/components/home/ContactCta.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-'use client';
-import {FaEnvelopeSquare} from '@react-icons/all-files/fa/FaEnvelopeSquare';
-import {Fade} from 'react-awesome-reveal';
-import {useTranslation} from '../../app/i18n/client';
-import NextLink from '../basic/NextLink';
-import BookACallButton from '../booking/BookACallButton';
-import SectionHeader from './SectionHeader';
-
-export default function ContactCta() {
-  const {t} = useTranslation('home');
-  const {t: tCommon} = useTranslation('common');
-
-  return (
-    <section className="relative overflow-hidden px-4 py-16 sm:py-20">
-      <div
-        aria-hidden
-        className="bg-primary-300/20 dark:bg-primary-700/20 pointer-events-none absolute -bottom-24 left-[15%] size-72 rounded-full blur-3xl"
-      />
-
-      <Fade direction="up" triggerOnce>
-        <SectionHeader
-          kicker={t('contact.kicker')}
-          title={t('contact.title')}
-        />
-      </Fade>
-
-      <Fade direction="up" triggerOnce>
-        <div className="relative mx-auto max-w-2xl text-center">
-          <p className="m-0 text-lg text-neutral-600 dark:text-neutral-300">
-            {t('contact.description')}
-          </p>
-          <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
-            <BookACallButton
-              label={tCommon('bookACall')}
-              title={tCommon('bookACallTitle')}
-              closeLabel={tCommon('closeDialog')}
-              className="inline-flex items-center gap-2 rounded-lg bg-primary-900 px-5 py-2.5 font-semibold text-white shadow-md transition-all duration-200 hover:-translate-y-0.5 hover:shadow-lg dark:bg-primary-300 dark:text-neutral-900"
-            />
-            <NextLink
-              href="mailto:carloginocatapang@gmail.com"
-              target="_blank"
-              rel="noreferrer"
-              aria-label={t('contact.emailMe')}
-              title={t('contact.emailMe')}
-              className="inline-flex items-center gap-2 rounded-lg border-2 border-neutral-300 px-5 py-2.5 font-semibold text-neutral-700 transition-all duration-200 hover:-translate-y-0.5 hover:border-primary-900 hover:text-primary-900 dark:border-neutral-600 dark:text-neutral-200 dark:hover:border-primary-300 dark:hover:text-primary-300"
-            >
-              <FaEnvelopeSquare />
-              {t('contact.emailMe')}
-            </NextLink>
-          </div>
-        </div>
-      </Fade>
-    </section>
-  );
-}
diff --git a/src/components/home/ContributionCalendar.tsx b/src/components/home/ContributionCalendar.tsx
new file mode 100644
index 000000000..c2f3bca45
--- /dev/null
+++ b/src/components/home/ContributionCalendar.tsx
@@ -0,0 +1,59 @@
+'use client';
+import {useEffect, useRef, useSyncExternalStore} from 'react';
+import {useTheme} from 'next-themes';
+import {GitHubCalendar} from 'react-github-calendar';
+
+const calendarTheme = {
+  light: ['#e4e1d7', '#b9dcc2', '#7cc296', '#3f9a5c', '#1f7a3a'],
+  dark: ['#1c2119', '#1d4a2a', '#2a7a42', '#3fb465', '#5ee08a'],
+};
+
+// react-activity-calendar renders different markup on the server, so it only
+// renders after hydration.
+const emptySubscribe = () => () => {};
+
+export default function ContributionCalendar() {
+  const {resolvedTheme} = useTheme();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const isMounted = useSyncExternalStore(
+    emptySubscribe,
+    () => true,
+    () => false,
+  );
+
+  // The calendar loads async and scrolls inside its own container; once it
+  // overflows, jump to the newest month so phones see recent activity first.
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const observer = new ResizeObserver(() => {
+      container.querySelectorAll<HTMLElement>('*').forEach(element => {
+        if (element.scrollWidth > element.clientWidth) {
+          element.scrollLeft = element.scrollWidth;
+        }
+      });
+    });
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <div
+      ref={containerRef}
+      className="my-auto min-h-[150px] overflow-x-auto pb-1 text-xs text-ink-muted [&_*]:text-[length:inherit]"
+    >
+      {isMounted ? (
+        <GitHubCalendar
+          username="pogicodes"
+          theme={calendarTheme}
+          colorScheme={resolvedTheme === 'dark' ? 'dark' : 'light'}
+          blockSize={10}
+          blockMargin={3}
+          blockRadius={2}
+          fontSize={12}
+        />
+      ) : null}
+    </div>
+  );
+}
diff --git a/src/components/home/Eyes.tsx b/src/components/home/Eyes.tsx
new file mode 100644
index 000000000..f6286a7aa
--- /dev/null
+++ b/src/components/home/Eyes.tsx
@@ -0,0 +1,65 @@
+'use client';
+import {useEffect, useRef, useState} from 'react';
+import {BlinkProvider, useBlink} from '@/contexts/BlinkContext';
+
+const INK = '#111';
+
+function Eye({size}: {size: number}) {
+  const isBlinking = useBlink();
+  const ref = useRef<HTMLDivElement>(null);
+  const [pupil, setPupil] = useState({x: 0, y: 0});
+
+  useEffect(() => {
+    const onMouseMove = (event: MouseEvent) => {
+      if (!ref.current || isBlinking) return;
+      const rect = ref.current.getBoundingClientRect();
+      const dx = event.clientX - (rect.left + rect.width / 2);
+      const dy = event.clientY - (rect.top + rect.height / 2);
+      const angle = Math.atan2(dy, dx);
+      const distance = Math.min(size / 10, Math.hypot(dx, dy));
+      setPupil({x: distance * Math.cos(angle), y: distance * Math.sin(angle)});
+    };
+
+    window.addEventListener('mousemove', onMouseMove);
+    return () => window.removeEventListener('mousemove', onMouseMove);
+  }, [isBlinking, size]);
+
+  return (
+    <div
+      ref={ref}
+      className="relative overflow-hidden bg-white"
+      style={{
+        width: size,
+        height: size / 2,
+        border: `${Math.max(2, size / 24)}px solid ${INK}`,
+        borderRadius: `${size / 2}px / ${size / 4}px`,
+      }}
+    >
+      <div
+        className="absolute top-1/2 left-1/2 rounded-full"
+        style={{
+          width: size / 4,
+          height: size / 4,
+          background: INK,
+          transform: `translate(calc(-50% + ${pupil.x}px), calc(-50% + ${pupil.y}px))`,
+        }}
+      />
+      {/* Eyelid */}
+      <div
+        className="absolute inset-0 origin-top transition-transform duration-100 motion-reduce:transition-none"
+        style={{background: INK, transform: `scaleY(${isBlinking ? 1 : 0})`}}
+      />
+    </div>
+  );
+}
+
+export default function Eyes({size = 44}: {size?: number}) {
+  return (
+    <BlinkProvider>
+      <div aria-hidden className="flex" style={{gap: size / 6}}>
+        <Eye size={size} />
+        <Eye size={size} />
+      </div>
+    </BlinkProvider>
+  );
+}
diff --git a/src/components/home/HomeTerminal.tsx b/src/components/home/HomeTerminal.tsx
new file mode 100644
index 000000000..4049bc55f
--- /dev/null
+++ b/src/components/home/HomeTerminal.tsx
@@ -0,0 +1,132 @@
+'use client';
+import {useMemo} from 'react';
+import {useTranslation} from '@/app/i18n/client';
+import type {TypewriterChunk, TypewriterStep} from '@/utils/typewriter-hook';
+import {useTypewriter} from '@/utils/typewriter-hook';
+
+type TypedLine = {
+  hasPrompt: boolean;
+  texts: Extract<TypewriterChunk, {kind: 'text'}>[];
+};
+
+function Prompt() {
+  return (
+    <span aria-hidden className="mr-2 text-terminal-accent select-none">
+      ❯
+    </span>
+  );
+}
+
+const lineClass = 'm-0 min-h-[1lh] text-[1em] leading-[inherit]';
+
+export default function HomeTerminal() {
+  const {t} = useTranslation('home');
+  const {t: tResume} = useTranslation('resume');
+
+  const steps = useMemo<TypewriterStep[]>(
+    () => [
+      {kind: 'delay', ms: 600},
+      {kind: 'text', value: t('greetings.1')},
+      {kind: 'break'},
+      {kind: 'prompt'},
+      {kind: 'delay', ms: 400},
+      {kind: 'text', value: t('greetings.2')},
+      {kind: 'delay', ms: 400},
+      {kind: 'text', value: t('greetings.3')},
+      {kind: 'delay', ms: 800},
+      {kind: 'backspace', count: Number(t('greetings.del1'))},
+      {kind: 'text', value: t('greetings.4')},
+      {kind: 'delay', ms: 900},
+      {kind: 'backspace', count: Number(t('greetings.del2'))},
+      {
+        kind: 'text',
+        value: t('greetings.5'),
+        className: 'font-semibold text-terminal-accent',
+      },
+      {kind: 'break'},
+      {kind: 'prompt'},
+      {kind: 'text', value: t('greetings.6')},
+      {kind: 'delay', ms: 900},
+      {kind: 'break'},
+      {kind: 'prompt'},
+      {kind: 'text', value: t('greetings.7')},
+      {kind: 'text', value: t('greetings.8')},
+      {kind: 'text', value: t('greetings.9')},
+      {kind: 'break'},
+      {kind: 'prompt'},
+      {kind: 'text', value: t('greetings.10')},
+    ],
+    [t],
+  );
+
+  const {chunks} = useTypewriter(steps, {charDelay: 18});
+
+  const lines = useMemo(
+    () =>
+      chunks.reduce<TypedLine[]>(
+        (grouped, chunk) => {
+          if (chunk.kind === 'break') {
+            return [...grouped, {hasPrompt: false, texts: []}];
+          }
+
+          const current = grouped.at(-1)!;
+          const updated =
+            chunk.kind === 'prompt'
+              ? {...current, hasPrompt: true}
+              : {...current, texts: [...current.texts, chunk]};
+
+          return [...grouped.slice(0, -1), updated];
+        },
+        [{hasPrompt: true, texts: []}],
+      ),
+    [chunks],
+  );
+
+  return (
+    <div className="overflow-hidden rounded-xl bg-terminal text-terminal-ink ring-1 ring-black/10 dark:ring-white/5">
+      <div className="flex h-10 items-center gap-2 border-b border-white/10 px-4">
+        <span aria-hidden className="size-3 rounded-full bg-[#ff5f57]" />
+        <span aria-hidden className="size-3 rounded-full bg-[#febc2e]" />
+        <span aria-hidden className="size-3 rounded-full bg-[#28c840]" />
+        <span className="ml-3 font-mono text-xs text-white/50">
+          gino@stockholm: ~
+        </span>
+      </div>
+      {/* Fixed height so the page doesn't move while the greeting types. */}
+      <div className="h-[19lh] p-5 font-mono text-[13px] leading-relaxed sm:h-[15lh] sm:text-[15px] [&_*]:text-[1em]">
+        {/* Pre-printed so who I am is readable before any typing happens. */}
+        <p className={lineClass}>
+          <Prompt />
+          whoami
+        </p>
+        <h1 className="m-0 text-left text-[1em] leading-[inherit] font-semibold text-terminal-accent">
+          Carlo Gino Catapang
+        </h1>
+        <p className={`${lineClass} text-white/55`}>
+          {tResume('jobTitle')} · Tre · Stockholm, Sweden
+        </p>
+        <p className={`${lineClass} mt-[1lh]`}>
+          <Prompt />
+          ./{t('greetings.filename')}
+        </p>
+        <div aria-label={t('greetings.1')}>
+          {lines.map((line, index) => (
+            <p key={index} className={lineClass}>
+              {line.hasPrompt ? <Prompt /> : null}
+              {line.texts.map((chunk, chunkIndex) => (
+                <span key={chunkIndex} className={chunk.className}>
+                  {chunk.value}
+                </span>
+              ))}
+              {index === lines.length - 1 ? (
+                <span aria-hidden className="animate-blink">
+                  ▍
+                </span>
+              ) : null}
+            </p>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/home/LatestWriting.tsx b/src/components/home/LatestWriting.tsx
new file mode 100644
index 000000000..c9ec417b9
--- /dev/null
+++ b/src/components/home/LatestWriting.tsx
@@ -0,0 +1,28 @@
+import {createTranslation} from '@/app/i18n/server';
+import NextLink from '@/components/basic/NextLink';
+import PostListItem from '@/components/blog/PostListItem';
+import SectionLabel from '@/components/SectionLabel';
+import type {IBlogMetadata} from '@/models/mdxFiles';
+
+export default async function LatestWriting({blogs}: {blogs: IBlogMetadata[]}) {
+  const {t} = await createTranslation('home');
+
+  return (
+    <section aria-labelledby="latest-writing">
+      <SectionLabel id="latest-writing">{t('blogSection.kicker')}</SectionLabel>
+      <ol className="m-0 list-none divide-y divide-line p-0">
+        {blogs.map((blog, index) => (
+          <li key={blog.slug} className="py-6 first:pt-0">
+            <PostListItem blog={blog} priority={index === 0} />
+          </li>
+        ))}
+      </ol>
+      <NextLink
+        href="/blog"
+        className="mt-2 inline-block font-mono text-sm text-accent"
+      >
+        {t('blogSection.viewAll')} →
+      </NextLink>
+    </section>
+  );
+}
diff --git a/src/components/home/NewsletterCard.tsx b/src/components/home/NewsletterCard.tsx
new file mode 100644
index 000000000..e1597b739
--- /dev/null
+++ b/src/components/home/NewsletterCard.tsx
@@ -0,0 +1,44 @@
+'use client';
+import {useTranslation} from '@/app/i18n/client';
+import SubscribeForm from '@/components/SubscribeForm';
+import BookACallButton from '@/components/booking/BookACallButton';
+import SectionLabel from '@/components/SectionLabel';
+
+/** Newsletter sign-up and the contact options, merged into one sidebar card. */
+export default function NewsletterCard() {
+  const {t} = useTranslation('home');
+  const {t: tNewsletter} = useTranslation('newsletter');
+  const {t: tCommon} = useTranslation('common');
+
+  return (
+    <section
+      id="subscribe"
+      aria-labelledby="newsletter"
+      className="rounded-xl border border-line bg-panel p-5"
+    >
+      <SectionLabel id="newsletter">{tNewsletter('form.button')}</SectionLabel>
+      <p className="m-0 text-sm">{t('newsletter.short')}</p>
+      <SubscribeForm className="mt-3" />
+      <div
+        id="contact"
+        className="m-0 mt-4 border-t border-line pt-4 text-sm text-ink-muted"
+      >
+        {t('contact.ratherTalk')}{' '}
+        <BookACallButton
+          label={tCommon('bookACall')}
+          title={tCommon('bookACallTitle')}
+          closeLabel={tCommon('closeDialog')}
+          className="inline-flex items-center gap-1.5 text-sm text-ink underline underline-offset-4 [&_svg]:hidden"
+        />{' '}
+        {t('contact.or')}{' '}
+        <a
+          href="mailto:carloginocatapang@gmail.com"
+          className="text-sm text-ink underline underline-offset-4"
+        >
+          {t('contact.email')}
+        </a>
+        .
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/home/NowPanel.tsx b/src/components/home/NowPanel.tsx
new file mode 100644
index 000000000..eacc5e2f1
--- /dev/null
+++ b/src/components/home/NowPanel.tsx
@@ -0,0 +1,89 @@
+import {createTranslation} from '@/app/i18n/server';
+import {BlurringImage} from '@/components/BlurringImage';
+import NextLink from '@/components/basic/NextLink';
+import type {IBlogMetadata} from '@/models/mdxFiles';
+import type {BlurImageType} from '@/utils/image-blur.utils';
+import Eyes from './Eyes';
+import SectionLabel from '@/components/SectionLabel';
+import {sideProjects} from './side-projects';
+
+type Props = Pick<BlurImageType, 'img' | 'svg'> & {latestBlog?: IBlogMetadata};
+
+const termClass = 'font-mono text-sm text-ink-muted';
+const valueClass = 'm-0 text-sm';
+
+export default async function NowPanel({img, svg, latestBlog}: Props) {
+  const {t} = await createTranslation('home');
+  const {t: tResume} = await createTranslation('resume');
+
+  return (
+    <aside className="flex flex-col justify-between gap-6 rounded-xl border border-line bg-panel p-6">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-4">
+          <div className="relative size-16 shrink-0 overflow-hidden rounded-full ring-2 ring-line">
+            <BlurringImage
+              img={img}
+              svg={svg}
+              alt="Carlo Gino Catapang"
+              width={128}
+              height={128}
+            />
+          </div>
+          <SectionLabel as="p" className="mb-0">
+            {t('now.label')}
+          </SectionLabel>
+        </div>
+        <Eyes size={44} />
+      </div>
+
+      <dl className="m-0 grid grid-cols-[88px_1fr] gap-x-3 gap-y-3">
+        <dt className={termClass}>{t('now.role')}</dt>
+        <dd className={valueClass}>
+          {tResume('jobTitle')} {tResume('at')}{' '}
+          <a
+            href="https://www.tre.se"
+            target="_blank"
+            rel="noreferrer"
+            className="text-sm underline underline-offset-4"
+          >
+            Tre
+          </a>
+        </dd>
+        <dt className={termClass}>{t('now.based')}</dt>
+        <dd className={valueClass}>Stockholm, Sweden</dd>
+        {latestBlog ? (
+          <>
+            <dt className={termClass}>{t('now.writing')}</dt>
+            <dd className={valueClass}>
+              <NextLink
+                href={`/blog/${latestBlog.slug}`}
+                className="text-sm underline underline-offset-4"
+              >
+                {latestBlog.title}
+              </NextLink>
+            </dd>
+          </>
+        ) : null}
+        <dt className={termClass}>{t('now.building')}</dt>
+        <dd className={valueClass}>
+          {sideProjects.map(project => project.name).join(', ')}
+        </dd>
+      </dl>
+
+      <div className="flex flex-wrap gap-3">
+        <NextLink
+          href="/blog"
+          className="rounded-md bg-accent px-4 py-2 text-sm font-medium text-accent-ink"
+        >
+          {t('now.readBlog')}
+        </NextLink>
+        <NextLink
+          href="/resume"
+          className="rounded-md border border-line bg-canvas px-4 py-2 text-sm font-medium"
+        >
+          {t('now.resume')}
+        </NextLink>
+      </div>
+    </aside>
+  );
+}
diff --git a/src/components/home/SectionHeader.tsx b/src/components/home/SectionHeader.tsx
deleted file mode 100644
index 6ad98794b..000000000
--- a/src/components/home/SectionHeader.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import type {FC} from 'react';
-
-const SectionHeader: FC<{
-  kicker: string;
-  title: string;
-  id?: string;
-}> = ({kicker, title, id}) => {
-  return (
-    <div className="mb-10 text-center" id={id}>
-      <p className="m-0 text-sm font-semibold uppercase tracking-widest text-primary-900 dark:text-primary-300">
-        {kicker}
-      </p>
-      <h2 className="m-0 mt-2 text-3xl font-extrabold tracking-tight sm:text-4xl">
-        {title}
-      </h2>
-    </div>
-  );
-};
-
-export default SectionHeader;
diff --git a/src/components/home/SideProjects.tsx b/src/components/home/SideProjects.tsx
index 9e83bdafb..d8bdfc208 100644
--- a/src/components/home/SideProjects.tsx
+++ b/src/components/home/SideProjects.tsx
@@ -1,81 +1,32 @@
-import {FaExternalLinkAlt} from '@react-icons/all-files/fa/FaExternalLinkAlt';
-import {FaFish} from '@react-icons/all-files/fa/FaFish';
-import {FaMusic} from '@react-icons/all-files/fa/FaMusic';
-import {FaWind} from '@react-icons/all-files/fa/FaWind';
-import {Fade} from 'react-awesome-reveal';
-import {createTranslation} from '../../app/i18n/server';
-import NextLink from '../basic/NextLink';
-import SectionHeader from './SectionHeader';
-
-const projects = [
-  {
-    key: 'larotune',
-    name: 'LaroTune',
-    url: 'https://www.larotune.com/',
-    icon: FaMusic,
-  },
-  {
-    key: 'breathing',
-    name: 'Breathing Companion',
-    url: 'https://exercise.larotune.com/breathing',
-    icon: FaWind,
-  },
-  {
-    key: 'tankably',
-    name: 'Tankably',
-    url: 'https://tankably.com',
-    icon: FaFish,
-  },
-] as const;
+import {createTranslation} from '@/app/i18n/server';
+import SectionLabel from '@/components/SectionLabel';
+import {sideProjects} from './side-projects';
 
 export default async function SideProjects() {
   const {t} = await createTranslation('home');
 
   return (
-    <section className="relative overflow-hidden px-4 py-16 sm:py-20">
-      <div
-        aria-hidden
-        className="bg-primary-200/20 dark:bg-primary-800/20 pointer-events-none absolute -bottom-24 left-[10%] size-72 rounded-full blur-3xl"
-      />
-
-      <Fade direction="up" triggerOnce>
-        <SectionHeader
-          kicker={t('sideProjects.kicker')}
-          title={t('sideProjects.title')}
-          id="side-projects"
-        />
-      </Fade>
-
-      <div className="relative mx-auto grid max-w-5xl gap-6 sm:grid-cols-2 lg:grid-cols-3">
-        {projects.map(({key, name, url, icon: Icon}) => (
-          <Fade key={key} direction="up" triggerOnce className="h-full">
-            <NextLink
-              href={url}
+    <section aria-labelledby="side-projects">
+      <SectionLabel id="side-projects">{t('sideProjects.kicker')}</SectionLabel>
+      <ul className="m-0 list-none space-y-4 p-0">
+        {sideProjects.map(project => (
+          <li key={project.key}>
+            <a
+              href={project.url}
               target="_blank"
-              rel="noopener noreferrer"
-              aria-label={`${name} - ${t(`sideProjects.${key}.description`)}`}
-              className="group flex h-full flex-col gap-3 rounded-2xl border border-neutral-200 bg-white p-6 shadow-xs transition-all duration-200 hover:-translate-y-1 hover:border-primary-900 hover:shadow-md dark:border-neutral-700 dark:bg-neutral-800 dark:hover:border-primary-300"
+              rel="noreferrer"
+              className="group block"
             >
-              <span
-                aria-hidden
-                className="flex size-12 items-center justify-center rounded-xl bg-primary-50 text-2xl text-primary-900 dark:bg-neutral-900 dark:text-primary-300"
-              >
-                <Icon />
-              </span>
-              <span className="flex items-center gap-2 text-xl font-bold">
-                {name}
-                <FaExternalLinkAlt
-                  aria-hidden
-                  className="text-sm opacity-0 transition-opacity duration-200 group-hover:opacity-100"
-                />
+              <span className="text-sm font-semibold group-hover:text-accent">
+                {project.name} ↗
               </span>
-              <span className="text-neutral-700 dark:text-neutral-300">
-                {t(`sideProjects.${key}.description`)}
+              <span className="block text-sm text-ink-muted">
+                {t(`sideProjects.${project.key}.description`)}
               </span>
-            </NextLink>
-          </Fade>
+            </a>
+          </li>
         ))}
-      </div>
+      </ul>
     </section>
   );
 }
diff --git a/src/components/home/SkillsHighlights.tsx b/src/components/home/SkillsHighlights.tsx
deleted file mode 100644
index b1be31641..000000000
--- a/src/components/home/SkillsHighlights.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-'use client';
-import {Fade} from 'react-awesome-reveal';
-import type {CategorizedSkill} from '../../models/skill';
-import NextLink from '../basic/NextLink';
-import SectionHeader from './SectionHeader';
-import {useTranslation} from '../../app/i18n/client';
-
-export default function SkillsHighlights({
-  skills,
-}: {
-  skills: CategorizedSkill[];
-}) {
-  const {t} = useTranslation('home');
-
-  const highlights =
-    skills.find(c => c.category === 'highlights')?.skills ?? [];
-
-  if (highlights.length === 0) return null;
-
-  return (
-    <section className="overflow-hidden px-4 py-16 sm:py-20">
-      <Fade direction="up" triggerOnce>
-        <SectionHeader
-          kicker={t('skillsMarquee.kicker')}
-          title={t('skillsMarquee.title')}
-        />
-
-        <div className="mx-auto flex max-w-3xl flex-wrap justify-center gap-3">
-          {highlights.map(skill => (
-            <NextLink
-              key={skill.id}
-              href={skill.url}
-              target="_blank"
-              rel="noreferrer"
-              aria-label={skill.name}
-              title={`Click to visit ${skill.name}`}
-              className="whitespace-nowrap rounded-xl border border-primary-300 bg-primary-50 px-5 py-3 text-lg font-bold text-primary-900 shadow-xs transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md dark:border-primary-600 dark:bg-neutral-800 dark:text-primary-300"
-            >
-              {skill.name}
-            </NextLink>
-          ))}
-        </div>
-
-        <div className="mt-8 text-center">
-          <NextLink
-            href="/resume#skills"
-            aria-label="full skills list"
-            className="inline-flex items-center gap-2 rounded-lg border-2 border-neutral-300 px-5 py-2.5 font-semibold text-neutral-700 transition-all duration-200 hover:-translate-y-0.5 hover:border-primary-900 hover:text-primary-900 dark:border-neutral-600 dark:text-neutral-200 dark:hover:border-primary-300 dark:hover:text-primary-300"
-          >
-            {t('skillsMarquee.cta')}
-          </NextLink>
-        </div>
-      </Fade>
-    </section>
-  );
-}
diff --git a/src/components/home/side-projects.ts b/src/components/home/side-projects.ts
new file mode 100644
index 000000000..b696934f7
--- /dev/null
+++ b/src/components/home/side-projects.ts
@@ -0,0 +1,9 @@
+export const sideProjects = [
+  {key: 'larotune', name: 'LaroTune', url: 'https://www.larotune.com/'},
+  {
+    key: 'breathing',
+    name: 'Breathing Companion',
+    url: 'https://exercise.larotune.com/breathing',
+  },
+  {key: 'tankably', name: 'Tankably', url: 'https://tankably.com'},
+] as const;
diff --git a/src/components/home/wakatime.ts b/src/components/home/wakatime.ts
new file mode 100644
index 000000000..3d0f25219
--- /dev/null
+++ b/src/components/home/wakatime.ts
@@ -0,0 +1,55 @@
+const WAKATIME_LANGUAGES_SVG =
+  'https://wakatime.com/share/@codegino/aa8c74ed-2174-445a-805d-e46a869c3b8b.svg';
+
+export type LanguageShare = {name: string; percent: number};
+
+const ENTITIES: Record<string, string> = {
+  '&amp;': '&',
+  '&lt;': '<',
+  '&gt;': '>',
+  '&#39;': "'",
+  '&quot;': '"',
+};
+
+// One pass, so "&amp;lt;" becomes "&lt;" rather than being decoded twice.
+const decodeEntities = (text: string) =>
+  text.replace(/&(?:amp|lt|gt|#39|quot);/g, entity => ENTITIES[entity]);
+
+/**
+ * Top languages from the last 7 days, as shares of code-only time.
+ *
+ * WakaTime only exposes this share as an SVG chart, so the legend entries
+ * ("Markdown (39.49%)") are read out of it. A WakaTime JSON share would be
+ * sturdier: swap this for it once one is created.
+ */
+export async function fetchTopLanguages(limit = 6): Promise<LanguageShare[]> {
+  try {
+    const response = await fetch(WAKATIME_LANGUAGES_SVG, {
+      next: {revalidate: 60 * 60 * 24},
+    });
+    if (!response.ok) return [];
+
+    const svg = await response.text();
+    const entries = [...svg.matchAll(/>([^<>]+?) \(([\d.]+)%\)</g)].map(
+      ([, name, percent]) => ({
+        name: decodeEntities(name.trim()),
+        percent: Number(percent),
+      }),
+    );
+
+    // Image files are tracked by WakaTime but aren't code.
+    const code = entries.filter(entry => !entry.name.startsWith('Image'));
+    const total = code.reduce((sum, entry) => sum + entry.percent, 0);
+    if (!total) return [];
+
+    const top = code
+      .filter(entry => entry.name !== 'Other')
+      .slice(0, limit)
+      .map(entry => ({...entry, percent: (entry.percent / total) * 100}));
+    const rest = 100 - top.reduce((sum, entry) => sum + entry.percent, 0);
+
+    return [...top, {name: 'Other', percent: rest}];
+  } catch {
+    return [];
+  }
+}
diff --git a/src/components/icon/CustomIcon.tsx b/src/components/icon/CustomIcon.tsx
deleted file mode 100644
index d5005840a..000000000
--- a/src/components/icon/CustomIcon.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-'use client';
-import {useState} from 'react';
-import {IconType} from '@react-icons/all-files';
-
-export default function CustomIcon(sm: IconProps) {
-  const [hover, setHover] = useState(false);
-
-  return (
-    <sm.icon
-      size={sm.size || 32}
-      className="icon text-neutral-100 hover:rounded-sm hover:bg-white"
-      style={{
-        fill: hover ? sm.hoverColor : sm.color,
-      }}
-      title={sm.title}
-      aria-label={sm.title}
-      onMouseEnter={() => setHover(true)}
-      onMouseLeave={() => setHover(false)}
-    />
-  );
-}
-
-export type SocialMediaProps = IconProps & {
-  url: string;
-};
-
-export type IconProps = {
-  size?: number;
-  icon: IconType;
-  title: string;
-  color: string;
-  hoverColor: string;
-};
diff --git a/src/components/mdx.tsx b/src/components/mdx.tsx
deleted file mode 100644
index bb74b5b1a..000000000
--- a/src/components/mdx.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import {evaluate, type EvaluateOptions} from '@mdx-js/mdx';
-
-import * as runtime from 'react/jsx-runtime';
-
-export interface MDXProps extends Omit<
-  EvaluateOptions,
-  'Fragment' | 'jsx' | 'jsxDEV' | 'jsxs' | 'development'
-> {
-  source: Parameters<typeof evaluate>[0];
-}
-export async function MDX(props: MDXProps) {
-  const {source, ...rest} = props;
-  const {default: MDXContent} = await evaluate(source, {
-    ...rest,
-    ...(runtime as Pick<EvaluateOptions, 'Fragment' | 'jsx' | 'jsxs'>),
-  });
-
-  return <MDXContent />;
-}
diff --git a/src/components/social/BuyMeACoffeeIcon.tsx b/src/components/social/BuyMeACoffeeIcon.tsx
deleted file mode 100644
index fa34945be..000000000
--- a/src/components/social/BuyMeACoffeeIcon.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React, {FC} from 'react';
-import {SiBuymeacoffee} from '@react-icons/all-files/si/SiBuymeacoffee';
-import NextLink from '../basic/NextLink';
-
-const BuyMeACoffeeIcon: FC<{className?: string}> = ({className}) => {
-  return (
-    <NextLink
-      href={bmac.url}
-      target="_blank"
-      aria-label={bmac.title}
-      title={bmac.title}
-      rel="noreferrer"
-      className={className}
-    >
-      <SiBuymeacoffee
-        size={25}
-        className="icon  fill-[#fedc00] hover:fill-[#fffe22]"
-      />
-      <span aria-hidden className="hidden">
-        {bmac.title}
-      </span>
-    </NextLink>
-  );
-};
-
-const bmac = {
-  url: 'https://l.carlogino.com/bmac',
-  title: 'Buy me a coffee',
-};
-
-export default BuyMeACoffeeIcon;
diff --git a/src/components/social/SocialMedia.tsx b/src/components/social/SocialMedia.tsx
deleted file mode 100644
index 9ba015a0d..000000000
--- a/src/components/social/SocialMedia.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-'use client';
-import {FaDev} from '@react-icons/all-files/fa/FaDev';
-import {FaFacebookSquare} from '@react-icons/all-files/fa/FaFacebookSquare';
-import {FaGithubSquare} from '@react-icons/all-files/fa/FaGithubSquare';
-import {FaLinkedin} from '@react-icons/all-files/fa/FaLinkedin';
-import {FaPinterestSquare} from '@react-icons/all-files/fa/FaPinterestSquare';
-import {FaTwitterSquare} from '@react-icons/all-files/fa/FaTwitterSquare';
-import NextLink from '../basic/NextLink';
-import CustomIcon, {SocialMediaProps} from '../icon/CustomIcon';
-
-export default function SocialMedia() {
-  return (
-    <div>
-      <nav>
-        <ul className="flex">
-          {socialMedia.map(sm => (
-            <li key={sm.title} className="mr-1">
-              <NextLink
-                href={sm.url}
-                target="_blank"
-                aria-label={sm.title}
-                title={sm.title}
-                rel="noreferrer"
-              >
-                <CustomIcon {...sm} />
-                <span aria-hidden className="hidden">
-                  {sm.title}
-                </span>
-              </NextLink>
-            </li>
-          ))}
-        </ul>
-      </nav>
-    </div>
-  );
-}
-
-const socialMedia: SocialMediaProps[] = [
-  {
-    url: 'https://dev.to/codegino',
-    icon: FaDev,
-    title: 'dev',
-    color: '',
-    hoverColor: '#333333',
-  },
-  {
-    url: 'https://github.com/pogicodes',
-    icon: FaGithubSquare,
-    title: 'github',
-    color: '',
-    hoverColor: '#333333',
-  },
-  {
-    url: 'https://www.linkedin.com/in/codegino',
-    icon: FaLinkedin,
-    title: 'linkedin',
-    color: '',
-    hoverColor: '#0a66c2',
-  },
-  {
-    url: 'https://twitter.com/codegino',
-    icon: FaTwitterSquare,
-    title: 'twitter',
-    color: '',
-    hoverColor: '#1da1f2',
-  },
-  {
-    url: 'https://pinterest.com/code_gino',
-    icon: FaPinterestSquare,
-    title: 'pinterest',
-    color: '',
-    hoverColor: '#bd081c',
-  },
-  {
-    url: 'https://www.facebook.com/codegino',
-    icon: FaFacebookSquare,
-    title: 'facebook',
-    color: '',
-    hoverColor: '#1877f2',
-  },
-];
diff --git a/src/components/social/social-links.ts b/src/components/social/social-links.ts
new file mode 100644
index 000000000..bf0acedde
--- /dev/null
+++ b/src/components/social/social-links.ts
@@ -0,0 +1,7 @@
+export const socialLinks = [
+  {label: 'GitHub', url: 'https://github.com/pogicodes'},
+  {label: 'LinkedIn', url: 'https://www.linkedin.com/in/codegino'},
+  {label: 'X', url: 'https://x.com/pogicodes'},
+  {label: 'DEV', url: 'https://dev.to/pogicodes'},
+  {label: 'Buy me a coffee', url: 'https://l.carlogino.com/bmac'},
+] as const;
diff --git a/src/components/timeline/Experience.tsx b/src/components/timeline/Experience.tsx
deleted file mode 100644
index 2c11be3c8..000000000
--- a/src/components/timeline/Experience.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import {useId} from 'react';
-import type {FunctionComponent} from 'react';
-
-// Deterministic, stable pseudo-random rotation in the range [-1, 1] degrees.
-// Derived from `useId()` so the server and client agree (no hydration mismatch)
-// and the angle does not jitter on re-render.
-function useRotation() {
-  const id = useId();
-  let hash = 0;
-  for (let i = 0; i < id.length; i++) {
-    hash = (hash * 31 + id.charCodeAt(i)) | 0;
-  }
-  return (Math.abs(hash) % 201) / 100 - 1;
-}
-
-export const Experience: FunctionComponent<{
-  hasConnector?: boolean;
-  children: React.ReactNode;
-}> = ({children}) => {
-  const rotation = useRotation();
-
-  return (
-    <div className="relative z-10 mb-12 flex max-w-6xl flex-col items-center text-center">
-      {/* Pin */}
-      <div
-        className="absolute -top-4 left-1/2 z-20 size-6 -translate-x-1/2 rounded-full bg-linear-to-br from-red-400 to-red-600 shadow-lg"
-        style={{
-          boxShadow: '0 2px 4px rgba(0, 0, 0, 0.2)',
-        }}
-      >
-        <div className="absolute left-1/2 top-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-red-300"></div>
-      </div>
-
-      {/* Sticky Note */}
-      <div
-        className={`w-full rounded-sm bg-yellow-100 p-6 shadow-lg transition-transform duration-200 ease-in-out hover:scale-105 dark:bg-yellow-200 md:w-3/4 lg:w-2/3`}
-        style={{
-          transform: `rotate(${rotation}deg)`,
-          boxShadow:
-            '0 4px 8px rgba(0, 0, 0, 0.15), 2px 2px 5px rgba(0, 0, 0, 0.1)',
-        }}
-      >
-        <div className="relative size-full px-4 py-1">
-          {children}
-          {/* Add subtle lines to make it look more like paper */}
-          <div className="pointer-events-none absolute inset-0">
-            <div className="size-full bg-linear-to-b from-transparent to-yellow-200/10 dark:to-yellow-300/10"></div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/src/components/timeline/Timeline.tsx b/src/components/timeline/Timeline.tsx
deleted file mode 100644
index 9ec1dbf2b..000000000
--- a/src/components/timeline/Timeline.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-'use client';
-import {FaBriefcase} from '@react-icons/all-files/fa/FaBriefcase';
-import {FaBuilding} from '@react-icons/all-files/fa/FaBuilding';
-import {FaGraduationCap} from '@react-icons/all-files/fa/FaGraduationCap';
-import {FaScroll} from '@react-icons/all-files/fa/FaScroll';
-import dompurify from 'isomorphic-dompurify';
-import type {FunctionComponent} from 'react';
-import {Slide} from 'react-awesome-reveal';
-import {useTranslation} from '../../app/i18n/client';
-import type {EducationExperience, WorkExperience} from '../../models/resume';
-import NextLink from '../basic/NextLink';
-import {Experience} from './Experience';
-
-export default function Timeline({
-  workExperiences,
-  educationExperiences,
-}: {
-  workExperiences: WorkExperience[];
-  educationExperiences: EducationExperience[];
-}) {
-  return (
-    <article className="flex min-h-min flex-col items-center overflow-hidden px-4 pt-12">
-      <div className="w-full max-w-6xl rounded-lg bg-neutral-100 p-8 dark:bg-neutral-800">
-        <Slide direction="up" triggerOnce>
-          <Experience>
-            <h2 className="m-0 flex items-center justify-center text-2xl font-bold text-neutral-800 dark:text-neutral-800">
-              <FaBriefcase className="mr-2" />
-              Work Experiences
-            </h2>
-          </Experience>
-        </Slide>
-        {workExperiences.map(exp => (
-          <Slide key={exp.id} direction="up" triggerOnce>
-            <Experience>
-              <Content exp={exp}>
-                <div
-                  className="prose prose-sm mt-4 max-w-none text-left text-neutral-700 dark:text-neutral-700"
-                  dangerouslySetInnerHTML={{
-                    __html: dompurify.sanitize(exp.markdown),
-                  }}
-                />
-              </Content>
-            </Experience>
-          </Slide>
-        ))}
-        <Slide direction="up" triggerOnce>
-          <Experience>
-            <h2 className="m-0 flex items-center justify-center text-2xl font-bold text-neutral-800 dark:text-neutral-800">
-              <FaScroll className="mr-2" />
-              Education
-            </h2>
-          </Experience>
-        </Slide>
-        {educationExperiences.map(exp => (
-          <Slide key={exp.id} direction="up" triggerOnce>
-            <Experience>
-              <Content exp={exp}>
-                <span />
-              </Content>
-            </Experience>
-          </Slide>
-        ))}
-      </div>
-    </article>
-  );
-}
-
-const Content: FunctionComponent<{
-  exp: WorkExperience | EducationExperience;
-  children: React.ReactNode;
-}> = ({exp, children = null}) => {
-  const {t} = useTranslation('common');
-
-  return (
-    <>
-      <div className="space-y-2">
-        <p className="text-sm text-neutral-700 dark:text-neutral-700">
-          {exp.endDate === exp.startDate ? (
-            <span className="font-semibold">Present</span>
-          ) : (
-            t('date', {
-              val: new Date(exp.endDate),
-              formatParams: {
-                val: {
-                  year: 'numeric',
-                  month: 'long',
-                  day: 'numeric',
-                },
-              },
-            })
-          )}
-        </p>
-        <div className="flex items-center justify-center text-neutral-700 dark:text-neutral-700">
-          {exp.category === 'work' ? (
-            <FaBuilding className="mr-2" />
-          ) : (
-            <FaGraduationCap className="mr-2" />
-          )}
-          <NextLink
-            href={exp.url}
-            target="_blank"
-            aria-label={exp.organization}
-            rel="noreferrer"
-            className="font-bold transition-colors hover:text-primary-700 dark:hover:text-primary-700"
-            title={`Click to visit ${exp.organization}`}
-          >
-            {exp.organization}
-          </NextLink>
-        </div>
-        <div className="flex flex-col justify-center text-neutral-700 dark:text-neutral-700 md:flex-row">
-          <p className="font-bold">{exp.title}</p>
-          <p className="md:ml-2">({exp.role})</p>
-        </div>
-      </div>
-      <div className="max-w-200">{children}</div>
-      <p className="mt-2 text-sm text-neutral-700 dark:text-neutral-700">
-        {t('date', {
-          val: new Date(exp.startDate),
-          formatParams: {
-            val: {
-              year: 'numeric',
-              month: 'long',
-              day: 'numeric',
-            },
-          },
-        })}
-      </p>
-    </>
-  );
-};
diff --git a/src/data/experiences.ts b/src/data/experiences.ts
index 5564712cd..f26b33ca2 100644
--- a/src/data/experiences.ts
+++ b/src/data/experiences.ts
@@ -84,7 +84,7 @@ export const workExperiences: WorkExperience[] = [
     organization: 'Devoteam Creative Tech',
     url: 'https://se.devoteam.com',
     startDate: '2022/08/02',
-    endDate: '2022/05/31',
+    endDate: '2023/05/31',
     role: 'Software Engineer',
     title: 'Senior Full Stack Developer',
     markdown: `<ul>
@@ -99,7 +99,7 @@ export const workExperiences: WorkExperience[] = [
     organization: 'Tre',
     url: 'https://www.tre.se/',
     startDate: '2023/06/01',
-    endDate: '2022/06/01',
+    endDate: '2023/06/01',
     role: 'Software Engineer',
     title: 'Senior Full Stack Developer',
     markdown: `<p>Projects:</p>
diff --git a/src/modules/blog/BlogCardPreview.tsx b/src/modules/blog/BlogCardPreview.tsx
deleted file mode 100644
index ff2a3ee7d..000000000
--- a/src/modules/blog/BlogCardPreview.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-'use client';
-
-import Image from 'next/image';
-import NextLink from '../../components/basic/NextLink';
-import type {IBlogMetadata} from '../../models/mdxFiles';
-import {useTranslation} from '../../app/i18n/client';
-import {getBlogBanner} from '../../data/blog-asset';
-
-type Props = {
-  blog: IBlogMetadata;
-};
-
-export const BlogCardPreview = ({blog}: Props) => {
-  const {t} = useTranslation('common');
-  const banner = getBlogBanner(blog.slug);
-
-  return (
-    <figure className="bg-light relative min-h-80 w-full overflow-hidden rounded-2xl text-center shadow-xs shadow-neutral-800 hover:shadow-md hover:shadow-neutral-800 md:max-w-4xl">
-      <NextLink
-        href={`/blog/${blog.slug}`}
-        aria-label={blog.title}
-        className="absolute inset-0"
-      >
-        {/* Drafts (published: false) have no slug, so there is no banner
-            asset. next/image cannot take an empty src. */}
-        {banner ? (
-          <Image
-            src={banner}
-            alt={blog.bannerDescription ?? blog.title}
-            title={blog.bannerDescription ?? blog.title}
-            fill={true}
-            sizes="(max-width: 768px) 100vw, 432px"
-            className="object-cover"
-            placeholder="blur"
-            blurDataURL={banner}
-          />
-        ) : (
-          <div className="absolute inset-0 bg-neutral-200 dark:bg-neutral-700" />
-        )}
-        <figcaption className="absolute bottom-0 flex w-full flex-col justify-between bg-neutral-100 px-4 pb-4 opacity-[0.98] dark:bg-neutral-800 md:h-40">
-          <h2 className="line-clamp-2 text-balance text-xl">{blog.title}</h2>
-          <div>
-            <p className="line-clamp-1">{blog.description}</p>
-            <p className="mt-2 text-neutral-700 dark:text-neutral-300">
-              {t('date', {
-                val: new Date(blog.date),
-                formatParams: {
-                  val: {
-                    weekday: 'short',
-                    year: 'numeric',
-                    month: 'short',
-                    day: 'numeric',
-                  },
-                },
-              })}
-            </p>
-          </div>
-        </figcaption>
-      </NextLink>
-    </figure>
-  );
-};
diff --git a/src/modules/blog/BlogContent.tsx b/src/modules/blog/BlogContent.tsx
index b0dbc4c0a..05367d6b8 100644
--- a/src/modules/blog/BlogContent.tsx
+++ b/src/modules/blog/BlogContent.tsx
@@ -1,43 +1,36 @@
-'use client';
-import type {FunctionComponent, ComponentProps, JSX} from 'react';
+import {evaluate, type EvaluateOptions} from '@mdx-js/mdx';
+import type {ComponentProps, FunctionComponent, JSX} from 'react';
+import * as runtime from 'react/jsx-runtime';
+import rehypeMdxCodeProps from 'rehype-mdx-code-props';
 import ContentAnchor from '../common/AnchorTag';
 import ContentBlockQuote from '../common/BlockquoteTag';
 import ContentBookMark from '../common/BookmarkElement';
 import ContentCodeBlock from '../common/CodeBlockElement';
 import ContentImage from '../common/ImageTag';
-import ContentListElement from '../common/ListElementTag';
-import ContentParagraph from '../common/ParagraphTag';
-import TableOfContents from './TableOfContents';
-import {MDX} from '@/components/mdx';
-import rehypeMdxCodeProps from 'rehype-mdx-code-props';
+import rehypeHeadingIds, {type TocItem} from './rehype-heading-ids';
 
 const components: ComponentProps<FunctionComponent> = {
   inlineCode: ({children}: {children: JSX.Element}) => <code>{children}</code>,
   blockquote: ContentBlockQuote,
   Anchor: ContentAnchor,
   a: ContentAnchor,
-  p: ContentParagraph,
-  li: ContentListElement,
   Img: ContentImage,
   Bookmark: ContentBookMark,
-  TableOfContents: TableOfContents,
+  // Older posts carry a hand-written TOC; the page now builds one for every
+  // post from its headings, so these render nothing.
+  TableOfContents: () => null,
   pre: ContentCodeBlock,
 };
 
-type Props = {
-  content: string;
-  scope: Record<string, unknown> | undefined;
-};
+/** Compiles a post and returns its content plus the h2/h3 outline. */
+export async function renderBlog(source: string) {
+  const toc: TocItem[] = [];
+  const {default: MDXContent} = await evaluate(source, {
+    ...(runtime as Pick<EvaluateOptions, 'Fragment' | 'jsx' | 'jsxs'>),
+    rehypePlugins: [rehypeMdxCodeProps, [rehypeHeadingIds, {toc}]],
+  });
 
-function BlogContent({content, scope: _scope}: Props) {
-  return (
-    <MDX
-      useMDXComponents={() => components}
-      source={content}
-      rehypePlugins={[rehypeMdxCodeProps]}
-      remarkPlugins={[]}
-    />
-  );
-}
+  const Content = () => <MDXContent components={components} />;
 
-export default BlogContent;
+  return {Content, toc};
+}
diff --git a/src/modules/blog/BlogFooter.tsx b/src/modules/blog/BlogFooter.tsx
index c50ef1b5f..389fbda9a 100644
--- a/src/modules/blog/BlogFooter.tsx
+++ b/src/modules/blog/BlogFooter.tsx
@@ -1,46 +1,95 @@
 'use client';
 
-import {FaEnvelopeOpenText} from '@react-icons/all-files/fa/FaEnvelopeOpenText';
-import {FaTwitter} from '@react-icons/all-files/fa/FaTwitter';
-import Coffee from '../../components/Coffee';
-import SubscribeButton from '../../components/basic/Button';
+import {useState} from 'react';
+import {useTranslation} from '../../app/i18n/client';
+import SectionLabel from '../../components/SectionLabel';
+import SubscribeForm from '../../components/SubscribeForm';
 import NextLink from '../../components/basic/NextLink';
-import {IBlogMetadata} from '../../models/mdxFiles';
-import ShareToSocialMedia from './ShareToSocialMedia';
+import type {IBlogMetadata} from '../../models/mdxFiles';
+
+const linkClass = 'text-xs lowercase transition-colors hover:text-accent';
+
+function CopyLinkButton({url}: {url: string}) {
+  const {t} = useTranslation('blog');
+  const [isCopied, setIsCopied] = useState(false);
+
+  return (
+    <button
+      type="button"
+      className={linkClass}
+      onClick={async () => {
+        await navigator.clipboard.writeText(url);
+        setIsCopied(true);
+        setTimeout(() => setIsCopied(false), 2000);
+      }}
+    >
+      <span aria-live="polite" className="text-xs">
+        {isCopied ? `${t('copied')} ✓` : t('copyLink')}
+      </span>
+    </button>
+  );
+}
 
 const BlogFooter = ({blog}: {blog: IBlogMetadata}) => {
+  const {t} = useTranslation('blog');
+  const {t: tNewsletter} = useTranslation('newsletter');
+  const url = `https://carlogino.com/blog/${blog.slug}`;
+  const encodedUrl = encodeURIComponent(url);
+
   return (
-    <footer className="m-auto flex w-full flex-col text-center">
-      <ShareToSocialMedia blog={blog} />
-
-      <p className="my-4 text-neutral-700 dark:text-neutral-300">
-        If you find this useful and you want to support me
-      </p>
-      <Coffee />
-
-      <p className="my-4 text-neutral-700 dark:text-neutral-300">
-        Get latest updates directly into your mailbox.
-      </p>
-      <form action={`/#subscribe`} className="flex justify-center">
-        <SubscribeButton className="flex items-center bg-primary-900 px-5 font-semibold">
-          <FaEnvelopeOpenText size={25} className="mr-2 text-white" />
-          <span className="text-white">Subscribe to my Newsletter</span>
-        </SubscribeButton>
-      </form>
-
-      <p className="mb-2 mt-4 text-neutral-700 dark:text-neutral-300">
-        <i>Connect with me</i>
-      </p>
+    <footer className="mt-16 border-t border-line pt-8">
+      <div className="flex flex-wrap items-center justify-between gap-4 font-mono text-xs text-ink-muted lowercase">
+        <div className="flex flex-wrap items-center gap-x-4 gap-y-1">
+          <span className="text-xs">
+            <span aria-hidden className="text-xs text-accent">
+              //{' '}
+            </span>
+            {t('share')}
+          </span>
+          <CopyLinkButton url={url} />
+          <a
+            href={`https://x.com/intent/post?url=${encodedUrl}&text=${encodeURIComponent(blog.title)}`}
+            target="_blank"
+            rel="noreferrer"
+            className={linkClass}
+          >
+            x ↗
+          </a>
+          <a
+            href={`https://www.linkedin.com/sharing/share-offsite/?url=${encodedUrl}`}
+            target="_blank"
+            rel="noreferrer"
+            className={linkClass}
+          >
+            linkedin ↗
+          </a>
+        </div>
+        <a
+          href="https://l.carlogino.com/bmac"
+          target="_blank"
+          rel="noreferrer"
+          className={linkClass}
+        >
+          buy me a coffee ↗
+        </a>
+      </div>
+
+      <section
+        aria-labelledby="post-newsletter"
+        className="mt-8 rounded-xl border border-line bg-panel p-6"
+      >
+        <SectionLabel id="post-newsletter">
+          {tNewsletter('form.button')}
+        </SectionLabel>
+        <p className="m-0 mb-4 text-ink-muted">{tNewsletter('subtitle')}</p>
+        <SubscribeForm layout="inline" />
+      </section>
+
       <NextLink
-        href="https://twitter.com/codegino"
-        aria-label="Follow me on Twitter"
-        target="_blank"
-        className="mt-2"
-        rel="noreferrer"
+        href="/blog"
+        className="mt-8 inline-block font-mono text-sm text-accent"
       >
-        <span className="relative h-10 rounded-3xl bg-[#1da1f2] px-6 py-2 text-white hover:shadow-xs hover:shadow-neutral-800">
-          <FaTwitter /> Follow @codegino
-        </span>
+        ← {t('allPosts').toLowerCase()}
       </NextLink>
     </footer>
   );
diff --git a/src/modules/blog/BlogHeader.tsx b/src/modules/blog/BlogHeader.tsx
index 7a443b0d3..f1734018c 100644
--- a/src/modules/blog/BlogHeader.tsx
+++ b/src/modules/blog/BlogHeader.tsx
@@ -1,59 +1,92 @@
-'use client';
-import type {FunctionComponent} from 'react';
-import {useTranslation} from '../../app/i18n/client';
+import {createTranslation} from '../../app/i18n/server';
 import {BlurringImage} from '../../components/BlurringImage';
+import NextLink from '../../components/basic/NextLink';
 import type {IBlogMetadata} from '../../models/mdxFiles';
 import type {BlurImageType} from '../../utils/image-blur.utils';
 
 type Props = {
   blog: IBlogMetadata;
+  readingMinutes: number;
   // Optional: drafts have no banner asset mapped yet.
 } & Partial<Pick<BlurImageType, 'svg' | 'img'>>;
 
-const BlogHeader: FunctionComponent<Props> = ({blog, img, svg}) => {
-  const {t} = useTranslation('common');
+const formatDate = (date: string) =>
+  new Intl.DateTimeFormat('en', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  }).format(new Date(date));
+
+export default async function BlogHeader({
+  blog,
+  readingMinutes,
+  img,
+  svg,
+}: Props) {
+  const {t} = await createTranslation('blog');
 
   return (
-    <article className="flex flex-col items-center text-center sm:pt-4">
-      <h1 className="mb-0 text-balance text-4xl">{blog.title}</h1>
-      {blog.description && (
-        <h2 className="description text-balance">{blog.description}</h2>
-      )}
-      <p className="mb-4 w-full text-neutral-700 dark:text-neutral-200">
-        {t('date', {
-          val: new Date(blog.date),
-          formatParams: {
-            val: {
-              weekday: 'long',
-              year: 'numeric',
-              month: 'long',
-              day: 'numeric',
-            },
-          },
-        })}
+    <header>
+      <NextLink
+        href="/blog"
+        className="font-mono text-xs text-ink-muted hover:text-accent"
+      >
+        ← {t('allPosts').toLowerCase()}
+      </NextLink>
+      <h1 className="m-0 mt-5 text-left text-3xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl">
+        {blog.title}
+      </h1>
+      {blog.description ? (
+        <p className="m-0 mt-4 text-lg text-balance text-ink-muted">
+          {blog.description}
+        </p>
+      ) : null}
+      <p className="m-0 mt-5 flex flex-wrap gap-x-3 gap-y-1 font-mono text-xs text-ink-muted">
+        <time dateTime={blog.date} className="text-xs">
+          {formatDate(blog.date)}
+        </time>
+        <span aria-hidden className="text-xs">
+          ·
+        </span>
+        <span className="text-xs">{t('minRead', {count: readingMinutes})}</span>
+        {blog.tags?.length ? (
+          <>
+            <span aria-hidden className="text-xs">
+              ·
+            </span>
+            {blog.tags.map(tag => (
+              <NextLink
+                key={tag}
+                href={`/blog?tags=${encodeURIComponent(tag)}`}
+                className="text-xs hover:text-accent"
+              >
+                #{tag}
+              </NextLink>
+            ))}
+          </>
+        ) : null}
       </p>
       {img && svg && !blog.hideBanner ? (
-        <div className="relative flex h-[60vh] max-h-140 w-[95vw] items-center justify-center md:max-h-200 lg:h-140 lg:w-260 lg:px-10">
-          <BlurringImage
-            alt={blog.bannerDescription}
-            title={blog.bannerDescription}
-            img={img}
-            svg={svg}
-            fill
-            sizes="(max-width: 1024px) 95vw, 1040px"
-            priority={true}
-            className="rounded-xl object-cover object-center shadow-xs shadow-neutral-900"
-          />
-        </div>
+        <figure className="m-0 mt-8">
+          <div className="relative aspect-video overflow-hidden rounded-xl ring-1 ring-line">
+            <BlurringImage
+              alt={blog.bannerDescription}
+              title={blog.bannerDescription}
+              img={img}
+              svg={svg}
+              fill
+              sizes="(max-width: 768px) 100vw, 720px"
+              priority={true}
+              className="object-cover object-center"
+            />
+          </div>
+          {blog.bannerDescription ? (
+            <figcaption className="mt-2 font-mono text-xs text-ink-muted">
+              {blog.bannerDescription}
+            </figcaption>
+          ) : null}
+        </figure>
       ) : null}
-      {blog.bannerDescription ? (
-        <aside className="mt-1 line-clamp-1 w-full text-sm text-neutral-700 dark:text-neutral-200">
-          {blog.bannerDescription}
-        </aside>
-      ) : null}
-      <br />
-    </article>
+    </header>
   );
-};
-
-export default BlogHeader;
+}
diff --git a/src/modules/blog/BlogSuggestionsList.tsx b/src/modules/blog/BlogSuggestionsList.tsx
deleted file mode 100644
index 9227ca945..000000000
--- a/src/modules/blog/BlogSuggestionsList.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-'use client';
-import {Fade} from 'react-awesome-reveal';
-import {useTranslation} from '../../app/i18n/client';
-import NextLink from '../../components/basic/NextLink';
-import SectionHeader from '../../components/home/SectionHeader';
-import type {IBlogMetadata} from '../../models/mdxFiles';
-import {BlogCardPreview} from './BlogCardPreview';
-
-type Props = {
-  blogs: IBlogMetadata[];
-};
-
-const BlogSuggestionsList = ({blogs}: Props) => {
-  const {t} = useTranslation('home');
-
-  return (
-    <section
-      id="blogs-list"
-      className="flex flex-col items-center overflow-hidden px-4 py-16 sm:py-20"
-    >
-      <Fade direction="up" triggerOnce>
-        <SectionHeader
-          kicker={t('blogSection.kicker')}
-          title={t('blogSection.title')}
-        />
-      </Fade>
-      <div className="grid w-full grid-cols-1 gap-8 md:max-w-4xl md:grid-cols-2">
-        {blogs.map(blog => (
-          <Fade key={blog.slug} direction="up" triggerOnce className="w-full">
-            <div className="transition-transform duration-200 hover:-translate-y-1">
-              <BlogCardPreview blog={blog} />
-            </div>
-          </Fade>
-        ))}
-      </div>
-      <NextLink
-        href="/blog"
-        aria-label="Blogs List"
-        className="mt-10 inline-flex items-center gap-2 rounded-lg border-2 border-neutral-300 px-5 py-2.5 font-semibold text-neutral-700 transition-all duration-200 hover:-translate-y-0.5 hover:border-primary-900 hover:text-primary-900 dark:border-neutral-600 dark:text-neutral-200 dark:hover:border-primary-300 dark:hover:text-primary-300"
-      >
-        {t('blogSection.viewAll')}
-      </NextLink>
-    </section>
-  );
-};
-
-export default BlogSuggestionsList;
diff --git a/src/modules/blog/BlogsFilter.tsx b/src/modules/blog/BlogsFilter.tsx
index c1160e84d..1b6a93e10 100644
--- a/src/modules/blog/BlogsFilter.tsx
+++ b/src/modules/blog/BlogsFilter.tsx
@@ -1,39 +1,75 @@
 'use client';
 
 import clsx from 'clsx';
-import {type FunctionComponent} from 'react';
+import {useState, type FunctionComponent} from 'react';
 import {useTranslation} from '../../app/i18n/client';
 
+const VISIBLE_TAGS = 8;
+
 const BlogsFilter: FunctionComponent<{
+  /** Most-used first. */
   tags: string[];
   selectedTags: string[];
   handleTagClick: (tag: string) => void;
-}> = ({tags, handleTagClick, selectedTags}) => {
+  onClear: () => void;
+}> = ({tags, handleTagClick, selectedTags, onClear}) => {
   const {t} = useTranslation('blog');
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  // Selected tags stay visible even when the list is collapsed.
+  const visibleTags = isExpanded
+    ? tags
+    : tags.filter(
+        (tag, index) => index < VISIBLE_TAGS || selectedTags.includes(tag),
+      );
+  const hiddenCount = tags.length - visibleTags.length;
+
+  const chipClass =
+    'rounded px-2 py-1 font-mono text-xs transition-colors hover:bg-panel hover:text-ink';
 
   return (
-    <section className="mb-8 flex max-w-4xl flex-col items-center">
-      <h3 className="mb-4 text-neutral-700 dark:text-neutral-200">
-        {t('filterByTags')}
-      </h3>
-      <div className="mb-4 flex flex-wrap justify-center gap-2">
-        {tags.map((tag, i) => (
-          <div
+    <fieldset className="m-0 flex min-w-0 flex-wrap items-center gap-1 border-0 p-0">
+      <legend className="sr-only">{t('filterByTags')}</legend>
+      {visibleTags.map(tag => {
+        const isSelected = selectedTags.includes(tag);
+
+        return (
+          <button
+            key={tag}
+            type="button"
+            aria-pressed={isSelected}
+            onClick={() => handleTagClick(tag)}
             className={clsx(
-              'mr-2 inline-block cursor-pointer whitespace-nowrap rounded-xl bg-white px-3 py-1 shadow-md last:mr-0 dark:bg-black',
-              {
-                'text-primary-600 bg-primary-800': selectedTags.includes(tag),
-              },
+              chipClass,
+              isSelected
+                ? 'bg-accent text-accent-ink hover:bg-accent hover:text-accent-ink'
+                : 'text-ink-muted',
             )}
-            onClick={() => handleTagClick(tag)}
-            role="presentation"
-            key={i}
           >
-            {tag}
-          </div>
-        ))}
-      </div>
-    </section>
+            #{tag}
+          </button>
+        );
+      })}
+      {hiddenCount > 0 || isExpanded ? (
+        <button
+          type="button"
+          aria-expanded={isExpanded}
+          onClick={() => setIsExpanded(expanded => !expanded)}
+          className={clsx(chipClass, 'text-accent')}
+        >
+          {isExpanded ? t('fewerTags') : t('moreTags', {count: hiddenCount})}
+        </button>
+      ) : null}
+      {selectedTags.length ? (
+        <button
+          type="button"
+          onClick={onClear}
+          className={clsx(chipClass, 'text-ink-muted underline')}
+        >
+          {t('clearTags')}
+        </button>
+      ) : null}
+    </fieldset>
   );
 };
 
diff --git a/src/modules/blog/OnThisPage.tsx b/src/modules/blog/OnThisPage.tsx
new file mode 100644
index 000000000..309f4a337
--- /dev/null
+++ b/src/modules/blog/OnThisPage.tsx
@@ -0,0 +1,108 @@
+'use client';
+import clsx from 'clsx';
+import {useEffect, useState} from 'react';
+import {useTranslation} from '../../app/i18n/client';
+import type {TocItem} from './rehype-heading-ids';
+
+/** Highlights the heading the reader is currently in. */
+function useActiveId(idList: string) {
+  const [activeId, setActiveId] = useState<string | null>(null);
+
+  useEffect(() => {
+    const headings = idList
+      .split(' ')
+      .filter(Boolean)
+      .map(id => document.getElementById(id))
+      .filter((el): el is HTMLElement => el !== null);
+    if (!headings.length) return;
+
+    const observer = new IntersectionObserver(
+      entries => {
+        const visible = entries.filter(entry => entry.isIntersecting);
+        if (visible.length) setActiveId(visible[0].target.id);
+      },
+      // A band near the top of the viewport, below the sticky header.
+      {rootMargin: '-80px 0px -70% 0px'},
+    );
+    headings.forEach(heading => observer.observe(heading));
+    return () => observer.disconnect();
+  }, [idList]);
+
+  return activeId;
+}
+
+function TocList({
+  toc,
+  activeId,
+  onNavigate,
+}: {
+  toc: TocItem[];
+  activeId?: string | null;
+  onNavigate?: () => void;
+}) {
+  return (
+    <ul className="m-0 list-none space-y-1.5 p-0">
+      {toc.map(item => (
+        <li key={item.id} className={clsx(item.depth === 3 && 'pl-3')}>
+          <a
+            href={`#${item.id}`}
+            onClick={onNavigate}
+            aria-current={item.id === activeId ? 'location' : undefined}
+            className={clsx(
+              'block text-sm leading-snug transition-colors hover:text-ink',
+              item.id === activeId ? 'text-accent' : 'text-ink-muted',
+            )}
+          >
+            {item.label}
+          </a>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+export default function OnThisPage({
+  toc,
+  variant,
+}: {
+  toc: TocItem[];
+  variant: 'sidebar' | 'inline';
+}) {
+  const {t} = useTranslation('blog');
+  // Joined so the observer only resets when the headings actually change.
+  const activeId = useActiveId(
+    variant === 'sidebar' ? toc.map(item => item.id).join(' ') : '',
+  );
+  const [isOpen, setIsOpen] = useState(false);
+
+  if (toc.length < 2) return null;
+
+  if (variant === 'inline') {
+    return (
+      <details
+        open={isOpen}
+        onToggle={event => setIsOpen(event.currentTarget.open)}
+        className="mb-8 rounded-lg border border-line bg-panel"
+      >
+        <summary className="cursor-pointer px-4 py-3 font-mono text-sm text-ink-muted lowercase">
+          {t('onThisPage')}
+        </summary>
+        <nav aria-label={t('onThisPage')} className="px-4 pb-4">
+          <TocList toc={toc} onNavigate={() => setIsOpen(false)} />
+        </nav>
+      </details>
+    );
+  }
+
+  return (
+    <nav aria-label={t('onThisPage')}>
+      <p className="m-0 mb-3 font-mono text-xs text-ink-muted lowercase">
+        <span aria-hidden className="text-xs text-accent">
+          //{' '}
+        </span>
+        {t('onThisPage')}
+      </p>
+      <TocList toc={toc} activeId={activeId} />
+    </nav>
+  );
+}
diff --git a/src/modules/blog/ShareToSocialMedia.tsx b/src/modules/blog/ShareToSocialMedia.tsx
deleted file mode 100644
index ac4d35e4a..000000000
--- a/src/modules/blog/ShareToSocialMedia.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import type {FunctionComponent} from 'react';
-import {FaFacebookSquare} from '@react-icons/all-files/fa/FaFacebookSquare';
-import {FaLinkedin} from '@react-icons/all-files/fa/FaLinkedin';
-import {FaPinterest} from '@react-icons/all-files/fa/FaPinterest';
-import {FaShareAlt} from '@react-icons/all-files/fa/FaShareAlt';
-import {FaTwitterSquare} from '@react-icons/all-files/fa/FaTwitterSquare';
-import clsx from 'clsx';
-import {IBlogMetadata} from '../../models/mdxFiles';
-import {getBlogBanner} from '../../data/blog-asset';
-
-const socialMedia = [
-  {
-    name: 'Twitter',
-    href: (blog: IBlogMetadata) =>
-      `https://twitter.com/share?url=https://carlogino.com/blog/${blog.slug}&text=${blog.title}`,
-    color: '#1da1f2',
-    icon: FaTwitterSquare,
-  },
-  {
-    name: 'Facebook',
-    href: (blog: IBlogMetadata) =>
-      `https://www.facebook.com/sharer/sharer.php?u=https://carlogino.com/blog/${blog.slug}`,
-    color: '#1877f2',
-    icon: FaFacebookSquare,
-  },
-  {
-    name: 'LinkedIn',
-    href: (blog: IBlogMetadata) =>
-      `https://www.linkedin.com/sharing/share-offsite/?url=https://carlogino.com/blog/${blog.slug}`,
-    color: '#0a66c2',
-    icon: FaLinkedin,
-  },
-  {
-    name: 'Pinterest',
-    href: (blog: IBlogMetadata) =>
-      `http://pinterest.com/pin/create/button/?url=https://carlogino.com/blog/${blog.slug}&media=${getBlogBanner(blog.slug)}&description=${blog.description}&title=${blog.title}`,
-    color: '#bd081c',
-    icon: FaPinterest,
-  },
-];
-
-const ShareToSocialMedia: FunctionComponent<{blog: IBlogMetadata}> = ({
-  blog,
-}) => {
-  return (
-    <section>
-      <h3 className="mb-6">
-        <FaShareAlt /> Share now
-      </h3>
-      <div className="flex flex-wrap justify-center gap-x-2 gap-y-3">
-        {socialMedia.map(sm => (
-          <a
-            href={sm.href(blog)}
-            key={sm.name}
-            target="_blank"
-            rel="noreferrer"
-            title={`Share on ${sm.name}`}
-            aria-label={`Share on ${sm.name}`}
-            className={clsx(
-              'hover:shadow-dark relative h-10 rounded-3xl px-4 py-2 text-white hover:shadow-xs',
-              'text-lg',
-              'flex items-center',
-            )}
-            style={{
-              backgroundColor: sm.color,
-            }}
-          >
-            <FaShareAlt className="mr-2" />
-            <sm.icon size={23} className="mr-1" />
-            {sm.name}
-          </a>
-        ))}
-      </div>
-    </section>
-  );
-};
-
-export default ShareToSocialMedia;
diff --git a/src/modules/blog/TableOfContents.tsx b/src/modules/blog/TableOfContents.tsx
deleted file mode 100644
index 41c62c78b..000000000
--- a/src/modules/blog/TableOfContents.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import type {FunctionComponent} from 'react';
-
-const TableOfContents: FunctionComponent<{
-  list: {
-    label: string;
-    href: string;
-  }[];
-}> = ({list, ...props}) => {
-  return (
-    <section {...props}>
-      <h2>Table of Contents</h2>
-      <ul>
-        {list.map(({label, href}) => {
-          return (
-            <li key={href} className="py-0.5">
-              <a
-                className="underline-on-hover underline--dark text-lg font-semibold"
-                aria-label={label}
-                title={label}
-                href={href}
-                target="_self"
-              >
-                {label}
-              </a>
-            </li>
-          );
-        })}
-      </ul>
-    </section>
-  );
-};
-
-export default TableOfContents;
diff --git a/src/modules/blog/rehype-heading-ids.ts b/src/modules/blog/rehype-heading-ids.ts
new file mode 100644
index 000000000..5ff3f9fed
--- /dev/null
+++ b/src/modules/blog/rehype-heading-ids.ts
@@ -0,0 +1,72 @@
+export type TocItem = {id: string; label: string; depth: 2 | 3};
+
+// Minimal hast shape; avoids pulling in @types/hast for one plugin.
+type HastNode = {
+  type: string;
+  tagName?: string;
+  name?: string;
+  value?: string;
+  properties?: Record<string, unknown>;
+  attributes?: {name?: string; value?: unknown}[];
+  children?: HastNode[];
+};
+
+const textOf = (node: HastNode): string =>
+  node.type === 'text'
+    ? (node.value ?? '')
+    : (node.children ?? []).map(textOf).join('');
+
+export const slugify = (text: string) =>
+  text
+    .toLowerCase()
+    .trim()
+    .replace(/[^\p{L}\p{N}\s-]/gu, '')
+    .replace(/\s+/g, '-')
+    .replace(/-+/g, '-');
+
+/**
+ * Gives every h2/h3 an id and collects them into `toc`.
+ *
+ * Older posts mark headings with `<Bookmark id="…" />`; that id is reused so
+ * existing links keep working and no duplicate id is created.
+ */
+export default function rehypeHeadingIds({toc}: {toc: TocItem[]}) {
+  return (tree: HastNode) => {
+    const usedIds = new Set<string>();
+
+    const walk = (node: HastNode) => {
+      if (
+        node.type === 'element' &&
+        (node.tagName === 'h2' || node.tagName === 'h3')
+      ) {
+        const label = textOf(node).trim();
+        if (!label) return;
+
+        const bookmarkId = node.children
+          ?.find(
+            child =>
+              child.type === 'mdxJsxTextElement' && child.name === 'Bookmark',
+          )
+          ?.attributes?.find(attribute => attribute.name === 'id')?.value;
+
+        let id: string;
+        if (typeof bookmarkId === 'string') {
+          id = bookmarkId;
+        } else {
+          const base = slugify(label) || 'section';
+          id = base;
+          for (let n = 2; usedIds.has(id); n++) id = `${base}-${n}`;
+          node.properties = {...node.properties, id};
+        }
+
+        usedIds.add(id);
+        toc.push({id, label, depth: node.tagName === 'h2' ? 2 : 3});
+        return;
+      }
+
+      node.children?.forEach(walk);
+    };
+
+    walk(tree);
+  };
+}
diff --git a/src/modules/common/AnchorTag.tsx b/src/modules/common/AnchorTag.tsx
index cd7935c0f..3c017ff9d 100644
--- a/src/modules/common/AnchorTag.tsx
+++ b/src/modules/common/AnchorTag.tsx
@@ -1,21 +1,19 @@
-import type {HTMLAttributes} from 'react';
+import type {AnchorHTMLAttributes} from 'react';
+
+const isExternal = (href?: string) => !!href && /^https?:\/\//.test(href);
 
 const BlogAnchor = ({
   children,
+  href,
   ...props
-}: HTMLAttributes<HTMLAnchorElement>) => {
-  return (
-    <a
-      className="underline-on-hover underline--dark text-green-800 dark:text-primary-300"
-      target="_blank"
-      aria-label={children as string}
-      rel="noreferrer"
-      title={children as string}
-      {...props}
-    >
-      {children}
-    </a>
-  );
-};
+}: AnchorHTMLAttributes<HTMLAnchorElement>) => (
+  <a
+    href={href}
+    {...(isExternal(href) ? {target: '_blank', rel: 'noreferrer'} : {})}
+    {...props}
+  >
+    {children}
+  </a>
+);
 
 export default BlogAnchor;
diff --git a/src/modules/common/BlockquoteTag.tsx b/src/modules/common/BlockquoteTag.tsx
index 6ecb3c0f4..842891ac7 100644
--- a/src/modules/common/BlockquoteTag.tsx
+++ b/src/modules/common/BlockquoteTag.tsx
@@ -1,13 +1,8 @@
 import type {HTMLAttributes} from 'react';
 
-const BlockQuote = (props: HTMLAttributes<HTMLQuoteElement>) => {
-  return (
-    <blockquote
-      className="dark:ring-nutral-800 m-0 my-4 box-border  border-b border-l-4 border-primary-300 bg-neutral-50 p-2
-      font-roboto text-xl ring-1 ring-neutral-200 dark:bg-neutral-900"
-      {...props}
-    />
-  );
-};
+// Styled by `.prose-blog`.
+const BlockQuote = (props: HTMLAttributes<HTMLQuoteElement>) => (
+  <blockquote {...props} />
+);
 
 export default BlockQuote;
diff --git a/src/modules/common/CodeBlockElement.tsx b/src/modules/common/CodeBlockElement.tsx
index 4163281e9..f02a59e0d 100644
--- a/src/modules/common/CodeBlockElement.tsx
+++ b/src/modules/common/CodeBlockElement.tsx
@@ -5,11 +5,8 @@ const PreToCodeBlock = (preProps: any) => {
   const props = preToCodeBlock(preProps);
 
   if (props) {
-    return (
-      <pre>
-        <CodeBlockImpl {...props} />
-      </pre>
-    );
+    // CodeBlockImpl renders its own <pre>.
+    return <CodeBlockImpl {...props} />;
   } else {
     return <pre {...preProps} />;
   }
diff --git a/src/modules/common/CodeBlockImpl.tsx b/src/modules/common/CodeBlockImpl.tsx
index a3df11ec6..cd7afe7a5 100644
--- a/src/modules/common/CodeBlockImpl.tsx
+++ b/src/modules/common/CodeBlockImpl.tsx
@@ -76,98 +76,87 @@ const CodeBlockImpl: FunctionComponent<CodeBlockProps> = ({
     }
   }
 
+  const showMarkers = Boolean(add || del);
+
   return (
-    <>
-      <code className="relative my-2">
+    <div className="my-6">
+      <div className="overflow-hidden rounded-lg bg-terminal text-terminal-ink ring-1 ring-black/10 dark:ring-white/10">
         {!noHeader && (
-          <span
-            className="
-        relative top-1 flex h-6 w-full justify-between rounded-t-lg pl-2 pr-1 text-right ring-1 ring-neutral-200 file:bg-neutral-100 dark:ring-neutral-800
-        "
-          >
-            <span className="inline-block truncate text-neutral-700 dark:text-neutral-300">
+          <div className="flex h-9 items-center justify-between gap-4 border-b border-white/10 px-4 font-mono text-xs text-white/55">
+            <span className="truncate text-xs">
               {fileName ? fileName : ''}
-              {!noExt && languageLabel}
+              {!noExt && !fileName?.endsWith(languageLabel) && languageLabel}
             </span>
             <ClipboardCopyButton value={children} />
-          </span>
+          </div>
         )}
         <Highlight
           theme={themes.vsDark}
           code={children.trim()}
           language={language}
         >
-          {({className, style, tokens, getLineProps, getTokenProps}) => (
-            <div className="relative">
-              {!noLine && (
-                <span className="absolute inset-y-0 left-0 z-10 flex flex-col rounded-md pt-2">
-                  {tokens.map((_, i) => (
+          {({tokens, getLineProps, getTokenProps}) => (
+            <pre className="m-0 overflow-x-auto py-3 font-mono text-[13px] leading-6 sm:text-sm [&_*]:text-[length:inherit]">
+              <code className="grid min-w-max">
+                {tokens.map((line, i) => {
+                  const lineNumber = i + 1;
+                  const isAdded = addedLines.has(lineNumber);
+                  const isRemoved = removedLines.has(lineNumber);
+                  const {className: lineClassName, style: lineStyle} =
+                    getLineProps({line});
+
+                  return (
                     <span
-                      className="min-w-8 max-w-8 select-none bg-[#1e1e1e] pl-2 pr-3
-                    text-right code-line-height text-white
-                    "
                       key={i}
+                      style={lineStyle}
+                      className={clsx(
+                        lineClassName,
+                        'flex min-h-6 px-4',
+                        isAdded && 'bg-green-500/10',
+                        isRemoved && 'bg-red-500/10',
+                      )}
                     >
-                      {i + 1}
-                      {add && addedLines.has(i + 1) && (
-                        <span className="absolute left-0 inline-block w-[4.25ch] text-right text-green-400">
-                          +
+                      {!noLine && (
+                        <span className="mr-4 inline-block w-6 shrink-0 text-right text-white/30 select-none">
+                          {lineNumber}
                         </span>
                       )}
-                      {del && removedLines.has(i + 1) && (
-                        <span className="absolute left-0 inline-block w-[4.25ch] text-right text-red-400">
-                          -
+                      {showMarkers && (
+                        <span
+                          aria-hidden
+                          className={clsx(
+                            'mr-2 inline-block w-3 shrink-0 select-none',
+                            isAdded && 'text-green-400',
+                            isRemoved && 'text-red-400',
+                          )}
+                        >
+                          {isAdded ? '+' : isRemoved ? '-' : ' '}
                         </span>
                       )}
+                      <span>
+                        {line.map((token, key) => (
+                          <span key={key} {...getTokenProps({token})} />
+                        ))}
+                      </span>
                     </span>
-                  ))}
-                </span>
-              )}
-
-              <span
-                className={clsx(
-                  'relative my-1 flex flex-col overflow-auto p-2 text-lg code-line-height',
-                  'no-scrollbar rounded-b-md shadow-xs shadow-black',
-                  className,
-                  {
-                    'pl-8': !noLine,
-                    'ml-3': add || del,
-                  },
-                )}
-                style={style}
-              >
-                {tokens.map((line, i) => (
-                  <span {...getLineProps({line, key: i})} key={i}>
-                    {line.map((token, key) => (
-                      <span
-                        {...getTokenProps({token, key})}
-                        key={key}
-                        className={clsx({
-                          'text-green-400!': add && addedLines.has(i + 1),
-                          'text-red-400!': del && removedLines.has(i + 1),
-                        })}
-                      />
-                    ))}
-                  </span>
-                ))}
-              </span>
-            </div>
+                  );
+                })}
+              </code>
+            </pre>
           )}
         </Highlight>
-      </code>
+      </div>
       {codePenID && (
-        <div>
-          <NextLink
-            href={`https://codepen.io/codegino/pen/${codePenID}`}
-            target="_blank"
-            rel="noreferrer"
-            className="underline-on-hover underline-dark"
-          >
-            Link to Codepen
-          </NextLink>
-        </div>
+        <NextLink
+          href={`https://codepen.io/codegino/pen/${codePenID}`}
+          target="_blank"
+          rel="noreferrer"
+          className="mt-2 inline-block font-mono text-xs text-accent"
+        >
+          Open in CodePen ↗
+        </NextLink>
       )}
-    </>
+    </div>
   );
 };
 
diff --git a/src/modules/common/ContentCard.tsx b/src/modules/common/ContentCard.tsx
deleted file mode 100644
index e08895486..000000000
--- a/src/modules/common/ContentCard.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-'use client';
-
-import type {FunctionComponent} from 'react';
-import clsx from 'clsx';
-import Image from 'next/image';
-import NextLink from '../../components/basic/NextLink';
-import type {IBlogMetadata} from '../../models/mdxFiles';
-import {ISlideMetadata} from '../../models/slide';
-import {useTranslation} from '../../app/i18n/client';
-import {getBlogBanner} from '../../data/blog-asset';
-
-const BlogCard: FunctionComponent<{
-  blog: IBlogMetadata | ISlideMetadata;
-}> = ({blog}) => {
-  const {t} = useTranslation('blog');
-  const banner = getBlogBanner(blog.slug);
-
-  return (
-    <figure
-      className={clsx(
-        'relative flex flex-col items-center justify-between sm:flex-row-reverse',
-        'h-100 w-full rounded-xl bg-neutral-50 dark:bg-neutral-800 sm:h-80 sm:px-8 sm:py-4',
-        'mb-8 max-w-180 shadow-xs shadow-neutral-700 last:mb-0 hover:shadow-md hover:shadow-neutral-800 sm:max-w-220',
-      )}
-    >
-      <div
-        className={clsx(
-          'absolute overflow-hidden rounded-2xl sm:relative',
-          'inset-0',
-          'shadow-md shadow-neutral-600 sm:ml-2 sm:mt-4',
-          'size-full sm:h-60 sm:w-80 sm:min-w-80',
-        )}
-      >
-        {/* Drafts (published: false) have no slug, so there is no banner
-            asset. next/image cannot take an empty src. */}
-        {banner ? (
-          <Image
-            src={banner}
-            alt={blog.bannerDescription ?? blog.title}
-            title={blog.bannerDescription ?? blog.title}
-            fill={true}
-            sizes="(max-width: 640px) 100vw, 320px"
-            className="object-cover"
-            placeholder="blur"
-            blurDataURL={banner}
-          />
-        ) : (
-          <div className="absolute inset-0 bg-neutral-200 dark:bg-neutral-700" />
-        )}
-      </div>
-      <figcaption className="absolute bottom-0 w-full bg-neutral-50 p-4 opacity-95 dark:bg-neutral-800 sm:relative sm:p-0 sm:opacity-100">
-        <NextLink href={`/blog/${blog.slug}`} aria-label={blog.title}>
-          <h2 className="line-clamp-2 text-balance">{blog.title}</h2>
-          <h3 className="line-clamp-2 text-balance text-neutral-800 dark:text-neutral-200">
-            {blog.description}
-          </h3>
-          <p className="mt-3 text-neutral-700 dark:text-neutral-300">
-            {t('date', {
-              val: new Date(blog.date),
-              formatParams: {
-                val: {
-                  weekday: 'long',
-                  year: 'numeric',
-                  month: 'long',
-                  day: 'numeric',
-                },
-              },
-            })}
-          </p>
-
-          {blog.tags && blog.tags.length ? (
-            <div className="mt-4 flex flex-wrap gap-2 sm:mt-8">
-              {blog.tags.map(tag => (
-                <span
-                  className="inline-block flex-nowrap rounded-xl bg-white px-3 py-1 shadow-xs shadow-neutral-200 dark:bg-neutral-900 dark:shadow-neutral-900"
-                  key={tag}
-                >
-                  {tag}
-                </span>
-              ))}
-            </div>
-          ) : null}
-        </NextLink>
-      </figcaption>
-    </figure>
-  );
-};
-
-export default BlogCard;
diff --git a/src/modules/common/ContentLayout.tsx b/src/modules/common/ContentLayout.tsx
deleted file mode 100644
index 26f761f1d..000000000
--- a/src/modules/common/ContentLayout.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-'use client';
-import clsx from 'clsx';
-import type {FunctionComponent} from 'react';
-
-const ContentLayout: FunctionComponent<{children: React.ReactNode}> = ({
-  children,
-  ...props
-}) => {
-  return (
-    <article
-      {...props}
-      className={clsx(
-        'm-auto mb-10 flex max-w-(--breakpoint-md) flex-col px-2',
-        '[&_*_code]:bg-neutral-100 [&_*_code]:text-neutral-800 dark:[&_*_code]:bg-neutral-800 dark:[&_*_code]:text-neutral-200',
-        '[&>pre]:my-3',
-        '[&_blockquote>p]:pl-2',
-        '[&_ul]:m-0',
-        '[&_:is(ol,ul)>li]:text-base [&_:is(ol,ul)>li]:leading-5 [&_:is(ol,ul)>li]:ml-8',
-        '[&_ol>li]:list-decimal [&_ul>li]:list-disc',
-        '[&_ol]:m-0 [&>p]:mx-1 [&>p]:px-1 sm:[&>p]:mx-2 sm:[&>p]:px-2',
-        '[&_:is(li,p,h2,h3,h4,h5,h6)_code]:whitespace-nowrap [&_:is(li,p,h2,h3,h4,h5,h6)_code]:rounded-[3px] [&_:is(li,p,h2,h3,h4,h5,h6)_code]:px-1 [&_:is(li,p,h2,h3,h4,h5,h6)_code]:font-roboto [&_:is(li,p,h2,h3,h4,h5,h6)_code]:text-[0.95rem]',
-        '[&_:is(li,p,h2,h3,h4,h5,h6)_code]:ring-1 [&_:is(li,p,h2,h3,h4,h5,h6)_code]:ring-neutral-300/70 dark:[&_:is(li,p,h2,h3,h4,h5,h6)_code]:ring-neutral-600/70',
-        '[&_:is(h2,h3,h4)_em]:text-[0.95em]',
-        '[&_h4]:mt-4',
-      )}
-    >
-      {children}
-    </article>
-  );
-};
-
-export default ContentLayout;
diff --git a/src/modules/common/ImageTag.tsx b/src/modules/common/ImageTag.tsx
index adbffe8ce..293e53dc6 100644
--- a/src/modules/common/ImageTag.tsx
+++ b/src/modules/common/ImageTag.tsx
@@ -1,7 +1,7 @@
 import Image, {type ImageProps} from 'next/image';
 
 const BlogImg = ({width = 1100, height = 600, ...props}: ImageProps) => (
-  <div className="size-full px-8">
+  <span className="my-8 block">
     <Image
       {...props}
       width={width}
@@ -9,10 +9,11 @@ const BlogImg = ({width = 1100, height = 600, ...props}: ImageProps) => (
       alt={props.alt || 'An image of a blog post'}
       title={props.title || 'An image of a blog post'}
       placeholder="blur"
-      className="object-contain object-center"
+      sizes="(max-width: 768px) 100vw, 720px"
+      className="h-auto w-full rounded-lg object-contain object-center"
       blurDataURL="/assets/blog-placeholder.jpeg"
     />
-  </div>
+  </span>
 );
 
 export default BlogImg;
diff --git a/src/modules/common/ListElementTag.tsx b/src/modules/common/ListElementTag.tsx
deleted file mode 100644
index 7b7f79629..000000000
--- a/src/modules/common/ListElementTag.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import type {HTMLAttributes} from 'react';
-
-const BlogListElement = ({
-  children,
-  ...props
-}: HTMLAttributes<HTMLLIElement>) => <li {...props}>{children}</li>;
-
-export default BlogListElement;
diff --git a/src/modules/common/ParagraphTag.tsx b/src/modules/common/ParagraphTag.tsx
deleted file mode 100644
index 0981eadcf..000000000
--- a/src/modules/common/ParagraphTag.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import type {HTMLAttributes} from 'react';
-
-const BlogParagraph = ({
-  children,
-  ...props
-}: HTMLAttributes<HTMLParagraphElement>) => <p {...props}>{children}</p>;
-
-export default BlogParagraph;
diff --git a/src/utils/scroll-to-view-hook.ts b/src/utils/scroll-to-view-hook.ts
deleted file mode 100644
index d0f83ceb9..000000000
--- a/src/utils/scroll-to-view-hook.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-'use client';
-import {useEffect, useRef} from 'react';
-
-export const useScrollToView = (querySelector: string) => {
-  const ref = useRef<HTMLInputElement | null>(null);
-
-  useEffect(() => {
-    ref.current = document.querySelector(querySelector);
-  }, [querySelector]);
-
-  const scrollToContent = () => {
-    if (ref.current) {
-      ref.current.scrollIntoView({
-        behavior: 'smooth',
-        block: 'start',
-      });
-    }
-  };
-
-  return {scrollToContent};
-};
diff --git a/styles/tailwind.css b/styles/tailwind.css
index 73ebd7cef..1be269d25 100644
--- a/styles/tailwind.css
+++ b/styles/tailwind.css
@@ -3,16 +3,16 @@
 @custom-variant dark (&:where(.dark, .dark *));
 
 @theme {
-  --color-primary-50: hsl(125, 65%, 93%);
-  --color-primary-100: hsl(125, 49%, 84%);
-  --color-primary-200: hsl(125, 42%, 74%);
-  --color-primary-300: hsl(125, 38%, 63%);
-  --color-primary-400: hsl(125, 35%, 51%);
-  --color-primary-500: hsl(125, 39%, 41%);
-  --color-primary-600: hsl(125, 47%, 35%);
-  --color-primary-700: hsl(125, 56%, 29%);
-  --color-primary-800: hsl(125, 73%, 20%);
-  --color-primary-900: hsl(125, 86%, 14%);
+  --color-primary-50: hsl(140, 65%, 93%);
+  --color-primary-100: hsl(140, 49%, 84%);
+  --color-primary-200: hsl(140, 42%, 74%);
+  --color-primary-300: hsl(140, 38%, 63%);
+  --color-primary-400: hsl(140, 35%, 51%);
+  --color-primary-500: hsl(140, 39%, 41%);
+  --color-primary-600: hsl(140, 47%, 35%);
+  --color-primary-700: hsl(140, 56%, 29%);
+  --color-primary-800: hsl(140, 73%, 20%);
+  --color-primary-900: hsl(140, 86%, 14%);
 
   --breakpoint-xs: 400px;
 
@@ -28,8 +28,45 @@
 
 /* `inline` so the font vars injected by next/font on <html> win over :root. */
 @theme inline {
-  --font-inter: var(--font-inter);
-  --font-roboto: var(--font-roboto);
+  --font-sans: var(--font-plex-sans), ui-sans-serif, system-ui, sans-serif;
+  --font-mono: var(--font-plex-mono), ui-monospace, SFMono-Regular, monospace;
+
+  /* Semantic colors; values swap with the theme below. */
+  --color-canvas: var(--canvas);
+  --color-panel: var(--panel);
+  --color-ink: var(--ink);
+  --color-ink-muted: var(--ink-muted);
+  --color-line: var(--line);
+  --color-accent: var(--accent);
+  --color-accent-ink: var(--accent-ink);
+  --color-terminal: var(--terminal);
+  --color-terminal-ink: var(--terminal-ink);
+  --color-terminal-accent: var(--terminal-accent);
+}
+
+/* Warm neutrals with a single green accent. */
+:root {
+  --canvas: #f4f2ec;
+  --panel: #ebe8df;
+  --ink: #171712;
+  --ink-muted: #64625a;
+  --line: #dedbd0;
+  --accent: #1f7a3a;
+  --accent-ink: #ffffff;
+  --terminal: #12150f;
+  --terminal-ink: #dfe6d8;
+  --terminal-accent: #5ee08a;
+}
+
+.dark {
+  --canvas: #0f110e;
+  --panel: #161a14;
+  --ink: #e6e8e1;
+  --ink-muted: #8b9184;
+  --line: #23271f;
+  --accent: #5ee08a;
+  --accent-ink: #0b0d0a;
+  --terminal: #0a0c09;
 }
 
 /*
@@ -88,12 +125,15 @@
   body {
     padding: 0;
     margin: 0;
-    @apply bg-neutral-50 dark:bg-neutral-900;
-    @apply text-neutral-800 dark:text-neutral-300;
+    @apply bg-canvas text-ink;
   }
 
   body {
-    font-family: var(--font-inter), var(--font-roboto), sans-serif;
+    font-family: var(--font-sans);
+  }
+
+  ::selection {
+    @apply bg-accent text-accent-ink;
   }
 
   a {
@@ -150,3 +190,121 @@
     display: inline-block;
   }
 }
+
+/* Long-form post typography. Components layer so utilities still win. */
+@layer components {
+  .prose-blog {
+    @apply text-ink;
+    font-size: 1.0625rem;
+    line-height: 1.75;
+
+    & :where(p, li, a, strong, em, td, th) {
+      font-size: inherit;
+      line-height: inherit;
+    }
+
+    & :where(p) {
+      @apply my-5;
+    }
+
+    & :where(h2, h3, h4) {
+      @apply text-left font-semibold tracking-tight text-ink;
+      scroll-margin-top: 5rem;
+    }
+    & :where(h2) {
+      @apply mt-14 mb-4 text-2xl;
+    }
+    & :where(h3) {
+      @apply mt-10 mb-3 text-xl;
+    }
+    & :where(h4) {
+      @apply mt-8 mb-2 text-lg;
+    }
+    & :where([id]) {
+      scroll-margin-top: 5rem;
+    }
+
+    & :where(a) {
+      @apply text-accent underline decoration-1 underline-offset-4;
+    }
+    & :where(a:hover) {
+      @apply decoration-2;
+    }
+
+    & :where(ul, ol) {
+      @apply my-5 pl-6;
+    }
+    & :where(ul) {
+      @apply list-disc;
+    }
+    & :where(ol) {
+      @apply list-decimal;
+    }
+    & :where(li) {
+      @apply my-1.5 pl-1;
+    }
+    & :where(li)::marker {
+      @apply text-ink-muted;
+    }
+
+    & :where(blockquote) {
+      @apply my-6 rounded-r-lg border-l-2 border-accent bg-panel px-5 py-1;
+    }
+    & :where(blockquote p) {
+      @apply my-3;
+    }
+
+    & :where(:not(pre) > code) {
+      @apply rounded border border-line bg-panel px-1.5 py-0.5 font-mono;
+      font-size: 0.875em;
+    }
+
+    & :where(hr) {
+      @apply my-12 border-line;
+    }
+
+    & :where(table) {
+      @apply my-6 w-full border-collapse text-left;
+      font-size: 0.9375rem;
+    }
+    & :where(th, td) {
+      @apply border-b border-line px-3 py-2;
+    }
+
+    & :where(img) {
+      @apply rounded-lg;
+    }
+
+    & > :first-child {
+      @apply mt-0;
+    }
+
+    /* Posts used <br /> as paragraph spacing; margins handle that now. */
+    & > br {
+      display: none;
+    }
+  }
+}
+
+/* Print: always light, plain white page, no app chrome (see print:hidden). */
+@media print {
+  :root,
+  .dark {
+    --canvas: #ffffff;
+    --panel: #ffffff;
+    --ink: #000000;
+    --ink-muted: #3d3d38;
+    --line: #d4d4cc;
+    --accent: #1f7a3a;
+    --accent-ink: #ffffff;
+  }
+
+  /* Everything is rem-sized, so this scales the whole resume to fit A4. */
+  html {
+    font-size: 12.5px;
+  }
+
+  @page {
+    margin: 14mm 16mm;
+  }
+}