Personal Site

In January 2025, I started working in earnest on a personal portfolio website that I had been mulling over for a while, and had even created previous versions working on different technologies. Eventually I settled with a technology stack to produce the current site that you are viewing right now!

The Vision

Even in my earlier iterations of joshupson.com, I had wanted the site to be a professional, front-facing channel to display all of my work, while itself acting as a jewel in the crown by displaying a degree of complication that would require me to demonstrate a full-stack approach to implementation. I eventually decided to orient the site towards having:

1. An intuitive, accessible front-end with a unique style,
2. A quality content management system,
3. A well crafted, thoroughly tested and multifaceted back-end

The Technologies

Similarly to The Shang Review (TSR), I decided to select a blend of technologies, some of which were familiar to me, and some of which I was new to, but keen to adopt as my professional environment at the time was exploring and experimenting with new technologies.

Sanity CMS

Encouraged by the success of it's use in TSR, I was keen to utilise Sanity again for content management. It's unique draws, which I discuss in more detail on TSR's project review, were still very applicable for my personal site, and the free tier still gave me all I needed, so I saw no reason to switch it out in place of something else. It still feels great to work with, and having an existing site with it in place led to a quicker and better implementation.

Nuxt

The biggest change from any previous projects (including the past iterations of joshupson.com) was swapping both the front-end and back-end frameworks to use the popular JavaScript library, Nuxt, which is based around Vue.js, which I have a great core understanding of, from working with it frequently in my professional life. I had heard great things about it, and was really keen to try it out for myself, both for self-enrichment and to bring the experience to my professional career.

One of the key differences between Nuxt and Astro (which I used for TSR) is that Nuxt, by default, acts as a single page application (SPA), as well as a server-side rendered (SSR) static website, which is then delivered to the client-side and hydrated, which has a massive amount of benefits. It's very SEO-friendly and performant, while also excelling in the client-side interactivity that Vue does so well.

Figuring out how Nuxt worked seemed, from the outset, like it was going to be the most challenging part of the project.

The Execution

I started working on the design of the site using hand-drawn wireframes to put on to paper what I was envisaging the site to look like. This is very useful to me as by actually having the design out in front of you, it makes it a lot easier to see what actually will work, and what won't.

I then started to build the site, adopting a content-block based approach, to divide subsections of pages into reusable "content blocks", which I then modelled within Sanity, and these can be selected from a dropdown list on the user's end with the CMS, which then renders the front-end implementation which I build as well. This gives an incredible amount of flexibility as it means that I can have consistent styling across the site whilst also not having to repeat the code of the block, as the definition for said block is stored within one file in the front-end.

I once again chose to host the site on Cloudflare Pages, as it is both free and they provide an adaptor for Nuxt, which makes hosting and deployment very simple. I also set up a CI/CD pipeline to track changes from my source control, i.e. my joshupson.com GitHub repository for an even easier deployment pipeline.

Overall, it took me from January to May, working on-and-off between a busy professional life to deliver the site you are viewing now!

Results

I am very proud with how joshupson.com turned out, and I am especially pleased with this iteration of the site, as I think it fits my requirements very well. Going point-by-point (from the points mentioned under The Vision):

1) Intuitive & Accessible Front-End

I am very pleased with how the front-end turned out.

Intuitiveness

I am happy with the user experience (UX) that the site offers, and think that the site benefits from it's simplicity. I think the more complicated UI elements, like the contact form and the projects page filters are labelled well and are easy to understand, as I designed them to comply with the Principle of Least Astonishment, which in this case means that the function of the filters, for instance, should feel familiar to other websites and the general web standards found throughout the World Wide Web.

Accessibility (a11y)

On the whole, I think that the site is very accessible. I based the colour palette with accessible colour contrast ratios in mind, and kept meticulously to this requirement. Going in with an a11y-first approach allowed me to create content blocks from the ground-up that comply with the WCAG AA specification for a11y, which was the target I aimed to hit.

There are still some oversights which I aim to address through patches - the website is never truly complete - some of these are quite big, as I don't think I paid enough attention to tab indexing and keyboard shortcuts on the projects page.

Style

I think I struck a good balance between professionalism and style in the cultivation of the site's branding, despite visual design not being my forte. I angled instead for what I know (i.e. code!), to project competency, professionalism and a touch of dynamism. I am especially happy with the font choice, both for the large headings (i.e. the monospace coding font), and the normal body font.

2) Quality Content Management

How the Sanity CMS looked at the point of putting the site live was not what I had intended, and was lacking a lot of the quality and polish that I had hoped to be able to implement at that stage. This isn't to say that it was badly made, but I just don't think I put enough time into it.

There are still some blocks that are missing the implementation for certain permutations of attributes, such as having a transparent background, or an optional image, which is misleading, but fine for personal use, as I am familiar with my own CMS, and I will be the only one using it, but this leaves a lot of work, and I wouldn't ever do it in a professional environment.

There were some optimisations I made that I was very pleased with, such as how I handle tags and also reducing the home page to not exist as a "singleton" document type, and instead exist as a page, which isn't possible in a lot of other, more rigid, content management systems.

I'd summarise my opinion of the CMS as being the best I've made yet, but it's opened my eyes to how far I still need to go in order to make a really polished CMS.

3) Well-Crafted Back-End

Even though there is not much necessity for a back-end of this site, I tried to demonstrate my fluency by adding some features, such as the contact form, to speak to a bespoke back-end service that I wrote. I was very happy how this turned out, and I enjoy using more rigidly typed languages. In this case, the back-end was written in Typescript, which although it's not rigid as opposed to a lot of other programming languages, it is when compared to Javascript.

The contact form was well tested, and both server-side and client-side validation (i.e. preventing malformed data from being submitted) is very important and I was glad to get it right.

I also installed many different Nuxt extensions (modules) to improve security and SEO, like nuxt-security, @nuxtjs/robots and @nuxtjs/sitemap, the sitemap module requiring some unique server-side code to map all of the routes for the pages ascertained from the content within the CMS, which was a fun challenge that I enjoyed working on.

Retrospective

So what have I learnt from this project, what technologies would I use again, and what would I have done differently?

On the whole, I am thrilled with how the project has turned out, with a few snagging points, such as the level of polish on the CMS not being as I had hoped.

The technology stack that I used I was very happy with, and I would readily use all of them again. I will patch the CMS over time to the level of quality that I expected from the start, the nice thing about this website is that it's continually evolving, with new pages needed all the time. However, for the purpose of review, I try to evaluate how the site is when it is launched.

I don't think there's anything that I could have done differently, as I see this website as my first completely self-built site (if you exclude TSR, as I did not design the wireframes). I think I'd like to have completed it in a shorter span of time, which I know I would be able to do now, but between a very busy professional life at the time, I think I struck a balance well.

To summarise, I am very proud of how the site has turned out from a technical perspective, and I see it as an important point on a learning curve for Nuxt and Sanity, insofar as I think that the next project I do with the same technology stack will lead to an very clean and polished product, which I would hope to be able to deliver in a shorter timespan.