Back

Webdesign

Topic

This course is where I started my portfolio page. I learned all about HTML, CSS, and JavaScript to create a unique portfolio that meets my needs. I began by creating mockups in Figma, which you can see below, and then used them as a reference while building each page. I also worked to make the website as responsive as possible, but if you notice any strange behavior on your device, please let me know, and I'll fix it.

There's also a secret game I made hidden in my portfolio. I'm curious if you can find it and beat my high score! ;)
(Only works on a PC)

This is the design I created for my index.html. It's the main page where viewers can access anything that interests them. They can choose between different types of projects, learn more about me, or reach out. I wanted to make this page as clear and clean as possible, since it's the first thing people see when they enter my portfolio.

I needed overview pages to display different projects. The previews and titles should make it easy to see what each project is about, so the viewer can quickly choose what interests them.

On my portfolio page, I wanted to display basic information about me, my hobbies, and my favorite games, so I went with a fairly simple and classic design.

The fan projects were the hardest to get right since each game needed a different format. For my League of Legends champion concepts, I wanted to present each ability visually and textually, without separating them into different sections. Having everything in one view helps bring the champion's kit together more easily in the viewer's mind.

Since creating a subclass for three different Guardians takes up more space, I divided the page into three kits. Like with the League of Legends abilities, I kept each kit's abilities on a single screen to make it easier to see the whole picture.

For my contact page, I kind of ran out of ideas. I had an email form there for a while, but it proved to be a liability. Now it's... well, yeah. It gets the job done.