contact.html

@@ -12,6 +12,7 @@
       <a class="brand" href="index.html">My Blog</a>
       <ul class="nav-links">
         <li><a href="index.html">Home</a></li>
+        <li><a href="reading.html">Reading</a></li>
         <li><a href="contact.html" aria-current="page">Contact</a></li>
       </ul>
     </nav>

css/style.css

@@ -120,6 +120,59 @@ button[type="submit"]:hover {
   filter: brightness(1.1);
 }
 
+/* --- Reading list --- */
+.reading-category {
+  margin-bottom: 2rem;
+}
+
+.reading-category h2 {
+  font-size: 1.1rem;
+  border-bottom: 1px solid var(--border);
+  padding-bottom: 0.35rem;
+  margin-bottom: 0.75rem;
+}
+
+.reading-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: grid;
+  gap: 0.75rem;
+}
+
+.reading-entry {
+  display: grid;
+  gap: 0.1rem;
+}
+
+.reading-link {
+  color: var(--accent);
+  text-decoration: none;
+  overflow-wrap: anywhere;
+}
+
+.reading-link:hover,
+.reading-link:focus {
+  text-decoration: underline;
+}
+
+.reading-note {
+  margin: 0;
+  color: var(--muted);
+  font-size: 0.9rem;
+}
+
+.reading-empty {
+  color: var(--muted);
+}
+
+/* Two columns once there is room — keeps long lists scannable. */
+@media (min-width: 40rem) {
+  .reading-list {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
 /* --- Footer --- */
 .site-footer {
   border-top: 1px solid var(--border);

index.html

@@ -12,6 +12,7 @@
       <a class="brand" href="index.html">My Blog</a>
       <ul class="nav-links">
         <li><a href="index.html">Home</a></li>
+        <li><a href="reading.html">Reading</a></li>
         <li><a href="contact.html">Contact</a></li>
       </ul>
     </nav>

reading.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Reading list | My Personal Blog</title>
+  <link rel="stylesheet" href="css/style.css" />
+</head>
+<body>
+  <header class="site-header">
+    <nav class="site-nav" aria-label="Main navigation">
+      <a class="brand" href="index.html">My Blog</a>
+      <ul class="nav-links">
+        <li><a href="index.html">Home</a></li>
+        <li><a href="reading.html" aria-current="page">Reading</a></li>
+        <li><a href="contact.html">Contact</a></li>
+      </ul>
+    </nav>
+  </header>
+  <main>
+    <h1>Reading list</h1>
+    <p>Articles and links I&rsquo;ve found worth keeping, grouped by category.</p>
+    <div id="reading-list">
+      <noscript><p class="reading-empty">This page needs JavaScript to render the reading list.</p></noscript>
+    </div>
+  </main>
+  <footer class="site-footer">
+    <p>&copy; 2026 My Personal Blog</p>
+  </footer>
+  <script type="module" src="js/reading-list.js"></script>
+</body>
+</html>