Homepage Refined Academic Redesign

Goal

Improve the homepage’s visual polish while preserving its current academic identity, Jekyll structure, and lightweight maintenance model.

Selected Direction

The redesign follows the selected “Refined Academic” direction and the selected implementation scope “Light structure + CSS polish.” The homepage should remain serious, readable, and appropriate for a Ph.D. research profile. It should feel more deliberate through spacing, typography, information hierarchy, and cleaner section treatment, not through a marketing-style hero or heavy visual effects.

Current State

The site is a Jekyll/GitHub Pages site based on Academic Pages and Minimal Mistakes. The homepage is _pages/about.md, rendered at / with the existing single layout and author_profile: true. The author sidebar is generated by _includes/author-profile.html from _config.yml. Global and component styles live in _sass/, with assets/css/main.scss as the stylesheet entry point.

The homepage currently contains the core content needed for a strong academic profile: current Ph.D. status, research narrative, education background, a news list, contact information, and an embedded map. The main issues are visual and structural: inline CSS lives inside the Markdown page, the news box uses a dated scroll panel style, the contact section is plain, and the opening research narrative is not easy to scan quickly.

Scope

In scope:

• Keep the existing single layout and author_profile: true.
• Keep the existing left sidebar behavior and author data source.
• Lightly restructure _pages/about.md using semantic HTML classes.
• Move homepage-specific inline styles into Sass.
• Improve visual hierarchy for the intro, research focus, news, contact information, and map.
• Preserve all existing homepage facts and links unless a typo or obvious wording issue is encountered.
• Keep the design responsive on desktop and mobile.

Out of scope:

• Creating a new homepage layout.
• Replacing the Minimal Mistakes theme.
• Changing navigation structure.
• Rewriting all site pages.
• Adding JavaScript behavior.
• Adding new remote assets, fonts, build tools, or frontend libraries.
• Replacing the profile photo.

Content Design

The homepage body should be organized into four readable modules:

1. Intro section
   • Keeps the current status lines: Ph.D. candidate, ECE, CANLab, HKU.
   • Presents them as a compact intro block instead of raw line breaks.
   • Keeps the main research biography as prose, with improved spacing.
2. Research focus section
   • Adds a small scan-friendly highlight area derived from the existing research paragraph.
   • Suggested focus labels:
     • Hardware-algorithm co-design
     • Analog computing-in-memory
     • Privacy, provenance, and secure AI computing
     • Monolithic 3D AI architectures
   • Each item should be concise and should not introduce claims beyond the existing page content.
3. News section
   • Replaces the scroll container with a clean vertical list.
   • Each news item should show the date as a small label and the event as text.
   • Keep the current news entries.
   • Avoid fixed heights so mobile users do not get trapped in nested scrolling.
4. Contact section
   • Groups email and office location into a clean contact block.
   • Keeps the Google Maps embed below the contact details.
   • Styles the map with a stable aspect ratio, border, and rounded corners.

Visual Design

Use the current refined indigo link color as the main accent. The page should use:

• White background.
• Dark gray text with clear contrast.
• Subtle borders in light gray.
• Soft off-white or very pale blue section backgrounds only where needed.
• Small radius consistent with the existing theme.
• No decorative gradient orbs, large illustrative hero, animated effects, or oversized marketing composition.

Typography should stay within the existing theme stack. The redesign should improve line length, heading rhythm, spacing between sections, and scanability without changing global font families.

Technical Design

Files to modify:

• _pages/about.md
  • Remove inline <style> blocks.
  • Replace the current raw news container and map style block with semantic classes.
  • Add section wrappers only where they improve styling and readability.
• _sass/_page.scss
  • Add a homepage-specific block under .page__content or near the page content styles.
  • Scope selectors to classes used only by the homepage, such as .home-intro, .home-research, .home-news, and .home-contact.
  • Avoid broad changes that could alter publications, projects, gallery, or CV pages.

Optional file if the Sass block becomes too large:

• _sass/_home.scss
  • Create only if homepage styles are substantial enough to justify a separate partial.
  • Import it from assets/css/main.scss after the existing page/component imports.

Responsiveness

Desktop:

• Preserve the existing sidebar plus main content layout.
• Keep content width comfortable for reading.
• Let research highlights appear in a compact two-column grid only if it fits naturally.

Mobile:

• Keep sections single-column.
• Avoid fixed-height scroll panels.
• Ensure map height is stable and not too tall.
• Avoid text overflow in labels, buttons, and news date badges.

Accessibility and Semantics

• Use real headings in logical order.
• Keep links as text links with visible focus and hover behavior from the theme.
• Do not hide essential information behind hover-only UI.
• Use readable date text in news entries.
• Keep the map iframe title descriptive if the iframe markup is touched.

Validation Plan

After implementation:

• Run the local Jekyll server with bundle exec jekyll serve -l -H localhost using _config.dev.yml if available.
• Open the homepage on desktop and mobile widths.
• Confirm the author sidebar, intro, research focus, news, contact, and map all render without overlap.
• Confirm other key pages still render acceptably: /publications/, /projects/, /gallery/, and /curriculum-vitae/ if those routes are configured.
• Run git diff and confirm only intended files changed.

Non-Goals

The redesign should not try to make the homepage look like a product landing page. The goal is a polished academic profile, not a full personal brand rebuild.