University Projects

Although I am pleased with the final version of my website found at: http://www.sofiagattuso.co.uk there are some aspects of this project that I feel as though I could improve upon. Contact Form My contact form is problematic as the submit button doesn't work as it should. The validation of the form works but nothing happens when you would like to send the form which makes me think that there may be a problem with the PHP file that came with my Bootstrap Template. The reasons why I think this is because the PHP file has an if statement that should print either a success statement or an error statement however neither of these occur. Due to my lack of knowledge of PHP I didn't manage to solve this problem. I did post this question on Stack Overflow https://stackoverflow.com/questions/54129729/how-to-fix-contact-form-which-does-not-submit?noredirect=1#comment95092674_54129729 however terms were being used that I didn't understand and due to time constraints I wasn...

I wanted to include part of my professional twitter feed at the bottom of my website (in the footer).  Therefore by searching online I found that Twitter allows you to embed your twitter feed/timeline by entering the URL of your profile. Unfortunately this produced a very long feed which was too big for my footer. Therefore I  customised the settings so that it worked with my website and auto-updates when I post a new tweet. I changed the theme to dark, limited the amount of tweets to 1, chnaged the colour of the link to my accent colour to keep consistency throughout my site and removed the footer, border and header from the tweet. This worked well with my website footer. Bibliography TWITTER PUBLISH (2019). What would you like to embed? . [Online] Available at: https://publish.twitter.com/?link_color=%232B7BB9&query=https%3A%2F%2Ftwitter.com%2FSofiaGDesign&theme=dark&widget=Timeline [Accessed: 9 January 2019] TWITTER DEVELOPER (201...

To use react.js with my website, I needed to edit my package.json file to enable this. I chnaged my script so that the package.json would start the app.js script and the react-scripts. I added react, react-dom and react-scripts as depencies so that they would be installed when using 'npm install' in the terminal. I tested my package.json script with a .json validator to make sure that what I had written was correct which would ensure less errors would potentially occur.  I added the react scripts to my HTML files to ensure that I could use react within that HTML file. I wanted to add a like button to my portfolio pages with the intention of developing this later on. I used a basic like button script found on the react.js website however I wanted to improve it's functionality and apperance. This script creates a constant variable 'e' which creates a react element. A class is createdwhich uses this component and sets the state of the button to ...

Once I had added a basic 'like' button using react.js, I wanted to use SASS so that the button design would be more consistent with my website and appear more visually appealing. The button itself also had limited functionality as once you had liked something it would say, 'You liked this' and the button wouldn't allow you to unlike it afterwards. The button itself seemed to be set as though the message is displayed when this button is pressed which switches the state of the button. I wanted to change this and therefore looked online for suggestions of what to change. I came across a react button by Arun Kumar on CodePen which allowed the button to be liked and unliked and also included a heart symbol which I thought was a really nice finishing touch to the button! I had to change minor details about the button, making sure to remove the grey background, change the padding, height, width, font size, font familiy to 'Monda' and change the colour ...

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.