Project List

1. Portfolio Website

Building a portfolio website using SASS custom colour scheme, Google fonts, and Materialize CSS. Multiple web pages.

The final project is building a 3-page Responsive website with the Materialize framework. Create your OWN colour scheme to override the defaults provided by Materialize.

• You will be graded on good design too.
• You must make your OWN Materialize website. If you are caught using a commerical (or free) template for your Materialize site then you will get ZERO on this project.
• Common to Every PAGE
  • Every page must have the same navigation menu at the top
  • The nav menu lets the user navigate between Home, Portfolio, and Contact page.
  • Below the nav bar will be a large header area with a minimum height of 40% of the viewport.
  • Inside the header you need to have a round avatar which is half the height of the header and centered vertically inside the header.
  • The title in the header will be different on each page.
  • The colour scheme needs to be the same on every page.
  • The header background should always be 100% the width of the page.
  • Content should be inside a max-width container to avoid becoming too wide and having a large line-length.
  • The content areas should always be centered on the screen.
  • The only exception to the 80% width is the mobile phone layout where the content area would fill the whole width of the screen. You still need padding though.
• Page ONE (Home)
  • The home page will contain a list of at least 6 technologies that you have learned to use this semester. Each technology (eg HTML, CSS, or JS) needs an icon and at least one paragraph detailing what you can do with that technology.
  • The title on the home page will be your name.
• Page TWO (Portfolio)
  • The portfolio page will contain a list of projects that you have created and stored on Github.
  • The projects will be displayed as Materialize Card elements.
  • Each card should be the same width.
  • As the width of the page adjusts so will the number of cards shown in each row.
  • Each card needs to have a thumbnail image at the top of the Card and it should fill the whole Card width
  • Card sizes can be adjusted as well as the page resizes. Try to always make the best use of the available width.
  • The title on this page will be Portfolio
• Page THREE (Contact)
  • The third page is a form that the visitor would fill out to request that you work on a job.
  • They will need to provide their own contact info - name, email, phone
  • They will also need to provide a time frame for the work and details about the job.
  • The title on this page will be Contact for Hiring
  • The form should have different layouts that make best use of the space available.

SUBMISSION

• You will need to have a private GitHub Repo of this project.
• The repo needs to be private.
• Set the Master branch as the Github Pages branch for the repo.
• Invite your instructor to collaborate on the repo.

WARNING

Section 1: Due Wednesday 16-Dec-2020 by 11:45PM
Section 2: Due Friday 18-Dec-2020 by 11:45PM