ajdevhub

    Redesign brief — ajdevhub (Direction C: Signal / Packet)

    You are working on the Jekyll site at this repo (a personal portfolio + learning hub). Apply the redesign described below directly to the existing files. Do not create a parallel set of mock files — edit the real ones.

    The user has already chosen the visual direction; your job is faithful execution, not redesign. If you find a conflict between this brief and existing code, follow the brief.

    1. Design tokens (the source of truth)

    Replace the entire :root block in assets/css/main.css with these tokens. Delete the [data-theme="dark"] block — the site is dark-only. Also remove the inline <script> in _layouts/default.html that sets data-theme from localStorage, and remove the #theme-toggle button + its handler script. The site has one mode now.

    :root {
  /* Background layers */
  --bg:        #06080d;   /* page */
  --panel:     #0d121b;   /* cards, asides */
  --panel-2:   #11182a;   /* nested / chips */

  /* Ink */
  --ink:       #e6ebf2;   /* primary text + headings */
  --body:      #aab4c2;   /* body copy */
  --dim:       #6a7388;   /* metadata, captions */
  --faint:     #2a3142;   /* grid lines, dividers when subtle */

  /* Rules */
  --rule:      #1a2030;   /* card borders, section dividers */

  /* Signal */
  --accent:    #22d3ee;   /* the ONE accent — cyan */
  --accent-dim:#0e7490;   /* hover-darkened accent / underline glow */
  --warm:      #f59e0b;   /* secondary, used SPARINGLY (highlight only) */

  /* Semantic — kept for legacy classes */
  --primary-color:   var(--ink);
  --secondary-color: var(--accent);
  --accent-color:    var(--accent);
  --text-color:      var(--body);
  --light-text:      var(--dim);
  --bg-color:        var(--bg);
  --bg-gradient-end: var(--bg);          /* kill the gradient body bg */
  --card-bg:         var(--panel);
  --border-color:    var(--rule);
  --shadow:          0 8px 24px rgba(0,0,0,0.5);
  --shadow-sm:       0 2px 8px rgba(0,0,0,0.35);

  /* Code blocks */
  --code-bg:    var(--panel);
  --code-text:  var(--accent);
  --pre-bg:     var(--panel);

  /* Post layout */
  --post-bg:           var(--bg);
  --post-text:         var(--body);
  --post-heading:      var(--ink);
  --post-subheading:   var(--ink);
  --post-meta-text:    var(--dim);
  --post-meta-bg:      var(--panel);
  --post-border:       var(--rule);
  --post-footer-btn-bg: var(--panel);
  --post-footer-btn-text: var(--ink);
  --blockquote-bg:     var(--panel);
  --blockquote-border: var(--accent);
  --blockquote-text:   var(--body);

  /* Problem cards */
  --problem-card-bg:    var(--panel);
  --problem-title-color: var(--ink);
  --problem-sub-text:   var(--dim);

  /* Sidebar */
  --sidebar-bg: var(--panel);

  /* Footer */
  --footer-link:    var(--body);
  --footer-subtext: var(--dim);

  /* Type */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Menlo', monospace;
}

html, body {
  font-family: var(--font-sans);
  background: var(--bg);  /* solid, no gradient */
  color: var(--body);
}

    Add to <head> in _layouts/default.html (after viewport meta):

    <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&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">

    2. Global header (_layouts/default.html)

    Replace the <header class="site-header"> block with this structure (keep the Liquid loops intact — only the markup and class names change):

    <header class="site-header">
  <div class="site-header-inner">
    <a href="/" class="brand" aria-label="ajdevhub home">
      <svg class="brand-mark" width="22" height="22" viewBox="0 0 22 22" aria-hidden="true">
        <rect x="1" y="1" width="20" height="20" stroke="var(--accent)" stroke-opacity="0.4" fill="none"/>
        <rect x="5" y="5" width="12" height="12" stroke="var(--accent)" fill="none"/>
        <circle cx="11" cy="11" r="2" fill="var(--accent)"/>
      </svg>
      <span class="brand-name">ajdevhub</span>
    </a>

    <nav class="site-nav">
      
      <a href="/" class="">Home</a>
      <a href="/learning" class="">Learning</a>
      <a href="/problems" class="">Problems</a>
      <a href="/roadmap" class="">Roadmap</a>
      <a href="/projects" class="">Projects</a>
      <a href="/blogs" class="">Blogs</a>
      <a href="/about" class="">About</a>
    </nav>

    <div class="header-meta">
      <div id="global-search-wrapper">
        <input type="text" id="global-search-input" class="search-chip" placeholder="Search  ⌘K" autocomplete="off">
        <ul id="global-results-container"></ul>
      </div>
    </div>
  </div>
</header>

    CSS to add (replace the existing header CSS — the gradient header, gradient wordmark, hover underline, etc. all go away):

    .site-header {
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  padding: 0;
  box-shadow: none;
}
.site-header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 32px;
  display: flex; align-items: center; gap: 32px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none;
}
.brand-mark { flex-shrink: 0; }
.brand-name {
  color: var(--ink); font-size: 15px; font-weight: 600;
  letter-spacing: -0.2px;
}
.site-nav {
  display: flex; gap: 26px;
  font-family: var(--font-sans);
  font-size: 13px;
}
.site-nav a {
  color: var(--body); text-decoration: none; font-weight: 500;
  transition: color 0.15s;
}
.site-nav a::after { display: none; }   /* kill the underline animation */
.site-nav a:hover { color: var(--ink); }
.site-nav a.active { color: var(--accent); font-weight: 600; }
.header-meta { margin-left: auto; }
.search-chip {
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--body);
  padding: 6px 14px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  border-radius: 0;
  width: 200px;
}
.search-chip::placeholder { color: var(--dim); }
.search-chip:focus { outline: none; border-color: var(--accent); }

    Also: remove the 🐙 and 💼 emoji from the footer social buttons in _layouts/default.html. Replace with simple text links:

    <div class="footer-socials">
  <a href="https://github.com/Ajay3007" target="_blank" rel="noopener noreferrer" class="footer-social-link">GitHub</a>
  <a href="https://linkedin.com/in/ajay-gupt" target="_blank" rel="noopener noreferrer" class="footer-social-link">LinkedIn</a>
</div>

    CSS:

    .footer-social-link {
  color: var(--body); text-decoration: none;
  font-family: var(--font-mono); font-size: 12px;
  border: 1px solid var(--rule); padding: 6px 14px;
  margin-right: 8px; transition: border-color 0.15s, color 0.15s;
}
.footer-social-link:hover { color: var(--accent); border-color: var(--accent); }

    3. Home page (index.md)

    Replace the entire body of index.md (keep the front-matter) with the structure below. The hero canvas animation is the signature visual — ship it as plain <canvas> + a small JS file.

    ---
layout: default
title: Home
custom_js: home-hero
---

<section class="c-hero">
  <div class="c-hero-grid">
    <div class="c-hero-text">
      <div class="c-eyebrow">
        <span class="c-dot"></span>
        ENGINEER · DATA PLANE · BENGALURU
      </div>
      <h1 class="c-hero-title">
        I make packets<br>
        move <span class="c-hl">fast</span>, and<br>
        write about <em>why.</em>
      </h1>
      <p class="c-hero-lede">
        Ajay Kumar Gupt — Manager &amp; SDE at Jio Platforms.
        Four years on DPDK, VPP and Hyperscan, building deep packet
        inspection for SASE. This site is my notebook in public.
      </p>
      <div class="c-hero-cta">
        <a href="/projects" class="c-btn-primary">Featured projects →</a>
        <a href="/about" class="c-btn-ghost">About me</a>
      </div>
    </div>

    <div class="c-hero-viz">
      <div class="c-viz-head">
        <span>pipeline · sase.dpi</span>
        <span><span class="c-dot"></span> synthetic · illustrative</span>
      </div>
      <canvas id="packet-pipeline" width="520" height="80" aria-hidden="true"></canvas>
      <div class="c-viz-stages">
        <div><div class="c-stage-num">01</div><div class="c-stage-lbl">RX</div></div>
        <div><div class="c-stage-num">02</div><div class="c-stage-lbl">PARSE</div></div>
        <div><div class="c-stage-num">03</div><div class="c-stage-lbl">FIB</div></div>
        <div><div class="c-stage-num">04</div><div class="c-stage-lbl">DPI</div></div>
        <div><div class="c-stage-num">05</div><div class="c-stage-lbl">TX</div></div>
      </div>
      <div class="c-viz-metrics">
        <div><div class="c-metric-k">THROUGHPUT</div><div class="c-metric-v">8.2 Mpps</div></div>
        <div><div class="c-metric-k">P99 LATENCY</div><div class="c-metric-v">1.31 μs</div></div>
        <div><div class="c-metric-k">DPI MATCHES</div><div class="c-metric-v">412 / s</div></div>
      </div>
    </div>
  </div>
</section>

<section class="c-section">
  <div class="c-section-head">
    <div>
      <div class="c-kicker">// SHIPPED</div>
      <h2 class="c-section-title">Selected projects.</h2>
    </div>
    <a href="/projects" class="c-section-action">View all →</a>
  </div>
  <div class="c-card-grid c-cols-3">
    
    <a href="/projects/devtoolbox/" class="c-card">
      <div class="c-card-meta">
        <span>№ 01</span>
        <span>2024</span>
      </div>
      <h3 class="c-card-title"><span class="c-card-slash">~/</span>DevToolBox</h3>
      <p class="c-card-desc">Web suite for network packet analysis, editing, generation, and hex viewing. No local tool setup required — runs entirely in the browser.</p>
      
      <div class="c-tag-row">
        <span class="c-tag">Python</span><span class="c-tag">Flask</span><span class="c-tag">Vue.js 3</span><span class="c-tag">Scapy</span><span class="c-tag">Docker</span><span class="c-tag">Vercel</span>
      </div>
      
    </a>
    
    <a href="/projects/ftp-analyzer/" class="c-card">
      <div class="c-card-meta">
        <span>№ 02</span>
        <span>2024</span>
      </div>
      <h3 class="c-card-title"><span class="c-card-slash">~/</span>ftp-analyzer</h3>
      <p class="c-card-desc">C++ utility that reconstructs FTP-transferred files from raw PCAP captures via TCP reassembly and FTP protocol parsing. Works entirely offline.</p>
      
      <div class="c-tag-row">
        <span class="c-tag">C++</span><span class="c-tag">libpcap</span><span class="c-tag">TCP/IP</span><span class="c-tag">FTP</span><span class="c-tag">CMake</span>
      </div>
      
    </a>
    
    <a href="/projects/redis-ai-agent/" class="c-card">
      <div class="c-card-meta">
        <span>№ 03</span>
        <span>2025</span>
      </div>
      <h3 class="c-card-title"><span class="c-card-slash">~/</span>redis-ai-agent</h3>
      <p class="c-card-desc">Claude-powered AI agent that translates plain English to Redis operations. A hands-on implementation of the agent loop pattern for backend engineers.</p>
      
      <div class="c-tag-row">
        <span class="c-tag">Java</span><span class="c-tag">Maven</span><span class="c-tag">Claude API</span><span class="c-tag">Redis</span><span class="c-tag">Docker</span>
      </div>
      
    </a>
    
  </div>
</section>

<section class="c-section">
  <div class="c-section-head">
    <div>
      <div class="c-kicker">// LATEST</div>
      <h2 class="c-section-title">From the journal.</h2>
    </div>
    <a href="/blogs" class="c-section-action">Archive →</a>
  </div>
  <div class="c-post-list">
    
    <a href="/blog/2026/02/24/supercharge-your-static-site-with-decap-cms/" class="c-post-row">
      <span class="c-post-date">2026-02-24</span>
      <span class="c-post-title">Supercharge Your Static Site: Adding a Free, Real-Time CMS to GitHub Pages</span>
      <span class="c-post-cat">general</span>
      <span class="c-post-arrow">→</span>
    </a>
    
    <a href="/blog/2026/02/01/ftp-file-reconstruction/" class="c-post-row">
      <span class="c-post-date">2026-02-01</span>
      <span class="c-post-title">Reconstructing Files from FTP Network Traffic: Understanding FTP, PCAP, and TCP Reassembly</span>
      <span class="c-post-cat">data-plane</span>
      <span class="c-post-arrow">→</span>
    </a>
    
    <a href="/blog/2026/01/18/create-new-github-repo/" class="c-post-row">
      <span class="c-post-date">2026-01-18</span>
      <span class="c-post-title">How to Create a New GitHub Repo and Push a Local Project</span>
      <span class="c-post-cat">general</span>
      <span class="c-post-arrow">→</span>
    </a>
    
    <a href="/blog/2026/01/12/india-us-treasury-holdings-explained/" class="c-post-row">
      <span class="c-post-date">2026-01-12</span>
      <span class="c-post-title">🇺🇸 Treasury Bond kya hota hai? India ne US Treasury holdings 2025 me 21% kyun kam ki?</span>
      <span class="c-post-cat">finance</span>
      <span class="c-post-arrow">→</span>
    </a>
    
    <a href="/blog/2025/12/31/devtoolbox-network-packet-analysis/" class="c-post-row">
      <span class="c-post-date">2025-12-31</span>
      <span class="c-post-title">DevToolBox: A Comprehensive Network Packet Analysis Suite</span>
      <span class="c-post-cat">data-plane</span>
      <span class="c-post-arrow">→</span>
    </a>
    
  </div>
</section>

<section class="c-section">
  <div class="c-section-head">
    <div>
      <div class="c-kicker">// NOTEBOOK</div>
      <h2 class="c-section-title">Topics I'm learning.</h2>
    </div>
    <a href="/learning" class="c-section-action">Browse all →</a>
  </div>
  <div class="c-card-grid c-cols-5">
    
    
    
    
    <a href="/learning/data-plane" class="c-topic-card">
      <div class="c-topic-meta">
        <span>01</span>
      </div>
      <div class="c-topic-name">Data Plane</div>
      <div class="c-topic-note">DPDK, VPP, line-rate processing</div>
    </a>
    
    <a href="/learning/system-design" class="c-topic-card">
      <div class="c-topic-meta">
        <span>02</span>
      </div>
      <div class="c-topic-name">System Design</div>
      <div class="c-topic-note">Architecture, scale, tradeoffs</div>
    </a>
    
    <a href="/learning/networking" class="c-topic-card">
      <div class="c-topic-meta">
        <span>03</span>
      </div>
      <div class="c-topic-name">Networking</div>
      <div class="c-topic-note">TCP/IP, routing, protocols</div>
    </a>
    
    <a href="/learning/dsa" class="c-topic-card">
      <div class="c-topic-meta">
        <span>04</span>
      </div>
      <div class="c-topic-name">DSA & Algorithms</div>
      <div class="c-topic-note">Patterns, structures, proofs</div>
    </a>
    
    <a href="/learning/4g-5g" class="c-topic-card">
      <div class="c-topic-meta">
        <span>05</span>
      </div>
      <div class="c-topic-name">4G / 5G</div>
      <div class="c-topic-note">RAN, AS/NAS, user plane</div>
    </a>
    
    <a href="/learning/operating-systems" class="c-topic-card">
      <div class="c-topic-meta">
        <span>06</span>
      </div>
      <div class="c-topic-name">Operating Systems</div>
      <div class="c-topic-note">Memory, scheduling, IPC</div>
    </a>
    
    <a href="/learning/oop" class="c-topic-card">
      <div class="c-topic-meta">
        <span>07</span>
      </div>
      <div class="c-topic-name">OOP & Patterns</div>
      <div class="c-topic-note">SOLID, design patterns</div>
    </a>
    
    <a href="/learning/programming-language" class="c-topic-card">
      <div class="c-topic-meta">
        <span>08</span>
      </div>
      <div class="c-topic-name">Languages</div>
      <div class="c-topic-note">C, C++, Java, Python</div>
    </a>
    
    <a href="/learning/ai-ml" class="c-topic-card">
      <div class="c-topic-meta">
        <span>09</span>
      </div>
      <div class="c-topic-name">AI / ML</div>
      <div class="c-topic-note">Foundations, models</div>
    </a>
    
    <a href="/learning/competitive-programming" class="c-topic-card">
      <div class="c-topic-meta">
        <span>10</span>
      </div>
      <div class="c-topic-name">Competitive Prog.</div>
      <div class="c-topic-note">Patterns & contests</div>
    </a>
    
  </div>
</section>

    CSS for the home page (append to assets/css/main.css)

    /* ─────────────────────────────────────────────────────────────
   Direction C — shared component CSS
   ───────────────────────────────────────────────────────────── */

.site-main { max-width: 1200px; padding: 0; }   /* override the 900px / 3rem padding */

.c-hero {
  padding: 64px 32px 56px;
  border-bottom: 1px solid var(--rule);
  background-image:
    radial-gradient(circle at 18% 30%, var(--panel-2) 0%, transparent 50%),
    linear-gradient(var(--faint) 1px, transparent 1px),
    linear-gradient(90deg, var(--faint) 1px, transparent 1px);
  background-size: auto, 48px 48px, 48px 48px;
}
.c-hero-grid {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px;
  align-items: center; max-width: 1200px; margin: 0 auto;
}
.c-eyebrow {
  font-family: var(--font-mono); font-size: 11px; color: var(--accent);
  letter-spacing: 2px; margin-bottom: 22px;
  display: flex; align-items: center; gap: 10px;
}
.c-dot {
  width: 6px; height: 6px; background: var(--accent); border-radius: 50%;
  box-shadow: 0 0 12px var(--accent);
}
.c-hero-title {
  font-size: 52px; line-height: 1.06; font-weight: 700;
  color: var(--ink); margin: 0; letter-spacing: -1.2px;
}
.c-hl {
  background: linear-gradient(180deg, transparent 65%, var(--accent-dim) 65%);
  padding: 0 6px;
}
.c-hero-title em { color: var(--accent); font-style: normal; }
.c-hero-lede {
  color: var(--body); font-size: 16px; line-height: 1.7;
  max-width: 500px; margin: 26px 0 0;
}
.c-hero-cta { display: flex; gap: 14px; margin-top: 30px; }
.c-btn-primary, .c-btn-ghost {
  font-size: 13px; font-weight: 600; padding: 11px 20px;
  text-decoration: none; transition: opacity 0.15s, border-color 0.15s, color 0.15s;
}
.c-btn-primary { background: var(--accent); color: #06080d; }
.c-btn-primary:hover { opacity: 0.85; }
.c-btn-ghost { border: 1px solid var(--rule); color: var(--ink); }
.c-btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* Hero packet visualization */
.c-hero-viz {
  background: var(--panel); border: 1px solid var(--rule);
  padding: 22px;
}
.c-viz-head {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 10.5px; color: var(--dim);
  margin-bottom: 16px;
}
#packet-pipeline { width: 100%; height: 80px; display: block; }
.c-viz-stages {
  display: flex; justify-content: space-between; padding: 0 4%; margin-top: 8px;
}
.c-viz-stages > div { text-align: center; }
.c-stage-num {
  width: 32px; height: 32px; margin: 0 auto;
  border: 1.5px solid var(--accent); color: var(--accent);
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
}
.c-stage-lbl {
  font-family: var(--font-mono); font-size: 9.5px; color: var(--body);
  margin-top: 6px; letter-spacing: 1px;
}
.c-viz-metrics {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--rule);
}
.c-metric-k { font-family: var(--font-mono); font-size: 9.5px; color: var(--dim); letter-spacing: 1px; }
.c-metric-v { color: var(--ink); font-size: 18px; font-weight: 600; margin-top: 4px; }

/* Sections */
.c-section {
  padding: 48px 32px; max-width: 1200px; margin: 0 auto;
  border-bottom: 1px solid var(--rule);
}
.c-section-head {
  display: flex; align-items: flex-end; margin-bottom: 28px;
}
.c-kicker {
  font-family: var(--font-mono); font-size: 11px; color: var(--accent);
  letter-spacing: 2px; margin-bottom: 8px;
}
.c-section-title {
  font-size: 28px; font-weight: 700; color: var(--ink);
  margin: 0; letter-spacing: -0.6px;
}
.c-section-action {
  margin-left: auto; font-size: 13px; color: var(--accent);
  text-decoration: none; font-weight: 500;
}
.c-section-action:hover { text-decoration: underline; }

/* Cards (single canonical .c-card pattern) */
.c-card-grid { display: grid; gap: 14px; }
.c-cols-3 { grid-template-columns: repeat(3, 1fr); }
.c-cols-5 { grid-template-columns: repeat(5, 1fr); }
.c-card {
  background: var(--panel); border: 1px solid var(--rule);
  padding: 22px 20px; text-decoration: none; color: inherit;
  transition: border-color 0.15s, transform 0.15s;
  display: block;
}
.c-card:hover { border-color: var(--accent); }
.c-card-meta {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--dim);
  letter-spacing: 1.5px; display: flex; justify-content: space-between;
}
.c-card-title {
  color: var(--ink); font-size: 20px; font-weight: 600;
  margin: 18px 0 10px; letter-spacing: -0.3px;
}
.c-card-slash { color: var(--accent); }
.c-card-desc { color: var(--body); font-size: 13.5px; line-height: 1.6; margin: 0; }
.c-tag-row { margin-top: 18px; display: flex; gap: 6px; flex-wrap: wrap; }
.c-tag {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--body);
  background: var(--panel-2); padding: 3px 8px;
}

/* Topic / learning cards */
.c-topic-card {
  background: var(--panel); border: 1px solid var(--rule);
  padding: 16px 14px; text-decoration: none; min-height: 120px;
  display: block; transition: border-color 0.15s;
}
.c-topic-card:hover { border-color: var(--accent); }
.c-topic-meta {
  font-family: var(--font-mono); font-size: 10px; color: var(--dim);
  letter-spacing: 1.5px; margin-bottom: 8px;
}
.c-topic-name { color: var(--ink); font-size: 13px; font-weight: 600; line-height: 1.25; }
.c-topic-note { color: var(--dim); font-size: 11.5px; margin-top: 6px; line-height: 1.5; }

/* Posts list */
.c-post-list { display: flex; flex-direction: column; }
.c-post-row {
  display: grid; grid-template-columns: 110px 1fr 110px 30px;
  gap: 24px; padding: 16px 0; align-items: center;
  border-top: 1px solid var(--rule); text-decoration: none; color: inherit;
}
.c-post-row:last-child { border-bottom: 1px solid var(--rule); }
.c-post-row:hover .c-post-title { color: var(--accent); }
.c-post-date { font-family: var(--font-mono); font-size: 11.5px; color: var(--dim); }
.c-post-title { color: var(--ink); font-size: 15px; font-weight: 500; transition: color 0.15s; }
.c-post-cat {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--accent);
  letter-spacing: 1px; text-transform: uppercase;
}
.c-post-arrow { color: var(--dim); text-align: right; }

/* Responsive */
@media (max-width: 960px) {
  .c-hero-grid { grid-template-columns: 1fr; }
  .c-hero-title { font-size: 40px; }
  .c-cols-3 { grid-template-columns: 1fr; }
  .c-cols-5 { grid-template-columns: repeat(2, 1fr); }
}

    Hero canvas animation — assets/js/home-hero.js (NEW FILE)

    // Animated packet flowing across the data-plane pipeline.
// Resolution-independent; respects prefers-reduced-motion.
(function () {
  const canvas = document.getElementById('packet-pipeline');
  if (!canvas) return;

  const ctx = canvas.getContext('2d');
  const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  let dpr = window.devicePixelRatio || 1;
  let cssW = 0, cssH = 0;

  function resize() {
    const rect = canvas.getBoundingClientRect();
    cssW = rect.width; cssH = rect.height;
    canvas.width  = Math.floor(cssW * dpr);
    canvas.height = Math.floor(cssH * dpr);
    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
  }

  const ACCENT = '#22d3ee';
  const FAINT  = '#2a3142';

  let t0 = performance.now();
  const PERIOD = 3600; // ms per traverse
  const TRAIL  = 6;

  function frame(now) {
    const w = cssW, h = cssH;
    if (!w || !h) { requestAnimationFrame(frame); return; }
    const cy = h / 2;
    const x0 = w * 0.06, x1 = w * 0.94;

    ctx.clearRect(0, 0, w, h);

    // Track (dashed)
    ctx.strokeStyle = FAINT;
    ctx.lineWidth = 1;
    ctx.setLineDash([3, 3]);
    ctx.beginPath();
    ctx.moveTo(x0, cy);
    ctx.lineTo(x1, cy);
    ctx.stroke();
    ctx.setLineDash([]);

    // Packet position (eased ping-pong)
    const phase = ((now - t0) % PERIOD) / PERIOD;
    const tri = phase < 0.5 ? phase * 2 : (1 - phase) * 2; // 0..1..0
    const eased = tri * tri * (3 - 2 * tri); // smoothstep
    const px = x0 + (x1 - x0) * eased;

    // Trail
    for (let i = TRAIL; i >= 1; i--) {
      const back = px - (i * 8);
      if (back < x0) continue;
      ctx.fillStyle = ACCENT;
      ctx.globalAlpha = (TRAIL - i + 1) / (TRAIL * 3);
      ctx.beginPath();
      ctx.arc(back, cy, 3, 0, Math.PI * 2);
      ctx.fill();
    }
    ctx.globalAlpha = 1;

    // Glow
    ctx.fillStyle = ACCENT;
    ctx.shadowColor = ACCENT;
    ctx.shadowBlur = 10;
    ctx.beginPath();
    ctx.arc(px, cy, 4.5, 0, Math.PI * 2);
    ctx.fill();
    ctx.shadowBlur = 0;

    if (!reduce) requestAnimationFrame(frame);
  }

  resize();
  window.addEventListener('resize', resize);
  if (reduce) {
    // Draw a single static frame mid-pipeline.
    t0 = performance.now() - PERIOD / 4;
    frame(performance.now());
  } else {
    requestAnimationFrame(frame);
  }
})();

    The custom_js: home-hero front-matter on index.md triggers the existing loader in _layouts/default.html which appends <script src="/assets/js/home-hero.js" defer>. No layout change needed for this part.

    Remove from index.md

    Delete the existing <section class="hero-section"> (typed-text effect), the <section class="modern-section"> for “By The Numbers”, “Featured Projects” old version, “DSA Hub Showcase”, “Learning Paths”, “Recent Thoughts”, and “About This Site”. The new structure above replaces all of them. Also delete assets/js/typing.js from the load order in default.html and the file itself — the typed hero is gone.

    4. About page (about.md)

    Replace the entire body (keep front-matter) with:

    ---
layout: default
title: About
---

<section class="c-about-hero">
  <div class="c-about-grid">
    <div>
      <div class="c-kicker">// ABOUT</div>
      <h1 class="c-about-title">
        Ajay Kumar Gupt.<br>
        Engineer who reads<br>
        <span class="c-accent">man pages</span> for fun.
      </h1>
      <p class="c-about-lede">
        Four-plus years building packet-processing pipelines for SASE —
        deep packet inspection, real-time threat detection, and the
        unglamorous plumbing that keeps traffic moving at line rate.
        Day job is C/C++ and DPDK. Off-hours, I write here so I learn
        faster and forget less.
      </p>
    </div>

    <aside class="c-whoami">
      <div class="c-whoami-head">~/whoami</div>
      <table class="c-whoami-table">
        <tbody>
          <tr><td>role</td><td>Manager, SDE</td></tr>
          <tr><td>org</td><td>Jio Platforms</td></tr>
          <tr><td>loc</td><td>Bengaluru, IN</td></tr>
          <tr><td>focus</td><td>data plane</td></tr>
          <tr><td>tenure</td><td>4+ yrs</td></tr>
          <tr><td>status</td><td>open to talk</td></tr>
        </tbody>
      </table>
    </aside>
  </div>
</section>

<section class="c-section">
  <div class="c-section-head">
    <div>
      <div class="c-kicker">// TIMELINE</div>
      <h2 class="c-section-title">Where the work has happened.</h2>
    </div>
  </div>
  <div class="c-timeline">
    <div class="c-timeline-row">
      <span class="c-timeline-when">2022 — now</span>
      <span class="c-timeline-role">Manager, SDE @ Jio Platforms</span>
      <span class="c-timeline-note">SASE / DPI / DPDK pipelines, ultra-low-latency security.</span>
    </div>
    <div class="c-timeline-row">
      <span class="c-timeline-when">2020 — 2022</span>
      <span class="c-timeline-role">Software Engineer</span>
      <span class="c-timeline-note">5G core backend, Aerospike clusters, Redis caching.</span>
    </div>
    <div class="c-timeline-row">
      <span class="c-timeline-when">2019 — 2020</span>
      <span class="c-timeline-role">Engineer (Intern)</span>
      <span class="c-timeline-note">Networking R&amp;D, packet capture &amp; analysis tooling.</span>
    </div>
  </div>
</section>

<section class="c-section">
  <div class="c-section-head">
    <div>
      <div class="c-kicker">// STACK</div>
      <h2 class="c-section-title">What I work in.</h2>
    </div>
  </div>
  <div class="c-card-grid c-cols-4">
    <div class="c-stack-card">
      <div class="c-stack-key">core/</div>
      <div>· DPDK</div><div>· VPP</div><div>· Hyperscan</div><div>· Linux perf</div>
    </div>
    <div class="c-stack-card">
      <div class="c-stack-key">lang/</div>
      <div>· C / C++</div><div>· Java</div><div>· Python</div><div>· Go</div>
    </div>
    <div class="c-stack-card">
      <div class="c-stack-key">infra/</div>
      <div>· Aerospike</div><div>· Redis</div><div>· 5G core</div><div>· DPI / SASE</div>
    </div>
    <div class="c-stack-card">
      <div class="c-stack-key">tools/</div>
      <div>· perf, ftrace</div><div>· eBPF</div><div>· git, cmake</div><div>· make</div>
    </div>
  </div>
</section>

    CSS to append:

    .c-about-hero {
  padding: 56px 32px; max-width: 1200px; margin: 0 auto;
  border-bottom: 1px solid var(--rule);
}
.c-about-grid {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px;
}
.c-about-title {
  font-size: 44px; line-height: 1.08; font-weight: 700;
  color: var(--ink); margin: 0; letter-spacing: -1.2px;
}
.c-about-title .c-accent { color: var(--accent); }
.c-about-lede {
  color: var(--body); font-size: 16px; line-height: 1.75;
  max-width: 540px; margin: 26px 0 0;
}
.c-whoami {
  background: var(--panel); border: 1px solid var(--rule); padding: 22px;
  height: fit-content;
}
.c-whoami-head {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--dim);
  letter-spacing: 1.5px; margin-bottom: 12px;
}
.c-whoami-table { width: 100%; font-size: 13px; border-collapse: collapse; }
.c-whoami-table td {
  padding: 8px 0; border-bottom: 1px solid var(--rule);
}
.c-whoami-table td:first-child {
  color: var(--dim); font-family: var(--font-mono); font-size: 11px;
}
.c-whoami-table td:last-child { color: var(--ink); text-align: right; }

.c-timeline { border-top: 1px solid var(--rule); }
.c-timeline-row {
  display: grid; grid-template-columns: 180px 1fr 1.5fr;
  gap: 28px; padding: 18px 0; align-items: baseline;
  border-bottom: 1px solid var(--rule);
}
.c-timeline-when { font-family: var(--font-mono); color: var(--accent); font-size: 13px; }
.c-timeline-role { color: var(--ink); font-size: 15px; font-weight: 600; }
.c-timeline-note { color: var(--body); font-size: 14px; }

.c-cols-4 { grid-template-columns: repeat(4, 1fr); }
.c-stack-card {
  background: var(--panel); border: 1px solid var(--rule);
  padding: 18px;
}
.c-stack-card > div { color: var(--ink); font-size: 13px; padding: 3px 0; }
.c-stack-key {
  font-family: var(--font-mono); color: var(--accent); font-size: 11px;
  letter-spacing: 1.5px; margin-bottom: 10px;
}

@media (max-width: 960px) {
  .c-about-grid { grid-template-columns: 1fr; }
  .c-about-title { font-size: 34px; }
  .c-cols-4 { grid-template-columns: repeat(2, 1fr); }
  .c-timeline-row { grid-template-columns: 1fr; gap: 4px; }
}

    Strip every emoji from about.md body content. Section titles like ## 🚀 Current Role should not exist anymore — the new structure replaces them.

    5. Blog post layout (_layouts/post.html)

    Replace its body with:

    ---
layout: default
---

<article class="c-post">
  <header class="c-post-header">
    <div class="c-kicker">
      // WRITING
    </div>
    <h1 class="c-post-h1">Redesign brief — ajdevhub (Direction C: Signal / Packet)</h1>
    <div class="c-post-meta">
      <span></span>
      <span class="c-meta-sep">│</span>
      
      
      <span>10 min read</span>
      <span class="c-meta-sep">│</span>
      <span>~1863 words</span>
    </div>
  </header>

  <div class="c-post-body">
    <h1 id="site-maintenance-log--fix-guide">Site Maintenance Log &amp; Fix Guide</h1>

<p>Last Updated: 2025-12-31</p>

<p><strong>Changelog</strong></p>

<ul>
  <li>2025-12-31 (Evening - Link Audit):
    <ul>
      <li>Comprehensive link verification and correction across the site</li>
      <li>Updated <code class="language-plaintext highlighter-rouge">/learning/finance/index.md</code> with 10+ link corrections:
        <ul>
          <li>Updated all document references from <code class="language-plaintext highlighter-rouge">taxhrd-*.md</code> to <code class="language-plaintext highlighter-rouge">tax_hurdle/*.md</code> (e.g., <code class="language-plaintext highlighter-rouge">taxhrd-summary.md</code> → <code class="language-plaintext highlighter-rouge">tax_hurdle/summary.md</code>)</li>
          <li>Updated portfolio page reference from <code class="language-plaintext highlighter-rouge">_projects/taxhrd.md</code> to <code class="language-plaintext highlighter-rouge">_projects/tax_hurdle.md</code> (5 instances)</li>
          <li>Updated file structure documentation to reflect new subdirectory layout</li>
          <li>Updated all reading paths (Path 1-4) with corrected file references</li>
          <li>Fixed all reference section links (Financial Concepts, Design Patterns, Code Quality, Implementations)</li>
          <li>Updated Getting Started section role-based navigation links</li>
          <li>Updated Contributing and Support section links</li>
          <li>Updated GitHub repository URL from <code class="language-plaintext highlighter-rouge">TaxHrd</code> to <code class="language-plaintext highlighter-rouge">tax_hurdle</code></li>
        </ul>
      </li>
      <li>Verified all links in <code class="language-plaintext highlighter-rouge">_projects/tax_hurdle.md</code> already point to correct <code class="language-plaintext highlighter-rouge">tax_hurdle/</code> subdirectory</li>
      <li>Confirmed all active site files use new path structure; old references only in <code class="language-plaintext highlighter-rouge">.bak</code> backup files</li>
      <li><strong>Result:</strong> All internal cross-references now use correct new directory structure</li>
    </ul>
  </li>
  <li>2025-12-31 (Morning - Initial Restructuring):
    <ul>
      <li>Renamed TaxHrd project to Tax Hurdle (updated repo reference to tax_hurdle)</li>
      <li>Reorganized learning/finance documentation structure:
        <ul>
          <li>Created /finance/tax_hurdle/ subdirectory for project-specific docs</li>
          <li>Moved and updated 5 documentation files with new references</li>
          <li>Updated all internal links from taxhrd to tax_hurdle paths</li>
        </ul>
      </li>
      <li>Restructured finance hub as multi-project learning center</li>
      <li>Updated projects section with Tax Hurdle and DevToolBox cards</li>
      <li>Created comprehensive blog post about DevToolBox project</li>
    </ul>
  </li>
  <li>2025-12-29:
    <ul>
      <li>Modernized blogs index with category cards, badges, and excerpts</li>
      <li>Restyled all blog category pages with card layout, gradient CTA, and improved spacing</li>
    </ul>
  </li>
  <li>2025-12-28:
    <ul>
      <li>Emoji/mojibake repair across learning/* via <code class="language-plaintext highlighter-rouge">ftfy</code> script</li>
      <li>External links converted to open in new tabs (<code class="language-plaintext highlighter-rouge">{:target="_blank" rel="noopener noreferrer"}</code>)</li>
      <li>Icon paths updated from <code class="language-plaintext highlighter-rouge">/ajdevhub/assets/icons/...</code> to <code class="language-plaintext highlighter-rouge">/assets/icons/...</code> and wrapped with <code class="language-plaintext highlighter-rouge">relative_url</code></li>
      <li>Internal links normalized to <code class="language-plaintext highlighter-rouge">/path</code> for baseurl safety</li>
      <li>Homepage and footer enhancements (modern overview, multi-column footer)</li>
      <li>Documentation updates: <a href="README.md">README.md</a> and <a href=".github/copilot-instructions.md">.github/copilot-instructions.md</a></li>
      <li>Targeted page fixes in sorting guide and DSA hub</li>
    </ul>
  </li>
</ul>

<p>Template for future entries:</p>
<ul>
  <li>YYYY-MM-DD:
    <ul>
      <li>Brief summary of change 1</li>
      <li>Brief summary of change 2</li>
    </ul>
  </li>
</ul>

<p><strong>Setup</strong></p>

<p>Before running any commands, set the <code class="language-plaintext highlighter-rouge">$WORKSPACE_ROOT</code> variable in PowerShell:</p>

<div class="language-powershell highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"># Set to your repo root directory</span><span class="w">
</span><span class="nv">$WORKSPACE_ROOT</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"C:\path\to\your\repo"</span><span class="w">  </span><span class="c"># or use $(Get-Location) if already in repo root</span><span class="w">
</span></code></pre></div></div>

<p>All commands below use <code class="language-plaintext highlighter-rouge">$WORKSPACE_ROOT</code> instead of full paths for privacy and portability.</p>

<hr />

<p><strong>Purpose</strong></p>

<ul>
  <li><strong>Central record:</strong> Tracks problems found, the fixes applied, and the exact steps used to resolve them.</li>
  <li><strong>Repeatable workflows:</strong> Provides copy-paste commands and checklists to re-run or extend fixes.</li>
  <li><strong>Living document:</strong> Add future issues and resolutions in the same format below.</li>
</ul>

<hr />

<p><strong>Recent Fixes</strong></p>

<ul>
  <li><strong>Emoji/Mojibake Repair:</strong> Corrupted sequences (e.g., <code class="language-plaintext highlighter-rouge">ðŸ</code>, <code class="language-plaintext highlighter-rouge">ï¸</code>) across learning pages fixed.</li>
  <li><strong>External Links (new-tab):</strong> Ensured HTTP/HTTPS links open in new tabs via Jekyll Markdown attributes.</li>
  <li><strong>Icon Path Cleanup:</strong> Replaced stale <code class="language-plaintext highlighter-rouge">/ajdevhub/assets/icons/...</code> with <code class="language-plaintext highlighter-rouge">/assets/icons/...</code>.</li>
  <li><strong>Baseurl-Safe Internal Links:</strong> Converted absolute internal links to <code class="language-plaintext highlighter-rouge">/path</code>.</li>
  <li><strong>Homepage &amp; Footer Enhancements:</strong> Modernized <a href="/">index.md</a> and <a href="_layouts/default.html">_layouts/default.html</a>.</li>
  <li><strong>Docs &amp; Guidance:</strong> Created <a href=".github/copilot-instructions.md">.github/copilot-instructions.md</a> and rewrote <a href="README.md">README.md</a>.</li>
</ul>

<hr />

<p><strong>1) Emoji/Mojibake Repair</strong></p>

<ul>
  <li><strong>Problem:</strong> Garbled emoji characters displayed as <code class="language-plaintext highlighter-rouge">ðŸ...</code> or <code class="language-plaintext highlighter-rouge">ï¸...</code> in multiple files under <a href="learning/">learning/</a>.</li>
  <li><strong>Scope:</strong> Strings, Arrays, Searching-Sorting, OOP, Networking, OS, System Design sections.</li>
  <li>
    <p><strong>Solution:</strong> Use <code class="language-plaintext highlighter-rouge">ftfy</code> to automatically repair text and write back safely.</p>
  </li>
  <li>
    <p><strong>Files Updated:</strong> Script <a href="fix_emojis.py">fix_emojis.py</a> replaced with a robust <code class="language-plaintext highlighter-rouge">ftfy</code>-based repair.</p>
  </li>
  <li><strong>Steps to Re-run:</strong></li>
</ul>

<div class="language-powershell highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"># Ensure venv is active for the repo (already configured)</span><span class="w">
</span><span class="o">&amp;</span><span class="w"> </span><span class="s2">"</span><span class="nv">$WORKSPACE_ROOT</span><span class="s2">/.venv/Scripts/python.exe"</span><span class="w"> </span><span class="nt">-m</span><span class="w"> </span><span class="n">pip</span><span class="w"> </span><span class="nx">install</span><span class="w"> </span><span class="nx">ftfy</span><span class="w">

</span><span class="c"># Run the repair script from repo root</span><span class="w">
</span><span class="o">&amp;</span><span class="w"> </span><span class="s2">"</span><span class="nv">$WORKSPACE_ROOT</span><span class="s2">/.venv/Scripts/python.exe"</span><span class="w"> </span><span class="nt">-u</span><span class="w"> </span><span class="n">fix_emojis.py</span><span class="w">
</span></code></pre></div></div>

<ul>
  <li><strong>Validation:</strong> Search for mojibake remnants after repair.</li>
</ul>

<div class="language-powershell highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"># Quick grep-like scan (pattern often seen in mojibake)</span><span class="w">
</span><span class="n">Select-String</span><span class="w"> </span><span class="nt">-Path</span><span class="w"> </span><span class="nx">learning/</span><span class="o">**</span><span class="nx">/</span><span class="o">*.</span><span class="nf">md</span><span class="w"> </span><span class="nt">-Pattern</span><span class="w"> </span><span class="s2">"ðŸ|ï¸"</span><span class="w"> </span><span class="nt">-AllMatches</span><span class="w">
</span></code></pre></div></div>

<ul>
  <li><strong>Notes:</strong> The updated script reads file content with <code class="language-plaintext highlighter-rouge">errors='replace'</code> and fixes text using <code class="language-plaintext highlighter-rouge">ftfy</code>, then writes atomically where possible.</li>
</ul>

<hr />

<p><strong>2) External Links Open in New Tabs</strong></p>

<ul>
  <li><strong>Problem:</strong> External links were opening in the same tab.</li>
  <li><strong>Scope:</strong> ~87 markdown files under <a href="learning/">learning/</a> had ~94 HTTP/HTTPS links.</li>
  <li>
    <p><strong>Solution:</strong> Append Jekyll Markdown attributes to links: <code class="language-plaintext highlighter-rouge">{:target="_blank" rel="noopener noreferrer"}</code>.</p>
  </li>
  <li><strong>Example:</strong>
    <ul>
      <li>Before: <code class="language-plaintext highlighter-rouge">[LeetCode 88](https://leetcode.com/...)</code></li>
      <li>After: <code class="language-plaintext highlighter-rouge">[LeetCode 88](https://leetcode.com/...){:target="_blank" rel="noopener noreferrer"}</code></li>
    </ul>
  </li>
  <li><strong>One-liner (PowerShell) to re-apply if needed):</strong></li>
</ul>

<div class="language-powershell highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$basePath</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"</span><span class="nv">$WORKSPACE_ROOT</span><span class="s2">/learning"</span><span class="w">
</span><span class="nv">$files</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">Get-ChildItem</span><span class="w"> </span><span class="nt">-Path</span><span class="w"> </span><span class="nv">$basePath</span><span class="w"> </span><span class="nt">-Filter</span><span class="w"> </span><span class="s2">"*.md"</span><span class="w"> </span><span class="nt">-Recurse</span><span class="w">
</span><span class="kr">foreach</span><span class="w"> </span><span class="p">(</span><span class="nv">$file</span><span class="w"> </span><span class="kr">in</span><span class="w"> </span><span class="nv">$files</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="w">
  </span><span class="nv">$content</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">Get-Content</span><span class="w"> </span><span class="nt">-Path</span><span class="w"> </span><span class="nv">$file</span><span class="o">.</span><span class="nf">FullName</span><span class="w"> </span><span class="nt">-Raw</span><span class="w">
  </span><span class="nv">$pattern</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">'\[([^\]]+)\]\((https?://[^)]+)\)(?!\{:target)'</span><span class="w">
  </span><span class="nv">$updated</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span><span class="n">regex</span><span class="p">]::</span><span class="n">Replace</span><span class="p">(</span><span class="nv">$content</span><span class="p">,</span><span class="w"> </span><span class="nv">$pattern</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w">
    </span><span class="kr">param</span><span class="p">(</span><span class="nv">$m</span><span class="p">)</span><span class="w">
    </span><span class="s2">"[{0}]({1}){:target=\"</span><span class="err">_</span><span class="n">blank\</span><span class="s2">" rel=\"</span><span class="nx">noopener</span><span class="w"> </span><span class="nx">noreferrer\</span><span class="s2">"}"</span><span class="w"> </span><span class="nt">-f</span><span class="w"> </span><span class="nv">$m</span><span class="o">.</span><span class="n">Groups</span><span class="p">[</span><span class="mi">1</span><span class="p">]</span><span class="o">.</span><span class="nf">Value</span><span class="p">,</span><span class="w"> </span><span class="nv">$m</span><span class="o">.</span><span class="n">Groups</span><span class="p">[</span><span class="mi">2</span><span class="p">]</span><span class="o">.</span><span class="nf">Value</span><span class="w">
  </span><span class="p">})</span><span class="w">
  </span><span class="kr">if</span><span class="w"> </span><span class="p">(</span><span class="nv">$updated</span><span class="w"> </span><span class="o">-ne</span><span class="w"> </span><span class="nv">$content</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="n">Set-Content</span><span class="w"> </span><span class="nt">-Path</span><span class="w"> </span><span class="nv">$file</span><span class="o">.</span><span class="nf">FullName</span><span class="w"> </span><span class="nt">-Value</span><span class="w"> </span><span class="nv">$updated</span><span class="w"> </span><span class="p">}</span><span class="w">
</span><span class="p">}</span><span class="w">
</span></code></pre></div></div>

<ul>
  <li><strong>Validation:</strong> Manually click external links in a local preview; confirm they open in a new tab.</li>
</ul>

<hr />

<p><strong>3) Icon Path Cleanup</strong></p>

<ul>
  <li><strong>Problem:</strong> Some pages referenced icons via an old prefix <code class="language-plaintext highlighter-rouge">/ajdevhub/assets/icons/...</code>.</li>
  <li><strong>Scope:</strong> Arrays, Two-Pointers, Sliding Window, Searching-Sorting, Strings.</li>
  <li>
    <p><strong>Solution:</strong> Update to <code class="language-plaintext highlighter-rouge">/assets/icons/...</code>, then convert to baseurl-safe <code class="language-plaintext highlighter-rouge">relative_url</code>.</p>
  </li>
  <li><strong>Examples:</strong>
    <ul>
      <li><a href="learning/dsa/Arrays/two-pointers/index.md">learning/dsa/Arrays/two-pointers/index.md</a></li>
      <li><a href="learning/dsa/Arrays/sliding-window/index.md">learning/dsa/Arrays/sliding-window/index.md</a></li>
      <li><a href="learning/dsa/Arrays/index.md">learning/dsa/Arrays/index.md</a></li>
      <li><a href="learning/dsa/Searching-Sorting/index.md">learning/dsa/Searching-Sorting/index.md</a></li>
      <li><a href="learning/dsa/Searching-Sorting/searching-sorting.md">learning/dsa/Searching-Sorting/searching-sorting.md</a></li>
      <li><a href="learning/dsa/Strings/index.md">learning/dsa/Strings/index.md</a></li>
      <li><a href="learning/dsa/Strings/string.md">learning/dsa/Strings/string.md</a></li>
    </ul>
  </li>
  <li><strong>Pattern Used:</strong>
    <ul>
      <li>Before: <code class="language-plaintext highlighter-rouge">&lt;img src="/ajdevhub/assets/icons/rocket.svg" ...&gt;</code></li>
      <li>After: <code class="language-plaintext highlighter-rouge">&lt;img src="/assets/icons/rocket.svg" ...&gt;</code></li>
    </ul>
  </li>
  <li><strong>Validation:</strong> Workspace scan shows no remaining <code class="language-plaintext highlighter-rouge">/ajdevhub/assets/icons</code> references.</li>
</ul>

<hr />

<p><strong>4) Baseurl-Safe Internal Links</strong></p>

<ul>
  <li><strong>Problem:</strong> Absolute internal links (e.g., <code class="language-plaintext highlighter-rouge">](/projects)</code>) can break if <code class="language-plaintext highlighter-rouge">baseurl</code> changes.</li>
  <li><strong>Scope:</strong> Various pages including <a href="/about.html">about.md</a>.</li>
  <li>
    <p><strong>Solution:</strong> Use Liquid filter for internal links: <code class="language-plaintext highlighter-rouge">/path</code>.</p>
  </li>
  <li><strong>Example Changes:</strong>
    <ul>
      <li><a href="/about.html">about.md</a>:
        <ul>
          <li><code class="language-plaintext highlighter-rouge">[/projects]</code> → <code class="language-plaintext highlighter-rouge">/projects</code></li>
          <li><code class="language-plaintext highlighter-rouge">[/blogs]</code> → <code class="language-plaintext highlighter-rouge">/blogs</code></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><strong>Validation:</strong> Repo-wide scan confirms no markdown links starting with <code class="language-plaintext highlighter-rouge">](/...)</code> remain.</li>
</ul>

<hr />

<p><strong>5) Homepage &amp; Footer Enhancements</strong></p>

<ul>
  <li><strong>Homepage:</strong> <a href="/">index.md</a>
    <ul>
      <li><strong>Overview section:</strong> Modern hero, stats, exploration cards.</li>
      <li><strong>Activity section:</strong> Fixed recent posts rendering to use proper HTML anchors.</li>
      <li><strong>CTAs:</strong> Button-style links via <code class="language-plaintext highlighter-rouge">.btn-crosslink</code>.</li>
    </ul>
  </li>
  <li><strong>Footer:</strong> <a href="_layouts/default.html">_layouts/default.html</a>
    <ul>
      <li><strong>Multi-column grid:</strong> About, Learning, Connect sections.</li>
      <li><strong>Social links:</strong> GitHub, LinkedIn, tech attribution.</li>
      <li><strong>All internal links:</strong> Use <code class="language-plaintext highlighter-rouge">relative_url</code>.</li>
    </ul>
  </li>
</ul>

<hr />

<p><strong>6) Documentation &amp; Guidance</strong></p>

<ul>
  <li><strong>AI Agent Guidance:</strong> <a href=".github/copilot-instructions.md">.github/copilot-instructions.md</a>
    <ul>
      <li>Jekyll stack, permalink patterns, layout dependencies, JS expectations, authoring templates, build workflow.</li>
    </ul>
  </li>
  <li><strong>Project Onboarding:</strong> <a href="README.md">README.md</a>
    <ul>
      <li>Quick start, structure overview, authoring guides, navigation rules, common mistakes, file map.</li>
    </ul>
  </li>
</ul>

<hr />

<p><strong>7) Targeted Page Fixes</strong></p>

<ul>
  <li><strong>Sorting Guide:</strong> <a href="learning/dsa/Searching-Sorting/sorting.md">learning/dsa/Searching-Sorting/sorting.md</a>
    <ul>
      <li>Fixed hybrid HTML/Markdown conflicts.</li>
      <li>Corrected icon paths.</li>
      <li>Ensured external links have new-tab attributes.</li>
      <li>Cleaned PDF link formatting.</li>
    </ul>
  </li>
  <li><strong>DSA Hub:</strong> <a href="learning/dsa/index.md">learning/dsa/index.md</a>
    <ul>
      <li>Replaced corrupted emojis with proper Unicode.</li>
    </ul>
  </li>
</ul>

<hr />

<p><strong>Validation Checklist</strong></p>

<ul>
  <li><strong>Links:</strong>
    <ul>
      <li>Internal links use <code class="language-plaintext highlighter-rouge">/path</code>.</li>
      <li>External links include <code class="language-plaintext highlighter-rouge">{:target="_blank" rel="noopener noreferrer"}</code>.</li>
    </ul>
  </li>
  <li><strong>Icons/Images:</strong>
    <ul>
      <li>No <code class="language-plaintext highlighter-rouge">/ajdevhub/...</code> paths remain.</li>
      <li>Image <code class="language-plaintext highlighter-rouge">src</code> uses <code class="language-plaintext highlighter-rouge">relative_url</code> for baseurl safety.</li>
    </ul>
  </li>
  <li><strong>Mojibake:</strong>
    <ul>
      <li>No <code class="language-plaintext highlighter-rouge">ðŸ</code> or <code class="language-plaintext highlighter-rouge">ï¸</code> sequences detected by scans.</li>
    </ul>
  </li>
  <li><strong>Layouts:</strong>
    <ul>
      <li>CSS/JS includes use <code class="language-plaintext highlighter-rouge">relative_url</code>.</li>
    </ul>
  </li>
</ul>

<hr />

<p><strong>How To Add Future Entries</strong></p>

<ul>
  <li><strong>Append a new section</strong> with the format: Problem, Scope, Solution, Steps, Validation, Files.</li>
  <li><strong>Keep it actionable:</strong> Include commands and exact patterns.</li>
  <li><strong>Reference files</strong> using markdown links (e.g., <a href="path/to/file.md">path/to/file.md</a>).</li>
  <li><strong>Update this log</strong> after each change; keep it the single source of truth.</li>
</ul>

<hr />

<p><strong>Quick Commands</strong></p>

<ul>
  <li><strong>Local preview:</strong></li>
</ul>

<div class="language-powershell highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">jekyll</span><span class="w"> </span><span class="nx">serve</span><span class="w"> </span><span class="nt">--livereload</span><span class="w">
</span></code></pre></div></div>

<ul>
  <li><strong>Run emoji repair:</strong></li>
</ul>

<div class="language-powershell highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="o">&amp;</span><span class="w"> </span><span class="s2">"</span><span class="nv">$WORKSPACE_ROOT</span><span class="s2">/.venv/Scripts/python.exe"</span><span class="w"> </span><span class="nt">-u</span><span class="w"> </span><span class="n">fix_emojis.py</span><span class="w">
</span></code></pre></div></div>

<hr />

<p><strong>Notes</strong></p>

<ul>
  <li><strong>Config:</strong> <a href="_config.yml">_config.yml</a> sets <code class="language-plaintext highlighter-rouge">url</code> to the GitHub Pages domain; <code class="language-plaintext highlighter-rouge">baseurl</code> is empty.</li>
  <li><strong>Best practice:</strong> Always use <code class="language-plaintext highlighter-rouge">relative_url</code> for internal assets/links.</li>
  <li><strong>OneDrive locks:</strong> Atomic writes are used to minimize sync conflicts; rerun scripts if locked.</li>
</ul>

<hr />

<p><strong>Helper Script: Append Changelog Entry</strong></p>

<ul>
  <li><strong>Purpose:</strong> Quickly add a dated entry under the <strong>Changelog</strong> section of this file.</li>
  <li>
    <p><strong>Script:</strong> <a href="scripts/add_changelog_entry.py">scripts/add_changelog_entry.py</a></p>
  </li>
  <li><strong>Usage:</strong></li>
</ul>

<div class="language-powershell highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"># Dry-run (prints proposed changes without writing)</span><span class="w">
</span><span class="o">&amp;</span><span class="w"> </span><span class="s2">"</span><span class="nv">$WORKSPACE_ROOT</span><span class="s2">/.venv/Scripts/python.exe"</span><span class="w"> </span><span class="n">scripts/add_changelog_entry.py</span><span class="w"> </span><span class="nt">--dry-run</span><span class="w"> </span><span class="nt">--item</span><span class="w"> </span><span class="s2">"Your change summary"</span><span class="w"> </span><span class="nt">--item</span><span class="w"> </span><span class="s2">"Another bullet"</span><span class="w">

</span><span class="c"># Write to file with today's date</span><span class="w">
</span><span class="o">&amp;</span><span class="w"> </span><span class="s2">"</span><span class="nv">$WORKSPACE_ROOT</span><span class="s2">/.venv/Scripts/python.exe"</span><span class="w"> </span><span class="n">scripts/add_changelog_entry.py</span><span class="w"> </span><span class="nt">--item</span><span class="w"> </span><span class="s2">"Updated footer styles"</span><span class="w"> </span><span class="nt">--item</span><span class="w"> </span><span class="s2">"Normalized image paths"</span><span class="w">

</span><span class="c"># Specify custom date</span><span class="w">
</span><span class="o">&amp;</span><span class="w"> </span><span class="s2">"</span><span class="nv">$WORKSPACE_ROOT</span><span class="s2">/.venv/Scripts/python.exe"</span><span class="w"> </span><span class="n">scripts/add_changelog_entry.py</span><span class="w"> </span><span class="nt">--date</span><span class="w"> </span><span class="nx">2025-12-28</span><span class="w"> </span><span class="nt">--item</span><span class="w"> </span><span class="s2">"Refactored navigation JS"</span><span class="w"> </span><span class="nt">--item</span><span class="w"> </span><span class="s2">"Added new blog post"</span><span class="w">
</span></code></pre></div></div>

<ul>
  <li><strong>Behavior:</strong>
    <ul>
      <li>Inserts entries immediately after the <strong>Changelog</strong> header.</li>
      <li>Uses atomic write to avoid OneDrive sync locks.</li>
      <li>Accept multiple <code class="language-plaintext highlighter-rouge">--item</code> flags to include several bullets.</li>
    </ul>
  </li>
</ul>

<hr />

<p><strong>Pre-Commit Validation</strong></p>

<ul>
  <li><strong>Purpose:</strong> Run automated checks before committing to catch common issues.</li>
  <li>
    <p><strong>Script:</strong> <a href="scripts/validate_site.py">scripts/validate_site.py</a></p>
  </li>
  <li><strong>Checks Performed:</strong>
    <ul>
      <li>Mojibake/corrupted emoji sequences</li>
      <li>External links missing <code class="language-plaintext highlighter-rouge">target="_blank"</code> attributes</li>
      <li>Stale <code class="language-plaintext highlighter-rouge">/ajdevhub/</code> asset paths</li>
      <li>Absolute internal markdown links (not using <code class="language-plaintext highlighter-rouge">relative_url</code>)</li>
      <li>Image <code class="language-plaintext highlighter-rouge">src</code> attributes without <code class="language-plaintext highlighter-rouge">relative_url</code> filter</li>
    </ul>
  </li>
  <li><strong>Quick Run:</strong></li>
</ul>

<div class="language-powershell highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="o">&amp;</span><span class="w"> </span><span class="s2">"</span><span class="nv">$WORKSPACE_ROOT</span><span class="s2">/.venv/Scripts/python.exe"</span><span class="w"> </span><span class="n">scripts/validate_site.py</span><span class="w">
</span></code></pre></div></div>

<ul>
  <li><strong>Integration Suggestion:</strong>
    <ul>
      <li>Run before every commit to catch issues early.</li>
      <li>Fix any reported issues, re-run validation to confirm.</li>
      <li>Consider adding to CI/CD or pre-commit hooks if using Git LFS or Actions.</li>
    </ul>
  </li>
</ul>

  </div>

  <footer class="c-post-footer">
    <a href="/blogs/" class="c-btn-ghost">← Back to archive</a>
  </footer>
</article>

    CSS to append (also: delete any conflicting rules in main.css for .post, .post-header, .post-hero-header, .post-meta-chip, .post-end-label, .post-back-btn etc. — they’re from the old design):

    .c-post { max-width: 760px; margin: 56px auto; padding: 0 32px; }
.c-post-h1 {
  font-size: 40px; line-height: 1.1; font-weight: 700;
  color: var(--ink); margin: 0 0 22px; letter-spacing: -1px;
}
.c-post-meta {
  padding: 14px 0; border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: flex; gap: 18px; font-family: var(--font-mono);
  font-size: 12px; color: var(--dim);
}
.c-meta-sep { color: var(--faint); }
.c-post-body {
  color: var(--body); font-size: 16px; line-height: 1.8;
  margin-top: 32px;
}
.c-post-body h2 {
  font-size: 22px; color: var(--ink); font-weight: 600;
  margin: 36px 0 14px; letter-spacing: -0.3px;
}
.c-post-body h3 {
  font-size: 18px; color: var(--ink); font-weight: 600;
  margin: 28px 0 12px;
}
.c-post-body p { margin: 0 0 18px; }
.c-post-body a { color: var(--accent); text-decoration: none; border-bottom: 1px dashed var(--accent-dim); }
.c-post-body a:hover { border-bottom-style: solid; }
.c-post-body code {
  font-family: var(--font-mono); color: var(--accent);
  background: var(--panel); padding: 2px 6px; font-size: 14px;
}
.c-post-body pre {
  background: var(--panel); border: 1px solid var(--rule);
  border-left: 2px solid var(--accent);
  padding: 18px 20px; font-size: 13px; line-height: 1.75;
  overflow-x: auto; margin: 22px 0;
}
.c-post-body pre code {
  background: transparent; color: var(--ink); padding: 0;
}
.c-post-body blockquote {
  border-left: 2px solid var(--accent);
  background: var(--panel);
  padding: 14px 18px;
  margin: 22px 0; color: var(--body);
}
.c-post-body ul, .c-post-body ol { padding-left: 24px; margin: 0 0 18px; }
.c-post-body li { margin: 6px 0; }
.c-post-footer {
  margin-top: 56px; padding-top: 28px;
  border-top: 1px solid var(--rule);
}

    6. Learning index (_learning/index.md)

    Strip all emoji from titles. Replace the body with the same c-section + c-cols-5 topic-grid structure used on the home page (see section 3). Drop the “Featured: New Addition” lozenge — if you want to highlight a topic, add a small ★ new chip on the relevant .c-topic-card instead.

    7. Cleanup

    Delete from the repo (these are orphaned scaffolding):

    In _layouts/default.html:

    In assets/css/main.css:

    In index.md, about.md, _learning/index.md, projects.md, and any layout file: search-and-replace btn-primary → c-btn-primary, btn-secondary → c-btn-ghost.

    Strip emoji from: nav labels (none — already clean), section titles in all .md files, footer “Connect” buttons, all _layouts/*.html files. Inside actual prose paragraphs of blog posts (_posts/*.md), leave emoji alone unless they were obviously decorative section headers.

    Do not touch (out of scope for this pass):

    8. Acceptance checklist

    When done, verify:

    1. Home page loads with the dark navy bg, packet animation visible in the hero, no light-theme flash on load.
    2. No emoji visible in the global header, nav, footer, hero, or section titles on Home / About / Learning index.
    3. Theme toggle button is gone from the header.
    4. All four template types render cleanly:
      • / (home)
      • /about/
      • /learning/
      • any blog post URL e.g. /blog/2025/01/05/two-pointer-technique/
    5. The single accent color (#22d3ee) is the only chromatic accent used. No pinks, no purples, no greens, no oranges except the rare --warm highlight (which should not appear on these four pages).
    6. prefers-reduced-motion: reduce freezes the packet at mid-pipeline instead of animating.
    7. Mobile viewport (≤960px): hero stacks, card grids collapse to 1–2 columns, nothing overflows.
    8. The legacy sd-module-* and dsa-roadmap pages still load (they may look stylistically off vs. the new shell — that’s expected, future-pass work).

    Once all 8 are green, you’re done. Commit as one PR titled “Redesign: Direction C — dark, signal-led, type-first” with a brief summary of the file list above.