Most academic research groups need a website that provides information about the group's research activities, publications, members, recent news, and so forth. Many of us accomplish this by adapting a WordPress template. This is really simple to set up, but time consuming to maintain. For example, what if you want a page listing all of the group's publications, but you also want to list relevant publications on the page for an individual research project?<p>As part of my pandemic stress reduction activities, I decided to play around with React and Bootstrap in order to design a new version of my research group's website. My goals were:<p>* A static site deployed using GitHub pages. No more WordPress. No backend database.<p>* A SPA (Single Page Application). Just one page. Because that's what the cool kids do. More seriously, I wanted to enable the viewers to get a decent overview of my research group just by scrolling and without any clicking.<p>* Very mobile friendly. My goal is little to no usability cost for using your phone's browser.<p>* Easy to maintain. For example, to add a new publication, just update your .bib file (which you have anyway), run a script, and information about the new publication appears in multiple locations throughout the site.<p>These goals produced some interesting design choices, such as the use of what I call "horizontal" and "vertical" drill downs. I'll let you be the judge of whether and how well it succeeds. That said, I am quite certain the current site is much better than the WordPress site it replaced.<p>Here's my research group's new site:<p>https://csdl.ics.hawaii.edu/<p>It occurs to me that others might be interested in how I did it, and potentially using my code as a basis for their own academic research group website, so I've set up the source repo as a template with an MIT License. Here it is:<p>https://github.com/csdl/csdl.github.io<p>Enjoy! Comments welcomed.