For the 2024 Kent Hack Enough hackathon, we needed a website that would advertise the event, allow people to register for it, and let staff track, manage, and communicate with applicants and attendees. The website that had been used in past years was showing its age - it relied on the now deprecated framework AngularJS, and only ran in a Docker container that provided very old versions of Node.js and MongoDB for it to use. So, I decided to build a replacement.

The new site has a somewhat unique architecture. I decided to keep working with the original public-facing frontend, which was a Vue project that I updated to use Vue 3 and Vite. However, I wanted to create an entirely new staff site using Next.js. I also wanted to avoid the tooling and configuration issues that often come with monorepo setups. So, I created an Express server that provided a database API and, during development, invoked either Vite or Next.js as middleware to serve the frontends of the public and staff sites, respectively. In production mode, both sites were pre-rendered to HTML, so the only things that needed to run were the Express API and a static file server. Believe it or not, once I landed on this single-process setup, it worked really well; other HacKSU members were able to help develop the site with essentially no friction.

This is a simple web app for organizing research papers that I created while I was a research assistant in a distributed algorithms lab. I mean, it was simple, but I kept adding features to it.

This was built using Vue, Vite, Typescript, Express, and Remult. Using it, you can can fetch research papers using the Semantic Scholar API and display them in a table. You can also manually create and edit table entries. It can display the referenced research papers as embedded PDFs, and provides an integrated note-taking interface that allows you to "mention" other research papers in your notes, linking to them. You can also view them as a graph, with the edges provided by the "mentions" in your notes or the citations between papers. You can also position the papers within the graph according to their textual embeddings, using the SPECTER2 embeddings provided by Semantic Scholar. The embeddings are reduced to two dimensions using TSNE for display.

This project searches a repository for certain Markdown files and bundles them into a compact and readable depiction of your folder structure.

Tools for automatically generating API documentation from comments in code have existed forever, but what about documenting a project's structure for developers? Faced with a large multi-application monorepo project, I created this tool so I could write structured documentation in each folder (by creating one or two Markdown files with meaningful names) and then have them compiled into a quick visual summary of the directory structure, with further docs written out below.

Then, I added some features that took advantage of Github as a platform: I created a Github Action for the program so that it could be automatically run as part of a CI/CD pipeline and added the option to have the result auto-published to a specific page on the project's Github wiki. I also published the project to npm so it can be invoked in one npx command. I haven't gone out of my way to promote it recently, but I still think this tool could be pretty useful for larger projects.

This project allows you to reach all the letters of the alphabet while touch-typing with one hand.

At some point in mid-to-late 2022, I broke my left arm, which meant I briefly couldn't use my left hand for typing. I looked for schemes to solve this problem, and the highest-potential one I could find was spelled out in an old XKCD blog post: "Mirrorboard, a one-handed keyboard layout for the lazy." The basic idea was to create a hotkey that dynamically switched the letters from one side of the keyboard (the one corresponding to your broken/unusable hand) over to the side that's under the hand that you could do stuff with.

This idea seemed so simple and helpful that I was shocked that I couldn't find a widely usable implementation easily; the blog post only offered a configuration file that could have been used for XInput devices.

So, during the twenty-four hours of Kent State University's 2022 hackathon, I implemented my own version of the idea, and made it available on the Internet. In practice, typing this way is surprisingly intuitive; it's not instantly effortless, but your existing muscle memory actually helps you out a lot. Please feel free to try it out on its official site, where it's implemented in-browser inside a practical text editor, with two tutorial modes and an accompanying executable for everyday use on Windows. The product won second place overall at the hackathon as a solo effort.

I created an app that lets you place images in perspective in 3D space without actually needing 3D models and a 3D world.

This app was written in Dart using the Flutter framework for cross-platform app development, which makes it painless to build your code as static frontend code for the web or as a native app on desktop or mobile. Behind the scenes, it's doing linear algebra, based on a breakdown of perspective transformation coefficient derivation that I found. In addition to creating images, it's built to output JSON files with all the coefficients that are needed to open and use designs in this and other programs.

I created this app to help with my NYT Spelling Bee graphics project, for which I needed to position letters in 3D space to align them with elements in pre-existing image templates. I could have used the perspective warp tool in a program like PhotoShop to create this effect by hand, or with some work, I could have set up quadrilaterals in 3D space in the 3D modelling program Blender and used the built-in scripting capabilities and command line interface to prompt a slow and expensive render with image textures of letters placed where I wanted them to be, but I wanted a way to programmatically output this kind of scene that was appropriately simple and less fragile and wouldn't drive me insane. This was the result.

The New York Times' Spelling Bee is a word game that a few people I know would post screenshots of and play collaboratively every day in their Discord server. I built a Discord bot that would automate the work of posting the puzzle each morning while also providing feedback and hints to make playing the game there more engaging. The result is a bot that currently runs in over 100 servers. I also created and published a Python library that makes creating and handling puzzle sessions easy.

I knew I wanted to create new graphics for the spelling bee puzzle; the basic task, which was to display seven letters in a way that emphasized one in particular, was open-ended and full of potential. Obviously, I had to make my designs programmatic. I ended up primarily either adding the letters to SVG files and rendering the results with the CairoSVG library, or consuming the JSON output of my 2.5D graphics app and using it to render a 3D image with the Python Imaging Library.

I also used C and Cython to create a Python module for this project that could efficiently store and load a trie that stored the set of all English words on Wiktionary, so that I could efficiently search for words that might exist according to some, and fit the puzzle's criteria, but that weren't officially considered puzzle answers.

After stumbling across Frank O. Copley's modernist translation of the ancient Roman poet Catullus and then Daniel Lavery's contemporary take, I wanted to display them in contrast with each other, and ended up spending hours poring over fonts in order to create a showcase.

The result is a simple site created with Vue 3, using TypeScript and the Composition API. Although I wasn't going for this at the time, the result is something like the ubiquitous Unix patch format, with lines that correspond displayed subsequent to each other so that you can see the changes. Some details I ended up poring over: the font sizes are carefully adjusted with variables in SCSS to keep everything visually at one scale, and the line heights are carefully specified to prevent layout shift when switching fonts.

I created a website that simulates the experience of eating an ear of corn. One kernel at a time.

This website was created using the popular Three.js library to streamline the process of rendering 3D graphics in the browser with WebGL. I wrote it in TypeScript and set up Webpack to act as the build tool. Not being the greatest artist ever to live, I took a few steps outside of my comfort zone to create a 3D model of an ear of corn using the computer graphics program Blender.

In addition to the corn model, which needed to be comprised of many separate pieces that would be independent in the final product, I ended up creating a simple shape key animation that plays at the beginning of this experience, as well a dynamic, randomized, infinitely looping animation of corn kernels raining down that plays at the end, after you finally eat the underlying cob and the final secret kernel hidden within. (If you really want to go through the process without clicking every kernel, you can go to the live demo page and type cheat() into the browser console a few times.)

Three.JS includes several control schemes that you can use out-of-the-box, and initially I tried to use the "orbit" controls to allow the user to control the scene. However, it wasn't intuitive or natural to use, because it didn't match how you actually hold and eat an ear of corn; it unfortunately allowed for rotation of the model around the depth axis, meaning the corncob could end up spinning in the same way that you turn a steering wheel. Eventually, I implemented my own orbital control scheme based on rotating the model around the global y-axis (WebGL uses y-up coordinates) and the model's local x-axis (which ran length-wise along the corncob), resulting in controls that feel a lot more natural; they're like you're actually holding and spinning and very, very slowly eating an ear of corn.

I made a website that stitches together maps generated in the video game Minecraft and displays them with various labeled points of interest.

This is another app scaffolded and built with the Vue CLI, written in TypeScript and with some components that use TSX and render functions. It uses the RBush library to spatially index the map elements and the Bezier.js library to help create SVG curves. The data used by the frontend is built by a small Python program that includes a module written in the Cython extension language in order to process binary data from the Minecraft files at very high speeds. This was a surprisingly math- and data-heavy project.

Details on the requisite geometry:

There already exists a lot of software that generates maps from Minecraft worlds, but I didn't want this program to generate new maps - I wanted to extract and display the ones that I had organically created in-game. These maps consisted of various static images that portrayed a world at very different levels of detail, so I needed to separate the map areas that were mapped out at the higher level of detail and thus could be zoomed in on from those that weren't. To do this, I grouped adjacent maps at similar levels of detail into "islands" and displayed the available islands as part of the "zoom in" interaction.

The more interesting problem was stopping users from panning away from a high-detail island and into low-detail territory while they were zoomed in. To do this, the build step generates data for polygons that enclose all the maps of each island and the front end treats the sides of these as collision bounds that interact with an imaginary point at the center of the user's screen, with the goal of keeping this point from escaping the current island (except when "cutting across" a concave corner; the polygons are altered to leave room for that.) To do this, I perform a simple point-in-polygon test to see if a user's interaction kept the center-of-the-screen point inside the polygon and, if not, I find the closest point on the polygon to the one the user was aiming towards and move the map so that the screen is centered on that. (This method of projecting the collision point back onto the polygon means that the component of its movement vector that wasn't responsible for trying to leave the polygon is preserved (i.e. if you try to pan the map diagonally off an island you will slide along its edge instead of just stopping.))

I also wanted to display organically curved paths on the map that went from point to point without having to manually draw them. To do this, I connected the points with imaginary line segments, calculated the slopes of the tangents of the corners where those line segments meet, and created Bezier curves that had the same slopes at the same points but interpolated them smoothly in between.

This program simply synchronizes a slide show between multiple people who view it through a website, letting each of them control the "next slide" and "previous slide" controls as well as giving each of them a laser pointer.

At the beginning of the pandemic, during the Spring 2020 semester, when all my classes went online, we who were in them were stuck giving group presentations remotely, which meant constantly saying "next slide, please" to the one person who was actually sharing their screen. I built this app out of simple static JavaScript and HTML, with a Python backend that used WebSockets (via the Socket.IO library) to make group control of a presentation seamless. My group members connected to my server application (I was using my home IP address and port forwarding to use my regular computer as a server at that time) and it synchronized the presentation state while giving all of us control.

It worked! This was one of my first legitimately practical independent programming projects, and is still some of the most straightforwardly effective problem-solving my programming skillset has allowed me to do.

sweet.sh was an experimental social network that got hundreds of signups from people on my corner of the Internet in 2019 and 2020. It was a project started by a guy I met there named Raphael Kabo, who was writing about utopias at the time for his PhD thesis. In accordance with this, he created a social network with innovative features, such as groups where the members voted on rules governing things like the group name and description or the public visibility of posts or the ability of people to join without approval.

When I initially found this project, I had no idea that a solo developer (or a small team) could create something this ambitious and useful in their spare time. I had never used Node.js, MongoDB, Webpack, or any of the other ubiquitous tools of independent full-stack web development before. This project became the main focus of my life outside of school in the spring and summer of 2019, and I've been feeling its impact ever since. I worked a lot on managing the database schema and migrations on the backend and on the rich-text-and-images content authoring tool on the frontend.