My blog is now up and running!

I finally made it! This personal portfolio/blog site has been an ongoing project for me since early/mid-2022. I originally hoped to complete it by October 2022 but balancing full--time work (and overtime), traveling and making the most out of my time in Japan, and prep for moving countries (leaving Japan), resulted in dedicating less time towards the designing and building of this project than I originally intended. However, its finally up on the web as of January 2023!

While my site is still incomplete and plenty of room for improvement, I thought it would be a better idea to get this launched asap and bring on the improvements incrementally, and get started with actually writing in my blog so that I can annotating my journey as a developer.

There's still a lot of room for improvement but here's a quick summary of my project.

Planning & Design

For the design, I commissioned my friend to help me out with the UI. I thought it would be a great opportunity for my friend who was self-studying UI/UX to help me on this project to add to both our portfolios. The two of us met up over several sessions to draft up a wireframe, bounce ideas around and ultimately flesh out a hi-fi mockup for the PC version of the main page, blog archive and blog page templates.

Currently the design is a little... plain, with just text and white space everywhere. I am intending to add in a little more design aspects, photos of me maybe (it IS a personal site afterall), and a little more... fun? This is an ongoing project for me so hopefully the design will improve over time! (Fingers crossed!)

Color Scheme

Just a simple black and teal design, colors I personally like. The original idea was to make a dark and light mode, having the light mode with a darker shade of the green over a pale yellow/beige color, however I've currently pushed that off to the "do-later" list.

The Tech Stack

This project was a challenge for me to try new technologies. This is my second JAMStack project ever (my first was the coder blog at my previous company on which I worked with 2 other engineers rather than a solo project), this time using Contentful as my CMS, netlify to host, and eleventy for my markup, and vite to build. These are all new tools for me so there's a lot of learning in how to piece these together.

At work I was stuck using gulp, webpack and even grunt... D: It's time I stepped away and tried out newer and faster Vite rather than those clunky old tools, so this was a good chance. When I was deciding my stack, a new Eleventy + Vite plugin had just been released too so it was a chance to try that out too!

I'm also using SCSS and nunjucks just to make my life a little easier as these are familiar tools for me for writing CSS and HTML. Eleventy works great with nunjucks, so that was great for me too.

There was an endless list of options to pick from, and I decided it was best to just pick a bunch and stick to it. Those other cool stuff out there, (Astro I'm looking at you!!) will have to go towards my next projects :D

Coding

The biggest part of making a site is well... making it.

As I mentioned above in the tech stack section, a lot of the technologies I'm using in this project are quite new to me - so I've spent half the time googling how to set up eleventy, read in my data from contentful, set up my css and javascript files to build in the correct location, figure out the different syntaxes, etc. Once I was able to get the files in their right places, and figuring out how to access my data, transfering the design into code was a fairly smooth process.

So far the biggest challenge has been formatting the blog posts correctly, and I have still yet to figure out how to correctly embed things (iframes, youtube videos, imgs) in my rich text editor.

As for the design, I still have some outstanding items like the making a hamburger menu for the mobile site, and fixing bugs around responsive sizes and testing cross-browser. I mentioned above too but, I hope to improve on the design going forth, and would love to add some three.js stuff, maybe draw some svg animations somewhere, throw in some page transitions using barba.js, and also try to get that dark/light mode switch coded.

There's a lot to do...

Going Live

I've hosted this site on Netlify, set up to update when data is pushed to my connected Github, or when blogs are posted on Contentful using webhooks. The last thing to have the site officially up and running was to connect it to my custom domain name purchased on Google domains. This was a relatively easy process but requires you to wait around 24hours before the domain is activated if you've just purchased it, so I wasn't able to connect it to my netlify-hosted site immediately. After checking it the next day, I was able to wipe the sweat off my forehead as I found my site accessible on the newly purchased domain!

And that is it! My site is up and running!

If you've stuck around to the end of this post, thank you SO so so much for reading! I hope you'll continue this journey with me.

PS: the featured image of this post is me looking out from the top of Mt Tsukuba in Ibaraki, Japan. Highly recommend this hike as a day trip from Tokyo, there are a few routes to go up, the one we took was a 3hr-ish hike with some climbing over big rocks so you'd need to be fairly fit or mobile but so it might be a little challenging for beginners but the view at the top is totally worth the climb.