A single-page personal bio site deployed on GitHub Pages at https://lukas-xue.github.io.

.
├── index.html          # The entire site — HTML + inline CSS, no JS
└── img/
    ├── aws.png         # AWS logo (Google Favicon API, 128px)
    ├── maersk.png      # Maersk logo (Google Favicon API, 128px)
    ├── emory.gif       # Emory University shield (external source)
    ├── trine.jpg       # Trine University seal (Wikipedia)
    ├── nanollada.png   # nanoLLaDA project logo (from GitHub repo)
    ├── cert-ai-foundational.png
    ├── cert-ai-practitioner.png
    ├── cert-ml-engineer.png
    ├── cert-ml-specialty.png
    └── cert-developer.png

No build tools, no frameworks, no JavaScript. Just static HTML + CSS.

The page has three sections:

1. Header — Name, tagline, links to GitHub / LinkedIn / Google Scholar
2. Timeline — Nested vertical timeline with company/school logos
3. Certifications — Horizontal badge grid from Credly

The timeline uses a two-level nesting pattern:

• Top-level items (.tl-item) — Major career blocks (AWS, Emory, Oxford)
• Nested children (.tl-child inside .tl-children) — Individual roles, internships, or education within a parent

Publications and open source projects are inline lists (.tl-list) attached to the relevant timeline entry rather than standalone sections.

Add a new .tl-child div inside the AWS .tl-children block. Follow the existing pattern:

<div class="tl-child">
  <div class="tl-child-logo"><img src="img/aws.png" alt="AWS"></div>
  <div class="tl-date">MMM YYYY – MMM YYYY</div>
  <div class="tl-title">LEVEL · Team Name</div>
  <div class="tl-org">AWS</div>
  <div class="tl-desc">Description of work.</div>
</div>

Find the .tl-list with label "Publications" (under the Emory entry) and add a <li>:

<li>
  <a href="https://link-to-paper">Paper Title</a>
  <span class="meta">· Authors · Venue, Year</span>
</li>

Find the .tl-list with label "Open Source" (under the CMO entry) and add a <li>:

<li>
  <a href="https://github.com/...">Project Name</a> — Short description.
  <span class="meta"><img src="https://img.shields.io/github/stars/OWNER/REPO?style=social" alt="stars" style="height:1.6em;vertical-align:-0.3em;margin-left:0.3rem"></span>
</li>

The star count badge auto-updates via shields.io. No action needed.

1. Download the badge image from Credly and save to img/cert-NAME.png
2. Add a new .cert block in the Certifications section:

<a class="cert" href="https://www.credly.com/badges/BADGE-ID">
  <img src="img/cert-NAME.png" alt="Cert Name">
  <div class="cert-name">Full Certification Name</div>
  <div class="cert-date">Mon YYYY</div>
</a>

To get badge images programmatically, Credly has an undocumented JSON API:

curl -sL "https://www.credly.com/users/renhao-xue/badges.json" | python3 -m json.tool

Each badge object contains:

• badge_template.image_url — direct PNG URL for the badge
• badge_template.name — certification name
• issued_at_date — date earned
• id — badge ID (for the Credly link: https://www.credly.com/badges/{id})

1. Try Google Favicon API first: https://www.google.com/s2/favicons?domain=DOMAIN&sz=128
2. If that returns a tiny 16px image, try the company's press/brand page
3. For Wikipedia images: fetch the mobile page, grep for upload.wikimedia.org URLs, then curl the direct URL
4. Save to img/ and reference as img/filename.ext

• Main timeline logos (.tl-logo): 40px circle, 36px image inside
• Emory uses .tl-logo.padded which shrinks the image to 30px for breathing room around the seal
• Child logos (.tl-child-logo): 30px circle, 26px image inside
• All use object-fit: contain so logos aren't cropped

Push to a GitHub repo named Lukas-Xue.github.io. GitHub Pages serves from the root of the main branch automatically.

git init
git add index.html img/
git commit -m "feat: initial bio page"
git remote add origin git@github.com:Lukas-Xue/Lukas-Xue.github.io.git
git push -u origin main

The site will be live at https://lukas-xue.github.io within a few minutes.

open index.html
# or
python3 -m http.server 8000  # then visit localhost:8000