I’ve always wanted to code my own portfolio from scratch. It wasn’t until I began my uni break that I got around to doing it — and I’m so glad I did!

The requirements I set out for this project were as follows:

1. Completely personal design, designed by me.
2. A place to show my work and who I am.
3. A blog system to allow for regular uploads.

These are pretty simple requirements, and they’ve all been met. I’m happy with the design, it speaks a lot about how I see good creative design. The landing page has a big button pointing to a page about me. One of the navigation icons lists the projects I’ve worked on. And the blog page lists all the blogs I’ve posted.

The rest of this post consists of brief overviews of each part of the process, from ideation to design to development and deployment. It’s all a very easy way to code a website from scratch and you can get started here. I will make more in depth articles for each section in the future and link them here.

How I designed my portfolio

I started this process with ideation. Basically, I looked at a bunch of portfolio websites, picked the ones I like the best and listed the reasons I liked them so much. It’s as simple as that.

I made the initial designs in Goodnotes on my iPad. This can obviously be done with paper and pen. Don’t worry too much about the details here because it really is just a portfolio, not a fancy app or video game.

Next I found a colour pallet and started designing in Figma based off the paper sketches.

Before developing your portfolio, make sure to test your prototype with some family members or friends. Often as the designers we overlook some parts of the design that look obvious to us, but in reality aren’t optimal.

Creating a NextJS app

To avoid rewriting what’s already been written, I’m going to link the NextJS docs, specifically their page on getting started. Read through this, but ultimately you’re opening a folder in VS Code or the like and entering npx create-next-app@latest in the terminal.

As you will find, this process is extremely easy and will become muscle memory after a couple times.

Creating a pipeline

Before going ahead and coding your website, it’s a good idea to create a pipeline that runs automatic checks and, if all checks pass, published your website.

To do this we’re using Github and Vercel. Github is a pretty universal tool to the IT industry — I won’t explain how it’s used here. Vercel was made specifically for NextJS applications, so it’s very easy, AND FREE, to use. Vercel will read your commits, test them for errors, render and deploy them. If you are committing to the main branch it will deploy as a production build, any other branch and it will be a preview that has its own special link.

Make use of Github branches when working on new features. For example, when I created the About Me page I didn’t push it to the main production branch, instead I was pushing to a preview branch called ‘About-Me’.

Getting a url and linking it (GoDaddy)

Vercel automatically gives you a url based off your project title. I used this for the duration of the development stage. Then I linked to it my jessejwatson.com url that was already linked to a Wordpress blog.

I use GoDaddy to buy my urls. Once you’ve bought one, find it in ‘My Products’ under Account. Next click ‘DNS’ beside the url you would like to use. Vercel will have a number and tell you where it wants you to paste it. To find this, go to your project in Vercel, click Settings and go to Domains. Enter your domain and it should be pretty self explanatory from there.

Summary

I thoroughly enjoyed this whole process and will be sure to do it again soon. I hope you enjoyed the read and found it helpful. Stay tuned for more posts about this website and all other wonderful projects I work on.

Cheers,

Jess