Research project page template

This is a template you can use to build a project page for your research paper, adapted from the original Nerfies page. It's designed to be easy to set up for those without web development experience, but web developers will appreciate that it's flexible and built with modern, familiar technologies. See a live demo of the template here.

Features

• Easily edit the content in Markdown instead of HTML.
• Quick-to-load, works with mobile devices, accessible, SEO-friendly, and supports dark mode.
• Includes out-of-the-box components for figures, image comparison sliders, LaTeX, two-column layouts, code blocks (with syntax highlighting), small caps, videos, and YouTube embeds.
• Add custom components using HTML or even other web frameworks like React, Vue, or Svelte.
• Built with Astro, Tailwind CSS, MDX, and Typescript.

Real-world examples

• Token-Efficient Long Video Understanding for Multimodal LLMs (NVIDIA Research)
• Lossy Compression With Pretrained Diffusion Models (ICLR 2025)
• CLIP-RT: Learning Language-Conditioned Robotic Policies from Natural Language Supervision
• StochSync: Stochastic Diffusion Synchronization for Image Generation in Arbitrary Spaces
• CRESSim: Simulator for Advancing Surgical Autonomy
• PCO: Precision-Controllable Offset Surfaces with Sharp Features

Usage

Want help setting it up? Please schedule a call with me here, and I'll personally walk you through making your project page live! I want to talk to potential users to figure out pain points and features to add.

1. Install Node.js.
2. Click "Use this template" to make a copy of this repository and then clone it, or just clone it directly.
3. Run npm install from the root of the project to install dependencies.
4. Edit the content in /src/pages/index.mdx, and remember to update the favicon and social link thumbnail (optional). In the frontmatter in index.mdx, they are set to favicon.svg and screenshot-light.png respectively, which refer to files in /public/.
5. Run npm run dev to see a live preview of your page while you edit it.
6. Host the website using GitHub Pages, Vercel, Netlify, or any other static site hosting service.

Icons

This template uses Astro Icon library.

To use a custom icon:

1. Search on Iconify to find the icon you want. For example, the Hugging Face icon is simple-icons:huggingface, from the Simple Icons icon set.
2. Install the corresponding icon set: npm install @iconify-json/simple-icons.
3. If you're using the icon in one of the link buttons, add it in one of the objects in the links prop of the <Header /> component in index.mdx:

    {
      name: "Hugging Face",
      url: "https://huggingface.co/",
      icon: "simple-icons:huggingface"
    }

Or, to use it anywhere in an Astro component or MDX file:

import { Icon } from "astro-icon/components";

<Icon name={"simple-icons:huggingface"} />

Notes

• If you're using VS Code, I recommend installing the Astro extension to get IntelliSense, syntax highlighting, and other features.
• When people share the link to your project on social media, it will often appear as a "link preview" based on the title, description, thumbnail, and favicon you configured. Double check that these previews look right using this tool.
• The Nerfies page uses the Google Sans font, which is licensed by Google, so unfortunately, I had to change it to a different font instead (I picked Noto Sans).

Alternative templates

• Clarity: A Minimalist Website Template for AI Research by Shikun Liu. Beautiful and careful design that's distinct from the original Nerfies page. Editable via an HTML template and SCSS.
• Academic Project Page Template by Mai Nishimura. Built with React and UIKit and editable with Markdown in a YAML file.

Credits

This template was adapted from Eliahu Horwitz's Academic Project Page Template, which was adapted from Keunhong Park's project page for Nerfies. It's licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.