arjun7965 · arjun7965 · Apr 18, 2026 · Apr 18, 2026
diff --git a/404.html b/404.html
@@ -63,7 +63,7 @@
                     </button>
                     <nav class="menu-dropdown" id="menu-dropdown" role="navigation" aria-label="Primary Navigation">
                         <a href="/">Home</a>
-                        <a href="/books.html">Books</a>
+                        <a href="/books/">Books</a>
                     </nav>
                 </div>
                 <div class="theme-toggle-wrapper">

diff --git a/CLAUDE.md b/CLAUDE.md
@@ -27,13 +27,13 @@ A Claude Code hook auto-lints HTML/CSS files on edit, but always run the full `n
 
 **Two pages, one shared stylesheet:**
 - `index.html` — landing page with a two-lane vertical timeline (Experience / Education)
-- `books.html` — reading list with book covers loaded from the Open Library Covers API
+- `books/index.html` — reading list (served at `/books/`) with book covers loaded from the Open Library Covers API
 - `css/styles.css` — all shared styles; page-specific overrides live in inline `<style>` blocks at the top of each HTML file
 
 **JavaScript files:**
-- `js/theme.js` — sets `data-theme` attribute on `<html>` immediately on load (top-level, not deferred logic), then attaches the toggle button listener on `DOMContentLoaded`. Fires a custom `themeChanged` event that `books.html` listens to for regenerating placeholder covers.
+- `js/theme.js` — sets `data-theme` attribute on `<html>` immediately on load (top-level, not deferred logic), then attaches the toggle button listener on `DOMContentLoaded`. Fires a custom `themeChanged` event that the books page listens to for regenerating placeholder covers.
 - `js/menu.js` — dropdown toggle for the hamburger menu; handles outside-click, Escape, and iOS Safari quirks
-- `js/books.js` — book cover loading for `books.html`. Tries ISBNs sequentially against `covers.openlibrary.org`, falling back to an SVG placeholder generated as a `data:` URI. Each `<img>` carries `data-isbn` and optionally `data-alt-isbns` (comma-separated) for fallback ordering.
+- `js/books.js` — book cover loading for the books page. Tries ISBNs sequentially against `covers.openlibrary.org`, falling back to an SVG placeholder generated as a `data:` URI. Each `<img>` carries `data-isbn` and optionally `data-alt-isbns` (comma-separated) for fallback ordering.
 
 ## Workflow
 

diff --git a/README.md b/README.md
@@ -24,7 +24,7 @@ Main landing page featuring:
 - Educational background from Syracuse University and KCG College of Technology
 - Social media links and contact information
 
-### [books.html](https://arjunvinod.com/books.html)
+### [books/](https://arjunvinod.com/books/)
 Reading list with:
 - Dynamic book cover loading from Open Library API with ISBN fallbacks
 - "Currently Reading" badge for in-progress books
@@ -56,7 +56,8 @@ The site uses a modern minimalist design language:
 ```
 .
 ├── index.html              # Main page
-├── books.html              # Reading list
+├── books/
+│   └── index.html          # Reading list (served at /books/)
 ├── 404.html                # Custom 404 page
 ├── sitemap.xml             # Sitemap for SEO
 ├── site.webmanifest        # PWA manifest

diff --git a/books.html → books/index.html b/books.html → books/index.html
@@ -7,26 +7,26 @@
     <meta name="description" content="Books Read by Arjun Vinod">
     <meta name="author" content="Arjun Vinod">
     <title>Books | Arjun Vinod</title>
-    <link rel="canonical" href="https://arjunvinod.com/books.html">
+    <link rel="canonical" href="https://arjunvinod.com/books/">
     <meta property="og:title" content="Books | Arjun Vinod">
     <meta property="og:description" content="A collection of books exploring macroeconomics, financial systems, and monetary history.">
     <meta property="og:type" content="website">
-    <meta property="og:url" content="https://arjunvinod.com/books.html">
+    <meta property="og:url" content="https://arjunvinod.com/books/">
     <meta property="og:image" content="https://arjunvinod.com/images/og-image.png">
     <meta name="twitter:card" content="summary">
     <meta name="twitter:title" content="Books | Arjun Vinod">
     <meta name="twitter:description" content="A collection of books exploring macroeconomics, financial systems, and monetary history.">
     <meta name="twitter:image" content="https://arjunvinod.com/images/og-image.png">
     <link rel="preconnect" href="https://covers.openlibrary.org" crossorigin="anonymous">
     <link rel="manifest" href="/site.webmanifest">
-    <link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
-    <link rel="icon" href="images/favicon.ico">
+    <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
+    <link rel="icon" href="/images/favicon.ico">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="css/styles.css">
+    <link rel="stylesheet" href="/css/styles.css">
     <style>
         /* Visually hidden but accessible to screen readers and search engines */
         .visually-hidden {
@@ -74,9 +74,9 @@
             animation: blink 1.5s ease-in-out infinite;
         }
     </style>
-    <script src="js/theme.js" defer></script>
-    <script src="js/books.js" defer></script>
-    <script src="js/menu.js" defer></script>
+    <script src="/js/theme.js" defer></script>
+    <script src="/js/books.js" defer></script>
+    <script src="/js/menu.js" defer></script>
 </head>
 <body>
     <a class="skip-link" href="#main">Skip to content</a>
@@ -90,7 +90,7 @@
                     </button>
                     <nav class="menu-dropdown" id="menu-dropdown" role="navigation" aria-label="Primary Navigation">
                         <a href="/">Home</a>
-                        <a href="/books.html" class="active">Books</a>
+                        <a href="/books/" class="active">Books</a>
                     </nav>
                 </div>
                 <div class="theme-toggle-wrapper">

diff --git a/index.html b/index.html
@@ -46,7 +46,7 @@
                     </button>
                     <nav class="menu-dropdown" id="menu-dropdown" role="navigation" aria-label="Primary Navigation">
                         <a href="/" class="active">Home</a>
-                        <a href="/books.html">Books</a>
+                        <a href="/books/">Books</a>
                     </nav>
                 </div>
                 <div class="theme-toggle-wrapper">

diff --git a/lighthouserc.js b/lighthouserc.js
@@ -1,7 +1,7 @@
 module.exports = {
   ci: {
     collect: {
-      url: ['http://localhost:4000/', 'http://localhost:4000/books.html'],
+      url: ['http://localhost:4000/', 'http://localhost:4000/books/'],
       numberOfRuns: 1,
     },
     assert: {

diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "private": true,
   "description": "Personal portfolio site",
   "scripts": {
-    "lint:html": "htmlhint index.html books.html",
+    "lint:html": "htmlhint index.html books/index.html",
     "lint:css": "stylelint 'css/**/*.css'",
     "lint": "npm run lint:html && npm run lint:css",
     "lighthouse": "lhci autorun"

diff --git a/sitemap.xml b/sitemap.xml
@@ -6,7 +6,7 @@
     <priority>1.0</priority>
   </url>
   <url>
-    <loc>https://arjunvinod.com/books.html</loc>
+    <loc>https://arjunvinod.com/books/</loc>
     <changefreq>monthly</changefreq>
     <priority>0.8</priority>
   </url>