ABOUT THE PROJECT

Improving Professional
Online Presence

Instagram

This work was completed as part of my Working In A Digital World module in final year of university. The brief was to create a set of professional materials that would help prepare us for entering industry.

I developed this personal portfolio website by coding it in VS Code, focusing on clean structure, clear navigation, and a layout that effectively showcases my projects.

Alongside this, I designed a professional business card in Figma, exploring visual identity, typography, and brand consistency.

To build an online presence, I also created an Instagram page dedicated to my work, allowing me to present my projects in a visual, accessible format.

ROLE

UX/UI Design
Web Developer


CLIENT

University project


DATE

September 2025 - December 2025

Portfolio Business Card Instagram

Creative Inspiration

I drew inspiration for my portfolio site from one of my earliest mentors, Logan Brinkley, whose guidance helped shape my path in this field. Like Logan, I’m drawn to clean, minimal aesthetics that keep the user journey at the forefront of every design decision.

I also looked to the artist William Lachance’s website when developing my side navigation. This layout choice showcases a modern, unconventional approach—moving away from the typical top navigation to create something more distinctive. It also allowed me to demonstrate my coding and web-development abilities by implementing a navigation style that’s both functional and visually engaging.

Sketches

Creating initial wireframes was an essential part of shaping my portfolio site. Sketching by hand allowed me to quickly visualize the layout and make informed development decisions—especially around structural elements like flex-direction in Flexbox.

Having a clear visual reference made it easier to determine whether a row or column configuration was best suited for each section. While tools like Figma could have achieved the same outcome, pen-and-paper wireframing offered a faster and more intuitive way to iterate in the early stages.

Choice of Tools

In building my portfolio website, I chose to hand-code the entire project in Visual Studio Code using HTML and CSS. All on-page animations—such as scrolling text and slide-in transitions—were created with custom CSS animations, allowing me full control over timing, easing, and visual flow.

VS Code has become a familiar and efficient workspace for me throughout my university studies and during my client-facing project with Knowles Green. While I used GitHub to host the site, I’ve also recognised an area for improvement: incorporating clearer commit messages to better align with industry best practices in version control.

For branding elements, including my logo and business card, I used Figma to design clean, cohesive visuals that complement the overall look and feel of the site.

Style Guide

I chose Raleway as the primary typeface for my portfolio because it embodies the sleek, minimal, user-focused aesthetic I aim for in my work. As a clean and modern sans-serif font, it maintains strong readability while adding a subtle sense of refinement.

To keep the visual experience uncluttered, I intentionally limited the colour palette. Aside from black and white, the only additional colours appear in the hover states of the navigation items or negative / positive text. This restraint prevents visual overload and ensures that any colour used within my showcased projects becomes the focal point—allowing the work itself to stand out without distraction.

TYPOGRAHY

Raleway
Louiux
Aa123

COLOURS

#121212

#f7f7f7

#ffa500 - hover

#9a2424 - negative, light mode

#FF8002 - negative, dark mode

#008000 - positive

The Work In Progress...

Some early stages (October 2025), shown below is the Projects page before moving to a new layout.
As shown above, the original plan for the Projects page was to display just the title and role of each project as a bar, stacked vertically. Soon after, I decided it would be best to include an image for each project, as a glimpse of what to expect before clicking on one. As seen in the first wireframe sketch, I moved to a grid layout, implementing CSS Flexbox, with preview images of each project.

Peer Feedback

Through peer testing conducted in my seminars, I gathered feedback towards the end of November 2025 - which influenced some of my final portfolio design decisions.

Through think-aloud testing, one of my peers suggested the following:

  • Case Studies

  • - Limited depth

  • - Screenshots were confusing

  • Projects Page

  • - Preview descriptions were too long

  • Colour & Accessibility

  • - Deep red text colour on black background was hard to read

Reflection & Adaptation

As a result of this peer testing, I made the following necessary adaptations to solve the outlined issues:


  • Case Studies

  • - Limited depth → Added 'problem to solution' orientated storytelling

  • - Screenshots were confusing → Created & used mockups instead
  • Projects Page

  • - Preview descriptions were too long → Cut down to single line, easier to read
  • Colour & Accessibility

  • - Deep red text colour on black background was hard to read → Made use of an online accessibility checker to choose new colours for light & dark mode