How I Built this Modular Portfolio Platform

Timeframe
Feb–July 2022

Role
Design & Coding

Skills Used
HTML/CSS, JS, Stack Overflow

I started coding with the goal of creating a highly-functional and responsive platform to showcase my UX/animated work. I learned with a group of friends!

I abstained from using frameworks like Bootstrap in order to understand the perspective of my developer partners who are often asked to create uniquely complex features—also, because I'm a stubborn fella who loves a challenge.

JS THEME SWITCHER

Building a design system means wielding design in a flexible and accessible manner. For recruiters working at night, I needed an easy-on-the-eyes night theme.

The button is an HTML checkbox that swaps between two themes, and the background animation is a simple animation using CSS transitions.

MODULAR DISPLAY CARDS

It was imperative for my platform to be responsive for both mobile and desktop. I developed these modular cards that showcase multiple images, animations, or lists at a variety of sizes on all devices.

HOVER.CSS LIBRARY

My vision for the platform incorporated a variety of CSS animations to give users prompt and pleasant feedback. For this, I implemented Ian Lunn's hover.css library!

PULSE EXAMPLE

FLOAT EXAMPLE

SWEEP EXAMPLE

X-RAY FEATURE

Here's a feature I created to wow recruiters—and convey a lot of contextual information without making them scroll past walls of text.

It's quite simple—just click to view notes! You can try the image on the left to see how it works.

IMAGE PRELOADER

Design portfolios by nature include heavy assets—video, high-res images, GIFs, etc. Here's a feature that isn't visual, but contributes in a huge way to the user's experience.

I implemented a quick image preloader with help from Stack Overflow that allowed users to quickly browse my portfolio without waiting for images to load.

Animation Showcase

Considering that a lot of my work is animated, I needed a way to quickly show people keyframes without making them watch an entire video. My solution was to create a module that let users hover over static images to play GIFs!

takeaways

An online portfolio is a designer's bread and butter—not only is it the easiest way to see their work, but the site itself is a reflection of the designer's eye for visual excellence and taste.

I set out to code this website because I wanted the best portfolio possible, that compromised absolutely nowhere and used a variety of features currently unavailable on major platforms like Squarespace or WordPress.

In doing so, I've learned a lot about development and presenting my work in a practical but appealing way.