Project Content and Thumbnails 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: Correct the research and education copy, add one combined GAMES101/GAMES202 portfolio project, and give every homepage project a consistent native-looking thumbnail.

Architecture: Keep the AcademicPages single homepage and its existing heading-based project list. Add only one neutral image class with a fixed 16:9 box; use local project images so the built site has no runtime image dependency on GitHub or project demos.

Tech Stack: Jekyll, AcademicPages, Markdown, SCSS, Python unittest

Spec: Approved in-chat bounded design; no standalone specification document.

Global Constraints

• Preserve the native AcademicPages layout, typography, sidebar, and heading-based project list.
• Use square corners, no shadows, no cards, and no project grid.
• Keep unpublished 4DGS results, methods, video, and submission plans undisclosed.
• Do not stage, commit, or push any changes.

Task 1: Precise academic copy and combined graphics project

Files:

• Modify: tests/test_site_contracts.py
• Modify: _pages/about.md
• Create: _portfolio/games101-games202.md

Interfaces:

• Consumes: the generated homepage at _site/index.html

• Produces: exact supervisor/education copy and a generated /portfolio/games101-games202/ page

• Step 1: Write the failing contract tests

Add assertions that the built homepage:

self.assertIn(
    '<a href="https://www.cse.ust.hk/~psander">Prof. Pedro V. Sander</a>',
    homepage,
)
self.assertNotIn("Undergraduate Researcher", homepage)
self.assertIn(
    "BSc in Computer Science and an additional major in Mathematics",
    homepage,
)
self.assertIn("Computer Graphics Foundations", homepage)
self.assertIn("https://github.com/TheLogarhythm/GAMES101", homepage)
self.assertIn("https://github.com/TheLogarhythm/GAMES202", homepage)

Also assert that _site/portfolio/games101-games202/index.html exists and contains both repository links.

• Step 2: Run the focused tests to verify RED

Run:

python -m unittest tests.test_site_contracts.SiteContractTest.test_homepage_has_precise_academic_and_research_copy tests.test_site_contracts.SiteContractTest.test_graphics_foundations_project_is_generated -v

Expected: FAIL because the old role/degree wording remains and the combined portfolio entry does not exist.

• Step 3: Implement the minimal copy and project content

Use this homepage wording:

**Ongoing Research**

Supervised by [Prof. Pedro V. Sander](https://www.cse.ust.hk/~psander).

Use this education wording:

- BSc in Computer Science and an additional major in Mathematics, 2023–May 2027 (expected)

Add a combined homepage entry and a portfolio detail page titled Computer Graphics Foundations — GAMES101 & GAMES202, with direct links to:

https://github.com/TheLogarhythm/GAMES101
https://github.com/TheLogarhythm/GAMES202

Describe the implemented assignments concisely, focusing on rasterization, ray tracing, physically based and real-time rendering.

• Step 4: Build and verify GREEN

Run the Jekyll build, then rerun both focused tests. Expected: PASS.

Task 2: Consistent native project thumbnails

Files:

• Modify: tests/test_site_contracts.py
• Modify: _pages/about.md
• Modify: assets/css/main.scss
• Create: images/projects/career-a-vis-ai.png
• Create: images/projects/flight-delay.png
• Create: images/projects/games101-games202.png

Interfaces:

• Consumes: representative public project images/screenshots

• Produces: three local images rendered through .project-thumbnail

• Step 1: Write the failing thumbnail contract test

Assert that the homepage has exactly three project images, that all use local /images/projects/ sources, that every image has non-empty alt text, and that the stylesheet defines one 16:9 .project-thumbnail rule without radius or shadow.

• Step 2: Run the focused test to verify RED

Run:

python -m unittest tests.test_site_contracts.SiteContractTest.test_homepage_project_thumbnails_are_consistent_and_local -v

Expected: FAIL because no project thumbnails exist.

• Step 3: Add local source images and minimal markup

Use representative visuals from the public project pages/repositories and add one image beneath each project heading:

<img class="project-thumbnail" src="/images/projects/example.png" alt="Specific description of the project visual">

Add only this presentation behavior:

.page__content .project-thumbnail {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin: 0.75em 0 1em;
}

Do not add wrappers, cards, backgrounds, rounded corners, or shadows.

• Step 4: Build and verify GREEN

Run the Jekyll build and the focused thumbnail test. Expected: PASS.

Task 3: Full verification and visual review

Files:

• Verify only; no additional production files unless a failing check identifies a defect

Interfaces:

• Consumes: completed generated site

• Produces: evidence that the native layout, links, assets, and responsive thumbnail sizing work together

• Step 1: Run the complete contract suite

Run:

python -m unittest tests.test_site_contracts -v

Expected: all tests PASS.

• Step 2: Run a clean Jekyll build

Expected: build exits successfully without broken first-party image links.

• Step 3: Review the localhost homepage

Check desktop and narrow widths for native AcademicPages spacing, readable images, equal 16:9 image boxes, no horizontal overflow, and no card-like styling.

• Step 4: Confirm repository state

Run git status --short --branch and confirm that nothing was staged, committed, or pushed.