Portfolio website
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dest
src
.gitignore
Gruntfile.js
README.md
package.json
robots.txt
sitemap.xml

README.md

Portfolio

Demonstrate to prospective employers and other developers my coding experience and to showcase my projects.

Design & Planning

My goal was to design and build a portfolio site that was striking, unique and memorable while still being simple and minimal in design. My design needed give content and function priority - the design needed to support and not distract from the purpose of the site. My ultimate goal was to surprise and provide a fun experience for the viewer without overwhelming them.

Before developing a concept for my design, I explored portfolios from developers, designers and creative agencies to help decide which direction I wanted to take with the design. I also created a mood board in Pinterest to collect illustrations, designs, colour swatches, and typography examples to gain inspiration.

I was then able to start developing potential designs using mainly black/white as typography was going to be the hero of the design. Through the use of typography and colour, I wanted to produce a design that was influenced by architecture and punk.

Concept v1Concept v2

Concept v3Concept v4

Concept v5Concept v6

Final design

The design that I chose was heavily inspired by minimalism, punk/new wave-influenced graphic design and sharp lines in architecture. I wanted to capture a sense of clarity and contrast, as well as bold, clean lines through typography and using strong, well defined colours. I also draw inspiration for framing my website with thick borders from posters, books and artwork.

I needed to pick a font that created statement. I selected Big John as my primary font for it's sharp, geometric and bold lines.

My colour palette consists of French Lilac and Mine shaft. In choosing these colours, I was looking for either bright, neon colours or more muted, pastel colours to offset the starkness of the dark grey. I feel that the choice of French Lilac gives enough brightness and contrast, while also providing a dramatic effect.

Logo

Figma | Logo and Favicon

High-fidelity wireframes

Figma | Mobile

Figma | Tablet

Figma | Desktop

Style guide

Style Guide

Usability

I opted to using an hamburger style icon for the navigation menu but included the word 'menu' next to it for users to easily identify what the icon means. I plan to look at other possibly ways to not have the navigation hidden especially on mobile view.

I need to make changes to the form so when a user clicks a field the lable/placeholder is moved up just above the input field.

Development

I used Pug and Stylus and used Grunt to compile the Pug and Stylus files and to perform other tasks including generating responsive images.

Tasks

  • git init
  • Create repo on GitHub
  • Set up folder and file structure
  • Grunt - configure tasks
  • Extra small view (mobile)
  • Small view (mobile)
  • Medium view (tablet)
  • Large view (laptop)
  • Extra large view (desktop)
  • Responsive images
  • Accessibility
  • Navigation
  • Contact form in Netlify
  • Add AJAX to form
  • Gallery
  • Add hover effect to images
  • Gallery fullscreen overlay
  • Single page app (ReactJS)
  • Publish portfolio
  • Add custom domain
  • Set up SSL/HTTP2

Colour contrast - French Lilac textColour contrast - Mine shaft text

Challenges and final thoughts

Images

  • Displaying project images without taking away from design
  • Project layout
  • Display content about each project

This was one of the sore points with my design. The project screenshots included colours that clashed with the design. To overcome this, I removed the colour from the screenshots and applied a transparent layer using French Lilac from my colour scheme.

I would like to look at other possibilities for displaying the images as I feel the images are somewhat washed out which takes away from the impact from the project.

Due to time constraints, I was unable to achieve the layout I had designed without impacting the layout for the site.

Colour scheme

Restrictive colour scheme

By using a two colour scheeme it has increased the difficulty adding other elements to the website such as notifications for successfully submitting the form.

Navigation

Single page app

The fullscreen overlay for the navigation menu has issues with scrolling after selecting certain menu options. I plan to change my site to a single page app or revisit navigation completly.

Ideally I would like to avoid using a hamburger type of symbol for the menu. I have added the word 'menu' next to the symbol but would prefer to find a way to not hide navigation while retaining the integrity of the design.

Compatibility and display

Breakpoints

Due to implementation of design, I have found it challenging to ensure portfolio displays as wanted on different viewports. This is something that I will need to revisit when I continue to improve my portfolio.

Testing

I have been unable to test my portfolio on non-iOS devices.

jQuery and not JavaScript

I would have prefered to have used vanilla JavaScript over jQuery but due time constraints I went with jQuery.