New Beginnings

Back in 2020, I wrote my first "portfolio". It was a very mediocre site, built on pure HTML and CSS only - a young me's attempt at placing myself on the web.

A screenshot of my old portfolio.

It wasn't much - there were zero animations, I had very little experience to put in so I had my old test scores in there, along with a bunch of other filler content. If you're interested, you can still access it here.

However, it was a serious passion project. I made sure it had really good SEO - decent meta tags everywhere, semantic HTML and all sorts of hacks to avoid Content Layout Shift. It had a nearly-perfect Lighthouse Score, and boy did I do everything to make it responsive on every device possible - even on Apple Watches!

After getting my first full-time job, I saw the portfolios of many of my co-workers and that really kicked off a need in me to make a pretty site for myself.

wklsh.com - a senior developer at Codigo

And thus this site came about. I'll be the first to say I'm not the greatest at design. However, I love going on awwwards and seeing the sites there and just being awe-inspired by the talent of those before me.

Design

For the primary font of the site, I used Fraunces. It's a playful serif font with a looptail 'g' and a rather peculiar 'f'. As for secondary fonts, I've used the following, all courtesy of Google Fonts' incredible font database.

• Jost
• Karla
• Work Sans
• JetBrains Mono

I've used dark pastel colors all over the site - generated by coolors.co and tweaked by myself. The layout, page transitions, design and colors were all built from scratch. Initially, I was relying on Lottie for some animations, but Lottie's exported JSON's were impacting site performance, so I've excluded the package for now.

For laying out the site, I went over more than a dozen different options, and finally settled on this. I wanted some scroll effects so initially used locomotive, but found out locomotive scroll is broken on mobile Safari, so scrapped that and just stuck with manually position:sticky-ing all my special elements.

Development

My first attempt was to build the site with GatsbyJS. I wanted a simple blog in my portfolio and Gatsby seemed like the go-to solution, but quickly realised the weirdness of GraphQL and the Gatsby ecosystem, and I simply wasn't in the mood to learn a new set of rules.

So I went with NextJS instead. I wanted to self-host instead of relying on Vercel, so I had to go with its Static Site Generation. However, there's a quirk with Next's SSG that doesn't allow you to use the <Image/> component, so I had to build a custom image handler for that.

The blogs are MDX files, sourced with next/mdx and wrapped with a custom wrapper for exporting to JSX. Here's my custom function for rendering each individual blog with webpack's require.

function importAll(r: any) {
    return r.keys().map((fileName: string) => {
        return {
            link: fileName.substr(1).replace(/\/index\.mdx$/, ""),
            module: r(fileName)
        }
    });
}
export const techPosts = importAll(
    require.context("../pages/blog/tech/", true, /\.\/.*\.mdx$/)
);

export const prosePosts = importAll(
    require.context("../pages/blog/prose/", true, /\.\/.*\.mdx$/)
);

Down the line, I'd like to convert from using a local MDX filing system to a headless CMS solution with pagination. Right now, there aren't enough blogs that I'd have to worry about performance, so I'll cross that bridge when I have to.

Deployment

My staging site is deployed by Vercel at pog-folio.vercel.app. I could've just bound my domain to Vercel, but I wanted to make sure that I could upload custom files and have it be under my own domain. The easiest way to do that, of course, was with my own server.

I'm using the lowest tier of Amazon Lightsails server with Nginx. However, since this is a static site, theres' no node server running, so I could switch to an EC2 nano instance but the difference is a couple cents so I didn't want to bother with the headache of migrating.

Thoughts

So, yeah. That's the flow I went through for building this site. There was a lot of anger and frustration along the way - it's easily the biggest project I've done solo, but I'm quite proud of how everything turned out. If you'd like to ask me anything about anything on this site, please don't hestitate to contact me.