Design Process

As a queer artist who grew up online, I carry a lot of nostalgia for the early Internet and have found great comfort in parties inspired by internet culture. I started going to events like Subculture Party when I was 18 and moved to LA, and there is a night and day difference between mainstream club parties and LGBTQ nightlife. I would go with my roommates in group cosplay to queer music events, even if they weren't themed, and it was the first time I felt like I wasn't the only weirdo in the room. As I continued attending parties, I made more friends, and in 2024, I started creating flyers. Since then, I have become deeply involved in the community and strive to do my best as an artist to uplift organizations like Roflcopter Party, which curate incredible LGBTQ events.

The Connection series acts as practice and guidance for my IRL promotional work, and with my previous hand-drawn flyers having been a success, I wanted to experiment with something I don't do as often: coding.

I became Professor Louis Kang's assistant for the Intro to Programming course at Otis College a year and a half ago after taking the class and loving it. My knowledge of front-end programming with HTML, CSS, and JavaScript is greater than my knowledge of back-end programming, which is why this idea of a Y2K webpage would be perfect. (Front end means the stuff you see on the webpage, back end is all the inner workings you don't see on screen.)

Old sites like Geocities were made by beginners who knew just the basics of HTML and CSS, giving them a chaotic but charming aesthetic. I wanted to combine illustration, graphic design, and front-end coding to create an experimental flyer with bright colors and GIFs that captured this nostalgic energy. Initially unsure how to host the site, I followed Louis’s recommendation to use Neocities, a modern revival of Geocities-style webpages, and got to it.

I hope you are proud of me, Professor Louis Kang.

Roomates and I for Subculture Party's 4 year anniversary event October 2022 (I'm in the middle)

Me and my roommates dressed as Rainbow dash, Applejack, and Pinkie Pie from My Little Pony: Friendship is Magic for Subculture Party Capsoul Tour April 2022 (I'm on the right)

I knew I wanted this project to be an interactive webpage with moving elements to hold my text. Before writing any HTML, I sketched the layout on paper (It's much easier to plan visually.)

My inspiration came from an old 3D graphics page called DPGraph (https://dpgraph.com/), which is dizzying to look at but... interesting, in its coding: the entire page is a giant table with tables within tables. I experimented with that approach for fun but ultimately chose a grid layout to keep things manageable.

Styling the grids took a long time, especially sourcing GIFs and images. Most of my graphics came from Internet Archive Gifcities, Glitter Graphics, and a few Neocities pages which are listed in my bibliography section! Credit is tricky online, so I followed the early Internet's example of giving links to whatever page you find the image on. The early internet did not concern itself with copyright infringement; everything was fair game in the eyes of personal webpages.

The page layout has a gallery bar on the left, a large GIF of my art in the center, and a topic bar on the right. In the "Furries?!" section, I explain the character featured on the front page. Around the center GIF, musician names appear in clickable boxes that open iframe popups with bios. The gallery bar displays flyers from the IRL events inspiring this project. There are also numerous small interactive elements scattered throughout the site—too many to list—so I encourage exploring the page for yourself!

To create this webpage, I used Visual Studio Code, a popular coding application, and Cursor to help with debugging. Creating a webpage takes a lot of planning because it is much more rigid than a canvas, and it's a lot more complicated. One of the things I enjoy about coding is that, unlike drawing, which is subjective, there are wrong answers in coding, and you'll know when it's wrong. In a way, debugging can be therapeutic, but not when there's a deadline fast approaching.

I used Cursor code assist whenever I got stuck and couldn't find a solution, usually due to typos (no spell check in coding programs), or just because CSS is painful. I also used it to help me with some of the more advanced JavaScript code. In theory, AI for code assistance sounds like a great help, but the computer doesn't know what a person wants, and it isn't that great to begin with. Often, when I asked for assistance on something, it would inadvertently change something vital, and everything would break– so I avoided it unless I was completely and utterly stuck. I'm not a fan of AI, and especially not in art, but it can be a helpful tool when you don't have the luxury of time for menial tasks.

This is especially true when it comes to trying to fix a problem when you have 33 different files of code all connected to each other, and while you can do it and it isn’t hard, it can take hours. However, having code assist that can almost immediately fix these sorts of tedious problems is a game changer.

A problem I ran into, a pretty serious one, was that I hadn’t thought ahead to save all the image links and saved a lot of files locally, but by doing that it makes locally stored images only visible to me, and not to anyone who is visiting the website. A very stupid, timely mistake.

First block out of grid layout

Adding styling

Getting there...
I changed some of the names on the lineup too

Final Homepage layout