jonasblendstrup.com

This project concerned the design and development of my website. The website had to act as a showcase of the projects I had worked on during my education as well as my free time. Furthermore it should convey my work experience and software skills and generally show the same information as my CV.

Process

The proces of designing and developing this website started with a sketching phase where I explored different interface designs. During this phase I also visited other portfolio websites to gather inspiration. After sketching and evaluating the different interface designs, I created a quick wireframe that covered just the main parts of the interface, such as the landing page. The wireframe didn’t cover how the individual project pages would look, nor did it concern the exact layout of the about me section, but it gave me an overview of the general layout of the website and how to present projects on the homepage.

For the development of the website I wanted to challenge myself and develop the site using a modern javascript based approach. For this I researched various frameworks such as Svelte, VueJS, React and NextJS. Based on the documentation of each framework and some experimentation with each, I decided to use NextJS for the development of the website, since I was happy with the syntax of this framework and since it allowed me to gain an understanding of React without having to worry about finding packages to handle every aspect of developing a website. Regarding my approach to CSS I decided to use TailwindCSS since this allowed an easy and rapid development proces, and since I wouldn’t have to write CSS from scratch to cover all my use cases. Using NextJS and TailwindCSS was very nice and the development proces was smooth and quick.

Design

I wanted to keep the design of the website very simple and clean, in order to highlight the content of the pages and let the projects be the primary focus. Furthermore I needed the website to offer a clear way of contacting me, which is why the contact icons were placed at the top of the homepage as well as in the footer of every page. I wanted the website to be pleasing to visit and read in different environments, and so I developed a bright and a dark theme, where the site should load the appropriate theme according to the system settings of the device that visited the site. However, given that users have different preferences, I also wanted it to be possible to switch between the dark and light theme, and for the website to remember users choice for any revisits, so I placed a button to change the theme at the top right of every page.

For the light theme I used a white colours as the background and light greys for the various elements on the website. I also used a bright green colours as the primary colour, as this contrasted well with the background and could be used to highlight certain elements in the interface. For the dark theme a dark grey was used as the background colour instead of a black, since I found the black colour to be overwhelming and too contrasting with the other elements in the interface. For the dark theme I used other dark greys for the elements in the interface and a red colour as a primary colour, since the green colour would be too bright for this theme.

Gallery

This section provides images related to this project, such as sketches, wireframes, screenshots and similar. Click on an image to view the full size.