Under The Hood
Where to even start. This update, apart from being massive in both development time and lines of code edited (or even added) was also quite underwhelming in that a significant portion of the improvements have no visual footprint.
This is because much of the development time and code written was to make the website be better able to function “under the hood” so-to-speak, and since as a result there weren’t many visual changes, it’s hard to properly communicate exactly what the changes were (but, and I feel immensely proud being able to say this, I assure you that you will feel them)
In the previous article, I mentioned how I planned V3 to have visual changes and V4 and a potential V5 of the site having optimizations only. Well that didn’t exactly pan out, and this update contains a ragtag mixture of all 3 of them.
So buckle up and grab some coffee, cause we’re going to go through all of the them here, starting with….
First Impressions
First impressions. They matter. A lot. So, naturally, I wanted the landing page of my website to be as beautiful, smooth, performant, beautiful, stunning, and did I mention beautiful? as I could possibly make it.
And while its not yet done yet, it’s at a place where I’m finally beginning to feel proud of it.
This update, the landing page was completely stripped down to a blank HTML file and fully rewritten, and is, hopefully, a joy to look at. This rewrite, although time consuming, was quite necessary, and gave me some obscenely improved performance metrics I go in-depth on further below, and made the site actually quite efficient now (previously kicking the fans on my laptop to high gear and now barely forcing them above a whisper).
Most of this page’s elements are also animated now, from the initial welcoming text to the little blurbs for my projects. All of these animations are also bound to the scroll, so they are gradually “revealed” as you scroll down, contributing to the more personalized, dynamic feel that I wanted to incorporate into the site.
I had a vision of sorts, for the landing page, making the transition from loading screen to when you’re “dropped” onto the page and it becomes interactive similar to the transition between cut-scene and game world in God of War, which is to say, completely seamless, and while it’s not quite there yet, this update’s laid the foundation for it and brought it ever closer to that elusive goal.
I talked about performance before, but even percentage stats can only come so close to giving an accurate idea of how smooth it feels to traverse the site now, and how this rewrite caused so many of the animations to go from jarring but cool additions to slick and beautiful parts of a cohesive whole, enhancing and enriching the experience of visitors on my site.
Personally though, the moment I realized and felt the effects of these significant performance improvements was when I noticed, while messing around on a dev version of the fully updated site testing for bugs, that my laptop didn’t feel like it had something to prove to the sun about who was hotter.
The previous jankiness of the scrolling, a complaint i got from several of the people who visited the site, has also been addressed, and now regardless of whether your zipping through to the end of a page at breakneck speeds or slowly exploring every nook and cranny, stuttering will not be an issue.
The End (Of The Page)
Speaking of the end of the page though, there is now a beautiful, fully animated, completely responsive, informative footer with links to contact me, my socials, etc.
This footer took a very large amount of time to design, mock out and then actually code up, and I am quite proud of how it turned out. I spent days designing it, making it responsive, and changing the layout to make it capable of adapting to different screen sizes, and days more fiddling with the smallest of its features, getting them just right, and even though when you work with something so closely you lose an objective sense of how it really is, I still think it looks very beautiful and well thought out.
I drew inspiration from quite a few sites across the web when designing the 3ish layouts for the footer (one each for different screen size ranges), all the way from rigid boxy footers designed with links galore for corporate websites, to the more open, experimental, artistic footers characteristic of smaller companies or individuals.
Thus, my footer contains a blend of both, with the aim of striking a balance between the number of links and buttons, and some artistic exploration.
Lighting Fast All The Way
As I mentioned before, along with containing overhauled visual effects and animations, as well as newer additions such as the footer, the site has also been obsessively optimized this update (I spent literal days throttling my internet and comparing kilobyte payloads to get it right) and in my opinion the hard-work was well worth the effort.
The landing page, the most optimized page on the entire site (I spent the most time on this since it’s what anyone visiting my site will see first) saw a cool 870% overall increase in performance, responsiveness and snappiness, with a decrease in average load times of about 13 seconds, (with the fastest load among about 100 tests being sub-second, a feat I am immensely proud of).
The metrics were calculated by a combination of Lighthouse and a few other scripts I wrote on my downtime (combined with mind numbingly tedious network throttling, naturally). The total payload size was also reduced by a cool 88% this time around, going from a gargantuan 25 megabytes to just under 3, through some hyper aggressive image optimization and compression, and tedious image resolution changes.
While this is impressive of course, this was only possible because the first few versions of my site were terrible (but good looking if I do say so myself) unoptimized messes with little regard for efficiency or performance.
You can’t shave off 13 seconds from your load times if it’s only a few to begin with, after all.
This process began (after about 2 failed attempts at a more delicate and surgical approach) by just ripping out the lines linking jQuery, Bootstrap and a few other libraries to my project and slowly writing custom, leaner HTML, CSS and JS to replace it.
This was frustrating, especially just after I removed the libraries, when components across my website, even the few I thought were safe just broke with no indication as to where the problem was.
While fixing some of these I eventually I decided that rewriting would be easier than just hunting for that one line of CSS among thousands that was causing the problem, and so in this update a lot of the components of my website, such as the cards, the sliders, and the nav bar, were all rewritten from scratch, this time much faster and much, much more efficient. And hopefully for the last time. Fingers crossed.
One other reason for the massive reduction in payload size though, is due to a system for lazy loading images, which has, in hindsight, singlehandedly taken my website from loading relatively quick to loading lighting fast.
It wouldn’t have been included at all, actually, had I not noticed, while finishing up the other performance improvements, that the site still felt very slow even after most of the optimizations were done.
After a fair amount of frustration and a bit of digging around in the network traffic during site load though, I realized it was because, for every page, the site tried to load every image on the entire page, at once, on page visit.
Now this might not initially seem like an issue, but most of the images used on my site are either 4K, or above, so you can probably guess how this would get real problematic, real fast.
A little googling, and a little frustration at the state of native lazy-loading support in browsers later, I implemented Lozad.js to lazy load images, and that was that, with the performance metrics for my site proceeding to skyrocket after it was done.
The Total Blocking Time for example, a metric which measures how soon the site becomes interactive when first visited, dropped from 6 seconds to 4 milliseconds after this change. That was how impressive it was.
This massive improvement did not just help the load times of the site though, it made the entire site feel more responsive, made the more subtle animations and changes to the site feel smoother, and overall made the entire experience more tight-knit, responsive, smooth, and most importantly, fast.
There are of course no measurable metrics for something feeling good, but it is perhaps the most important thing to get right either way, and I’m glad I could at least increase that feeling to some extent.
Typography, A Delicate Balance
One of the more subtle changes to the site this time around, came in the form of revamped typography and redesigned article pages.
Work on this started in effect immediately after V2 of the site dropped, as I had been reading up on design principles and typography ever since that duct taped solution I’d implemented for this in that update, and I used every bit of what I had learned over this time here, and came up with a structure and final product that I’m immensely proud of.
The layout of the article pages have themselves been completely overhauled, now featuring a parallax animated full screen view of the thumbnail for the article before scrolling down to reveal the text of the body, spruced up with every bit of design knowledge I’d gathered the past few months and been able to scour from the web.
The layout of the page is not only lean and sleek though, but also fully responsive, dynamically adjusting and shuffling its content to fit and look good on almost every single screen size out there.
But all of this would have meant little, if the typography itself was unpleasant to read. So, there have also been a plethora of improvements on that side.
The paragraphs, for example, are no longer mysteriously uncomfortable to read, as they follow the design principle of only being 45 to 80 characters long, a length I learned is the sweet spot for maximizing reading comfort.
The text is more spacious this time around, and as a result more relaxed and inviting for the longer articles, allowing readers to be comfortable reading for longer periods of time, and the this time educated font family choices (of which there are 3) allow for a wide range of creative freedom in the text itself, while still feeling tightly knit and complimentary to each other.
The dividers separating sections of text have also been redesigned, and are animated and scroll aware now, as when I was finishing up the changes to the site I realized I had made the article pages a little too static, and this allowed for some fun animations to break up a long haul reading session.
There’s also a horizontal progress indicator that docks to the nav-bar and appears whenever you’re reading articles (like this one, look to the top to see it in action!) that signifies the percentage of the article you’ve already read through, and is fully reactive to the unique length of each separate article, ending right as you reach the end.
Another animated change to the article pages was a beautiful, movie like, SVG that appears at the bottom of each article, signifying its end. This, I must admit, took a disproportionately long time to get right, and still isn’t quite pixel perfect on all browsers, but I absolutely adore it, and plan to progressively fix the parts of it that are broken in future updates.
SVGs, SVGs Everywhere!
Speaking of SVGs (Scaleable Vector Graphics) though, with the article pages being the sole exception, most of the text you see on my site is no longer actually text, but are rather SVGs, a change necessary to be able to animate them in the myriad of ways that I do (and plan to!), since these complex animations require nuanced control over each individual letter, something normal text does not allow.
Also Safari isn’t as inconsistent with other browsers with rendering SVGs as it is text, so there’s that.
I’ve actually been learning about SVGs for a while now, and including them here was a natural (and much easier!) next step in honing my skill with manipulating and creating them.
Their properties and the benefits they bring to the table, not to mention how intuitive and easy they are to learn make them a joy to pick up and use. It’s also incredibly easy to manipulate each and every one of their properties in code (since fundamentally they are code themselves), and this makes them the perfect companion for coding projects, and helps bridge the gap I always felt between where pre-made assets and code connected.
Major Changes
I also finally got around to implementing quite a few of the bigger planned changes to the site in this update, such as finally designing and implementing a proper contact page, complete with a beautiful contact form and social icons sprinkled throughout the site.
Speaking of, the newly designed footers also now have prompts for contacting me for anything from collaborations to questions, and they’re all configured to lead here too.
Parallax animations, if you can’t already tell, made a significant impression on me when I was browsing the web for sources of inspiration for this update, and I’ve used them absolutely everywhere, from the landing page to the contact page, and from the larger, orchestrated animations to the smaller, more subtle ones.
There is a very real possibility I’ve overused them, and if so I will probably remove a few in future updates, but I’ve fallen in love with the perspective shift an unexpected parallax animation gives, which is why you can see so many of them here.
As I mentioned before, most of the site was also rewritten in this update, either to fix layout issues or bugs, with the added benefit of becoming much much more performant, and so, while I was doing it, I also took the opportunity to use CSS grids for most of the layouts, simplifying the code greatly and also making it much more responsive and maintainable in the long run.
As a result, the website now fully supports devices of basically every screen resolution, from the tiny iPhone SE all the way to a 55inch TV I hooked the laptop I use to.
About Me
By far the most taxing and largest change to the site as a whole though, has to be the About Me page. Much like the others, the entirety of this page had also been stripped down, but unlike the others, what replaced it was much, much larger in scope, and had a mix of both quite a lot of code and quite a lot of literature, with the complexity that that entailed leading to it inevitably requiring several redesigns and having to be repeatedly implemented to be able to achieve the effect I was going for.
But first, why I felt it was necessary. The previous page had had 3 short paragraphs, and a photo of me to go with it, but ever since the beginning, it had been bothering me that in comparison to the direction I was going with the rest of my site, the About page looked woefully bland, and also couldn’t really capture the real essence of why I love code and tech as much as I do, which was, of course, its only goal.
To complicate things further, this page also wasn’t easily extensible either, being essentially bound to be the same length as the three short paragraphs about myself I had written hastily so long ago when I was working on getting the very first version of the site up.
After quite a bit of back and forth trying to approach this problem from different angles though, it suddenly hit me: I loved stories. Reading them especially but as I was also beginning to realize, telling them too. So, I thought, instead of trying to “sum up” years worth of feelings and experiences and trying to bottle up and serve all of the wonder and sense of amazement that had driven me all these years, why didn’t I let it run free, and tell a story instead of a summary, in the process also being more authentic to what I really felt?
This, in hindsight, had been a choice I was subconsciously avoiding, as the work it entailed would only further stress the already strenuous deadline I had, but toying with the idea I soon realized, that, despite its cons, it would actually be able to solve all of the problems I was facing with the About page.
The larger size a story would naturally be would allow me to experiment and add many more animations and cool things to the page without it feeling bloated or little more than a flurry of colors; a web page would also be the perfect medium for a story like this, allowing me to reinforce and better convey the emotions and feelings I intended for different parts of the story to imbue, through images and animations, when I knew text alone would not be enough.
I had also wanted to do something like this from the very beginning, but had never really started since I could never find a place for it to fit, but now since a spot had just opened up, why not?
And lastly because, of course, what better way could there be to tell my tale, one of technology and code and all the ways I fell in love with them, if not through those very mediums?
So I grabbed some coffee and went right to the drawing board, and started sketching out a plan.
The page easily took me the longest to plan, and to make, not just because of the complexity of the code (though of course there was plenty of that to go around) but also because it took me several rewrites and endless long nights of editing to be able to write a story that I felt could do justice in conveying that boundless, childish wonder of looking up at a world filled to the brim with, for all intents and purposes, magic, where anything was possible, the same childish wonder that remains to this day the reason I love technology so much.
I’ll let the story speak for itself, but as for the webpage, it contains animations at every step, most of them being parallax ones (naturally), quite a few of those ultra high resolution images I mentioned, and several SVGs, all of which tie into and serve to better illustrate my dive into the world of programming, how I began, how I became so very fascinated with it and how I slowly went from hunting bugs in games on my old GameBoy, all the way to reaching one of the key milestones in every aspiring programmer’s career: making mods for Minecraft!
Of course, I’m not done with it yet, as I had to eventually cut out a fair amount of the things I wanted to add to the page if I was to have even a sliver of hope of being able to ship it within my own self imposed deadline.
As a result, while it does look good in my opinion, it could be much better, and much, much less buggy, as it has several layout issues and is only compatible with very specific screen size ranges, which is actually why I left space in the design and connectors in the code, as I plan to fix what’s broken and add the features I had to cut out, in subsequent updates.
Still, I’m proud that it works, and I believe that, in the end, that’s what matters most.
Minor Changes
Big flashy things may please the eye, but its the little things that make it stay for longer, and so, I also focused on quite a few of the little things this time around, from small inconsistencies in the hierarchy of the code to scrolling that would stutter, clipped elements, missing transitions, etc.
The loading indicator for the site, for example, has been switched out (again, and hopefully for the last time) with a more efficient and optimized one complete with inline styles and very other optimization trick I knew, because while I did love the previous one, it was not only not performant, but also impossible to scale down or up and still look good, so alas, it had to go.
I also fixed a ton, and I mean a ton of minor layout issues, from text getting cutoff in certain orientations on certain devices, unintentional clipping of elements on the screen with positional animations, cards out of bounds on some very specific screen resolutions, etc.
Some of the smaller interaction animations, such as the ones when selecting things or interacting with buttons and forms on the site, have also been revamped, to give visitors a smoother, more frictionless experience.
Links on my site now also have an all new, unique, physics based hover animation to them, which adds some flair to the site, something I absolutely love.
Quite a few of the animations I implemented the last time have also been fixed up this time around, from smoothing jarring transitions to changing up the colors a bit to give a more cohesive experience, to making the animations more performant where I could.
Config Changes
One of the most flashy aspects of configuration was also setup this time around, and now my site resides at a custom .tech domain.
Besides that though, there have also been a significant number of less visually striking config changes this time around, from the website’s build settings to the CI/CD pipeline to how Forestry (the CMS for my site) interfaces with the GitHub repository where the files are stored.
While making all of these changes has been a slow and tedious process, this overhaul to my entire build pipeline and maintenance workflow’s made writing and uploading these articles an absolute breeze, with basically every task I had to do related to uploading these and getting them onto the actual site, along with all the routine maintenance tasks I had to do manually having been completely automated and set to run on a schedule, and requiring absolutely no interventions.
I cannot emphasize how awesome this new system is, and how much I’ve fallen in love with it and automation as a whole. Practically all of the boring repetitive tasks I had are gone now, handled automatically (and for free) by GitHub Actions.
Setting up this pipeline also gave me some valuable experience with automation using CI/CD (not just running a few basic tests) and with how easy it’s made my life now, I plan to slowly start using it more and more in my other projects, and gradually (hopefully) dabble more into Devops, especially since Docker and Kubernetes have interested me for quite some time now.
Reality Strikes Again!
And a terrible blow it was.
Truth be told, I wanted to accomplish a lot more in this update. I planned to implement the main animation that I designed for the landing page, and the page transition animations that have been a part of my vision for this site since the very beginning.
I wanted to implement some beautiful text animations I’d choreographed and then coded, I planned to add two more grids showcasing the less software related stuff I’ve been working on, and I really, really wanted to change the cursor, the scroll indicator and the logo of my site to animated ones.
And that’s not even the half of it. But alas, the time I’d given myself to complete V3 has come to an end, and if any of the deadlines I impose on myself should have even a shred of significance, it is a must that all of them do too. Otherwise of course, the human mind is all too ready to justify exceptions.
And so, the work on V3 ends here. It was productive, but I can’t help but wish I had done more.
The End
Well, that’s pretty much every thing I changed or added in this update, along with most of what I plan to change or add in the coming updates.
Software is an incremental thing, and to treat it any other way means setting yourself up for a lot of headaches in the future at the very least, or a massive time sink with nothing to show for it at the very worst.
If you’re building a software project, I implore you, take it slow, and plan.
Thank you for reading this article, and have a wonderful day!