Portfolio 1 Course Assignment


Cross-course project

Preview of Gamehub Gaming Shop

Gamehub Game Shop

This project received a complete overhaul from top to bottom. I didn´t use any elements of it´s original predecessor, since the code was a complete mess with a lot of repetition, missing semantics and plenty of bugs.

Although I´m aware it was my first ever project, I am quite happy to present a much more contemporary and responsive design. From a technical perspective I have a very different approach here and made use of both grid systems and flex box.

Most design and functionality change I already made last when we tried adding our own Wordpress API. The shop has a functioning JavaScipt navigation bar, api fetch call and a contact form with proper JavaScript validation.

To give you better inside into how much change it has undergone I´d like to link here it´s original predecessor: here. GitHub of predecessor: here

Preview GitHub

Semester Project 1

Preview of Community Science Museum

Community Science Museum

In this project I was quite satisfied with the overall design choices that I made previously, therefore I focused more on adding technical changes under the hood and listening to given feedback.

The biggest change is definitely a cleaner CSS style section with less repetition and better structure. I used one single CSS style sheet for all the applied styles previously, which led to being quite difficult to work on for me or even a different developer if there were any changes that needed to happen. I divided all the styles into the most basic components of the website, making it easier to read and find specific elements.

I implemented a fully functioning JavaScript navigation bar with a full screen animation on mobile to create a smoother user experience across all devices. The contact form also received new JavaScript features to allow proper validation.

I reworked the font hierarchies and font sizes to accommodate better readability for tablet and mobile users.

I noticed that the grid system worked perfectly fine until the point of using it on a bigger desktop screen where the left and right columns would stretch too far out to the borders of the screen. To solve that issue I decided to fix the width of the content in the main section to 1400px.

Preview GitHub

Project Exam 1

Preview of Arctic Tours Blog

Arctic Tours Blog

I am currently quite satisfied with the blogs design since I finished it 1-2 weeks ago at this moment of writing. I will adapt technical and design changes during the semester vacation.

I am excited to learn more about JavaScript, CSS and design in the the second year of my studies at Noroff.

Preview GitHub