*Webpage Screenshot

• Homepage screenshot:

  

• Info page screenshot:

  

• Contact page screenshot:

  ​

  ​

*Target Audience

This website is my personal one that will serve for job seeking, and currently it is for demonstration of my portfolio when at job interview to the employers. But anyone on Internet can browses my site. In the future more features and functions will be added. After all, it will always be my own website since now, and I will keep improving it. Hopefully, most people browsing my website will love it.

*Tech Stack

• HTML/CSS: used for coding for this web site.

• Trello: Project planning and following-up, baseline check.

• Github: repositories that store all the website related files and documents.

• Page Github: the portfolio website is deployed on this platform, so that every body on internet can access my website and I can do the testing of the website layout with my phone.

• Photoshop: used to modify the icons and pictures that are used in my website.

• Balsamiq Mockup 3: wireframing tool.

Design

• Design Process

1. Mood Board

   I wanted my website to showcase an environment of business, professional and also, a little bit Sifi. But most importantly, I want it to be simple and clear.

   Then I chose the pictures of space and universe that could be used for my website on pinterest. (https://www.pinterest.com.au/tjh8523/boards/)

2. Template Inspiration

   Favorite templates are here:

   1. http://www.coolsite360.com/resources/article/5a1926a3c8d27f033aa71f48/ (Objeto Rocha's works are good)
   2. http://www.xueui.cn/download/show-templates/designer-resume-psd.html (This one is showy, colorful, and video gaming interface style)
   3. https://www.ui.cn/detail/201936.html (This is my favorite style, simple but full of useful information)
   4. http://www.xueui.cn/download/free-resume-template.html (Ahmed Kadry's webpage is also clear, simple, and refreshing.)
   5. http://www.xueui.cn/download/resume-templates/ui-xihuyu.html (The standard one shows me the rules and methods for choosing fonts and colors)
   6. http://www.xueui.cn/category/download/resume-templates (Choices I may find useful)
   7. https://www.templatemonster.com/cn/wordpress-plugins/69519.html (Astro style, I am definitely into this one, which is dark and mysterious. Try to figure out how to combine this one into my own website.)

3. Fonts and color

• Fonts: (https://fonts.google.com)

  h1 title font: Fredoka One
  h2 sub-title font: Courgette body font: Kalam

• Color (The following picture is from Michael Bahari's Color Book)

  

  Main color: 5 pages, one background color for each page. (Homepage: Future Blue Info: SF Blue History: Cosmic Space Gray Portfolio: Future Beam Contact: Space Age Blue) Auxiliary color: Future Beam Decorative color: Future Beam, SF Blue

4. Logo Making

   https://www.logaster.com/v3/logo/?t=Joshua%20Tu&s=progress%20every%20day At this website, choose a few of your favorite logos, business and SiFi Movie type, tagline: progress every day

* Wireframes

*Personal logo

I used this website to create my own logo. The two on the right side was my choice when developing my own website.

*Usability considerations

Responsive design is the method I used to develop this website. This enables the webpage can fit into different screen size. The layout of the website will automatically change in accordance with the window size.

There are two break points for this page, width at 400px and 750px.

During the development of this portfolio website, accessibility was also taken into account. I used the checklist from this website (https://a11yproject.com/checklist) to enhance the readability of my website. when choosing color, color blind is also considered. Color blinded people can read my website easily.

Planning Process

*Project Plan & time line

Project was divided into 6 parts:

1. HTML/CSS Course Review (20/3/2019) And Portfolio Preparation (22/3/2019)

2. Them & Style Consideration (19/3/2019)

   • Mood Board
   • Template Inspiration
   • Color & Fonts
   • Logo making
   • Wireframing (19/3/2019~21/3/2019)
   • Them & Style Consideration (19/3/2019)

3. HTML/CSS Code Writing

   • Wireframing (20/3/2019~22/3/2019)
   • HTML/CSS Coding (21/3/2019~23/3/2019)

4. Testing & Adding More Details

   • Testing And Adjustment (21/3/2019~24/3/2019)
   • Adding More Details (23/3/2019~24/3/2019)

5. Final Check & Submission

   • Documentation (24/3/2019)

6. Presentation (25/3/2019)

*Screenshots of Trello Board

Web Devs Should Know...

• Q: Key events in the development of the Internet from the 1980s to today?

  A: 1980

• Q: Relationship between domains, web servers, DNS, and web browsers?

  A: Domain is like the name of the website we want to browse, web servers hold the domains and store the information that we want to see and use, domain is like a name tag of the servers. A DNS is like a person that can tell you which is the right direction for you to visit the website, and web browsers are the tools that can change the less readable codes into the information that everyone can read, see and listen.

• Q: One aspect of the development of internet and how it has contributed to the world today?

  A: Cloud computing, big data have greatly change the way of calculation in engineering and scientific fields With cloud computing, the distributed computers connected by internet can boost the efficiency in industry. And big data collection also depends on internet, and it surely change the way people live.