chevron_left View All Deliverables subject View Related Content

Project 2

Portfolio Website

Create a portfolio website to showcase the work you created this semester.

Introduction

You will build a 3-page responsive portfolio website featuring the work you have created this semester. You may create the website either using the Bootstrap framework, or with fully custom html and css. Your website design should be customized, so regardless of whether you use the Bootstrap framework, or build off of the patterns we created in class, you are expected to customize the layout, design, colour scheme, font, and type styles.

Project Requirements

General

• You may use either the Bootstrap Framework or custom html & css.
  • Custom CSS must be written in Sass (opens new window)
• The design and layout of your website must be original. You cannot use one of the free Bootstrap web themes, doing so will result in a zero.
• Website must be fully responsive
• Website must have real, original content. No placeholder text. Properly sourced and credited stock photography is allowed.
• You will be marked on both the quality of your code and the quality of the design.
• Add a new Google Font (opens new window)
• Create a new colour scheme
• Create a new private GitHub repository
  • Name the repository mad9013-project-portfolio
  • invite Professor Adam
  • make live with GitHub Pages

Elements required on each 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.
• The colour scheme needs to be consistent on every page.
• A consistent container should be used across the website.
• Consistent transitions on all hover/focus states

Page 1: Home Page

• A large hero banner used as a welcome to your website. It should be 100% of the viewport width and 60 - 90% of the viewport height.
• 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 your skills/experience with that technology.
• The title on the home page will be your name.

Page 2: Portfolio

• The portfolio page will contain a list of 3 or more projects that you have created and stored on Github or that can be linked to in another way (for example a link to an Xd preview).
  • More projects is not necessarily better. Display only projects you are proud of and feel properly represent your skills.
• The projects will be displayed as a card in a well organized grid.
  • 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 image at the top of the Card
  • Card sizes can be adjusted as well as the page resizes. Try to always make the best use of the available width.
  • Include a link to the project if available.
• The title on this page will be Portfolio

Page 3: 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
• The form should be responsive to take proper advantage of each screen size.

File Structure

Your files should be named and reflect the structure below:

• ./images
  • Whatever images you include in your project
• ./css/main.css (compiled from Sass)
• ./sass
  • /bootstrap (if you choose to use it)
  • /other-sass-sub-folders
  • main.scss
• contact.html
• index.html
• portfolio.html

Frequently Asked Questions

Q: Is Javascript required?

A: As this is an HTML & CSS course, JS is technically not required. However, many of the Bootstrap components require the base bootstrap.js file. Therefore, if you are using Bootstrap, I suggest you include it just to be safe. You will not lose marks for not using JS, however if you include a component that requires JS and you did not include it creating an issue with your site, you will lose marks. If you wish to add your own custom JS you can, however the same rules apply. If your JS works, that's great it will not affect your mark. However, if you write JS that causes bugs in your site taking away from the usability, you will lose marks.

Q: I want to add different/more content than is listed. Is that ok?

A: You must include all of the required elements and content listed above. Focus on completing the requirements above well first. Once you have included all of it and feel it cannot be improved, you may then add more content if you wish.

Q: Does my form need to have a submit action?

A: No, I will only be marking HTML semantics and CSS styling. However, if you decide to use this site to try and get work you should add a Formspree (opens new window) or similar service to the submission so that a potential employer could use your form.

Submission

WARNING

Due December 16th at 11:59pm

You will need to have a private GitHub Repo of this project.

You must invite your instructor arobillard to collaborate on the repo through the settings page.

Open BS LMS and go to the Activities > Assignments page. Go to the Portfolio project and submit the URL to your Private Repo.