David Armour - Portfolio Website

Last Updated - March 2019

Live site

Github Repo

Purpose

To allow for people to learn more about me and get my contact information.

To demonstrate to potential employers my web development skills and projects I have worked on.

Functionality

Can navigate to each section using the navigation menu at the top of the screen. This menu turns into a hamburger on smaller screen widths. Pressing hamburger will display a full screen navigation menu.

The top section has an interactive background that has hover and click effects.

The projects section contains a carousel that can be navigated using arrow buttons on side or by dragging with mouse or touch. Can also use keyboard by tabing to section and using arrow keys.

The contact section contains email button that will copy email to clipboard to be used however the user wishes. All other contact buttons are normal links.

Sitemap

Website is designed as a single page with each section taking up the height of the viewport.

Screenshots

Target Audience

• Potential employers
• Potential clients
• Other web developers

Tech Stack

• HTML5
• CSS3
• Javascript

Javascript libraries used:

• Jquery - allows easily targeting html elements
• Particles - background of top hero section
• Flickity - carousel used for projects section
• Clipboard - used to copy email address to clipboard

Design Process

1. Create trello board for project.
2. Construct moodboard.
3. Choose colour pallete.
4. Construct wireframes using a mobile first approach.

Moodboard

Colour Pallete

Wireframes

Wireframes for 3 sizes (mobile, tablet, desktop) were constructed using balsamiq.

Accessability Considerations

• Use of semantic html 5 tags to make navigating page easier.
• All images have alt tags.
• Project carousel is navigatable with keyboard.

Project Plan / Timeline

• Project start date: 18/09/2018

• Project end date: 24/09/2018

• Total days: 7

  Day 1

• Research other portfolios

• Create moodboard

• Choose colour pallete

• Start wireframes

  Day 2

• Finish wireframes

• Choose fonts

  Days 3 -> 5

• Code website

  Day 6

• Finish website coding

• Construct readme

• Answer short answer questions

  Day 7

• Submit project

• Present portfolio

Trello Board

A trello board was used for project management.

Short Answer Q&A

1. Describe key events in the development of the internet from the 1980s to today (max. 150 words).

• 1980: A contractor at CERN (Tim Berners-Lee) constructed ENQUIRE a system to use and share documents.
• 1982: The word "internet" used for the first time
• 1984: DNS established
• 1990: Tim Berners-Lee created the first version of HTML and constructed a web browser and server software. World Wide Web (WWW) was the program name that he used.
• March 1993: Mosaic Web Browser first released
• 1994: World Wide Web Consortium (W3C) founded by Tim Berners-Lee at MIT computer science lab.
• October 1994: Netscape Web Browser first released
• November 1995: HTML 2.0 released
• December 1995: Javascript first appeared
• April 1995: Opera Web Browser first released
• August 1995: Internet Explorer first release
• December 1996: CSS 1 first published
• January 1997: HTML 3.2 released, it is the first version developed by W3C.
• December 1997: HTML 4.0 published
• May 1998: CSS2 released
• June 1999: First draft of CSS 3 published
• June 2003: Safari web browser first released
• November 2004: Firefox first released
• December 2008: Chrome first released
• October 2014: HTML 5.0 published

2. Define and describes the relationship between fundamental aspects of the internet such as: domains, web servers, DNS, and web browsers (max. 150 words).

   Web browsers are what people use to view websites. This happens by the user typing in a domain name or clicking a link. This domain is converted to an IP address by a DNS (Domain Name Server). The request then gets sent to the web server that is located at that IP. The web server responds to the request by sending the required content: web pages, images, video etc.

   The internet is made up of a big mesh network that link all the web servers and internet capable devices. Routers are used to direct the traffic to all the network devices. TCP/IP is the protocol that allows all these devices to communicate with each other. All information is transferred inside packets that are sent with a header that contains information about what type of data is inside and where it is going.

3. Reflect on one aspect of the development of internet technologies and how it has contributed to the world today (max. 150 words).

   Google has made a huge impact in the way people browse the internet. Google was first started by Larry Page and Sergey Brin inside a Stanford university dorm. Today Google is now part of parent company Alphabet Inc. which is worth over $700 billion USD. From it's humble beginnings as a search engine it now is involved in all aspects of the tech industry.

   Google has given the ability for all people with an internet connection to easily access whatever information they require without knowing exactly where that information is stored. This has dramatically increased people's quality of life as they can make more informed decisions. Unfortunately not all data on the internet is trustworthy so it is up to the user to verify information. The search engine makes finding other sources relatively easy.