Building a Website from Scratch (Mostly)

        After having it on my goal list the last two years, I'm finally building a personal website. Actually, as of this writing, the website has been live online for 3 weeks! There's still a lot of work to do, so please forgive the sparseness of my site. However, I'm having a blast coding it up and have already added a few things. For some reason, building this website takes me back to my early college days, when everyone had a Myspace and we all were customizing them, right down to the html. 20 years ago! It's been quite a nostalgic journey the last few weeks! Anywho, there's A LOT to get to and I've been holding on to this first blog post for way too long!

First Some Notes About Blog Formatting1

        Regular blue underlined text links to a different website than mine.
        Bold blue underlined text links to a different page on my website than the one we're on.
        Both bold green text and superscipt numbers2 link to footnotes at the bottom of the page you're on. Clicking them will take you down to the footnote and clicking the corresponding ↩ will take you back to your place on the page.
Alright, let's get to it!

My Music

        Check out the Music page (found up above in the Navbar). I've been working on a self-hosted music player, streaming 192kbps 44.1kHz mp3s residing in my Dropbox. At some point, I will do a dedicated Blog post about how to use the Player, the Playlist, and the Library but if you read the help text3 (top of Music page), it is all rather intuitive. Basically, you can make a playlist of my songs and play them on my website. New mixes and songs will be topmost in the Library. Collections of songs (called sections) might be albums though they will most often just be a random collection. Sections will be listed in the Library chronologically with newest at the top. In fact, the default playlist will be updated to the latest section whenever a new one is uploaded (which you can always go back to by hitting Reset in the Playlist area). Some less-used sections are collapsed by default but if you click the section title, it will toggle them open/closed. You can even search for specific songs or sections using the search bar.

        In addition to the Library being added to over time, the Player itself will be improved upon in terms of functionality and aesthetic. For example, currently you can shuffle the playlist and repeat single songs or the whole playlist. All these settings as well as your playlist should be saved by your browser! Note that not only is the player free to use but has NO ADS.

My Downloads

        This website will serve many purposes, not least of which are archiving and sharing. On the Downloads page you'll find both high-quality WAV versions of my songs as well as smaller MP3 versions. There are many one-click options for downloading collections of songs as well as individual songs. The files are hosted on Dropbox and, for now, I don't expect to hit any sort of bandwidth limits. Eventually, I will include many files besides songs including guitar tablature, Arduino sketches, and audio plugins (all made by me). I've even got some programs that I've been coding up the last few weeks, in addition to coding up the website, that I'll probably offer for download soon on my website.

My Detroit Open Mic Calendar

        I've been playing at various Detroit Open Mics over the last 3 years and in doing so, found a need to develop a centralized, easy-to-read listing of available open mics.4 My Open Mic Calendar is the result of that need and before having this website, it was shared all over Detroit through email chains. The calendar is simply a Google Calendar, making it easy to share securely with folks. Not only can you view the calendar on my website directly but I also offer links to embed it or add it to one's own calendar app!

My Tools

        On my Tools page you'll find various web-based programs I've written (for now, there's only one). These of course can be used by anyone but will mostly serve to be an online hub for me to use them. I've been developing a web-based text editor app that will soon be added to the Tools page (I'm writing this blog post using it right now!) and have some other apps for music creation, including a web-based version of my Android metronome app, that will be added eventually. I may make some of these tools available for download on the Downloads page as well, allowing folks to run them locally (especially useful for things like the metronome app).

The Rest of the Site

        The rest of my site is pretty self-explanatory! Check out the Lessons page for information about taking guitar lessons with me! Check out my About page for a brief bio of myself. The Contact page contains info on how to get ahold of me as well as links to my various social media profiles. I'm still new to using RSS but there's an 📡 RSS feed you can subscribe to. This website is still so new, I'm sure there will be major changes/updates/additions in the near future. Some things that come to mind include a dedicated Detroit Open Mic page (considering I play them A LOT and keep meticulous track of my songs performed at each) and an Events page listing my upcoming shows/gigs. Anywho, I could keep writing but I've been holding onto this blog post for nearly 3 weeks so let's just get it up already!

Mostly I have a lot of experience programming C/C++ but very little with HTML/CSS/JS, let alone full-stack web development. However, it's important that this site remain as independent as possible so I've taken a very cheap, ground up approach to implementation. This site would not be possible, from a technical or financial standpoint, without DeepSeek, Eleventy, Github, and Dropbox. ↩

1 Subject to change. Hey, it's my first time keeping a proper blog! I'm learning. There's a lot of formatting to figure out and nowadays, ya gotta think of mobile browsers, too.↩

bold green text If text is bold green or has a superscript, it will link to a footnote like this one! Click the return arrow at the end of this footnote to return to your spot. ↩

2 See bold green text. Yes, we can link to footnotes from other footnotes! Not much will happen since these are so close to each other but if they were far apart, the link would take you to the other footnote. Also, have you ever read The Mezzanine by Nicholson Baker (or any of his other books)? I love his liberal use of footnotes and since I have a problem with writing too much, I will be using them just as liberally! ↩

self-hosted music player You might be asking, "Why go to the hassle of coding your own music player when you could upload your songs to SoundCloud or Bandcamp or Spotify or etc.. and use their music player plugin?". Tbh, totally valid question, and there may come a day when I add that functionality but for now, I like having granular control of where my art resides online. Spotify and major streaming services in general treat musicians like crap. They pay us next to nothing and scrape our music for AI. And while I don't have gripes with SoundCloud or Bandcamp per se, I'm also just really interested in having a central place where all my art and project documentation resides. ↩

3 Hit the -/+ button to the left of the playing song title in the Player to hide the text. Your browser should remember your settings including if you toggle off the help text. ↩

NO ADS In fact, there are NO ADS on this website whatsoever other than my asking for Venmo tips. ↩

4 The reason I needed a centralized, easy-to-read listing of open mics was because I found the various advertisements to be quite difficult to find. Some only advertise on Instagram, others Facebook, others a website... The idea to use a Google Calendar system was inspired by a friend I'd made playing open mics; it was the quickest, easiest way to not only display the info in a sensible format but to be shareable as well. ↩

Share this post: