CV Timeline Cards Redesign

Goal

Redesign the Curriculum Vitae page so it reads like a polished academic CV rather than a hand-built table layout, while preserving the existing Jekyll theme, left author profile, content facts, logos, and permalink.

Selected Direction

The selected direction is “Timeline Cards.” Education and exchange/research experience should become chronological cards with clear date ranges, institutional logos, and concise detail lists. Skills, teaching, and academic service should become cleaner, compact sections below the timeline content.

The page should feel academic and document-like, not like a product dashboard. The redesign should improve hierarchy, spacing, mobile behavior, and logo consistency without adding JavaScript or new assets.

Current State

The CV page is _pages/curriculum vitae.md, rendered at /curriculum vitae/ with layout: archive and author_profile: true. The layout includes the existing sidebar and renders page content inside .archive.

The page currently uses inline HTML tables with fixed widths, inline styles, h1 headings inside table cells, and inconsistent logo heights. This works on wide screens but is brittle, visually dated, and less reliable on mobile. Skills, teaching, and academic service are plain Markdown lists with limited visual hierarchy.

Scope

In scope:

• Keep layout: archive, title: "Curriculum Vitae", permalink: /curriculum vitae/, and author_profile: true.
• Replace inline table-based Education and Experiences markup with semantic CV timeline markup.
• Keep the existing content facts unless fixing a small wording/capitalization issue.
• Keep and restyle the existing institution logos.
• Add CV-scoped styles using .cv-* classes.
• Improve mobile responsiveness and logo sizing.
• Make skills, teaching, and academic service easier to scan.

Out of scope:

• Changing the URL or navigation label.
• Creating a new layout.
• Adding JavaScript.
• Adding new images, fonts, dependencies, or external assets.
• Rewriting other pages.
• Changing the previously pending homepage News/sidebar CSS fixes.
• Creating a downloadable PDF CV.

Content Design

The page should be organized as:

1. Education
   • Timeline entries for:
     • The University of Hong Kong
     • Harbin Institute of Technology
     • Attached Middle School to Jiangxi Normal University
   • Each entry includes a date range, institution name, department/school, credential, key details, and logo.
2. Research / Exchange Experience
   • Timeline entries for:
     • Peking University
     • University of Macau
   • Keep the current exchange details and links.
   • The commented-out PolyU block should remain omitted unless the user asks to restore it.
3. Skills
   • Group into compact categories:
     • Programming
     • Hardware description
     • CAD/EDA
     • Languages
     • Other
   • Use a clean list or pill-style tags, scoped to the CV page.
4. Teaching
   • Keep the TA role statement.
   • Present courses as clean rows with course code, title, level, and term/year.
5. Academic Service
   • Keep conference and journal reviewer information.
   • Improve punctuation and visual grouping.

Visual Design

Use the same restrained academic style as the homepage redesign:

• White page background.
• Dark gray text.
• Refined indigo accent from the existing link color.
• Light gray borders.
• Small radius consistent with the theme.
• No large hero, decorative effects, or single-hue heavy palette.

Timeline entries should use:

• A compact date column on desktop.
• A subtle vertical rule and node marker.
• A white card for the entry body.
• A consistently sized logo area.
• Institution names as card titles, not page-level headings.

On mobile:

• Timeline should collapse to one column.
• Date ranges should sit above each card.
• Logos should shrink and remain aligned without forcing horizontal overflow.
• Long institution names should wrap cleanly.

Technical Design

Files expected to change during implementation:

• _pages/curriculum vitae.md
  • Replace inline table markup with CV-specific semantic HTML.
  • Use classes such as .cv-section, .cv-timeline, .cv-entry, .cv-date, .cv-card, .cv-card__header, .cv-logo, .cv-skills, .cv-course-list, and .cv-service-list.
  • Keep Markdown where it remains clearer, but avoid inline style attributes.
• _sass/_archive.scss
  • Add CV-scoped styles for .cv-* classes, because the page uses layout: archive.
  • Avoid broad selectors that affect gallery, projects, accomplishments, or other archive pages.

Optional only if styles become too large:

• _sass/_cv.scss
  • Create only if the CV styles become large enough to justify a separate partial.
  • If created, import it from assets/css/main.scss near the archive/page imports.

Responsiveness

Desktop:

• Preserve the sidebar plus main archive layout.
• Timeline entries may use a grid with date, marker, card, and logo/card header.
• Keep logo dimensions stable.

Mobile:

• Use one-column entries.
• Avoid fixed-width tables and inline dimensions.
• Ensure course titles, school names, and reviewer lists wrap without overflow.

Accessibility and Semantics

• Use logical heading order.
• Use lists for repeated timeline items and course/service items.
• Add useful alt text to institution logos.
• Do not hide content behind hover-only interactions.
• Keep links visible and keyboard-accessible through existing theme link behavior.

Validation Plan

After implementation:

• Confirm _pages/curriculum vitae.md no longer contains inline style= attributes for the main CV layout.
• Confirm no table layout remains for Education or Experiences.
• Confirm all expected logos and links are still present.
• Confirm the permalink remains /curriculum vitae/.
• Run available static checks for .cv-* hooks in Markdown and Sass.
• Run Jekyll build if the local Ruby/Jekyll environment is fixed.
• Visually check desktop and mobile widths once a local build/server is available.

Non-Goals

This is not a content rewrite or a new CV data model. It is a focused presentation redesign of the existing CV page.