Git
you can access my Gitlab to view my progress here
Hermes site
To start off the semester, and to benchmark the skills at HTML and CSS, we had been given the assignment to recreate the website for dutch transit company Hermes. This was a rather challenging task for me, as I had a pretty slow start in terms of getting back into coding this semester. It was also made while I switched from one laptop to the next, causing there to be two different versions of the website.
Version 1
Version 2
Awwwards site
Portfolio site development
This site was created based on a framework from a couple weeks ago, with a simple color contrast of off-black to white, to be precise, a color named eigengrau as a background, and a simple consistent design across all pages, as I feel this uniformity is great for the navigability of the site.
Layout reproduction
As a short practice task, our teacher instructed to class to quickly reproduce a layout for a website using our skills in CSS to provide the best possible result. This is what I ended up making:
CSS animations and transformations
To learn more about how CSS animations work, I decided to create something in the style of the windows 95 multitasking advertisements, an ad campaign by microsoft to advertise the capabilities of their operating system from 1995. I combined this with experimenting with the transform property, leading to a demo you can view here(link to file)
JavaScript
Introduction using salad
As an introduction to JavaScript, I have made some basic functions, which take inputs from fields and a button to make a “salad”. It is a slight expansion upon the original assignment, but it does allow for a user to customize what salad they would like to make, it can however, be further improved through use of dropdowns instead of text inpput fields. You can check it out under this article.
Your salad contains:
Discovery of Javascript functions
To gain a broader lens of the capabilities and functions of JavaScript, I have gone through a JavaScript exercise list on W3schools where I learned more about things like arrays, strings, comparisons, math, conditions, switches, loops and HTML DOM.
Three.js
The first of the javascript challenges I did was a challenge to set up Three.js and create a spinning cube, which mainly involved installing node.js and some other setup things such as npx. I cannot get it to run on Hera though, so instead here is only a screenshot of the cube.
Random Number Game
I have made a two player game in which two players try guessing a random number between 1 and 15
You can check it out below here:
JavaScript Clock
As a javascript practice assignment, I have made a function clock using JavaScript, using a guide from W3 Schools, You can check out the clock by clicking the image below here:
Weather API
Using the open-meteo.com meteorology API, I created an API to check things like current weather, precipation, and windspeed.
You can check it out by clicking the image below here!