Haozheng Wan

Haozheng Wan

PHD student at HKU, B.Eng. at HIT

Homepage Refined Academic Implementation Plan

Homepage Refined Academic 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: Build a more polished academic homepage with light content structure and scoped Sass, while keeping the existing Jekyll layout and author sidebar.

Architecture: Keep _pages/about.md as the homepage rendered by _layouts/single.html. Replace inline homepage CSS with semantic homepage classes in the Markdown/HTML body, then style those classes inside _sass/_page.scss under .page__content so other pages keep their current appearance.

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

File Structure

  • Modify _pages/about.md: Replace the current raw homepage body with semantic intro, research focus, news, and contact modules.
  • Modify _sass/_page.scss: Add scoped homepage styles for the classes introduced in _pages/about.md.
  • Do not modify assets/css/main.scss: the existing @import "page"; already includes _sass/_page.scss.
  • Do not create a new layout, JavaScript file, image asset, or Sass partial for this scope.
  • Preserve the user-confirmed M3D project link exactly as https://www.itf.gov.hk/en/project-search/project-profile/index.html?ReferenceNo=MHP/363/24.

Task 1: Restructure Homepage Content

Files:

  • Modify: _pages/about.md:10-92

  • Step 1: Run the legacy homepage markup check

Run:

rg -n "<style>|news-container|mapouter|gmap_canvas" _pages/about.md

Expected: The command prints matches for the current inline styles and legacy map/news wrappers, including lines containing <style>, news-container, mapouter, and gmap_canvas.

  • Step 2: Replace _pages/about.md with the structured homepage content

Set _pages/about.md to exactly:

---
permalink: /
title: "Haozheng(Hadrian) Wan - 万浩正"
excerpt: "About me"
author_profile: true
redirect_from: 
  - /about/
  - /about.html
---

<div class="home-intro">
  <p class="home-intro__role"><strong>Ph.D. Candidate</strong></p>
  <p class="home-intro__affiliation">
    Department of Electrical and Computer Engineering,
    <a href="http://canlab.hku.hk/">CANLab</a><br>
    The University of Hong Kong
  </p>
</div>

## About me

I am a third-year Ph.D. student in the Department of Electrical and Computer Engineering at The University of Hong Kong, supervised by Prof. Can Li at the Cognitive and Adaptive Neuromorphic Computing Lab (CANLab). Currently, I'm working on hardware-algorithm co-design for next-generation AI computing systems, particularly leveraging analog computing-in-memory (CIM) and device-level stochasticity in emerging memories.

My work spans from harnessing intrinsic analog errors for hardware security and <a href="https://cerg1.ugc.edu.hk/cergprod/scrrm00542.jsp?proj_id=17207925&amp;old_proj_id=null&amp;proj_title=&amp;isname=li&amp;ioname=can&amp;institution=&amp;subject=&amp;pages=1&amp;year=&amp;theSubmit=17207925">computational provenance</a>, to regulating these errors for privacy-preserving computation, and toward <a href="https://www.itf.gov.hk/en/project-search/project-profile/index.html?ReferenceNo=MHP/363/24">monolithic 3D (M3D) architectures</a> that not only transcend analog variability but also support more diverse operators and larger on-chip bandwidth for fully homomorphic encryption.

Prior to Hong Kong, I received my B.S. degree from the Department of Microelectronics Science and Engineering, Harbin Institute of Technology (HIT) in 2023, where I graduated ranked 1st in my cohort. During my undergraduate studies, I was also fortunate to participate in exchange programs at Peking University and the University of Macau, working on AI computing systems and analog IC design. You can find more details about my research and ongoing work on my [Projects](/projects/) page. If you are interested in my research and looking for academic discussion, feel free to reach out to me through email.

## Research focus

<div class="home-research-grid">
  <div class="home-research-item">
    <strong>Hardware-algorithm co-design</strong>
    <span>Designing next-generation AI computing systems across algorithms, circuits, and architectures.</span>
  </div>
  <div class="home-research-item">
    <strong>Analog computing-in-memory</strong>
    <span>Leveraging analog CIM and device-level stochasticity in emerging memories.</span>
  </div>
  <div class="home-research-item">
    <strong>Privacy and provenance</strong>
    <span>Exploring how intrinsic analog errors can support hardware security, computational provenance, and privacy-preserving computation.</span>
  </div>
  <div class="home-research-item">
    <strong>Monolithic 3D architectures</strong>
    <span>Studying M3D AI computing systems with richer operators and larger on-chip bandwidth.</span>
  </div>
</div>

## News

<ul class="home-news-list">
  <li class="home-news-item">
    <time class="home-news-date" datetime="2025-11-30">2025.11.30</time>
    <span>Candidature confirmed! I am now a Ph.D. candidate.</span>
  </li>
  <li class="home-news-item">
    <time class="home-news-date" datetime="2023-08-24">2023.08.24</time>
    <span>I joined The University of Hong Kong as a Ph.D. student.</span>
  </li>
  <li class="home-news-item">
    <time class="home-news-date" datetime="2023-06-10">2023.06.10</time>
    <span>I obtained my B.Eng. degree in Microelectronics from HIT.</span>
  </li>
  <li class="home-news-item">
    <time class="home-news-date" datetime="2023-05-13">2023.05.13</time>
    <span>I built my own homepage.</span>
  </li>
</ul>

## Contact

<div class="home-contact-card">
  <p>Academic discussion and research questions are welcome by email.</p>
  <ul class="home-contact-list">
    <li><strong>Email:</strong> <a href="mailto:hzwan@connect.hku.hk">hzwan [at] connect [dot] hku [dot] hk</a></li>
    <li><strong>Office:</strong> Room 201, Chow Yei Ching Building, Pokfulam Road, Hong Kong SAR</li>
  </ul>

  <div class="home-map">
    <iframe title="Map to Chow Yei Ching Building, The University of Hong Kong" src="https://maps.google.com/maps?q=chow%20yei%20ching%20building&amp;t=&amp;z=15&amp;ie=UTF8&amp;iwloc=&amp;output=embed" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
  </div>
</div>
  • Step 3: Run the cleanup check

Run:

if rg -n "<style>|news-container|mapouter|gmap_canvas" _pages/about.md; then exit 1; else echo "legacy inline homepage styles removed"; fi
rg -n "https://www.itf.gov.hk/en/project-search/project-profile/index.html\\?ReferenceNo=MHP/363/24" _pages/about.md

Expected:

legacy inline homepage styles removed

The second command prints the M3D link line from _pages/about.md.

  • Step 4: Commit the homepage structure change

Run:

git add _pages/about.md
git commit -m "refactor: structure homepage content"

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

Task 2: Add Scoped Homepage Sass

Files:

  • Modify: _sass/_page.scss:109

  • Step 1: Confirm homepage selectors are not already styled

Run:

rg -n "home-intro|home-research-grid|home-news-list|home-contact-card|home-map" _sass/_page.scss

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

  • Step 2: Append the scoped homepage styles after the existing .page__content block

Insert this Sass block immediately after the first .page__content { ... } block, which currently ends before .page__hero:

.page__content {
  .home-intro {
    margin: 0 0 2em;
    padding: 1.25em 1.5em;
    border: 1px solid mix(#fff, $link-color, 82%);
    border-left: 4px solid $link-color;
    border-radius: $border-radius;
    background: mix(#fff, $link-color, 96%);
  }

  .home-intro__role {
    margin: 0 0 0.35em;
    color: $darker-gray;
    font-size: $type-size-4;
    line-height: 1.3;
  }

  .home-intro__affiliation {
    margin: 0;
    color: $dark-gray;
    line-height: 1.55;
  }

  .home-research-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85em;
    margin: 1em 0 1.75em;
  }

  .home-research-item {
    padding: 1em;
    border: 1px solid $border-color;
    border-radius: $border-radius;
    background: #fff;
  }

  .home-research-item strong {
    display: block;
    margin-bottom: 0.35em;
    color: $darker-gray;
    line-height: 1.35;
  }

  .home-research-item span {
    display: block;
    color: $dark-gray;
    font-size: $type-size-6;
    line-height: 1.5;
  }

  .home-news-list {
    margin: 1em 0 2em;
    padding: 0;
    border-top: 1px solid $border-color;
    list-style: none;
  }

  .home-news-item {
    display: grid;
    grid-template-columns: 7.25em minmax(0, 1fr);
    gap: 0.85em;
    align-items: start;
    margin: 0;
    padding: 0.85em 0;
    border-bottom: 1px solid $border-color;
  }

  .home-news-date {
    color: $link-color;
    font-size: $type-size-6;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
  }

  .home-contact-card {
    margin-top: 1em;
    padding: 1.25em;
    border: 1px solid $border-color;
    border-radius: $border-radius;
    background: $code-background-color;
  }

  .home-contact-card p:last-child {
    margin-bottom: 0;
  }

  .home-contact-list {
    margin: 0 0 1.25em;
    padding: 0;
    list-style: none;
  }

  .home-contact-list li {
    margin: 0 0 0.5em;
    line-height: 1.55;
  }

  .home-map {
    position: relative;
    width: 100%;
    min-height: 260px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid $border-color;
    border-radius: $border-radius;
    background: #fff;
  }

  .home-map iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
  }

  @include breakpoint(max-width $medium) {
    .home-research-grid,
    .home-news-item {
      grid-template-columns: 1fr;
    }

    .home-news-item {
      gap: 0.25em;
    }
  }

  @include breakpoint(max-width $small) {
    .home-intro,
    .home-contact-card {
      padding: 1em;
    }

    .home-map {
      min-height: 220px;
      aspect-ratio: 4 / 3;
    }
  }
}
  • Step 3: Confirm the Sass selectors exist

Run:

rg -n "home-intro|home-research-grid|home-news-list|home-contact-card|home-map" _sass/_page.scss

Expected: The command prints matches for each homepage selector added in Step 2.

  • Step 4: Commit the scoped Sass change

Run:

git add _sass/_page.scss
git commit -m "style: polish homepage sections"

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

Task 3: Build and Visual Verification

Files:

  • Verify: _pages/about.md

  • Verify: _sass/_page.scss

  • Step 1: Build the site with development config

Run:

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

Expected: The build completes successfully and prints output containing Destination: ./_site and done in.

  • Step 2: Start the local Jekyll server

Run:

bundle exec jekyll serve -l -H localhost --config _config.yml,_config.dev.yml

Expected: The server prints a local URL at http://localhost:4000/ and keeps running until stopped.

  • Step 3: Check the homepage visually

Open http://localhost:4000/ in the browser at desktop width and mobile width.

Expected:

  • The left author sidebar still appears on desktop.
  • The intro block appears above “About me” and does not overlap the title.
  • Research focus appears as two columns on desktop and one column on mobile.
  • News items appear as a clean list without a nested scroll box.
  • Contact details and map appear inside one contact block.
  • Text does not overflow date labels, research cards, or contact rows.

  • The map iframe fills its bordered container without stretching nearby content.

  • Step 4: Smoke-check key routes

Run these commands while the Jekyll server is running:

curl -I http://localhost:4000/
curl -I http://localhost:4000/publications/
curl -I http://localhost:4000/projects/
curl -I http://localhost:4000/Gallery/
curl -I "http://localhost:4000/curriculum%20vitae/"

Expected: Each command prints an HTTP response with 200 OK.

  • Step 5: Stop the Jekyll server and check repository state

Stop the server with Ctrl-C, then run:

git status --short

Expected: No output. The working tree is clean after the two implementation commits.