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 single-page website. All the data used in the Work section is stored in a data.js file to have it all in one place and to easily map out the content, I might in the future put all the text on the page into a data.js file to make it easier to translate to other languages.

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, but Icon8 is my go-to place to start looking for icons and here I found some really nice icons for buttons and social media links.

Challenges

Work section: Here I used the data.js file to access all the data I wanted to display, and sent all the data as props 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 EmailJS
• Smooth scrolling
• Animations on scroll into view
• ...And more projects in the Work 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!