Update hero section; part 1

Update comment themes; add github theme family
Update theme families
2026-04-14 02:53:51 +00:00 · 2026-04-06 17:57:29 -07:00 · 2026-04-06 16:32:15 -07:00 · 2026-04-06 16:25:10 -07:00 · 2026-04-06 16:20:17 -07:00 · 2026-04-06 15:41:31 -07:00
80 changed files with 2811 additions and 561 deletions
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -12,6 +12,7 @@ export default defineConfig({
  output: "server",
  adapter: vercel(),
  site: "https://timmypidashev.dev",
+  devToolbar: { enabled: false },
  build: {
    // Enable build-time optimizations
    inlineStylesheets: "auto",
--- a/package.json
+++ b/package.json
@@ -18,14 +18,17 @@
  },
  "dependencies": {
    "@astrojs/mdx": "^5.0.3",
-    "@astrojs/vercel": "^10.0.3",
    "@astrojs/rss": "^4.0.18",
    "@astrojs/sitemap": "^3.7.2",
+    "@astrojs/vercel": "^10.0.3",
    "@giscus/react": "^3.1.0",
    "@pilcrowjs/object-parser": "^0.0.4",
    "@react-hook/intersection-observer": "^3.1.2",
    "@rehype-pretty/transformers": "^0.13.2",
+    "@vercel/analytics": "^2.0.1",
+    "@vercel/speed-insights": "^2.0.0",
    "arctic": "^3.7.0",
+    "ioredis": "^5.10.1",
    "lucide-react": "^0.468.0",
    "marked": "^15.0.12",
    "react": "^18.3.1",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -10,7 +10,7 @@ importers:
    dependencies:
      '@astrojs/mdx':
        specifier: ^5.0.3
-        version: 5.0.3(astro@6.1.2(@types/node@24.12.0)(@vercel/functions@3.4.3)(jiti@1.21.7)(rollup@4.60.1)(typescript@5.7.3)(yaml@2.8.3))
+        version: 5.0.3(astro@6.1.2(@types/node@24.12.0)(@upstash/redis@1.37.0)(@vercel/functions@3.4.3)(@vercel/kv@3.0.0)(ioredis@5.10.1)(jiti@1.21.7)(rollup@4.60.1)(typescript@5.7.3)(yaml@2.8.3))
      '@astrojs/rss':
        specifier: ^4.0.18
        version: 4.0.18
@@ -19,7 +19,7 @@ importers:
        version: 3.7.2
      '@astrojs/vercel':
        specifier: ^10.0.3
-        version: 10.0.3(astro@6.1.2(@types/node@24.12.0)(@vercel/functions@3.4.3)(jiti@1.21.7)(rollup@4.60.1)(typescript@5.7.3)(yaml@2.8.3))(react@18.3.1)(rollup@4.60.1)
+        version: 10.0.3(astro@6.1.2(@types/node@24.12.0)(@upstash/redis@1.37.0)(@vercel/functions@3.4.3)(@vercel/kv@3.0.0)(ioredis@5.10.1)(jiti@1.21.7)(rollup@4.60.1)(typescript@5.7.3)(yaml@2.8.3))(react@18.3.1)(rollup@4.60.1)
      '@giscus/react':
        specifier: ^3.1.0
        version: 3.1.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -32,9 +32,18 @@ importers:
      '@rehype-pretty/transformers':
        specifier: ^0.13.2
        version: 0.13.2
+      '@vercel/analytics':
+        specifier: ^2.0.1
+        version: 2.0.1(react@18.3.1)
+      '@vercel/speed-insights':
+        specifier: ^2.0.0
+        version: 2.0.0(react@18.3.1)
      arctic:
        specifier: ^3.7.0
        version: 3.7.0
+      ioredis:
+        specifier: ^5.10.1
+        version: 5.10.1
      lucide-react:
        specifier: ^0.468.0
        version: 0.468.0(react@18.3.1)
@@ -80,7 +89,7 @@ importers:
        version: 5.0.2(@types/node@24.12.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(jiti@1.21.7)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(yaml@2.8.3)
      '@astrojs/tailwind':
        specifier: ^6.0.2
-        version: 6.0.2(astro@6.1.2(@types/node@24.12.0)(@vercel/functions@3.4.3)(jiti@1.21.7)(rollup@4.60.1)(typescript@5.7.3)(yaml@2.8.3))(tailwindcss@3.4.19(yaml@2.8.3))
+        version: 6.0.2(astro@6.1.2(@types/node@24.12.0)(@upstash/redis@1.37.0)(@vercel/functions@3.4.3)(@vercel/kv@3.0.0)(ioredis@5.10.1)(jiti@1.21.7)(rollup@4.60.1)(typescript@5.7.3)(yaml@2.8.3))(tailwindcss@3.4.19(yaml@2.8.3))
      '@tailwindcss/typography':
        specifier: ^0.5.19
        version: 0.5.19(tailwindcss@3.4.19(yaml@2.8.3))
@@ -92,7 +101,7 @@ importers:
        version: 18.3.7(@types/react@18.3.28)
      astro:
        specifier: ^6.1.2
-        version: 6.1.2(@types/node@24.12.0)(@vercel/functions@3.4.3)(jiti@1.21.7)(rollup@4.60.1)(typescript@5.7.3)(yaml@2.8.3)
+        version: 6.1.2(@types/node@24.12.0)(@upstash/redis@1.37.0)(@vercel/functions@3.4.3)(@vercel/kv@3.0.0)(ioredis@5.10.1)(jiti@1.21.7)(rollup@4.60.1)(typescript@5.7.3)(yaml@2.8.3)
      tailwindcss:
        specifier: ^3.4.19
        version: 3.4.19(yaml@2.8.3)
@@ -563,6 +572,9 @@ packages:
    cpu: [x64]
    os: [win32]

+  '@ioredis/commands@1.5.1':
+    resolution: {integrity: sha512-JH8ZL/ywcJyR9MmJ5BNqZllXNZQqQbnVZOqpPQqE1vHiFgAw4NHbvE0FOduNU8IX9babitBT46571OnPTT0Zcw==}
+
  '@isaacs/fs-minipass@4.0.1':
    resolution: {integrity: sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==}
    engines: {node: '>=18.0.0'}
@@ -913,6 +925,9 @@ packages:
  '@ungap/structured-clone@1.3.0':
    resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==}

+  '@upstash/redis@1.37.0':
+    resolution: {integrity: sha512-LqOJ3+XWPLSZ2rGSed5DYG3ixybxb8EhZu3yQqF7MdZX1wLBG/FRcI6xcUZXHy/SS7mmXWyadrud0HJHkOc+uw==}
+
  '@vercel/analytics@1.6.1':
    resolution: {integrity: sha512-oH9He/bEM+6oKlv3chWuOOcp8Y6fo6/PSro8hEkgCW3pu9/OiCXiUpRUogDh3Fs3LH2sosDrx8CxeOLBEE+afg==}
    peerDependencies:
@@ -939,6 +954,35 @@ packages:
      vue-router:
        optional: true

+  '@vercel/analytics@2.0.1':
+    resolution: {integrity: sha512-MTQG6V9qQrt1tsDeF+2Uoo5aPjqbVPys1xvnIftXSJYG2SrwXRHnqEvVoYID7BTruDz4lCd2Z7rM1BdkUehk2g==}
+    peerDependencies:
+      '@remix-run/react': ^2
+      '@sveltejs/kit': ^1 || ^2
+      next: '>= 13'
+      nuxt: '>= 3'
+      react: ^18 || ^19 || ^19.0.0-rc
+      svelte: '>= 4'
+      vue: ^3
+      vue-router: ^4
+    peerDependenciesMeta:
+      '@remix-run/react':
+        optional: true
+      '@sveltejs/kit':
+        optional: true
+      next:
+        optional: true
+      nuxt:
+        optional: true
+      react:
+        optional: true
+      svelte:
+        optional: true
+      vue:
+        optional: true
+      vue-router:
+        optional: true
+
  '@vercel/functions@3.4.3':
    resolution: {integrity: sha512-kA14KIUVgAY6VXbhZ5jjY+s0883cV3cZqIU3WhrSRxuJ9KvxatMjtmzl0K23HK59oOUjYl7HaE/eYMmhmqpZzw==}
    engines: {node: '>= 20'}
@@ -948,6 +992,11 @@ packages:
      '@aws-sdk/credential-provider-web-identity':
        optional: true

+  '@vercel/kv@3.0.0':
+    resolution: {integrity: sha512-pKT8fRnfyYk2MgvyB6fn6ipJPCdfZwiKDdw7vB+HL50rjboEBHDVBEcnwfkEpVSp2AjNtoaOUH7zG+bVC/rvSg==}
+    engines: {node: '>=14.6'}
+    deprecated: 'Vercel KV is deprecated. If you had an existing KV store, it should have moved to Upstash Redis which you will see under Vercel Integrations. For new projects, install a Redis integration from Vercel Marketplace: https://vercel.com/marketplace?category=storage&search=redis'
+
  '@vercel/nft@1.5.0':
    resolution: {integrity: sha512-IWTDeIoWhQ7ZtRO/JRKH+jhmeQvZYhtGPmzw/QGDY+wDCQqfm25P9yIdoAFagu4fWsK4IwZXDFIjrmp5rRm/sA==}
    engines: {node: '>=20'}
@@ -960,6 +1009,32 @@ packages:
  '@vercel/routing-utils@5.3.3':
    resolution: {integrity: sha512-KYm2sLNUD48gDScv8ob4ejc3Gww2jcJyW80hTdYlenAPz/5BQar1Gyh38xrUuZ532TUwSb5mV1uRbAuiykq0EQ==}

+  '@vercel/speed-insights@2.0.0':
+    resolution: {integrity: sha512-jwkNcrTeafWxjmWq4AHBaptSqZiJkYU5adLC9QBSqeim0GcqDMgN5Ievh8OG1rJ6W3A4l1oiP7qr9CWxGuzu3w==}
+    peerDependencies:
+      '@sveltejs/kit': ^1 || ^2
+      next: '>= 13'
+      nuxt: '>= 3'
+      react: ^18 || ^19 || ^19.0.0-rc
+      svelte: '>= 4'
+      vue: ^3
+      vue-router: ^4
+    peerDependenciesMeta:
+      '@sveltejs/kit':
+        optional: true
+      next:
+        optional: true
+      nuxt:
+        optional: true
+      react:
+        optional: true
+      svelte:
+        optional: true
+      vue:
+        optional: true
+      vue-router:
+        optional: true
+
  '@vitejs/plugin-react@5.2.0':
    resolution: {integrity: sha512-YmKkfhOAi3wsB1PhJq5Scj3GXMn3WvtQ/JC0xoopuHoXSdmtdStOpFrYaT1kie2YgFBcIe64ROzMYRjCrYOdYw==}
    engines: {node: ^20.19.0 || >=22.12.0}
@@ -1115,6 +1190,10 @@ packages:
    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
    engines: {node: '>=6'}

+  cluster-key-slot@1.1.2:
+    resolution: {integrity: sha512-RMr0FhtfXemyinomL4hrWcYJxmX6deFdCxpJzhDttxgO1+bcCnkk+9drydLVDmAMG7NE6aN/fl4F7ucU/90gAA==}
+    engines: {node: '>=0.10.0'}
+
  collapse-white-space@2.1.0:
    resolution: {integrity: sha512-loKTxY1zCOuG4j9f6EPnuyyYkf58RnhhWTvRoZEokgB+WbdXehfjFviyOVYkqzEWz1Q5kRiZdBYS5SwxbQYwzw==}

@@ -1195,6 +1274,10 @@ packages:
  defu@6.1.4:
    resolution: {integrity: sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==}

+  denque@2.1.0:
+    resolution: {integrity: sha512-HVQE3AAb/pxF8fQAoiqpvg9i3evqug3hoiwakOyZAwJm+6vZehbkYXZ0l4JxS+I3QxM97v5aaRNhj8v5oBhekw==}
+    engines: {node: '>=0.10'}
+
  dequal@2.0.3:
    resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
    engines: {node: '>=6'}
@@ -1457,6 +1540,10 @@ packages:
    resolution: {integrity: sha512-fn4bQ0Xq8FTej09YC/jqKZwtijpvARlRp6wxL5WTA6yPe2YWSJ5RJh7Nm79rK2qB0wr6iDQzH60XGq5V/7u8YQ==}
    deprecated: The Intersection Observer polyfill is no longer needed and can safely be removed. Intersection Observer has been Baseline since 2019.

+  ioredis@5.10.1:
+    resolution: {integrity: sha512-HuEDBTI70aYdx1v6U97SbNx9F1+svQKBDo30o0b9fw055LMepzpOOd0Ccg9Q6tbqmBSJaMuY0fB7yw9/vjBYCA==}
+    engines: {node: '>=12.22.0'}
+
  iron-webcrypto@1.2.1:
    resolution: {integrity: sha512-feOM6FaSr6rEABp/eDfVseKyTMDt+KGpeB35SkVn9Tyn0CqvVsY3EwI0v5i8nMHyJnzCIQf7nsy3p41TPkJZhg==}

@@ -1550,6 +1637,12 @@ packages:
  lit@3.3.2:
    resolution: {integrity: sha512-NF9zbsP79l4ao2SNrH3NkfmFgN/hBYSQo90saIVI1o5GpjAdCPVstVzO1MrLOakHoEhYkrtRjPK6Ob521aoYWQ==}

+  lodash.defaults@4.2.0:
+    resolution: {integrity: sha512-qjxPLHd3r5DnsdGacqOMU6pb/avJzdh9tFX2ymgoZE27BmjXrNy/y4LoaiTeAb+O3gL8AfpJGtqfX/ae2leYYQ==}
+
+  lodash.isarguments@3.1.0:
+    resolution: {integrity: sha512-chi4NHZlZqZD18a0imDHnZPrDeBbTtVN7GXMwuGdRH9qotxAjYs3aVLKc7zNOG9eddR5Ksd8rvFEBc9SsggPpg==}
+
  longest-streak@3.1.0:
    resolution: {integrity: sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==}

@@ -2061,6 +2154,14 @@ packages:
  recma-stringify@1.0.0:
    resolution: {integrity: sha512-cjwII1MdIIVloKvC9ErQ+OgAtwHBmcZ0Bg4ciz78FtbT8In39aAYbaA7zvxQ61xVMSPE8WxhLwLbhif4Js2C+g==}

+  redis-errors@1.2.0:
+    resolution: {integrity: sha512-1qny3OExCf0UvUV/5wpYKf2YwPcOqXzkwKKSmKHiE6ZMQs5heeE/c8eXK+PNllPvmjgAbfnsbpkGZWy8cBpn9w==}
+    engines: {node: '>=4'}
+
+  redis-parser@3.0.0:
+    resolution: {integrity: sha512-DJnGAeenTdpMEH6uAJRK/uiyEIH9WVsUmoLwzudwGJUwZPp80PDBWPHXSAGNPwNvIXAbe7MSUB1zQFugFml66A==}
+    engines: {node: '>=4'}
+
  regex-recursion@6.0.2:
    resolution: {integrity: sha512-0YCaSCq2VRIebiaUviZNs0cBz1kg5kVS2UKUfNIx8YVs1cN3AV7NTctO5FOKBA+UT2BPJIWZauYHPqJODG50cg==}

@@ -2202,6 +2303,9 @@ packages:
  space-separated-tokens@2.0.2:
    resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}

+  standard-as-callback@2.1.0:
+    resolution: {integrity: sha512-qoRRSyROncaz1z0mvYqIE4lCd9p2R90i6GxW3uZv5ucSu8tU7B5HXUP1gG8pVZsYNVaXjk8ClXHPttLyxAL48A==}
+
  stream-replace-string@2.0.0:
    resolution: {integrity: sha512-TlnjJ1C0QrmxRNrON00JvaFFlNh5TTG00APw23j74ET7gkQpTASi6/L2fuiav8pzK715HXtUeClpBTw2NPSn6w==}

@@ -2559,12 +2663,12 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

-  '@astrojs/mdx@5.0.3(astro@6.1.2(@types/node@24.12.0)(@vercel/functions@3.4.3)(jiti@1.21.7)(rollup@4.60.1)(typescript@5.7.3)(yaml@2.8.3))':
+  '@astrojs/mdx@5.0.3(astro@6.1.2(@types/node@24.12.0)(@upstash/redis@1.37.0)(@vercel/functions@3.4.3)(@vercel/kv@3.0.0)(ioredis@5.10.1)(jiti@1.21.7)(rollup@4.60.1)(typescript@5.7.3)(yaml@2.8.3))':
    dependencies:
      '@astrojs/markdown-remark': 7.1.0
      '@mdx-js/mdx': 3.1.1
      acorn: 8.16.0
-      astro: 6.1.2(@types/node@24.12.0)(@vercel/functions@3.4.3)(jiti@1.21.7)(rollup@4.60.1)(typescript@5.7.3)(yaml@2.8.3)
+      astro: 6.1.2(@types/node@24.12.0)(@upstash/redis@1.37.0)(@vercel/functions@3.4.3)(@vercel/kv@3.0.0)(ioredis@5.10.1)(jiti@1.21.7)(rollup@4.60.1)(typescript@5.7.3)(yaml@2.8.3)
      es-module-lexer: 2.0.0
      estree-util-visit: 2.0.0
      hast-util-to-html: 9.0.5
@@ -2619,9 +2723,9 @@ snapshots:
      stream-replace-string: 2.0.0
      zod: 4.3.6

-  '@astrojs/tailwind@6.0.2(astro@6.1.2(@types/node@24.12.0)(@vercel/functions@3.4.3)(jiti@1.21.7)(rollup@4.60.1)(typescript@5.7.3)(yaml@2.8.3))(tailwindcss@3.4.19(yaml@2.8.3))':
+  '@astrojs/tailwind@6.0.2(astro@6.1.2(@types/node@24.12.0)(@upstash/redis@1.37.0)(@vercel/functions@3.4.3)(@vercel/kv@3.0.0)(ioredis@5.10.1)(jiti@1.21.7)(rollup@4.60.1)(typescript@5.7.3)(yaml@2.8.3))(tailwindcss@3.4.19(yaml@2.8.3))':
    dependencies:
-      astro: 6.1.2(@types/node@24.12.0)(@vercel/functions@3.4.3)(jiti@1.21.7)(rollup@4.60.1)(typescript@5.7.3)(yaml@2.8.3)
+      astro: 6.1.2(@types/node@24.12.0)(@upstash/redis@1.37.0)(@vercel/functions@3.4.3)(@vercel/kv@3.0.0)(ioredis@5.10.1)(jiti@1.21.7)(rollup@4.60.1)(typescript@5.7.3)(yaml@2.8.3)
      autoprefixer: 10.4.27(postcss@8.5.8)
      postcss: 8.5.8
      postcss-load-config: 4.0.2(postcss@8.5.8)
@@ -2641,14 +2745,14 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

-  '@astrojs/vercel@10.0.3(astro@6.1.2(@types/node@24.12.0)(@vercel/functions@3.4.3)(jiti@1.21.7)(rollup@4.60.1)(typescript@5.7.3)(yaml@2.8.3))(react@18.3.1)(rollup@4.60.1)':
+  '@astrojs/vercel@10.0.3(astro@6.1.2(@types/node@24.12.0)(@upstash/redis@1.37.0)(@vercel/functions@3.4.3)(@vercel/kv@3.0.0)(ioredis@5.10.1)(jiti@1.21.7)(rollup@4.60.1)(typescript@5.7.3)(yaml@2.8.3))(react@18.3.1)(rollup@4.60.1)':
    dependencies:
      '@astrojs/internal-helpers': 0.8.0
      '@vercel/analytics': 1.6.1(react@18.3.1)
      '@vercel/functions': 3.4.3
      '@vercel/nft': 1.5.0(rollup@4.60.1)
      '@vercel/routing-utils': 5.3.3
-      astro: 6.1.2(@types/node@24.12.0)(@vercel/functions@3.4.3)(jiti@1.21.7)(rollup@4.60.1)(typescript@5.7.3)(yaml@2.8.3)
+      astro: 6.1.2(@types/node@24.12.0)(@upstash/redis@1.37.0)(@vercel/functions@3.4.3)(@vercel/kv@3.0.0)(ioredis@5.10.1)(jiti@1.21.7)(rollup@4.60.1)(typescript@5.7.3)(yaml@2.8.3)
      esbuild: 0.27.4
      tinyglobby: 0.2.15
    transitivePeerDependencies:
@@ -2975,6 +3079,8 @@ snapshots:
  '@img/sharp-win32-x64@0.34.5':
    optional: true

+  '@ioredis/commands@1.5.1': {}
+
  '@isaacs/fs-minipass@4.0.1':
    dependencies:
      minipass: 7.1.3
@@ -3327,14 +3433,28 @@ snapshots:

  '@ungap/structured-clone@1.3.0': {}

+  '@upstash/redis@1.37.0':
+    dependencies:
+      uncrypto: 0.1.3
+    optional: true
+
  '@vercel/analytics@1.6.1(react@18.3.1)':
    optionalDependencies:
      react: 18.3.1

+  '@vercel/analytics@2.0.1(react@18.3.1)':
+    optionalDependencies:
+      react: 18.3.1
+
  '@vercel/functions@3.4.3':
    dependencies:
      '@vercel/oidc': 3.2.0

+  '@vercel/kv@3.0.0':
+    dependencies:
+      '@upstash/redis': 1.37.0
+    optional: true
+
  '@vercel/nft@1.5.0(rollup@4.60.1)':
    dependencies:
      '@mapbox/node-pre-gyp': 2.0.3
@@ -3363,6 +3483,10 @@ snapshots:
    optionalDependencies:
      ajv: 6.14.0

+  '@vercel/speed-insights@2.0.0(react@18.3.1)':
+    optionalDependencies:
+      react: 18.3.1
+
  '@vitejs/plugin-react@5.2.0(vite@7.3.1(@types/node@24.12.0)(jiti@1.21.7)(yaml@2.8.3))':
    dependencies:
      '@babel/core': 7.29.0
@@ -3420,7 +3544,7 @@ snapshots:

  astring@1.9.0: {}

-  astro@6.1.2(@types/node@24.12.0)(@vercel/functions@3.4.3)(jiti@1.21.7)(rollup@4.60.1)(typescript@5.7.3)(yaml@2.8.3):
+  astro@6.1.2(@types/node@24.12.0)(@upstash/redis@1.37.0)(@vercel/functions@3.4.3)(@vercel/kv@3.0.0)(ioredis@5.10.1)(jiti@1.21.7)(rollup@4.60.1)(typescript@5.7.3)(yaml@2.8.3):
    dependencies:
      '@astrojs/compiler': 3.0.1
      '@astrojs/internal-helpers': 0.8.0
@@ -3470,7 +3594,7 @@ snapshots:
      ultrahtml: 1.6.0
      unifont: 0.7.4
      unist-util-visit: 5.1.0
-      unstorage: 1.17.5(@vercel/functions@3.4.3)
+      unstorage: 1.17.5(@upstash/redis@1.37.0)(@vercel/functions@3.4.3)(@vercel/kv@3.0.0)(ioredis@5.10.1)
      vfile: 6.0.3
      vite: 7.3.1(@types/node@24.12.0)(jiti@1.21.7)(yaml@2.8.3)
      vitefu: 1.1.2(vite@7.3.1(@types/node@24.12.0)(jiti@1.21.7)(yaml@2.8.3))
@@ -3593,6 +3717,8 @@ snapshots:

  clsx@2.1.1: {}

+  cluster-key-slot@1.1.2: {}
+
  collapse-white-space@2.1.0: {}

  comma-separated-tokens@2.0.3: {}
@@ -3655,6 +3781,8 @@ snapshots:

  defu@6.1.4: {}

+  denque@2.1.0: {}
+
  dequal@2.0.3: {}

  destr@2.0.5: {}
@@ -4037,6 +4165,20 @@ snapshots:

  intersection-observer@0.10.0: {}

+  ioredis@5.10.1:
+    dependencies:
+      '@ioredis/commands': 1.5.1
+      cluster-key-slot: 1.1.2
+      debug: 4.4.3
+      denque: 2.1.0
+      lodash.defaults: 4.2.0
+      lodash.isarguments: 3.1.0
+      redis-errors: 1.2.0
+      redis-parser: 3.0.0
+      standard-as-callback: 2.1.0
+    transitivePeerDependencies:
+      - supports-color
+
  iron-webcrypto@1.2.1: {}

  is-alphabetical@2.0.1: {}
@@ -4113,6 +4255,10 @@ snapshots:
      lit-element: 4.2.2
      lit-html: 3.3.2

+  lodash.defaults@4.2.0: {}
+
+  lodash.isarguments@3.1.0: {}
+
  longest-streak@3.1.0: {}

  loose-envify@1.4.0:
@@ -4868,6 +5014,12 @@ snapshots:
      unified: 11.0.5
      vfile: 6.0.3

+  redis-errors@1.2.0: {}
+
+  redis-parser@3.0.0:
+    dependencies:
+      redis-errors: 1.2.0
+
  regex-recursion@6.0.2:
    dependencies:
      regex-utilities: 2.3.0
@@ -5132,6 +5284,8 @@ snapshots:

  space-separated-tokens@2.0.2: {}

+  standard-as-callback@2.1.0: {}
+
  stream-replace-string@2.0.0: {}

  stringify-entities@4.0.4:
@@ -5325,7 +5479,7 @@ snapshots:
      unist-util-is: 6.0.1
      unist-util-visit-parents: 6.0.2

-  unstorage@1.17.5(@vercel/functions@3.4.3):
+  unstorage@1.17.5(@upstash/redis@1.37.0)(@vercel/functions@3.4.3)(@vercel/kv@3.0.0)(ioredis@5.10.1):
    dependencies:
      anymatch: 3.1.3
      chokidar: 5.0.0
@@ -5336,7 +5490,10 @@ snapshots:
      ofetch: 1.5.1
      ufo: 1.6.3
    optionalDependencies:
+      '@upstash/redis': 1.37.0
      '@vercel/functions': 3.4.3
+      '@vercel/kv': 3.0.0
+      ioredis: 5.10.1

  update-browserslist-db@1.2.3(browserslist@4.28.1):
    dependencies:
--- a/public/emoji/coffee.webp
+++ b/public/emoji/coffee.webp
--- a/public/emoji/lightbulb.webp
+++ b/public/emoji/lightbulb.webp
--- a/public/emoji/memo.webp
+++ b/public/emoji/memo.webp
--- a/public/emoji/mood-cold.webp
+++ b/public/emoji/mood-cold.webp
--- a/public/emoji/mood-cool.webp
+++ b/public/emoji/mood-cool.webp
--- a/public/emoji/mood-dotted.webp
+++ b/public/emoji/mood-dotted.webp
--- a/public/emoji/mood-expressionless.webp
+++ b/public/emoji/mood-expressionless.webp
--- a/public/emoji/mood-fire.webp
+++ b/public/emoji/mood-fire.webp
--- a/public/emoji/mood-melting.webp
+++ b/public/emoji/mood-melting.webp
--- a/public/emoji/mood-nerd.webp
+++ b/public/emoji/mood-nerd.webp
--- a/public/emoji/mood-neutral.webp
+++ b/public/emoji/mood-neutral.webp
--- a/public/emoji/mood-nod.webp
+++ b/public/emoji/mood-nod.webp
--- a/public/emoji/mood-nomouth.webp
+++ b/public/emoji/mood-nomouth.webp
--- a/public/emoji/mood-salute.webp
+++ b/public/emoji/mood-salute.webp
--- a/public/emoji/mood-sparkles.webp
+++ b/public/emoji/mood-sparkles.webp
--- a/public/emoji/mood-starstruck.webp
+++ b/public/emoji/mood-starstruck.webp
--- a/public/emoji/mood-think.webp
+++ b/public/emoji/mood-think.webp
--- a/public/emoji/point-down.webp
+++ b/public/emoji/point-down.webp
--- a/public/emoji/sparkles.webp
+++ b/public/emoji/sparkles.webp
--- a/public/emoji/tinker.webp
+++ b/public/emoji/tinker.webp
--- a/public/emoji/wave.webp
+++ b/public/emoji/wave.webp
--- a/src/components/about/current-focus.tsx
+++ b/src/components/about/current-focus.tsx
@@ -1,57 +1,5 @@
-import React, { useEffect, useRef, useState } from "react";
 import { Code2, BookOpen, RocketIcon, Compass } from "lucide-react";
-
-function AnimateIn({ children, delay = 0 }: { children: React.ReactNode; delay?: number }) {
-  const ref = useRef<HTMLDivElement>(null);
-  const [visible, setVisible] = useState(false);
-  const [skip, setSkip] = useState(false);
-
-  useEffect(() => {
-    const el = ref.current;
-    if (!el) return;
-
-    const rect = el.getBoundingClientRect();
-    const inView = rect.top < window.innerHeight && rect.bottom > 0;
-    const isReload = performance.getEntriesByType?.("navigation")?.[0]?.type === "reload";
-
-    if (inView && isReload) {
-      setSkip(true);
-      setVisible(true);
-      return;
-    }
-    if (inView) {
-      requestAnimationFrame(() => setVisible(true));
-      return;
-    }
-
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        if (entry.isIntersecting) {
-          setVisible(true);
-          observer.disconnect();
-        }
-      },
-      { threshold: 0.15 }
-    );
-
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, []);
-
-  return (
-    <div
-      ref={ref}
-      className={skip ? "" : "transition-all duration-700 ease-out"}
-      style={skip ? {} : {
-        transitionDelay: `${delay}ms`,
-        opacity: visible ? 1 : 0,
-        transform: visible ? "translateY(0)" : "translateY(24px)",
-      }}
-    >
-      {children}
-    </div>
-  );
-}
+import { AnimateIn } from "@/components/animate-in";

 export default function CurrentFocus() {
  const recentProjects = [
@@ -98,7 +46,7 @@ export default function CurrentFocus() {
                <a
                  href={project.href}
                  className="block p-4 sm:p-6 rounded-lg border border-foreground/10 hover:border-yellow-bright/50
-                           transition-all duration-300 group bg-background/50 h-full"
+                           transition-colors duration-300 group bg-background/50 h-full"
                >
                  <h4 className="font-bold text-lg group-hover:text-yellow-bright transition-colors">
                    {project.title}
--- a/src/components/about/intro.tsx
+++ b/src/components/about/intro.tsx
@@ -12,13 +12,12 @@ export default function Intro() {
    const rect = el.getBoundingClientRect();
    const inView = rect.top < window.innerHeight && rect.bottom > 0;
    const isReload = performance.getEntriesByType?.("navigation")?.[0]?.type === "reload";
-
-    if (inView && isReload) {
+    const isSpaNav = !!(window as any).__astroNavigation;
+    if (inView && (isReload || isSpaNav)) {
      setVisible(true);
      return;
    }
    if (inView) {
-      // Fresh navigation — animate in
      requestAnimationFrame(() => setVisible(true));
      return;
    }
@@ -48,36 +47,37 @@ export default function Intro() {
  const anim = (delay: number) =>
    ({
      opacity: visible ? 1 : 0,
-      transform: visible ? "translateY(0)" : "translateY(20px)",
-      transition: `all 0.7s ease-out ${delay}ms`,
+      transform: visible ? "translate3d(0,0,0)" : "translate3d(0,20px,0)",
+      transition: `opacity 0.7s ease-out ${delay}ms, transform 0.7s ease-out ${delay}ms`,
+      willChange: "transform, opacity",
    }) as React.CSSProperties;

  return (
    <div ref={ref} className="w-full max-w-4xl px-4">
      <div className="space-y-8 md:space-y-12">
-        <div className="flex flex-col sm:flex-row items-center sm:items-center justify-center gap-8 sm:gap-16">
+        <div className="flex flex-col sm:flex-row items-center justify-center gap-8 sm:gap-16">
          <div
-            className="w-32 h-32 sm:w-48 sm:h-48 shrink-0"
+            className="w-44 h-44 sm:w-40 sm:h-40 lg:w-48 lg:h-48 shrink-0"
            style={anim(0)}
          >
            <img
              src="/me.jpeg"
              alt="Timothy Pidashev"
-              className="rounded-lg object-cover w-full h-full ring-2 ring-yellow-bright hover:ring-orange-bright transition-all duration-300"
+              className="rounded-lg object-cover w-full h-full ring-2 ring-yellow-bright hover:ring-orange-bright transition-colors duration-300"
            />
          </div>
          <div className="text-center sm:text-left space-y-4 sm:space-y-6" style={anim(150)}>
-            <h2 className="text-xl sm:text-5xl font-bold text-yellow-bright">
+            <h2 className="text-3xl sm:text-3xl lg:text-5xl font-bold text-yellow-bright">
              Timothy Pidashev
            </h2>
-            <div className="text-sm sm:text-xl text-foreground/70 space-y-2 sm:space-y-3">
-              <p className="flex items-center justify-center font-bold sm:justify-start gap-2" style={anim(300)}>
+            <div className="text-base sm:text-lg lg:text-xl text-foreground/70 space-y-2 sm:space-y-3">
+              <p className="flex items-center justify-center sm:justify-start font-bold gap-2" style={anim(300)}>
                <span className="text-blue">Software Systems Engineer</span>
              </p>
-              <p className="flex items-center justify-center font-bold sm:justify-start gap-2" style={anim(450)}>
+              <p className="flex items-center justify-center sm:justify-start font-bold gap-2" style={anim(450)}>
                <span className="text-green">Open Source Enthusiast</span>
              </p>
-              <p className="flex items-center justify-center font-bold sm:justify-start gap-2" style={anim(600)}>
+              <p className="flex items-center justify-center sm:justify-start font-bold gap-2" style={anim(600)}>
                <span className="text-yellow">Coffee Connoisseur</span>
              </p>
            </div>
--- a/src/components/about/outside-coding.tsx
+++ b/src/components/about/outside-coding.tsx
@@ -1,57 +1,5 @@
-import React, { useEffect, useRef, useState } from "react";
 import { Cross, Fish, Mountain, Book } from "lucide-react";
-
-function AnimateIn({ children, delay = 0 }: { children: React.ReactNode; delay?: number }) {
-  const ref = useRef<HTMLDivElement>(null);
-  const [visible, setVisible] = useState(false);
-  const [skip, setSkip] = useState(false);
-
-  useEffect(() => {
-    const el = ref.current;
-    if (!el) return;
-
-    const rect = el.getBoundingClientRect();
-    const inView = rect.top < window.innerHeight && rect.bottom > 0;
-    const isReload = performance.getEntriesByType?.("navigation")?.[0]?.type === "reload";
-
-    if (inView && isReload) {
-      setSkip(true);
-      setVisible(true);
-      return;
-    }
-    if (inView) {
-      requestAnimationFrame(() => setVisible(true));
-      return;
-    }
-
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        if (entry.isIntersecting) {
-          setVisible(true);
-          observer.disconnect();
-        }
-      },
-      { threshold: 0.15 }
-    );
-
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, []);
-
-  return (
-    <div
-      ref={ref}
-      className={skip ? "" : "transition-all duration-700 ease-out"}
-      style={skip ? {} : {
-        transitionDelay: `${delay}ms`,
-        opacity: visible ? 1 : 0,
-        transform: visible ? "translateY(0) scale(1)" : "translateY(20px) scale(0.97)",
-      }}
-    >
-      {children}
-    </div>
-  );
-}
+import { AnimateIn } from "@/components/animate-in";

 const interests = [
  {
@@ -86,12 +34,12 @@ export default function OutsideCoding() {
          </h2>
        </AnimateIn>

-        <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6">
          {interests.map((interest, i) => (
            <AnimateIn key={interest.title} delay={100 + i * 100}>
              <div
                className="flex flex-col items-center text-center p-4 rounded-lg border border-foreground/10
-                           hover:border-yellow-bright/50 transition-all duration-300 bg-background/50 h-full"
+                           hover:border-yellow-bright/50 transition-colors duration-300 bg-background/50 h-full"
              >
                <div className="mb-3">{interest.icon}</div>
                <h3 className="font-bold text-foreground/90 mb-2">{interest.title}</h3>
--- a/src/components/about/stats-activity.tsx
+++ b/src/components/about/stats-activity.tsx
@@ -1,3 +1,4 @@
+import { useState } from "react";

 interface ActivityDay {
  grand_total: { total_seconds: number };
@@ -9,6 +10,7 @@ interface ActivityGridProps {
 }

 export const ActivityGrid = ({ data }: ActivityGridProps) => {
+  const [tapped, setTapped] = useState<string | null>(null);
  const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
  const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];

@@ -46,7 +48,7 @@ export const ActivityGrid = ({ data }: ActivityGridProps) => {
  }

  return (
-    <div className="bg-background border border-foreground/10 rounded-lg p-6 hover:border-foreground/20 transition-colors">
+    <div className="bg-background/50 border border-foreground/10 rounded-lg p-6 hover:border-foreground/20 transition-colors">
      <div className="text-lg text-aqua-bright mb-6">Activity</div>

      <div className="flex gap-4">
@@ -69,12 +71,13 @@ export const ActivityGrid = ({ data }: ActivityGridProps) => {
                    <div
                      key={dayIndex}
                      className={`w-3 h-3 rounded-sm ${getColorClass(intensity)}
-                        hover:ring-1 hover:ring-foreground/30 transition-all cursor-pointer
+                        hover:ring-1 hover:ring-foreground/30 transition-colors cursor-pointer
                        group relative`}
+                      onClick={() => setTapped(tapped === day.date ? null : day.date)}
                    >
-                      <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 p-2
-                        bg-background border border-foreground/10 rounded-md opacity-0
-                        group-hover:opacity-100 transition-opacity z-10 whitespace-nowrap text-xs">
+                      <div className={`absolute bottom-full left-1/2 -translate-x-1/2 mb-2 p-2
+                        bg-background border border-foreground/10 rounded-md transition-opacity z-10 whitespace-nowrap text-xs
+                        ${tapped === day.date ? "opacity-100" : "opacity-0 group-hover:opacity-100"}`}>
                        {hours.toFixed(1)} hours on {day.date}
                      </div>
                    </div>
--- a/src/components/about/stats-alltime.tsx
+++ b/src/components/about/stats-alltime.tsx
@@ -28,8 +28,8 @@ const Stats = () => {
    const rect = el.getBoundingClientRect();
    const inView = rect.top < window.innerHeight && rect.bottom > 0;
    const isReload = performance.getEntriesByType?.("navigation")?.[0]?.type === "reload";
-
-    if (inView && isReload) {
+    const isSpaNav = !!(window as any).__astroNavigation;
+    if (inView && (isReload || isSpaNav)) {
      setSkipAnim(true);
      setIsVisible(true);
      return;
@@ -60,21 +60,23 @@ const Stats = () => {

    const totalSeconds = stats.total_seconds;
    const duration = 2000;
-    const steps = 60;
-    let currentStep = 0;
+    let start: number | null = null;
+    let rafId: number;

-    const timer = setInterval(() => {
-      currentStep += 1;
-      if (currentStep >= steps) {
-        setCount(totalSeconds);
-        clearInterval(timer);
-        return;
+    const step = (timestamp: number) => {
+      if (!start) start = timestamp;
+      const elapsed = timestamp - start;
+      const progress = Math.min(elapsed / duration, 1);
+      const eased = 1 - Math.pow(1 - progress, 4);
+      setCount(Math.floor(totalSeconds * eased));
+
+      if (progress < 1) {
+        rafId = requestAnimationFrame(step);
      }
-      const progress = 1 - Math.pow(1 - currentStep / steps, 4);
-      setCount(Math.floor(totalSeconds * progress));
-    }, duration / steps);
+    };

-    return () => clearInterval(timer);
+    rafId = requestAnimationFrame(step);
+    return () => cancelAnimationFrame(rafId);
  }, [isVisible, stats]);

  if (error) return null;
@@ -88,25 +90,25 @@ const Stats = () => {

  return (
    <div ref={sectionRef} className="flex flex-col items-center justify-center min-h-[50vh] gap-6">
-      <div className={skipAnim ? "text-2xl opacity-80" : `text-2xl opacity-0 ${isVisible ? "animate-fade-in-first" : ""}`}>
+      <div className={skipAnim ? "text-lg md:text-2xl opacity-80" : `text-lg md:text-2xl opacity-0 ${isVisible ? "animate-fade-in-first" : ""}`}>
        I've spent
      </div>

      <div className="relative">
-        <div className="text-8xl text-center relative z-10">
+        <div className="text-5xl md:text-8xl text-center relative z-10">
          <span className="font-bold relative">
            <span className={skipAnim ? "bg-gradient-text" : `bg-gradient-text opacity-0 ${isVisible ? "animate-fade-in-second" : ""}`}>
              {formattedHours}
            </span>
          </span>
-          <span className={skipAnim ? "text-4xl opacity-60 ml-4" : `text-4xl opacity-0 ${isVisible ? "animate-slide-in-hours" : ""}`}>
+          <span className={skipAnim ? "text-2xl md:text-4xl opacity-60 ml-4" : `text-2xl md:text-4xl opacity-0 ${isVisible ? "animate-slide-in-hours" : ""}`}>
            hours
          </span>
        </div>
      </div>

      <div className="flex flex-col items-center gap-3 text-center">
-        <div className={skipAnim ? "text-xl opacity-80" : `text-xl opacity-0 ${isVisible ? "animate-fade-in-third" : ""}`}>
+        <div className={skipAnim ? "text-base md:text-xl opacity-80" : `text-base md:text-xl opacity-0 ${isVisible ? "animate-fade-in-third" : ""}`}>
          writing code & building apps
        </div>
        <div className={skipAnim ? "flex items-center gap-3 text-lg opacity-60" : `flex items-center gap-3 text-lg opacity-0 ${isVisible ? "animate-fade-in-fourth" : ""}`}>
--- a/src/components/about/stats-detailed.tsx
+++ b/src/components/about/stats-detailed.tsx
@@ -35,8 +35,8 @@ const DetailedStats = () => {
    const rect = el.getBoundingClientRect();
    const inView = rect.top < window.innerHeight && rect.bottom > 0;
    const isReload = performance.getEntriesByType?.("navigation")?.[0]?.type === "reload";
-
-    if (inView && isReload) {
+    const isSpaNav = !!(window as any).__astroNavigation;
+    if (inView && (isReload || isSpaNav)) {
      setSkipAnim(true);
      setVisible(true);
      return;
@@ -131,7 +131,7 @@ const DetailedStats = () => {
        <>
          {/* Header */}
          <h2
-            className={`text-2xl md:text-4xl font-bold text-center text-yellow-bright ${skipAnim ? "" : "transition-all duration-700 ease-out"}`}
+            className={`text-2xl md:text-4xl font-bold text-center text-yellow-bright ${skipAnim ? "" : "transition-[opacity,transform] duration-700 ease-out"}`}
            style={skipAnim ? {} : {
              opacity: visible ? 1 : 0,
              transform: visible ? "translateY(0)" : "translateY(20px)",
@@ -147,7 +147,7 @@ const DetailedStats = () => {
              return (
                <div
                  key={card.title}
-                  className={`bg-background border border-foreground/10 rounded-lg p-6 ${card.borderHover} ${skipAnim ? "" : "transition-all duration-500 ease-out"}`}
+                  className={`bg-background/50 border border-foreground/10 rounded-lg p-6 ${card.borderHover} ${skipAnim ? "" : "transition-[opacity,transform] duration-500 ease-out"}`}
                  style={skipAnim ? {} : {
                    transitionDelay: `${150 + i * 100}ms`,
                    opacity: visible ? 1 : 0,
@@ -174,7 +174,7 @@ const DetailedStats = () => {

          {/* Languages */}
          <div
-            className={`bg-background border border-foreground/10 rounded-lg p-6 hover:border-purple-bright/50 ${skipAnim ? "" : "transition-all duration-700 ease-out"}`}
+            className={`bg-background/50 border border-foreground/10 rounded-lg p-6 hover:border-purple-bright/50 ${skipAnim ? "" : "transition-[opacity,transform] duration-700 ease-out"}`}
            style={skipAnim ? {} : {
              transitionDelay: "550ms",
              opacity: visible ? 1 : 0,
@@ -194,9 +194,11 @@ const DetailedStats = () => {
                      <div
                        className={`h-full ${lang.color} rounded-full`}
                        style={{
-                          width: visible ? `${lang.percent}%` : "0%",
+                          width: `${lang.percent}%`,
                          opacity: 0.85,
-                          transition: skipAnim ? "none" : `width 1s ease-out ${700 + i * 80}ms`,
+                          transform: visible ? "scaleX(1)" : "scaleX(0)",
+                          transformOrigin: "left",
+                          transition: skipAnim ? "none" : `transform 1s ease-out ${700 + i * 80}ms`,
                        }}
                      />
                    </div>
@@ -212,7 +214,7 @@ const DetailedStats = () => {
          {/* Activity Grid */}
          {activity && (
            <div
-              className={skipAnim ? "" : "transition-all duration-700 ease-out"}
+              className={skipAnim ? "" : "transition-[opacity,transform] duration-700 ease-out"}
              style={skipAnim ? {} : {
                transitionDelay: "750ms",
                opacity: visible ? 1 : 0,
--- a/src/components/about/timeline.tsx
+++ b/src/components/about/timeline.tsx
@@ -51,8 +51,9 @@ function TimelineCard({ item, index }: { item: (typeof timelineItems)[number]; i
    const rect = el.getBoundingClientRect();
    const inView = rect.top < window.innerHeight && rect.bottom > 0;
    const isReload = performance.getEntriesByType?.("navigation")?.[0]?.type === "reload";
+    const isSpaNav = !!(window as any).__astroNavigation;

-    if (inView && isReload) {
+    if (inView && (isReload || isSpaNav)) {
      setSkip(true);
      setVisible(true);
      return;
@@ -87,7 +88,7 @@ function TimelineCard({ item, index }: { item: (typeof timelineItems)[number]; i
            absolute -left-8 sm:left-1/2 w-6 h-6 sm:w-8 sm:h-8 bg-background
            rounded-full border-2 border-yellow-bright sm:-translate-x-1/2
            flex items-center justify-center z-10
-            ${skip ? "" : "transition-all duration-500"}
+            ${skip ? "" : "transition-[opacity,transform] duration-500"}
            ${visible ? "scale-100 opacity-100" : "scale-0 opacity-0"}
          `}
        >
@@ -99,7 +100,7 @@ function TimelineCard({ item, index }: { item: (typeof timelineItems)[number]; i
          className={`
            w-full sm:w-[calc(50%-32px)]
            ${isLeft ? "sm:pr-8 md:pr-12" : "sm:pl-8 md:pl-12"}
-            ${skip ? "" : "transition-all duration-700 ease-out"}
+            ${skip ? "" : "transition-[opacity,transform] duration-700 ease-out"}
            ${visible
              ? "opacity-100 translate-x-0"
              : `opacity-0 ${isLeft ? "sm:translate-x-8" : "sm:-translate-x-8"} translate-y-4 sm:translate-y-0`
@@ -168,8 +169,8 @@ export default function Timeline() {
        <div className="absolute left-4 sm:left-1/2 h-full w-0.5 -translate-x-1/2">
          <div
            ref={lineRef}
-            className="w-full bg-foreground/10 transition-all duration-[1500ms] ease-out origin-top"
-            style={{ height: `${lineHeight}%` }}
+            className="w-full h-full bg-foreground/10 transition-transform duration-[1500ms] ease-out origin-top"
+            style={{ transform: `scaleY(${lineHeight / 100})` }}
          />
        </div>

--- a/src/components/analytics.tsx
+++ b/src/components/analytics.tsx
@@ -0,0 +1,11 @@
+import { Analytics } from "@vercel/analytics/react";
+import { SpeedInsights } from "@vercel/speed-insights/react";
+
+export default function VercelAnalytics() {
+  return (
+    <>
+      <Analytics />
+      <SpeedInsights />
+    </>
+  );
+}
--- a/src/components/animate-in.tsx
+++ b/src/components/animate-in.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from "react";
+import { prefersReducedMotion } from "@/lib/reduced-motion";

 interface AnimateInProps {
  children: React.ReactNode;
@@ -9,13 +10,29 @@ interface AnimateInProps {
 export function AnimateIn({ children, delay = 0, threshold = 0.15 }: AnimateInProps) {
  const ref = useRef<HTMLDivElement>(null);
  const [visible, setVisible] = useState(false);
+  const [skip, setSkip] = useState(false);

  useEffect(() => {
    const el = ref.current;
    if (!el) return;

+    if (prefersReducedMotion()) {
+      setSkip(true);
+      setVisible(true);
+      return;
+    }
+
    const rect = el.getBoundingClientRect();
-    if (rect.top < window.innerHeight && rect.bottom > 0) {
+    const inView = rect.top < window.innerHeight && rect.bottom > 0;
+    const isReload = (performance.getEntriesByType?.("navigation")?.[0] as PerformanceNavigationTiming)?.type === "reload";
+    const isSpaNav = !!(window as any).__astroNavigation;
+
+    if (inView && (isReload || isSpaNav)) {
+      setSkip(true);
+      setVisible(true);
+      return;
+    }
+    if (inView) {
      requestAnimationFrame(() => setVisible(true));
      return;
    }
@@ -37,11 +54,12 @@ export function AnimateIn({ children, delay = 0, threshold = 0.15 }: AnimateInPr
  return (
    <div
      ref={ref}
-      className="transition-all duration-700 ease-out"
-      style={{
+      className={skip ? "" : "transition-[opacity,transform] duration-700 ease-out"}
+      style={skip ? {} : {
        transitionDelay: `${delay}ms`,
+        willChange: "transform, opacity",
        opacity: visible ? 1 : 0,
-        transform: visible ? "translateY(0)" : "translateY(24px)",
+        transform: visible ? "translate3d(0,0,0)" : "translate3d(0,24px,0)",
      }}
    >
      {children}
--- a/src/components/animation-switcher/index.tsx
+++ b/src/components/animation-switcher/index.tsx
@@ -41,7 +41,7 @@ export default function AnimationSwitcher() {

  return (
    <div
-      className="fixed bottom-4 left-4 z-[101] pointer-events-auto hidden md:block"
+      className="fixed bottom-4 left-4 z-[101] pointer-events-auto hidden desk:block"
      onMouseEnter={() => setHovering(true)}
      onMouseLeave={() => setHovering(false)}
      onClick={handleClick}
--- a/src/components/background/index.tsx
+++ b/src/components/background/index.tsx
@@ -77,11 +77,13 @@ function readBgFromCSS(): string {
 interface BackgroundProps {
  layout?: "index" | "sidebar" | "content";
  position?: "left" | "right";
+  mobileOnly?: boolean;
 }

 const Background: React.FC<BackgroundProps> = ({
  layout = "index",
  position = "left",
+  mobileOnly = false,
 }) => {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const engineRef = useRef<AnimationEngine | null>(null);
@@ -330,10 +332,12 @@ const Background: React.FC<BackgroundProps> = ({

  const getContainerClasses = () => {
    if (isIndex) {
-      return "fixed inset-0 -z-10";
+      return mobileOnly
+        ? "fixed inset-0 -z-10 desk:hidden"
+        : "fixed inset-0 -z-10";
    }

-    const baseClasses = "fixed top-0 bottom-0 hidden lg:block -z-10";
+    const baseClasses = "fixed top-0 bottom-0 hidden desk:block -z-10";
    return position === "left"
      ? `${baseClasses} left-0`
      : `${baseClasses} right-0`;
--- a/src/components/blog/comments.tsx
+++ b/src/components/blog/comments.tsx
@@ -1,25 +1,50 @@
 import * as React from "react";
 import Giscus from "@giscus/react";
+import { getStoredThemeId } from "@/lib/themes/engine";

 const id = "inject-comments";

+function getThemeUrl(themeId: string): string {
+  // Giscus iframe needs a publicly accessible URL — always use production domain
+  return `https://timmypidashev.dev/api/giscus-theme?theme=${themeId}`;
+}
+
 export const Comments = () => {
  const [mounted, setMounted] = React.useState(false);
+  const [themeUrl, setThemeUrl] = React.useState("");

  React.useEffect(() => {
+    setThemeUrl(getThemeUrl(getStoredThemeId()));
    setMounted(true);
+
+    const handleThemeChange = () => {
+      const newUrl = getThemeUrl(getStoredThemeId());
+      setThemeUrl(newUrl);
+
+      // Tell the giscus iframe to update its theme
+      const iframe = document.querySelector<HTMLIFrameElement>("iframe.giscus-frame");
+      if (iframe?.contentWindow) {
+        iframe.contentWindow.postMessage(
+          { giscus: { setConfig: { theme: newUrl } } },
+          "https://giscus.app"
+        );
+      }
+    };
+
+    document.addEventListener("theme-changed", handleThemeChange);
+    return () => document.removeEventListener("theme-changed", handleThemeChange);
  }, []);

  return (
-    <div id={id}>
-      {mounted ? (
+    <div id={id} className="mt-8">
+      {mounted && themeUrl ? (
        <Giscus
          id={id}
          repo="timmypidashev/web"
          repoId="MDEwOlJlcG9zaXRvcnkzODYxMjk5Mjk="
          category="Blog & Project Comments"
          categoryId="DIC_kwDOFwPgCc4CpKtV"
-          theme="https://timmypidashev.us-sea-1.linodeobjects.com/comments.css"
+          theme={themeUrl}
          mapping="pathname"
          strict="0"
          reactionsEnabled="1"
--- a/src/components/blog/header.tsx
+++ b/src/components/blog/header.tsx
@@ -3,11 +3,10 @@ import { AnimateIn } from "@/components/animate-in";

 export const BlogHeader = () => {
  return (
-    <div className="w-full max-w-6xl mx-auto px-4 pt-24 sm:pt-24">
+    <div className="w-full max-w-6xl mx-auto px-4 pt-12 md:pt-24">
      <AnimateIn>
        <h1 className="text-2xl sm:text-3xl font-bold text-purple mb-3 text-center px-4 leading-relaxed">
-          Latest Thoughts <br className="sm:hidden" />
-          & Writings
+          Latest Thoughts & Writings
        </h1>
      </AnimateIn>
      <AnimateIn delay={100}>
--- a/src/components/blog/post-list.tsx
+++ b/src/components/blog/post-list.tsx
@@ -36,7 +36,7 @@ export const BlogPostList = ({ posts }: BlogPostListProps) => {
                href={`/blog/${post.id}`}
                className="block"
              >
-                <article className="flex flex-col md:flex-row md:items-center gap-4 md:gap-8 p-2 md:p-4 border-b border-foreground/20 last:border-b-0 rounded-lg group-hover:outline group-hover:outline-2 group-hover:outline-purple transition-all duration-200">
+                <article className="flex flex-col md:flex-row md:items-center gap-4 md:gap-8 p-2 md:p-4 border-b border-foreground/20 last:border-b-0 rounded-lg group-hover:outline group-hover:outline-2 group-hover:outline-purple transition-[outline-color] duration-200">
                  {/* Image container with fixed aspect ratio */}
                  <div className="w-full md:w-1/3 aspect-[16/9] overflow-hidden rounded-lg bg-background flex-shrink-0">
                    <img
@@ -77,7 +77,7 @@ export const BlogPostList = ({ posts }: BlogPostListProps) => {
                          className="text-xs md:text-base text-aqua hover:text-aqua-bright transition-colors duration-200"
                          onClick={(e) => {
                            e.preventDefault();
-                            window.location.href = `/blog/tag/${tag}`;
+                            window.location.href = `/blog/tags/${encodeURIComponent(tag)}`;
                          }}
                        >
                          #{tag}
--- a/src/components/blog/tag-list.tsx
+++ b/src/components/blog/tag-list.tsx
@@ -1,4 +1,5 @@
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
+import { AnimateIn } from "@/components/animate-in";

 interface BlogPost {
  title: string;
@@ -11,47 +12,49 @@ interface TagListProps {
  posts: BlogPost[];
 }

-const TagList: React.FC<TagListProps> = ({ posts }) => {
-  const spectrumColors = [
-    'text-red-bright',
-    'text-orange-bright',
-    'text-yellow-bright',
-    'text-green-bright',
-    'text-aqua-bright',
-    'text-blue-bright',
-    'text-purple-bright'
-  ];
+const spectrumColors = [
+  'text-red-bright',
+  'text-orange-bright',
+  'text-yellow-bright',
+  'text-green-bright',
+  'text-aqua-bright',
+  'text-blue-bright',
+  'text-purple-bright'
+];

+const sizeClasses = [
+  'text-3xl sm:text-4xl',
+  'text-2xl sm:text-3xl',
+  'text-xl sm:text-2xl',
+  'text-lg sm:text-xl',
+  'text-base sm:text-lg',
+];
+
+const TagList = ({ posts }: TagListProps) => {
  const tagData = useMemo(() => {
    if (!Array.isArray(posts)) return [];

-    const tagMap = new Map();
+    const tagMap = new Map<string, number>();
    posts.forEach(post => {
-      if (post?.data?.tags && Array.isArray(post.data.tags)) {
-        post.data.tags.forEach(tag => {
-          if (!tagMap.has(tag)) {
-            tagMap.set(tag, {
-              name: tag,
-              count: 1
-            });
-          } else {
-            const data = tagMap.get(tag);
-            data.count++;
-          }
-        });
-      }
+      post?.data?.tags?.forEach(tag => {
+        tagMap.set(tag, (tagMap.get(tag) || 0) + 1);
+      });
    });

-    const tagArray = Array.from(tagMap.values());
-    const maxCount = Math.max(...tagArray.map(t => t.count));
+    const tags = Array.from(tagMap.entries())
+      .sort((a, b) => b[1] - a[1]);
+    const maxCount = tags[0]?.[1] || 1;

-    return tagArray
-      .sort((a, b) => b.count - a.count)
-      .map((tag, index) => ({
-        ...tag,
-        color: spectrumColors[index % spectrumColors.length],
-        frequency: tag.count / maxCount
-      }));
+    return tags.map(([name, count], i) => {
+      const ratio = count / maxCount;
+      const sizeIndex = ratio > 0.8 ? 0 : ratio > 0.6 ? 1 : ratio > 0.4 ? 2 : ratio > 0.2 ? 3 : 4;
+      return {
+        name,
+        count,
+        color: spectrumColors[i % spectrumColors.length],
+        size: sizeClasses[sizeIndex],
+      };
+    });
  }, [posts]);

  if (tagData.length === 0) {
@@ -63,50 +66,25 @@ const TagList: React.FC<TagListProps> = ({ posts }) => {
  }

  return (
-    <div className="flex-1 w-full bg-background p-4">
-      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
-        {tagData.map(({ name, count, color, frequency }) => (
+    <div className="flex flex-wrap items-baseline justify-center gap-x-6 gap-y-4 sm:gap-x-8 sm:gap-y-5 px-4 py-8 max-w-4xl mx-auto">
+      {tagData.map(({ name, count, color, size }, i) => (
+        <AnimateIn key={name} delay={i * 50}>
          <a
-            key={name}
            href={`/blog/tags/${encodeURIComponent(name)}`}
            className={`
-              group relative
-              flex flex-col items-center justify-center
-              min-h-[5rem]
-              px-6 py-4 rounded-lg
-              text-xl
-              transition-all duration-300 ease-in-out
-              hover:scale-105
-              hover:bg-foreground/5
-              ${color}
+              ${color} ${size}
+              font-medium
+              hover:opacity-70 transition-opacity duration-200
+              cursor-pointer whitespace-nowrap
            `}
          >
-            {/* Main tag display */}
-            <div className="font-medium text-center">
-              #{name}
-            </div>
-            
-            {/* Post count */}
-            <div className="mt-2 text-base opacity-60">
-              {count} post{count !== 1 ? 's' : ''}
-            </div>
-
-            {/* Background gradient */}
-            <div 
-              className="absolute inset-0 -z-10 rounded-lg opacity-10"
-              style={{
-                background: `
-                  linear-gradient(
-                    45deg,
-                    currentColor ${frequency * 100}%,
-                    transparent
-                  )
-                `
-              }}
-            />
+            #{name}
+            <span className="text-foreground/30 text-xs ml-1 align-super">
+              {count}
+            </span>
          </a>
-        ))}
-      </div>
+        </AnimateIn>
+      ))}
    </div>
  );
 };
--- a/src/components/blog/tagged-posts.tsx
+++ b/src/components/blog/tagged-posts.tsx
@@ -0,0 +1,123 @@
+import { AnimateIn } from "@/components/animate-in";
+import { RssIcon, TagIcon, TrendingUpIcon } from "lucide-react";
+
+type BlogPost = {
+  id: string;
+  data: {
+    title: string;
+    author: string;
+    date: string;
+    tags: string[];
+    description: string;
+    image?: string;
+    imagePosition?: string;
+  };
+};
+
+interface TaggedPostsProps {
+  tag: string;
+  posts: BlogPost[];
+}
+
+const formatDate = (dateString: string) => {
+  return new Date(dateString).toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "long",
+    day: "numeric"
+  });
+};
+
+const TaggedPosts = ({ tag, posts }: TaggedPostsProps) => {
+  return (
+    <div className="w-full max-w-6xl mx-auto">
+      <div className="w-full px-4 pt-12 md:pt-24">
+        <AnimateIn>
+          <h1 className="text-2xl sm:text-3xl font-bold text-purple mb-3 text-center px-4 leading-relaxed">
+            #{tag}
+          </h1>
+        </AnimateIn>
+        <AnimateIn delay={100}>
+          <div className="flex flex-wrap justify-center gap-4 mb-12 text-sm sm:text-base">
+            <a
+              href="/rss"
+              className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-background border border-foreground/20 text-orange hover:text-orange-bright hover:border-orange/50 transition-colors duration-200"
+            >
+              <RssIcon className="w-4 h-4" />
+              <span>RSS Feed</span>
+            </a>
+            <a
+              href="/blog/tags"
+              className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-background border border-foreground/20 text-aqua hover:text-aqua-bright hover:border-aqua/50 transition-colors duration-200"
+            >
+              <TagIcon className="w-4 h-4" />
+              <span>Browse Tags</span>
+            </a>
+            <a
+              href="/blog/popular"
+              className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-background border border-foreground/20 text-blue hover:text-blue-bright hover:border-blue/50 transition-colors duration-200"
+            >
+              <TrendingUpIcon className="w-4 h-4" />
+              <span>Most Popular</span>
+            </a>
+          </div>
+        </AnimateIn>
+      </div>
+
+      <ul className="space-y-6 md:space-y-10">
+        {posts.map((post, i) => (
+          <AnimateIn key={post.id} delay={200 + i * 80}>
+            <li className="group px-4 md:px-0">
+              <a href={`/blog/${post.id}`} className="block">
+                <article className="flex flex-col md:flex-row md:items-center gap-4 md:gap-8 p-2 md:p-4 border-b border-foreground/20 last:border-b-0 rounded-lg group-hover:outline group-hover:outline-2 group-hover:outline-purple transition-[outline-color] duration-200">
+                  <div className="w-full md:w-1/3 aspect-[16/9] overflow-hidden rounded-lg bg-background flex-shrink-0">
+                    <img
+                      src={post.data.image || "/blog/placeholder.png"}
+                      alt={post.data.title}
+                      className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+                      style={{ objectPosition: post.data.imagePosition || "center center" }}
+                    />
+                  </div>
+                  <div className="w-full md:w-2/3 flex flex-col gap-2 md:gap-3">
+                    <div className="space-y-1.5 md:space-y-3">
+                      <h2 className="text-lg md:text-2xl font-semibold text-yellow group-hover:text-purple transition-colors duration-200 line-clamp-2">
+                        {post.data.title}
+                      </h2>
+                      <div className="flex flex-wrap items-center gap-2 md:gap-3 text-sm md:text-base text-foreground/80">
+                        <span className="text-orange">{post.data.author}</span>
+                        <span className="text-foreground/50">&bull;</span>
+                        <time dateTime={post.data.date} className="text-blue">
+                          {formatDate(post.data.date)}
+                        </time>
+                      </div>
+                    </div>
+                    <p className="text-foreground/90 text-sm md:text-lg leading-relaxed line-clamp-2 mt-0.5 md:mt-0">
+                      {post.data.description}
+                    </p>
+                    <div className="flex flex-wrap gap-1.5 md:gap-3 mt-1 md:mt-2">
+                      {post.data.tags.map((t) => (
+                        <span
+                          key={t}
+                          className={`text-xs md:text-base transition-colors duration-200 ${
+                            t === tag ? "text-aqua-bright" : "text-aqua hover:text-aqua-bright"
+                          }`}
+                          onClick={(e) => {
+                            e.preventDefault();
+                            window.location.href = `/blog/tags/${encodeURIComponent(t)}`;
+                          }}
+                        >
+                          #{t}
+                        </span>
+                      ))}
+                    </div>
+                  </div>
+                </article>
+              </a>
+            </li>
+          </AnimateIn>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default TaggedPosts;
--- a/src/components/footer/index.tsx
+++ b/src/components/footer/index.tsx
@@ -12,7 +12,7 @@ export default function Footer({ fixed = false }) {

  return (
    <footer className={`w-full font-bold pointer-events-none ${fixed ? "fixed bottom-0 left-0 right-0" : ""}`}>
-      <div className="flex flex-row px-2 py-1 text-lg lg:px-6 lg:py-1.5 lg:text-3xl md:text-2xl justify-between md:justify-center space-x-2 md:space-x-10 lg:space-x-20 pointer-events-none [&_a]:pointer-events-auto">
+      <div className="hidden desk:flex flex-row px-2 py-1 text-lg lg:px-6 lg:py-1.5 lg:text-3xl md:text-2xl justify-between md:justify-center space-x-2 md:space-x-10 lg:space-x-20 pointer-events-none [&_a]:pointer-events-auto">
        {footerLinks}
      </div>
    </footer>
--- a/src/components/header/index.tsx
+++ b/src/components/header/index.tsx
@@ -92,7 +92,7 @@ export default function Header({ transparent = false }: { transparent?: boolean
      `}
    >
      <div className={`
-        w-full flex flex-row items-center justify-center
+        w-full hidden desk:flex flex-row items-center justify-center
        pointer-events-none
        ${!isIndexPage ? 'bg-background md:bg-transparent' : ''}
      `}>
--- a/src/components/hero/index.tsx
+++ b/src/components/hero/index.tsx
@@ -1,5 +1,12 @@
+import { useState, useEffect, useRef } from "react";
 import Typewriter from "typewriter-effect";

+interface GithubData {
+  status: { message: string } | null;
+  commit: { message: string; repo: string; date: string; url: string } | null;
+  tinkering: { repo: string; url: string } | null;
+}
+
 const html = (strings: TemplateStringsArray, ...values: any[]) => {
  let result = strings[0];
  for (let i = 0; i < values.length; i++) {
@@ -8,75 +15,160 @@ const html = (strings: TemplateStringsArray, ...values: any[]) => {
  return result.replace(/\n\s*/g, "").replace(/\s+/g, " ").trim();
 };

-interface TypewriterOptions {
-  autoStart: boolean;
-  loop: boolean;
-  delay: number;
-  deleteSpeed: number;
-  cursor: string;
+function timeAgo(dateStr: string): string {
+  const seconds = Math.floor((Date.now() - new Date(dateStr).getTime()) / 1000);
+  if (seconds < 60) return "just now";
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  if (days < 30) return `${days}d ago`;
+  return `${Math.floor(days / 30)}mo ago`;
+}
+
+function escapeHtml(str: string): string {
+  return str
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
 }

 interface TypewriterInstance {
  typeString: (str: string) => TypewriterInstance;
  pauseFor: (ms: number) => TypewriterInstance;
  deleteAll: () => TypewriterInstance;
+  callFunction: (cb: () => void) => TypewriterInstance;
  start: () => TypewriterInstance;
 }

+const emoji = (name: string) =>
+  `<img src="/emoji/${name}.webp" alt="" style="display:inline;height:1em;width:1em;vertical-align:middle">`;
+
+const SECTION_1 = html`
+  <span>Hello, I'm</span>
+  <br><div class="mb-4"></div>
+  <span><a href="/about" class="text-aqua hover:underline"><strong>Timothy Pidashev</strong></a> ${emoji("wave")}</span>
+`;
+
+const SECTION_2 = html`
+  <span>I've been turning</span>
+  <br><div class="mb-4"></div>
+  <span><a href="/projects" class="text-green hover:underline"><strong>coffee</strong></a> into <a href="/projects" class="text-yellow hover:underline"><strong>code</strong></a></span>
+  <br><div class="mb-4"></div>
+  <span>since <a href="/about" class="text-blue hover:underline"><strong>2018</strong></a> ${emoji("sparkles")}</span>
+`;
+
+const SECTION_3 = html`
+  <span>Check out my</span>
+  <br><div class="mb-4"></div>
+  <span><a href="/blog" class="text-purple hover:underline"><strong>blog</strong></a>/
+  <a href="/projects" class="text-blue hover:underline"><strong>projects</strong></a> or</span>
+  <br><div class="mb-4"></div>
+  <span><a href="/contact" class="text-green hover:underline"><strong>contact</strong></a> me below ${emoji("point-down")}</span>
+`;
+
+const MOODS = [
+  "mood-cool", "mood-nerd", "mood-think", "mood-starstruck",
+  "mood-fire", "mood-cold", "mood-salute",
+  "mood-dotted", "mood-expressionless", "mood-neutral",
+  "mood-nomouth", "mood-nod", "mood-melting",
+];
+
+function addGreetings(tw: TypewriterInstance) {
+  tw.typeString(SECTION_1).pauseFor(2000).deleteAll()
+    .typeString(SECTION_2).pauseFor(2000).deleteAll()
+    .typeString(SECTION_3).pauseFor(2000).deleteAll();
+}
+
+function addGithubSections(tw: TypewriterInstance, github: GithubData) {
+  if (github.status) {
+    const moodImg = emoji(MOODS[Math.floor(Math.random() * MOODS.length)]);
+    const statusStr =
+      `<span>My current mood ${moodImg}</span>` +
+      `<br><div class="mb-4"></div>` +
+      `<a href="https://github.com/timmypidashev" target="_blank" class="text-orange-bright hover:underline">${escapeHtml(github.status.message)}</a>`;
+    tw.typeString(statusStr).pauseFor(3000).deleteAll();
+  }
+
+  if (github.tinkering) {
+    const tinkerImg = emoji("tinker");
+    const tinkerStr =
+      `<span>Currently tinkering with ${tinkerImg}</span>` +
+      `<br><div class="mb-4"></div>` +
+      `<a href="${github.tinkering.url}" target="_blank" class="text-yellow hover:underline">${github.tinkering.url}</a>`;
+    tw.typeString(tinkerStr).pauseFor(3000).deleteAll();
+  }
+
+  if (github.commit) {
+    const ago = timeAgo(github.commit.date);
+    const memoImg = emoji("memo");
+    const repoUrl = `https://github.com/timmypidashev/${github.commit.repo}`;
+    const commitStr =
+      `<span>My latest <span class="text-foreground/40">(unbroken?)</span> commit ${memoImg}</span>` +
+      `<br><div class="mb-4"></div>` +
+      `<a href="${github.commit.url}" target="_blank" class="text-green hover:underline">"${escapeHtml(github.commit.message)}"</a>` +
+      `<br><div class="mb-4"></div>` +
+      `<a href="${repoUrl}" target="_blank" class="text-yellow hover:underline">${escapeHtml(github.commit.repo)}</a>` +
+      `<span class="text-foreground/40"> · ${ago}</span>`;
+    tw.typeString(commitStr).pauseFor(3000).deleteAll();
+  }
+}
+
 export default function Hero() {
-  const SECTION_1 = html`
-    <span>Hello, I'm</span>
-    <br><div class="mb-4"></div>
-    <span><a href="/about" class="text-aqua hover:underline"><strong>Timothy Pidashev</strong></a></span>
-  `;
+  const [phase, setPhase] = useState<"intro" | "full">("intro");
+  const githubRef = useRef<GithubData | null>(null);

-  const SECTION_2 = html`
-    <span>I've been turning</span>
-    <br><div class="mb-4"></div>
-    <span><a href="/projects" class="text-green hover:underline"><strong>coffee</strong></a> into 
-    <a href="/projects" class="text-yellow hover:underline"><strong>code</strong></a></span>
-    <br><div class="mb-4"></div>
-    <span>since <a href="/about" class="text-blue hover:underline"><strong>2018</strong></a>!</span>
-  `;
+  useEffect(() => {
+    fetch("/api/github")
+      .then((r) => r.json())
+      .then((data) => { githubRef.current = data; })
+      .catch(() => { githubRef.current = { status: null, commit: null, tinkering: null }; });
+  }, []);

-  const SECTION_3 = html`
-    <span>Check out my</span>
-    <br><div class="mb-4"></div>
-    <span><a href="/blog" class="text-purple hover:underline"><strong>blog</strong></a>/
-    <a href="/projects" class="text-blue hover:underline"><strong>projects</strong></a> or</span>
-    <br><div class="mb-4"></div>
-    <span><a href="/contact" class="text-green hover:underline"><strong>contact</strong></a> me below!</span>
-  `;
-
-  const handleInit = (typewriter: TypewriterInstance): void => {
-    typewriter
-      .typeString(SECTION_1)
-      .pauseFor(2000)
-      .deleteAll()
-      .typeString(SECTION_2)
-      .pauseFor(2000)
-      .deleteAll()
-      .typeString(SECTION_3)
-      .pauseFor(2000)
-      .deleteAll()
-      .start();
+  const handleIntroInit = (typewriter: TypewriterInstance): void => {
+    addGreetings(typewriter);
+    typewriter.callFunction(() => {
+      // Greetings done — data is almost certainly ready (API ~500ms, greetings ~20s)
+      const check = () => {
+        if (githubRef.current) {
+          setPhase("full");
+        } else {
+          setTimeout(check, 200);
+        }
+      };
+      check();
+    }).start();
  };

-  const typewriterOptions: TypewriterOptions = {
-    autoStart: true,
-    loop: true,
-    delay: 50,
-    deleteSpeed: 800,
-    cursor: '|'
+  const handleFullInit = (typewriter: TypewriterInstance): void => {
+    const github = githubRef.current!;
+    // GitHub sections first (greetings just played in intro phase)
+    addGithubSections(typewriter, github);
+    // Then greetings for the loop
+    addGreetings(typewriter);
+    typewriter.start();
  };

+  const baseOptions = { delay: 35, deleteSpeed: 35, cursor: "|" };
+
  return (
    <div className="flex justify-center items-center min-h-screen pointer-events-none">
-      <div className="text-4xl font-bold text-center pointer-events-none [&_a]:pointer-events-auto">
-        <Typewriter
-          options={typewriterOptions}
-          onInit={handleInit}
-        />
+      <div className="text-2xl md:text-4xl font-bold text-center pointer-events-none [&_a]:pointer-events-auto">
+        {phase === "intro" ? (
+          <Typewriter
+            key="intro"
+            options={{ ...baseOptions, autoStart: true, loop: false }}
+            onInit={handleIntroInit}
+          />
+        ) : (
+          <Typewriter
+            key="full"
+            options={{ ...baseOptions, autoStart: true, loop: true }}
+            onInit={handleFullInit}
+          />
+        )}
      </div>
    </div>
  );
--- a/src/components/mobile-nav/index.tsx
+++ b/src/components/mobile-nav/index.tsx
@@ -0,0 +1,102 @@
+import { useState, useEffect, useRef } from "react";
+import { Home, User, FolderOpen, BookOpen, FileText, Settings } from "lucide-react";
+import { SettingsSheet } from "./settings-sheet";
+
+const tabs = [
+  { href: "/", label: "Home", icon: Home, color: "text-green" },
+  { href: "/about", label: "About", icon: User, color: "text-yellow" },
+  { href: "/projects", label: "Projects", icon: FolderOpen, color: "text-blue" },
+  { href: "/blog", label: "Blog", icon: BookOpen, color: "text-purple" },
+  { href: "/resume", label: "Resume", icon: FileText, color: "text-aqua" },
+];
+
+export default function MobileNav({ transparent = false }: { transparent?: boolean }) {
+  const [path, setPath] = useState("/");
+  const [settingsOpen, setSettingsOpen] = useState(false);
+  const [visible, setVisible] = useState(true);
+  const lastScrollY = useRef(0);
+  const lastTime = useRef(Date.now());
+
+  useEffect(() => {
+    setPath(window.location.pathname);
+  }, []);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const y = document.documentElement.scrollTop;
+      const now = Date.now();
+      const dt = now - lastTime.current;
+      const dy = lastScrollY.current - y; // positive = scrolling up
+      const velocity = dt > 0 ? dy / dt : 0; // px/ms
+
+      if (y < 10) {
+        setVisible(true);
+      } else if (dy > 0 && velocity > 1.5) {
+        // Fast upward scroll
+        setVisible(true);
+      } else if (dy < 0) {
+        // Scrolling down
+        setVisible(false);
+      }
+
+      lastScrollY.current = y;
+      lastTime.current = now;
+    };
+    document.addEventListener("scroll", handleScroll, { passive: true });
+    return () => document.removeEventListener("scroll", handleScroll);
+  }, []);
+
+  const isActive = (href: string) => {
+    if (href === "/") return path === "/";
+    return path.startsWith(href);
+  };
+
+  return (
+    <>
+      <nav
+        className={`fixed bottom-0 left-0 right-0 z-50 desk:hidden transition-transform duration-300 ${
+          visible ? "translate-y-0" : "translate-y-full"
+        } ${
+          transparent
+            ? "bg-transparent"
+            : "bg-background border-t border-foreground/10"
+        }`}
+        style={{
+          paddingBottom: "env(safe-area-inset-bottom, 0px)",
+          touchAction: "manipulation",
+        }}
+      >
+        <div className="flex items-center justify-around px-1 h-14">
+          {tabs.map((tab) => {
+            const Icon = tab.icon;
+            const active = isActive(tab.href);
+            return (
+              <a
+                key={tab.href}
+                href={tab.href}
+                data-astro-reload
+                className={`flex flex-col items-center justify-center gap-0.5 flex-1 py-1 ${
+                  active ? tab.color : "text-foreground/40"
+                }`}
+              >
+                <Icon size={20} strokeWidth={active ? 2 : 1.5} />
+                <span className="text-[10px]">{tab.label}</span>
+              </a>
+            );
+          })}
+          <button
+            onClick={() => setSettingsOpen(true)}
+            className={`flex flex-col items-center justify-center gap-0.5 flex-1 py-1 ${
+              settingsOpen ? "text-foreground" : "text-foreground/40"
+            }`}
+          >
+            <Settings size={20} strokeWidth={1.5} />
+            <span className="text-[10px]">Settings</span>
+          </button>
+        </div>
+      </nav>
+
+      <SettingsSheet open={settingsOpen} onClose={() => setSettingsOpen(false)} />
+    </>
+  );
+}
--- a/src/components/mobile-nav/settings-sheet.tsx
+++ b/src/components/mobile-nav/settings-sheet.tsx
@@ -0,0 +1,166 @@
+import { useEffect, useState } from "react";
+import { X, ExternalLink } from "lucide-react";
+import { FAMILIES, THEMES } from "@/lib/themes";
+import { applyTheme, getStoredThemeId } from "@/lib/themes/engine";
+import { ANIMATION_IDS, ANIMATION_LABELS, type AnimationId } from "@/lib/animations";
+
+const footerLinks = [
+  { href: "mailto:contact@timmypidashev.dev", label: "Contact", color: "text-green", activeBg: "bg-green/15", activeBorder: "border-green/40" },
+  { href: "https://github.com/timmypidashev", label: "Github", color: "text-yellow", activeBg: "bg-yellow/15", activeBorder: "border-yellow/40" },
+  { href: "https://www.linkedin.com/in/timothy-pidashev-4353812b8", label: "LinkedIn", color: "text-blue", activeBg: "bg-blue/15", activeBorder: "border-blue/40" },
+  { href: "https://github.com/timmypidashev/web", label: "Source", color: "text-purple", activeBg: "bg-purple/15", activeBorder: "border-purple/40" },
+];
+
+const animOptions = [
+  { id: "shuffle", color: "text-red-bright", activeBg: "bg-red-bright/15", activeBorder: "border-red-bright/40" },
+  { id: "game-of-life", color: "text-green-bright", activeBg: "bg-green-bright/15", activeBorder: "border-green-bright/40" },
+  { id: "lava-lamp", color: "text-orange-bright", activeBg: "bg-orange-bright/15", activeBorder: "border-orange-bright/40" },
+  { id: "confetti", color: "text-yellow-bright", activeBg: "bg-yellow-bright/15", activeBorder: "border-yellow-bright/40" },
+  { id: "asciiquarium", color: "text-aqua-bright", activeBg: "bg-aqua-bright/15", activeBorder: "border-aqua-bright/40" },
+  { id: "pipes", color: "text-blue-bright", activeBg: "bg-blue-bright/15", activeBorder: "border-blue-bright/40" },
+];
+
+// Cycle through accent colors for variant buttons
+const variantColors = [
+  { color: "text-yellow-bright", activeBg: "bg-yellow-bright/15", activeBorder: "border-yellow-bright/40" },
+  { color: "text-orange-bright", activeBg: "bg-orange-bright/15", activeBorder: "border-orange-bright/40" },
+  { color: "text-purple-bright", activeBg: "bg-purple-bright/15", activeBorder: "border-purple-bright/40" },
+  { color: "text-blue-bright", activeBg: "bg-blue-bright/15", activeBorder: "border-blue-bright/40" },
+  { color: "text-green-bright", activeBg: "bg-green-bright/15", activeBorder: "border-green-bright/40" },
+  { color: "text-red-bright", activeBg: "bg-red-bright/15", activeBorder: "border-red-bright/40" },
+  { color: "text-aqua-bright", activeBg: "bg-aqua-bright/15", activeBorder: "border-aqua-bright/40" },
+];
+
+export function SettingsSheet({ open, onClose }: { open: boolean; onClose: () => void }) {
+  const [currentTheme, setCurrentTheme] = useState(getStoredThemeId());
+  const [currentAnim, setCurrentAnim] = useState<string>("shuffle");
+
+  useEffect(() => {
+    setCurrentAnim(localStorage.getItem("animation") || "shuffle");
+  }, [open]);
+
+  const handleTheme = (id: string) => {
+    applyTheme(id);
+    setCurrentTheme(id);
+  };
+
+  const handleAnim = (id: string) => {
+    localStorage.setItem("animation", id);
+    document.documentElement.dataset.animation = id;
+    document.dispatchEvent(new CustomEvent("animation-changed", { detail: { id } }));
+    setCurrentAnim(id);
+    onClose();
+  };
+
+  const currentFamily = THEMES[currentTheme]?.family ?? FAMILIES[0].id;
+
+  return (
+    <>
+      {/* Backdrop */}
+      <div
+        className={`fixed inset-0 z-[60] bg-black/50 transition-opacity duration-300 ${
+          open ? "opacity-100" : "opacity-0 pointer-events-none"
+        }`}
+        onClick={onClose}
+      />
+
+      {/* Sheet */}
+      <div
+        className={`fixed left-0 right-0 bottom-0 z-[70] bg-background border-t border-foreground/10 rounded-t-2xl transition-transform duration-300 ease-out ${
+          open ? "translate-y-0" : "translate-y-full"
+        }`}
+        style={{ paddingBottom: "env(safe-area-inset-bottom, 0px)", maxHeight: "80vh", overflowY: "auto" }}
+      >
+        <div className="flex items-center justify-between px-5 pt-4 pb-2">
+          <span className="text-foreground/80 font-bold text-lg">Settings</span>
+          <button onClick={onClose} className="p-2 text-foreground/50">
+            <X size={20} />
+          </button>
+        </div>
+
+        <div className="px-5 pb-6 space-y-6">
+          {/* Theme */}
+          <div>
+            <div className="text-foreground/50 text-xs uppercase tracking-wider mb-2">Theme</div>
+
+            {/* Family selector */}
+            <div className="flex gap-2 mb-3 overflow-x-auto pb-1">
+              {FAMILIES.map((family) => (
+                <button
+                  key={family.id}
+                  onClick={() => handleTheme(family.default)}
+                  className={`flex-shrink-0 px-3 py-1.5 rounded-lg text-xs font-medium border transition-colors duration-200 ${
+                    currentFamily === family.id
+                      ? "bg-foreground/10 text-foreground/80 border-foreground/20"
+                      : "bg-foreground/5 text-foreground/30 border-transparent hover:text-foreground/50"
+                  }`}
+                >
+                  {family.name}
+                </button>
+              ))}
+            </div>
+
+            {/* Variant selector for current family */}
+            <div className="flex gap-2">
+              {FAMILIES.find((f) => f.id === currentFamily)?.themes.map((theme, i) => {
+                const style = variantColors[i % variantColors.length];
+                return (
+                  <button
+                    key={theme.id}
+                    onClick={() => handleTheme(theme.id)}
+                    className={`flex-1 py-2.5 rounded-lg text-sm font-medium border transition-colors duration-200 ${
+                      currentTheme === theme.id
+                        ? `${style.activeBg} ${style.color} ${style.activeBorder}`
+                        : "bg-foreground/5 text-foreground/40 border-transparent hover:text-foreground/60"
+                    }`}
+                  >
+                    {theme.label}
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+
+          {/* Animation */}
+          <div>
+            <div className="text-foreground/50 text-xs uppercase tracking-wider mb-2">Animation</div>
+            <div className="grid grid-cols-3 gap-2">
+              {animOptions.map((opt) => (
+                <button
+                  key={opt.id}
+                  onClick={() => handleAnim(opt.id)}
+                  className={`py-2.5 rounded-lg text-sm font-medium border transition-colors duration-200 ${
+                    currentAnim === opt.id
+                      ? `${opt.activeBg} ${opt.color} ${opt.activeBorder}`
+                      : "bg-foreground/5 text-foreground/40 border-transparent hover:text-foreground/60"
+                  }`}
+                >
+                  {ANIMATION_LABELS[opt.id as AnimationId]}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Links */}
+          <div>
+            <div className="text-foreground/50 text-xs uppercase tracking-wider mb-2">Links</div>
+            <div className="grid grid-cols-2 gap-2">
+              {footerLinks.map((link) => (
+                <a
+                  key={link.label}
+                  href={link.href}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className={`${link.activeBg} ${link.color} ${link.activeBorder} py-2.5 rounded-lg text-sm font-medium border text-center inline-flex items-center justify-center gap-1.5`}
+                >
+                  {link.label}
+                  <ExternalLink size={12} className="opacity-50" />
+                </a>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
--- a/src/components/projects/project-list.tsx
+++ b/src/components/projects/project-list.tsx
@@ -7,11 +7,10 @@ interface ProjectListProps {

 export function ProjectList({ projects }: ProjectListProps) {
  return (
-    <div className="w-full max-w-6xl mx-auto pt-24 sm:pt-32 px-4">
+    <div className="w-full max-w-6xl mx-auto pt-12 md:pt-24 lg:pt-32 px-4">
      <AnimateIn>
        <h1 className="text-2xl sm:text-3xl font-bold text-blue mb-12 text-center leading-relaxed">
-          Here's what I've been <br className="sm:hidden" />
-          building lately
+          Here's what I've been building lately
        </h1>
      </AnimateIn>

@@ -20,7 +19,7 @@ export function ProjectList({ projects }: ProjectListProps) {
          <AnimateIn key={project.id} delay={i * 80}>
            <li className="group">
              <a href={`/projects/${project.id}`} className="block">
-                <article className="flex flex-col md:flex-row md:items-center gap-4 md:gap-8 p-2 md:p-4 border-b border-foreground/20 last:border-b-0 rounded-lg group-hover:outline group-hover:outline-2 group-hover:outline-blue transition-all duration-200">
+                <article className="flex flex-col md:flex-row md:items-center gap-4 md:gap-8 p-2 md:p-4 border-b border-foreground/20 last:border-b-0 rounded-lg group-hover:outline group-hover:outline-2 group-hover:outline-blue transition-[outline-color] duration-200">
                  {/* Image */}
                  <div className="w-full md:w-1/3 aspect-[16/9] overflow-hidden rounded-lg bg-foreground/5 flex-shrink-0">
                    {project.data.image ? (
--- a/src/components/resume/index.tsx
+++ b/src/components/resume/index.tsx
@@ -1,71 +1,11 @@
-import React, { useEffect, useRef, useState } from "react";
+import React from "react";
 import {
  FileDown,
  Github,
  Linkedin,
  Globe
 } from "lucide-react";
-
-// --- Typewriter hook ---
-
-function useTypewriter(text: string, trigger: boolean, speed = 12) {
-  const [displayed, setDisplayed] = useState("");
-  const [done, setDone] = useState(false);
-
-  useEffect(() => {
-    if (!trigger) return;
-
-    let i = 0;
-    setDisplayed("");
-    setDone(false);
-
-    const interval = setInterval(() => {
-      i++;
-      setDisplayed(text.slice(0, i));
-      if (i >= text.length) {
-        setDone(true);
-        clearInterval(interval);
-      }
-    }, speed);
-
-    return () => clearInterval(interval);
-  }, [trigger, text, speed]);
-
-  return { displayed, done };
-}
-
-// --- Visibility hook ---
-
-function useScrollVisible(threshold = 0.1) {
-  const ref = useRef<HTMLDivElement>(null);
-  const [visible, setVisible] = useState(false);
-
-  useEffect(() => {
-    const el = ref.current;
-    if (!el) return;
-
-    const rect = el.getBoundingClientRect();
-    if (rect.top < window.innerHeight && rect.bottom > 0) {
-      requestAnimationFrame(() => setVisible(true));
-      return;
-    }
-
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        if (entry.isIntersecting) {
-          setVisible(true);
-          observer.disconnect();
-        }
-      },
-      { threshold }
-    );
-
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, [threshold]);
-
-  return { ref, visible };
-}
+import { useTypewriter, useScrollVisible } from "@/components/typed-text";

 // --- Section fade-in ---

@@ -75,11 +15,12 @@ function Section({ children, delay = 0 }: { children: React.ReactNode; delay?: n
  return (
    <div
      ref={ref}
-      className="transition-all duration-700 ease-out"
+      className="transition-[opacity,transform] duration-700 ease-out"
      style={{
        transitionDelay: `${delay}ms`,
+        willChange: "transform, opacity",
        opacity: visible ? 1 : 0,
-        transform: visible ? "translateY(0)" : "translateY(24px)",
+        transform: visible ? "translate3d(0,0,0)" : "translate3d(0,24px,0)",
      }}
    >
      {children}
@@ -91,7 +32,7 @@ function Section({ children, delay = 0 }: { children: React.ReactNode; delay?: n

 function TypedSection({
  heading,
-  headingClass = "text-3xl font-bold text-yellow-bright",
+  headingClass = "text-2xl md:text-3xl font-bold text-yellow-bright",
  children,
 }: {
  heading: string;
@@ -108,10 +49,11 @@ function TypedSection({
        {visible && !done && <span className="animate-pulse text-foreground/40">|</span>}
      </h3>
      <div
-        className="transition-all duration-500 ease-out"
+        className="transition-[opacity,transform] duration-500 ease-out"
        style={{
+          willChange: "transform, opacity",
          opacity: done ? 1 : 0,
-          transform: done ? "translateY(0)" : "translateY(12px)",
+          transform: done ? "translate3d(0,0,0)" : "translate3d(0,12px,0)",
        }}
      >
        {children}
@@ -128,11 +70,12 @@ function SkillTags({ skills, trigger }: { skills: string[]; trigger: boolean })
      {skills.map((skill, i) => (
        <span
          key={i}
-          className="border border-foreground/20 px-4 py-2 rounded-lg hover:border-foreground/40 transition-all duration-500 ease-out"
+          className="border border-foreground/20 px-4 py-2 rounded-lg hover:border-foreground/40 transition-[opacity,transform] duration-500 ease-out"
          style={{
            transitionDelay: `${i * 60}ms`,
+            willChange: "transform, opacity",
            opacity: trigger ? 1 : 0,
-            transform: trigger ? "translateY(0) scale(1)" : "translateY(12px) scale(0.95)",
+            transform: trigger ? "translate3d(0,0,0) scale(1)" : "translate3d(0,12px,0) scale(0.95)",
          }}
        >
          {skill}
@@ -212,19 +155,19 @@ const Resume = () => {
  };

  return (
-    <div className="max-w-4xl mx-auto px-6 md:px-8 pt-24 pb-16">
+    <div className="max-w-4xl mx-auto px-4 md:px-8 pt-16 md:pt-24 pb-16">
      <div className="space-y-16">
        {/* Header */}
        <header className="text-center space-y-6">
          <Section>
-            <h1 className="text-6xl font-bold text-aqua-bright">{resumeData.name}</h1>
+            <h1 className="text-3xl md:text-6xl font-bold text-aqua-bright">{resumeData.name}</h1>
          </Section>
          <Section delay={150}>
-            <h2 className="text-3xl text-foreground/80">{resumeData.title}</h2>
+            <h2 className="text-xl md:text-3xl text-foreground/80">{resumeData.title}</h2>
          </Section>
          <Section delay={300}>
-            <div className="flex flex-col md:flex-row justify-center gap-4 md:gap-6 text-foreground/60 text-lg">
-              <a href={`mailto:${resumeData.contact.email}`} className="hover:text-foreground transition-colors duration-200">
+            <div className="flex flex-col md:flex-row justify-center gap-2 md:gap-6 text-foreground/60 text-sm md:text-lg">
+              <a href={`mailto:${resumeData.contact.email}`} className="hover:text-foreground transition-colors duration-200 break-all md:break-normal">
                {resumeData.contact.email}
              </a>
              <span className="hidden md:inline">•</span>
@@ -236,7 +179,7 @@ const Resume = () => {
            </div>
          </Section>
          <Section delay={450}>
-            <div className="flex justify-center items-center gap-6 text-lg">
+            <div className="flex justify-center items-center gap-4 md:gap-6 text-base md:text-lg">
              <a href={`https://${resumeData.contact.github}`}
                 target="_blank"
                 className="text-blue-bright hover:text-blue transition-colors duration-200 flex items-center gap-2"
@@ -264,7 +207,7 @@ const Resume = () => {

        {/* Summary */}
        <TypedSection heading="Professional Summary">
-          <p className="text-xl leading-relaxed">{resumeData.summary}</p>
+          <p className="text-base md:text-xl leading-relaxed">{resumeData.summary}</p>
        </TypedSection>

        {/* Experience */}
@@ -275,14 +218,14 @@ const Resume = () => {
                <div className="space-y-4">
                  <div className="flex flex-col md:flex-row md:justify-between md:items-start gap-2">
                    <div>
-                      <h4 className="text-2xl font-semibold text-green-bright">{exp.title}</h4>
-                      <div className="text-foreground/60 text-lg">{exp.company} - {exp.location}</div>
+                      <h4 className="text-xl md:text-2xl font-semibold text-green-bright">{exp.title}</h4>
+                      <div className="text-foreground/60 text-base md:text-lg">{exp.company} - {exp.location}</div>
                    </div>
-                    <div className="text-foreground/60 text-lg font-medium">{exp.period}</div>
+                    <div className="text-foreground/60 text-sm md:text-lg font-medium">{exp.period}</div>
                  </div>
                  <ul className="list-disc pl-6 space-y-3">
                    {exp.achievements.map((a, i) => (
-                      <li key={i} className="text-lg leading-relaxed">{a}</li>
+                      <li key={i} className="text-base md:text-lg leading-relaxed">{a}</li>
                    ))}
                  </ul>
                </div>
@@ -300,7 +243,7 @@ const Resume = () => {
                  <div className="flex flex-col md:flex-row md:justify-between md:items-start gap-2">
                    <div>
                      <div className="flex items-center gap-3">
-                        <h4 className="text-2xl font-semibold text-green-bright">{project.title}</h4>
+                        <h4 className="text-xl md:text-2xl font-semibold text-green-bright">{project.title}</h4>
                        {project.url && (
                          <a
                            href={project.url}
@@ -312,27 +255,27 @@ const Resume = () => {
                          </a>
                        )}
                      </div>
-                      <div className="text-foreground/60 text-lg">{project.type}</div>
+                      <div className="text-foreground/60 text-base md:text-lg">{project.type}</div>
                    </div>
-                    <div className="text-foreground/60 text-lg font-medium">Since {project.startDate}</div>
+                    <div className="text-foreground/60 text-sm md:text-lg font-medium">Since {project.startDate}</div>
                  </div>
                  <div className="space-y-4">
                    {project.responsibilities && (
                      <div>
-                        <h5 className="text-lg text-aqua font-semibold mb-2">Responsibilities</h5>
+                        <h5 className="text-base md:text-lg text-aqua font-semibold mb-2">Responsibilities</h5>
                        <ul className="list-disc pl-6 space-y-3">
                          {project.responsibilities.map((r, i) => (
-                            <li key={i} className="text-lg leading-relaxed">{r}</li>
+                            <li key={i} className="text-base md:text-lg leading-relaxed">{r}</li>
                          ))}
                        </ul>
                      </div>
                    )}
                    {project.achievements && (
                      <div>
-                        <h5 className="text-lg text-aqua font-semibold mb-2">Key Achievements</h5>
+                        <h5 className="text-base md:text-lg text-aqua font-semibold mb-2">Key Achievements</h5>
                        <ul className="list-disc pl-6 space-y-3">
                          {project.achievements.map((a, i) => (
-                            <li key={i} className="text-lg leading-relaxed">{a}</li>
+                            <li key={i} className="text-base md:text-lg leading-relaxed">{a}</li>
                          ))}
                        </ul>
                      </div>
@@ -344,32 +287,6 @@ const Resume = () => {
          </div>
        </TypedSection>

-        {/* Education */}
-        <TypedSection heading="Education">
-          <div className="space-y-8">
-            {resumeData.education.map((edu, index) => (
-              <Section key={index}>
-                <div className="space-y-4">
-                  <div className="flex flex-col md:flex-row md:justify-between md:items-start gap-2">
-                    <div>
-                      <h4 className="text-2xl font-semibold text-green-bright">{edu.degree}</h4>
-                      <div className="text-foreground/60 text-lg">{edu.school} - {edu.location}</div>
-                    </div>
-                    <div className="text-foreground/60 text-lg font-medium">{edu.period}</div>
-                  </div>
-                  {edu.achievements.length > 0 && (
-                    <ul className="list-disc pl-6 space-y-3">
-                      {edu.achievements.map((a, i) => (
-                        <li key={i} className="text-lg leading-relaxed">{a}</li>
-                      ))}
-                    </ul>
-                  )}
-                </div>
-              </Section>
-            ))}
-          </div>
-        </TypedSection>
-
        {/* Skills */}
        <SkillsSection />
      </div>
@@ -385,24 +302,25 @@ function SkillsSection() {

  return (
    <div ref={ref} className="space-y-8">
-      <h3 className="text-3xl font-bold text-yellow-bright" style={{ minHeight: "1.2em" }}>
+      <h3 className="text-2xl md:text-3xl font-bold text-yellow-bright" style={{ minHeight: "1.2em" }}>
        {visible ? displayed : "\u00A0"}
        {visible && !done && <span className="animate-pulse text-foreground/40">|</span>}
      </h3>

      <div
-        className="grid grid-cols-1 md:grid-cols-2 gap-8 transition-all duration-500 ease-out"
+        className="grid grid-cols-1 md:grid-cols-2 gap-8 transition-[opacity,transform] duration-500 ease-out"
        style={{
+          willChange: "transform, opacity",
          opacity: done ? 1 : 0,
-          transform: done ? "translateY(0)" : "translateY(12px)",
+          transform: done ? "translate3d(0,0,0)" : "translate3d(0,12px,0)",
        }}
      >
        <div className="space-y-4">
-          <h4 className="text-2xl font-semibold text-green-bright">Technical Skills</h4>
+          <h4 className="text-xl md:text-2xl font-semibold text-green-bright">Technical Skills</h4>
          <SkillTags skills={resumeData.skills.technical} trigger={done} />
        </div>
        <div className="space-y-4">
-          <h4 className="text-2xl font-semibold text-green-bright">Soft Skills</h4>
+          <h4 className="text-xl md:text-2xl font-semibold text-green-bright">Soft Skills</h4>
          <SkillTags skills={resumeData.skills.soft} trigger={done} />
        </div>
      </div>
--- a/src/components/stream-content.tsx
+++ b/src/components/stream-content.tsx
@@ -0,0 +1,110 @@
+import { useEffect, useRef } from "react";
+import { prefersReducedMotion } from "@/lib/reduced-motion";
+
+const HEADING_TAGS = new Set(["H1", "H2", "H3", "H4", "H5", "H6"]);
+
+function typeInHeading(el: HTMLElement): Promise<void> {
+  return new Promise((resolve) => {
+    const text = el.textContent || "";
+    const textLength = text.length;
+    if (textLength === 0) { resolve(); return; }
+
+    const speed = Math.max(8, Math.min(25, 600 / textLength));
+    const originalHTML = el.innerHTML;
+
+    // Wrap each character in a span with opacity:0
+    // The full text stays in the DOM so layout/wrapping is correct from the start
+    el.innerHTML = "";
+    const chars: HTMLSpanElement[] = [];
+    for (const char of text) {
+      const span = document.createElement("span");
+      span.textContent = char;
+      span.style.opacity = "0";
+      chars.push(span);
+      el.appendChild(span);
+    }
+
+    el.style.opacity = "1";
+    el.style.transform = "translate3d(0,0,0)";
+
+    let i = 0;
+    const step = () => {
+      if (i >= chars.length) {
+        // Restore original HTML to clean up spans
+        el.innerHTML = originalHTML;
+        resolve();
+        return;
+      }
+      chars[i].style.opacity = "1";
+      i++;
+      setTimeout(step, speed);
+    };
+    step();
+  });
+}
+
+export function StreamContent({ children }: { children: React.ReactNode }) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const container = ref.current;
+    if (!container || prefersReducedMotion()) {
+      if (container) container.classList.remove("stream-hidden");
+      return;
+    }
+
+    const prose = container.querySelector(".prose") || container;
+    const blocks = Array.from(prose.querySelectorAll(":scope > *")) as HTMLElement[];
+
+    if (blocks.length === 0) {
+      container.classList.remove("stream-hidden");
+      return;
+    }
+
+    // Set inline opacity:0 on every block BEFORE removing the CSS class
+    // This prevents the flash of visible content between class removal and style application
+    blocks.forEach((el) => {
+      el.style.opacity = "0";
+      el.style.transform = "translate3d(0,16px,0)";
+    });
+
+    // Now safe to remove the CSS class — inline styles keep everything hidden
+    container.classList.remove("stream-hidden");
+
+    // Add transition properties in the next frame so the initial state is set first
+    requestAnimationFrame(() => {
+      blocks.forEach((el) => {
+        el.style.transition = "opacity 0.6s ease-out, transform 0.6s ease-out";
+        el.style.willChange = "transform, opacity";
+      });
+    });
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            const el = entry.target as HTMLElement;
+            observer.unobserve(el);
+
+            if (HEADING_TAGS.has(el.tagName)) {
+              typeInHeading(el);
+            } else {
+              el.style.opacity = "1";
+              el.style.transform = "translate3d(0,0,0)";
+            }
+          }
+        });
+      },
+      { threshold: 0.05 }
+    );
+
+    blocks.forEach((el) => observer.observe(el));
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <div ref={ref} className="stream-hidden">
+      {children}
+    </div>
+  );
+}
--- a/src/components/theme-switcher/index.tsx
+++ b/src/components/theme-switcher/index.tsx
@@ -1,31 +1,35 @@
 import { useRef, useState, useEffect } from "react";
-import { getStoredThemeId, getNextTheme, applyTheme } from "@/lib/themes/engine";
+import { THEMES, FAMILIES } from "@/lib/themes";
+import { getStoredThemeId, getNextFamily, getNextVariant, applyTheme } from "@/lib/themes/engine";

 const FADE_DURATION = 300;

-const LABELS: Record<string, string> = {
-  darkbox: "classic",
-  "darkbox-retro": "retro",
-  "darkbox-dim": "dim",
-};
-
 export default function ThemeSwitcher() {
  const [hovering, setHovering] = useState(false);
-  const [currentLabel, setCurrentLabel] = useState("");
+  const [familyName, setFamilyName] = useState("");
+  const [variantLabel, setVariantLabel] = useState("");

  const maskRef = useRef<HTMLDivElement>(null);
  const animatingRef = useRef(false);
  const committedRef = useRef("");

+  function syncLabels(id: string) {
+    const theme = THEMES[id];
+    if (!theme) return;
+    const family = FAMILIES.find((f) => f.id === theme.family);
+    setFamilyName(family?.name.toLowerCase() ?? theme.family);
+    setVariantLabel(theme.label);
+  }
+
  useEffect(() => {
    committedRef.current = getStoredThemeId();
-    setCurrentLabel(LABELS[committedRef.current] ?? "");
+    syncLabels(committedRef.current);

    const handleSwap = () => {
      const id = getStoredThemeId();
      applyTheme(id);
      committedRef.current = id;
-      setCurrentLabel(LABELS[id] ?? "");
+      syncLabels(id);
    };

    document.addEventListener("astro:after-swap", handleSwap);
@@ -34,7 +38,7 @@ export default function ThemeSwitcher() {
    };
  }, []);

-  const handleClick = () => {
+  function animateTransition(nextId: string) {
    if (animatingRef.current) return;
    animatingRef.current = true;

@@ -51,10 +55,9 @@ export default function ThemeSwitcher() {
    mask.style.visibility = "visible";
    mask.style.transition = "none";

-    const next = getNextTheme(committedRef.current);
-    applyTheme(next.id);
-    committedRef.current = next.id;
-    setCurrentLabel(LABELS[next.id] ?? "");
+    applyTheme(nextId);
+    committedRef.current = nextId;
+    syncLabels(nextId);

    mask.offsetHeight;

@@ -69,22 +72,44 @@ export default function ThemeSwitcher() {
    };

    mask.addEventListener("transitionend", onEnd);
+  }
+
+  const handleFamilyClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    const next = getNextFamily(committedRef.current);
+    animateTransition(next.id);
+  };
+
+  const handleVariantClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    const next = getNextVariant(committedRef.current);
+    animateTransition(next.id);
  };

  return (
    <>
      <div
-        className="fixed bottom-4 right-4 z-[101] pointer-events-auto hidden md:block"
+        className="fixed bottom-4 right-4 z-[101] pointer-events-auto hidden desk:block"
        onMouseEnter={() => setHovering(true)}
        onMouseLeave={() => setHovering(false)}
-        onClick={handleClick}
-        style={{ cursor: "pointer" }}
      >
        <span
-          className="text-foreground font-bold text-sm select-none transition-opacity duration-200"
+          className="text-foreground font-bold text-sm select-none transition-opacity duration-200 inline-flex items-center gap-0"
          style={{ opacity: hovering ? 0.8 : 0.15 }}
        >
-          {currentLabel}
+          <button
+            onClick={handleFamilyClick}
+            className="hover:text-yellow-bright transition-colors duration-150 cursor-pointer bg-transparent border-none p-0 font-bold text-sm text-inherit"
+          >
+            {familyName}
+          </button>
+          <span className="mx-1 opacity-40">·</span>
+          <button
+            onClick={handleVariantClick}
+            className="hover:text-blue-bright transition-colors duration-150 cursor-pointer bg-transparent border-none p-0 font-bold text-sm text-inherit"
+          >
+            {variantLabel}
+          </button>
        </span>
      </div>

--- a/src/components/typed-text.tsx
+++ b/src/components/typed-text.tsx
@@ -0,0 +1,142 @@
+import { useEffect, useRef, useState } from "react";
+import { prefersReducedMotion } from "@/lib/reduced-motion";
+
+export function useTypewriter(text: string, trigger: boolean, speed = 12) {
+  const [displayed, setDisplayed] = useState("");
+  const [done, setDone] = useState(false);
+
+  useEffect(() => {
+    if (!trigger) return;
+
+    if (prefersReducedMotion()) {
+      setDisplayed(text);
+      setDone(true);
+      return;
+    }
+
+    let i = 0;
+    setDisplayed("");
+    setDone(false);
+
+    const interval = setInterval(() => {
+      i++;
+      setDisplayed(text.slice(0, i));
+      if (i >= text.length) {
+        setDone(true);
+        clearInterval(interval);
+      }
+    }, speed);
+
+    return () => clearInterval(interval);
+  }, [trigger, text, speed]);
+
+  return { displayed, done };
+}
+
+export function useScrollVisible(threshold = 0.1) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    const rect = el.getBoundingClientRect();
+    if (rect.top < window.innerHeight && rect.bottom > 0) {
+      requestAnimationFrame(() => setVisible(true));
+      return;
+    }
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setVisible(true);
+          observer.disconnect();
+        }
+      },
+      { threshold }
+    );
+
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [threshold]);
+
+  return { ref, visible };
+}
+
+interface TypedTextProps {
+  text: string;
+  as?: "h1" | "h2" | "h3" | "h4" | "span" | "p";
+  className?: string;
+  speed?: number;
+  cursor?: boolean;
+}
+
+export function TypedText({
+  text,
+  as: Tag = "span",
+  className = "",
+  speed = 12,
+  cursor = true,
+}: TypedTextProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const tagRef = useRef<HTMLElement>(null);
+  const { ref, visible } = useScrollVisible();
+  const [done, setDone] = useState(false);
+  const [started, setStarted] = useState(false);
+
+  useEffect(() => {
+    if (!visible || started) return;
+    setStarted(true);
+
+    if (prefersReducedMotion()) {
+      setDone(true);
+      return;
+    }
+
+    const el = tagRef.current;
+    if (!el) return;
+
+    // Wrap each character in an invisible span — layout stays correct
+    el.textContent = "";
+    const chars: HTMLSpanElement[] = [];
+    for (const char of text) {
+      const span = document.createElement("span");
+      span.textContent = char;
+      span.style.opacity = "0";
+      chars.push(span);
+      el.appendChild(span);
+    }
+
+    const textLength = text.length;
+    const charSpeed = Math.max(8, Math.min(speed, 600 / textLength));
+
+    let i = 0;
+    const step = () => {
+      if (i >= chars.length) {
+        el.textContent = text;
+        setDone(true);
+        return;
+      }
+      chars[i].style.opacity = "1";
+      i++;
+      setTimeout(step, charSpeed);
+    };
+    step();
+  }, [visible, started, text, speed]);
+
+  return (
+    <div ref={ref}>
+      <Tag
+        ref={tagRef as any}
+        className={className}
+        style={{ minHeight: "1.2em" }}
+      >
+        {!started ? "\u00A0" : done ? text : null}
+      </Tag>
+      {cursor && started && !done && (
+        <span className="animate-pulse text-foreground/40">|</span>
+      )}
+    </div>
+  );
+}
--- a/src/layouts/content.astro
+++ b/src/layouts/content.astro
@@ -7,6 +7,8 @@ import Footer from "@/components/footer";
 import Background from "@/components/background";
 import ThemeSwitcher from "@/components/theme-switcher";
 import AnimationSwitcher from "@/components/animation-switcher";
+import VercelAnalytics from "@/components/analytics";
+import MobileNav from "@/components/mobile-nav";
 import { THEME_LOADER_SCRIPT, THEME_NAV_SCRIPT } from "@/lib/themes/loader";
 import { ANIMATION_LOADER_SCRIPT, ANIMATION_NAV_SCRIPT } from "@/lib/animations/loader";

@@ -37,25 +39,25 @@ const ogImage = "https://timmypidashev.dev/og-image.jpg";
      defaultTransition={false}
      handleFocus={false}
    />
-    <style>
-      ::view-transition-new(:root) {
-        animation: none;
+    <script is:inline>
+      if (window.innerWidth < 1024 || navigator.maxTouchPoints > 0) {
+        document.addEventListener('click', function(e) {
+          var a = e.target.closest('a[href]');
+          if (a && a.href && !a.target && a.origin === location.origin) {
+            e.preventDefault();
+            e.stopPropagation();
+            window.location.href = a.href;
+          }
+        }, true);
      }
-      ::view-transition-old(:root) {
-        animation: 90ms ease-out both fade-out;
-      }
-      @keyframes fade-out {
-        from { opacity: 1; }
-        to { opacity: 0; }
-      }
-    </style>
+    </script>
    <script is:inline set:html={THEME_LOADER_SCRIPT} />
    <script is:inline set:html={ANIMATION_LOADER_SCRIPT} />
  </head>
  <body class="bg-background text-foreground min-h-screen flex flex-col">
    <Header client:load />
    <main class="flex-1 flex flex-col">
-      <div class="max-w-5xl mx-auto pt-12 px-4 py-8 flex-1">
+      <div class="max-w-5xl mx-auto pt-2 lg:pt-12 px-4 py-4 lg:py-8 pb-20 lg:pb-8 flex-1 relative z-10">
        <Background layout="content" position="right" client:only="react" transition:persist />
        <div>
          <slot />
@@ -68,6 +70,8 @@ const ogImage = "https://timmypidashev.dev/og-image.jpg";
    </div>
    <ThemeSwitcher client:only="react" transition:persist />
    <AnimationSwitcher client:only="react" transition:persist />
+    <VercelAnalytics client:load />
+    <MobileNav client:load />
    <script is:inline set:html={`window.scrollTo(0,0);` + THEME_NAV_SCRIPT} />
    <script is:inline set:html={ANIMATION_NAV_SCRIPT} />
  </body>
--- a/src/layouts/index.astro
+++ b/src/layouts/index.astro
@@ -8,6 +8,8 @@ import Footer from "@/components/footer";
 import Background from "@/components/background";
 import ThemeSwitcher from "@/components/theme-switcher";
 import AnimationSwitcher from "@/components/animation-switcher";
+import VercelAnalytics from "@/components/analytics";
+import MobileNav from "@/components/mobile-nav";
 import { THEME_LOADER_SCRIPT, THEME_NAV_SCRIPT } from "@/lib/themes/loader";
 import { ANIMATION_LOADER_SCRIPT, ANIMATION_NAV_SCRIPT } from "@/lib/animations/loader";

@@ -36,18 +38,32 @@ const ogImage = "https://timmypidashev.dev/og-image.jpg";
    <link rel="icon" type="image/jpeg" href="/me.jpeg" />
    <link rel="sitemap" href="/sitemap-index.xml" />
    <ClientRouter />
+    <script is:inline>
+      if (window.innerWidth < 1024 || navigator.maxTouchPoints > 0) {
+        document.addEventListener('click', function(e) {
+          var a = e.target.closest('a[href]');
+          if (a && a.href && !a.target && a.origin === location.origin) {
+            e.preventDefault();
+            e.stopPropagation();
+            window.location.href = a.href;
+          }
+        }, true);
+      }
+    </script>
    <script is:inline set:html={THEME_LOADER_SCRIPT} />
    <script is:inline set:html={ANIMATION_LOADER_SCRIPT} />
 	</head>
-  <body class="bg-background text-foreground">
+  <body class="bg-background text-foreground overflow-hidden h-screen">
    <Header client:load transparent />
-    <main transition:animate="fade">
+    <main>
      <Background layout="index" client:only="react" transition:persist />
      <slot />
    </main>
    <Footer client:load transition:persist fixed=true />
    <ThemeSwitcher client:only="react" transition:persist />
    <AnimationSwitcher client:only="react" transition:persist />
+    <VercelAnalytics client:load />
+    <MobileNav client:load transparent />
    <script is:inline set:html={THEME_NAV_SCRIPT} />
    <script is:inline set:html={ANIMATION_NAV_SCRIPT} />
 	</body>
--- a/src/layouts/resource.astro
+++ b/src/layouts/resource.astro
@@ -7,6 +7,8 @@ import Footer from "@/components/footer";
 import Background from "@/components/background";
 import ThemeSwitcher from "@/components/theme-switcher";
 import AnimationSwitcher from "@/components/animation-switcher";
+import VercelAnalytics from "@/components/analytics";
+import MobileNav from "@/components/mobile-nav";
 import { THEME_LOADER_SCRIPT, THEME_NAV_SCRIPT } from "@/lib/themes/loader";
 import { ANIMATION_LOADER_SCRIPT, ANIMATION_NAV_SCRIPT } from "@/lib/animations/loader";

@@ -37,24 +39,24 @@ const ogImage = "https://timmypidashev.dev/og-image.jpg";
      defaultTransition={false}
      handleFocus={false}
    />
-    <style>
-      ::view-transition-new(:root) {
-        animation: none;
+    <script is:inline>
+      if (window.innerWidth < 1024 || navigator.maxTouchPoints > 0) {
+        document.addEventListener('click', function(e) {
+          var a = e.target.closest('a[href]');
+          if (a && a.href && !a.target && a.origin === location.origin) {
+            e.preventDefault();
+            e.stopPropagation();
+            window.location.href = a.href;
+          }
+        }, true);
      }
-      ::view-transition-old(:root) {
-        animation: 90ms ease-out both fade-out;
-      }
-      @keyframes fade-out {
-        from { opacity: 1; }
-        to { opacity: 0; }
-      }
-    </style>
+    </script>
    <script is:inline set:html={THEME_LOADER_SCRIPT} />
    <script is:inline set:html={ANIMATION_LOADER_SCRIPT} />
  </head>
  <body class="bg-background text-foreground min-h-screen flex flex-col">
    <main class="flex-1 flex flex-col">
-      <div class="max-w-5xl mx-auto pt-12 px-4 py-8 flex-1">
+      <div class="max-w-5xl mx-auto pt-2 lg:pt-12 px-4 py-4 lg:py-8 flex-1 relative z-10">
        <Background layout="content" position="right" client:only="react" transition:persist />
        <div>
          <slot />
@@ -64,6 +66,8 @@ const ogImage = "https://timmypidashev.dev/og-image.jpg";
    </main>
    <ThemeSwitcher client:only="react" transition:persist />
    <AnimationSwitcher client:only="react" transition:persist />
+    <VercelAnalytics client:load />
+    <MobileNav client:load />
    <script is:inline set:html={`window.scrollTo(0,0);` + THEME_NAV_SCRIPT} />
    <script is:inline set:html={ANIMATION_NAV_SCRIPT} />
  </body>
--- a/src/lib/reduced-motion.ts
+++ b/src/lib/reduced-motion.ts
@@ -0,0 +1,4 @@
+export function prefersReducedMotion(): boolean {
+  if (typeof window === "undefined") return false;
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
--- a/src/lib/themes/engine.ts
+++ b/src/lib/themes/engine.ts
@@ -1,4 +1,4 @@
-import { THEMES, DEFAULT_THEME_ID } from "@/lib/themes";
+import { THEMES, FAMILIES, DEFAULT_THEME_ID } from "@/lib/themes";
 import { CSS_PROPS } from "@/lib/themes/props";
 import type { Theme } from "@/lib/themes/types";

@@ -11,6 +11,26 @@ export function saveTheme(id: string): void {
  localStorage.setItem("theme", id);
 }

+/** Cycle to the next theme family, jumping to its default variant. */
+export function getNextFamily(currentId: string): Theme {
+  const current = THEMES[currentId];
+  const familyId = current?.family ?? FAMILIES[0].id;
+  const idx = FAMILIES.findIndex((f) => f.id === familyId);
+  const next = FAMILIES[(idx + 1) % FAMILIES.length];
+  return THEMES[next.default];
+}
+
+/** Cycle to the next variant within the current family. */
+export function getNextVariant(currentId: string): Theme {
+  const current = THEMES[currentId];
+  if (!current) return Object.values(THEMES)[0];
+  const family = FAMILIES.find((f) => f.id === current.family);
+  if (!family) return current;
+  const idx = family.themes.findIndex((t) => t.id === currentId);
+  return family.themes[(idx + 1) % family.themes.length];
+}
+
+// Keep for backward compat (cycles all themes linearly)
 export function getNextTheme(currentId: string): Theme {
  const list = Object.values(THEMES);
  const idx = list.findIndex((t) => t.id === currentId);
@@ -27,7 +47,6 @@ export function previewTheme(id: string): void {
    root.style.setProperty(prop, theme.colors[key]);
  }

-
  document.dispatchEvent(new CustomEvent("theme-changed", { detail: { id } }));
 }

--- a/src/lib/themes/families/catppuccin.ts
+++ b/src/lib/themes/families/catppuccin.ts
@@ -0,0 +1,94 @@
+import type { Theme, ThemeFamily } from "../types";
+
+// Catppuccin — warm pastel palette. Each flavor has its own accent colors.
+
+const mocha: Theme = {
+  id: "catppuccin-mocha",
+  family: "catppuccin",
+  label: "mocha",
+  name: "Catppuccin Mocha",
+  type: "dark",
+  colors: {
+    background: "30 30 46",
+    foreground: "205 214 244",
+    red: "243 139 168", redBright: "246 166 190",
+    orange: "250 179 135", orangeBright: "252 200 170",
+    green: "166 227 161", greenBright: "190 236 186",
+    yellow: "249 226 175", yellowBright: "251 235 200",
+    blue: "137 180 250", blueBright: "172 202 251",
+    purple: "203 166 247", purpleBright: "220 192 249",
+    aqua: "148 226 213", aquaBright: "180 236 228",
+    surface: "49 50 68",
+  },
+  canvasPalette: [[243,139,168],[166,227,161],[249,226,175],[137,180,250],[203,166,247],[148,226,213]],
+};
+
+const macchiato: Theme = {
+  id: "catppuccin-macchiato",
+  family: "catppuccin",
+  label: "macchiato",
+  name: "Catppuccin Macchiato",
+  type: "dark",
+  colors: {
+    background: "36 39 58",
+    foreground: "202 211 245",
+    red: "237 135 150", redBright: "242 167 180",
+    orange: "245 169 127", orangeBright: "248 192 165",
+    green: "166 218 149", greenBright: "190 232 180",
+    yellow: "238 212 159", yellowBright: "243 226 190",
+    blue: "138 173 244", blueBright: "170 198 247",
+    purple: "198 160 246", purpleBright: "218 190 249",
+    aqua: "139 213 202", aquaBright: "175 228 220",
+    surface: "54 58 79",
+  },
+  canvasPalette: [[237,135,150],[166,218,149],[238,212,159],[138,173,244],[198,160,246],[139,213,202]],
+};
+
+const frappe: Theme = {
+  id: "catppuccin-frappe",
+  family: "catppuccin",
+  label: "frappé",
+  name: "Catppuccin Frappé",
+  type: "dark",
+  colors: {
+    background: "48 52 70",
+    foreground: "198 208 245",
+    red: "231 130 132", redBright: "238 160 162",
+    orange: "239 159 118", orangeBright: "244 185 158",
+    green: "166 209 137", greenBright: "190 222 172",
+    yellow: "229 200 144", yellowBright: "237 216 178",
+    blue: "140 170 238", blueBright: "172 196 242",
+    purple: "202 158 230", purpleBright: "218 186 238",
+    aqua: "129 200 190", aquaBright: "168 216 208",
+    surface: "65 69 89",
+  },
+  canvasPalette: [[231,130,132],[166,209,137],[229,200,144],[140,170,238],[202,158,230],[129,200,190]],
+};
+
+const latte: Theme = {
+  id: "catppuccin-latte",
+  family: "catppuccin",
+  label: "latte",
+  name: "Catppuccin Latte",
+  type: "light",
+  colors: {
+    background: "239 241 245",
+    foreground: "76 79 105",
+    red: "210 15 57", redBright: "228 50 82",
+    orange: "254 100 11", orangeBright: "254 135 60",
+    green: "64 160 43", greenBright: "85 180 65",
+    yellow: "223 142 29", yellowBright: "236 170 60",
+    blue: "30 102 245", blueBright: "70 130 248",
+    purple: "136 57 239", purpleBright: "162 95 244",
+    aqua: "23 146 153", aquaBright: "55 168 175",
+    surface: "204 208 218",
+  },
+  canvasPalette: [[210,15,57],[64,160,43],[223,142,29],[30,102,245],[136,57,239],[23,146,153]],
+};
+
+export const catppuccin: ThemeFamily = {
+  id: "catppuccin",
+  name: "Catppuccin",
+  themes: [mocha, macchiato, frappe, latte],
+  default: "catppuccin-mocha",
+};
--- a/src/lib/themes/families/darkbox.ts
+++ b/src/lib/themes/families/darkbox.ts
@@ -0,0 +1,71 @@
+import type { Theme, ThemeFamily } from "../types";
+
+const classic: Theme = {
+  id: "darkbox",
+  family: "darkbox",
+  label: "classic",
+  name: "Darkbox Classic",
+  type: "dark",
+  colors: {
+    background: "0 0 0",
+    foreground: "235 219 178",
+    red: "251 73 52", redBright: "255 110 85",
+    orange: "254 128 25", orangeBright: "255 165 65",
+    green: "184 187 38", greenBright: "210 215 70",
+    yellow: "250 189 47", yellowBright: "255 215 85",
+    blue: "131 165 152", blueBright: "165 195 180",
+    purple: "211 134 155", purpleBright: "235 165 180",
+    aqua: "142 192 124", aquaBright: "175 220 160",
+    surface: "60 56 54",
+  },
+  canvasPalette: [[251,73,52],[184,187,38],[250,189,47],[131,165,152],[211,134,155],[142,192,124]],
+};
+
+const retro: Theme = {
+  id: "darkbox-retro",
+  family: "darkbox",
+  label: "retro",
+  name: "Darkbox Retro",
+  type: "dark",
+  colors: {
+    background: "0 0 0",
+    foreground: "189 174 147",
+    red: "204 36 29", redBright: "251 73 52",
+    orange: "214 93 14", orangeBright: "254 128 25",
+    green: "152 151 26", greenBright: "184 187 38",
+    yellow: "215 153 33", yellowBright: "250 189 47",
+    blue: "69 133 136", blueBright: "131 165 152",
+    purple: "177 98 134", purpleBright: "211 134 155",
+    aqua: "104 157 106", aquaBright: "142 192 124",
+    surface: "60 56 54",
+  },
+  canvasPalette: [[204,36,29],[152,151,26],[215,153,33],[69,133,136],[177,98,134],[104,157,106]],
+};
+
+const dim: Theme = {
+  id: "darkbox-dim",
+  family: "darkbox",
+  label: "dim",
+  name: "Darkbox Dim",
+  type: "dark",
+  colors: {
+    background: "0 0 0",
+    foreground: "168 153 132",
+    red: "157 0 6", redBright: "204 36 29",
+    orange: "175 58 3", orangeBright: "214 93 14",
+    green: "121 116 14", greenBright: "152 151 26",
+    yellow: "181 118 20", yellowBright: "215 153 33",
+    blue: "7 102 120", blueBright: "69 133 136",
+    purple: "143 63 113", purpleBright: "177 98 134",
+    aqua: "66 123 88", aquaBright: "104 157 106",
+    surface: "60 56 54",
+  },
+  canvasPalette: [[157,0,6],[121,116,14],[181,118,20],[7,102,120],[143,63,113],[66,123,88]],
+};
+
+export const darkbox: ThemeFamily = {
+  id: "darkbox",
+  name: "Darkbox",
+  themes: [classic, retro, dim],
+  default: "darkbox-retro",
+};
--- a/src/lib/themes/families/everforest.ts
+++ b/src/lib/themes/families/everforest.ts
@@ -0,0 +1,70 @@
+import type { Theme, ThemeFamily } from "../types";
+
+// Everforest — warm green-toned palette. Same accents across
+// hard/medium/soft, only backgrounds change.
+
+const accents = {
+  red: "230 126 128", redBright: "240 155 157",
+  orange: "230 152 117", orangeBright: "240 177 150",
+  green: "167 192 128", greenBright: "190 210 160",
+  yellow: "219 188 127", yellowBright: "233 208 163",
+  blue: "127 187 179", blueBright: "160 208 200",
+  purple: "214 153 182", purpleBright: "228 180 202",
+  aqua: "131 192 146", aquaBright: "162 212 176",
+} as const;
+
+const palette: [number, number, number][] = [
+  [230,126,128],[167,192,128],[219,188,127],[127,187,179],[214,153,182],[131,192,146],
+];
+
+const hard: Theme = {
+  id: "everforest-hard",
+  family: "everforest",
+  label: "hard",
+  name: "Everforest Hard",
+  type: "dark",
+  colors: {
+    background: "39 46 51",
+    foreground: "211 198 170",
+    ...accents,
+    surface: "55 65 69",
+  },
+  canvasPalette: palette,
+};
+
+const medium: Theme = {
+  id: "everforest-medium",
+  family: "everforest",
+  label: "medium",
+  name: "Everforest Medium",
+  type: "dark",
+  colors: {
+    background: "45 53 59",
+    foreground: "211 198 170",
+    ...accents,
+    surface: "61 72 77",
+  },
+  canvasPalette: palette,
+};
+
+const soft: Theme = {
+  id: "everforest-soft",
+  family: "everforest",
+  label: "soft",
+  name: "Everforest Soft",
+  type: "dark",
+  colors: {
+    background: "52 63 68",
+    foreground: "211 198 170",
+    ...accents,
+    surface: "68 80 85",
+  },
+  canvasPalette: palette,
+};
+
+export const everforest: ThemeFamily = {
+  id: "everforest",
+  name: "Everforest",
+  themes: [hard, medium, soft],
+  default: "everforest-medium",
+};
--- a/src/lib/themes/families/github.ts
+++ b/src/lib/themes/families/github.ts
@@ -0,0 +1,74 @@
+import type { Theme, ThemeFamily } from "../types";
+
+// GitHub — the familiar look from github.com.
+// Dark (default dark), Dark Dimmed (softer), Light (classic white).
+
+const dark: Theme = {
+  id: "github-dark",
+  family: "github",
+  label: "dark",
+  name: "GitHub Dark",
+  type: "dark",
+  colors: {
+    background: "13 17 23",
+    foreground: "230 237 243",
+    red: "255 123 114", redBright: "255 166 158",
+    orange: "217 156 90", orangeBright: "240 183 122",
+    green: "126 231 135", greenBright: "168 242 175",
+    yellow: "224 194 133", yellowBright: "240 215 168",
+    blue: "121 192 255", blueBright: "165 214 255",
+    purple: "210 153 255", purpleBright: "226 187 255",
+    aqua: "118 214 198", aquaBright: "160 230 218",
+    surface: "22 27 34",
+  },
+  canvasPalette: [[255,123,114],[126,231,135],[224,194,133],[121,192,255],[210,153,255],[118,214,198]],
+};
+
+const dimmed: Theme = {
+  id: "github-dimmed",
+  family: "github",
+  label: "dimmed",
+  name: "GitHub Dark Dimmed",
+  type: "dark",
+  colors: {
+    background: "34 39 46",
+    foreground: "173 186 199",
+    red: "255 123 114", redBright: "255 166 158",
+    orange: "219 171 127", orangeBright: "236 195 158",
+    green: "87 196 106", greenBright: "130 218 144",
+    yellow: "224 194 133", yellowBright: "240 215 168",
+    blue: "108 182 255", blueBright: "152 206 255",
+    purple: "195 145 243", purpleBright: "218 180 248",
+    aqua: "96 200 182", aquaBright: "140 220 208",
+    surface: "45 51 59",
+  },
+  canvasPalette: [[255,123,114],[87,196,106],[224,194,133],[108,182,255],[195,145,243],[96,200,182]],
+};
+
+const light: Theme = {
+  id: "github-light",
+  family: "github",
+  label: "light",
+  name: "GitHub Light",
+  type: "light",
+  colors: {
+    background: "255 255 255",
+    foreground: "31 35 40",
+    red: "207 34 46", redBright: "227 70 80",
+    orange: "191 135 0", orangeBright: "212 160 30",
+    green: "26 127 55", greenBright: "45 155 78",
+    yellow: "159 115 0", yellowBright: "182 140 22",
+    blue: "9 105 218", blueBright: "48 132 238",
+    purple: "130 80 223", purpleBright: "158 112 238",
+    aqua: "18 130 140", aquaBright: "42 158 168",
+    surface: "246 248 250",
+  },
+  canvasPalette: [[207,34,46],[26,127,55],[159,115,0],[9,105,218],[130,80,223],[18,130,140]],
+};
+
+export const github: ThemeFamily = {
+  id: "github",
+  name: "GitHub",
+  themes: [dark, dimmed, light],
+  default: "github-dark",
+};
--- a/src/lib/themes/families/gruvbox.ts
+++ b/src/lib/themes/families/gruvbox.ts
@@ -0,0 +1,70 @@
+import type { Theme, ThemeFamily } from "../types";
+
+// Original gruvbox palette — same accents across hard/medium/soft,
+// only background and surface change.
+
+const accents = {
+  red: "204 36 29", redBright: "251 73 52",
+  orange: "214 93 14", orangeBright: "254 128 25",
+  green: "152 151 26", greenBright: "184 187 38",
+  yellow: "215 153 33", yellowBright: "250 189 47",
+  blue: "69 133 136", blueBright: "131 165 152",
+  purple: "177 98 134", purpleBright: "211 134 155",
+  aqua: "104 157 106", aquaBright: "142 192 124",
+} as const;
+
+const palette: [number, number, number][] = [
+  [204,36,29],[152,151,26],[215,153,33],[69,133,136],[177,98,134],[104,157,106],
+];
+
+const hard: Theme = {
+  id: "gruvbox-hard",
+  family: "gruvbox",
+  label: "hard",
+  name: "Gruvbox Hard",
+  type: "dark",
+  colors: {
+    background: "29 32 33",
+    foreground: "235 219 178",
+    ...accents,
+    surface: "60 56 54",
+  },
+  canvasPalette: palette,
+};
+
+const medium: Theme = {
+  id: "gruvbox-medium",
+  family: "gruvbox",
+  label: "medium",
+  name: "Gruvbox Medium",
+  type: "dark",
+  colors: {
+    background: "40 40 40",
+    foreground: "235 219 178",
+    ...accents,
+    surface: "60 56 54",
+  },
+  canvasPalette: palette,
+};
+
+const soft: Theme = {
+  id: "gruvbox-soft",
+  family: "gruvbox",
+  label: "soft",
+  name: "Gruvbox Soft",
+  type: "dark",
+  colors: {
+    background: "50 48 47",
+    foreground: "235 219 178",
+    ...accents,
+    surface: "80 73 69",
+  },
+  canvasPalette: palette,
+};
+
+export const gruvbox: ThemeFamily = {
+  id: "gruvbox",
+  name: "Gruvbox",
+  themes: [hard, medium, soft],
+  default: "gruvbox-medium",
+};
--- a/src/lib/themes/families/kanagawa.ts
+++ b/src/lib/themes/families/kanagawa.ts
@@ -0,0 +1,74 @@
+import type { Theme, ThemeFamily } from "../types";
+
+// Kanagawa — inspired by Katsushika Hokusai's paintings.
+// Each variant has its own distinct palette.
+
+const wave: Theme = {
+  id: "kanagawa-wave",
+  family: "kanagawa",
+  label: "wave",
+  name: "Kanagawa Wave",
+  type: "dark",
+  colors: {
+    background: "31 31 40",
+    foreground: "220 215 186",
+    red: "195 64 67", redBright: "255 93 98",
+    orange: "255 160 102", orangeBright: "255 184 140",
+    green: "118 148 106", greenBright: "152 187 108",
+    yellow: "192 163 110", yellowBright: "230 195 132",
+    blue: "126 156 216", blueBright: "127 180 202",
+    purple: "149 127 184", purpleBright: "175 158 206",
+    aqua: "106 149 137", aquaBright: "122 168 159",
+    surface: "42 42 55",
+  },
+  canvasPalette: [[195,64,67],[118,148,106],[192,163,110],[126,156,216],[149,127,184],[106,149,137]],
+};
+
+const dragon: Theme = {
+  id: "kanagawa-dragon",
+  family: "kanagawa",
+  label: "dragon",
+  name: "Kanagawa Dragon",
+  type: "dark",
+  colors: {
+    background: "24 22 22",
+    foreground: "197 201 197",
+    red: "196 116 110", redBright: "195 64 67",
+    orange: "182 146 123", orangeBright: "255 160 102",
+    green: "135 169 135", greenBright: "152 187 108",
+    yellow: "196 178 138", yellowBright: "230 195 132",
+    blue: "139 164 176", blueBright: "126 156 216",
+    purple: "162 146 163", purpleBright: "149 127 184",
+    aqua: "142 164 162", aquaBright: "122 168 159",
+    surface: "40 39 39",
+  },
+  canvasPalette: [[196,116,110],[135,169,135],[196,178,138],[139,164,176],[162,146,163],[142,164,162]],
+};
+
+const lotus: Theme = {
+  id: "kanagawa-lotus",
+  family: "kanagawa",
+  label: "lotus",
+  name: "Kanagawa Lotus",
+  type: "light",
+  colors: {
+    background: "242 236 188",
+    foreground: "84 84 100",
+    red: "200 64 83", redBright: "215 71 75",
+    orange: "233 138 0", orangeBright: "245 160 30",
+    green: "111 137 78", greenBright: "130 158 98",
+    yellow: "222 152 0", yellowBright: "240 178 40",
+    blue: "77 105 155", blueBright: "93 87 163",
+    purple: "98 76 131", purpleBright: "118 100 155",
+    aqua: "89 123 117", aquaBright: "110 145 138",
+    surface: "228 215 148",
+  },
+  canvasPalette: [[200,64,83],[111,137,78],[222,152,0],[77,105,155],[98,76,131],[89,123,117]],
+};
+
+export const kanagawa: ThemeFamily = {
+  id: "kanagawa",
+  name: "Kanagawa",
+  themes: [wave, dragon, lotus],
+  default: "kanagawa-wave",
+};
--- a/src/lib/themes/families/monokai.ts
+++ b/src/lib/themes/families/monokai.ts
@@ -0,0 +1,136 @@
+import type { Theme, ThemeFamily } from "../types";
+
+// Monokai — the Sublime Text classic, plus Monokai Pro filter variants.
+
+const classic: Theme = {
+  id: "monokai-classic",
+  family: "monokai",
+  label: "classic",
+  name: "Monokai Classic",
+  type: "dark",
+  colors: {
+    background: "39 40 34",
+    foreground: "248 248 242",
+    red: "249 38 114", redBright: "252 85 145",
+    orange: "253 151 31", orangeBright: "254 182 85",
+    green: "166 226 46", greenBright: "195 240 95",
+    yellow: "230 219 116", yellowBright: "240 232 160",
+    blue: "102 217 239", blueBright: "145 230 245",
+    purple: "174 129 255", purpleBright: "200 165 255",
+    aqua: "161 239 228", aquaBright: "192 245 238",
+    surface: "73 72 62",
+  },
+  canvasPalette: [[249,38,114],[166,226,46],[230,219,116],[102,217,239],[174,129,255],[161,239,228]],
+};
+
+const pro: Theme = {
+  id: "monokai-pro",
+  family: "monokai",
+  label: "pro",
+  name: "Monokai Pro",
+  type: "dark",
+  colors: {
+    background: "45 42 46",
+    foreground: "252 252 250",
+    red: "255 97 136", redBright: "255 140 170",
+    orange: "252 152 103", orangeBright: "253 182 142",
+    green: "169 220 118", greenBright: "195 234 155",
+    yellow: "255 216 102", yellowBright: "255 230 155",
+    blue: "120 220 232", blueBright: "160 234 242",
+    purple: "171 157 242", purpleBright: "198 188 248",
+    aqua: "140 228 200", aquaBright: "175 240 220",
+    surface: "64 62 65",
+  },
+  canvasPalette: [[255,97,136],[169,220,118],[255,216,102],[120,220,232],[171,157,242],[140,228,200]],
+};
+
+const octagon: Theme = {
+  id: "monokai-octagon",
+  family: "monokai",
+  label: "octagon",
+  name: "Monokai Octagon",
+  type: "dark",
+  colors: {
+    background: "40 42 58",
+    foreground: "234 242 241",
+    red: "255 101 122", redBright: "255 142 158",
+    orange: "255 155 94", orangeBright: "255 185 138",
+    green: "186 215 97", greenBright: "210 230 140",
+    yellow: "255 215 109", yellowBright: "255 230 160",
+    blue: "156 209 187", blueBright: "185 225 208",
+    purple: "195 154 201", purpleBright: "218 182 222",
+    aqua: "130 212 200", aquaBright: "165 228 218",
+    surface: "58 61 75",
+  },
+  canvasPalette: [[255,101,122],[186,215,97],[255,215,109],[156,209,187],[195,154,201],[130,212,200]],
+};
+
+const ristretto: Theme = {
+  id: "monokai-ristretto",
+  family: "monokai",
+  label: "ristretto",
+  name: "Monokai Ristretto",
+  type: "dark",
+  colors: {
+    background: "44 37 37",
+    foreground: "255 241 243",
+    red: "253 104 131", redBright: "254 145 165",
+    orange: "243 141 112", orangeBright: "248 175 150",
+    green: "173 218 120", greenBright: "198 232 158",
+    yellow: "249 204 108", yellowBright: "252 222 155",
+    blue: "133 218 204", blueBright: "168 232 222",
+    purple: "168 169 235", purpleBright: "195 196 242",
+    aqua: "150 222 195", aquaBright: "180 235 215",
+    surface: "64 56 56",
+  },
+  canvasPalette: [[253,104,131],[173,218,120],[249,204,108],[133,218,204],[168,169,235],[150,222,195]],
+};
+
+const machine: Theme = {
+  id: "monokai-machine",
+  family: "monokai",
+  label: "machine",
+  name: "Monokai Machine",
+  type: "dark",
+  colors: {
+    background: "39 49 54",
+    foreground: "242 255 252",
+    red: "255 109 126", redBright: "255 148 162",
+    orange: "255 178 112", orangeBright: "255 202 155",
+    green: "162 229 123", greenBright: "192 240 160",
+    yellow: "255 237 114", yellowBright: "255 244 168",
+    blue: "124 213 241", blueBright: "162 228 246",
+    purple: "186 160 248", purpleBright: "210 188 251",
+    aqua: "142 225 200", aquaBright: "175 238 220",
+    surface: "58 68 73",
+  },
+  canvasPalette: [[255,109,126],[162,229,123],[255,237,114],[124,213,241],[186,160,248],[142,225,200]],
+};
+
+const spectrum: Theme = {
+  id: "monokai-spectrum",
+  family: "monokai",
+  label: "spectrum",
+  name: "Monokai Spectrum",
+  type: "dark",
+  colors: {
+    background: "34 34 34",
+    foreground: "247 241 255",
+    red: "252 97 141", redBright: "253 140 172",
+    orange: "253 147 83", orangeBright: "254 180 125",
+    green: "123 216 143", greenBright: "162 232 175",
+    yellow: "252 229 102", yellowBright: "253 238 155",
+    blue: "90 212 230", blueBright: "135 226 240",
+    purple: "148 138 227", purpleBright: "180 172 238",
+    aqua: "108 218 190", aquaBright: "148 232 212",
+    surface: "54 53 55",
+  },
+  canvasPalette: [[252,97,141],[123,216,143],[252,229,102],[90,212,230],[148,138,227],[108,218,190]],
+};
+
+export const monokai: ThemeFamily = {
+  id: "monokai",
+  name: "Monokai",
+  themes: [classic, pro, octagon, ristretto, machine, spectrum],
+  default: "monokai-pro",
+};
--- a/src/lib/themes/families/nord.ts
+++ b/src/lib/themes/families/nord.ts
@@ -0,0 +1,53 @@
+import type { Theme, ThemeFamily } from "../types";
+
+// Nord — arctic, bluish clean aesthetic.
+// Polar Night (dark bg), Snow Storm (light bg), Frost (blues), Aurora (accents).
+
+const dark: Theme = {
+  id: "nord-dark",
+  family: "nord",
+  label: "dark",
+  name: "Nord Dark",
+  type: "dark",
+  colors: {
+    background: "46 52 64",
+    foreground: "216 222 233",
+    red: "191 97 106", redBright: "210 130 138",
+    orange: "208 135 112", orangeBright: "224 165 145",
+    green: "163 190 140", greenBright: "185 210 168",
+    yellow: "235 203 139", yellowBright: "242 220 175",
+    blue: "94 129 172", blueBright: "129 161 193",
+    purple: "180 142 173", purpleBright: "200 170 195",
+    aqua: "143 188 187", aquaBright: "136 192 208",
+    surface: "59 66 82",
+  },
+  canvasPalette: [[191,97,106],[163,190,140],[235,203,139],[94,129,172],[180,142,173],[143,188,187]],
+};
+
+const light: Theme = {
+  id: "nord-light",
+  family: "nord",
+  label: "light",
+  name: "Nord Light",
+  type: "light",
+  colors: {
+    background: "236 239 244",
+    foreground: "46 52 64",
+    red: "191 97 106", redBright: "170 75 85",
+    orange: "208 135 112", orangeBright: "185 110 88",
+    green: "163 190 140", greenBright: "135 162 110",
+    yellow: "235 203 139", yellowBright: "200 170 100",
+    blue: "94 129 172", blueBright: "75 108 150",
+    purple: "180 142 173", purpleBright: "155 115 148",
+    aqua: "143 188 187", aquaBright: "110 160 162",
+    surface: "229 233 240",
+  },
+  canvasPalette: [[191,97,106],[163,190,140],[235,203,139],[94,129,172],[180,142,173],[143,188,187]],
+};
+
+export const nord: ThemeFamily = {
+  id: "nord",
+  name: "Nord",
+  themes: [dark, light],
+  default: "nord-dark",
+};
--- a/src/lib/themes/families/onedark.ts
+++ b/src/lib/themes/families/onedark.ts
@@ -0,0 +1,52 @@
+import type { Theme, ThemeFamily } from "../types";
+
+// One Dark / One Light — the Atom editor classics.
+
+const dark: Theme = {
+  id: "onedark-dark",
+  family: "onedark",
+  label: "dark",
+  name: "One Dark",
+  type: "dark",
+  colors: {
+    background: "40 44 52",
+    foreground: "171 178 191",
+    red: "224 108 117", redBright: "240 140 148",
+    orange: "209 154 102", orangeBright: "228 180 135",
+    green: "152 195 121", greenBright: "180 215 155",
+    yellow: "229 192 123", yellowBright: "240 212 162",
+    blue: "97 175 239", blueBright: "135 198 245",
+    purple: "198 120 221", purpleBright: "218 158 238",
+    aqua: "86 182 194", aquaBright: "120 202 212",
+    surface: "62 68 81",
+  },
+  canvasPalette: [[224,108,117],[152,195,121],[229,192,123],[97,175,239],[198,120,221],[86,182,194]],
+};
+
+const light: Theme = {
+  id: "onedark-light",
+  family: "onedark",
+  label: "light",
+  name: "One Light",
+  type: "light",
+  colors: {
+    background: "250 250 250",
+    foreground: "56 58 66",
+    red: "228 86 73", redBright: "240 115 100",
+    orange: "152 104 1", orangeBright: "180 130 30",
+    green: "80 161 79", greenBright: "105 185 104",
+    yellow: "193 132 1", yellowBright: "215 160 35",
+    blue: "64 120 242", blueBright: "100 148 248",
+    purple: "166 38 164", purpleBright: "192 75 190",
+    aqua: "1 132 188", aquaBright: "40 162 210",
+    surface: "229 229 230",
+  },
+  canvasPalette: [[228,86,73],[80,161,79],[193,132,1],[64,120,242],[166,38,164],[1,132,188]],
+};
+
+export const onedark: ThemeFamily = {
+  id: "onedark",
+  name: "One Dark",
+  themes: [dark, light],
+  default: "onedark-dark",
+};
--- a/src/lib/themes/families/rosepine.ts
+++ b/src/lib/themes/families/rosepine.ts
@@ -0,0 +1,74 @@
+import type { Theme, ThemeFamily } from "../types";
+
+// Rosé Pine — soft muted palette inspired by the natural world.
+// Only 6 accent hues; aqua is derived between pine and foam.
+
+const main: Theme = {
+  id: "rosepine-main",
+  family: "rosepine",
+  label: "main",
+  name: "Rosé Pine",
+  type: "dark",
+  colors: {
+    background: "25 23 36",
+    foreground: "224 222 244",
+    red: "235 111 146", redBright: "241 145 174",
+    orange: "235 188 186", orangeBright: "240 208 206",
+    green: "49 116 143", greenBright: "78 140 165",
+    yellow: "246 193 119", yellowBright: "249 212 160",
+    blue: "156 207 216", blueBright: "180 222 229",
+    purple: "196 167 231", purpleBright: "214 190 239",
+    aqua: "100 170 185", aquaBright: "135 192 205",
+    surface: "38 35 58",
+  },
+  canvasPalette: [[235,111,146],[49,116,143],[246,193,119],[156,207,216],[196,167,231],[235,188,186]],
+};
+
+const moon: Theme = {
+  id: "rosepine-moon",
+  family: "rosepine",
+  label: "moon",
+  name: "Rosé Pine Moon",
+  type: "dark",
+  colors: {
+    background: "35 33 54",
+    foreground: "224 222 244",
+    red: "235 111 146", redBright: "241 145 174",
+    orange: "234 154 151", orangeBright: "241 186 184",
+    green: "62 143 176", greenBright: "90 165 195",
+    yellow: "246 193 119", yellowBright: "249 212 160",
+    blue: "156 207 216", blueBright: "180 222 229",
+    purple: "196 167 231", purpleBright: "214 190 239",
+    aqua: "110 178 196", aquaBright: "140 196 210",
+    surface: "57 53 82",
+  },
+  canvasPalette: [[235,111,146],[62,143,176],[246,193,119],[156,207,216],[196,167,231],[234,154,151]],
+};
+
+const dawn: Theme = {
+  id: "rosepine-dawn",
+  family: "rosepine",
+  label: "dawn",
+  name: "Rosé Pine Dawn",
+  type: "light",
+  colors: {
+    background: "250 244 237",
+    foreground: "87 82 121",
+    red: "180 99 122", redBright: "200 120 142",
+    orange: "215 130 126", orangeBright: "230 155 152",
+    green: "40 105 131", greenBright: "60 125 150",
+    yellow: "234 157 52", yellowBright: "242 180 85",
+    blue: "86 148 159", blueBright: "110 168 178",
+    purple: "144 122 169", purpleBright: "168 148 188",
+    aqua: "62 128 146", aquaBright: "85 150 165",
+    surface: "242 233 225",
+  },
+  canvasPalette: [[180,99,122],[40,105,131],[234,157,52],[86,148,159],[144,122,169],[215,130,126]],
+};
+
+export const rosepine: ThemeFamily = {
+  id: "rosepine",
+  name: "Rosé Pine",
+  themes: [main, moon, dawn],
+  default: "rosepine-main",
+};
--- a/src/lib/themes/families/solarized.ts
+++ b/src/lib/themes/families/solarized.ts
@@ -0,0 +1,55 @@
+import type { Theme, ThemeFamily } from "../types";
+
+// Solarized — Ethan Schoonover's precision-engineered color scheme.
+// Same accent colors in both dark and light — that's the whole point.
+
+const accents = {
+  red: "220 50 47", redBright: "238 85 80",
+  orange: "203 75 22", orangeBright: "225 110 60",
+  yellow: "181 137 0", yellowBright: "210 168 40",
+  green: "133 153 0", greenBright: "165 185 35",
+  blue: "38 139 210", blueBright: "75 165 228",
+  purple: "108 113 196", purpleBright: "140 145 215",
+  aqua: "42 161 152", aquaBright: "80 190 182",
+} as const;
+
+const palette: [number, number, number][] = [
+  [220,50,47],[133,153,0],[181,137,0],[38,139,210],[108,113,196],[42,161,152],
+];
+
+const dark: Theme = {
+  id: "solarized-dark",
+  family: "solarized",
+  label: "dark",
+  name: "Solarized Dark",
+  type: "dark",
+  colors: {
+    background: "0 43 54",
+    foreground: "131 148 150",
+    ...accents,
+    surface: "7 54 66",
+  },
+  canvasPalette: palette,
+};
+
+const light: Theme = {
+  id: "solarized-light",
+  family: "solarized",
+  label: "light",
+  name: "Solarized Light",
+  type: "light",
+  colors: {
+    background: "253 246 227",
+    foreground: "101 123 131",
+    ...accents,
+    surface: "238 232 213",
+  },
+  canvasPalette: palette,
+};
+
+export const solarized: ThemeFamily = {
+  id: "solarized",
+  name: "Solarized",
+  themes: [dark, light],
+  default: "solarized-dark",
+};
--- a/src/lib/themes/families/tokyonight.ts
+++ b/src/lib/themes/families/tokyonight.ts
@@ -0,0 +1,74 @@
+import type { Theme, ThemeFamily } from "../types";
+
+// Tokyo Night — modern, popular blue/purple-toned palette.
+// Three variants: Night (deep), Storm (slightly lighter), Day (light).
+
+const night: Theme = {
+  id: "tokyonight-night",
+  family: "tokyonight",
+  label: "night",
+  name: "Tokyo Night",
+  type: "dark",
+  colors: {
+    background: "26 27 38",
+    foreground: "169 177 214",
+    red: "247 118 142", redBright: "250 150 170",
+    orange: "255 158 100", orangeBright: "255 185 140",
+    green: "158 206 106", greenBright: "185 222 140",
+    yellow: "224 175 104", yellowBright: "238 200 140",
+    blue: "122 162 247", blueBright: "155 185 250",
+    purple: "187 154 247", purpleBright: "208 180 250",
+    aqua: "125 207 255", aquaBright: "165 222 255",
+    surface: "41 46 66",
+  },
+  canvasPalette: [[247,118,142],[158,206,106],[224,175,104],[122,162,247],[187,154,247],[125,207,255]],
+};
+
+const storm: Theme = {
+  id: "tokyonight-storm",
+  family: "tokyonight",
+  label: "storm",
+  name: "Tokyo Night Storm",
+  type: "dark",
+  colors: {
+    background: "36 40 59",
+    foreground: "169 177 214",
+    red: "247 118 142", redBright: "250 150 170",
+    orange: "255 158 100", orangeBright: "255 185 140",
+    green: "158 206 106", greenBright: "185 222 140",
+    yellow: "224 175 104", yellowBright: "238 200 140",
+    blue: "122 162 247", blueBright: "155 185 250",
+    purple: "187 154 247", purpleBright: "208 180 250",
+    aqua: "125 207 255", aquaBright: "165 222 255",
+    surface: "59 66 97",
+  },
+  canvasPalette: [[247,118,142],[158,206,106],[224,175,104],[122,162,247],[187,154,247],[125,207,255]],
+};
+
+const day: Theme = {
+  id: "tokyonight-day",
+  family: "tokyonight",
+  label: "day",
+  name: "Tokyo Night Day",
+  type: "light",
+  colors: {
+    background: "225 226 231",
+    foreground: "55 96 191",
+    red: "245 42 101", redBright: "248 80 130",
+    orange: "177 92 0", orangeBright: "200 120 30",
+    green: "88 117 57", greenBright: "110 140 78",
+    yellow: "140 108 62", yellowBright: "165 135 85",
+    blue: "46 125 233", blueBright: "80 150 240",
+    purple: "152 84 241", purpleBright: "175 115 245",
+    aqua: "0 113 151", aquaBright: "30 140 175",
+    surface: "196 200 218",
+  },
+  canvasPalette: [[245,42,101],[88,117,57],[140,108,62],[46,125,233],[152,84,241],[0,113,151]],
+};
+
+export const tokyonight: ThemeFamily = {
+  id: "tokyonight",
+  name: "Tokyo Night",
+  themes: [night, storm, day],
+  default: "tokyonight-night",
+};
--- a/src/lib/themes/index.ts
+++ b/src/lib/themes/index.ts
@@ -1,58 +1,38 @@
-import type { Theme } from "./types";
+import type { Theme, ThemeFamily } from "./types";
+import { darkbox } from "./families/darkbox";
+import { gruvbox } from "./families/gruvbox";
+import { everforest } from "./families/everforest";
+import { catppuccin } from "./families/catppuccin";
+import { rosepine } from "./families/rosepine";
+import { kanagawa } from "./families/kanagawa";
+import { nord } from "./families/nord";
+import { tokyonight } from "./families/tokyonight";
+import { solarized } from "./families/solarized";
+import { onedark } from "./families/onedark";
+import { monokai } from "./families/monokai";
+import { github } from "./families/github";

 export const DEFAULT_THEME_ID = "darkbox-retro";

-function theme(
-  id: string,
-  name: string,
-  type: "dark" | "light",
-  colors: Theme["colors"],
-  palette: [number, number, number][]
-): Theme {
-  return { id, name, type, colors, canvasPalette: palette };
+export const FAMILIES: ThemeFamily[] = [
+  darkbox,
+  gruvbox,
+  everforest,
+  catppuccin,
+  rosepine,
+  kanagawa,
+  nord,
+  tokyonight,
+  solarized,
+  onedark,
+  monokai,
+  github,
+];
+
+// Flat lookup — backward compatible with all existing consumers
+export const THEMES: Record<string, Theme> = {};
+for (const family of FAMILIES) {
+  for (const theme of family.themes) {
+    THEMES[theme.id] = theme;
+  }
 }
-
-// Three darkbox variants from darkbox.nvim
-// Classic (vivid) → Retro (muted) → Dim (deep)
-// Each variant's "bright" is the next level up's base.
-
-export const THEMES: Record<string, Theme> = {
-  darkbox: theme("darkbox", "Darkbox Classic", "dark", {
-    background: "0 0 0",
-    foreground: "235 219 178",
-    red: "251 73 52", redBright: "255 110 85",
-    orange: "254 128 25", orangeBright: "255 165 65",
-    green: "184 187 38", greenBright: "210 215 70",
-    yellow: "250 189 47", yellowBright: "255 215 85",
-    blue: "131 165 152", blueBright: "165 195 180",
-    purple: "211 134 155", purpleBright: "235 165 180",
-    aqua: "142 192 124", aquaBright: "175 220 160",
-    surface: "60 56 54",
-  }, [[251,73,52],[184,187,38],[250,189,47],[131,165,152],[211,134,155],[142,192,124]]),
-
-  "darkbox-retro": theme("darkbox-retro", "Darkbox Retro", "dark", {
-    background: "0 0 0",
-    foreground: "189 174 147",
-    red: "204 36 29", redBright: "251 73 52",
-    orange: "214 93 14", orangeBright: "254 128 25",
-    green: "152 151 26", greenBright: "184 187 38",
-    yellow: "215 153 33", yellowBright: "250 189 47",
-    blue: "69 133 136", blueBright: "131 165 152",
-    purple: "177 98 134", purpleBright: "211 134 155",
-    aqua: "104 157 106", aquaBright: "142 192 124",
-    surface: "60 56 54",
-  }, [[204,36,29],[152,151,26],[215,153,33],[69,133,136],[177,98,134],[104,157,106]]),
-
-  "darkbox-dim": theme("darkbox-dim", "Darkbox Dim", "dark", {
-    background: "0 0 0",
-    foreground: "168 153 132",
-    red: "157 0 6", redBright: "204 36 29",
-    orange: "175 58 3", orangeBright: "214 93 14",
-    green: "121 116 14", greenBright: "152 151 26",
-    yellow: "181 118 20", yellowBright: "215 153 33",
-    blue: "7 102 120", blueBright: "69 133 136",
-    purple: "143 63 113", purpleBright: "177 98 134",
-    aqua: "66 123 88", aquaBright: "104 157 106",
-    surface: "60 56 54",
-  }, [[157,0,6],[121,116,14],[181,118,20],[7,102,120],[143,63,113],[66,123,88]]),
-};
--- a/src/lib/themes/types.ts
+++ b/src/lib/themes/types.ts
@@ -20,8 +20,17 @@ export interface ThemeColors {

 export interface Theme {
  id: string;
+  family: string;
+  label: string;
  name: string;
  type: "dark" | "light";
  colors: ThemeColors;
  canvasPalette: [number, number, number][];
 }
+
+export interface ThemeFamily {
+  id: string;
+  name: string;
+  themes: Theme[];
+  default: string;
+}
--- a/src/lib/views.ts
+++ b/src/lib/views.ts
@@ -0,0 +1,55 @@
+import Redis from "ioredis";
+
+let redis: Redis | null = null;
+
+function getRedis(): Redis | null {
+  if (redis) return redis;
+
+  const url = import.meta.env.REDIS_URL || process.env.REDIS_URL;
+  if (!url) return null;
+
+  redis = new Redis(url);
+  return redis;
+}
+
+export async function incrementViews(slug: string): Promise<number> {
+  const r = getRedis();
+  if (!r) return 0;
+
+  try {
+    return await r.incr(`views:${slug}`);
+  } catch {
+    return 0;
+  }
+}
+
+export async function getViews(slug: string): Promise<number> {
+  const r = getRedis();
+  if (!r) return 0;
+
+  try {
+    const val = await r.get(`views:${slug}`);
+    return val ? parseInt(val, 10) : 0;
+  } catch {
+    return 0;
+  }
+}
+
+export async function getAllViews(slugs: string[]): Promise<Record<string, number>> {
+  const r = getRedis();
+  const result: Record<string, number> = {};
+
+  if (!r || slugs.length === 0) return result;
+
+  try {
+    const keys = slugs.map(s => `views:${s}`);
+    const values = await r.mget(...keys);
+    for (let i = 0; i < slugs.length; i++) {
+      result[slugs[i]] = values[i] ? parseInt(values[i], 10) : 0;
+    }
+  } catch {
+    // Return empty counts if Redis unavailable
+  }
+
+  return result;
+}
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -17,23 +17,23 @@ import OutsideCoding from "@/components/about/outside-coding";
      <Intro client:load />
    </section>

-    <section class="min-h-[60vh] flex items-center justify-center py-16">
+    <section class="min-h-[40vh] md:min-h-[60vh] flex items-center justify-center py-8 md:py-16">
      <AllTimeStats client:load />
    </section>

-    <section class="min-h-screen flex items-center justify-center py-16">
+    <section class="min-h-[60vh] md:min-h-screen flex items-center justify-center py-8 md:py-16">
      <DetailedStats client:load />
    </section>

-    <section class="min-h-[80vh] flex items-center justify-center py-16">
+    <section class="min-h-[50vh] md:min-h-[80vh] flex items-center justify-center py-8 md:py-16">
      <Timeline client:load />
    </section>

-    <section class="min-h-[80vh] flex items-center justify-center py-16">
+    <section class="min-h-[50vh] md:min-h-[80vh] flex items-center justify-center py-8 md:py-16">
      <CurrentFocus client:load />
    </section>

-    <section class="min-h-[50vh] flex items-center justify-center py-16">
+    <section class="min-h-[30vh] md:min-h-[50vh] flex items-center justify-center py-8 md:py-16">
      <OutsideCoding client:load />
    </section>
  </div>
--- a/src/pages/api/giscus-theme.ts
+++ b/src/pages/api/giscus-theme.ts
@@ -0,0 +1,276 @@
+import type { APIRoute } from "astro";
+import { THEMES, DEFAULT_THEME_ID } from "@/lib/themes";
+
+function rgbToHex(rgb: string): string {
+  return "#" + rgb.split(" ").map(n => parseInt(n).toString(16).padStart(2, "0")).join("");
+}
+
+function rgbToRgba(rgb: string, alpha: number): string {
+  return `rgba(${rgb.replaceAll(" ", ", ")}, ${alpha})`;
+}
+
+export const GET: APIRoute = ({ url }) => {
+  const themeId = url.searchParams.get("theme") || DEFAULT_THEME_ID;
+  const theme = THEMES[themeId];
+  if (!theme) {
+    return new Response("Unknown theme", { status: 404 });
+  }
+
+  const c = theme.colors;
+  const isLight = theme.type === "light";
+  const fg = rgbToHex(c.foreground);
+  const fgMuted = rgbToRgba(c.foreground, 0.6);
+  const fgSubtle = rgbToRgba(c.foreground, 0.4);
+  const blue = rgbToHex(c.blue);
+  const blueBright = rgbToHex(c.blueBright);
+  const green = rgbToHex(c.green);
+  const yellow = rgbToHex(c.yellow);
+  const red = rgbToHex(c.red);
+  const purple = rgbToHex(c.purple);
+  const orange = rgbToHex(c.orange);
+  const surface = rgbToHex(c.surface);
+  const surfaceAlpha = rgbToRgba(c.surface, 0.3);
+  const surfaceBorder = rgbToRgba(c.surface, 0.5);
+  const surfaceHover = rgbToRgba(c.surface, 0.6);
+  const bgTransparent = isLight ? rgbToRgba(c.foreground, 0.06) : rgbToRgba(c.foreground, 0.08);
+  const bgSubtle = isLight ? rgbToRgba(c.foreground, 0.04) : rgbToRgba(c.foreground, 0.05);
+
+  const css = `
+main {
+  --color-prettylights-syntax-comment: ${fgSubtle};
+  --color-prettylights-syntax-constant: ${blueBright};
+  --color-prettylights-syntax-entity: ${purple};
+  --color-prettylights-syntax-storage-modifier-import: ${fg};
+  --color-prettylights-syntax-entity-tag: ${green};
+  --color-prettylights-syntax-keyword: ${red};
+  --color-prettylights-syntax-string: ${blueBright};
+  --color-prettylights-syntax-variable: ${orange};
+  --color-prettylights-syntax-brackethighlighter-unmatched: ${red};
+  --color-prettylights-syntax-invalid-illegal-text: ${fg};
+  --color-prettylights-syntax-invalid-illegal-bg: ${red};
+  --color-prettylights-syntax-carriage-return-text: ${fg};
+  --color-prettylights-syntax-carriage-return-bg: ${red};
+  --color-prettylights-syntax-string-regexp: ${green};
+  --color-prettylights-syntax-markup-list: ${yellow};
+  --color-prettylights-syntax-markup-heading: ${blueBright};
+  --color-prettylights-syntax-markup-italic: ${fg};
+  --color-prettylights-syntax-markup-bold: ${orange};
+  --color-prettylights-syntax-markup-deleted-text: ${red};
+  --color-prettylights-syntax-markup-deleted-bg: transparent;
+  --color-prettylights-syntax-markup-inserted-text: ${green};
+  --color-prettylights-syntax-markup-inserted-bg: transparent;
+  --color-prettylights-syntax-markup-changed-text: ${yellow};
+  --color-prettylights-syntax-markup-changed-bg: transparent;
+  --color-prettylights-syntax-markup-ignored-text: ${fg};
+  --color-prettylights-syntax-markup-ignored-bg: transparent;
+  --color-prettylights-syntax-meta-diff-range: ${purple};
+  --color-prettylights-syntax-brackethighlighter-angle: ${fgSubtle};
+  --color-prettylights-syntax-sublimelinter-gutter-mark: ${fgSubtle};
+  --color-prettylights-syntax-constant-other-reference-link: ${blueBright};
+
+  --color-btn-text: ${fg};
+  --color-btn-bg: ${bgTransparent};
+  --color-btn-border: ${surfaceBorder};
+  --color-btn-shadow: 0 0 transparent;
+  --color-btn-inset-shadow: 0 0 transparent;
+  --color-btn-hover-bg: ${surfaceAlpha};
+  --color-btn-hover-border: ${surfaceHover};
+  --color-btn-active-bg: ${bgSubtle};
+  --color-btn-active-border: ${surfaceHover};
+  --color-btn-selected-bg: ${bgTransparent};
+
+  --color-btn-primary-text: ${fg};
+  --color-btn-primary-bg: ${blue};
+  --color-btn-primary-border: transparent;
+  --color-btn-primary-shadow: 0 0 transparent;
+  --color-btn-primary-inset-shadow: 0 0 transparent;
+  --color-btn-primary-hover-bg: ${blueBright};
+  --color-btn-primary-hover-border: transparent;
+  --color-btn-primary-selected-bg: ${blue};
+  --color-btn-primary-selected-shadow: 0 0 transparent;
+  --color-btn-primary-disabled-text: ${fgMuted};
+  --color-btn-primary-disabled-bg: ${rgbToRgba(c.blue, 0.6)};
+  --color-btn-primary-disabled-border: transparent;
+
+  --color-action-list-item-default-hover-bg: ${surfaceAlpha};
+  --color-segmented-control-bg: ${surfaceAlpha};
+  --color-segmented-control-button-bg: ${bgTransparent};
+  --color-segmented-control-button-selected-border: ${surfaceBorder};
+
+  --color-fg-default: ${fg};
+  --color-fg-muted: ${fgMuted};
+  --color-fg-subtle: ${fgSubtle};
+
+  --color-canvas-default: transparent;
+  --color-canvas-overlay: ${bgTransparent};
+  --color-canvas-inset: ${bgSubtle};
+  --color-canvas-subtle: ${bgSubtle};
+
+  --color-border-default: ${surfaceBorder};
+  --color-border-muted: ${surfaceAlpha};
+  --color-neutral-muted: ${rgbToRgba(c.surface, 0.25)};
+
+  --color-accent-fg: ${blueBright};
+  --color-accent-emphasis: ${blue};
+  --color-accent-muted: ${rgbToRgba(c.blue, 0.4)};
+  --color-accent-subtle: ${rgbToRgba(c.blue, 0.1)};
+
+  --color-success-fg: ${green};
+  --color-attention-fg: ${yellow};
+  --color-attention-muted: ${rgbToRgba(c.yellow, 0.4)};
+  --color-attention-subtle: ${rgbToRgba(c.yellow, 0.15)};
+  --color-danger-fg: ${red};
+  --color-danger-muted: ${rgbToRgba(c.red, 0.4)};
+  --color-danger-subtle: ${rgbToRgba(c.red, 0.1)};
+
+  --color-primer-shadow-inset: 0 0 transparent;
+  --color-scale-gray-7: ${surface};
+  --color-scale-blue-8: ${blue};
+  --color-social-reaction-bg-hover: ${surfaceAlpha};
+  --color-social-reaction-bg-reacted-hover: ${rgbToRgba(c.blue, 0.3)};
+}
+
+main .pagination-loader-container {
+  background-image: url(https://github.com/images/modules/pulls/progressive-disclosure-line${isLight ? "" : "-dark"}.svg);
+}
+
+.gsc-reactions-count { display: none; }
+.gsc-timeline { flex-direction: column-reverse; }
+
+.gsc-header {
+  padding-bottom: 1rem;
+  font-family: "Comic Code", monospace;
+  border-bottom: none;
+}
+
+.gsc-comments > .gsc-header { order: 1; }
+.gsc-comments > .gsc-comment-box {
+  margin-bottom: 1rem;
+  order: 2;
+  font-family: "Comic Code", monospace;
+  background-color: ${bgTransparent};
+  border-radius: 0.5rem;
+  border: 1px solid ${surfaceBorder};
+}
+.gsc-comments > .gsc-timeline { order: 3; }
+.gsc-homepage-bg { background-color: transparent; }
+
+main .gsc-loading-image {
+  background-image: url(https://github.githubassets.com/images/mona-loading-${isLight ? "default" : "dimmed"}.gif);
+}
+
+.gsc-comment {
+  border: 1px solid ${surfaceBorder};
+  border-radius: 0.5rem;
+  margin-bottom: 1rem;
+  background-color: ${bgTransparent};
+  transition: border-color 0.2s ease;
+}
+
+.gsc-comment-header {
+  background-color: ${bgSubtle};
+  padding: 0.75rem;
+  border-bottom: 1px solid ${rgbToRgba(c.surface, 0.2)};
+  font-family: "Comic Code", monospace;
+}
+
+.gsc-comment-content {
+  padding: 1rem;
+  font-family: "Comic Code", monospace;
+}
+
+.gsc-comment-author { color: var(--color-fg-default); font-weight: 600; }
+.gsc-comment-author-avatar img { border-radius: 50%; }
+.gsc-comment-reactions { border-top: none; padding-top: 0.5rem; }
+
+.gsc-reply-box {
+  background-color: ${bgTransparent};
+  border-radius: 0.5rem;
+  margin-top: 0.5rem;
+  margin-left: 1rem;
+  font-family: "Comic Code", monospace;
+  border: 1px solid ${rgbToRgba(c.surface, 0.25)};
+}
+
+.gsc-comment-box-textarea {
+  background-color: ${bgSubtle};
+  border: 1px solid ${surfaceBorder};
+  border-radius: 0.5rem;
+  color: var(--color-fg-default);
+  font-family: "Comic Code", monospace;
+  padding: 0.75rem;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.gsc-comment-box-textarea:focus {
+  border-color: ${blueBright};
+  box-shadow: 0 0 0 2px ${rgbToRgba(c.blue, 0.2)};
+  outline: none;
+}
+
+.gsc-comment-box-buttons button {
+  font-family: "Comic Code", monospace;
+  border-radius: 0.5rem;
+  transition: background-color 0.2s ease, border-color 0.2s ease;
+}
+
+.gsc-comment pre {
+  background-color: ${bgSubtle};
+  border-radius: 0.5rem;
+  padding: 1rem;
+  overflow-x: auto;
+  border: 1px solid ${rgbToRgba(c.surface, 0.25)};
+}
+
+.gsc-comment code {
+  font-family: "Comic Code", monospace;
+  background-color: ${bgSubtle};
+  color: ${purple};
+  padding: 0.2em 0.4em;
+  border-radius: 0.25rem;
+}
+
+.gsc-comment:hover { border-color: ${surfaceHover}; }
+.gsc-social-reaction-summary-item:hover { background-color: ${surfaceAlpha}; }
+
+.gsc-timeline::-webkit-scrollbar { width: 8px; height: 8px; }
+.gsc-timeline::-webkit-scrollbar-track { background: transparent; border-radius: 4px; }
+.gsc-timeline::-webkit-scrollbar-thumb { background: ${surfaceBorder}; border-radius: 4px; }
+.gsc-timeline::-webkit-scrollbar-thumb:hover { background: ${surface}; }
+
+.gsc-comment-footer, .gsc-comment-footer-separator,
+.gsc-reactions-button, .gsc-social-reaction-summary-item:not(:hover) { border: none; }
+
+.gsc-upvote svg { fill: ${blueBright}; }
+.gsc-downvote svg { fill: ${red}; }
+
+.gsc-comment-box, .gsc-comment, .gsc-comment-reactions, button, .gsc-reply-box {
+  transition: all 0.2s ease-in-out;
+}
+
+.gsc-main { border: none !important; }
+.gsc-left-header { background-color: transparent !important; }
+.gsc-right-header { background-color: transparent !important; }
+.gsc-header-status { background-color: transparent !important; }
+
+.gsc-comment-box, .gsc-comment-box-md-toolbar, .gsc-comment-box-buttons { border: none !important; }
+.gsc-comment-box-md-toolbar-item { color: ${blueBright} !important; }
+
+.gsc-comment-box-md-toolbar {
+  background-color: ${bgSubtle} !important;
+  padding: 0.5rem !important;
+}
+
+.gsc-comments .gsc-powered-by { display: none !important; }
+.gsc-comments footer { display: none !important; }
+.gsc-comments .gsc-powered-by a { visibility: hidden !important; }
+`;
+
+  return new Response(css, {
+    headers: {
+      "Content-Type": "text/css",
+      "Cache-Control": "public, max-age=3600",
+      "Access-Control-Allow-Origin": "*",
+    },
+  });
+};
--- a/src/pages/api/github.ts
+++ b/src/pages/api/github.ts
@@ -0,0 +1,96 @@
+import type { APIRoute } from "astro";
+
+const GITHUB_USER = "timmypidashev";
+
+export const GET: APIRoute = async () => {
+  const token = import.meta.env.GITHUB_TOKEN;
+  const headers: Record<string, string> = {
+    Accept: "application/json",
+    "User-Agent": "timmypidashev-web",
+  };
+  if (token) {
+    headers.Authorization = `Bearer ${token}`;
+  }
+
+  let status: { message: string } | null = null;
+  let commit: { message: string; repo: string; date: string; url: string } | null = null;
+  let tinkering: { repo: string; url: string } | null = null;
+
+  // Fetch user status via GraphQL (requires token)
+  if (token) {
+    try {
+      const res = await fetch("https://api.github.com/graphql", {
+        method: "POST",
+        headers: { ...headers, "Content-Type": "application/json" },
+        body: JSON.stringify({
+          query: `{ user(login: "${GITHUB_USER}") { status { message } } }`,
+        }),
+      });
+      const data = await res.json();
+      const s = data?.data?.user?.status;
+      if (s?.message) {
+        status = { message: s.message };
+      }
+    } catch {
+      // Status unavailable — skip
+    }
+  }
+
+  // Fetch latest public push event, then fetch commit details
+  try {
+    const eventsRes = await fetch(
+      `https://api.github.com/users/${GITHUB_USER}/events/public?per_page=30`,
+      { headers },
+    );
+    const events = await eventsRes.json();
+    // Find most active repo from recent push events
+    if (Array.isArray(events)) {
+      const repoCounts: Record<string, number> = {};
+      for (const e of events) {
+        if (e.type === "PushEvent") {
+          const name = e.repo.name.replace(`${GITHUB_USER}/`, "");
+          repoCounts[name] = (repoCounts[name] || 0) + 1;
+        }
+      }
+      const topRepo = Object.entries(repoCounts).sort((a, b) => b[1] - a[1])[0];
+      if (topRepo) {
+        tinkering = {
+          repo: topRepo[0],
+          url: `https://github.com/${GITHUB_USER}/${topRepo[0]}`,
+        };
+      }
+    }
+
+    const push = Array.isArray(events)
+      ? events.find((e: any) => e.type === "PushEvent")
+      : null;
+    if (push) {
+      const repo = push.repo.name.replace(`${GITHUB_USER}/`, "");
+      const sha = push.payload?.head;
+      if (sha) {
+        const commitRes = await fetch(
+          `https://api.github.com/repos/${GITHUB_USER}/${repo}/commits/${sha}`,
+          { headers },
+        );
+        const commitData = await commitRes.json();
+        if (commitData?.commit?.message) {
+          commit = {
+            message: commitData.commit.message.split("\n")[0],
+            repo,
+            date: push.created_at,
+            url: commitData.html_url,
+          };
+        }
+      }
+    }
+  } catch {
+    // Commit unavailable — skip
+  }
+
+  return new Response(JSON.stringify({ status, commit, tinkering }), {
+    headers: {
+      "Content-Type": "application/json",
+      "Cache-Control": "public, max-age=300",
+    },
+  });
+};
--- a/src/pages/blog/[...slug].astro
+++ b/src/pages/blog/[...slug].astro
@@ -5,6 +5,8 @@ import ContentLayout from "@/layouts/content.astro";
 import { getArticleSchema } from "@/lib/structuredData";
 import { blogWebsite } from "@/lib/structuredData";
 import { Comments } from "@/components/blog/comments";
+import { StreamContent } from "@/components/stream-content";
+import { incrementViews, getViews } from "@/lib/views";

 // This is a dynamic route in SSR mode
 const { slug } = Astro.params;
@@ -20,6 +22,14 @@ if (!post || (!import.meta.env.DEV && post.data.isDraft === true)) {
  });
 }

+// Track page view and get count
+let views = 0;
+if (!import.meta.env.DEV) {
+  views = await incrementViews(post.id);
+} else {
+  views = await getViews(post.id);
+}
+
 // Dynamically render the content
 const { Content } = await render(post);

@@ -84,20 +94,28 @@ const jsonLd = {
        <time dateTime={post.data.date instanceof Date ? post.data.date.toISOString() : post.data.date} class="text-blue">
          {formattedDate}
        </time>
+        {views > 0 && (
+          <>
+            <span class="text-foreground/50">•</span>
+            <span class="text-green">{views.toLocaleString()} view{views !== 1 ? "s" : ""}</span>
+          </>
+        )}
      </div>
      <div class="flex flex-wrap gap-2 mt-2">
        {post.data.tags.map((tag) => (
          <span
            class="text-xs md:text-base text-aqua hover:text-aqua-bright transition-colors duration-200"
-            onclick={`window.location.href='/blog/tag/${tag}'`}
+            onclick={`window.location.href='/blog/tags/${encodeURIComponent(tag)}'`}
          >
            #{tag}
          </span>
        ))}
      </div>
-      <div class="prose prose-invert prose-lg max-w-none">
-        <Content />
-      </div>
+      <StreamContent client:load>
+        <div class="prose prose-invert prose-lg max-w-none">
+          <Content />
+        </div>
+      </StreamContent>
    </article>
    <Comments client:idle />
  </div>
--- a/src/pages/blog/popular/index.astro
+++ b/src/pages/blog/popular/index.astro
@@ -0,0 +1,32 @@
+---
+import { getCollection } from "astro:content";
+import ContentLayout from "@/layouts/content.astro";
+import { BlogHeader } from "@/components/blog/header";
+import { BlogPostList } from "@/components/blog/post-list";
+import { getAllViews } from "@/lib/views";
+
+const posts = (await getCollection("blog", ({ data }) => {
+  return import.meta.env.DEV || data.isDraft !== true;
+})).map(post => ({
+  ...post,
+  data: {
+    ...post.data,
+    date: post.data.date.toLocaleDateString("en-US", {
+      year: "numeric",
+      month: "long",
+      day: "numeric"
+    })
+  }
+}));
+
+// Get view counts and sort by popularity
+const views = await getAllViews(posts.map(p => p.id));
+const sorted = [...posts].sort((a, b) => (views[b.id] || 0) - (views[a.id] || 0));
+---
+<ContentLayout
+  title="Most Popular | Blog | Timothy Pidashev"
+  description="Most popular blog posts by view count."
+>
+  <BlogHeader client:load />
+  <BlogPostList posts={sorted} client:load />
+</ContentLayout>
--- a/src/pages/blog/tags/[...slug].astro
+++ b/src/pages/blog/tags/[...slug].astro
@@ -0,0 +1,38 @@
+---
+import { getCollection } from "astro:content";
+import ContentLayout from "@/layouts/content.astro";
+import TaggedPosts from "@/components/blog/tagged-posts";
+
+const { slug } = Astro.params;
+const tag = decodeURIComponent(slug || "");
+
+if (!tag) {
+  return Astro.redirect("/blog/tags");
+}
+
+const filteredPosts = (await getCollection("blog", ({ data }) => {
+  return (import.meta.env.DEV || data.isDraft !== true) && data.tags.includes(tag);
+})).sort((a, b) => {
+  return b.data.date.valueOf() - a.data.date.valueOf();
+}).map(post => ({
+  ...post,
+  data: {
+    ...post.data,
+    date: post.data.date.toLocaleDateString("en-US", {
+      year: "numeric",
+      month: "long",
+      day: "numeric"
+    })
+  }
+}));
+
+if (filteredPosts.length === 0) {
+  return Astro.redirect("/blog/tags");
+}
+---
+<ContentLayout
+  title={`#${tag} | Blog | Timothy Pidashev`}
+  description={`Blog posts tagged with "${tag}".`}
+>
+  <TaggedPosts tag={tag} posts={filteredPosts} client:load />
+</ContentLayout>
--- a/src/pages/blog/tags/index.astro
+++ b/src/pages/blog/tags/index.astro
@@ -1,7 +1,7 @@
 ---
 import { getCollection } from "astro:content";
 import ContentLayout from "@/layouts/content.astro";
-
+import { BlogHeader } from "@/components/blog/header";
 import TagList from "@/components/blog/tag-list";

 const posts = (await getCollection("blog", ({ data }) => {
@@ -21,8 +21,9 @@ const posts = (await getCollection("blog", ({ data }) => {
 }));
 ---
 <ContentLayout
-  title="Blog | Timothy Pidashev"
-  description="My experiences and technical insights into software development and the ever-evolving world of programming."
+  title="Browse Tags | Blog | Timothy Pidashev"
+  description="Browse blog posts by tag."
 >
-  <TagList posts={posts} />
+  <BlogHeader client:load />
+  <TagList posts={posts} client:load />
 </ContentLayout>
--- a/src/pages/projects/[...slug].astro
+++ b/src/pages/projects/[...slug].astro
@@ -5,6 +5,7 @@ import { getCollection, render } from "astro:content";

 import ContentLayout from "@/layouts/content.astro";
 import { Comments } from "@/components/blog/comments";
+import { StreamContent } from "@/components/stream-content";

 export async function getStaticPaths() {
  const projects = await getCollection("projects");
@@ -60,9 +61,11 @@ const { Content } = await render(project);
      </div>
    </header>

-    <div class="prose prose-invert prose-lg max-w-none">
-      <Content />
-    </div>
+    <StreamContent client:load>
+      <div class="prose prose-invert prose-lg max-w-none">
+        <Content />
+      </div>
+    </StreamContent>
  </article>
  <Comments client:idle />
 </ContentLayout>
--- a/src/style/globals.css
+++ b/src/style/globals.css
@@ -22,6 +22,10 @@
@tailwind components;
@tailwind utilities;

+.stream-hidden > .prose > * {
+  opacity: 0;
+}
+
 /* Chrome, Edge, and Safari */
 *::-webkit-scrollbar {
  display: none;
@@ -43,19 +47,19 @@
    to bottom,
    transparent 0px,
    transparent 2px,
-    rgba(0, 0, 0, 0.12) 2px,
-    rgba(0, 0, 0, 0.12) 4px
+    rgb(var(--color-foreground) / 0.06) 2px,
+    rgb(var(--color-foreground) / 0.06) 4px
  );
  animation: crt-scroll 12s linear infinite;
  z-index: 1;
 }

 .crt-bloom {
-  box-shadow: inset 0 0 100px 30px rgba(0, 0, 0, 0.3);
+  box-shadow: inset 0 0 100px 30px rgb(var(--color-background) / 0.3);
  background: radial-gradient(
    ellipse at center,
    transparent 50%,
-    rgba(0, 0, 0, 0.25) 100%
+    rgb(var(--color-background) / 0.25) 100%
  );
  z-index: 2;
 }
@@ -69,6 +73,14 @@
  }
 }

+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
 /* Regular */
@font-face {
    font-family: "ComicRegular";
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -1,6 +1,15 @@
 module.exports = {
  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
  theme: {
+    screens: {
+      sm: "640px",
+      md: "768px",
+      lg: "1024px",
+      xl: "1280px",
+      "2xl": "1536px",
+      // Desktop = wide screen + non-touch pointer. Used for mobile/desktop layout split.
+      desk: { raw: "(min-width: 1024px) and (hover: hover) and (pointer: fine)" },
+    },
    extend: {
      fontFamily: {
        "comic-code": ["Comic Code", "monospace"],
Author	SHA1	Message	Date
Timothy Pidashev	9b626faba8	Update hero section; part 1	2026-04-06 17:57:29 -07:00
Timothy Pidashev	153bd0cf39	Update comment themes; add github theme family	2026-04-06 16:32:15 -07:00
Timothy Pidashev	162032e3f3	Update theme families	2026-04-06 16:25:10 -07:00
Timothy Pidashev	237cacb612	Add more themes	2026-04-06 16:20:17 -07:00
Timothy Pidashev	f6e9e16227	Update mobile settings layout	2026-04-06 15:41:31 -07:00
Timothy Pidashev	db46f7d6ba	Rework mobile device detection	2026-04-06 15:35:46 -07:00
Timothy Pidashev	e640e87d3f	Add theme families	2026-04-06 15:27:40 -07:00
Timothy Pidashev	1cd76b03df	mobile optimizations	2026-04-06 14:46:49 -07:00
Timothy Pidashev	5ac736cad4	mobile optimizations	2026-04-06 14:42:08 -07:00
Timothy Pidashev	997106eb92	mobile optimizations	2026-04-06 14:40:03 -07:00
Timothy Pidashev	3f103c3e15	mobile optimizations	2026-04-06 14:37:07 -07:00
Timothy Pidashev	16f271c1c9	mobile optimizations	2026-04-06 14:33:30 -07:00
Timothy Pidashev	1a445548f2	mobile optimizations	2026-04-06 14:21:03 -07:00
Timothy Pidashev	dc7ca40b9b	mobile optimizations	2026-04-06 14:15:26 -07:00
Timothy Pidashev	14f9ef3ffd	mobile optimizations	2026-04-06 14:10:46 -07:00
Timothy Pidashev	336c652bf7	mobile optimizations	2026-04-06 13:57:15 -07:00
Timothy Pidashev	873090310a	mobile optimizations	2026-04-06 13:21:43 -07:00
Timothy Pidashev	c7762f099c	mobile optimizations	2026-04-06 13:19:38 -07:00
Timothy Pidashev	c2407408fa	Mobile optimizations	2026-04-06 13:08:41 -07:00
Timothy Pidashev	bab4a516be	trigger redeploy	2026-03-31 14:19:10 -07:00
Timothy Pidashev	adc1f21204	Update blog metrics; add vercel imsights	2026-03-31 14:03:41 -07:00