Who is my audience?

Mainly potential employers looking to hire a junior designer. I am hoping to seek a part time position this summer and hopefully a future co-op within this field. Secondary audience may be potential freelance clients for side projects to build my skills, but that is supplementary and should not be the focus

What do they need to know?

Who am I? A quick bio and introduction to my skills, areas of focus, personality, and what type of position I am looking for

What can I do? The skills, technical ability and qualifications I posses shown in my design projects. Portfolio should show what I am capable of not just say it - back up with evidence.

Why should they hire me? Selling points for myself why an employer should hire me, why I would be a good fit for the job, I have the knowledge and expertise to complete the job.

How will I stand out?

My ethos and personality (creating a website that is distinct and different than standard templates with strong ethos and personality). Also, my projects and passion for design (high end successful projects both as part of my education and outside school show my design expertise and design thinking, as well as a passion for designs that extends outside my studies).

Color Scheme

Rendered Element

CSS Selectors

SCSS Variables: ($yellow), ($yellow-shade), ($dark-grey), ($black), ($white), ($light-grey)

.bkg-yellow

.bkg-yellow-shade

.bkg-dark-grey

.bkg-light-grey

.bkg-white

.color-item-top

.color-item-bottom

Illustration

Rendered Element

Self Portrait Illustration to be used on home and about pages.

CSS Selectors

.img-100

.img-100-nb

Headings

Rendered Element:

This is a h1 heading

font: Raleway; size: 4.5rem; style: normal; weight: bold;

This is a h2 heading

font: Work Sans; size: 3rem; style: normal; weight: 500;

This is a h3 heading

font: Work Sans; size: 1.8rem; style: normal; weight: 400; color: dark-grey;

This is a h4 heading

font: Work Sans; size: 1.5rem; style: normal; weight: 700;

This is a h5 heading

font: Work Sans; size: 1.5rem; style: normal; weight: 700;

This is a p paragraph

font: Work Sans; size: 1.5rem; style: normal; weight: 400;

this is a caption class

font: Work Sans; size: 1.5rem; style: normal; weight: 400; font-variant: small-caps;

this is a txt-nav class

font: Work Sans; size: 1.5rem; style: normal; weight: 500;

This is a italics heading class

font: Work Sans; size: 1.8rem; style: italics; weight: normal;

CSS Selectors:

h1 //large bold page title

h2 //page title

h3 //small page title

h4 //grey sub-title

h5 //paragraph subtitle

p //paragraph body

.caption //seperate important paragraph & captions

.txt-nav //name item fonts

.txt-italic-subtitle //for style guide

.txt-headings-info //for style guide

Paragraph

Rendered Element:

Will take up the space of container/flex grid, consectetur adipiscing elit. At habitant vitae urna tempor, est, sed mi. This is an in-text link massa tristique. Sed varius justo, venenatis sagittis vitae tempus, justo. Scelerisque enim, purus tristique ultricies. Nunc aliquam mauris in arcu sem purus quis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. At habitant vitae urna tempor, est, sed mi. This is an in-text link massa tristique. Sed varius justo, venenatis sagittis vitae tempus, justo. Scelerisque enim, purus tristique ultricies. Nunc aliquam mauris in arcu sem purus quis.

CSS Selector:

p //paragraph body

.m-1 //paragraph body

h3 //small page title

h5 //paragraph subtitle

Heading & Paragraph

Rendered Element:

CSS Selector:

.row

.m-1

h3

p

h5

Unordered Lists

Rendered Element:

• list item a
• list item b
• list item c

CSS Selector:

ul

li

Unordered Lists

Rendered Element:

1. list item a
2. list item b
3. list item c

CSS Selector:

ol

li

In-Text Link

Rendered Element:

CSS Selector:

txt-p-link

Navigation Link

Rendered Element:

CSS Selector:

.txt-nav

.p-2

Button - Call to Action

Rendered Element:

CSS Selector:

.btn-call-action

@mixin btn($background-c, $color)

Button - Alternate Dark

Rendered Element:

CSS Selector:

.btn-dark

@mixin btn($background-c, $color)

Button - Alternate Light

Rendered Element:

CSS Selector:

.btn-light

@mixin btn($background-c, $color)

Button - Outline

Rendered Element:

CSS Selector:

.btn-outline-dark

.btn-outline-action

@mixin btn($background-c, $color)

Button - Submit & Reset

Rendered Element:

CSS Selector:

.btn-submit

.btn-reset

@mixin btn($background-c, $color)

Text input and Label

Rendered Element:

CSS Selector:

.form-group

label

input[type=text]

textarea

Radio Button

Rendered Element:

CSS Selector:

.form-group

label

input[type=radio]

Checkbox Button

Rendered Element:

CSS Selector:

.form-group

label

input[type=checkbox]

Checkbox Button

Rendered Element:

CSS Selector:

.dropdown

.btn

.btn-secondary

.dropdown-toggle

.dropdown-menu

.dropdown-item

Image as Link

Rendered Element:

CSS Selector:

.img-link

Bootstrap Grid

Rendered Element:

Navigation

Rendered Element:

CSS Selector:

.navbar

.container-fluid

.navbar-header

.txt-nav

.topnav-home

.navbar-nav

#nav-toggle

#nav-items

Navigation

Rendered Element:

CSS Selector:

.col-lg-6

.col-md-12

.mb-4

.mb-md-0

.text-uppercase

.list-unstyled

.text-center

.txt-footer

.bg-copywrite

Project Description Home

Rendered Element:

Project Name

Project Type | Design Style

One line sentence describing the project (what it is/does)

Role: What was my role within the development of the project

Goal: What was the goal of the project, outcomes, why is it important

View Project

CSS Selector:

.col-md-6

.margin-top

.margin-bottom

h2

h4

p

.btn-call-action

.img-link-project-home

Project Detials Individual

Rendered Element:

CSS Selector:

.margin-top

.col

.col-md-4

.bg-project-details

.justify-content-end