jackyjiang08.github.io

Personal website of Yuqing (Jacky) Jiang — CS & Statistics @ UIUC Quantitative Developer · Data Scientist · ML Engineer

---

Overview

Three pages of plain HTML, CSS, and JavaScript — no framework, no bundler, no runtime dependencies (npm is used only by the offline photo/map build scripts):

• index.html — the portfolio: profile sidebar, highlights, experience, projects, publication, skills, education, contact.
• misc.html — beyond work: hobbies, a featured-photo carousel, and an interactive travel Footprints map.
• album.html — the full photo collection as a masonry collage.

Every push to main is deployed automatically by GitHub Pages, so the source in this repository is exactly what ships to production. The site is designed around one goal: let a recruiter or hiring manager understand the work in under a minute, on any device.

Features

Portfolio sections	Academic-style profile sidebar, highlights with year-filtered archive, experience timeline, project grid, publication, skills, and education
Résumé viewer	View-only in-page PDF viewer (PDF.js) with an AI/ML ↔ Data variant switch, opened from the profile sidebar
Command palette	Cmd/Ctrl + K fuzzy search (with number + ASCII aliases) across navigation and quick actions
Misc. page	Hobby grid with original line icons, featured marquee carousel, and a full album page ordered by manually set dates
Footprints map	Single-projection composite world map (Natural Earth) with GPU-smooth zoom that re-bakes into the viewBox for vector crispness, CN/US province/state detail layers, region/country/city popovers, and animated progress rings
Page views	Live counter in the sidebar backed by the free Abacus API, hidden gracefully when unreachable
Theming	Light/dark toggle, light as default, persisted in localStorage
Motion	canvas-nest.js cursor-following network background, plus an original click ripple/burst effect
Contact	Web3Forms-backed form with honeypot spam protection and a mail-client fallback
SEO	JSON-LD Person schema, Open Graph and Twitter cards, sitemap.xml, robots.txt
Accessibility	WCAG-AA contrast in both themes, full keyboard support, semantic landmarks, skip-to-content link, and prefers-reduced-motion honored by every animation

Tech stack

Runtime code is vendored, never hotlinked: canvas-nest.js (MIT) for the ambient background and PDF.js (Apache-2.0) for the in-page résumé viewer. Everything else is hand-written: styling is organized with CSS custom properties (design tokens) across layered stylesheets; behavior is split into small vanilla scripts, each owning a single concern.

Project structure

index.html              # portfolio page — semantic sections, JSON-LD, meta
misc.html               # Misc. page — hobbies, featured carousel, Footprints map
album.html              # full photo album (masonry + lightbox)
css/
  tokens.css            # design tokens: both theme palettes, type, spacing, radii
  base.css              # reset and base typography
  layout.css            # container, nav, two-column grid, footer
  components.css        # buttons, cards, chips, modal, palette, form controls
  sections.css          # per-section styles (hero … contact, Misc., map)
  utilities.css         # helpers, focus styles, reduced-motion rules
  background.css        # background canvas placement
js/
  main.js               # theme toggle, scrollspy + progress, reveal, highlights, views counter
  gallery.js            # shared lightbox, album masonry, featured carousel
  footprints.js         # Footprints map: camera, popovers, rings
  background.js         # canvas-nest loader + click ripple/burst effect
  modal.js              # shared modal (dialog semantics, focus trap)
  resume-viewer.js      # view-only PDF résumé viewer (AI/Data switch)
  command-palette.js    # Cmd/Ctrl-K palette
  contact.js            # form submission
  data/
    highlights.js       # Highlights entries — append an object to add one
    photos.js           # photo manifest — GENERATED by the inbox pipeline
    footprints.js       # visited countries/regions/cities
  vendor/
    canvas-nest.min.js  # canvas-nest.js v2.0.4 (MIT)
    pdf.min.js          # PDF.js 3.11.174 (Apache-2.0) + pdf.worker.min.js
assets/
  img/                  # headshot, favicons, Open Graph image
  maps/                 # generated composite map + LICENSES.md (Natural Earth, PD)
  photos/               # gallery WebPs (+ thumbs/) in date folders, built by the pipeline
  resume/               # résumé PDFs (AI/ML and Data Analytics variants)
data/
  maps-src/             # Natural Earth source data for the map build
photos-inbox/           # photo upload inbox — see its README
scripts/
  process-inbox.mjs     # photo pipeline (CI + npm run photos)
  build-map.mjs         # composite map builder (npm run map)
sitemap.xml
robots.txt

Getting started

Clone and serve the folder — there is nothing to install or build.

git clone https://github.com/JackyJiang08/JackyJiang08.github.io.git
cd JackyJiang08.github.io
python3 -m http.server 8000

Then open http://localhost:8000. Opening index.html directly in a browser also works, though a local server better matches production behavior for absolute paths.

Configuration

• Contact form — the access_key hidden input in index.html holds the Web3Forms key; replace it to route submissions to a different inbox. If the key is ever removed, the form degrades gracefully by handing the message to the visitor's email client.
• Theme and typography — every color, font, radius, and spacing value lives in css/tokens.css; both palettes can be retuned from that one file.
• Content — portfolio copy is authored inline in index.html; highlights, photos, and footprints live in js/data/.

Adding photos

Photos are added by dropping files into photos-inbox/<tag>/ — a GitHub Action converts them to WebP + thumbnails, adds them to the album, links them to the Footprints map (the folder tag names the country/region/city), and empties the inbox. Full conventions in photos-inbox/README.md.

From your phone — no tooling needed:

1. Open github.com in a mobile browser → photos-inbox/<tag>/
2. Add file → Upload files (≤ 25 MB each) → commit
3. The Action publishes in ~1–2 minutes

From a computer — either the same web upload, or on a local clone:

npm install        # once — installs sharp
# drop files into photos-inbox/<tag>/  (jpg, jpeg, png, heic)
npm run photos     # runs the same processor the Action uses
git add -A && git commit && git push

Filenames follow exactly two forms: YYYY-MM_Region-Num.jpg (masonry only) or YYYY-MM_Region-feat.jpg (carousel + masonry) — both yield date YYYY-MM and caption Region ("Region · YYYY-MM" in the lightbox). Dates are manual only (the prefix, or editing date in js/data/photos.js); undated photos sort last. Manual edits to caption/date/featured survive reprocessing.

Deployment

GitHub Pages serves main from the repository root. Pushing to main publishes within a minute:

git push origin main

Credits

The layout direction draws on the CS-academic homepage tradition — sidebar profile, news/highlights section, project cards — and on personal sites of peers. The ambient network background is canvas-nest.js by hustcc (MIT), the résumé viewer uses PDF.js (Mozilla, Apache-2.0), and the map geometry is Natural Earth (public domain). Everything else — markup, styles, the map camera, click effects, and the command palette — is original code written for this repository.

License

This repository's original content is licensed under CC BY-NC-SA 4.0 (attribution required · non-commercial · share-alike). Exceptions: the vendored components in js/vendor/ (canvas-nest.js, MIT; PDF.js, Apache-2.0) and the Natural Earth data in data/maps-src/ (public domain) remain under their own licenses; the résumé PDFs, headshot, and personal written content are personal material — all rights reserved, no reuse permitted.