INTERACTIVE DESIGN / FINAL PROJECT - PORTFOLIO WEBSITE

24.6.2021 -8.7.2021 (week 10 - week 12) 
Phoebie Ng / 0341172 / Bachelor of Creative Media

Interactive Design / Final Project - Portfolio Website

---

INSTRUCTIONS

fig 1.1: Module Information Booklet

---

TASK

week 12 (10.6.2021)

Proposal

fig 1.1 proposal 8.7.2021

In this project, I decided to make my portfolio more minimalistic and black and white as the main color scheme of the website. 

fig 1.2 file organize

After I had done my wireframe and mood board, I start to collect my artwork and projects that I want to include in this project. I had organized them according to each page to make it easier to put on netlify later.

fig 1.3 progression

After that, I did pages of design in illustrator to have a clear picture of what my website will look like. I had also cropped and color correct my pictures to make the size and color correct. 

fig 1.3 progression

After that, I started my coding in Dreamweaver and I started with my navigation bar and footer as I need to include them on every page. 

fig 1.4 navigation bar reference

https://codepen.io/albizan/pen/mMWdWZ

Above is the reference that I used for my navigation bar.

Final Outcome

fig 1.4 final home page

fig 1.5 final about page

fig 1.6 final artwork page

fig 1.7 final project page

fig 1.8 final services page

Click here to see my portfolio website. The pictures will take some time to load as the file is too big. I had made this website responsive to phone size, so you could look through it by phone as well. 

---

REFLECTION

In this project, it was easier than Project 2 because I am more familiar with how to craft the code and find references online for my website. I am happy that I had created a portfolio myself and I think I could expand it further when I am free to make it an official website of my portfolio. That is a thing that I found myself stupid. I could actually write all the codes of the navigation bar and footer in a CSS file and attach it to every page instate of copy and paste it on every page. However, it was too late for me to do this as I just noticed this when I am creating my 4th page.