Building My Website

somehow harder and easier than I thought it would be

Project Screenshot

Project Overview

As I enter into my junior year and begin the search for my next internship, a friend from home brought up that a personal website might be the best way for me to display my technical talents that don't fit well on a one page resume. I had thought of this before and purchased this domain with my name, but I never got around to doing it. I tried tools like Loveable to generate one, but I found the watermarking to sort of ruin any appeal a personal website had for me becuase i didn't really create it. I also thought it would be a great way to test out how productively I can use EndeavorOS, the operating system I use on my laptop. As I am writing this, I have a career fair tommorow so no better fire to light under my feet. I've never written anything in HTML or CSS before so I made sure to watch some youtube videos, then hopped on Vim and got to work.

Technologies Used

  • HTML5
  • CSS3
  • Vim
  • Claude

Challenges & Solutions

Challenge 1

Problem: How will I host it?

Solution: I did not at all want to deal with paying to host it, and I wanted to work directly on my text editor, vim. ChatGPT pointed me in GitHub Pages' direction and I knew that was my solution instantly. While it means the website has to be mostly static, it fits my needs well. Embarrassingly this was going to be the first repository I've maintained on GitHub, so I figured why not learn HTML, CSS, and GitHub all at once. This turned out perfect because I could stage, commit, and push updates to GitHub from my terminal and have it reflect in the site nearly instantly!

Challenge 2

Problem: Visuals are hard! I don't have a lot of experience to go off of here, and I didn't have a great way to work through the image and design positions iteratively without pushing to GitHub every time.

Solution: It turns out there really is another use for inspect element besides messing with your friends! I might still not be the Michelangelo of website design,(maybe I am if you recognize the background of the home page) but the snowflakes around my last name don't look half bad. I just picked arbitrary locations on the page first, then adjusted the positions with inspect element which would update actively. All I had to do was hone in on my desired location and edit it permanently in the .html file in the project folder!

Process & Conclusion

In many ways like learning the structure of HTML and CSS, I thought this would be harder. But I thought the visuals would be easy and it was definitely my least favorite part. I love these kinds of projects because I had absolutely no idea what this would look like at the end, I on the fly chose Bauhaus style colors inspired by "Composition with Red, Blue, and Yellow", and while perhaps it looks a little elementary I really like it. In terms of the setup used to write it all, I used Claude Code for the scaffolding when I realized how long it would take to write out manually. Maybe that makes me a weak man, but it improved my pacing so much I would never want to do this manually. For the most part, Vim and GitHub really are a match made in heaven. I'm sure the gui is pretty handy, but the command line is like a second nature now.

In the end, I've found this process was not only really informative, but also turns out to be really fun (and I think it makes me look badass). Even if no one is looking at this stuff, having a place to display what I do feels a great way to keep myself accountable and finish the projects that I start. If you read this whole thing, give me a shout and tell me what you think!