So who would have guessed that making your own website is like... hard? Most certainly not me.

I have a background in computers. I grew up around them, and my dad works at a software company, so I learned a lot from him. Over the pandemic, while I was learning to write music, I also started programming my own games, first in Unity, then Gamemaker. I **loved** it. The feeling of seeing a character move on screen was just euphoric. I've done some programming since then — at one point I even wanted to major in computer science! — but slowly realized that my more artistic side demanded my attention, and as such I started developing less and composing more.

This shiny site was my way of reconciling that. I wanted to get to do some coding again, and sit down and design a site from mostly scratch. It took a lot of work, and I just want to document that in some way. Sadly, I did not take any pictures of my progress as the site was developed, so I can't show you what I had, but at least I can describe. So, without further ado, here's the tale of how making my personal website almost stopped me from graduating...

(*WARNING: THIS NEXT PART IS PRETTY TECHNICAL. IF YOU DON'T CARE ABOUT THE NITTY-GRITTY, YOU CAN SKIP TO THE "TECH BLABBLE OVER" HEADING*)

First, some specifics. The website is programmed in JavaScript, using the [React](https://react.dev/) framework. I could have done [vanilla JS](https://www.gotohellmi.com/), but I wanted a website that looked, like... good? I don't know, I have a surface-level understanding of JavaScript already, and reinventing the wheel just didn't seem like it was worth the effort when many amazing component libraries exist already! For my components, I used [Chakra-UI](https://chakra-ui.com/). It's a sweet library with a bunch built-in components that let skip the hard part of website development (making the things work) and go straight to the fun part (making my design come to life), though most of its built-in colors are *super* [pastel](https://en.wikipedia.org/wiki/Pastel_(color)). There's a couple other odds-and-ends libraries ([pdf-lib](https://pdf-lib.js.org/) to allow me to dynamically watermark purchased scores, [WaveSurfer](https://wavesurfer.xyz/) to create the waveforms you see in the [Works](/works) page, among a few others.) I know the "meta" right now for web development is to use [TypeScript](https://www.typescriptlang.org/), but to be honest I just didn't care enough about the type-safeness or the special features to switch. Also, template I used set up a JavaScript project, and I didn't feel like doing the research to retrofit this project to use TypeScript. JavaScript has worked fine enough — and I've *used* JavaScript before, which I cannot say about TypeScript — so I don't see any issues with that in hindsight.

I used [supabase](https://supabase.com/) for my database. I used it store information about user's orders, like their name, the organization name, the piece title, whether or not it's a rental, and a whole bunch of other stuff. (I know I don't have any rental-only pieces right now, but I wanted to allow me to have that option without having to completely overhaul my e-commerce design.) I also use them to host the comments for this very blog. I really chose supabase because of its free tier. I don't really have any money right now, so *free* was the best thing for me.

The domain is registered with Cloudflare, and I use their R2 CDN service to host my perusal scores, as well as all the actual parts and scores people purchase. Most importantly, as long I stay under 10 GB per month, it's completely free. I don't think I'll hit that limit for at least a while — long enough for me to get enough money to just pay the dirt-cheap fee. I also host this site using their services.

I, like many people, use [Stripe](https://www.stripe.com) to handle all the credit card processing. It's free (Stripe takes a small percentage of what you earn per purchase), and battle-tested. However, it also requires you to give them your domain so they can double-check that your website is actually what you claim it is (obviously). But, I hadn't registered my domain yet, so I had to sit in limbo with my domain, hoping nobody made purchases (no one did... probably because no one knew I *existed*), until they said "okay, yeah bro, go for it." Whatever.

(*TECH BLABBLE OVER*)

With the actual design of the site, I was pretty obviously inspired by the sites of [John Mackey](https://www.johnmackey.com) and [Michael Markowski](https://www.michaelmarkowski.com). Their sites are super clean, easy to use and navigate, and pretty minimalistic. I liked that, so I took some aspects about their site: most importantly, the "Checkout flow." When you want to buy a piece, you add it to your cart, put in your information, pay, and *WHAM!*, you get PDFs of what you ordered, watermarked for your ensemble, and an email receipt with links back to that page sent directly to your inbox. Having as little friction in that process as possible is super important for getting your music played, and I did not want a "order form" that got sent to me and had any overhead or correspondence at all. Plenty of composer's sites do this, and it works fine, but my opinion is that I should have to do as little as possible in regards to orders so that performers get the music and get to perform it as fast as possible. That opinion led to me writing a collective 1583(!) lines of code to get it all working properly, but it works — I verified that by making over a hundred orders while testing — and I'm so glad that it does. In the future, I'm going to also add a page for rental agreements, but that can wait for when I have pieces that are rental only. 

The site first started off as a total John Mackey rip-off site — right down to the typography, the about page, *everything* — then turned into a Michael Markowski rip-off site with some of my own style, and then I managed to design a site that I think fits me. The most unique aspect of the site, in my humble opinion, is also probably the second-most-important-after-the-checkout-flow: the ["Works"](/works) page.

My Works page is organized in a pretty unique way. I use this "card" system, where everything anyone could need about a piece — name, instrumentation, duration, program notes, errata, recordings and perusal scores, and the all-important "Add to Cart" — are shown on these cards, and when you click on the buttons, pop-ups appear with the information you want to see. I saw this on [Missy Mazzoli's site](https://missymazzoli.com/works/), and I thought it was just *slick*. The scrollers could just scroll through all the pieces, or you could sort by title or category, and find the card you're looking for. I really liked that, and how simple it was. The only downside is the popups galore you end up getting from a design like that, and the mobile unfriendliness that comes along with that. Everything has to be in a popup now, so big lists make big popups and it can also be a little jarring having to click in and out, in and out, until you find the information you want, and more popups increases the chance for scaling issues. At first, I thought that downside was fine when you consider how it impacts the rest of the site. I assumed I wouldn't need those giant lists.(Except for like consortium members, but most people don't go looking for a list of consortium members when they're looking for a piece to perform. At least, I don't *think* they do. Now that I think about it, I don't really know.) 

Even with that in mind, I still decided to include the dedicated pages for each work, but hopefully people don't *need* to go to those pages to find what they need. Individual pages makes [search engine optimization](https://en.wikipedia.org/wiki/Search_engine_optimization) easier, allows people to share specific pieces, and lets me display extra information, such as pieces that win awards, large consortia, and other details that would just clutter the cards. I think this hybrid system — using the cards for most things, but having the pages there for people to find extra information — is the best for my site.

Piece choice is also important for my site, especially because of how young I am. I have been writing for almost six years, but not all of that is killer. Most of what I wrote was me using MuseScore and trying to find what *I* liked, and what I wanted to write. I only decided to include a couple of older pieces, the oldest being *Fantasia on a Theme by J.S. Bach*, because I'm not really proud of any music around the time I wrote *Fantasia on a Theme by J.S. Bach*, and even that piece I don't think is representative of how I write now. But I do think it's *good*, and I do think I wouldn't hate listening to it, so it got added. Everything else is pretty recent, and I think does represent how I write in a good way.

Everything else about the site is pretty simple, though it is all shiny and new and cool. But don't think I forgot about that whole "almost stopped me from graduating" thing. It really did almost screw up all my plans. You see, Michigan requires students take at least two years of a foreign language to graduate from high school. I took a lot of performing arts credits, so I could cancel one of those required credits, but that still left one. I decided to take Japanese 1 virtually, because I'd like to study abroad in Japan at some point, or maybe even just visit (my reasoning is probably a story for another time...). As a virtual class, I basically was just told "work on the class somewhat consistently and you'll be fine." I used the period on my schedule to work on this site instead of working on classwork. 

That resulted in me falling behind (shocker, I know), and fast-forward to spring break, and I have two entire units I need to finish before the second week of May. *I got this!* I thought, stupidly.

Fast-forward to the end of April, and I still have two units I need to finish before the second week of May. I almost didn't complete a required class to graduate because I was too in-love with web development to stop programming. (God, that makes it sound like I *extra* don't shower. Ew.) 

That meant I had to study for five(!) AP exams — two of which were for classes I decided to self-study and then hadn't actually studied all year, so f\*ck — and finish two entire units of Japanese while also not failing any of my in-class exams. I was about ready to keel over and *die* by the time I reached May 15 (the last day us seniors had to be in school), but I didn't, and I managed to scrape together enough study time to not completely fail those AP exams *and* to finish Japanese.

But yeah, after that collapse of a final week, on Saturday, May 16, I basically sat on my ass and played video games until four in the morning on Sunday the 17th. Then I graduated, and I've just gotten done cleaning our basement (where my bedroom and setup are). 

But hey! [It's over](/works/is-it-over). To all the soon-to-be-seniors, don't be like me. Please finish everything early so you actually have time to do fun things like website design, or composing, or... I don't know, golfing?

Making this post was a nice escape from working on my next piece, but my head is killing me and I think I might just lay down for a little bit...

Website design is like... hard


Guys, gals, and everything in between, welcome! This is the start of something I hope will be preeetty magical.

If you're here, you've probably already read my name like a hundred times, but I'm Zach Schoudt. I write music, and I'm planning on attending Michigan State University to pursue a full-on degree in Composition! When I'm not writing, I like to listen to/play music, doodle, play with my family's 5 cats and 2 dogs (yes we have 7 pets. And no it is not enough – it's never enough), read, or just chill out.

On this blog, you'll find my opinions on music I hear at concerts (or just what I've discovered), insights into the process and the "music bizzz", life updates, opportunities, and whatever else I decide to post here. Hoping for some shenanigans, of course, but you never know.

If you wanna check out my music, you can head over to the [Works](/works) page, and you can learn a little more (not much though) at the [About](/about) page. You can find my socials at the bottom of the page. I've designed and programmed this website myself, so I'm sorry in advance if there are any issues.

Hopefully this lasts, and maybe I'll see you all soon!