Skip to content

theandrewfulton/portfolio-site

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

21 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Portfolio Site

Git Repository for the Portfolio website I completed for an assignment at Coder Academy

Git Repository

https://github.com/theandrewfulton/assignment-portfolio-site

Link to Portfolio

The published portfolio site can be found here.

Purpose

The purpose of this portfolio site is to showcase my skills, projects, work history, and to a certain degree my personality to potential employers, collaborators and clients. It needs to do this in a functional, well laid out, clear and concise manner.

Target Audience

The target audience for this portfolio site are recruiters and potential employers, clients and collaborators who may be interested in engaging me professionally in some form.

A second target audience are my friends, family and colleagues who are interested in following my journey training as a web developer.

Functionality and Features

This site features responsive design sections and elements that adjust based on the size of the user's screen. This is particularly noticable in the different menu layouts for phones, tablets and computers. It is also designed to be more easily acessible to visitors with screen readers, featuring semantic HTML throughout. Site security has also been considered, with Subresource Integrity implemented for resources throughout the site.

An important note here is that Google Fonts were used for font styling throughout the portfolio site. The issue of this service not supporting SRI is well documented. In the case of this site, the fonts are imported into the stylesheet, rather than the html documents directly.

The portfolio site contains a link to my Resume as a pdf on the About page and also features Projects and Blog pages, enabling me to showcase my achievements, knowledge and experience in the future, beyond just my Resume.

Tech Stack

The portfolio is written in HTML5, with styling in SASS, which is then transpiled into CSS. Changes to the source code (along with this documentation) were tracked using Git and hosted on GitHub, with commits to the main branch automatically deployed to the live site hosted on Netlify.

Project Management

Planning this project took place Trello. You can view the Trello Board for the portfolio site here.

Here is a screenshot of this board, taken during this project: trello-screenshot

Sitemap

sitemap

Wireframes

Homepage

homepage-wireframe

About

about-wireframe

Projects

projects-wireframe

Blog

blog-wireframe

Blog Post

blog-post-wireframe

Contact

contact-wireframe

Screenshots

Home

Mobile

home-mobile

Tablet

home-tablet

PC

home-mobile

About

Mobile

about-mobile

Tablet

about-tablet

PC

about-mobile

Projects

Mobile

projects-mobile

Tablet

projects-tablet

PC

projects-mobile

Blog

Mobile

blog-mobile

Tablet

blog-tablet

PC

blog-mobile

Blog Post 5

Mobile

blog-post-5-mobile

Tablet

blog-post-5-tablet

PC

blog-post-5-mobile

Blog Post 4

Mobile

blog-post-4-mobile

Tablet

blog-post-4-tablet

PC

blog-post-4-mobile

Blog Post 3

Mobile

blog-post-3-mobile

Tablet

blog-post-3-tablet

PC

blog-post-3-mobile

Blog Post 2

Mobile

blog-post-2-mobile

Tablet

blog-post-2-tablet

PC

blog-post-2-mobile

Blog Post 1

Mobile

blog-post-1-mobile

Tablet

blog-post-1-tablet

PC

blog-post-1-mobile

Contact

Mobile

contact-mobile

Tablet

contact-tablet

PC

contact-mobile

Differences between Wireframes and Screenshots

Borders were added around various articles and sections to better visually group elements together.

Home

A Featured Project section was added. Before this was added the homepage seemed a bit empty and pointless. Since the animation grabs the users attention and has a call to action with the "Contact Me" button, it made sense to add a featured project in an attempt to further seal the deal.

Projects and Blog

It was found that having the articles narrow enough to fit two abreast on a tablet made them too narrow to comfortably navigate. If a tablet is used in landscape, two articles appear side by side.

About

Repository for my Portfolio Site

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published