Research Project Page Template

Conference Name
*author note one, author note two

Abstract

This is a live demo for a template you can use to create a simple project page for your research paper. See the code for the template and instructions on how to use it yourself here. It’s made with the Astro web framework and styled with Tailwind CSS. You write the content in MDX, which enables markdown formatting like bold, italics, and strikethrough, as well as custom components like small caps.

Figures

Use the figure component to display images, videos, equations, or any other element, with an optional caption.

Diagram of the transformer deep learning architecture.
Diagram of the transformer deep learning architecture.

If you stored your figures as PDFs, the Picture component can convert them into web-friendly images automatically.

Impact of the sparsity-aware algorithm in XGBoost on the Allstate-10K dataset.
Impact of the sparsity-aware algorithm in XGBoost on the Allstate-10K dataset.

Use the Comparison component to compare two elements with an interactive slider. It should work for any component or HTML element, including images, videos, and 3D models.

Photo of two dogs running side-by-side in shallow water, lossily compressed using the DiffC algorithm
Original photo of two dogs running side-by-side in shallow water
A photo of two dogs running side-by-side in shallow water, lossily compressed using the DiffC algorithm.

Two columns

Use the two columns component to display two columns of content. In this example, the first column contains a figure with a YouTube video and the second column contains a figure with a custom React component. By default, they display side by side, but if the screen is narrow enough (for example, on mobile), they’re arranged vertically.

Take a look at this YouTube video.
Now look at this cube, rendered with the <model-viewer> web component.

LaTeX

You can also add LaTeX formulas, rendered during the build process using KaTeX so they’re quick to load for visitors of your project page. You can write them inline, like this: a2+b2=c2a^2 + b^2 = c^2. Or, you can write them as a block:

abf(x)dx\int_a^b f(x) dx

Tables

Add simple tables using GitHub Flavored Markdown syntax:

ModelAccuracyF1 scoreTraining time (hours)
BERT-base0.890.874.5
RoBERTa-large0.920.917.2
DistilBERT0.860.842.1
XLNet0.900.896.8

BibTeX citation

Displaying your BibTeX citation in a code block makes it easy to copy and paste.

@misc{roman2024academic,
author = "{Roman Hauksson}",
title = "Academic Project Page Template",
year = "2024",
howpublished = "\url{https://research-template.roman.technology}",
}