I built a personal website & blog

Building your own website is one of those things that everyone tells you to do to build your personal brand, showcase your skills and what not. For me, it's something I've always wanted to do (and have done with varying levels of success) since I was a child using geocities homepage builders, 20 or so years before I ever even thought I would become a developer for a living.

Now with the rise of social media, youtubers and influencers and all these website builders that can easily set up a ready-made website equipped with an e-commerce shop and blog all within a matter of minutes, it feels especially tedious to put in the effort to build a website from scratch. Why even bother?

However, I resisted the temptation of using these out-of-the-box options and built my website from the design up. Afterall, I just wanted to make my own website, and as a bonus have somewhere to write some blog posts, its not that I want anyone reading my blog.

While I did drag my feet for a long time -- especially building this while I was bogged with the Japanese shachiku (corporate slave) lifestyle averaging 70-90 hours of overtime a month, and then spending many of my precious weekends either recuperating or taking a trip to explore a new town, city, or mountain -- I eventually did manage to put my foot down and start creating this website and blog.

The Design

I designed this website with a friend. She was studying web and UX design through an online course through Google at the time, and keen to create things for her portfolio. It was the right timing and a great opportunity. We brainstormed and iterated through many different ideas, colour schemes, styles, layouts, and tried to come up with something that would reflect me as a person and as a developer, while exploring a bunch of cafes in Tokyo. Then I let my friend run free with the UI, we discussed things I liked, didn't like, then continued to refine until we had a fairly HD mock up of the main pages and a basic style-guide to follow for the rest. I don't plan to talk too in-depth about the design as I've talked about it before in my first post about this blog, and I may want to talk about it more at a later time.

Building the Website

After the design was complete, I spent some time sifting through various technologies to select a techstack I was happy to work with, and then I was finally ready to build the website. As mentioned in my first post, the website was still incomplete at the time of officially going live. While I had to fight a lot of my perfectionist tendencies to deploy, when I actually did deploy it, it didn't feel like a big deal anymore.

To be fair, it was at a point where I was happy with the result, and it was nice to learn how to get the netlify pipeline working with blog updates and updates to my repo. At the end of the day, I wanted to have a website I could tack on to my profile in my CV or linkedIn page - just in case employers looked at that sort of thing.

I've mentioned in my initial post, but this website is built with eleventy, contentful, netlify, and vite. I originally picked Gatsby.js as my static site generator - it had good ratings for functionality and ease-of-use, and it is a React-based framework which I thought would be perfect for me as I started on my React-learning journey.

After a google search and quick tutorial I'd set up my project fairly easily, however, the React-based nature meant learning to write in JSX with HTML-in-JS and CSS-in-JS. While I'm sure I could have just done a bit of extra work to make proper CSS (or something like styled-components) work with my set up, the learning curve and the slowdown I felt from CSS-in-JS, and just the overall dislike for the pure ugliness of it, deterred me and I ended up procrastinating for 4 months. It was clear that I wasn't enjoying the set up, and I decided to switch to eleventy which was a little more familiar with and worked well for me (I was more used to a nunjucks & SASS combo which I was using for work).

The aftermath

After the initial deploy, I didn't work on the website for a length of time during which I was preparing to leave Japan and migrate back home to New Zealand. Balancing work with catchups, farewell lunches and dinners, the piles and piles of bureaucracy that we all love to hate, such as closing banking/investment accounts, canceling subscriptions and utilities, and even submitting documents at the local ward office and tax office in person because Japan is stuck in the 80s and have yet to digitize and centralise much of their Government processes, packing as well as getting rid of furniture and getting lowballed like heck...

Things were a bit hectic and when I made it home, there was still some more paperwork to be done to withdraw my money from my pension and getting my tax refund. I just wanted to relax. And so I did. For a few months. Then I slowly got back to fixing this website, did a lot of courses and tutorials to upskill, and then got a job.

I'm not sure if building this website was a factor in the interview process, but it's definitely helped me build confidence that I've built something, I've done something I've always wanted to try doing, and I like the finished product (although it could use some improvements).

Realisations

After beginning my current job - we're an in-house tech shop that builds the customer portal for a financial service - and being heavily involved in the UX and accessibility uplift of our product, I realised a lot of flaws in my website. While I cared about these things in my previous job too, my understanding was nowhere near as developed (especially with a lack of time to properly research and pursue accessibility), thus accessibility has been heavily neglected in my website.

While I did build my website wanting to focus on *shiny* stuff like such as animations, and wanting to later add in something - I don't know what - made with webGL (which I was in the process of learning), I also did shortcut the website and ended up with my bare-minimum finished product, I even took out some of the scroll effects - as they did not work with my content - changing it from sectional scrolling to just a full page smooth scroll - which I also would like to remove now as I've learnt scroll-jacking is not accessible for some users.

Summary

Looking back at this website a year and a half later, I still think I would like to finally add in that 'light' mode (since dark mode was created first), and change some of the spacing and margins around the typography a bit - however I don't have the motivation to create a new website just yet.

If it matters - my work has been my main focus in the past year and I've made a lot of progress as a developer. It'd be great to output some of my learnings here at some stage when I'm ready, and I am really hoping I can write a bit more here, and about any topic.

As an action for myself, it's definitely a good idea for me to review my code again, and do an upheaval with focus on the markup for accessibility. Removing the scroll-jacking, and maybe adding in support for reduced-motion settings if users want it, could be the next action. While there's still much in the to-do list for improvements, I feel like my mindset has changed for the better after gaining some more experience in my current job. The aim is not to be a feature factory and focus on adding new cool features to a tiny site like this, but to have a solid, high quality website that can be used by users.