University Projects

I realised that my logo and text were static on my landing page and wanted to make this more interesting. I decided that I wanted my logo to move up and down so that it would appear as though it was floating. Therefore I decided to use a CSS animation. I researched how I would do this and found a page on W3schools that explained how it would work and then edited this code until I achieved the desired effect. I used a class instead of an ID as I may want to use this effect elsewhere on my website. There are two syntax's as one is specifically for safari (uses -webkit) while the other version is the standard syntax. I named the animation logo, as this animation is being used directly on my logo however I may need to rename this if I decide to use this animation elsewhere. I set the duration for my animation to 3 seconds with a 2 second delay. The timing was set to linear as this created a smooth transition compared to the other timings I tried due to using the same sp...

As mentioned previously, I added the correct scripts to my js folder and used an apple model as a placeholder. Because I decided to use two elements which both used three.js, I needed to change the names of the variables as they were the same as the variables used for the landing page. Therefore, there was some confusion in the code and these scripts didn't work together due to the duplication of names as they were trying to use each others variables. I added a 2 after every variable/function so that there was no risk of this happening. Variables for the container, camera, scene and rendered were defined. The variable mouseX and mouseY was set to zero as a default position for the model (as the mouses position controls the view of the model). The variables windowHalfX and WindowHalfY were originally set to half of the window.innerWidth and window.innerHeight (e.g. window.innerWidth / 2) however I needed to change the size of the window being displayed as originally the model was...

I wanted my landing page to have a three.js background to make my website stand out. I decided to use one of the examples given on the three.js website. (Three.js, n.d.) Before copying the source code, I downloaded the three.js folder (Three.js, n.d.) which included all of the scripts and images from every example displayed on the site. The source code included three scripts which needed to be included in my portfolio folder as well as the texture sprite (spark.png) image. I edited the source code slightly to fit with my website and changed the file paths of the scripts and images. I removed the stats script and code so that I wouldn't have the stats at the top of my page. Then, I added an ID selector in my SCSS file which I converted into CSS so that I would be able to change where the three.js would be displayed. I set this position to absolute so that the positioning of this element was able to be set. I changed the ID name in the brackets of docu...