This article details a (very) old version of my website. There will be a new article describing the current setup (soon.) Thank you for reading my blog! 😁
I'll divide this into two parts: the website, and the blog, because they are both different in how they were built.
The Website
I built the website with a single idea in mind, and that was that it should follow the K.I.S.S. (Keep It Simple, Stupid) principle as much as possible.
I did not want any monolithic frameworks–no Bootstrap, no Vue.js, no Laravel–just plain old HTML, CSS and JavaScript when necessary. Keep it static, keep it fast. The first version of my website adheres to this wish, and I was well away, but...
I wanted to add more pages, so that led to more directories, which then led to a plethora of index.php scattered around my website. That didn't seem like K.I.S.S. I was losing the speed and the simplicity that I wanted.
I looked at implementing a router, and I figured something out that worked, but at this point, I began wondering why I wasn't just using a micro-framework. I was reinventing the wheel, which is a great way to learn, but I was already knowledgeable in this area. I looked at using Lumen, but I already knew Laravel, so why not learn something else different instead? Put another framework in my toolbelt. I began rewriting my website to use the Flight PHP micro-framework.
I didn't know anything about Flight, but when I read the tagline "Flight is a fast, simple, extensible framework for PHP," I knew that it would be perfect for my intentions. And it is. My website runs Flight via Composer. At this point, I should note that I am using Composer, but because I am using shared-server hosting for cost benefits, Composer isn't installed on the server, and I have to include the vendor directory in my repository.
During my rewrite, I also started using Gulp & npm for building the front-end. It wasn't to learn them, as I've already used them before in other projects, but I was tired of my Sass workflow, and I could version CSS via Gulp.
And then I saw that the Bootstrap v4-beta had been released, and I was eager to tinker with it. I was concerned, that I would lose the simplicity that I valued if I started using it, but because Bootstrap 4 now uses Sass, I could easily just only import the components that I wanted.
As for the design, the most prominent feature throughout the website is the parallax scrolling header. I use it on many of my designs. Here, and here. It gives a real sense of depth to a page, and I really like that. The styling and coloring comes from personal branding that I've developed over the years, and I kept the K.I.S.S. principle in mind when constructing the layout for the pages.
For my portfolio page, I use MixItUp 3 for filtering my many projects. It's more lightweight than you'd expect from it. What more, I also lazy load the images on the page to reduce the initial loading.
The source code is available on GitHub. Let me know if there's anywhere that I can improve, or perhaps should've done different?
The Blog
You might think that it's a part of the same underlying structure as the rest of the website, but it really isn't. It's actually Wordpress installed into a directory on the same server the website, but with a subdomain pointing to it.
You might ask, "why Wordpress?" It comes down to that same K.I.S.S. principle. I don't believe in reinventing the wheel just because of some stupid idea that it's better to do it yourself, especially when Wordpress is adequate for your needs.
It also happens that I've slowly grown to like Wordpress. I like discovering and installing plugins. It's interesting to navigate the Wordpress ecosystem. I don't have any appreciation for the codebase, however. That thing is a monolithic and incoherent mess. My biggest concern with Wordpress has always been its speed and performance. It's painfully slow at times, but after I installed a cache plugin, it does seem to have sped up quite a bit. Wordpress has a RESTful API now, which I coincidentally use to show the latest posts on the home page of my website.
The theme's codebase was taken from the Twenty Seventeen theme, but I didn't actually keep much, as I don't need my theme to cover a lot of same options, as the default Wordpress theme does.
Post-mortem
I'm satisfied with how my website looks right now. I believe that I have accomplished my goal of following the K.I.S.S. principle.
The blog is indistinguishable from the rest of the website, and Wordpress has a lot of benefits with its plugins and ease-of-use.
For the future, I want to start work on implementing a Service Worker. Google has been pushing it a lot as of late, with good reasons too, and I think that it's time for me to learn everything that I can about it.
I also want to improve the design of my blog. The readability could be better, the discoverability of posts need to be improved and the front page of the blog could use a new layout, I think, but..
What do you think? How does the website look to you? How was your experience reading my blog? Let me know on Twitter @tehwave.