Posts

Showing posts from January 11, 2019

Ocado & Miam Miam: Reflection

There were many problems with both The Ocado Microsite project and Miam Miam’s Strength & Movement Federation Project. Mainly these were due to problems communicating with each company. It was difficult to get a fast response and had to repeatedly send follow-up e-mails so that I would be sent a response. In future, I will ask the client what the best way of communicating with them would be e.g. via LinkedIn, Slack etc. Therefore avoiding this issue. However if the client continues to be unresponsive through the communication method given to me, I will continue to send follow-up messages. Moreover I had the problem of my e-mails not being read properly or throughly enough and therefore in future, I may have to bold important statements or highlight dates using astrixes. Unfortunately due to time constraints I wasn’t able to finish either project however this was out of my control as I was constantly waiting on feedback so that each project could progress. As this project was sc

Improvements & Reflection

Image
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

Integrating Twitter

Image
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 (2019).  Time

Adding a React.JS Component

Image
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

Adding SASS

Image
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

Ocado: Invision Prototype

Due to miscommunications from Ocado, I didn't have enough time to deliver this content in the form of a microsite and therefore have created an Invision Prototype showing my design ideas and process the user would take through the site. Each box will take the user to different products which I have shown with the Tanpopo button which takes the user to Tanpopo products. Desktop This Prototype can be viewed at: https://invis.io/T9PYB2KW523#/340654530_Home Mobile This Prototype can be viewed at: https://invis.io/Z8Q0OKXEYP6#/341145499_Home