University Projects

Mar gave us an example portfolio site which used react.js. To help me understand how react.js works I edited some of the example files which I then deployed to heroku. While looking at the about.js file, I noticed that information (Name, about, website etc.) was being pulled from a different file named resumeData. Moreover, I noticed that although the files were JavaScript files, html and CSS was being used to code the site however this code was returned and rendered differently. This was the app.js file which imported all of the files for each part of the website. Information from the resumeData file was being pulled so that the app.js file knew where this data was coming from for each part of the site. Therefore I decided to edit the information in this file and deployed this to Heroku. Deployed website to Heroku Bibliography Sudharshan Ravindran (n.d.). Sudharshan Ravindran . [Online] Available at: https://suddi.io [Accessed: 28 December 2...

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...

Mar showed us the basics of three.js and how to code simple 3D objects to move on the screen. We referenced two online scripts which included the three.js library and an orbit controls script. CSS was added so that a canvas could be defined with no margin. We then created four variables: 'scene' created a new 3D scene. 'camera' created a new perspective camera which renders a similar view to what the human eye can see and is therefore the most common camera used to render 3D objects.  The way that the camera variable is constructed is to define the camera's viewing Frustum. PerspectiveCamera( vertical field of view, aspect ratio, near plane, far plane ) (Analytical Graphics inc, 2018) 'control' created the orbit controls that is assigned to the variable camera as these controls will control the camera, meaning that when the user is using these controls the shapes would appear to move because the camera has been moved. 'rendered...

As I would like to use my portfolio site in future applications, graduate employmentetc. I wanted to add my own domain name to my heroku application as this would make finding my website easier for employers and would more professional than using the generated domain name that Heroku assigned to my app. I already owned a domain name which was being used on a more basic portfolio site that I had made previously on Adobe Portfolio. As the website I am building in Atom shows my web design/development skills this will be more impressive to employers as it is more original and shows off my personality. I originally purchased my domain name on GoDaddy.com and therefore had to change my DNS settings so that this name pointed towards my Heroku app rather than my previous website. I began by logging into Heroku and connected my domain name to my app which then gave me a DNS Target. After researching what to do next, I came across a five year old post from a user named 'mikestone14...

Once I had deployed my app to heroku, I had problems with missing files. When looking on the inspector, an arror message occured stating that specific image files could not be found. I checked the file paths, and even re-exported the file and changed the location however this didn't work and I contiued to recieve the same error. I decided to ask Mar however he didn't know the solution to the problem. After researching online, other people seemed to get the same error when there was a problem with the 'asset pipeline' however these seemed to be related to Ruby on Rails which I feel as though isn't relevant to my specific error. I felt as though the problem was something to do with the hosting and therefore decided that alternatively I could host my images online and link these images using a url - which worked successfully.

As I had decided to use a Bootstrap template I had to change the package.json file so that it successfully worked with heroku. At the beginning I kept recieving an error that the build had failed causing the application to not work online and therefore after looking through my files realised that my package.json was incorrect as my template had been set up to use gulp instead with no hosting. My original package.json file only included the 'devDependencies' and was my main reason as to why it wasn't working when I was trying to run my website through heroku.  My main error was that I didn't have a 'scripts' section that included a start which meant that node wasn't running previously. Moreover it couldn't find my app.js file as I hadn't stated where it was and was most likely not installing all of the devdepencies when typing 'npm install' in the terminal because my package.json file was incorrect causing the build to fail.  W...

When creating my website mockups, I decided that I wanted to have a 3D image of my head/shoulders on my portfolio website (either on the landing page or in the 'About Me' section) and therefore asked Zahra Abbas who studies a BA (Hons) 3D Computer Animation and Modelling at the University of Hertfordshire whether she could create this model for me as I am not familiar with working in 3D. We began with taking multiple photos of me with my hair tied up - which she said she would create afterwards in a 3D modelling software. She said she needed to photograph all around me so that when she imports these pictures into the software it would be able to extract information which would create a 3D version of me. Unfortunately there were many problems to do with the lighting and clarity of the camera. We couldn't use the autofocus on the camera as well as the flash as it would add extra lighting that would make the image look strange and inconsistent. Zahra explained that when ...

I decided to use a bootstrap template for my website as I thought this may have made elements faster to implement as the template would already be responsive. I researched the benefits of using bootstrap and according to Christopher Gimmer in his 2014 blog 'Top 5 Reasons to use Bootstrap', he stated in his conclusion that, "...there are several benefits to using Bootstrap. The framework allows for rapid, responsive development that is consistent and well supported by the development and design community." His five reasons were, "Speed of Development, Responsiveness, Consistency, Customizable, Support" which I understand and agree with and therefore believe it is beneficial to use bootstrap in this project. This specific bootstrap template was similar to my mockup design and therefore by editing the code this template could look similar to what I had designed and invisioned. Bibliography BOOTSTRAP THEMES. (2018). Boomerang – Bootstrap 4 Business ...

I decided that as well as using Invision, I would use Adobe XD to create my final website mockups as I haven't used this software before and wanted to learn more about the software. I created a series of website and mobile mockups for my one page website and a portfolio page template for when the portfolio images on the site are clicked. As I wanted these images to lead to more information about that specific project and include more images, I designed a separate page for this purpose. Portfolio page Mobile View Mobile View - Portfolio page