Most academic website templates are built for simplicity — a single page, a short bio, and a list of papers. That works for early-career researchers, but falls short for senior researchers who need to present a full body of work: multiple research directions, a growing publication record, an active team, ongoing courses, and project portfolios with rich media.

This template is built specifically for that audience.

This section is for anyone who has never set up a web development environment before. Follow these steps in order — you only need to do the installation steps once.

On a Mac, press Command + Space, type Terminal, and press Enter.

Homebrew is a package manager for macOS that makes it easy to install developer tools. Paste the following command into Terminal and press Enter:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Follow the on-screen prompts. This may take a few minutes. When it finishes, run:

brew --version

If you see a version number, Homebrew is installed.

Node.js is the runtime that powers this project. Install it with:

brew install node

Verify the installation:

node --version
npm --version

Both commands should print a version number (e.g. v20.x.x).

If you haven't already, download this repository. Either:

• Click Code → Download ZIP on GitHub, unzip it, and note the folder location, or
• Run git clone https://github.com/lwwywang/AW4SR-academic-website-4-senior-researcher.git in Terminal.

In Terminal, type cd (with a space after it), then drag the project folder from Finder into the Terminal window. Press Enter. You should now be inside the project folder.

npm install

This downloads all the libraries the project needs. It only needs to run once (or again after a git pull).

npm run dev

Open your browser and go to http://localhost:3000. You should see the website running locally.

To stop the server, press Control + C in Terminal.

Download and install Visual Studio Code (free). Open the project folder in VS Code by dragging it onto the VS Code icon, or via File → Open Folder.

All content lives in the content/ folder. You do not need to touch any other folder for routine edits. The files use TypeScript (.ts / .tsx) — they look like plain text with some extra syntax. You only need to edit the values inside quote marks '...' or template areas; the structure around them stays the same.

The first file to edit is content/site.ts — it controls your name and the navigation bar. Every other file follows the same pattern: find the value you want to change, edit the text between the quotes, and save.

Each page has a detailed editing guide in the docs/ folder:

Option 1 — One-click deploy (recommended)

Vercel will clone this repo into your GitHub account and deploy it automatically. Every git push to main triggers a new deployment — no manual steps needed.

Option 2 — Deploy manually

1. Fork this repository on GitHub
2. Follow the local setup steps above to run the project and edit your content
3. Connect your fork to Vercel for automatic deployment

• 8 pages — About, News, Portfolio, Publications, Projects, Team, Courses, Opportunities
• Dynamic project pages — routes auto-generated from your content, no config needed
• Dark mode — system-aware, persisted in localStorage
• Fully static export — no server required at runtime

HLD: https://clever-pelican-46a.notion.site/35f35604bb16805d9779e24a1c7150a3?source=copy_link

LLD: https://clever-pelican-46a.notion.site/36135604bb1680b49e3eec3e45ce9ec3?source=copy_link

Conducted interviews with a NUS professor to gather and summarize project requirements.