View My Cyber CV (2015)
 Open Project on GitHub (Source Code)

As a requirement of an Information System 101 course in 2015 at Victoria University of Wellington, we were tasked to developed a Cyber CV using basic HTML and CSS. We were asked, 'Where do you see yourself in 3 years' time?'

For this project, the objective was to use the proper HTML structure with the DOCTYPE, HEAD, body tag and nesting tags. I was also required to use external CSS page, use of lists, a navigation bar which redirects to other HTML pages, embed a video and display images.

Requirements:

Personal statement on the index page.

Interest and hobbies section.

Education and Fictional qualification section.

Fictional contact details and reference.

Personal objective:

Make a minimalistic and professional looking website.

Make a website which represents me.

Development

Phase 1 planning the Website

Colour: It would not make sense if I didn't use my favourite colour. Greenery (brighter tone of green), is often associated with nature and has a relaxation effect.
My accent colour was a lighter tone of blue because it appears to be a colour which does not only look professional but sets a calmness and people trust the colour in a business sense.
For the text, I used Black and light grey for the background to make the blue and green stand out.

Font: I used Myriad Pro which is a sans serif font because it both readable in all font sizes and appears to be contemporary.

Design: I choose to make a minimalistic and user friendly Cyber CV.

Index Page with a minimalistic UI with green primary colour.

As a part of the course we had been provided with workshop guides which made it relatively straightforward to develop the website. I had done web development previously but was for basic school projects.

Challenges:

The navigation bar with image person icon was a challenge to get it aligned with the other elements. Learning how to use an external CSS file for styling was a challenge.

For the project, We used Notepad++ as a text editor that had limited capabilities compared Visual Stuiod code. Checking for correct nesting proved to be difficult, and I often did not close tags, which was causing problems.

End Product

Note that some of the information is fictional and not real. (For example my contact details and work Experience at New World and Xero)

Index Page

Achievements Page

Note that some of the information is fictional and not real. (For example my contact details and work Experience at New World and Xero)

Work Experience Page

Interest and Hobbies Page

View My Cyber CV (2015)
 Open Project on GitHub (Source Code)