Action

Git-repository

Before I started working on my portfolio, I created a personal Git repository, using Git lab.

ReadMe in Git

In the link and image above, you can see the ReadMe document I made. I used the ReadMe document I made last semester as a template for this semester, updating it to my current portfolio.

Commits and branches

In the image above, you can see some of the commits/ commit messages I made. As opposed to last semester, this time around I tried to make my commits more frequent and my commit messages clearer. I'm not sure if I succeeded at this, but it is an improvement from last semester.

In the first image, you can see an example from last semester, and in the second image, you can see some of the commits from now that are much clearer than the last semester's.

Code documentation

The first example I have for this section of this learning outcome is how I improved my infinite scrolling text from something laggy to something that actually looked like infinitely scrolling text.

In this link, you can see how I first did the infinite text animation. This way, the text would move in and out of the screen. It did continue 'infinitely', but the problem was that it would take a long time to move onto the screen, and it would disappear from the screen for a long time, hiding information in the process. Another problem was that on a big screen, the text would appear in random places on the screen, and this was not supposed to happen. The idea was that the same text would continue behind each other so that you could see it the whole time.

I did not know how I could fix this until one of my teachers gave me a link to a website showing how I could do it.

This website showed me an easy, pure CSS way to do it. One side note is that the text is not actually infinite, but when the pieces of text move off-screen, they restart at the beginning again, making it seem like the animation is infinite, while in reality, it is not. This is visible if you view the website on an extremely wide screen.

In the video above, you can see how the new animation works.

The second example I have for this part of the learning outcome is the comments I added to my code to ensure that it remains understandable even when I haven't looked at it in a long time, or so that others can easily understand the code.

In this link, I added a media query for screens that are 1030px wide or smaller, which is about the size of a tablet. This changes the layout of the playlist section by making it wrap the items and space them out more evenly. It makes the page look cleaner and easier to use on tablets. I also added a short comment above the code to explain what it does.

In this link, you can see the CSS I used to style the collage on the homepage. It's set up as an 8-column, 4-row grid to help layout all the images nicely. I added comments above the code to explain what each part does, and also included some details about the grid setup. There are a couple of small spelling mistakes in the comments, but everything should still be pretty easy to understand.

In these links (CSS and JS), you can see the code that handles the animation for the letters image on the landing section of the homepage. It uses a bit of CSS and JavaScript to make the images switch smoothly. The comments in the code explain what each part is doing, so it's easy to follow.

The image below shows a section of HTML for the footer. There's a comment at the top marking it as the footer section. Inside, there's a div for the home navigation (also labeled with a comment), and within that, another div containing the actual nav content — again, clearly commented.

Transferable products

For the transferable products part of this learning outcome, I used FileZilla to host my website on the Hera server.

This example connects to the learning outcome by showcasing file management, web deployment, and server interaction—three transferable skills applicable across various projects and industries.