Skip to main content

Personal Portfolio

My portfolio will show projects I have made, and at the same time show what I have learned through three years of study.

Tech stack

  • Next.js
  • React.js
  • Netlify
  • Sass
  • Formik
  • Yup
  • Nodemailer

Background

After three years of studying web development, we each had to create our own portfolio. This will show what we have done and will be used during the exhibition in the subject IDG3800 Portfolio and Exhibition. Here I selected three projects to refer to, where this project is one of them.

In my first plan for the portfolio, I wanted to create it with the possibility of content in Norwegian and English, something that was created with the help of Next.js own routing for "locales". I also wanted to make it with dark and light mode. The first version I made with it, but in the final I do not think it was correct with a dark version as it would not get the same impression of the page.

Technologies

The website is built with Next.js, which is a framework tool built on React.js. This simplifies the routing and customization of languages. I wanted to teach Sass (Syntactically Awesome Style Sheets) so therefore this website is made with it. Together with BEM (Block Element Modifier) ​​naming methodology it has done structuring and writing CSS more clearly.

I wanted to allow the user to send me an email via a contact form. To send the message I am use Nodemailer. To avoid spam I have added Google's reCaptcha which checks if it is a bot that tries to spam before the email is sent via Nodemailer.

Accessibility

For the site to be accessible to everyone, I have had accessibility in mind from the start. All important contrasts meet the WCAG criteria. Links have descriptive text or "aria-labels" to elaborate on the meaning of the content. All aria labels and the rest of the content are also available in Norwegian and English.

You can use the keyboard to navigate the entire site. The first thing you are "tabing" is the ability to change language, then you can go to the main content so you do not have to push through the navigation. I have chosen to remove outlines on some elements when focusing, but it has been replaced with another styling to better fit into the design of the page.

Although I'm not very good at using a screen reader, I've tested it out with the screen reader that comes with Apple's Macbook. Found that it did not read alerts if you did not follow the requirements in the contact form. After adapting to aria, it became significantly easier to use the form.

Improvements

Should I do this again now, I would move all content to a CMS to more easily keep track and be able to update the content. As a CSM, I have good experience with Strapi as we used it in the Bachelor project, but it can be a bit expensive in the beginning as I need a separate server for it. Another free option would have been Sanity, but because I wanted a multilingual side, there was not enough time to learn more about it.