This is my personal website, built in React and hosted on Vercel. I designed most of it with smaller screens in mind first, since my hope was to render it best on the screen of phones, then made sure everything held up on desktop too, using different tailwind classnames for different screen sizes so pages fit well on small, medium, and large screens alike.

The home page is smaller and vertically centered rather than using the full width like the rest of the site, since it's the first thing anyone sees and I wanted it to feel right on a phone before anything else. On the top left of the navbar, it dynamically renders the current page name based on the url you're on, and on small screens the links collapse into a hamburger button that opens into a full screen menu.

For the gallery, I built an indexed system that automatically tiles a group of photos and displays them, hovering a photo reveals its caption sliding up from the bottom. Originally the captions came from the photo's filename, split by underscore, so each member of that array got appended with spaces to become the string making up the name of the place, which is what shows up on hover. The gallery is much nicer now and loads quickly too, since I wrote a js script to go through each image and compress it, taking the photos from 40 MB down to about 4MB, meaning the page loads much much faster. The two photos that are actually portraits of me get compressed less aggressively than the rest so they stay sharp, since those are the ones I want search engines to associate with my name.

I wanted to make sure the site would be easy to add to in the future, so the projects page pulls automatically from a JSON file. I specify a title, date, description, image path, and links, where I just give a tag name for each link and it renders in a unified button format. These are autopopulated with reference ids and jump to the right spot automatically, going straight to that project's section, and they also get added to a table of contents at the top automatically, so adding a new project is just adding a JSON entry, nothing else. Publications works the same way, off its own JSON file, showing the paper's title, authors with my own name auto-bolded, venue and year, and the same flexible tag and link buttons as projects.

The CV page is taken from the latex code of my actual resume, restructured into that same JSON format so it renders natively on the site instead of just being an embedded PDF, with the option to download the compiled latex pdf too. The publications section on that page pulls from the exact same JSON file the publications page uses, so I only ever add a new paper in one place and both pages stay in sync.

The blog has search and topic filtering over a list of posts, and each post's actual content is a static html file that gets fetched dynamically based on the url, so writing a new post is dropping in an html file and a metadata entry rather than writing more react. Contact is just emails and socials, written with brackets around the at sign to dodge the most basic scrapers.

I put the site on google search console with a sitemap so it gets indexed properly, and spent time making sure page titles, descriptions, and image metadata are set up right so photos of me actually have a shot at showing up when people search my name, without cluttering the site with extra images just for that purpose.

Overall I really love the theme of this site, with the blue accents, I got some inspiration from other research portfolios I'd seen. Before this it was pretty scattered, without a gallery or projects page, and mostly just had the home page with a weird VantaJS background running on it. Now it's a lot more complete: a dynamic gallery, a projects page and publications page that both pull from JSON so they're easy to keep updated, a CV page sourced from my actual resume, and a blog that can actually grow instead of being one hardcoded post.