Jordan Blewer

wosps.net is my personal portfolio website - a place to showcase and write about my projects. It was built using Next.js and hosted on Vercel. The source code is available on my GitHub.

What problem did I set out to fix?

Whilst GitHub is a great place to store my code, I wanted a place to showcase my projects and write about them - providing more context and information about them. I decided to build this website to do just that and to also learn more about web development.

How did I build it?

I built this project using Next.js. I chose Next.js as it is a framework that allows you to build static websites using React. I used two libraries to add a blog-like functionality to the website - gray-matter and markdown-it. Using these, I was able to write my project posts in Markdown and then parse them into HTML. I used CSS Modules to style the website and deployed it on Vercel.

What was the most challenging part of the project?

The most challenging part of this project was ensuring the website was responsive and looked good on all screen sizes. I used media queries to adjust how the card components looked on different screen sizes, but decided on a good design for this was difficult.

What did I learn?

This was my first Next.js project, so learning about static site generation was a big part of the project. This knowledge has proven very useful and I've since used Next.js to build a few other projects, including Intruder Rooms. Next.js is a great framework and I was impressed by how easy it was to get started and how many features it has. I learnt about the router and used this to create a dynamic page for each project post, which was very easy to do.

What will I do differently next time?

Whilst I'm happy with how my portfolio looks, I believe there are a few things I could do to make it more eye-catching. I would like to add a few more animations and make the website more interactive. Adding a few more features such as a dark mode and search bar for my projects could also add to the user experience. I built the website without the use of any CSS library or components and I'm curious to see if these may assist in designing a better website.