Research Project Page Template

Roman Hauksson ^*,†

University of Texas at Dallas

Author Two ^*,†

Institution Two

Author Three ^*

Institution Three

Author Four

Institution Four

Conference Name

^*author note one, ^†author note two

Paper Code arXiv Slides

Abstract

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

Visuals

Picture

Use the Picture component to display images. If you have a figure in PDF format, you can pass in its path as the src prop and it will be converted into a web-friendly image automatically.

Photo of two running dogs, lossily compressed using the DiffC algorithm

Wide visual

I constrained the maximum width of the text column to make sure it’s readable even when the screen is wide. But images and other visuals should “break out” and take up more horizontal space: for this, try wrapping them in the Wide component.

Figure with caption

Wrap a visual in a Figure component to add a caption.

Comparison slider

Use the Comparison component to compare two visuals with an interactive slider.

True photo of two dogs running side-by-side in shallow water

Tab panels

Tab panels are a great way to display a labeled collection of related visuals without taking up too much space.

Carousel

A carousel is another useful pattern for a collection of visuals that don’t necessarily have meaningful labels.

Photo of two running dogs, lossily compressed using MS-ILLM

Two columns

Use the two columns component to display two columns of content. In this example, the first column contains a YouTube video embed and the second column contains an interactive 3D model viewer. By default, they display side by side, but if the screen is narrow enough (for example, on mobile), they’re arranged vertically.

$\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: $a^2 + b^2 = c^2$ . Or, you can write them as a block:

\int_a^b f(x) dx

Citation

If you copy your bibliography into ./bibliography.bib, you can cite papers using their BibTeX keys, and they’ll be automatically formatted and included in the bibliography section at the end. For example: (Vaswani et al., 2017). Note that these citations are distinct from footnotes¹, which show up in a separate section if you use them.

Table

Add simple tables using GitHub Flavored Markdown syntax:

Model	Accuracy	F1 score	Training time (hours)
BERT-base	0.89	0.87	4.5
RoBERTa-large	0.92	0.91	7.2
DistilBERT	0.86	0.84	2.1
XLNet	0.90	0.89	6.8

BibTeX citation

Displaying the BibTeX entry for your paper 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}",
}

Bibliography

Vaswani, A., Shazeer, N., Parmar, N., Uszkoreit, J., Jones, L., Gomez, A. N., Kaiser, Ł., & Polosukhin, I. (2017). Attention is All You Need. Advances in Neural Information Processing Systems, 30, 5998–6008. https://proceedings.neurips.cc/paper/2017/file/3f5ee243547dee91fbd053c1c4a845aa-Paper.pdf

On the web, they should really be called “endnotes”, since each page constitutes a full document. ↩