This is the source of the Interactive Computing Lab website (Stevens Institute of Technology, Dr. Jonggi Hong). It is a single static web page: plain HTML, CSS, and JavaScript. There is nothing to install, compile, or build. If you can edit a text file and upload it to GitHub, you can maintain this site.
Live site: https://interactivecomputinglab.github.io/ Repository: https://github.com/InteractiveComputingLab/interactivecomputinglab.github.io (the site files are at the top level of the repository)
The repository name is special: GitHub publishes a repository called <organization>.github.io at that address automatically, from the main branch. Do not rename it.
A mirror of the same files is kept at https://github.com/meazizul/ICLAB (live at https://azizulhaque.me/ICLAB/).
(repository root)
├── index.html ← THE ENTIRE SITE. 95% of edits happen in this one file.
├── style.css Template stylesheet. Do not edit. Override in css/custom.css instead.
├── css/custom.css Our small set of style overrides (hero, publication cards).
├── js/main.js Menu, publication filters, and the two hero animations.
├── css/, fonts/, js/ Template libraries (Bootstrap 3, Ionicons, Isotope). Leave as they are.
├── img/team/ One portrait per person, 600×820 px JPG, named firstname-lastname.jpg
├── img/portfolio/ One square thumbnail per paper, 600×600 px JPG, named project-<id>.jpg
├── img/class/ Course card images, 1500×460 px
├── img/gallery/ One folder per album: cover.jpg (900×562), photos 01.jpg, 02.jpg, … and thumbnails 01-thumb.jpg, …
├── img/logo/ Lab logo: icl-mark.png (icon), icl-logo-dark.png, icl-logo-white.png
├── img/favicon.png Browser tab icon (plus favicon-32.png, apple-touch-icon.png, og-image.png for link previews)
└── .nojekyll Tells GitHub Pages to publish the files exactly as they are. Keep it.
The page has these sections, in order. Each starts with an HTML comment you can search for in index.html:
| Section | Search for | What is in it |
|---|---|---|
| Hero | <!-- basic-slider start --> |
Lab name, tagline, animated background, optional video |
| About us + Recent News | <!-- about-us area start --> |
Lab description (left) and dated news items (right) |
| Our Team + Alumni | <!-- team area start --> |
Photo cards, four per row |
| Publications | <!-- basic-portfolio-area start --> |
Filter buttons and one card per paper |
| Classes | <a name="classes"> |
Courses taught by Dr. Hong |
| Videos | <!-- videos area start --> |
Embedded YouTube talks |
| Gallery | <!-- gallery area start --> |
Photo albums (conference trips, lab events) that open as a slideshow |
| Lab Openings | <!-- apply area start --> |
Recruiting text and contact details |
| Footer | <!-- footer start --> |
Copyright line and the "Built with love by" maintainer credit |
- Open the repository on GitHub.
- Click the file you want to change (usually
index.html), then click the pencil icon (Edit). - Make your change. Use Ctrl+F / Cmd+F to find the section.
- Click Commit changes, write a one-line note such as "Add ASSETS 2027 paper", and commit to
main. - Wait one to two minutes. Reload the live site. If you still see the old version, hard-refresh (Cmd+Shift+R or Ctrl+F5).
To add an image in the browser: open the right folder (for example img/team), click Add file → Upload files, drop the image in, and commit.
git clone https://github.com/InteractiveComputingLab/interactivecomputinglab.github.io.git
cd interactivecomputinglab.github.io
python3 -m http.server 8080 # preview at http://localhost:8080
# ... edit index.html and images, refresh the browser to check ...
git add -A
git commit -m "Describe your change"
git pushThe live site updates automatically one to two minutes after git push.
Every recipe is "copy an existing block, then change the words". Never delete the surrounding <div> tags.
Find <h2>Recent News</h2>. The items are lines inside one <p>. Add the newest at the top:
<strong>Oct 2026:</strong> Our paper <em>Paper Title</em> is accepted to <strong>CHI 2027</strong>!<br>Keep the list to roughly the last two years; delete old lines from the bottom.
The pulsing NEW badge is added automatically to whichever line is first, so it moves on its own when you add a line at the top. To link a news item to a photo album, add a Photos pill at the end of the line, pointing at the album's id from the Gallery section:
<a class="news-photos" href="#gallery-assets2026"><i class="ion-images"></i> Photos</a>Clicking it scrolls to the Gallery and opens that album. Link paper titles in the news to their DOI (<a href="https://doi.org/..." target="_blank" rel="noopener"><em>Title</em></a>) so readers can reach the paper in one click.
- Save a portrait photo as
img/team/firstname-lastname.jpg. Crop it to a portrait ratio of about 3:4 (600 × 820 px). Square or landscape photos will look wrong next to the others. - Find
<h2>Our Team</h2>. Members are in rows of four (<div class="row">... fourcol-sm-6 col-md-3columns). Copy one member block and edit it:
<div class="col-sm-6 col-md-3">
<div class="team-item">
<div class="team-item-image">
<img src="img/team/firstname-lastname.jpg" alt="Headshot of Full Name">
<div class="team-item-detail">
<h5 class="team-item-title">Full Name</h5>
<div class="team-social-icon">
<a href="https://personal-site.example" aria-label="Full Name website"><i class="ion-link"></i></a>
<a href="mailto:name@stevens.edu" aria-label="Full Name email"><i class="ion-email"></i></a>
<a href="https://www.linkedin.com/in/..." aria-label="Full Name linkedin"><i class="ion-social-linkedin"></i></a>
</div>
</div>
</div>
<h4 class="team-item-name">Full Name</h4>
<span class="team-item-role">Ph.D. Student, Computer Science</span>
</div>
</div>Delete any <a> link lines you do not need. Available icons: ion-link (website), ion-email, ion-social-linkedin, ion-social-github, ion-social-twitter, ion-university (Google Scholar).
If a row already has four people, start a new <div class="row"> ... </div> after it.
No photo yet? Use the grey placeholder: copy img/team/dawei-xu.jpg (a silhouette) to the new file name. Replace it when a photo arrives.
Someone graduates: cut their whole col-sm-6 col-md-3 block, paste it into the rows under <h2>Alumni</h2>, and change the role to something like M.S. Computer Science, 2026.
- Make a square thumbnail (600 × 600 px JPG) and save it as
img/portfolio/project-<short-id>.jpg. A teaser figure from the paper, a photo from the study, or a simple illustration all work. Keep the style consistent with the existing ones. - Find
<div id="portfolio-grid". The first card after it is the newest paper. Copy one card and paste it above the first one:
<div class="portfolio-item access paper">
<div class="portfolio-wrapper">
<div class="portfolio-thumb">
<img src="img/portfolio/project-<short-id>.jpg" alt="Thumbnail for Short Name" />
<div class="view-icon">
<a href="https://doi.org/10.1145/XXXXXXX" target="_blank" rel="noopener"><span class="icon-attachment"></span></a>
</div>
</div>
<div class="portfolio-caption caption-border text-center">
<h4><a href="https://doi.org/10.1145/XXXXXXX" target="_blank" rel="noopener">Short Name</a></h4>
<div class="work-tag">
<a href="https://doi.org/10.1145/XXXXXXX" target="_blank" rel="noopener">Full Paper Title</a>
<span class="pub-authors">First Author, Second Author, Jonggi Hong</span>
</div>
<div class="paper-menu">
CHI 2027: <a href="https://doi.org/10.1145/XXXXXXX" target="_blank" rel="noopener">PAPER</a>
</div>
</div>
</div>
</div>-
Set the filter classes on the first line. Pick every tag that applies:
access– accessibility workwearable– wearables, smart glasses, hapticshumanai– human-AI interaction, conversational agents, toolspaper(full paper or journal article) orposter(poster, demo, extended abstract, workshop paper)
-
Update the counts in the filter buttons just above the grid, for example
All (28)→All (29). The buttons are labelleddata-filter=".access"and so on. -
Optional extra links in
paper-menu, separated by|:<a href="...">VIDEO</a>,<a href="...">CODE</a>,<a href="...">PDF</a>.
Not published yet (no DOI)? Use the conference program page, or the lab news item, as the link. Do not upload paper PDFs before the publisher releases them.
Inside the card's portfolio-thumb, right after the <img ...> line, add:
<div class="ribbon ribbon-holder">AWARD</div>and in paper-menu write the award after the venue:
CHI 2027 <award>(Best Paper Honorable Mention)</award>: <a href="...">PAPER</a>Then update the sentence under the Publications heading that says how many articles have been honored.
Find <h2>Classes Taught by Dr. Hong</h2>. Copy one <div class="col-sm-6 col-md-6 blog-item"> block, change the semester, title, description, and link. Make a matching card image (1500 × 460 px) in img/class/, or reuse an existing one.
Find <!-- videos area start -->. Copy the blog-item block and change the YouTube ID in the data-src URL (https://www.youtube.com/embed/VIDEO_ID), the author, title, description, and link. Two videos fit per row; the single existing block is centred with col-sm-offset-2, so remove the two offset classes when you add a second one.
- Make a folder
img/gallery/<album-name>/(lowercase, hyphens). Put the photos in it as01.jpg,02.jpg, … (longest side about 1600 px, under 500 KB each). For each photo also save a small 600 × 400 px thumbnail as01-thumb.jpg,02-thumb.jpg, … and a cover imagecover.jpgcropped to 900 × 562 px (16:10). If you skip a thumbnail, the full photo is used in its place (it still works, it just loads slower). - Find
<!-- gallery area start -->. Copy one<div class="col-sm-6 col-md-4">block and paste it where you want the album to appear (newest first). Edit:- the
id="gallery-<album-name>"on thegallery-itemdiv (this is what news Photos links point at), - the
cover.jpgpath and itsalttext, gallery-meta(month and place),gallery-title(event name), and the short paragraph (these also appear at the top of the album panel),- the hidden
<ul class="gallery-album">: one<li><a href="img/gallery/<album-name>/01.jpg" data-thumb="img/gallery/<album-name>/01-thumb.jpg" data-alt="...">Caption</a></li>per photo. The caption shows under the thumbnail in the album panel and under the large photo; write the event, the authors, and what is pictured.
- the
- The photo count badge on the cover fills in by itself. Three albums fit per row; a fourth starts a new row automatically.
- Phone photos in HEIC format must be converted to JPG first (on a Mac:
sips -s format jpeg IMG_1234.HEIC --out 01.jpg). Saving through Preview or Photos also strips location data from the file, which is what you want on a public site.
How it behaves: clicking a card blooms open the album panel, which shows every photo as a thumbnail with its caption. Clicking a thumbnail opens that photo large with its description; arrows and the keyboard move between photos, and the large view steps forward on its own every 3.5 seconds until the last photo (any key or click stops it). Closing the large photo returns to the album panel; closing the panel returns to the page. Change the autoplay speed with the data-autoplay attribute (milliseconds) on the gallery <div>, or set it to 0 to turn it off.
These are ordinary paragraphs. Find the heading (<h2>About us</h2> or <h2>Lab Openings</h2>) and edit the text inside the <p> tags. Office, phone, and email are in the last paragraph of Lab Openings. The copyright year at the very bottom is plain text in the footer (<!-- footer start -->); update it each January.
The hero element is <div id="home-area" ...>. Its attributes control everything:
| Attribute | Meaning |
|---|---|
data-video |
YouTube video ID shown between the animations. Set to "" for animations only. |
data-video-start / data-video-stop |
Seconds into the video to loop between. |
data-video-seconds |
How long the video shows each cycle (default 5). |
data-animation-seconds |
How long each animation shows (default 10). |
The rotation is: network animation → video → wave animation → video → repeat. Both animations react to the mouse. The video only appears once YouTube has actually started playing, so a slow connection just shows the animations.
The title and tagline are the <h1> and <p class="lead"> right below.
| Use | Size | Format | Folder |
|---|---|---|---|
| Team portrait | 600 × 820 px (3:4 portrait) | JPG, under 200 KB | img/team/ |
| Paper thumbnail | 600 × 600 px (square) | JPG, under 200 KB | img/portfolio/ |
| Class card | 1500 × 460 px | JPG | img/class/ |
| Gallery cover | 900 × 562 px (16:10) | JPG, under 150 KB | img/gallery/<album>/cover.jpg |
| Gallery photo | longest side 1600 px | JPG, under 500 KB | img/gallery/<album>/01.jpg … |
| Gallery thumbnail | 600 × 400 px (3:2) | JPG, under 80 KB | img/gallery/<album>/01-thumb.jpg … |
Free tools for cropping and resizing: Preview on macOS (Tools → Adjust Size), Photos on Windows, or https://squoosh.app in the browser. Use only lowercase letters, numbers, and hyphens in file names.
- Open the page locally (
python3 -m http.server 8080) or check the live site after the commit. - Every new image shows up (a broken image icon means the file name or folder does not match).
- Click each new link.
- Publication filter counts match the number of cards.
- Nothing is duplicated or half-deleted: the page should have no stray text at the bottom.
- On a phone (or a narrow browser window) the menu collapses into a ☰ button and everything stacks.
I changed something but the live site looks the same. GitHub Pages takes one to two minutes to publish. Then hard-refresh: Cmd+Shift+R on Mac, Ctrl+F5 on Windows. If you edited css/custom.css or js/main.js, also bump the version number in index.html where they are loaded (custom.css?v=6 → ?v=7) so browsers fetch the new file.
The page is completely blank or unstyled. Usually a broken <div> in index.html. Check the last edit: every opening tag needs its closing tag. GitHub's file view will show a diff of exactly what changed; revert it if needed (History → the commit → "Revert").
A publication card is much taller than the others. The title is very long. Use a shorter display name in the <h4>; the full title stays in work-tag.
The filter buttons stop working. A card is missing its portfolio-item class or #portfolio-grid got an extra tag inside it.
The hero video does not play. It only plays over HTTPS on the live site, not from a file opened by double-clicking. It also never plays on phones (browsers block autoplay), which is expected; the animations show instead.
GitHub says the site is not publishing. Repository Settings → Pages must show Source: Deploy from a branch, Branch: main, Folder: / (root). The .nojekyll file must be present at the top level. The old address https://interactivecomputinglab.github.io/lab_website/ redirects here and can be left alone.
- Ask Dr. Hong to add the new person as a collaborator on the repository (Settings → Collaborators).
- Point them to this README.
- Walk them through one real change together, for example adding a news item, and watch it go live.
That is the whole process. Everything else is copy, paste, and edit.
Designed and built by Azizul Haque, September 2026. The footer credit ("Built with love by Azizul Haque") links to azizulhaque.me. A future maintainer who rebuilds the site can change it to their own name and link.