Add DevConf.CZ 2026 talk to events page

Links to the Reveal.js slides at /talks/devconf-2026/ and the
pretalx event page.

.env.example

@@ -0,0 +1,7 @@
+# No environment variables required.
+# All external data is fetched from public APIs or configured in src/config/theme.ts.
+#
+# WakaTime: public share URL (configured in src/lib/wakatime.ts)
+# GitHub: public API (configured in src/lib/github.ts)
+# ListenBrainz: public API, username in src/config/theme.ts
+# Cal.com: embedded via CDN script (configured in src/pages/meeting.astro)

.github/workflows/builds.yaml

@@ -1,37 +1,31 @@
-# Sample workflow for building and deploying a Hugo site to GitHub Pages
-name: Check build
+name: CI
 
 on:
-  # Runs on pushes targeting the default branch
   push:
     branches: ["main"]
   pull_request:
-
-  # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
 
-# Default to bash
-defaults:
-  run:
-    shell: bash
-
 jobs:
-  # Build job
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
         with:
-          node-version: 16
+          node-version: 22
           cache: "npm"
-          cache-dependency-path: ./package-lock.json
-      - name: Setup Hugo
-        uses: peaceiris/actions-hugo@v2
-        with:
-          hugo-version: '0.134.3'
-          extended: true
-      - name: Install elm-land and node packages
-        run: npm install
-      - name: build
-        run: make
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Audit dependencies
+        run: npm audit --audit-level=high
+        continue-on-error: true
+
+      - name: Check types
+        run: npm run check
+
+      - name: Build site
+        run: npm run build

.gitignore

@@ -1,14 +1,21 @@
-/dist
-/.elm-land
-/.env
-/elm-stuff
-/node_modules
+# Dependencies
+node_modules/
+
+# Build output
+dist/
+.astro/
+
+# Environment
+.env
+.env.local
+.env.production
+
+# IDE
+.idea/
+.vscode/
+
+# OS
 .DS_Store
-*.pem
-/static/main.css
-/temp
-/blog/public
-/blog/node_modules
-.idea
-.vscode
-public
+
+# Personal files
+Profile.pdf

.gitmodules

@@ -1,3 +0,0 @@
-[submodule "themes/box-box"]
-	path = themes/box-box
-	url = https://github.com/avinal/box-box.git

LICENSE

@@ -1,373 +1,27 @@
-Mozilla Public License Version 2.0
-==================================
+MIT License
 
-1. Definitions
---------------
+Copyright (c) 2024-present Avinal Kumar
 
-1.1. "Contributor"
-    means each individual or legal entity that creates, contributes to
-    the creation of, or owns Covered Software.
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
 
-1.2. "Contributor Version"
-    means the combination of the Contributions of others (if any) used
-    by a Contributor and that particular Contributor's Contribution.
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
 
-1.3. "Contribution"
-    means Covered Software of a particular Contributor.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
 
-1.4. "Covered Software"
-    means Source Code Form to which the initial Contributor has attached
-    the notice in Exhibit A, the Executable Form of such Source Code
-    Form, and Modifications of such Source Code Form, in each case
-    including portions thereof.
+---
 
-1.5. "Incompatible With Secondary Licenses"
-    means
-
-    (a) that the initial Contributor has attached the notice described
-        in Exhibit B to the Covered Software; or
-
-    (b) that the Covered Software was made available under the terms of
-        version 1.1 or earlier of the License, but not also under the
-        terms of a Secondary License.
-
-1.6. "Executable Form"
-    means any form of the work other than Source Code Form.
-
-1.7. "Larger Work"
-    means a work that combines Covered Software with other material, in
-    a separate file or files, that is not Covered Software.
-
-1.8. "License"
-    means this document.
-
-1.9. "Licensable"
-    means having the right to grant, to the maximum extent possible,
-    whether at the time of the initial grant or subsequently, any and
-    all of the rights conveyed by this License.
-
-1.10. "Modifications"
-    means any of the following:
-
-    (a) any file in Source Code Form that results from an addition to,
-        deletion from, or modification of the contents of Covered
-        Software; or
-
-    (b) any new file in Source Code Form that contains any Covered
-        Software.
-
-1.11. "Patent Claims" of a Contributor
-    means any patent claim(s), including without limitation, method,
-    process, and apparatus claims, in any patent Licensable by such
-    Contributor that would be infringed, but for the grant of the
-    License, by the making, using, selling, offering for sale, having
-    made, import, or transfer of either its Contributions or its
-    Contributor Version.
-
-1.12. "Secondary License"
-    means either the GNU General Public License, Version 2.0, the GNU
-    Lesser General Public License, Version 2.1, the GNU Affero General
-    Public License, Version 3.0, or any later versions of those
-    licenses.
-
-1.13. "Source Code Form"
-    means the form of the work preferred for making modifications.
-
-1.14. "You" (or "Your")
-    means an individual or a legal entity exercising rights under this
-    License. For legal entities, "You" includes any entity that
-    controls, is controlled by, or is under common control with You. For
-    purposes of this definition, "control" means (a) the power, direct
-    or indirect, to cause the direction or management of such entity,
-    whether by contract or otherwise, or (b) ownership of more than
-    fifty percent (50%) of the outstanding shares or beneficial
-    ownership of such entity.
-
-2. License Grants and Conditions
---------------------------------
-
-2.1. Grants
-
-Each Contributor hereby grants You a world-wide, royalty-free,
-non-exclusive license:
-
-(a) under intellectual property rights (other than patent or trademark)
-    Licensable by such Contributor to use, reproduce, make available,
-    modify, display, perform, distribute, and otherwise exploit its
-    Contributions, either on an unmodified basis, with Modifications, or
-    as part of a Larger Work; and
-
-(b) under Patent Claims of such Contributor to make, use, sell, offer
-    for sale, have made, import, and otherwise transfer either its
-    Contributions or its Contributor Version.
-
-2.2. Effective Date
-
-The licenses granted in Section 2.1 with respect to any Contribution
-become effective for each Contribution on the date the Contributor first
-distributes such Contribution.
-
-2.3. Limitations on Grant Scope
-
-The licenses granted in this Section 2 are the only rights granted under
-this License. No additional rights or licenses will be implied from the
-distribution or licensing of Covered Software under this License.
-Notwithstanding Section 2.1(b) above, no patent license is granted by a
-Contributor:
-
-(a) for any code that a Contributor has removed from Covered Software;
-    or
-
-(b) for infringements caused by: (i) Your and any other third party's
-    modifications of Covered Software, or (ii) the combination of its
-    Contributions with other software (except as part of its Contributor
-    Version); or
-
-(c) under Patent Claims infringed by Covered Software in the absence of
-    its Contributions.
-
-This License does not grant any rights in the trademarks, service marks,
-or logos of any Contributor (except as may be necessary to comply with
-the notice requirements in Section 3.4).
-
-2.4. Subsequent Licenses
-
-No Contributor makes additional grants as a result of Your choice to
-distribute the Covered Software under a subsequent version of this
-License (see Section 10.2) or under the terms of a Secondary License (if
-permitted under the terms of Section 3.3).
-
-2.5. Representation
-
-Each Contributor represents that the Contributor believes its
-Contributions are its original creation(s) or it has sufficient rights
-to grant the rights to its Contributions conveyed by this License.
-
-2.6. Fair Use
-
-This License is not intended to limit any rights You have under
-applicable copyright doctrines of fair use, fair dealing, or other
-equivalents.
-
-2.7. Conditions
-
-Sections 3.1, 3.2, 3.3, and 3.4 are conditions of the licenses granted
-in Section 2.1.
-
-3. Responsibilities
--------------------
-
-3.1. Distribution of Source Form
-
-All distribution of Covered Software in Source Code Form, including any
-Modifications that You create or to which You contribute, must be under
-the terms of this License. You must inform recipients that the Source
-Code Form of the Covered Software is governed by the terms of this
-License, and how they can obtain a copy of this License. You may not
-attempt to alter or restrict the recipients' rights in the Source Code
-Form.
-
-3.2. Distribution of Executable Form
-
-If You distribute Covered Software in Executable Form then:
-
-(a) such Covered Software must also be made available in Source Code
-    Form, as described in Section 3.1, and You must inform recipients of
-    the Executable Form how they can obtain a copy of such Source Code
-    Form by reasonable means in a timely manner, at a charge no more
-    than the cost of distribution to the recipient; and
-
-(b) You may distribute such Executable Form under the terms of this
-    License, or sublicense it under different terms, provided that the
-    license for the Executable Form does not attempt to limit or alter
-    the recipients' rights in the Source Code Form under this License.
-
-3.3. Distribution of a Larger Work
-
-You may create and distribute a Larger Work under terms of Your choice,
-provided that You also comply with the requirements of this License for
-the Covered Software. If the Larger Work is a combination of Covered
-Software with a work governed by one or more Secondary Licenses, and the
-Covered Software is not Incompatible With Secondary Licenses, this
-License permits You to additionally distribute such Covered Software
-under the terms of such Secondary License(s), so that the recipient of
-the Larger Work may, at their option, further distribute the Covered
-Software under the terms of either this License or such Secondary
-License(s).
-
-3.4. Notices
-
-You may not remove or alter the substance of any license notices
-(including copyright notices, patent notices, disclaimers of warranty,
-or limitations of liability) contained within the Source Code Form of
-the Covered Software, except that You may alter any license notices to
-the extent required to remedy known factual inaccuracies.
-
-3.5. Application of Additional Terms
-
-You may choose to offer, and to charge a fee for, warranty, support,
-indemnity or liability obligations to one or more recipients of Covered
-Software. However, You may do so only on Your own behalf, and not on
-behalf of any Contributor. You must make it absolutely clear that any
-such warranty, support, indemnity, or liability obligation is offered by
-You alone, and You hereby agree to indemnify every Contributor for any
-liability incurred by such Contributor as a result of warranty, support,
-indemnity or liability terms You offer. You may include additional
-disclaimers of warranty and limitations of liability specific to any
-jurisdiction.
-
-4. Inability to Comply Due to Statute or Regulation
----------------------------------------------------
-
-If it is impossible for You to comply with any of the terms of this
-License with respect to some or all of the Covered Software due to
-statute, judicial order, or regulation then You must: (a) comply with
-the terms of this License to the maximum extent possible; and (b)
-describe the limitations and the code they affect. Such description must
-be placed in a text file included with all distributions of the Covered
-Software under this License. Except to the extent prohibited by statute
-or regulation, such description must be sufficiently detailed for a
-recipient of ordinary skill to be able to understand it.
-
-5. Termination
---------------
-
-5.1. The rights granted under this License will terminate automatically
-if You fail to comply with any of its terms. However, if You become
-compliant, then the rights granted under this License from a particular
-Contributor are reinstated (a) provisionally, unless and until such
-Contributor explicitly and finally terminates Your grants, and (b) on an
-ongoing basis, if such Contributor fails to notify You of the
-non-compliance by some reasonable means prior to 60 days after You have
-come back into compliance. Moreover, Your grants from a particular
-Contributor are reinstated on an ongoing basis if such Contributor
-notifies You of the non-compliance by some reasonable means, this is the
-first time You have received notice of non-compliance with this License
-from such Contributor, and You become compliant prior to 30 days after
-Your receipt of the notice.
-
-5.2. If You initiate litigation against any entity by asserting a patent
-infringement claim (excluding declaratory judgment actions,
-counter-claims, and cross-claims) alleging that a Contributor Version
-directly or indirectly infringes any patent, then the rights granted to
-You by any and all Contributors for the Covered Software under Section
-2.1 of this License shall terminate.
-
-5.3. In the event of termination under Sections 5.1 or 5.2 above, all
-end user license agreements (excluding distributors and resellers) which
-have been validly granted by You or Your distributors under this License
-prior to termination shall survive termination.
-
-************************************************************************
-*                                                                      *
-*  6. Disclaimer of Warranty                                           *
-*  -------------------------                                           *
-*                                                                      *
-*  Covered Software is provided under this License on an "as is"       *
-*  basis, without warranty of any kind, either expressed, implied, or  *
-*  statutory, including, without limitation, warranties that the       *
-*  Covered Software is free of defects, merchantable, fit for a        *
-*  particular purpose or non-infringing. The entire risk as to the     *
-*  quality and performance of the Covered Software is with You.        *
-*  Should any Covered Software prove defective in any respect, You     *
-*  (not any Contributor) assume the cost of any necessary servicing,   *
-*  repair, or correction. This disclaimer of warranty constitutes an   *
-*  essential part of this License. No use of any Covered Software is   *
-*  authorized under this License except under this disclaimer.         *
-*                                                                      *
-************************************************************************
-
-************************************************************************
-*                                                                      *
-*  7. Limitation of Liability                                          *
-*  --------------------------                                          *
-*                                                                      *
-*  Under no circumstances and under no legal theory, whether tort      *
-*  (including negligence), contract, or otherwise, shall any           *
-*  Contributor, or anyone who distributes Covered Software as          *
-*  permitted above, be liable to You for any direct, indirect,         *
-*  special, incidental, or consequential damages of any character      *
-*  including, without limitation, damages for lost profits, loss of    *
-*  goodwill, work stoppage, computer failure or malfunction, or any    *
-*  and all other commercial damages or losses, even if such party      *
-*  shall have been informed of the possibility of such damages. This   *
-*  limitation of liability shall not apply to liability for death or   *
-*  personal injury resulting from such party's negligence to the       *
-*  extent applicable law prohibits such limitation. Some               *
-*  jurisdictions do not allow the exclusion or limitation of           *
-*  incidental or consequential damages, so this exclusion and          *
-*  limitation may not apply to You.                                    *
-*                                                                      *
-************************************************************************
-
-8. Litigation
--------------
-
-Any litigation relating to this License may be brought only in the
-courts of a jurisdiction where the defendant maintains its principal
-place of business and such litigation shall be governed by laws of that
-jurisdiction, without reference to its conflict-of-law provisions.
-Nothing in this Section shall prevent a party's ability to bring
-cross-claims or counter-claims.
-
-9. Miscellaneous
-----------------
-
-This License represents the complete agreement concerning the subject
-matter hereof. If any provision of this License is held to be
-unenforceable, such provision shall be reformed only to the extent
-necessary to make it enforceable. Any law or regulation which provides
-that the language of a contract shall be construed against the drafter
-shall not be used to construe this License against a Contributor.
-
-10. Versions of the License
----------------------------
-
-10.1. New Versions
-
-Mozilla Foundation is the license steward. Except as provided in Section
-10.3, no one other than the license steward has the right to modify or
-publish new versions of this License. Each version will be given a
-distinguishing version number.
-
-10.2. Effect of New Versions
-
-You may distribute the Covered Software under the terms of the version
-of the License under which You originally received the Covered Software,
-or under the terms of any subsequent version published by the license
-steward.
-
-10.3. Modified Versions
-
-If you create software not governed by this License, and you want to
-create a new license for such software, you may create and use a
-modified version of this License if you rename the license and remove
-any references to the name of the license steward (except to note that
-such modified license differs from this License).
-
-10.4. Distributing Source Code Form that is Incompatible With Secondary
-Licenses
-
-If You choose to distribute Source Code Form that is Incompatible With
-Secondary Licenses under the terms of this version of the License, the
-notice described in Exhibit B of this License must be attached.
-
-Exhibit A - Source Code Form License Notice
--------------------------------------------
-
-  This Source Code Form is subject to the terms of the Mozilla Public
-  License, v. 2.0. If a copy of the MPL was not distributed with this
-  file, You can obtain one at http://mozilla.org/MPL/2.0/.
-
-If it is not possible or desirable to put the notice in a particular
-file, then You may include the notice in a location (such as a LICENSE
-file in a relevant directory) where a recipient would be likely to look
-for such a notice.
-
-You may add additional accurate notices of copyright ownership.
-
-Exhibit B - "Incompatible With Secondary Licenses" Notice
----------------------------------------------------------
-
-  This Source Code Form is "Incompatible With Secondary Licenses", as
-  defined by the Mozilla Public License, v. 2.0.
+Note: Blog posts and written content (src/content/posts/) are licensed under
+Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0).
+See LICENSE-CONTENT for details.

LICENSE-CONTENT

@@ -0,0 +1,31 @@
+Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)
+
+Copyright (c) 2024-present Avinal Kumar
+
+This license applies to all blog posts and written content located in
+src/content/posts/ and any other prose content on this website.
+
+You are free to:
+
+  Share — copy and redistribute the material in any medium or format for
+  any purpose, even commercially.
+
+  Adapt — remix, transform, and build upon the material for any purpose,
+  even commercially.
+
+Under the following terms:
+
+  Attribution — You must give appropriate credit, provide a link to the
+  license, and indicate if changes were made. You may do so in any
+  reasonable manner, but not in any way that suggests the licensor
+  endorses you or your use.
+
+  ShareAlike — If you remix, transform, or build upon the material, you
+  must distribute your contributions under the same license as the
+  original.
+
+  No additional restrictions — You may not apply legal terms or
+  technological measures that legally restrict others from doing anything
+  the license permits.
+
+Full license text: https://creativecommons.org/licenses/by-sa/4.0/legalcode

Makefile

@@ -0,0 +1,29 @@
+.PHONY: dev build preview clean install check fmt lint new-post help
+
+# Default target
+help: ## Show this help
+	@grep -E '^[a-zA-Z_-]+:.*?## .*$$' $(MAKEFILE_LIST) | \
+		awk 'BEGIN {FS = ":.*?## "}; {printf "  \033[36m%-15s\033[0m %s\n", $$1, $$2}'
+
+install: ## Install dependencies
+	npm install
+
+dev: ## Start dev server with hot reload
+	npx astro dev
+
+build: ## Build for production
+	npx astro build
+
+preview: ## Preview production build locally
+	npx astro preview
+
+check: ## Run Astro type checking
+	npx astro check
+
+clean: ## Remove build artifacts
+	rm -rf dist .astro node_modules/.astro
+
+nuke: ## Full clean (includes node_modules)
+	rm -rf dist .astro node_modules
+
+fresh: nuke install ## Clean install from scratch

README.md

@@ -1,2 +1,85 @@
-# My Personal Website and Blog
+# avinal.space
 
+Personal website and blog built with [Astro](https://astro.build). Minimal, fast, and almost entirely HTML & CSS with zero-JS by default.
+
+**Live:** [avinal.space](https://avinal.space)
+
+## Design Inspiration
+
+- [jay.fish](https://jay.fish/) — homepage layout, activity graph, bento grid
+- [usememos.com](https://usememos.com/) — clean typography, color palette, overall theme
+
+## Pages
+
+| Route | Description |
+|-------|-------------|
+| `/` | Homepage with hero card, GitHub/WakaTime activity graph, ListenBrainz music widget, recent posts, and pinned repos |
+| `/posts/` | Blog index with category filters and featured images |
+| `/posts/<category>/` | Category-filtered post listings |
+| `/posts/<category>/<slug>/` | Individual blog posts |
+| `/resume/` | Resume page (data driven from `src/data/resume.json`) |
+| `/events/` | Conferences and events timeline |
+| `/meeting/` | Book a meeting via [Cal.com](https://cal.com) embed |
+| `/setup/` | Hardware and software setup |
+| `/rss.xml` | RSS feed |
+
+## Prerequisites
+
+- [Node.js](https://nodejs.org/) 22+
+- npm
+
+## Getting Started
+
+```bash
+git clone https://github.com/avinal/avinal.github.io.git
+cd avinal.github.io
+make install
+```
+
+No environment variables are required. All external data is fetched from public APIs:
+
+- **GitHub** — contributions graph and user info (public API)
+- **WakaTime** — coding stats via public share URL
+- **ListenBrainz** — music listening activity (public API, username in `src/config/theme.ts`)
+- **Cal.com** — meeting booking (embedded via CDN)
+
+## Development
+
+```bash
+make dev        # Start dev server with hot reload
+make build      # Build for production
+make preview    # Preview production build locally
+make check      # Run Astro type checking
+make clean      # Remove build artifacts
+make nuke       # Full clean (includes node_modules)
+make fresh      # Clean install from scratch
+```
+
+## Project Structure
+
+```
+src/
+├── components/     # Reusable Astro components
+├── config/         # Theme tokens and site config
+├── content/posts/  # Blog posts (Markdown)
+├── data/           # JSON data (resume, repos, events)
+├── layouts/        # Page layouts
+├── lib/            # Utilities and rehype plugins
+├── pages/          # Route pages
+└── styles/         # Global CSS
+public/             # Static assets (images, favicons)
+```
+
+## Configuration
+
+- **Theme & colors:** `src/config/theme.ts` — single file for all design tokens, easily swap the entire color palette
+- **Repos:** `src/data/repos.json` — pinned repositories shown on the homepage
+- **Resume:** `src/data/resume.json` — JSON Resume format, drives the `/resume/` page
+
+## Deployment
+
+The site is deployed via [Netlify](https://netlify.com). Any push to `main` triggers a build automatically. See `netlify.toml` for the build config.
+
+## License
+
+See [LICENSE](LICENSE) for details.

astro.config.mjs

@@ -0,0 +1,29 @@
+import { defineConfig } from "astro/config";
+import sitemap from "@astrojs/sitemap";
+import rehypeImageAlign from "./src/lib/rehype-image-align.ts";
+import rehypeSlug from "rehype-slug";
+import rehypeAutolinkHeadings from "rehype-autolink-headings";
+
+export default defineConfig({
+  site: "https://avinal.space",
+  output: "static",
+  integrations: [sitemap()],
+  prefetch: true,
+  markdown: {
+    shikiConfig: {
+      theme: "github-dark-default",
+    },
+    rehypePlugins: [
+      rehypeImageAlign,
+      rehypeSlug,
+      [
+        rehypeAutolinkHeadings,
+        {
+          behavior: "append",
+          properties: { className: ["heading-anchor"], ariaLabel: "Link to this section" },
+          content: { type: "text", value: "#" },
+        },
+      ],
+    ],
+  },
+});

content/_index.md

@@ -1,12 +0,0 @@
----
-date: "2023-01-01T08:00:00-07:00"
-draft: false
-title: Home
----
-
-I am a Software Engineer II at Red Hat, specializing in hybrid cloud engineering.
-I have been involved with Google's Summer of Code and Google Season of Docs
-programs as a mentor and contributor to Open Source for many years. For fun,
-I like to play around with cutting-edge areas of computer science; at the
-moment, I'm learning about Elm. GNU/Linux and free/open-source software are
-two of my favorite things

content/posts/_index.md

@@ -1,7 +0,0 @@
----
-date: "2023-01-01T08:30:00-07:00"
-draft: false
-title: Posts
----
-
-All the posts.

hugo.yaml

@@ -1,23 +0,0 @@
-baseURL: 'https://avinal.space/'
-languageCode: 'en-us'
-title: "Avinal's Website"
-theme: 'box-box'
-
-menus:
-  main:
-    - name: Home
-      pageRef: /
-      weight: 10
-    - name: Posts
-      pageRef: /posts
-      weight: 20
-
-disableKinds: ["taxonomy"]
-
-taxonomies:
-  category: category
-
-permalinks:
-  category: "/posts/category/:slug"
-
-ignoreLogs: 'warning-goldmark-raw-html'

netlify.toml

@@ -1,6 +1,21 @@
 [build]
-    command = "hugo"
-    publish = "public"
+  command = "npm run build"
+  publish = "dist"
 
 [build.environment]
-  HUGO_VERSION = "0.140.1"
+  NODE_VERSION = "22"
+
+[[headers]]
+  for = "/*"
+  [headers.values]
+    X-Frame-Options = "DENY"
+    X-Content-Type-Options = "nosniff"
+    Referrer-Policy = "strict-origin-when-cross-origin"
+    Permissions-Policy = "camera=(), microphone=(), geolocation=()"
+    X-XSS-Protection = "1; mode=block"
+    Content-Security-Policy = "default-src 'self'; script-src 'self' 'unsafe-inline' https://cal.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; img-src 'self' https: data:; font-src 'self' https://fonts.gstatic.com; connect-src 'self' https://api.listenbrainz.org https://coverartarchive.org https://itunes.apple.com https://api.github.com https://wakatime.com; frame-src https://cal.com;"
+
+[[headers]]
+  for = "/talks/*"
+  [headers.values]
+    Content-Security-Policy = "default-src 'self'; script-src 'self' 'unsafe-inline' https://cdnjs.cloudflare.com https://cdn.jsdelivr.net; style-src 'self' 'unsafe-inline' https://cdnjs.cloudflare.com https://fonts.googleapis.com; img-src 'self' https: data:; font-src 'self' https://fonts.gstatic.com https://fonts.googleapis.com; connect-src 'self';"

package.json

@@ -0,0 +1,33 @@
+{
+  "name": "avinal.github.io",
+  "version": "1.0.0",
+  "description": "",
+  "type": "module",
+  "scripts": {
+    "dev": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "check": "astro check"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/avinal/avinal.github.io.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/avinal/avinal.github.io/issues"
+  },
+  "homepage": "https://github.com/avinal/avinal.github.io#readme",
+  "dependencies": {
+    "@astrojs/rss": "^4.0.18",
+    "@astrojs/sitemap": "^3.7.2",
+    "@fontsource/iosevka": "^5.2.5",
+    "@fontsource/iosevka-aile": "^5.2.5",
+    "astro": "^6.3.5",
+    "rehype-autolink-headings": "^7.1.0",
+    "rehype-slug": "^6.0.0",
+    "unist-util-visit": "^5.1.0"
+  }
+}

public/browserconfig.xml

@@ -2,8 +2,8 @@
 <browserconfig>
     <msapplication>
         <tile>
-            <square150x150logo src="/mstile-150x150.png"/>
-            <TileColor>#da532c</TileColor>
+            <square150x150logo src="/logo-static.svg"/>
+            <TileColor>#2563eb</TileColor>
         </tile>
     </msapplication>
 </browserconfig>

public/og-default.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="630"><rect width="1200" height="630" fill="#111"/><rect width="1120" height="550" x="40" y="40" fill="#1a1a1a" stroke="#2e2e2e" stroke-width="2" rx="16"/><text x="600" y="270" fill="#e5e5e5" font-family="Inter, system-ui, sans-serif" font-size="72" font-weight="800" text-anchor="middle">avinal.space</text><text x="600" y="340" fill="#a3a3a3" font-family="Inter, system-ui, sans-serif" font-size="28" text-anchor="middle">Software Engineer � Open Source Contributor</text><line x1="500" x2="700" y1="380" y2="380" stroke="#60a5fa" stroke-linecap="round" stroke-width="3"/><text x="600" y="430" fill="#737373" font-family="Inter, system-ui, sans-serif" font-size="22" text-anchor="middle">avinal.space</text></svg>

public/robots.txt

@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://avinal.space/sitemap-index.xml

public/site.webmanifest

@@ -0,0 +1,21 @@
+{
+  "name": "Avinal's Personal Website",
+  "short_name": "avinal.space",
+  "start_url": "/",
+  "icons": [
+    {
+      "src": "/logo-static.svg",
+      "sizes": "any",
+      "type": "image/svg+xml"
+    },
+    {
+      "src": "/logo-static.svg",
+      "sizes": "any",
+      "type": "image/svg+xml",
+      "purpose": "maskable"
+    }
+  ],
+  "theme_color": "#2563eb",
+  "background_color": "#fafafa",
+  "display": "standalone"
+}

public/talks/devconf-2026/index.html

@@ -0,0 +1,342 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Lost in Transliteration: Why strlen("Dvořák") Returns 8</title>
+  <meta name="description" content="DevConf.CZ 2026 talk by Avinal Kumar — character encoding, Unicode, and glibc's iconv internals" />
+  <meta name="author" content="Avinal Kumar" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/5.1.0/reveal.min.css" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/5.1.0/theme/black.min.css" id="theme" />
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');
+
+    /* ============================================
+       IBM Carbon Design System — Color Tokens
+       ============================================ */
+    :root {
+      /* Carbon Gray 80 background */
+      --r-background-color: #2f2f2f;
+      /* Carbon typography */
+      --r-main-font: 'IBM Plex Sans', system-ui, sans-serif;
+      --r-main-font-size: 34px;
+      --r-heading-font: 'IBM Plex Sans', system-ui, sans-serif;
+      --r-heading-color: #f4f4f4;
+      --r-heading-font-weight: 600;
+      --r-main-color: #c6c6c6;
+      --r-link-color: #78a9ff;
+      --r-link-color-hover: #a6c8ff;
+      --r-code-font: 'IBM Plex Mono', monospace;
+      --r-heading-text-transform: none;
+      --r-heading-letter-spacing: -0.01em;
+      /* Carbon color palette */
+      --carbon-blue-40: #78a9ff;
+      --carbon-blue-60: #0f62fe;
+      --carbon-purple-40: #be95ff;
+      --carbon-teal-20: #9ef0f0;
+      --carbon-teal-40: #08bdba;
+      --carbon-magenta-40: #ff7eb6;
+      --carbon-red-40: #ff8389;
+      --carbon-green-40: #42be65;
+      --carbon-yellow-30: #f1c21b;
+      --carbon-gray-10: #f4f4f4;
+      --carbon-gray-30: #c6c6c6;
+      --carbon-gray-50: #8d8d8d;
+      --carbon-gray-60: #6f6f6f;
+      --carbon-gray-70: #525252;
+      --carbon-gray-80: #393939;
+      --carbon-gray-90: #262626;
+      --carbon-gray-100: #161616;
+    }
+
+    .reveal {
+      font-weight: 400;
+      letter-spacing: 0;
+    }
+
+    .reveal h1, .reveal h2, .reveal h3 {
+      line-height: 1.2;
+      margin-bottom: 0.6em;
+    }
+
+    .reveal h2 { font-size: 2em; font-weight: 600; }
+    .reveal h3 { font-size: 1.4em; font-weight: 600; }
+
+    /* ---- Code blocks: Carbon snippet style ---- */
+    .reveal pre {
+      width: 100%;
+      font-size: 0.52em;
+      box-shadow: none;
+      border-radius: 0;
+      border: none;
+      background: var(--carbon-gray-100);
+    }
+    .reveal pre code {
+      padding: 1.2em 1.4em;
+      border-radius: 0;
+      max-height: 480px;
+      line-height: 1.65;
+      background: var(--carbon-gray-100);
+      color: #fff;
+      font-weight: 400;
+    }
+    .reveal code {
+      font-family: var(--r-code-font);
+      font-weight: 500;
+    }
+    .reveal p code, .reveal li code {
+      background: var(--carbon-gray-80);
+      border: none;
+      padding: 0.15em 0.45em;
+      border-radius: 0;
+      font-size: 0.88em;
+      color: var(--carbon-magenta-40);
+    }
+
+    /* ---- Carbon syntax highlighting (overrides highlight.js) ---- */
+    .reveal pre code .hljs-keyword,
+    .reveal pre code .hljs-type,
+    .reveal pre code .hljs-built_in { color: var(--carbon-purple-40); }
+    .reveal pre code .hljs-string,
+    .reveal pre code .hljs-doctag { color: var(--carbon-magenta-40); }
+    .reveal pre code .hljs-number,
+    .reveal pre code .hljs-literal { color: var(--carbon-blue-40); }
+    .reveal pre code .hljs-comment { color: var(--carbon-gray-60); font-style: normal; }
+    .reveal pre code .hljs-function,
+    .reveal pre code .hljs-title { color: var(--carbon-teal-20); }
+    .reveal pre code .hljs-variable,
+    .reveal pre code .hljs-attr { color: #fff; }
+    .reveal pre code .hljs-params { color: var(--carbon-gray-30); }
+    .reveal pre code .hljs-meta,
+    .reveal pre code .hljs-preprocessor { color: #569CD6; }
+    .reveal pre code .hljs-regexp { color: #D16969; }
+    .reveal pre code .hljs-symbol,
+    .reveal pre code .hljs-template-variable { color: var(--carbon-red-40); }
+    .hljs { background: var(--carbon-gray-100); color: #fff; }
+
+    /* ---- Utility classes: Carbon palette ---- */
+    .reveal .dim { opacity: 0.45; }
+    .reveal .accent { color: var(--carbon-blue-40); }
+    .reveal .green { color: var(--carbon-green-40); }
+    .reveal .yellow { color: var(--carbon-yellow-30); }
+    .reveal .orange { color: #f0883e; }
+    .reveal .red { color: var(--carbon-red-40); }
+    .reveal .purple { color: var(--carbon-purple-40); }
+    .reveal .teal { color: var(--carbon-teal-20); }
+    .reveal .magenta { color: var(--carbon-magenta-40); }
+    .reveal .big { font-size: 1.6em; font-weight: 600; letter-spacing: -0.02em; }
+    .reveal .medium { font-size: 1.15em; font-weight: 500; }
+    .reveal .small { font-size: 0.7em; }
+    .reveal .tiny {
+      font-size: 0.45em;
+      color: var(--carbon-gray-60);
+      font-family: var(--r-code-font);
+      letter-spacing: 0.02em;
+    }
+
+    /* ---- Tables ---- */
+    .reveal table { font-size: 0.72em; border-collapse: collapse; border-spacing: 0; }
+    .reveal table th {
+      color: var(--carbon-gray-10);
+      font-weight: 600;
+      background: var(--carbon-gray-80);
+      padding: 0.6em 1em;
+      border-bottom: 2px solid var(--carbon-gray-70);
+      text-align: left;
+    }
+    .reveal table td {
+      padding: 0.5em 1em;
+      border-bottom: 1px solid var(--carbon-gray-70);
+    }
+    .reveal table tr:hover td { background: rgba(255,255,255,0.04); }
+
+    /* ---- Custom blocks: Carbon surface style ---- */
+    .reveal .hex-display {
+      font-family: var(--r-code-font);
+      font-size: 0.62em;
+      background: var(--carbon-gray-100);
+      padding: 1em 1.4em;
+      border-radius: 0;
+      border: none;
+      display: inline-block;
+      line-height: 1.9;
+      color: #fff;
+    }
+    .reveal .diagram {
+      background: var(--carbon-gray-100);
+      border: none;
+      border-radius: 0;
+      padding: 1.2em 1.4em;
+      font-family: var(--r-code-font);
+      font-size: 0.58em;
+      line-height: 1.7;
+      color: #fff;
+    }
+
+    /* ---- Section label ---- */
+    .reveal .slide-title {
+      font-size: 0.45em;
+      color: var(--carbon-blue-40);
+      text-transform: uppercase;
+      letter-spacing: 0.2em;
+      font-weight: 600;
+      margin-bottom: 0.3em;
+      opacity: 0.8;
+    }
+
+    /* ---- Blockquotes ---- */
+    .reveal blockquote {
+      background: var(--carbon-gray-80);
+      border-left: 4px solid var(--carbon-blue-60);
+      padding: 0.8em 1.2em;
+      font-style: italic;
+      width: 85%;
+      border-radius: 0;
+    }
+
+    /* ---- Grid layouts ---- */
+    .reveal .two-col {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 2em;
+      text-align: left;
+    }
+    .reveal .three-col {
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr;
+      gap: 1.5em;
+      text-align: left;
+      font-size: 0.8em;
+    }
+
+    /* ---- Cards: Carbon tile style ---- */
+    .reveal .card {
+      background: var(--carbon-gray-80);
+      border: none;
+      border-radius: 0;
+      padding: 1.2em;
+    }
+    .reveal .card h4 {
+      margin-bottom: 0.5em;
+    }
+
+    /* ---- Lists ---- */
+    .reveal ul, .reveal ol { display: block; }
+    .reveal li {
+      margin-bottom: 0.5em;
+      line-height: 1.5;
+    }
+    .reveal ul li::marker { color: var(--carbon-blue-40); }
+    .reveal ol li::marker { color: var(--carbon-blue-40); font-weight: 600; }
+
+    /* ---- Glow effects for emphasis ---- */
+    .reveal .glow-blue {
+      text-shadow: 0 0 40px rgba(120,169,255,0.4), 0 0 80px rgba(120,169,255,0.15);
+      color: var(--carbon-blue-40);
+    }
+    .reveal .glow-red {
+      text-shadow: 0 0 40px rgba(255,131,137,0.4), 0 0 80px rgba(255,131,137,0.15);
+      color: var(--carbon-red-40);
+    }
+    .reveal .glow-green {
+      text-shadow: 0 0 40px rgba(66,190,101,0.4), 0 0 80px rgba(66,190,101,0.15);
+      color: var(--carbon-green-40);
+    }
+
+    /* ---- Badges: Carbon tag style ---- */
+    .reveal .badge {
+      display: inline-block;
+      font-size: 0.55em;
+      font-weight: 500;
+      padding: 0.15em 0.7em;
+      border-radius: 0;
+      text-transform: uppercase;
+      letter-spacing: 0.06em;
+    }
+    .reveal .badge-blue { background: rgba(120,169,255,0.2); color: var(--carbon-blue-40); }
+    .reveal .badge-red { background: rgba(255,131,137,0.2); color: var(--carbon-red-40); }
+    .reveal .badge-green { background: rgba(66,190,101,0.2); color: var(--carbon-green-40); }
+    .reveal .badge-yellow { background: rgba(241,194,27,0.2); color: var(--carbon-yellow-30); }
+    .reveal .badge-purple { background: rgba(190,149,255,0.2); color: var(--carbon-purple-40); }
+
+    /* ---- HR ---- */
+    .reveal hr {
+      border: none;
+      height: 1px;
+      background: var(--carbon-gray-70);
+      margin: 1em 0;
+    }
+
+    /* ---- Progress bar ---- */
+    .reveal .progress span { background: var(--carbon-blue-60); }
+
+    /* ---- Auto-animate transitions ---- */
+    .reveal [data-auto-animate] .hex-display,
+    .reveal [data-auto-animate] .diagram,
+    .reveal [data-auto-animate] pre {
+      transition: all 0.6s ease;
+    }
+
+    /* ---- Slide number ---- */
+    .reveal .slide-number {
+      font-family: var(--r-code-font);
+      font-size: 0.5em;
+      color: var(--carbon-gray-60);
+    }
+  </style>
+</head>
+<body>
+  <div class="reveal">
+    <div class="slides">
+      <section
+        data-markdown="slides.md"
+        data-separator="^---$"
+        data-separator-vertical="^--$"
+        data-separator-notes="^Note:"
+        data-charset="utf-8">
+      </section>
+    </div>
+  </div>
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/5.1.0/reveal.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/5.1.0/plugin/markdown/markdown.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/5.1.0/plugin/notes/notes.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/5.1.0/plugin/highlight/highlight.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/5.1.0/plugin/zoom/zoom.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/reveal.js-mermaid-plugin@11.15.0/plugin/mermaid/mermaid.js"></script>
+  <script>
+    Reveal.initialize({
+      mermaid: {
+        theme: 'dark',
+        themeVariables: {
+          darkMode: true,
+          background: '#2f2f2f',
+          primaryColor: '#393939',
+          primaryTextColor: '#c6c6c6',
+          primaryBorderColor: '#525252',
+          lineColor: '#78a9ff',
+          secondaryColor: '#262626',
+          tertiaryColor: '#161616',
+          fontFamily: "'IBM Plex Sans', system-ui, sans-serif",
+          fontSize: '18px',
+        },
+      },
+      hash: true,
+      slideNumber: 'c/t',
+      showSlideNumber: 'speaker',
+      transition: 'fade',
+      transitionSpeed: 'default',
+      backgroundTransition: 'fade',
+      center: true,
+      width: 1280,
+      height: 720,
+      margin: 0.08,
+      autoAnimateEasing: 'ease-in-out',
+      autoAnimateDuration: 0.8,
+      autoAnimateUnmatched: true,
+      zoomKey: 'alt',
+      plugins: [RevealMarkdown, RevealHighlight, RevealNotes, RevealZoom, RevealMermaid],
+    });
+  </script>
+</body>
+</html>

public/talks/devconf-2026/slides.md

@@ -0,0 +1,923 @@
+<!-- ===================================================== -->
+<!-- SECTION 1: THE PROBLEM (mystery opening)              -->
+<!-- ===================================================== -->
+
+<!-- .slide: data-auto-animate data-background-color="#2f2f2f" -->
+
+```bash
+$ printf 'Dvořák' | wc -c
+```
+<!-- .element: data-id="mystery-code" -->
+
+Note:
+**Do:** Walk on stage, put terminal on screen, no output yet. Pause 3-4 seconds. Ask: "What do you think this prints?"
+
+- **wc** = word count; **-c** = count bytes (not characters)
+- Dvořák = Czech composer surname, pronounced "DVOR-zhahk"
+
+--
+
+<!-- .slide: data-auto-animate data-background-color="#2f2f2f" -->
+
+```bash
+$ printf 'Dvořák' | wc -c
+8
+```
+<!-- .element: data-id="mystery-code" -->
+
+Note:
+**Do:** Reveal the 8. Pause. Dvořák has 6 visible letters — why 8? Don't explain yet.
+
+- wc -c counts bytes, not characters — this is POSIX behavior, not a bug
+
+--
+
+<!-- .slide: data-auto-animate data-background-color="#2f2f2f" -->
+
+```bash
+$ printf 'Dvořák' | wc -c
+8
+```
+<!-- .element: data-id="mystery-code" -->
+
+<br />
+
+How many people think this is **wrong**?
+<!-- .element: class="medium" -->
+
+Note:
+**Do:** Ask the question. Wait 5 seconds. Let hands go up. Do NOT answer yet.
+
+--
+
+<!-- .slide: data-auto-animate data-background-color="#2f2f2f" -->
+
+```bash
+$ printf 'Dvořák' | wc -c
+8
+
+$ python3 -c "print(len('Dvořák'))"
+6
+```
+<!-- .element: data-id="mystery-code" -->
+
+Note:
+Two different answers for the same string. Let the confusion build.
+
+- Python 3 len() counts Unicode code points, not bytes
+- *Exception:* Python 2 len() counted bytes — this changed in 2→3
+
+--
+
+<!-- .slide: data-auto-animate data-background-color="#2f2f2f" -->
+
+```bash
+$ printf '😀' | wc -c
+4
+
+$ python3 -c "print(len('😀'))"
+1
+```
+<!-- .element: data-id="mystery-code" -->
+
+Note:
+An emoji: 4 bytes vs 1 character.
+
+- 😀 = U+1F600 "Grinning Face." Needs 4 bytes in UTF-8 (F0 9F 98 80) because it's above the **BMP** (Basic Multilingual Plane, U+0000–U+FFFF)
+- *Exception:* On macOS, `echo` appends a newline — use `printf` to avoid off-by-one
+
+--
+
+<!-- .slide: data-background-color="#2f2f2f" -->
+
+Which one is **correct**?
+<!-- .element: class="big" -->
+
+All of them.
+<!-- .element: class="fragment zoom-in glow-blue big" -->
+
+Understanding why is basically the entire talk.
+<!-- .element: class="fragment fade-up small dim" -->
+
+Note:
+**Do:** Pause before "All of them." Then: *"They're counting different things. wc counts bytes. Python counts code points. Both correct."*
+
+**Key thesis:** bytes ≠ characters ≠ code points
+
+---
+
+<!-- ===================================================== -->
+<!-- SECTION 2: INTRODUCTION                               -->
+<!-- ===================================================== -->
+
+<!-- .slide: data-background-color="#2f2f2f" data-transition="zoom" -->
+
+## Lost in Transliteration
+
+Why `strlen("Dvořák")` Returns **8**
+<!-- .element: class="medium" style="opacity: 0.9" -->
+
+<br />
+
+Avinal Kumar · glibc contributor
+<!-- .element: style="font-weight: 500" -->
+
+<span class="badge badge-blue">DevConf.CZ 2026</span>
+<!-- .element: class="small dim" -->
+
+Note:
+**Do:** Brief intro, under 30 seconds:
+*"I'm Avinal. I contribute to glibc — the GNU C Library. I got into character encodings through an iconv bug at the glibc workshop here at DevConf. Today I'll take you through that journey."*
+
+- **glibc** = GNU C Library — the standard C library on most Linux distros
+- **iconv** = POSIX API for converting text between character encodings
+
+---
+
+<!-- .slide: data-background-color="#2f2f2f" data-transition="slide" -->
+
+### Today we'll answer
+
+1. Why does `strlen("Dvořák")` return 8?
+2. Why does Unicode exist?
+3. How does the C library handle text?
+4. How does `iconv` convert between encodings?
+5. Does any of this still matter in 2026?
+
+Note:
+**Do:** Read out loud. Give the audience a roadmap. Don't linger.
+
+- **strlen** = "string length" — counts bytes before the null terminator, NOT characters
+
+---
+
+<!-- .slide: data-background-color="#2f2f2f" data-transition="fade" -->
+
+<span class="glow-blue big">There is no such thing as plain text.</span>
+
+<br />
+
+If you remember one thing from this talk, remember that sentence.
+<!-- .element: class="fragment fade-up small dim" -->
+
+Note:
+**Do:** Say this slowly. Pause. *"If you remember one thing, remember that sentence."*
+
+- "Plain text" implies no encoding — but every byte sequence *has* an encoding. If you don't know it, you're guessing. Wrong guess = **mojibake** (文字化け, Japanese for garbled text, pronounced "mo-ji-ba-keh")
+
+---
+
+<!-- ===================================================== -->
+<!-- SECTION 3: HISTORY                                    -->
+<!-- ===================================================== -->
+
+<!-- .slide: data-background-color="#2f2f2f" data-transition="slide" -->
+
+<p class="slide-title">How we ended up with this mess</p>
+
+### ASCII: The 7-bit world
+
+<div class="two-col">
+<div>
+
+- 128 characters (0–127)
+- 7 bits per character
+- English letters, digits, punctuation
+- Bit 8 was "spare"
+
+</div>
+<div>
+
+```text
+0x41 = A
+0x61 = a
+0x30 = 0
+0x20 = (space)
+0x0A = (newline)
+```
+
+</div>
+</div>
+
+*"And all was good — if you spoke English."*
+<!-- .element: class="fragment fade-up" -->
+
+Note:
+- **ASCII** = American Standard Code for Information Interchange (1963)
+- 7 bits = 128 values. The 8th bit was for parity checking on noisy telegraph lines
+- Only covers English — no accented chars, no Cyrillic, no CJK, no Arabic
+
+---
+
+<!-- .slide: data-background-color="#2f2f2f" data-transition="slide" -->
+
+<p class="slide-title">How we ended up with this mess</p>
+
+### Code Pages: Everyone fills bit 8 differently
+
+If I send byte `0xE9` from Paris to Moscow, what character arrives?
+<!-- .element: class="medium" -->
+
+| Byte | CP-1252 (Western) | CP-866 (Russian) | CP-862 (Hebrew) |
+|------|-------------------|-------------------|------------------|
+| `0xE9` | é | щ | ט |
+| `0xC4` | Ä | ─ | ד |
+| `0xF1` | ñ | ё | ס |
+
+<!-- .element: class="fragment fade-in" -->
+
+CJK needed **thousands** — multi-byte encodings (Shift-JIS, EUC-KR, GB2312) where you can't even move backward in a string.
+<!-- .element: class="fragment fade-up small" -->
+
+Note:
+**Do:** Ask *"If I send byte 0xE9 from Paris to Moscow, what character arrives?"* before revealing the table.
+
+- **CP** = Code Page. CP-1252 = Windows Western. CP-866 = DOS Russian. CP-862 = DOS Hebrew
+- Same byte, different characters — the bytes are correct, the *interpretation* is wrong
+- **CJK** = Chinese, Japanese, Korean
+- **Shift-JIS** = Shift Japanese Industrial Standards. **EUC-KR** = Extended Unix Code for Korean. **GB2312** = Chinese National Standard
+- *Exception:* Multi-byte encodings have a "forward-only" problem — you can't tell if a byte is byte 1 or byte 2 of a character
+
+---
+
+<!-- .slide: data-background-color="#2f2f2f" data-transition="slide" -->
+
+<p class="slide-title">How we ended up with this mess</p>
+
+### Unicode: One number per character
+
+```text
+U+0041 = A      U+00E9 = é      U+010D = č
+U+0639 = ع      U+4E16 = 世      U+1F600 = 😀
+```
+
+- Code points are **abstract numbers**, not bytes <!-- .element: class="fragment fade-up" -->
+- <span class="red">Not</span> "16-bit characters" — that's the myth <!-- .element: class="fragment fade-up" -->
+- 154,998 characters across 168 scripts <!-- .element: class="fragment fade-up" -->
+
+Unicode separated the *idea* of a character from how it's stored.
+<!-- .element: class="fragment zoom-in accent" -->
+
+Note:
+- **Unicode** = Universal Coded Character Set (1991, Unicode Consortium)
+- Code points are abstract numbers — how you *store* them is a separate question (that's what encodings answer)
+- *Exception:* "Unicode is 16-bit" myth comes from Unicode 1.0 (1991) which only planned 65,536 chars. Unicode 2.0 (1996) expanded beyond 16 bits. Java and Windows adopted UTF-16 before that expansion, and are now stuck with it
+- **BMP** = Basic Multilingual Plane (U+0000–U+FFFF). Characters above it (emoji, rare scripts) are in supplementary planes
+
+---
+
+<!-- .slide: data-auto-animate data-background-color="#2f2f2f" data-transition="slide" -->
+
+<p class="slide-title">How we ended up with this mess</p>
+
+### Encodings: Serialization formats
+
+<div class="three-col">
+<div class="card fragment fade-up" data-fragment-index="1">
+<h4 class="glow-blue">UTF-8</h4>
+
+- 1–4 bytes
+- ASCII-compatible
+- <span class="badge badge-blue">98% of the web</span>
+</div>
+<div class="card fragment fade-up" data-fragment-index="2">
+<h4 class="yellow">UTF-16</h4>
+
+- 2 or 4 bytes
+- Needs BOM
+- <span class="badge badge-yellow">Windows, Java</span>
+</div>
+<div class="card fragment fade-up" data-fragment-index="3">
+<h4 class="green">UTF-32</h4>
+
+- Fixed 4 bytes
+- Simple but wasteful
+- <span class="badge badge-green">glibc internal</span>
+</div>
+</div>
+
+Note:
+- **UTF** = Unicode Transformation Format
+- **UTF-8:** Designed 1992 by Ken Thompson & Rob Pike. ASCII bytes are identical — this is why it won. 98.2% of websites (W3Techs, 2024)
+- **UTF-16:** Uses surrogate pairs above U+FFFF. **BOM** = Byte Order Mark (U+FEFF) — indicates endianness
+- **UTF-32:** Also called **UCS-4** (Universal Coded Character Set, 4-byte). "hello" = 20 bytes instead of 5
+- *Exception:* UTF-32 and UCS-4 are technically from different standards (ISO 10646 vs Unicode), but identical in practice
+
+--
+
+<!-- .slide: data-auto-animate data-background-color="#2f2f2f" -->
+
+<p class="slide-title">How we ended up with this mess</p>
+
+### Encodings: Serialization formats
+
+<div class="hex-display" data-id="encoding-hex">
+"Dvořák" in UTF-8: &nbsp;44 76 6F <span class="red" style="font-weight:700;">C5 99</span> C3 A1 6B &nbsp;&nbsp;&nbsp;<span class="badge badge-blue">8 bytes</span><br />
+"Dvořák" in UTF-32: 00000044 00000076 0000006F <span class="red" style="font-weight:700;">00000159</span> 000000E1 0000006B &nbsp;<span class="badge badge-green">24 bytes</span>
+</div>
+
+<span class="glow-blue big">There is no such thing as plain text.</span>
+<!-- .element: class="fragment zoom-in" -->
+
+Note:
+UTF-8 breakdown:
+- D, v, o, k = 1 byte each (ASCII range)
+- ř = C5 99 (2 bytes, U+0159)
+- á = C3 A1 (2 bytes, U+00E1)
+- Total: 4×1 + 2×2 = **8 bytes** for 6 characters
+
+UTF-32: every char = 4 bytes → 6×4 = **24 bytes**. Same string, 3× the size.
+
+---
+
+<!-- ===================================================== -->
+<!-- SECTION 4: INTO C — real examples, not code           -->
+<!-- ===================================================== -->
+
+<!-- .slide: data-background-color="#2f2f2f" data-transition="zoom" -->
+
+<span class="badge badge-blue" style="font-size: 0.6em;">Part 2</span>
+
+## Text in C: What actually happens
+
+Note:
+**Do:** *"Now we understand WHY bytes and characters differ. Let's see how C deals with it."*
+
+---
+
+<!-- .slide: data-background-color="#2f2f2f" data-transition="slide" -->
+
+<p class="slide-title">Text in C</p>
+
+### C has two ways to see a string
+
+<div class="two-col">
+<div class="card">
+
+#### `char` — bytes
+- 1 byte per element, no encoding info
+- `strlen("Dvořák")` → **8**
+- `strlen("😀")` → **4**
+- Indexing gives you bytes, not characters
+
+</div>
+<div class="card">
+
+#### `wchar_t` — code points
+- 4 bytes on Linux, <span class="red">2 on Windows</span>
+- `wcslen(L"Dvořák")` → **6**
+- `wcslen(L"😀")` → **1**
+- Indexing gives you characters
+
+</div>
+</div>
+
+<br />
+
+`mbrtowc()` bridges between them. `setlocale()` tells it which encoding to expect.
+<!-- .element: class="fragment fade-up small" -->
+
+Note:
+- **wchar_t** = "wide character type." Linux: 4 bytes (UCS-4). Windows: 2 bytes (UTF-16)
+- **wcslen** = "wide character string length"
+- **L"..."** prefix = wide string literal
+- **mbrtowc** = "multibyte restartable to wide character" — converts one multibyte char to one wchar_t
+- **setlocale** with LC_CTYPE tells mbrtowc the encoding. Without it → "C" locale = ASCII only
+- *Exception:* On Windows, wcslen(L"😀") returns **2** (surrogate pair), not 1
+
+---
+
+<!-- .slide: data-background-color="#2f2f2f" data-transition="slide" -->
+
+<p class="slide-title">Text in C</p>
+
+### What does "Dvořák" look like in memory?
+
+```text
+ Character:   D     v     o     ř        á        k
+ UTF-8 hex:  44    76    6F   C5 99    C3 A1     6B
+ Bytes:       1     1     1     2        2        1   =  8 bytes
+ Code points: 1     1     1     1        1        1   =  6 characters
+```
+
+`strlen` counts the top row. `wcslen` counts the bottom row.
+<!-- .element: class="fragment fade-up small" -->
+
+Now you know why `strlen("Dvořák")` returns 8.
+<!-- .element: class="fragment fade-up accent" -->
+
+Note:
+**Do:** Point at the diagram: *"strlen counts bytes: 1+1+1+2+2+1 = 8. wcslen counts characters: always 1 each = 6. Both correct."*
+
+This is the answer to the opening mystery.
+
+---
+
+<!-- .slide: data-auto-animate data-background-color="#2f2f2f" -->
+
+<p class="slide-title">Text in C</p>
+
+### `iconv` — converting between encodings
+
+```bash
+$ echo 'Dvořák' | iconv -f UTF-8 -t ASCII
+iconv: illegal input sequence at position 3
+```
+<!-- .element: data-id="iconv-demo" -->
+
+Note:
+- **iconv** = both a C API (iconv_open/iconv/iconv_close in `<iconv.h>`) and a CLI tool
+- **-f** = from, **-t** = to
+- Position 3 = 4th byte (0-indexed) = where ř starts. ASCII only has 0–127; C5 = 197 → fails
+- **EILSEQ** = "illegal sequence" errno value
+
+--
+
+<!-- .slide: data-auto-animate data-background-color="#2f2f2f" -->
+
+<p class="slide-title">Text in C</p>
+
+### `iconv` — converting between encodings
+
+```bash
+$ echo 'Dvořák' | iconv -f UTF-8 -t ASCII
+iconv: illegal input sequence at position 3
+
+$ echo 'Dvořák' | iconv -f UTF-8 -t ASCII//TRANSLIT
+Dvorak
+
+$ echo 'Dvořák' | iconv -f UTF-8 -t ASCII//IGNORE
+Dvok
+```
+<!-- .element: data-id="iconv-demo" -->
+
+- **`//TRANSLIT`** — approximate: ř→r, á→a
+- **`//IGNORE`** — drop what doesn't fit
+
+Note:
+- **//TRANSLIT** = transliteration. Appended to target encoding. Finds closest match: ř→r, á→a, ö→o, ñ→n
+- **//IGNORE** = silently drop unconvertible chars. Notice "Dvok" — both ř AND á dropped
+- *Exception:* //TRANSLIT is glibc-specific, not POSIX. musl libc (Alpine Linux) doesn't support it
+
+---
+
+<!-- .slide: data-background-color="#2f2f2f" data-transition="slide" -->
+
+<p class="slide-title">Text in C</p>
+
+### Real encoding pairs from across the world
+
+```bash
+$ echo '東京' | iconv -f UTF-8 -t SHIFT_JIS | hexdump -C
+00000000  93 8c 8b 9e 0a                          |.....|
+
+$ echo 'こんにちは世界' | iconv -f UTF-8 -t EUC-JP | hexdump -C
+00000000  a4 b3 a4 f3 a4 cb a4 c1  a4 cf c0 a4 b3 a6 0a  |...............|
+
+$ echo 'Ελληνικά κείμενο' | iconv -f UTF-8 -t ISO-8859-7 | hexdump -C
+00000000  c5 eb eb e7 ed e9 ea dc  20 ea e5 df ec e5 ed ef  |........ .......|
+```
+
+Same characters, completely different bytes — depending on the encoding.
+<!-- .element: class="fragment fade-up small" -->
+
+Note:
+- 東京 = Tōkyō (Tokyo)
+- こんにちは世界 = "Konnichiwa Sekai" = "Hello World"
+- Ελληνικά κείμενο = "Elliniká keímeno" = "Greek text"
+- **hexdump -C** = canonical hex+ASCII dump. Non-ASCII shows as dots
+- Same text in Shift-JIS vs EUC-JP → completely different bytes. Without knowing the encoding, unreadable
+
+---
+
+<!-- .slide: data-background-color="#2f2f2f" data-transition="slide" -->
+
+<p class="slide-title">Text in C</p>
+
+### When conversion fails
+
+```bash
+$ echo 'مرحبا' | iconv -f UTF-8 -t ISO-8859-1
+iconv: illegal input sequence at position 0
+
+$ echo 'Résumé' | iconv -f UTF-8 -t CP866
+iconv: illegal input sequence at position 1
+
+$ echo -ne '\xEF\xBB\xBFhello' | hexdump -C
+00000000  ef bb bf 68 65 6c 6c 6f                  |...hello|
+
+$ echo -ne '\xEF\xBB\xBFhello' | iconv -f UTF-8 -t ASCII//TRANSLIT
+hello
+```
+
+- Arabic → Latin-1: impossible — the encoding can't hold it
+- French Résumé → Russian CP866: `é` doesn't exist in that code page
+- BOM: 3 invisible bytes at the start — your first "character" is garbage
+
+Note:
+- مرحبا = "marhaba" = "hello" in Arabic
+- **ISO-8859-1** = Latin-1. Zero Arabic chars → fails at position 0
+- **CP866** = DOS Cyrillic. é doesn't map → fails at position 1 (R is fine, é isn't)
+- **BOM** = Byte Order Mark (U+FEFF, encoded EF BB BF in UTF-8). Windows Notepad adds it. Breaks JSON parsers, shell shebangs, and string comparisons
+
+---
+
+<!-- .slide: data-background-color="#2f2f2f" data-transition="slide" -->
+
+<p class="slide-title">Text in C</p>
+
+### Longer text, bigger difference
+
+```bash
+$ printf 'Příliš žluťoučký kůň úpěl ďábelské ódy' | wc -c
+53
+
+$ python3 -c "print(len('Příliš žluťoučký kůň úpěl ďábelské ódy'))"
+38
+
+$ echo 'Příliš žluťoučký kůň úpěl ďábelské ódy' \
+    | iconv -f UTF-8 -t ASCII//TRANSLIT
+Prilis zlutoucky kun upel dabelske ody
+```
+
+A Czech pangram: **38 characters**, **53 bytes** — a 40% difference.
+<!-- .element: class="fragment fade-up" -->
+
+`//TRANSLIT` strips all diacritics and produces valid ASCII.
+<!-- .element: class="fragment fade-up small" -->
+
+Note:
+- **Translation:** "Too yellow a horse groaned devilish odes" — a Czech pangram (like "The quick brown fox" but for testing diacritics)
+- 15 extra bytes from accented characters: each adds 1 byte in UTF-8
+- Czech diacritics: **háček** (ˇ) = caron (ř, š, č, ž, ň, ď, ť, ě), **čárka** (´) = acute (á, é, í, ó, ú), **kroužek** (°) = ring (ů)
+- **Do:** DevConf is in Brno — the audience will recognize this pangram
+
+---
+
+<!-- .slide: data-background-color="#2f2f2f" data-transition="slide" -->
+
+<p class="slide-title">Text in C</p>
+
+### How many encodings?
+
+```bash
+$ iconv -l | wc -l
+1180
+
+$ find /usr/lib64/gconv -name '*.so' | wc -l
+253
+```
+
+**1180** encoding names served by **253** shared libraries.
+<!-- .element: class="fragment fade-up" -->
+
+How does glibc manage this without writing thousands of converters?
+<!-- .element: class="fragment fade-up accent" -->
+
+Note:
+**Do:** LIVE DEMO if possible.
+
+- **iconv -l** = list all encodings. 1180 includes aliases (SHIFT-JIS, SJIS, MS_KANJI = same encoding)
+- **/usr/lib64/gconv/** = where glibc stores converter .so files (Fedora/RHEL). Debian: /usr/lib/x86_64-linux-gnu/gconv/
+- **.so** = shared object (dynamically loaded library)
+- 1180 names, 253 plugins — far fewer than the 39,800 needed for N×N
+
+---
+
+<!-- ===================================================== -->
+<!-- SECTION 5: HOW IT WORKS INSIDE                        -->
+<!-- ===================================================== -->
+
+<!-- .slide: data-background-color="#2f2f2f" data-transition="zoom" -->
+
+<span class="badge badge-blue" style="font-size: 0.6em;">Part 3</span>
+
+## Inside glibc's iconv
+
+Note:
+**Do:** *"We've seen what iconv does from the outside. Now let's look under the hood."*
+
+- **gconv** = glibc's internal conversion framework ("g" = GNU, "conv" = conversion)
+
+---
+
+<!-- .slide: data-background-color="#2f2f2f" data-transition="slide" -->
+
+<p class="slide-title">Inside glibc</p>
+
+### The naive approach: N×N converters
+
+Suppose I support 200 encodings. How many converters do I need?
+<!-- .element: class="medium" -->
+
+```text
+Shift-JIS → UTF-8       UTF-8 → Shift-JIS
+Shift-JIS → EUC-KR      EUC-KR → Shift-JIS
+UTF-8 → EUC-KR          EUC-KR → UTF-8
+...
+```
+<!-- .element: class="fragment fade-in" -->
+
+5 encodings = 20 converters. 200 encodings?
+<!-- .element: class="fragment fade-up" -->
+
+200 × 199 = <span class="red">39,800 converters</span>. That's not going to work.
+<!-- .element: class="fragment zoom-in" -->
+
+Note:
+**Do:** Ask *"How many converters do I need?"* before revealing. Let them guess.
+
+- Formula: N × (N-1) for directed pairs
+- Nobody will write 39,800 converters
+
+---
+
+<!-- .slide: data-auto-animate data-background-color="#2f2f2f" -->
+
+<p class="slide-title">Inside glibc</p>
+
+### The smart approach: one universal pivot
+
+What if every encoding just learned to convert to **one common format**?
+<!-- .element: class="medium" -->
+
+```text
+Shift-JIS  →  ???  →  UTF-8
+```
+<!-- .element: data-id="hub-text" class="fragment fade-in" -->
+
+Note:
+Hub-and-spoke architecture — same principle as airline routing through hub airports.
+
+--
+
+<!-- .slide: data-auto-animate data-background-color="#2f2f2f" -->
+
+<p class="slide-title">Inside glibc</p>
+
+### The smart approach: one universal pivot
+
+glibc's gconv framework uses an internal **UCS-4 based representation** as the pivot.
+
+```text
+Shift-JIS  →  UCS-4  →  UTF-8
+```
+<!-- .element: data-id="hub-text" -->
+
+Now you need just **2 converters per encoding** (to UCS-4 and from UCS-4).
+<!-- .element: class="fragment fade-up" -->
+
+200 encodings × 2 = <span class="green">400 converters</span> instead of 39,800.
+<!-- .element: class="fragment zoom-in" -->
+
+Note:
+- **UCS-4** = Universal Coded Character Set, 4-byte form (ISO 10646). Essentially UTF-32
+- glibc calls it **INTERNAL** in gconv-modules config
+- 2 converters per encoding → 400 total. 99% reduction
+- *Exception:* glibc says "UCS-4 *based*" — the internal representation has nuances around stateful encodings
+
+---
+
+<!-- .slide: data-background-color="#2f2f2f" data-transition="slide" -->
+
+<p class="slide-title">Inside glibc</p>
+
+### The lookup table: `gconv-modules`
+
+<pre><code class="language-text" data-line-numbers data-ln-start-from="47"># iconvdata/gconv-modules
+#   from             to              module     cost
+module  ISO-8859-1// INTERNAL        ISO8859-1   1
+module  INTERNAL     ISO-8859-1//    ISO8859-1   1</code></pre>
+
+<pre><code class="language-text" data-line-numbers data-ln-start-from="415"># iconvdata/gconv-modules-extra.conf
+module  SJIS//       INTERNAL        SJIS        1
+module  INTERNAL     SJIS//          SJIS        1</code></pre>
+
+`INTERNAL` = the UCS-4 pivot
+<!-- .element: class="fragment fade-up accent" -->
+
+Each line maps an encoding to a `.so` plugin. `iconv_open` reads this file, loads the right plugins, and chains them.
+<!-- .element: class="fragment fade-up small" -->
+
+Note:
+These are actual files from the glibc source tree.
+
+- Format: `module FROM// TO MODULE_NAME COST`
+- **INTERNAL** = glibc's name for UCS-4
+- **Cost** = routing weight when multiple paths exist (lower = preferred)
+- Each encoding has exactly 2 lines — one each direction. Hub-and-spoke in practice
+
+---
+
+<!-- .slide: data-background-color="#2f2f2f" data-transition="slide" -->
+
+<p class="slide-title">Inside glibc</p>
+
+### The conversion pipeline
+
+<div class="mermaid">
+<pre>
+flowchart TB
+    A["Shift-JIS bytes"] --> B["SJIS.so\n(gconv module)"]
+    B --> C["UCS-4\n(internal pivot)"]
+    C --> D["UTF-8 converter\n(built-in)"]
+    D --> E["UTF-8 bytes"]
+    style C fill:#0f62fe,stroke:#78a9ff,color:#fff
+    style B fill:#393939,stroke:#78a9ff,color:#c6c6c6
+    style D fill:#393939,stroke:#78a9ff,color:#c6c6c6
+    style A fill:#262626,stroke:#525252,color:#f1c21b
+    style E fill:#262626,stroke:#525252,color:#42be65
+</pre>
+</div>
+
+Adding a new encoding = writing **one** `.so` plugin.
+<!-- .element: class="fragment fade-up small" -->
+
+Note:
+**Do:** THIS IS THE MONEY SLIDE. Spend time here. Point at each box:
+1. *"Shift-JIS bytes come in"*
+2. *"SJIS.so converts to UCS-4"*
+3. *"UTF-8 converter turns UCS-4 into UTF-8"*
+4. *"UTF-8 bytes come out"*
+
+Adding a new encoding = one .so that converts to/from UCS-4. People will photograph this.
+
+---
+
+<!-- .slide: data-background-color="#2f2f2f" data-transition="slide" -->
+
+<p class="slide-title">Inside glibc</p>
+
+### The iconv flow
+
+<div class="mermaid">
+<pre>
+sequenceDiagram
+    participant App as Your Code
+    participant glibc as glibc internals
+    App->>glibc: iconv_open("UTF-8", "SJIS")
+    Note right of glibc: look up gconv-modules
+    Note right of glibc: load SJIS.so + UTF-8
+    Note right of glibc: build step chain
+    glibc-->>App: return descriptor
+    App->>glibc: iconv(cd, &in, ...)
+    Note right of glibc: step[0]: SJIS → UCS-4
+    Note right of glibc: step[1]: UCS-4 → UTF-8
+    glibc-->>App: advance pointers
+    App->>glibc: iconv_close(cd)
+    Note right of glibc: free chain, unload modules
+</pre>
+</div>
+
+Three calls. That's the entire API.
+<!-- .element: class="fragment fade-up small" -->
+
+Note:
+The API in three calls:
+1. **iconv_open** → returns descriptor (pointer to gconv_info struct with step chain)
+2. **iconv** → walks the chain. Both in/out pointers advance. Errors: **EILSEQ** (illegal sequence), **E2BIG** (output buffer full — flush and retry, not a real error), **EINVAL** (incomplete sequence)
+3. **iconv_close** → free chain, unload modules
+
+- *Highlight:* E2BIG is the #1 mistake — people call iconv once and assume it's done
+
+---
+
+<!-- ===================================================== -->
+<!-- SECTION 6: RELEVANCE TODAY                            -->
+<!-- ===================================================== -->
+
+<!-- .slide: data-background-color="#2f2f2f" data-transition="zoom" -->
+
+<span class="badge badge-red" style="font-size: 0.6em;">Part 4</span>
+
+## Does this still matter?
+
+Note:
+**Do:** *"Modern languages have Unicode strings by default. So why should anyone care about iconv in 2026?"*
+
+---
+
+<!-- .slide: data-background-color="#2f2f2f" data-transition="slide" -->
+
+<p class="slide-title">Relevance today</p>
+
+### How modern languages handle encoding
+
+| Language | Strings are... | Encoding conversion |
+|----------|----------------|---------------------|
+| **Python 3** | Unicode internally | Built-in codecs |
+| **Go** | UTF-8 by definition | `golang.org/x/text` |
+| **Rust** | Always valid UTF-8 | `encoding_rs` crate |
+| **Java** | UTF-16 internally | `java.nio.charset` |
+| **C/C++** | Just bytes — no encoding | **`iconv`** |
+
+Modern languages solved this by making strings Unicode-native. C didn't — and can't, because it would break 50 years of code.
+<!-- .element: class="fragment fade-up small" -->
+
+Note:
+- C can't change because `char = 1 byte` is baked into the language spec and **ABI** (Application Binary Interface)
+- Even modern languages need encoding conversion at **I/O boundaries** — files, sockets, C library calls via **FFI** (Foreign Function Interface)
+- Python's codecs, Go's x/text, Rust's encoding_rs all exist because the outside world isn't always UTF-8
+
+---
+
+<!-- .slide: data-background-color="#2f2f2f" data-transition="slide" -->
+
+<p class="slide-title">Relevance today</p>
+
+### Encoding bugs are alive and well
+
+<div class="two-col">
+<div class="card">
+
+#### The Turkish İ problem
+
+| Locale | `toupper('i')` |
+|--------|----------------|
+| en_US | I |
+| tr_TR | <span class="red">İ</span> (dotted!) |
+
+Tests pass in English, break in Turkish.
+
+</div>
+<div class="card">
+
+#### `//IGNORE` inconsistency
+
+```bash
+$ echo 'héllo' | iconv \
+  -f UTF-8 -t ASCII//IGNORE
+```
+
+Some modules skip the bad byte. Some stop with an error.
+**Same flag, different behavior.**
+
+</div>
+</div>
+
+<br />
+
+Every time a language reads a file, parses a socket, or calls a C library — encoding conversion still happens. These bugs still bite.
+<!-- .element: class="fragment fade-up accent small" -->
+
+Note:
+**Turkish İ:**
+- Turkish has 4 i's: i, İ, ı, I. toupper('i') → İ (U+0130), not I
+- Any case-insensitive comparison using toupper/tolower is locale-dependent
+
+**//IGNORE:**
+- Behavior depends on *which* gconv module runs — inconsistent across encodings
+- This is a real unfixed glibc bug. This is what got me into the codebase
+
+---
+
+<!-- ===================================================== -->
+<!-- SECTION 7: GLIBC WORKSHOP                             -->
+<!-- ===================================================== -->
+
+<!-- .slide: data-background-color="#2f2f2f" data-transition="fade" -->
+
+### glibc Development Workshop — Third Edition
+
+Led by **Arjun Shankar** (Red Hat, glibc developer)
+
+<span class="accent medium">Tomorrow, Friday June 19 · 10:15 AM · Room A218</span>
+
+Pick a bug, get a cheat sheet, ship a patch.
+
+6 patches in 2024 · 15+ in 2025 · **yours in 2026?**
+
+Note:
+**Do:** Tell the personal story:
+*"Two years ago I walked into this workshop at DevConf. Arjun gave me a small iconv task. I got curious, fell down the rabbit hole, and that became this talk. That one task turned into 14 patches in glibc."*
+
+- **Arjun Shankar** = Red Hat engineer, glibc developer. Runs this workshop yearly at DevConf.CZ
+- Format: show up, get a cheat sheet with a small bug + pointers, experienced contributors help you submit
+- Room A218, capacity 20. First come, first served
+- *"If anything in this talk made you curious, room A218 tomorrow morning."*
+
+---
+
+<!-- ===================================================== -->
+<!-- SECTION 8+9: REFERENCES + QUESTIONS                   -->
+<!-- ===================================================== -->
+
+<!-- .slide: data-background-color="#2f2f2f" data-transition="fade" -->
+
+### Questions? · Resources
+
+- **Joel Spolsky** — "The Absolute Minimum Every Software Developer Must Know About Unicode" <!-- .element: class="small" -->
+- **GNU C Library Manual** — "Character Set Handling" chapter <!-- .element: class="small" -->
+- **unicode.org** — the specification <!-- .element: class="small" -->
+
+<span class="badge badge-blue">avinal.space</span> · <span class="badge badge-purple">@avinal</span>
+
+Attendance at DevConf.CZ 2026 was supported by the **[GNU Toolchain Fund](https://my.fsf.org/civicrm/contribute/transact?reset=1&id=57)**, a part of the FSF's Working Together for Free Software Fund.
+<!-- .element: class="small" -->
+
+Note:
+**Do:** Leave this up during Q&A.
+
+- Joel Spolsky's article (2003) — the classic intro, entertaining
+- glibc manual — authoritative API reference (sourceware.org/glibc/manual)
+- **GNU Toolchain Fund** = part of the **FSF's** (Free Software Foundation) "Working Together for Free Software" fund

src/components/ActivityRow.astro

@@ -0,0 +1,445 @@
+---
+/**
+ * Combined activity card: graph (left) + stats (right) in one row.
+ * Mirrors jay.fish's "Commit Carnage" + "Kill Count" layout.
+ */
+import type { ActivityData } from "@/lib/activity";
+import type { GitHubUser } from "@/lib/github";
+
+interface Props {
+  activity: ActivityData;
+  user: GitHubUser | null;
+}
+
+const { activity, user } = Astro.props;
+const hasWaka = activity.wakatime.available;
+---
+
+<div class="activity-card card">
+  <div class="activity-header">
+    <h3 class="widget-title">
+      <span class="icon-trigger" id="gol-trigger">
+        <svg class="icon-heart" width="24" height="24" viewBox="0 0 24 24" fill="#e11d48" xmlns="http://www.w3.org/2000/svg">
+          <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
+        </svg>
+        <svg class="icon-signal" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
+      </span>
+      Activity
+    </h3>
+    <span class="text-muted text-xs" id="activity-subtitle">past year</span>
+  </div>
+
+  {activity.weeks.length > 0 ? (
+    <div class="graph-scroll">
+      <div class="graph-grid" role="img" aria-label="Activity graph">
+        {activity.weeks.map((week) => (
+          <div class="graph-col">
+            {week.map((day) => {
+              const ghLevel = day.githubLevel;
+              const wakaLvl = hasWaka && day.wakaSeconds > 0
+                ? Math.min(Math.max(1, Math.ceil(day.wakaSeconds / 1800)), 4)
+                : 0;
+
+              const d = new Date(day.date);
+              const fmtDate = `${String(d.getDate()).padStart(2, "0")} ${d.toLocaleString("en-US", { month: "short" })} ${d.getFullYear()}`;
+              const tipParts = [fmtDate, `${day.githubCount} contribution${day.githubCount !== 1 ? "s" : ""}`];
+              if (hasWaka && day.wakaSeconds > 0) tipParts.push(day.wakaText);
+              const tip = tipParts.join(" · ");
+
+              const hasGh = ghLevel > 0;
+              const hasWk = wakaLvl > 0;
+
+              let color: string;
+              if (hasGh && hasWk) {
+                const ghPct = Math.round((ghLevel / (ghLevel + wakaLvl)) * 100);
+                color = `color-mix(in oklch, var(--graph-${ghLevel}) ${ghPct}%, var(--waka-${wakaLvl}))`;
+              } else if (hasWk) {
+                color = `var(--waka-${wakaLvl})`;
+              } else {
+                color = `var(--graph-${ghLevel})`;
+              }
+              const isAlive = hasGh || hasWk;
+              return <div class="graph-cell" style={`background-color: ${color}`} title={tip} data-alive={isAlive ? "1" : "0"}></div>;
+            })}
+          </div>
+        ))}
+      </div>
+    </div>
+    <div class="graph-legend">
+      <span class="legend-group">
+        <span class="text-xs text-muted">GitHub</span>
+        <div class="legend-cell" style="background-color: var(--graph-1)"></div>
+        <div class="legend-cell" style="background-color: var(--graph-2)"></div>
+        <div class="legend-cell" style="background-color: var(--graph-3)"></div>
+        <div class="legend-cell" style="background-color: var(--graph-4)"></div>
+      </span>
+      {hasWaka && (
+        <span class="legend-group">
+          <span class="text-xs text-muted">Both</span>
+          <div class="legend-cell" style="background-color: color-mix(in oklch, var(--graph-2) 50%, var(--waka-2))"></div>
+          <div class="legend-cell" style="background-color: color-mix(in oklch, var(--graph-3) 50%, var(--waka-3))"></div>
+        </span>
+      )}
+      {hasWaka && (
+        <span class="legend-group">
+          <div class="legend-cell" style="background-color: var(--waka-1)"></div>
+          <div class="legend-cell" style="background-color: var(--waka-2)"></div>
+          <div class="legend-cell" style="background-color: var(--waka-3)"></div>
+          <div class="legend-cell" style="background-color: var(--waka-4)"></div>
+          <span class="text-xs text-muted">WakaTime</span>
+        </span>
+      )}
+    </div>
+  ) : (
+    <p class="text-muted text-sm">Activity data unavailable.</p>
+  )}
+
+  <!-- Stats below the graph -->
+  <div class="activity-stats">
+    <dl class="stats-row">
+      <div class="stat-item gh">
+        <dt>Contributions</dt>
+        <dd>{activity.github.total.toLocaleString()}</dd>
+      </div>
+      <div class="stat-item gh">
+        <dt>Public Repos</dt>
+        <dd>{user?.public_repos ?? "—"}</dd>
+      </div>
+      <div class="stat-item gh">
+        <dt>Followers</dt>
+        <dd>{user?.followers ?? "—"}</dd>
+      </div>
+      {hasWaka && (
+        <Fragment>
+          <div class="stat-item waka">
+            <dt>Tracked (year)</dt>
+            <dd>{activity.wakatime.totalText}</dd>
+          </div>
+          <div class="stat-item waka">
+            <dt>Daily Avg</dt>
+            <dd>{activity.wakatime.dailyAvgText}</dd>
+          </div>
+          <div class="stat-item waka">
+            <dt>Best Day</dt>
+            <dd>{activity.wakatime.bestDayText}</dd>
+          </div>
+        </Fragment>
+      )}
+    </dl>
+  </div>
+</div>
+
+<style>
+  .activity-card {
+    padding: var(--space-5);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+  }
+
+  .activity-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .graph-scroll {
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+  }
+
+  @media (max-width: 900px) {
+    .graph-scroll {
+      justify-content: flex-end;
+    }
+  }
+
+  .graph-grid {
+    display: flex;
+    gap: 3px;
+    flex-shrink: 0;
+  }
+
+  .graph-col {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+  }
+
+  .graph-cell {
+    width: 11px;
+    height: 11px;
+    border-radius: 2px;
+    cursor: default;
+  }
+
+  .graph-legend {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: var(--space-2);
+  }
+
+  .legend-group {
+    display: flex;
+    align-items: center;
+    gap: 3px;
+  }
+
+  .legend-cell {
+    width: 10px;
+    height: 10px;
+    border-radius: 2px;
+  }
+
+  /* Stats — horizontal row below the graph */
+  .activity-stats {
+    padding-top: var(--space-4);
+    border-top: 1px solid var(--border);
+  }
+
+  .stats-row {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: var(--space-4) var(--space-6);
+  }
+
+  .stat-item {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .stat-item dt {
+    font-size: var(--text-xs);
+    color: var(--text-muted);
+  }
+
+  .stat-item dd {
+    font-size: var(--text-sm);
+    font-weight: 700;
+    font-variant-numeric: tabular-nums;
+    color: var(--text);
+  }
+
+  .stat-item.gh dd {
+    color: var(--graph-3);
+  }
+
+  .stat-item.waka dd {
+    color: var(--waka-3);
+  }
+
+  /* Easter egg: heart icon trigger */
+  .icon-trigger {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    width: 26px;
+    height: 26px;
+  }
+
+  .icon-heart {
+    position: absolute;
+    opacity: 0;
+    transform: scale(0.6);
+    transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
+    pointer-events: none;
+  }
+
+  .icon-signal {
+    position: relative;
+    z-index: 1;
+    transition: opacity 0.3s var(--ease-out);
+  }
+
+  .icon-trigger:hover .icon-heart {
+    opacity: 0.4;
+    transform: scale(1);
+    animation: heart-pulse 1.2s ease-in-out infinite;
+  }
+
+  .icon-trigger:hover .icon-signal {
+    opacity: 0.6;
+  }
+
+  :global(.gol-active) .icon-heart {
+    opacity: 0.5;
+    transform: scale(1);
+    animation: heart-pulse 1.2s ease-in-out infinite;
+  }
+
+  :global(.gol-active) .icon-signal {
+    opacity: 0.5;
+  }
+
+  @keyframes heart-pulse {
+    0%, 100% { opacity: 0.3; transform: scale(0.88); }
+    50% { opacity: 0.6; transform: scale(1.12); }
+  }
+
+  :global(.gol-active) .graph-cell {
+    cursor: crosshair;
+  }
+</style>
+
+<script>
+  const trigger = document.getElementById("gol-trigger");
+  const card = document.querySelector(".activity-card");
+  const graphGrid = document.querySelector(".graph-grid") as HTMLElement | null;
+  const subtitle = document.getElementById("activity-subtitle");
+
+  if (trigger && graphGrid && card) {
+    let active = false;
+    let tickId: number | null = null;
+    let grid: number[][] = [];
+    let saved: { bg: string; title: string }[][] = [];
+
+    const columns = () => graphGrid.querySelectorAll(".graph-col");
+
+    function readGrid(): number[][] {
+      return Array.from(columns()).map((col) =>
+        Array.from(col.querySelectorAll(".graph-cell")).map((c) => {
+          if (c.getAttribute("data-alive") !== "1") return 0;
+          return Math.random() < 0.45 ? 1 : 0;
+        }),
+      );
+    }
+
+    function saveState() {
+      saved = Array.from(columns()).map((col) =>
+        Array.from(col.querySelectorAll(".graph-cell")).map((c) => ({
+          bg: (c as HTMLElement).style.backgroundColor,
+          title: c.getAttribute("title") || "",
+        })),
+      );
+    }
+
+    function restoreState() {
+      const cols = columns();
+      cols.forEach((col, ci) => {
+        col.querySelectorAll(".graph-cell").forEach((c, ri) => {
+          const el = c as HTMLElement;
+          el.style.backgroundColor = saved[ci]?.[ri]?.bg || "";
+          el.setAttribute("title", saved[ci]?.[ri]?.title || "");
+        });
+      });
+    }
+
+    function countAlive(): number {
+      return grid.reduce((s, col) => s + col.reduce((a, v) => a + v, 0), 0);
+    }
+
+    function step() {
+      const numC = grid.length;
+      const numR = grid[0]?.length || 0;
+      const out = grid.map((col) => col.map(() => 0));
+
+      for (let c = 0; c < numC; c++) {
+        for (let r = 0; r < numR; r++) {
+          let n = 0;
+          for (let dc = -1; dc <= 1; dc++) {
+            for (let dr = -1; dr <= 1; dr++) {
+              if (dc === 0 && dr === 0) continue;
+              n += grid[(c + dc + numC) % numC][(r + dr + numR) % numR];
+            }
+          }
+          const a = grid[c][r];
+          out[c][r] = a ? (n === 2 || n === 3 ? 1 : 0) : n === 3 ? 1 : 0;
+        }
+      }
+      grid = out;
+    }
+
+    function render() {
+      const style = getComputedStyle(document.documentElement);
+      const deadColor = style.getPropertyValue("--graph-0").trim();
+      const fallbackAlive = style.getPropertyValue("--accent").trim();
+
+      const cols = columns();
+      cols.forEach((col, ci) => {
+        col.querySelectorAll(".graph-cell").forEach((c, ri) => {
+          const el = c as HTMLElement;
+          const alive = grid[ci]?.[ri];
+          const origColor = saved[ci]?.[ri]?.bg;
+          const isOrigAlive = origColor && origColor !== deadColor;
+          el.style.backgroundColor = alive
+            ? (isOrigAlive ? origColor : fallbackAlive)
+            : deadColor;
+          el.setAttribute("title", "");
+        });
+      });
+    }
+
+    function tick() {
+      step();
+      if (countAlive() === 0) {
+        stop();
+        return;
+      }
+      render();
+      tickId = window.setTimeout(tick, 280);
+    }
+
+    function start() {
+      saveState();
+      grid = readGrid();
+
+      if (countAlive() < 10) {
+        for (let c = 0; c < grid.length; c++) {
+          for (let r = 0; r < (grid[0]?.length || 0); r++) {
+            if (Math.random() < 0.3) grid[c][r] = 1;
+          }
+        }
+      }
+
+      active = true;
+      card.classList.add("gol-active");
+      if (subtitle) subtitle.textContent = "hover to bring cells alive";
+      render();
+      tickId = window.setTimeout(tick, 280);
+    }
+
+    function stop() {
+      if (tickId !== null) clearTimeout(tickId);
+      tickId = null;
+      active = false;
+      card.classList.remove("gol-active");
+      if (subtitle) subtitle.textContent = "past year";
+      restoreState();
+    }
+
+    trigger.addEventListener("click", () => {
+      active ? stop() : start();
+    });
+
+    graphGrid.addEventListener("mousemove", (e) => {
+      if (!active) return;
+      const target = e.target as HTMLElement;
+      if (!target.classList.contains("graph-cell")) return;
+
+      const col = target.parentElement;
+      if (!col) return;
+      const allCols = Array.from(columns());
+      const ci = allCols.indexOf(col);
+      const cells = Array.from(col.querySelectorAll(".graph-cell"));
+      const ri = cells.indexOf(target);
+
+      if (ci < 0 || ri < 0) return;
+      for (let dc = -1; dc <= 1; dc++) {
+        for (let dr = -1; dr <= 1; dr++) {
+          const nc = ci + dc;
+          const nr = ri + dr;
+          if (nc >= 0 && nc < grid.length && nr >= 0 && nr < (grid[0]?.length || 0)) {
+            grid[nc][nr] = 1;
+          }
+        }
+      }
+    });
+  }
+</script>

src/components/Footer.astro

@@ -0,0 +1,65 @@
+---
+const year = new Date().getFullYear();
+---
+
+<footer class="footer">
+  <div class="footer-inner">
+    <p class="footer-copy">
+      &copy; {year} Avinal Kumar &middot;
+      Code <a href="https://opensource.org/licenses/MIT">MIT</a> &middot;
+      Content <a href="https://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4.0</a>
+    </p>
+    <a href="https://github.com/avinal/avinal.github.io/issues/new" class="footer-report" target="_blank" rel="noopener noreferrer">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
+      Report an issue
+    </a>
+  </div>
+</footer>
+
+<style>
+  .footer {
+    border-top: 1px solid var(--border);
+    padding-block: var(--space-8);
+  }
+
+  .footer-inner {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: var(--space-4);
+    max-width: var(--max-w-page);
+    margin-inline: auto;
+    padding-inline: var(--space-6);
+  }
+
+  .footer-copy {
+    font-size: var(--text-sm);
+    color: var(--text-muted);
+  }
+
+  .footer-copy a {
+    color: var(--text-muted);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+    transition: color var(--duration-fast) var(--ease-out);
+  }
+
+  .footer-copy a:hover {
+    color: var(--text);
+  }
+
+  .footer-report {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+    font-size: var(--text-sm);
+    color: var(--text-muted);
+    text-decoration: none;
+    transition: color var(--duration-fast) var(--ease-out);
+  }
+
+  .footer-report:hover {
+    color: var(--text);
+  }
+</style>

src/components/HeroCard.astro

@@ -0,0 +1,241 @@
+---
+/**
+ * Combined hero card: profile + about/skills + social links.
+ * Mirrors jay.fish's left hero section — everything about the person in one card.
+ */
+
+interface Skill {
+  icon: string;
+  title: string;
+  desc: string;
+  svgPath: string;
+}
+
+interface SocialLink {
+  label: string;
+  href: string;
+  icon: string;
+}
+
+interface Props {
+  name: string;
+  role: string;
+  bio: string;
+  avatarUrl?: string;
+}
+
+const { name, role, bio, avatarUrl } = Astro.props;
+
+const about: Skill[] = [
+  { icon: "cloud", title: "Cloud Native", desc: "Leading Builds for OpenShift at Red Hat", svgPath: '<path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"/>' },
+  { icon: "cpu", title: "Kernel & Toolchain", desc: "Linux kernel, GCC & glibc contributor", svgPath: '<rect x="4" y="4" width="16" height="16" rx="2" ry="2"/><rect x="9" y="9" width="6" height="6"/><line x1="9" y1="1" x2="9" y2="4"/><line x1="15" y1="1" x2="15" y2="4"/><line x1="9" y1="20" x2="9" y2="23"/><line x1="15" y1="20" x2="15" y2="23"/><line x1="20" y1="9" x2="23" y2="9"/><line x1="20" y1="14" x2="23" y2="14"/><line x1="1" y1="9" x2="4" y2="9"/><line x1="1" y1="14" x2="4" y2="14"/>' },
+  { icon: "code", title: "Open Source", desc: "GSoC alumnus & mentor, Campus Expert", svgPath: '<polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/>' },
+  { icon: "server", title: "Self-hosting", desc: "Fedora daily driver, homelab everything", svgPath: '<rect x="2" y="2" width="20" height="8" rx="2" ry="2"/><rect x="2" y="14" width="20" height="8" rx="2" ry="2"/><line x1="6" y1="6" x2="6.01" y2="6"/><line x1="6" y1="18" x2="6.01" y2="18"/>' },
+];
+
+const tools: Skill[] = [
+  { icon: "terminal", title: "Languages", desc: "C/C++, Go, Bash", svgPath: '<polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/>' },
+  { icon: "pen-tool", title: "Editor", desc: "Helix, Zellij, lazygit", svgPath: '<path d="M12 19l7-7 3 3-7 7-3-3z"/><path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"/><path d="M2 2l7.586 7.586"/><circle cx="11" cy="11" r="2"/>' },
+  { icon: "settings", title: "Platforms", desc: "Fedora, Git, CMake, GitHub Actions", svgPath: '<circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>' },
+];
+
+const links: SocialLink[] = [
+  { label: "GitHub", href: "https://github.com/avinal", icon: "github" },
+  { label: "LinkedIn", href: "https://linkedin.com/in/avinal", icon: "linkedin" },
+  { label: "Twitter", href: "https://twitter.com/Avinal_", icon: "twitter" },
+  { label: "WakaTime", href: "https://wakatime.com/@avinal", icon: "wakatime" },
+  { label: "RSS", href: "/rss.xml", icon: "rss" },
+];
+---
+
+<div class="hero-card card">
+  <!-- Identity -->
+  <div class="hero-identity">
+    {avatarUrl ? (
+      <img src={avatarUrl} alt={name} class="hero-avatar" width="64" height="64" />
+    ) : (
+      <div class="hero-avatar hero-avatar-fallback" aria-hidden="true">{name.charAt(0)}</div>
+    )}
+    <div>
+      <h1 class="hero-name">{name}</h1>
+      <p class="hero-role">{role}</p>
+    </div>
+  </div>
+
+  <p class="hero-bio">{bio}</p>
+
+  <!-- Skills columns -->
+  <div class="hero-skills">
+    <div class="skills-col">
+      <h3 class="col-heading">About</h3>
+      <ul class="skill-list">
+        {about.map(({ svgPath, title, desc }) => (
+          <li class="skill-item">
+            <svg class="skill-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><Fragment set:html={svgPath} /></svg>
+            <div>
+              <strong>{title}</strong>
+              <span class="skill-desc">{desc}</span>
+            </div>
+          </li>
+        ))}
+      </ul>
+    </div>
+    <div class="skills-col">
+      <h3 class="col-heading">Tools & Stack</h3>
+      <ul class="skill-list">
+        {tools.map(({ svgPath, title, desc }) => (
+          <li class="skill-item">
+            <svg class="skill-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><Fragment set:html={svgPath} /></svg>
+            <div>
+              <strong>{title}</strong>
+              <span class="skill-desc">{desc}</span>
+            </div>
+          </li>
+        ))}
+      </ul>
+    </div>
+  </div>
+
+  <!-- Social links -->
+  <div class="hero-links">
+    {links.map(({ label, href, icon }) => (
+      <a href={href} class="link-btn" target={href.startsWith("http") ? "_blank" : undefined} rel={href.startsWith("http") ? "noopener noreferrer" : undefined} aria-label={label}>
+        <svg class="link-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          {icon === "github" && <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/>}
+          {icon === "linkedin" && <Fragment><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></Fragment>}
+          {icon === "twitter" && <path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"/>}
+          {icon === "wakatime" && <Fragment><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z" fill="none"/><path d="M7.5 14.5l2-4 2 3 2-5 2.5 6" stroke-linejoin="round"/></Fragment>}
+          {icon === "rss" && <Fragment><path d="M4 11a9 9 0 0 1 9 9"/><path d="M4 4a16 16 0 0 1 16 16"/><circle cx="5" cy="19" r="1"/></Fragment>}
+        </svg>
+        {label}
+      </a>
+    ))}
+  </div>
+</div>
+
+<style>
+  .hero-card {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-5);
+  }
+
+  .hero-identity {
+    display: flex;
+    align-items: center;
+    gap: var(--space-4);
+  }
+
+  .hero-avatar {
+    width: 64px;
+    height: 64px;
+    border-radius: var(--radius-full);
+    object-fit: cover;
+    border: 2px solid var(--border);
+    flex-shrink: 0;
+  }
+
+  .hero-avatar-fallback {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--accent);
+    color: white;
+    font-size: var(--text-2xl);
+    font-weight: 700;
+  }
+
+  .hero-name {
+    font-size: var(--text-xl);
+    margin-bottom: 2px;
+  }
+
+  .hero-role {
+    font-size: var(--text-sm);
+    color: var(--text-secondary);
+  }
+
+  .hero-bio {
+    color: var(--text-secondary);
+    font-size: var(--text-sm);
+    line-height: var(--leading-relaxed);
+  }
+
+  .hero-skills {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--space-6);
+  }
+
+  @media (max-width: 600px) {
+    .hero-skills { grid-template-columns: 1fr; }
+  }
+
+  .col-heading {
+    font-size: var(--text-xs);
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--accent);
+    margin-bottom: var(--space-3);
+  }
+
+  .skill-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+  }
+
+  .skill-item {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--space-2);
+    font-size: var(--text-sm);
+  }
+
+  .skill-icon {
+    flex-shrink: 0;
+    margin-top: 2px;
+    color: var(--text-muted);
+  }
+
+  .skill-item strong {
+    font-weight: 600;
+    color: var(--text);
+    margin-right: var(--space-1);
+  }
+
+  .skill-desc {
+    color: var(--text-muted);
+  }
+
+  .hero-links {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-2);
+    padding-top: var(--space-2);
+    border-top: 1px solid var(--border);
+  }
+
+  .link-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--space-1) var(--space-3);
+    font-size: var(--text-xs);
+    font-weight: 500;
+    color: var(--text-secondary);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    text-decoration: none;
+    transition: all var(--duration-fast) var(--ease-out);
+  }
+
+  .link-btn:hover {
+    color: var(--text);
+    border-color: var(--border-strong);
+    background-color: var(--bg-surface-hover);
+  }
+
+  .link-icon { flex-shrink: 0; }
+</style>

src/components/MusicPlayer.astro

@@ -0,0 +1,479 @@
+---
+import type { LBData } from "@/lib/listenbrainz";
+
+interface Props {
+  lb: LBData;
+}
+
+const { lb } = Astro.props;
+const profileUrl = `https://listenbrainz.org/user/${lb.username}`;
+
+function timeAgo(ts?: number): string {
+  if (!ts) return "";
+  const diff = Math.floor(Date.now() / 1000) - ts;
+  if (diff < 60) return "just now";
+  if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
+  if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
+  return `${Math.floor(diff / 86400)}d ago`;
+}
+
+const isLive = !!lb.nowPlaying;
+const hero = lb.nowPlaying ?? lb.recentTracks[0] ?? null;
+---
+
+<div class="mc card" id="music-widget" data-user={lb.username} data-live={isLive ? "1" : "0"}>
+  <div class="mc-header"></div>
+
+  <div class="mc-body" id="mc-body">
+    {hero ? (
+      <>
+        <a href={profileUrl} target="_blank" rel="noopener noreferrer" class="mc-hero" id="mc-hero">
+          <div class="mc-art-wrap">
+            <img
+              class="mc-art"
+              src={hero.coverArtUrl ?? ""}
+              alt=""
+              onerror="this.style.display='none'"
+            />
+            <div class="mc-art-ph">
+              <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" opacity="0.25"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
+            </div>
+          </div>
+          <div class="mc-overlay">
+            <span class="mc-badge" id="mc-badge">
+              {isLive ? (<><span class="mc-dot"></span>playing</>) : "last played"}
+            </span>
+            <div class="mc-marquee-wrap">
+              <span class="mc-marquee" id="mc-marquee">{hero.trackName} &mdash; {hero.artistName}</span>
+            </div>
+          </div>
+        </a>
+
+        <ul class="mc-recent" id="mc-recent">
+          {lb.recentTracks.slice(0, 4).map((t) => (
+            <li class="mc-track">
+              <img
+                class="mc-thumb"
+                src={t.coverArtUrl ?? ""}
+                alt=""
+                loading="lazy"
+                onerror="this.classList.add('mc-thumb-hide')"
+              />
+              <div class="mc-track-info">
+                <span class="mc-track-name">{t.trackName}</span>
+                <span class="mc-track-artist">{t.artistName}</span>
+              </div>
+              <span class="mc-track-time">{timeAgo(t.listenedAt)}</span>
+            </li>
+          ))}
+        </ul>
+      </>
+    ) : (
+      <div class="mc-empty">
+        <span class="text-muted text-xs">No listening data yet</span>
+      </div>
+    )}
+  </div>
+
+  <a href="https://listenbrainz.org" class="mc-powered" target="_blank" rel="noopener noreferrer">powered by ListenBrainz</a>
+</div>
+
+<style is:global>
+  .mc {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  .mc-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 0;
+  }
+
+  .mc-header .widget-title {
+    margin-bottom: 0;
+  }
+
+  .mc-link { color: inherit; text-decoration: none; }
+  .mc-link:hover { color: var(--accent); }
+
+  .mc-body {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    overflow: hidden;
+  }
+
+  /* ---- Hero: art + overlay ---- */
+  .mc-hero {
+    display: block;
+    text-decoration: none;
+    color: inherit;
+    position: relative;
+    overflow: hidden;
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+    flex-shrink: 0;
+  }
+
+  .mc-art-wrap {
+    position: relative;
+    width: 100%;
+    aspect-ratio: 1;
+    max-height: 200px;
+    background: linear-gradient(135deg, var(--bg-surface-hover) 0%, var(--border) 100%);
+    overflow: hidden;
+  }
+
+  .mc-art {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+    position: relative;
+    z-index: 1;
+  }
+
+  .mc-art-ph {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 0;
+  }
+
+  .mc-overlay {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: var(--space-3) var(--space-2) var(--space-2);
+    background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.3) 65%, transparent 100%);
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+    z-index: 2;
+  }
+
+  .mc-badge {
+    font-size: 10px;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    font-weight: 600;
+    color: rgba(255,255,255,0.7);
+    display: flex;
+    align-items: center;
+    gap: 5px;
+  }
+
+  .mc-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: #22c55e;
+    animation: mc-pulse 2s ease-in-out infinite;
+  }
+
+  @keyframes mc-pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.35; }
+  }
+
+  .mc-marquee-wrap {
+    overflow: hidden;
+    white-space: nowrap;
+    mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
+    -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
+  }
+
+  .mc-marquee {
+    display: inline-block;
+    font-size: var(--text-sm);
+    font-weight: 600;
+    color: #fff;
+    animation: mc-scroll 12s linear infinite;
+    padding-right: 3em;
+  }
+
+  @keyframes mc-scroll {
+    0%   { transform: translateX(0); }
+    100% { transform: translateX(-50%); }
+  }
+
+  .mc[data-live="0"] .mc-marquee {
+    animation: none;
+  }
+
+  /* ---- Recent list ---- */
+  .mc-recent {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    flex: 1;
+    overflow: hidden;
+  }
+
+  .mc-track {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding: 3px 0;
+  }
+
+  .mc-thumb {
+    width: 28px;
+    height: 28px;
+    border-radius: 3px;
+    object-fit: cover;
+    flex-shrink: 0;
+    background: var(--border);
+  }
+
+  .mc-thumb-hide { display: none; }
+
+  .mc-track-info {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .mc-track-name {
+    font-size: var(--text-xs);
+    font-weight: 500;
+    color: var(--text-secondary);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .mc-track-artist {
+    font-size: 11px;
+    color: var(--text-muted);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .mc-track-time {
+    font-size: 11px;
+    color: var(--text-muted);
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+
+  .mc-empty {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .mc-powered {
+    display: block;
+    text-align: center;
+    font-size: 10px;
+    color: var(--text-muted);
+    text-decoration: none;
+    opacity: 0.6;
+    padding-top: var(--space-2);
+    margin-top: auto;
+    transition: opacity var(--duration-fast) var(--ease-out);
+  }
+
+  .mc-powered:hover {
+    opacity: 1;
+    color: var(--accent);
+  }
+
+  /* ---- Mid-size: side-by-side (art left, recents right) ---- */
+  @media (min-width: 600px) and (max-width: 1100px) {
+    .mc-body {
+      flex-direction: row;
+      align-items: flex-start;
+    }
+
+    .mc-hero {
+      width: 150px;
+      flex-shrink: 0;
+    }
+
+    .mc-art-wrap {
+      width: 150px;
+      height: 150px;
+      max-height: none;
+      aspect-ratio: 1;
+    }
+
+    .mc-recent {
+      flex: 1;
+      justify-content: center;
+    }
+  }
+
+  /* ---- Mobile: column, smaller art ---- */
+  @media (max-width: 599px) {
+    .mc-art-wrap {
+      max-height: 160px;
+    }
+  }
+</style>
+
+<script>
+  const API = "https://api.listenbrainz.org/1";
+  const widget = document.getElementById("music-widget");
+
+  if (widget) {
+    const user = widget.dataset.user;
+    const body = document.getElementById("mc-body")!;
+
+    function timeAgo(ts: number): string {
+      const diff = Math.floor(Date.now() / 1000) - ts;
+      if (diff < 60) return "just now";
+      if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
+      if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
+      return `${Math.floor(diff / 86400)}d ago`;
+    }
+
+    function coverUrl(listen: any): string {
+      const mbids = listen.track_metadata?.mbid_mapping ?? {};
+      const info = listen.track_metadata?.additional_info ?? {};
+      const rid = mbids.release_mbid ?? mbids.caa_release_mbid ?? info.release_mbid;
+      if (rid) return `https://coverartarchive.org/release/${rid}/front-250`;
+      const rgid = mbids.release_group_mbid;
+      if (rgid) return `https://coverartarchive.org/release-group/${rgid}/front-250`;
+      return "";
+    }
+
+    async function fetchItunesArt(track: string, artist: string): Promise<string> {
+      try {
+        const q = encodeURIComponent(`${track} ${artist}`);
+        const res = await fetch(`https://itunes.apple.com/search?term=${q}&media=music&limit=1`);
+        if (!res.ok) return "";
+        const data = await res.json();
+        const url = data.results?.[0]?.artworkUrl100;
+        return url ? url.replace("100x100", "250x250") : "";
+      } catch { return ""; }
+    }
+
+    function attachArtFallback(img: HTMLImageElement, track: string, artist: string) {
+      img.addEventListener("error", async () => {
+        if (img.dataset.fallbackTried) { img.style.display = "none"; return; }
+        img.dataset.fallbackTried = "1";
+        const alt = await fetchItunesArt(track, artist);
+        if (alt) { img.src = alt; } else { img.style.display = "none"; }
+      }, { once: false });
+    }
+
+    function esc(s: string): string {
+      const d = document.createElement("div");
+      d.textContent = s;
+      return d.innerHTML;
+    }
+
+    function renderHero(listen: any, isLive: boolean): string {
+      const meta = listen.track_metadata ?? {};
+      const cover = coverUrl(listen);
+      const track = esc(meta.track_name ?? "Unknown");
+      const artist = esc(meta.artist_name ?? "Unknown");
+      const marqueeText = `${track} &mdash; ${artist}`;
+
+      const badge = isLive
+        ? `<span class="mc-dot"></span>playing`
+        : "last played";
+
+      const profileHref = `https://listenbrainz.org/user/${widget.dataset.user}`;
+      return `
+        <a class="mc-hero" href="${profileHref}" target="_blank" rel="noopener noreferrer">
+          <div class="mc-art-wrap">
+            ${cover ? `<img class="mc-art" src="${cover}" alt="" data-track="${track}" data-artist="${artist}" />` : `<img class="mc-art" src="" alt="" data-track="${track}" data-artist="${artist}" data-no-cover="1" style="display:none" />`}
+            <div class="mc-art-ph">
+              <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" opacity="0.25"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
+            </div>
+          </div>
+          <div class="mc-overlay">
+            <span class="mc-badge">${badge}</span>
+            <div class="mc-marquee-wrap">
+              <span class="mc-marquee">${marqueeText}${isLive ? `&nbsp;&nbsp;&nbsp;&nbsp;${marqueeText}` : ""}</span>
+            </div>
+          </div>
+        </a>`;
+    }
+
+    function renderRecent(listens: any[]): string {
+      return listens.slice(0, 4).map((l) => {
+        const meta = l.track_metadata ?? {};
+        const cover = coverUrl(l);
+        const ago = l.listened_at ? timeAgo(l.listened_at) : "";
+        const thumb = `<img class="mc-thumb" src="${cover || ""}" alt="" loading="lazy" data-track="${esc(meta.track_name ?? "")}" data-artist="${esc(meta.artist_name ?? "")}" ${!cover ? 'data-no-cover="1" style="display:none"' : ""} />`;
+        return `<li class="mc-track">
+          ${thumb}
+          <div class="mc-track-info">
+            <span class="mc-track-name">${esc(meta.track_name ?? "Unknown")}</span>
+            <span class="mc-track-artist">${esc(meta.artist_name ?? "Unknown")}</span>
+          </div>
+          <span class="mc-track-time">${ago}</span>
+        </li>`;
+      }).join("");
+    }
+
+    async function refresh() {
+      try {
+        const [npRes, recRes] = await Promise.all([
+          fetch(`${API}/user/${user}/playing-now`),
+          fetch(`${API}/user/${user}/listens?count=5`),
+        ]);
+
+        let np: any = null;
+        if (npRes.ok) {
+          const d = await npRes.json();
+          np = d?.payload?.listens?.[0] ?? null;
+        }
+
+        let listens: any[] = [];
+        if (recRes.ok) {
+          const d = await recRes.json();
+          listens = d?.payload?.listens ?? [];
+        }
+
+        const isLive = !!np;
+        const hero = np ?? listens[0] ?? null;
+
+        widget.setAttribute("data-live", isLive ? "1" : "0");
+
+        if (!hero) {
+          body.innerHTML = `<div class="mc-empty"><span class="text-muted text-xs">No listening data yet</span></div>`;
+          return;
+        }
+
+        body.innerHTML = renderHero(hero, isLive)
+          + `<ul class="mc-recent">${renderRecent(listens)}</ul>`;
+
+        body.querySelectorAll<HTMLImageElement>("img[data-track]").forEach((img) => {
+          const t = img.dataset.track ?? "";
+          const a = img.dataset.artist ?? "";
+          if (img.dataset.noCover === "1") {
+            fetchItunesArt(t, a).then((url) => {
+              if (url) { img.src = url; img.style.display = ""; }
+            });
+          } else {
+            attachArtFallback(img, t, a);
+          }
+        });
+      } catch {
+        // keep existing content on error
+      }
+    }
+
+    refresh();
+    setInterval(refresh, 30_000);
+  }
+</script>

src/components/Nav.astro

@@ -0,0 +1,227 @@
+---
+const navLinks: { href: string; label: string; external?: boolean }[] = [
+  { href: "/", label: "Home" },
+  { href: "/posts", label: "Posts" },
+  { href: "/resume", label: "Resume" },
+  { href: "/events", label: "Events" },
+  { href: "/contributions", label: "Contributions" },
+  { href: "/meeting", label: "Meet" },
+];
+
+const currentPath = Astro.url.pathname;
+
+function isActive(href: string): boolean {
+  if (href === "/") return currentPath === "/";
+  return currentPath.startsWith(href);
+}
+---
+
+<header class="nav-header">
+  <nav class="nav" aria-label="Main navigation">
+    <a href="/" class="nav-logo" aria-label="avinal.space home">
+      avinal<span class="nav-logo-dot">.</span>space
+    </a>
+
+    <button
+      class="nav-toggle"
+      aria-label="Toggle menu"
+      aria-expanded="false"
+      aria-controls="nav-menu"
+    >
+      <span class="nav-toggle-bar"></span>
+      <span class="nav-toggle-bar"></span>
+      <span class="nav-toggle-bar"></span>
+    </button>
+
+    <ul id="nav-menu" class="nav-links" role="list">
+      {navLinks.map(({ href, label, external }) => (
+        <li>
+          <a
+            href={href}
+            class:list={["nav-link", { active: !external && isActive(href) }]}
+            aria-current={!external && isActive(href) ? "page" : undefined}
+            target={external ? "_blank" : undefined}
+            rel={external ? "noopener noreferrer" : undefined}
+          >
+            {label}
+          </a>
+        </li>
+      ))}
+      <li>
+        <button class="theme-toggle" aria-label="Toggle dark mode" type="button">
+          <svg class="icon-sun" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
+          <svg class="icon-moon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
+        </button>
+      </li>
+    </ul>
+  </nav>
+</header>
+
+<style>
+  .nav-header {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    background-color: color-mix(in srgb, var(--bg) 85%, transparent);
+    backdrop-filter: blur(12px);
+    border-bottom: 1px solid var(--border);
+  }
+
+  .nav {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    max-width: var(--max-w-page);
+    margin-inline: auto;
+    padding-inline: var(--space-6);
+    height: var(--nav-height);
+  }
+
+  .nav-logo {
+    font-weight: 700;
+    font-size: var(--text-lg);
+    letter-spacing: var(--tracking-tight);
+    color: var(--text);
+    text-decoration: none;
+  }
+
+  .nav-logo-dot {
+    color: var(--accent);
+  }
+
+  .nav-links {
+    display: flex;
+    align-items: center;
+    gap: var(--space-1);
+  }
+
+  .nav-link {
+    display: block;
+    padding: var(--space-2) var(--space-3);
+    font-size: var(--text-sm);
+    font-weight: 500;
+    color: var(--text-secondary);
+    border-radius: var(--radius-md);
+    text-decoration: none;
+    transition: color var(--duration-fast) var(--ease-out),
+      background-color var(--duration-fast) var(--ease-out);
+  }
+
+  .nav-link:hover {
+    color: var(--text);
+    background-color: var(--bg-surface-hover);
+  }
+
+  .nav-link.active {
+    color: var(--text);
+    background-color: var(--bg-surface-hover);
+  }
+
+  .theme-toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    padding: 0;
+    border: none;
+    border-radius: var(--radius-md);
+    background: transparent;
+    color: var(--text-secondary);
+    cursor: pointer;
+    transition: color var(--duration-fast) var(--ease-out),
+      background-color var(--duration-fast) var(--ease-out);
+  }
+
+  .theme-toggle:hover {
+    color: var(--text);
+    background-color: var(--bg-surface-hover);
+  }
+
+  .icon-moon { display: none; }
+
+  :global([data-theme="dark"]) .icon-sun { display: none; }
+  :global([data-theme="dark"]) .icon-moon { display: block; }
+
+  @media (prefers-color-scheme: dark) {
+    :global(:root:not([data-theme="light"])) .icon-sun { display: none; }
+    :global(:root:not([data-theme="light"])) .icon-moon { display: block; }
+  }
+
+  /* Mobile hamburger */
+  .nav-toggle {
+    display: none;
+    flex-direction: column;
+    justify-content: center;
+    gap: 4px;
+    width: 2rem;
+    height: 2rem;
+    padding: 0;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+  }
+
+  .nav-toggle-bar {
+    display: block;
+    width: 18px;
+    height: 2px;
+    background-color: var(--text);
+    border-radius: 1px;
+    transition: transform var(--duration-fast) var(--ease-out),
+      opacity var(--duration-fast) var(--ease-out);
+  }
+
+  @media (max-width: 768px) {
+    .nav-toggle {
+      display: flex;
+    }
+
+    .nav-links {
+      position: absolute;
+      top: var(--nav-height);
+      left: 0;
+      right: 0;
+      flex-direction: column;
+      align-items: stretch;
+      padding: var(--space-4) var(--space-6);
+      background-color: var(--bg);
+      border-bottom: 1px solid var(--border);
+      display: none;
+    }
+
+    .nav-links.open {
+      display: flex;
+    }
+
+    .nav-link {
+      padding: var(--space-3) var(--space-4);
+    }
+  }
+</style>
+
+<script>
+  const toggle = document.querySelector(".nav-toggle");
+  const menu = document.getElementById("nav-menu");
+  if (toggle && menu) {
+    toggle.addEventListener("click", () => {
+      const expanded = toggle.getAttribute("aria-expanded") === "true";
+      toggle.setAttribute("aria-expanded", String(!expanded));
+      menu.classList.toggle("open");
+    });
+  }
+
+  const themeToggle = document.querySelector(".theme-toggle");
+  if (themeToggle) {
+    themeToggle.addEventListener("click", () => {
+      const html = document.documentElement;
+      const current = html.getAttribute("data-theme");
+      const isDark =
+        current === "dark" ||
+        (!current && window.matchMedia("(prefers-color-scheme: dark)").matches);
+      const next = isDark ? "light" : "dark";
+      html.setAttribute("data-theme", next);
+      localStorage.setItem("theme", next);
+    });
+  }
+</script>

src/components/RecentPosts.astro

@@ -0,0 +1,183 @@
+---
+import type { CollectionEntry } from "astro:content";
+
+interface Props {
+  posts: CollectionEntry<"posts">[];
+}
+
+const { posts } = Astro.props;
+
+const fmtDate = (d: Date) =>
+  d.toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+  });
+---
+
+<div class="posts-card card">
+  <div class="posts-header">
+    <h3 class="widget-title">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
+      Recent Posts
+    </h3>
+    <a href="/posts" class="posts-view-all">View all &rarr;</a>
+  </div>
+
+  {posts.length > 0 ? (
+    <ul class="posts-list">
+      {posts.map((post) => (
+        <li class="post-item">
+          <a href={`/posts/${post.id}/`} class="post-link">
+            <div class="post-thumb">
+              {post.data.image ? (
+                <img src={post.data.image} alt={post.data.title} class="thumb-img" loading="lazy" decoding="async" />
+              ) : (
+                <span class="thumb-placeholder">{post.data.title.charAt(0)}</span>
+              )}
+            </div>
+            <div class="post-info">
+              <div class="post-meta">
+                <span class="badge">{post.data.category}</span>
+                <span class="text-muted text-xs">{fmtDate(post.data.date)}</span>
+              </div>
+              <strong class="post-title">{post.data.title}</strong>
+              {post.data.description && (
+                <p class="post-desc">{post.data.description}</p>
+              )}
+            </div>
+          </a>
+        </li>
+      ))}
+    </ul>
+  ) : (
+    <p class="text-muted text-sm">No posts yet.</p>
+  )}
+</div>
+
+<style>
+  .posts-card {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+  }
+
+  .posts-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .posts-view-all {
+    font-size: var(--text-sm);
+    color: var(--accent);
+    text-decoration: none;
+    font-weight: 500;
+  }
+
+  .posts-view-all:hover {
+    text-decoration: underline;
+  }
+
+  .posts-list {
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+  }
+
+  .post-item {
+    border-top: 1px solid var(--border);
+  }
+
+  .post-item:first-child {
+    border-top: none;
+  }
+
+  .post-link {
+    display: grid;
+    grid-template-columns: 140px 1fr;
+    gap: var(--space-4);
+    padding: var(--space-3) var(--space-2);
+    text-decoration: none;
+    color: inherit;
+    border-radius: var(--radius-sm);
+    transition: background-color var(--duration-fast) var(--ease-out);
+  }
+
+  .post-link:hover {
+    background-color: var(--bg-surface-hover);
+  }
+
+  .post-thumb {
+    aspect-ratio: 3 / 2;
+    border-radius: var(--radius-sm);
+    overflow: hidden;
+    background-color: var(--bg-surface-hover);
+  }
+
+  @media (max-width: 600px) {
+    .post-link {
+      grid-template-columns: 1fr;
+      gap: var(--space-3);
+    }
+
+    .post-thumb {
+      aspect-ratio: 16 / 9;
+    }
+  }
+
+  .thumb-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    filter: grayscale(100%);
+    transition: filter var(--duration-normal) var(--ease-out);
+  }
+
+  .post-link:hover .thumb-img {
+    filter: grayscale(0%);
+  }
+
+  .thumb-placeholder {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    font-size: var(--text-lg);
+    font-weight: 700;
+    color: var(--text-muted);
+    opacity: 0.3;
+  }
+
+  .post-info {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  .post-meta {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    margin-bottom: var(--space-2);
+  }
+
+  .post-title {
+    font-size: var(--text-base);
+    color: var(--text);
+    display: block;
+  }
+
+  .post-desc {
+    font-size: var(--text-sm);
+    color: var(--text-muted);
+    margin-top: var(--space-1);
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+</style>

src/components/RelatedPosts.astro

@@ -0,0 +1,157 @@
+---
+import type { CollectionEntry } from "astro:content";
+
+interface Props {
+  posts: CollectionEntry<"posts">[];
+}
+
+const { posts } = Astro.props;
+
+const fmtDate = (d: Date) =>
+  d.toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+  });
+---
+
+<aside class="related" aria-label="Related posts">
+  <h2 class="related-heading">Related Posts</h2>
+  <ul class="related-list">
+    {posts.map((post) => (
+      <li class="related-item">
+        <a href={`/posts/${post.id}/`} class="related-link">
+          <div class="related-thumb">
+            {post.data.image ? (
+              <img src={post.data.image} alt={post.data.title} class="thumb-img" loading="lazy" decoding="async" />
+            ) : (
+              <span class="thumb-placeholder">{post.data.title.charAt(0)}</span>
+            )}
+          </div>
+          <div class="related-info">
+            <div class="related-meta">
+              <span class="badge">{post.data.category}</span>
+              <span class="text-muted text-xs">{fmtDate(post.data.date)}</span>
+            </div>
+            <strong class="related-title">{post.data.title}</strong>
+            {post.data.description && (
+              <p class="related-desc">{post.data.description}</p>
+            )}
+          </div>
+        </a>
+      </li>
+    ))}
+  </ul>
+</aside>
+
+<style>
+  .related {
+    border-top: 1px solid var(--border);
+    padding-top: var(--space-8);
+    margin-top: var(--space-10);
+  }
+
+  .related-heading {
+    font-size: var(--text-lg);
+    margin-bottom: var(--space-4);
+  }
+
+  .related-list {
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+  }
+
+  .related-item {
+    border-top: 1px solid var(--border);
+  }
+
+  .related-item:first-child {
+    border-top: none;
+  }
+
+  .related-link {
+    display: grid;
+    grid-template-columns: 140px 1fr;
+    gap: var(--space-4);
+    padding: var(--space-3) var(--space-2);
+    text-decoration: none;
+    color: inherit;
+    transition: background-color var(--duration-fast) var(--ease-out);
+  }
+
+  .related-link:hover {
+    background-color: var(--bg-surface-hover);
+  }
+
+  .related-thumb {
+    aspect-ratio: 3 / 2;
+    overflow: hidden;
+    background-color: var(--bg-surface-hover);
+  }
+
+  .thumb-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    filter: grayscale(100%);
+    transition: filter var(--duration-normal) var(--ease-out);
+  }
+
+  .related-link:hover .thumb-img {
+    filter: grayscale(0%);
+  }
+
+  .thumb-placeholder {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    font-size: var(--text-lg);
+    font-weight: 700;
+    color: var(--text-muted);
+    opacity: 0.3;
+  }
+
+  .related-info {
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  .related-meta {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    margin-bottom: var(--space-2);
+  }
+
+  .related-title {
+    font-size: var(--text-base);
+    color: var(--text);
+    display: block;
+  }
+
+  .related-desc {
+    font-size: var(--text-sm);
+    color: var(--text-muted);
+    margin-top: var(--space-1);
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  @media (max-width: 600px) {
+    .related-link {
+      grid-template-columns: 1fr;
+      gap: var(--space-3);
+    }
+
+    .related-thumb {
+      aspect-ratio: 16 / 9;
+    }
+  }
+</style>

src/components/RepoList.astro

@@ -0,0 +1,199 @@
+---
+import type { GitHubRepo } from "@/lib/github";
+import configRepos from "@/data/repos.json";
+
+interface ConfigRepo {
+  name: string;
+  owner?: string;
+  description: string;
+  url: string;
+  stars: number;
+  forks: number;
+  languages: { name: string; color: string }[];
+}
+
+interface Props {
+  repos: GitHubRepo[];
+}
+
+const { repos: apiRepos } = Astro.props;
+
+const useConfig = configRepos.length > 0;
+const items: ConfigRepo[] = useConfig
+  ? (configRepos as ConfigRepo[])
+  : apiRepos.map((r) => ({
+      name: r.name,
+      owner: "avinal",
+      description: r.description || "",
+      url: r.html_url,
+      stars: r.stargazers_count,
+      forks: 0,
+      languages: r.language ? [{ name: r.language, color: "" }] : [],
+    }));
+---
+
+<div class="repos-section">
+  <h3 class="widget-title">
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
+    Repositories
+  </h3>
+  <div class="repo-grid">
+    {items.map((repo) => (
+      <a href={repo.url} class="repo-card card" target="_blank" rel="noopener noreferrer">
+        <div class="repo-top">
+          <div class="repo-name-row">
+            {repo.owner && <span class="repo-owner">{repo.owner}/</span>}
+            <span class="repo-name">{repo.name}</span>
+          </div>
+          <p class="repo-desc">{repo.description}</p>
+        </div>
+        <div class="repo-bottom">
+          <div class="repo-meta">
+            {repo.stars > 0 && (
+              <span class="meta-badge">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
+                {repo.stars.toLocaleString()}
+              </span>
+            )}
+            {repo.forks > 0 && (
+              <span class="meta-badge">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="18" r="3"/><circle cx="6" cy="6" r="3"/><circle cx="18" cy="6" r="3"/><path d="M18 9v1a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V9"/><path d="M12 12v3"/></svg>
+                {repo.forks.toLocaleString()}
+              </span>
+            )}
+          </div>
+          <div class="repo-langs">
+            {repo.languages.slice(0, 2).map((lang) => (
+              <span class="lang-tag">
+                <span class="lang-dot" style={lang.color ? `background:${lang.color}` : undefined} />
+                {lang.name}
+              </span>
+            ))}
+          </div>
+        </div>
+      </a>
+    ))}
+  </div>
+</div>
+
+<style>
+  .repos-section {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+  }
+
+  .repo-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: var(--space-4);
+  }
+
+  @media (max-width: 640px) {
+    .repo-grid {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  .repo-card {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    padding: var(--space-4) var(--space-5);
+    text-decoration: none;
+    color: inherit;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    transition: border-color var(--duration-fast) var(--ease-out),
+      box-shadow var(--duration-fast) var(--ease-out),
+      transform var(--duration-fast) var(--ease-out);
+  }
+
+  .repo-card:hover {
+    border-color: var(--accent);
+    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 10%, transparent);
+    transform: translateY(-2px);
+  }
+
+  .repo-top {
+    margin-bottom: var(--space-4);
+  }
+
+  .repo-name-row {
+    display: flex;
+    align-items: baseline;
+    gap: 0;
+    margin-bottom: var(--space-2);
+    font-size: var(--text-sm);
+  }
+
+  .repo-owner {
+    color: var(--text-muted);
+    font-weight: 400;
+  }
+
+  .repo-name {
+    font-weight: 700;
+    color: var(--accent);
+  }
+
+  .repo-desc {
+    font-size: var(--text-sm);
+    color: var(--text-secondary);
+    line-height: var(--leading-relaxed);
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .repo-bottom {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-3);
+    padding-top: var(--space-3);
+    border-top: 1px solid var(--border);
+  }
+
+  .repo-meta {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+  }
+
+  .meta-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 3px;
+    font-size: var(--text-xs);
+    color: var(--text-muted);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .meta-badge svg {
+    flex-shrink: 0;
+  }
+
+  .repo-langs {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+  }
+
+  .lang-tag {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    font-size: var(--text-xs);
+    color: var(--text-muted);
+  }
+
+  .lang-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: var(--radius-full);
+    display: inline-block;
+    background-color: var(--text-muted);
+  }
+</style>

src/components/TableOfContents.astro

@@ -0,0 +1,88 @@
+---
+interface Props {
+  headings: { depth: number; slug: string; text: string }[];
+}
+
+const { headings } = Astro.props;
+---
+
+<details class="toc">
+  <summary class="toc-toggle">
+    <span class="toc-label">Table of Contents</span>
+    <svg class="toc-chevron" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
+  </summary>
+  <nav class="toc-nav" aria-label="Table of contents">
+    <ol class="toc-list">
+      {headings.map((h) => (
+        <li class:list={[`toc-depth-${h.depth}`]}>
+          <a href={`#${h.slug}`} class="toc-link">{h.text}</a>
+        </li>
+      ))}
+    </ol>
+  </nav>
+</details>
+
+<style>
+  .toc {
+    border: 1px solid var(--border);
+    padding: var(--space-4) var(--space-5);
+    margin-bottom: var(--space-8);
+    background-color: var(--bg-surface);
+  }
+
+  .toc-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+    list-style: none;
+    font-size: var(--text-sm);
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--accent);
+  }
+
+  .toc-toggle::-webkit-details-marker {
+    display: none;
+  }
+
+  .toc-chevron {
+    transform: rotate(-90deg);
+    transition: transform var(--duration-fast) var(--ease-out);
+  }
+
+  .toc[open] .toc-chevron {
+    transform: rotate(0deg);
+  }
+
+  .toc-nav {
+    margin-top: var(--space-3);
+    padding-top: var(--space-3);
+    border-top: 1px solid var(--border);
+  }
+
+  .toc-list {
+    list-style: none;
+    padding: 0;
+  }
+
+  .toc-list li {
+    padding: var(--space-1) 0;
+  }
+
+  .toc-depth-3 {
+    padding-left: var(--space-4);
+  }
+
+  .toc-link {
+    font-size: var(--text-sm);
+    color: var(--text-secondary);
+    text-decoration: none;
+    transition: color var(--duration-fast) var(--ease-out);
+  }
+
+  .toc-link:hover {
+    color: var(--accent);
+  }
+</style>

src/config/theme.ts

@@ -0,0 +1,302 @@
+/**
+ * Single source of truth for all design tokens.
+ *
+ * To change the entire look of the site, edit this file.
+ * To create a new theme, duplicate this file (e.g. theme-nord.ts)
+ * and update the import in BaseLayout.astro.
+ */
+
+export interface ThemePalette {
+  bg: string;
+  bgSurface: string;
+  bgSurfaceHover: string;
+  text: string;
+  textSecondary: string;
+  textMuted: string;
+  accent: string;
+  accentHover: string;
+  accentSubtle: string;
+  border: string;
+  borderStrong: string;
+  shadow: string;
+  shadowMd: string;
+}
+
+export interface GraphColors {
+  level0: string;
+  level1: string;
+  level2: string;
+  level3: string;
+  level4: string;
+  wakaLevel1: string;
+  wakaLevel2: string;
+  wakaLevel3: string;
+  wakaLevel4: string;
+}
+
+export interface ThemeConfig {
+  name: string;
+
+  site: {
+    title: string;
+    description: string;
+    url: string;
+    author: string;
+    logoText: string;
+    listenBrainzUser?: string;
+  };
+
+  fonts: {
+    sans: string;
+    mono: string;
+  };
+
+  colors: {
+    light: ThemePalette;
+    dark: ThemePalette;
+    graph: {
+      light: GraphColors;
+      dark: GraphColors;
+    };
+  };
+
+  spacing: {
+    base: string;
+    navHeight: string;
+    maxProse: string;
+    maxPage: string;
+    sectionGap: string;
+    cardPadding: string;
+  };
+
+  radius: {
+    sm: string;
+    md: string;
+    lg: string;
+    full: string;
+  };
+
+  typography: {
+    lineHeight: string;
+    lineHeightTight: string;
+    lineHeightRelaxed: string;
+    trackingTight: string;
+  };
+
+  transitions: {
+    fast: string;
+    normal: string;
+    ease: string;
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Default theme — usememos-inspired clean palette, jay.fish structure
+// ---------------------------------------------------------------------------
+
+const theme: ThemeConfig = {
+  name: "default",
+
+  site: {
+    title: "avinal.space",
+    description: "Avinal Kumar — Software Engineer, Open Source Contributor",
+    url: "https://avinal.space",
+    author: "Avinal Kumar",
+    logoText: "avinal.space",
+    listenBrainzUser: "avinal",
+  },
+
+  fonts: {
+    sans: '"Iosevka Aile", system-ui, sans-serif',
+    mono: '"Iosevka", ui-monospace, monospace',
+  },
+
+  colors: {
+    light: {
+      bg: "#fafafa",
+      bgSurface: "#ffffff",
+      bgSurfaceHover: "#f5f5f5",
+      text: "#1a1a1a",
+      textSecondary: "#525252",
+      textMuted: "#737373",
+      accent: "#2563eb",
+      accentHover: "#1d4ed8",
+      accentSubtle: "#eff6ff",
+      border: "#e5e5e5",
+      borderStrong: "#d4d4d4",
+      shadow: "0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04)",
+      shadowMd: "0 4px 6px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.04)",
+    },
+    dark: {
+      bg: "#111111",
+      bgSurface: "#1a1a1a",
+      bgSurfaceHover: "#262626",
+      text: "#e5e5e5",
+      textSecondary: "#a3a3a3",
+      textMuted: "#737373",
+      accent: "#60a5fa",
+      accentHover: "#93bbfd",
+      accentSubtle: "#172554",
+      border: "#2e2e2e",
+      borderStrong: "#404040",
+      shadow: "0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2)",
+      shadowMd: "0 4px 6px rgba(0,0,0,0.25), 0 2px 4px rgba(0,0,0,0.15)",
+    },
+    graph: {
+      light: {
+        level0: "#ebedf0",
+        level1: "#9be9a8",
+        level2: "#40c463",
+        level3: "#30a14e",
+        level4: "#216e39",
+        wakaLevel1: "#c4b5fd",
+        wakaLevel2: "#a78bfa",
+        wakaLevel3: "#8b5cf6",
+        wakaLevel4: "#7c3aed",
+      },
+      dark: {
+        level0: "#1e1e1e",
+        level1: "#0e4429",
+        level2: "#006d32",
+        level3: "#26a641",
+        level4: "#39d353",
+        wakaLevel1: "#2e1065",
+        wakaLevel2: "#4c1d95",
+        wakaLevel3: "#7c3aed",
+        wakaLevel4: "#a78bfa",
+      },
+    },
+  },
+
+  spacing: {
+    base: "0.25rem",
+    navHeight: "3.5rem",
+    maxProse: "48rem",
+    maxPage: "64rem",
+    sectionGap: "4rem",
+    cardPadding: "1.5rem",
+  },
+
+  radius: {
+    sm: "0",
+    md: "0",
+    lg: "0",
+    full: "0",
+  },
+
+  typography: {
+    lineHeight: "1.6",
+    lineHeightTight: "1.2",
+    lineHeightRelaxed: "1.75",
+    trackingTight: "-0.02em",
+  },
+
+  transitions: {
+    fast: "150ms",
+    normal: "250ms",
+    ease: "cubic-bezier(0.16, 1, 0.3, 1)",
+  },
+};
+
+export default theme;
+
+// ---------------------------------------------------------------------------
+// Utility: convert the theme config to CSS custom properties
+// ---------------------------------------------------------------------------
+
+function paletteToVars(p: ThemePalette): string {
+  return `
+    --bg: ${p.bg};
+    --bg-surface: ${p.bgSurface};
+    --bg-surface-hover: ${p.bgSurfaceHover};
+    --text: ${p.text};
+    --text-secondary: ${p.textSecondary};
+    --text-muted: ${p.textMuted};
+    --accent: ${p.accent};
+    --accent-hover: ${p.accentHover};
+    --accent-subtle: ${p.accentSubtle};
+    --border: ${p.border};
+    --border-strong: ${p.borderStrong};
+    --shadow: ${p.shadow};
+    --shadow-md: ${p.shadowMd};
+  `;
+}
+
+function graphToVars(g: GraphColors): string {
+  return `
+    --graph-0: ${g.level0};
+    --graph-1: ${g.level1};
+    --graph-2: ${g.level2};
+    --graph-3: ${g.level3};
+    --graph-4: ${g.level4};
+    --waka-1: ${g.wakaLevel1};
+    --waka-2: ${g.wakaLevel2};
+    --waka-3: ${g.wakaLevel3};
+    --waka-4: ${g.wakaLevel4};
+  `;
+}
+
+export function generateThemeCSS(t: ThemeConfig): string {
+  return `
+    :root {
+      --font-sans: ${t.fonts.sans};
+      --font-mono: ${t.fonts.mono};
+
+      --text-xs:  clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
+      --text-sm:  clamp(0.8125rem, 0.78rem + 0.2vw, 0.875rem);
+      --text-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
+      --text-lg:  clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
+      --text-xl:  clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
+      --text-2xl: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
+      --text-3xl: clamp(1.875rem, 1.4rem + 2.4vw, 2.5rem);
+      --text-4xl: clamp(2.25rem, 1.6rem + 3.2vw, 3.25rem);
+
+      --leading-tight: ${t.typography.lineHeightTight};
+      --leading-normal: ${t.typography.lineHeight};
+      --leading-relaxed: ${t.typography.lineHeightRelaxed};
+      --tracking-tight: ${t.typography.trackingTight};
+      --tracking-normal: 0;
+
+      --space-1: ${t.spacing.base};
+      --space-2: calc(${t.spacing.base} * 2);
+      --space-3: calc(${t.spacing.base} * 3);
+      --space-4: calc(${t.spacing.base} * 4);
+      --space-5: calc(${t.spacing.base} * 5);
+      --space-6: calc(${t.spacing.base} * 6);
+      --space-8: calc(${t.spacing.base} * 8);
+      --space-10: calc(${t.spacing.base} * 10);
+      --space-12: calc(${t.spacing.base} * 12);
+      --space-16: calc(${t.spacing.base} * 16);
+      --space-20: calc(${t.spacing.base} * 20);
+      --space-24: calc(${t.spacing.base} * 24);
+
+      --max-w-prose: ${t.spacing.maxProse};
+      --max-w-page: ${t.spacing.maxPage};
+      --nav-height: ${t.spacing.navHeight};
+
+      --radius-sm: ${t.radius.sm};
+      --radius-md: ${t.radius.md};
+      --radius-lg: ${t.radius.lg};
+      --radius-full: ${t.radius.full};
+
+      --duration-fast: ${t.transitions.fast};
+      --duration-normal: ${t.transitions.normal};
+      --ease-out: ${t.transitions.ease};
+
+      ${paletteToVars(t.colors.light)}
+      ${graphToVars(t.colors.graph.light)}
+    }
+
+    [data-theme="dark"] {
+      ${paletteToVars(t.colors.dark)}
+      ${graphToVars(t.colors.graph.dark)}
+    }
+
+    @media (prefers-color-scheme: dark) {
+      :root:not([data-theme="light"]) {
+        ${paletteToVars(t.colors.dark)}
+        ${graphToVars(t.colors.graph.dark)}
+      }
+    }
+  `;
+}

src/content.config.ts

@@ -0,0 +1,18 @@
+import { defineCollection, z } from "astro:content";
+import { glob } from "astro/loaders";
+
+const posts = defineCollection({
+  loader: glob({ pattern: "**/*.md", base: "./src/content/posts" }),
+  schema: z.object({
+    title: z.string().optional().default("Untitled"),
+    date: z.coerce.date().optional().default(new Date("2000-01-01")),
+    description: z.string().optional().default(""),
+    category: z.string().optional().default("uncategorized"),
+    tags: z.array(z.string()).optional().default([]),
+    image: z.string().optional().default(""),
+    draft: z.boolean().optional().default(false),
+    modified: z.coerce.date().optional(),
+  }),
+});
+
+export const collections = { posts };