My Portfolio

Photo by Kari Shea on Unsplash

My Portfolio

Programming School
·Jun 7, 2022·

3 min read

Subscribe to our newsletter and never miss any upcoming articles

Play this article

Table of contents

  • The Goal
  • Overview
  • Tools and tech
  • Challenges
  • What to come
  • A big thanks!

Well, I guess that since I started my first online course on web development I knew that one of the milestones was to create and deploy my very own portfolio website. I must admit that this is not my first ever try to make a portfolio, but every time I started to design something even close to a portfolio I got stuck on some small thing like "I don't truly know how CSS Grid works" or "That's a shiny technology, I, of course, want to use that!" and had to start from the beginning or read up on some documentation to be able to progress. But now, after a fairly long (no that long) journey along the Developmentroad, I can stand up straight and show you all my very own portfolio website. A heads-up to you all: I might seem almost smug about it, but heck yeah, this is a milestone for me. I can't wait to share it with you!

Want to check it out? Click here! The Github repo? Sure! Click here!

The Goal

The goal was to build something from the ground up, that was responsive and worked on most screens and browsers. Design-wise I tried to keep it free from clutter and be easy to navigate. Also, I tried to have accessibility in mind throughout the development. I have tried to add features that I like and tried to display it in a simple and nice way, like a dark mode toggle in the upper right corner.

Overview

The site is a many pages website. All the data used in the Work section is stored in a Sanity platform to have it all in one place and to easily map out the content.

Tools and tech

I used React to create the site, mostly since I really like the workflow of React and the components based way, which makes development easy and effective (in my opinion).

It's always hard, I think, to find the best icons to use, I am using font-awesome and react-icons.

Challenges

Work section: Here I used the Sanity API to access all the data I wanted to display, and sent all the data as a state in the component. This made it easy to use the map method to render the data out.

Dark mode: Here I used the React Context to store and access the light and dark theme colours. In the past, I have used Redux for this kind of operation but I found Context to work a bit easier.

What to come

This is a tricky part, but I think my portfolio site will be a continuous project and that it will keep on evolving with new features along the way, but it will be without deadlines from now on.

But in the closest future I think I will add:

  • A contact form with Sanity
  • Add more projects in the Work section.
  • ...And more Blog Posts in the Blog section.

A big thanks!

This is the end of the post, thank you for taking the time to read, I hope it did bring you some joy and I have sparked some interest in my development journey. If you liked what you read (or not), don't hesitate to reach out to me with cheers and feedback. Have the best of days!

 
Share this

Impressum

Practice to master