Portfolio Website

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

Submission

Push your completed deliverable to GitHub, invite professor, and submit link on BrightSpace.

Due: Fri Dec 15, 2023

# 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 Tailwind CSS, or with fully custom css. Your website design should be customized, so regardless of whether you use the Tailwind CSS framework, or built 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 Tailwind CSS or custom css.
The design and layout of your website must be original. You cannot use any Tailwind CSS 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
Run a WAVE browser extension check and clear all Errors and Color Contrast Errors. Review all Alerts and clear as many as possible.
- Removing all Alerts is not a requirement, as based on your design or content it may not be possible. However, the expectation is that you review all Alerts and implement suggested changes from Alerts where possible to remove as many as possible.
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 of the page and the same footer at the bottom of the page.
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 a short 1-3 sentence paragraph detailing your skills/experience with that technology.
- Make sure when sourcing an image of the icon, you use the most up-to-date versions of the icons!
- These can be sourced from anywhere online, don't worry about using specific stock sites or citation for these icons. I recommend finding vector versions as that will allow for the most flexibility and quality.
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 Figma 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.
- Content within the cards should align consistently as we have done previously using the flex method.
- 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
The title on this page will be Contact
The form should be responsive to take proper advantage of each screen size.

# File Structure

Your file structure will vary depending on whether or not your choose to implement Tailwind CSS.

A custom css project should have this file structure:

./images
- Whatever images you include in your project
./css/main.css
contact.html
index.html
portfolio.html
.gitignore

A Tailwind CSS project should have a file structure similar to this:

./images
- Whatever images you include in your project
./dist/output.css
contact.html
index.html
portfolio.html
input.css
package.json
tailwind.config.js
yarn.lock
.gitignore

Please Note!

The Tailwind CSS file structure is subject to change as I am currently updating the lesson. I will confirm the final structure as soon as possible.

# Frequently Asked Questions

Q: Is Javascript required?

A: As this is an HTML & CSS course, JS is not required. If you wish to add your own custom JS you can, however the same rules as the previous project apply. If your JS works, that's great, but it will not improve 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 Friday December 15th at 11:59pm

Please note: This is due on the last day of classes. Because of this, no extensions can be given. Please plan accordingly.

Create a new private GitHub repository
- Name the repository mad9013-project-portfolio
- invite Professor Adam
- make live with GitHub Pages
Do not put this code/repository within the mad9013-deliverables repo
Open BS LMS and go to the Activities > Assignments page. Go to the Portfolio project and submit the URL to your Private Repo.

← Two Page Site