Skip to content

README.md

Latest commit

 

History

History
87 lines (68 loc) · 4.09 KB

README.md

File metadata and controls

87 lines (68 loc) · 4.09 KB
Raw

FutureMLS Lab — Website

A clean, academic single-page website for the Future Machine Learning & Systems (FutureMLS) Lab, founded by Zhongzhu Zhou. Pure HTML / CSS / vanilla JS — no build step, no dependencies. Editorial, scholarly style (serif headings, restrained navy palette). Designed to be hosted for free on GitHub Pages.

Structure

code/
├── index.html              # Main page (hero, about, founder, research, news, team, projects, contact)
├── README.md
├── projects/               # Per-project preview pages
│   ├── oscar.html
│   └── care.html
└── assets/
    ├── css/style.css       # Styles (academic: serif display + navy palette)
    ├── js/main.js          # Nav, mobile menu, gentle scroll reveals
    └── img/
        ├── logo.png        # Lab logo (GitHub org avatar)
        ├── people/         # Member photos (e.g. zhongzhu-zhou.jpg)
        └── projects/       # Project preview images (oscar, care)

Preview locally

No tooling required — just open index.html in a browser, or serve it:

# from inside this folder
python3 -m http.server 8000
# then visit http://localhost:8000

Deploy on GitHub Pages

You have two common options.

Option A — Lab "root" site at https://futuremls-lab.github.io/

  1. Create a repo named FutureMLS-Lab.github.io in the org.
  2. Put the contents of this code/ folder at the repo root (so index.html is at the top level).
  3. Push to the main branch.
  4. Repo → Settings → Pages → Source: Deploy from a branch → Branch: main / (root).
  5. The site goes live at https://futuremls-lab.github.io/

Option B — Project site at https://futuremls-lab.github.io/<repo>/

  1. Create any repo, e.g. website, and push these files to it.
  2. Settings → Pages → Branch: main / (root).
  3. Live at https://futuremls-lab.github.io/website/

Custom domain (optional)

In Settings → Pages → Custom domain, add e.g. futuremls.org, then create a CNAME record at your DNS provider pointing to futuremls-lab.github.io.

Editing content

Everything is plain HTML in index.html — no framework knowledge needed.

  • Lab name / hero — the full lab name is the page's main <h1> at the top of the #home hero.
  • About Zhongzhu Zhou (founder) — edit the #founder section. Replace the placeholder bio text, and the href="#" links (Homepage / Google Scholar / GitHub / Email).
    • To use a real photo instead of the ZZ monogram, replace <div class="founder__avatar" data-mono="ZZ" ...></div> with <img class="founder__photo" src="assets/img/zhongzhu-zhou.jpg" alt="Zhongzhu Zhou" />.
  • Team — edit the #team section. Each person is an <article class="person">. To use a real photo instead of the initials, replace <div class="person__avatar" data-mono="ZC" ...></div> with <img class="person__photo" src="assets/img/people/your-photo.jpg" alt="Name" />. Each member also has a one-line bio and research-area tags (<ul class="person__tags">).
  • Research areas — edit the items in the #research section.
  • Projects — each card in #projects links to a preview page in projects/. To add a project: duplicate projects/care.html, update its title / preview image / abstract / authors / links, drop a preview image in assets/img/projects/, then add a matching <a class="project"> card on index.html. Bold the lab members in the author list with <strong>…</strong>.
  • News — add <li class="news__item reveal"> entries in #news.
  • Contact email — search for contact@futuremls.org and replace with the real address.
  • Colors / fonts — tweak the CSS variables at the top of assets/css/style.css (:root).

Notes

  • Academic, content-first design: serif display headings (Source Serif 4) with a clean sans body (Inter), a restrained navy palette, and generous whitespace — no animated/“tech” effects.
  • Fully responsive (desktop / tablet / mobile) with an accessible mobile menu, and it respects the user's reduced-motion setting.