update all packages, fix security vulnerabilities

Assisted by Claude Code

Signed-off-by: Avinal Kumar <avinal.xlvii@gmail.com>

.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: CI
-name: Check build
 
 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/checkout@v4
-      - uses: actions/setup-node@v3
+
+      - uses: actions/setup-node@v4
         with:
-          node-version: 16
+          node-version: 22
           cache: "npm"
-          cache-dependency-path: ./package-lock.json
+
-      - name: Setup Hugo
+      - name: Install dependencies
-        uses: peaceiris/actions-hugo@v2
+        run: npm ci
-        with:
+
-          hugo-version: '0.134.3'
+      - name: Audit dependencies
-          extended: true
+        run: npm audit --audit-level=high
-      - name: Install elm-land and node packages
+        continue-on-error: true
-        run: npm install
+
-      - name: build
+      - name: Check types
-        run: make
+        run: npm run check
+
+      - name: Build site
+        run: npm run build

.gitignore

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

.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"
+Permission is hereby granted, free of charge, to any person obtaining a copy
-    means each individual or legal entity that creates, contributes to
+of this software and associated documentation files (the "Software"), to deal
-    the creation of, or owns Covered Software.
+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"
+The above copyright notice and this permission notice shall be included in all
-    means the combination of the Contributions of others (if any) used
+copies or substantial portions of the Software.
-    by a Contributor and that particular Contributor's Contribution.
 
-1.3. "Contribution"
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-    means Covered Software of a particular Contributor.
+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"
+Note: Blog posts and written content (src/content/posts/) are licensed under
-    means
+Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0).
-
+See LICENSE-CONTENT for details.
-    (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.

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,16 @@
 [build]
-    command = "hugo"
+  command = "npm run build"
-    publish = "public"
+  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;"

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"/>
+            <square150x150logo src="/logo-static.svg"/>
-            <TileColor>#da532c</TileColor>
+            <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"
+}

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 };