CV Timeline Cards Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: Redesign the Curriculum Vitae page as a polished academic timeline with responsive cards, consistent logos, and compact supporting sections.

Architecture: Keep the existing archive layout and /curriculum vitae/ permalink. Replace table-based CV markup in _pages/curriculum vitae.md with semantic .cv-* HTML, then add scoped styles in _sass/_archive.scss so other archive pages are not affected.

Tech Stack: Jekyll, Kramdown/Markdown, Liquid, HTML, Sass, Minimal Mistakes/Academic Pages theme.

File Structure

Modify _pages/curriculum vitae.md: replace inline table layout with semantic CV timeline, skills, teaching, and service markup.
Modify _sass/_archive.scss: add CV-scoped styles for .cv-* classes because the page uses layout: archive.
Do not modify _layouts/archive.html, _data/navigation.yml, assets/css/main.scss, images, JavaScript, or other pages.
Keep the existing permalink /curriculum vitae/ and redirect /resume.

Task 1: Replace CV Page Markup

Files:

Modify: _pages/curriculum vitae.md:1-139
Step 1: Run the legacy CV markup check

Run:

rg -n "<table|style=|<h1>|width=|height=\"" "_pages/curriculum vitae.md"

Expected: The command prints matches for the current table layout, inline styles, fixed widths/heights, and card-level h1 headings.

Step 2: Replace _pages/curriculum vitae.md with semantic CV markup

Set _pages/curriculum vitae.md to exactly:

---
layout: archive
title: "Curriculum Vitae"
permalink: /curriculum vitae/
author_profile: true
redirect_from:
  - /resume
---


<section class="cv-section" aria-labelledby="cv-education">
  <h2 id="cv-education" class="cv-section__title">Education</h2>

  <ol class="cv-timeline">
    <li class="cv-entry">
      <div class="cv-date">2023 - 2028 expected</div>
      <article class="cv-card">
        <div class="cv-card__header">
          <div>
            <h3 class="cv-card__title">The University of Hong Kong (HKU)</h3>
            <p class="cv-card__meta">Department of Electrical and Computer Engineering</p>
          </div>
          <img class="cv-logo" src="https://haozhengwan.github.io/images/logo/HKU.png" alt="The University of Hong Kong logo">
        </div>
        <ul class="cv-detail-list">
          <li><strong>Doctor of Philosophy</strong></li>
          <li>Advised by <a href="https://www.eee.hku.hk/people/canl/">Prof. Can Li</a></li>
          <li>Research interests: in-memory computing, security and privacy, hardware-software co-design</li>
          <li>GPA: 4.3/4.3</li>
        </ul>
      </article>
    </li>

    <li class="cv-entry">
      <div class="cv-date">2019 - 2023</div>
      <article class="cv-card">
        <div class="cv-card__header">
          <div>
            <h3 class="cv-card__title">Harbin Institute of Technology (HIT)</h3>
            <p class="cv-card__meta">School of Astronautics</p>
          </div>
          <img class="cv-logo" src="https://haozhengwan.github.io/images/logo/HIT.png" alt="Harbin Institute of Technology logo">
        </div>
        <ul class="cv-detail-list">
          <li><strong>B.Eng.</strong> in Microelectronics Science and Engineering</li>
          <li>Advised by <a href="http://homepage.hit.edu.cn/Haifeng">Prof. Haifeng Zhang</a></li>
          <li>Grade and ranking: 3.92/4, 91.8/100, Rank 1/80 (Top 1.2%) in the Department of Microelectronics</li>
        </ul>
      </article>
    </li>

    <li class="cv-entry">
      <div class="cv-date">2016 - 2019</div>
      <article class="cv-card">
        <div class="cv-card__header">
          <div>
            <h3 class="cv-card__title">Attached Middle School to Jiangxi Normal University</h3>
            <p class="cv-card__meta">Jiangxi Normal University High School (江西师大附中)</p>
          </div>
          <img class="cv-logo" src="https://haozhengwan.github.io/images/logo/JXSDFZ.jpeg" alt="Attached Middle School to Jiangxi Normal University logo">
        </div>
        <ul class="cv-detail-list">
          <li>High school diploma</li>
          <li>Science and engineering track</li>
        </ul>
      </article>
    </li>
  </ol>
</section>

<section class="cv-section" aria-labelledby="cv-experience">
  <h2 id="cv-experience" class="cv-section__title">Research and Exchange Experience</h2>

  <ol class="cv-timeline">
    <li class="cv-entry">
      <div class="cv-date">Summer 2022</div>
      <article class="cv-card">
        <div class="cv-card__header">
          <div>
            <h3 class="cv-card__title">Peking University (PKU)</h3>
            <p class="cv-card__meta">C9 League Exchange Scholar</p>
          </div>
          <img class="cv-logo" src="https://haozhengwan.github.io/images/logo/PKU.png" alt="Peking University logo">
        </div>
        <ul class="cv-detail-list">
          <li>Awarded full tuition waiver through the selective C9 inter-university exchange program</li>
          <li>Completed advanced coursework on AI computing system architectures, laying the foundation for current research on hardware-algorithm co-design</li>
          <li>Explored emerging device technologies through a course on spintronics and superconducting quantum computing</li>
        </ul>
      </article>
    </li>

    <li class="cv-entry">
      <div class="cv-date">Jan. 2022 - Jun. 2022</div>
      <article class="cv-card">
        <div class="cv-card__header">
          <div>
            <h3 class="cv-card__title">University of Macau (UM)</h3>
            <p class="cv-card__meta">Exchange Scholar, ECE and <a href="https://ime.um.edu.mo/">SKL-AMSV</a></p>
          </div>
          <img class="cv-logo" src="https://haozhengwan.github.io/images/logo/UMacau.jpg" alt="University of Macau logo">
        </div>
        <ul class="cv-detail-list">
          <li>Awarded tuition waiver and UM exchange scholarship for a full-semester program at the State Key Laboratory of Analog and Mixed-Signal VLSI</li>
          <li>Gained hands-on exposure to analog/mixed-signal IC design flow through courses on analog IC, data converter, and power management IC</li>
        </ul>
      </article>
    </li>
  </ol>
</section>

<section class="cv-section" aria-labelledby="cv-skills">
  <h2 id="cv-skills" class="cv-section__title">Skills</h2>

  <div class="cv-skills">
    <div class="cv-skill-group">
      <h3>Programming</h3>
      <p>Python, C, C++, Rust, Matlab, HTML, Markdown, Shell, LaTeX</p>
    </div>
    <div class="cv-skill-group">
      <h3>Hardware Description</h3>
      <p>Verilog, SystemVerilog, Chisel</p>
    </div>
    <div class="cv-skill-group">
      <h3>CAD/EDA</h3>
      <p>Cadence Virtuoso, Innovus, Genus, Allegro; Synopsys Design Compiler, Library Compiler, SiliconSmart; Xilinx Vivado (ISE), Mentor Graphics ModelSim, Verilator, Altium Designer</p>
    </div>
    <div class="cv-skill-group">
      <h3>Languages</h3>
      <p>Chinese (Mandarin), English (IELTS: 7.0)</p>
    </div>
    <div class="cv-skill-group">
      <h3>Other</h3>
      <p>Adobe Illustrator, LaTeX, Microsoft Office, Photography, Swimming</p>
    </div>
  </div>
</section>

<section class="cv-section" aria-labelledby="cv-teaching">
  <h2 id="cv-teaching" class="cv-section__title">Teaching</h2>

  <p class="cv-role">Teaching assistant, Department of Electrical and Computer Engineering, The University of Hong Kong</p>

  <ul class="cv-course-list">
    <li>
      <strong>ELEC7086</strong>
      <span>Analog and Mixed-Signal IC for AI Circuits</span>
      <em>Graduate, 2026 Spring</em>
    </li>
    <li>
      <strong>ELEC6008</strong>
      <span>Pattern Recognition and Machine Intelligence</span>
      <em>Graduate, 2025 Spring</em>
    </li>
    <li>
      <strong>ELEC3249</strong>
      <span>Pattern Recognition and Machine Intelligence</span>
      <em>Undergraduate, 2024 Spring</em>
    </li>
  </ul>
</section>

<section class="cv-section" aria-labelledby="cv-service">
  <h2 id="cv-service" class="cv-section__title">Academic Service</h2>

  <ul class="cv-service-list">
    <li><strong>Conference reviewer:</strong> DAC'24-26, ICCAD'25-26, DATE'25-26, ASP-DAC'25-26</li>
    <li><strong>Journal reviewer:</strong> IEEE Transactions on Emerging Topics in Computing</li>
  </ul>
</section>

Step 3: Run the markup cleanup check

Run:

if rg -n "<table|style=|<h1>|width=|height=\"" "_pages/curriculum vitae.md"; then exit 1; else echo "legacy CV table markup removed"; fi
rg -n "cv-section|cv-timeline|cv-entry|cv-card|cv-logo|cv-skills|cv-course-list|cv-service-list" "_pages/curriculum vitae.md"
rg -n "permalink: /curriculum vitae/|author_profile: true|layout: archive" "_pages/curriculum vitae.md"
rg -n "HKU.png|HIT.png|JXSDFZ.jpeg|PKU.png|UMacau.jpg" "_pages/curriculum vitae.md"

Expected:

legacy CV table markup removed

The remaining commands print matches for the CV classes, required front matter, and all five logo files.

Step 4: Review the CV markup diff

Run:

git diff -- "_pages/curriculum vitae.md"

Expected: The diff replaces the table-based CV body with the semantic CV sections above. No other file appears in this diff.

Step 5: Commit the CV markup change

Run:

git add "_pages/curriculum vitae.md"
git commit -m "refactor: structure cv timeline content"

Expected: Git creates a commit that includes only _pages/curriculum vitae.md.

Task 2: Add CV Timeline Styles

Files:

Modify: _sass/_archive.scss:28
Step 1: Run the pre-style selector check

Run:

rg -n "cv-section|cv-timeline|cv-entry|cv-card|cv-logo|cv-skills|cv-course-list|cv-service-list" _sass/_archive.scss

Expected: No matches. The command exits with status 1 before the Sass block is added.

Step 2: Add the CV-scoped Sass block

Insert this block in _sass/_archive.scss immediately after the first .archive { ... } block and before .archive__subtitle:

.archive {
  .cv-section {
    margin: 0 0 2.25em;
  }

  .cv-section__title {
    margin: 1.4em 0 0.9em;
    padding-bottom: 0.45em;
    color: $darker-gray;
    font-size: $type-size-3;
    line-height: 1.2;
    border-bottom: 1px solid $border-color;
  }

  .cv-timeline {
    margin: 1em 0 0;
    padding: 0;
    list-style: none;
  }

  .cv-entry {
    position: relative;
    display: grid;
    grid-template-columns: 8.5em minmax(0, 1fr);
    gap: 1.25em;
    margin: 0 0 1.15em;
  }

  .cv-entry:before {
    content: "";
    position: absolute;
    top: 0.45em;
    bottom: -1.2em;
    left: 9.06em;
    width: 1px;
    background: $border-color;
  }

  .cv-entry:last-child:before {
    bottom: 0.45em;
  }

  .cv-entry:after {
    content: "";
    position: absolute;
    top: 0.45em;
    left: 8.78em;
    width: 0.6em;
    height: 0.6em;
    border: 2px solid $link-color;
    border-radius: 50%;
    background: $background-color;
  }

  .cv-date {
    color: $link-color;
    font-size: $type-size-6;
    font-weight: 700;
    line-height: 1.45;
    text-align: right;
  }

  .cv-card {
    min-width: 0;
    padding: 1.05em 1.15em;
    border: 1px solid $border-color;
    border-radius: $border-radius;
    background: #fff;
  }

  .cv-card__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 4.25em;
    gap: 1em;
    align-items: start;
    margin-bottom: 0.75em;
  }

  .cv-card__title {
    margin: 0 0 0.25em;
    color: $darker-gray;
    font-size: $type-size-4;
    line-height: 1.25;
  }

  .cv-card__meta {
    margin: 0;
    color: $dark-gray;
    font-size: $type-size-6;
    line-height: 1.5;
  }

  .cv-logo {
    display: block;
    max-width: 4.25em;
    max-height: 4.25em;
    width: auto;
    height: auto;
    justify-self: end;
    object-fit: contain;
  }

  .cv-detail-list,
  .cv-course-list,
  .cv-service-list {
    margin: 0;
    padding-left: 1.15em;
  }

  .cv-detail-list li,
  .cv-service-list li {
    margin-bottom: 0.35em;
    line-height: 1.55;
  }

  .cv-detail-list li:last-child,
  .cv-service-list li:last-child {
    margin-bottom: 0;
  }

  .cv-skills {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85em;
  }

  .cv-skill-group {
    padding: 0.95em 1em;
    border: 1px solid $border-color;
    border-radius: $border-radius;
    background: $code-background-color;
  }

  .cv-skill-group h3 {
    margin: 0 0 0.4em;
    color: $darker-gray;
    font-size: $type-size-5;
    line-height: 1.3;
  }

  .cv-skill-group p,
  .cv-role {
    margin: 0;
    line-height: 1.55;
  }

  .cv-course-list {
    padding-left: 0;
    list-style: none;
  }

  .cv-course-list li {
    display: grid;
    grid-template-columns: 6em minmax(0, 1fr) 10em;
    gap: 0.75em;
    align-items: baseline;
    padding: 0.7em 0;
    border-bottom: 1px solid $border-color;
    line-height: 1.45;
  }

  .cv-course-list li:first-child {
    border-top: 1px solid $border-color;
  }

  .cv-course-list strong {
    color: $link-color;
  }

  .cv-course-list em {
    color: $gray;
    font-size: $type-size-6;
    font-style: normal;
    text-align: right;
  }

  @include breakpoint(max-width $medium) {
    .cv-entry {
      grid-template-columns: 1fr;
      gap: 0.55em;
    }

    .cv-entry:before,
    .cv-entry:after {
      display: none;
    }

    .cv-date {
      text-align: left;
    }

    .cv-skills,
    .cv-course-list li {
      grid-template-columns: 1fr;
    }

    .cv-course-list li {
      gap: 0.25em;
    }

    .cv-course-list em {
      text-align: left;
    }
  }

  @include breakpoint(max-width $small) {
    .cv-section__title {
      font-size: $type-size-4;
    }

    .cv-card,
    .cv-skill-group {
      padding: 0.9em;
    }

    .cv-card__header {
      grid-template-columns: minmax(0, 1fr) 3.25em;
      gap: 0.75em;
    }

    .cv-logo {
      max-width: 3.25em;
      max-height: 3.25em;
    }
  }
}

Step 3: Run the post-style selector check

Run:

rg -n "cv-section|cv-timeline|cv-entry|cv-card|cv-logo|cv-skills|cv-course-list|cv-service-list" _sass/_archive.scss

Expected: The command prints matches for all CV selectors added in Step 2.

Step 4: Review the Sass diff

Run:

git diff -- _sass/_archive.scss

Expected: The diff adds only one .archive { ... } scoped CV styles block. No global table, layout, sidebar, or navigation selectors are changed.

Step 5: Commit the CV style change

Run:

git add _sass/_archive.scss
git commit -m "style: add cv timeline layout"

Expected: Git creates a commit that includes only _sass/_archive.scss.

Task 3: Static and Build Verification

Files:

Verify: _pages/curriculum vitae.md
Verify: _sass/_archive.scss
Step 1: Verify clean working tree before checks

Run:

git status --short

Expected: No output after Tasks 1 and 2 have been committed.

Step 2: Run CV static checks

Run:

if rg -n "<table|style=|<h1>|width=|height=\"" "_pages/curriculum vitae.md"; then exit 1; else echo "legacy CV table markup removed"; fi
rg -n "cv-section|cv-timeline|cv-entry|cv-card|cv-logo|cv-skills|cv-course-list|cv-service-list" "_pages/curriculum vitae.md" _sass/_archive.scss
rg -n "permalink: /curriculum vitae/|author_profile: true|layout: archive" "_pages/curriculum vitae.md"
rg -n "HKU.png|HIT.png|JXSDFZ.jpeg|PKU.png|UMacau.jpg" "_pages/curriculum vitae.md"
rg -n "https://www.eee.hku.hk/people/canl/|http://homepage.hit.edu.cn/Haifeng|https://ime.um.edu.mo/" "_pages/curriculum vitae.md"

Expected:

legacy CV table markup removed

The remaining commands print matches for class hooks, required front matter, all logo paths, and all preserved links.

Step 3: Run route smoke metadata checks

Run:

rg -n "url: /curriculum vitae/" _data/navigation.yml
rg -n "permalink:" _pages/about.md "_pages/curriculum vitae.md" _pages/projects.md _pages/Gallery.html

Expected: The CV navigation URL remains /curriculum vitae/, and key page permalinks still print.

Step 4: Attempt Jekyll build

Run:

bundle exec jekyll build --config _config.yml,_config.dev.yml

Expected in a healthy local Ruby/Jekyll environment: build exits 0 and prints output containing Destination: ./_site and done in.

Known current environment blocker from this repository state: this command may exit 127 with bundler: command not found: jekyll because the local Ruby/Bundler environment lacks the Jekyll executable. If that happens, record the exact output and continue to Step 5. Do not change Gemfile or install dependencies as part of this CV implementation task.

Step 5: Review final branch diff

Run:

git diff HEAD~2..HEAD --stat
git diff HEAD~2..HEAD -- "_pages/curriculum vitae.md" _sass/_archive.scss
git status --short

Expected: The diff includes only _pages/curriculum vitae.md and _sass/_archive.scss for the CV redesign commits. git status --short prints no output.

Haozheng Wan

CV Timeline Cards Implementation Plan

File Structure

Task 1: Replace CV Page Markup

Task 2: Add CV Timeline Styles

Task 3: Static and Build Verification