Launching My Next.js Portfolio Blog
Why I Built It
I wanted to create a portfolio blog where I could share my projects, write about development, and give people an easy way to contact me.
The goal was to keep everything in one place. Instead of only having a basic portfolio page, I wanted a site that could grow over time as I built more projects and wrote more posts.
It needed to be simple, fast, and easy to update.
Planning the Design
Before writing the code, I planned the structure of the site.
I wanted the main pages to be easy to find:
- Home
- Blog
- Portfolio
- About
- Contact
The homepage needed to give visitors a quick overview of who I am and what I do. The blog needed to support posts, tags, and search. The portfolio section needed to show my work clearly without making the user dig through too much information.
For the visual style, I chose a clean layout with a deep blue accent colour and an off-white background. This gave the site a professional feel while still keeping it friendly and easy to read.
Building the Site
I built the site with Next.js because it is fast, flexible, and works well for content-focused websites.
The blog posts and About page are written in Markdown, which makes the site easy to update. When I want to add a new post, I can create a new Markdown file rather than editing a database or admin panel.
I also added:
- automatic latest posts on the homepage
- a blog page with search
- tag filtering
- project cards
- a contact page
- a contact form for enquiries
For styling, I used SCSS so I could organise the design into reusable sections for the header, footer, cards, blog pages, and layout.
Making It Easy to Use
A portfolio site needs to do more than look nice. It also needs to help people find information quickly.
I focused on making the site work well across phones, tablets, and desktops. The navigation is simple, the post cards are easy to scan, and the contact page is easy to reach.
I also wanted the blog to feel manageable from my side. Using Markdown means I can keep writing new posts without needing to change the main codebase every time.
The Outcome
The finished site gives me one place to share my work, write about projects, and let people get in touch.
It is:
- fast
- responsive
- easy to update
- simple to navigate
- built around my own content
I’m happy with how it turned out. It feels like a strong base for my portfolio, and I can keep improving it as I build more projects.