Too long, didn't read version of this page:

While this is the first major website I've done, I figured this section would be best for detailing the learning process I've undergone writing this. I started going through the W3schools material in May 2020, after having graduated and finding the job prospects pretty low post-lockdown. People don't care much for paper resumes, I feel, so I instead went through these materials with not only the intent of learning more skills, but also writing a "resume site". This is the result of the learning I've done. I definitely have experience in HTML and CSS as a result, and Javascript was the very first programming language I had ever learned (although without any application to the HTML DOM before learning HTML). I did start a little backwards by starting from PHP, but that was fairly easy as I also have a lot of Bash/Zsh/shell scripting in general experience. This website has been a really fun project, so in lieu of anything major to talk about as far as past professional experience, I'll instead talk about my experience designing this first significant website of mine.

Now one big question is, "why such disdain for stuff like Angular and Bootstrap?" I've grown increasingly more into minimalism with regards to practical design of things, and I feel that the more "bloated" a software package is, the more room for things such as security vulnerabilities and general breakage there is. While these are open source and well looked after projects, there's still some problems I have with using tools that are way too big for the job. It's sorta like using a vector class in C++ to do the work of a simple array that doesn't need to grow or shrink to me. Perhaps as my journey in learning continues I will eventually become enamored with them, but for now, I'd really prefer to do it with the tools that already exist everywhere and don't require external dependencies (God forbid if that external dependency should ever become compromised!). I do prefer to stick to HTML and CSS as much as reasonable, in deference to folks who don't trust the Internet one bit and run NoScript all the time (hey, I do it too), but I also recognize some jobs are just easier with JavaScript (my dark mode script for example).

Anyways, enough of my philosophy, what's more interesting is my though process into designing this website you're looking at right now. I knew from the very beginning that I wanted panels, because who doesn't like panels? I also knew that I wanted three per row because of the visual design rule of three. At this point I should say that I haven't really got much visual design experience, but I do know enough about how to make those elements of visual design happen, so all I'd really need is someone to convey what they wanted. Nonetheless, I wanted to get a few panels going, so that's where I started out. While I don't have a complete anthology of screenshots, there are enough here that will show the stages of the design process. If you've already read the style.css file, you'll know how I did it, but I wanted to set out and design my own panels from scratch with as little reliance on existing panels such as flexbox as reasonable. As I said in the file, "where's the fun in (using what already exists)?"

My work to begin with started in the CSS file, mainly in getting these panels working. I built them from the very beginning to have a certain amount of transparency which became fully opaque when hovered over. At this stage I wasn't too sure what I wanted to do with the background, I just knew that I liked the transparency. One thing I knew from watching videos with subtitles is that white text with a black shadow is visible on every background. There is a way of doing this simply with text-stroke, but I honestly don't think it looks as good. It is a very hacky way of doing it, but essentially it involves placing non-blurred text shadows on all four sides. Just using one instance of a shadow with blur doesn't make it as readable. Also, noting the bit regarding JavaScript, while that is technically true for the homepage, I did end up using it with the sub-pages. Dark mode and light mode is simply easier with JavaScript.

At this point I pretty much had the text content of the page nailed down, but it is worth noting some slight issues. First off, at this point I was relying heavily on "magic numbers" for getting spacing down correctly. Second off, I still didn't have any background. Third, and most importantly, it wasn't resizing well at all. I'll get back to the resizing solution later, but at this point I was reasonably happy with how the main page was coming along, and turned my attention to the subpage format. I really wanted to keep the design of the subpage simple. I wanted a title bar, and a central text area which also resized well and still showed off the background enough. The following was the first iteration of the subpage.

The main text area (known by the stylesheet as pageText) had some transparency as well, so I still retained the text highlighting. When talking with a friend who is a bit better at visual design than I am, he said that he thought since it was already a white background that dark text would look better. What you see on the right image above is the result of that. Transparency was still applied to everything within pageText at this point. Resizing the elements still caused some issues with the image panels, but as far as the text is concerned, it worked perfectly fine. One major benefit of CSS3 (and the panel design in general) is that it makes modifying a site to work on mobile quite easy. Using media queries for whether the orientation is in portrait or not (which also works for a browser window in which height is more than width), I was able to set panel width to one per line.

The subpage will look largely the same between both versions, just with the difference of one panel per line on the portrait orientation. At this point, I added a background. I didn't put too much thought into this, and I just wanted to pick something that was easy on the eyes. Most folks like space pictures, so I went with that, and got a picture from Unsplash. As well, I obtained pictures for the main page panels from Unsplash. The last picture uses the Tux logo as well as a shot from my personal setup in which I've just ran a system update.

The friend of mine said that it looked kinda odd with the transparency. I wasn't too convinced either way, but I'll take his word on visual design over mine.

At this point I decided that it was looking a bit garish with black text on a bright white background, so I decided to implement a dark mode. I was going to try and set this up purely in CSS, but I realized that the way I had designed the site would make that incredibly difficult (or at the very least out of the range of my current skillset). As such, I decided to just use a simple bit of JavaScript to solve this. Borrowing from the idea provided by W3Schools in their dark mode example, I decided to use the ability to toggle classes on an element. At first I wanted to do this simply by querying all elements with a certain existing class, but two problems came with that. First, it would have been an issue retaining whatever class was already there. Second, and more importantly, it simply didn't work. Eventually I realized it'd be much easier to give the elements I wanted to toggle arbitrary IDs, and then it became very easy. Beyond that, the rest of the JavaScript I implemented for all the pages was just to change the text in the button.

I also made a conscious choice to not go with all black/white becuase that can cause eye strain in extended reading. The colors I chose were #141414 for dark, #C8C8C8 for light. This was largely arbitrary, but also it made typing a bit easier since 14 in hex corresponds to 20 in decimal, and C8 is 200 in decimal. One of the last issues I wanted to resolve was the matter of resizing being an issue. This took me a while until I realized it was largely the result of a decision I had made regarding the margin. I was using a constant 4px margin on each side and was trying to magic number the width of each box to correspond with that. This simply didn't work, and I eventually realized that it was much better to have a percentage based left-right margin to allow it to resize effectively. The margin-left auto portion is a bit of a hack, and I'm not 100% sure why it doesn't work without it, but it works with it. This represents the current state of the site. As of writing this, I do have one more bit of JavaScript that I want to write entailing a base32 decode of my email address. This is to protect against spambots.

Finally, I thought it'd be pertinent to talk about the development experience on my end as far as the programs I used. Quite simply, I used Emacs to write everything. While I am a traditional vimmer, Doom Emacs makes working in Emacs very pleasant. This, coupled with emmet for improved web development, made writing this website quite easy. Otherwise, the other prominent bit of software I used was the browser itself. The browser is practically an IDE in and of itself nowadays. Some folks like Dreamweaver and other WYSIWIG editors a lot, but I don't enjoy them much myself. Part of that is because I really prefer Free and Open Source solutions. Proprietary software means proprietary vulnerabilities. As well, I have a particular disdain for Adobe in particular for their chokeholding of the multimedia production ecosystem. If I have to use it, I will, but it'll be contained in a virtual machine or on a separate computer with nothing I wouldn't be concerned about Adobe potentially spying on.