Skip To Content

Portfolio Project

Jalen Cameron's Portfolio Project
GitHubLive Site

Project Overview

My portfolio was created with the intention to showcase my work as a designer and developer so far. Utilizing an agile approach, I continuously implemented and revised my designs and updated development features. I took it upon myself to study Next.js (and coupled that with Tailwind CSS) to build this site, with the intention that it would allow for future expansion and greater interactivity.

Project Tools

Next · Tailwind · Figma

Project Duration

2 Weeks

Roles

Front-End Developer · UI Designer

Branding

I started off looking up other portfolios to draw inspiration from, and even built out a mood board to come up with a style I liked. I then created a style guide to reflect the kinds of standards and consistency I wanted to display across each page of this project. It also helped to serve as a reminder for myself as to the kind of theme I wanted to have.

A section of my style guide, where I determined my primary and secondary colours

For instance, by making use of these primary colours I could add a clean and minimalistic look, making the content stand out. By incorporating my secondary palette I could add a subtle pop of color, bringing vibrancy and highlighting specific areas or elements. Overall I think this helps create a visual interest and can even guide the user's attention throughout the website.

Product Features

Responsive design is something I always try to incorporate into my designs no matter what project I'm working on. I personally believe it is crucial for providing a great user experience as it ensures that the users website adapts seamlessly to different screen sizes and devices. By optimizing the layout, content, and functionality across mobile, tablet and desktop devices, I am able to enable users to access and navigate my portfolio with ease, regardless of the device they are using, leading to improved usability, accessibility, and overall satisfaction. That's why I initially approached this project with a mixture of both low-fidelity and high-fidelity mockups.

Wireframes for both my desktop and mobile versions of my portfolio
My mobile high-fidelity mockup of my portfolio

User Interface

A nice UI element I would like to highlight is each individual project card. I wanted to try and capture the users attention while also making a strong first impression, and hopefully fostering a positive user experience in doing so. My expectation is that visitors will quickly scan through multiple projects and make informed decisions about which projects to explore further, ultimately resulting in a streamlined and efficient project selection process.

Two of my project portfolio calling cards

Get in Touch.