Refactor: add Nav component; theme toggle (SVG); extract theme tokens (accent: #006CAC light, #fca311 dark); adjust blog title + headings; update tagline/description; simplify home (hide Projects/Experience); accent navbar divider + active underline

Author: dayatnhbtc

public/moon.svg

@@ -0,0 +1,17 @@
+---
+import { site } from '../site';
+const path = Astro.url.pathname;
+const isBlog = path.startsWith('/blog');
+---
+<nav aria-label="Primary" class="topnav">
+  <a href="/" class="brand">{site.brand}</a>
+  <div class="links">
+    <a href="/blog" class:list={{ active: isBlog }}>Blog</a>
+    <button id="theme-toggle" class="toggle" aria-label="Toggle theme" type="button">
+      <img src="/moon.svg" alt="" class="icon moon" aria-hidden="true" />
+      <img src="/sun.svg" alt="" class="icon sun" aria-hidden="true" />
+    </button>
+  </div>
+  
+</nav>
+

public/sun.svg

@@ -1,5 +1,6 @@
 ---
 // Props: title, description
+import "../styles/theme.css";
 import "../styles/global.css";
 const { title = 'Your Name', description = 'Personal site' } = Astro.props;
 ---
@@ -10,6 +11,16 @@ const { title = 'Your Name', description = 'Personal site' } = Astro.props;
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="description" content={description} />
     <meta name="theme-color" content="#ffffff" />
+    <script>
+      (function() {
+        try {
+          var stored = localStorage.getItem('theme');
+          var prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+          var theme = stored || (prefersDark ? 'dark' : 'light');
+          document.documentElement.dataset.theme = theme;
+        } catch (_) { /* no-op */ }
+      })();
+    </script>
 
     <link rel="preload" as="font" href="/fonts/geist/GeistMono-Variable.woff2" type="font/woff2" crossorigin>
 
@@ -20,6 +31,34 @@ const { title = 'Your Name', description = 'Personal site' } = Astro.props;
     <main>
       <slot />
     </main>
+    <script>
+      (function() {
+        function setLabel(btn) {
+          var theme = document.documentElement.dataset.theme || 'light';
+          var isDark = theme === 'dark';
+          btn.setAttribute('aria-pressed', String(isDark));
+          btn.setAttribute('aria-label', isDark ? 'Switch to light mode' : 'Switch to dark mode');
+          btn.title = isDark ? 'Light mode' : 'Dark mode';
+        }
+        function init() {
+          var btn = document.getElementById('theme-toggle');
+          if (!btn) return;
+          setLabel(btn);
+          btn.addEventListener('click', function() {
+            var current = document.documentElement.dataset.theme === 'dark' ? 'dark' : 'light';
+            var next = current === 'dark' ? 'light' : 'dark';
+            document.documentElement.dataset.theme = next;
+            try { localStorage.setItem('theme', next); } catch(_) {}
+            setLabel(btn);
+          });
+        }
+        if (document.readyState === 'loading') {
+          document.addEventListener('DOMContentLoaded', init);
+        } else {
+          init();
+        }
+      })();
+    </script>
   </body>
 
 </html>

src/components/Nav.astro

@@ -1,5 +1,6 @@
 ---
 import Base from './Base.astro';
+import Nav from "../components/Nav.astro";
 
 interface Props {
   title: string;
@@ -16,9 +17,7 @@ const formatted = d.toLocaleDateString(undefined, {
 
 <Base title={`${title} — Hidayatullah`} description={description ?? title}>
   <div class="wrap">
-    <nav aria-label="Breadcrumbs" class="muted">
-      <a href="/">About</a> / <a href="/blog">Blog</a>
-    </nav>
+    <Nav />
     <article class="post-article">
       <header>
         <h1 class="post-h1">{title}</h1>
@@ -34,10 +33,11 @@ const formatted = d.toLocaleDateString(undefined, {
 
 <style>
 .post-article { margin-top: 0.5rem; }
-.post-h1 { margin: 0 0 0.25rem; font-size: clamp(1.6rem, 3.6vw, 2.2rem); }
+.post-h1 { margin: 0 0 0.25rem; font-size: clamp(1.35rem, 3vw, 1.9rem); }
 .post-meta { color: var(--muted); font-size: 0.9rem; }
 .post-summary { color: color-mix(in oklab, var(--text) 85%, transparent); margin: 0.5rem 0 1rem; }
 .post-content :is(p, ul, ol, pre, blockquote) { margin: 0 0 var(--space); }
+.post-content :global(h1) { font-size: clamp(1.35rem, 3vw, 1.9rem); margin: 0 0 var(--space); }
 .post-content code { background: color-mix(in oklab, var(--text) 8%, transparent); padding: 0.05em 0.3em; border-radius: 4px; }
 .post-content pre { padding: 0.75rem; border-radius: var(--radius); overflow: auto; }
 .post-content blockquote { border-left: 2px solid color-mix(in oklab, var(--text) 20%, transparent); padding-left: 0.75rem; color: var(--muted); }

src/layouts/Base.astro

@@ -1,17 +1,14 @@
 ---
 import Base from "../layouts/Base.astro";
+import Nav from "../components/Nav.astro";
 ---
 
 <Base title="404 — Not Found" description="The page you’re looking for doesn’t exist.">
   <div class="wrap">
-    <nav aria-label="Primary">
-      <a href="/">About</a> /
-      <a href="/blog">Blog</a>
-    </nav>
+    <Nav />
 
     <h1>Page not found</h1>
     <p class="muted">The link may be broken or the page may have moved.</p>
     <p><a href="/">← Back to home</a></p>
   </div>
 </Base>
-

src/layouts/PostLayout.astro

@@ -1,5 +1,6 @@
 ---
 import Base from "../layouts/Base.astro";
+import Nav from "../components/Nav.astro";
 import PostItem from "../components/PostItem.astro";
 import { getCollection } from 'astro:content';
 
@@ -17,10 +18,7 @@ const posts = all
 
 <Base title="Blog — Hidayatullah" description="All posts by Hidayatullah">
   <div class="wrap">
-    <nav aria-label="Primary">
-      <a href="/">About</a> /
-      <a href="/blog">Blog</a>
-    </nav>
+    <Nav />
     <h1>Blog</h1>
     <div class="posts">
       {posts.map((p) => <PostItem {...p} />)}

src/pages/404.astro

@@ -1,10 +1,12 @@
 ---
 import Base from "../layouts/Base.astro";
+import Nav from "../components/Nav.astro";
+import { site } from "../site";
 import ProjectItem from "../components/ProjectItem.astro";
 
-const name = "Hidayatullah";
-const tagline = "Developer, systems builder, problem solver.";
-const bio = "I like creating practical tools that make work faster, smarter, and easier.";
+const name = site.brand;
+const tagline = site.tagline;
+const bio = site.description;
 
 const projects = [
   {
@@ -30,24 +32,23 @@ const projects = [
 
 <Base title={`${name} — ${tagline}`} description={bio}>
   <div class="wrap">
-    <nav aria-label="Primary">
-      <a href="/">About</a> /
-      <a href="/blog">Blog</a>
-    </nav>
+    <Nav />
 
     <section id="about">
-      <h1>{name}</h1>
-      <span class="kicker">{tagline}</span>
+      <h1>{tagline}</h1>
       <p>{bio}</p>
     </section>
 
+    <!--
     <section id="projects">
       <h2>Projects</h2>
       <div class="projects">
         {projects.map((p) => <ProjectItem {...p} />)}
       </div>
     </section>
+    -->
 
+    <!--
     <section id="experience">
       <h2>Work Experience</h2>
       <article class="experience">
@@ -61,6 +62,7 @@ const projects = [
         </ul>
       </article>
     </section>
+    -->
 
 
 

src/pages/blog.astro

@@ -0,0 +1,5 @@
+export const site = {
+  brand: 'Hidayatullah',
+  tagline: 'Learner, automation enthusiast, explorer.',
+  description: 'I enjoy learning by doing—whether coding, automating workflows, or just trying things out—and sharing what I discover along the way.',
+};

src/pages/index.astro

@@ -7,26 +7,14 @@
 }
 
 :root {
-  --bg: #fafafa;
-  --text: #111111;
-  --muted: #6b7280;
-  --accent: #0ea5e9;
+  /* sizing/spacing/typography tokens (colors in theme.css) */
   --max-w: 68ch;
   --lh: 1.6;
   --space: clamp(1rem, 2vw, 1.75rem);
   --radius: 10px;
   --font: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --bg: #0c0c0c;
-    --text: #e5e7eb;
-    --muted: #9ca3af;
-    --accent: #38bdf8;
-  }
-}
-
 * { box-sizing: border-box; }
 
 html, body {
@@ -57,15 +45,33 @@ h1, h2, h3 {
 }
 
 h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
-h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); color: var(--muted); }
+h2 { font-size: clamp(1.25rem, 2.5vw, 1.6rem); color: var(--muted); }
+/* Tighter spacing under section headings */
+h2 { margin: calc(var(--space) * 1.2) 0 calc(var(--space) * 0.75); }
 
 p { margin: 0 0 var(--space); }
 
 a { color: inherit; text-underline-offset: 0.2em; }
 a:hover { color: var(--accent); }
 
-nav { margin-bottom: calc(var(--space) * 2); color: var(--muted); }
-nav a { margin-right: 0.6rem; }
+nav { margin-bottom: calc(var(--space) * 2); color: var(--text); }
+[data-theme="dark"] nav { color: #ffffff; }
+nav.topnav { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--accent); padding-bottom: 0.6rem; margin-bottom: calc(var(--space) * 1.25); }
+nav a { margin-right: 0.8rem; text-decoration: none; }
+nav a:last-child { margin-right: 0; }
+nav .brand { color: inherit; font-variation-settings: "wght" 700; margin-right: 0; font-size: clamp(1.1rem, 2.2vw, 1.4rem); letter-spacing: -0.01em; }
+nav .links { display: inline-flex; align-items: center; gap: 0.75rem; }
+nav .links a { color: inherit; margin-right: 0; }
+nav a.active { text-decoration: underline; text-decoration-color: var(--accent); font-variation-settings: "wght" 600; }
+nav a.active:hover { color: inherit; }
+nav .toggle { background: none; border: none; color: inherit; cursor: pointer; font: inherit; }
+nav .toggle { display: inline-flex; align-items: center; justify-content: center; line-height: 1; padding: 0; width: 1.8rem; height: 1.8rem; }
+nav .toggle .icon { display: none; width: 1.3rem; height: 1.3rem; }
+[data-theme="light"] nav .toggle .icon.moon { display: block; }
+[data-theme="dark"] nav .toggle .icon.sun { display: block; }
+[data-theme="dark"] nav .toggle .icon { filter: invert(1); }
+[data-theme="light"] nav .toggle .icon.moon { display: inline-block; }
+[data-theme="dark"] nav .toggle .icon.sun { display: inline-block; }
 
 section { margin: calc(var(--space) * 2) 0; }
 
@@ -138,3 +144,10 @@ section { margin: calc(var(--space) * 2) 0; }
   border-top: 1px solid color-mix(in oklab, var(--text) 12%, transparent);
 }
 .experience-title { margin: 0 0 0.5rem; font-size: 1.05rem; }
+
+/* Homepage tagline size (smaller than default h1) */
+#about h1 { font-size: clamp(1.4rem, 3.2vw, 2rem); }
+
+/* Make blog titles accent in all themes */
+.post-title a,
+.post-h1 { color: var(--accent); }