University Projects

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