Hi, my name is Free.

I craft accessible and engaging responsive web interfaces using HTML, CSS, and JavaScript.

Bridging design and development; I collaboratively deliver on-brand, performant digital experiences for the modern web.

About me

I have a passion for learning and collect hobbies like some people (me) collect records.

I'm currently rediscovering the joy of analog photography with my collection of vintage 35mm cameras. I also enjoy playing guitar, competitive BBQ , roasting my own coffee beans and pulling the perfect espresso shot to ensure perfect caffeine to code ratio.

Outside of work, I love keeping up with new technologies. Here are a few of my projects:

nextjs
typescript
tailwindcss

FlickrFolio

With my passion for photography, I wanted to share my photos with family and friends without the distraction of Flickr's social media driven interface.

I used Nextjs app router to prefetch, aggregate and cache seven separate Flickr API endpoints. Efficiently delivering images using next/image's server-side caching, automated WebP generation and lazy loading.

See it in action View on GitHub

CSS Macbook Mockup

Scrollable CSS-only mockup to showcase your websites and design.

No images (apart from your screenshot), no JavaScript, just semantic HTML5 & pure CSS. Can you find the easter egg?

tailwindcss
npm

Tailwind text clamp

Tailwind plugin to dynamically scale typographic rhythm based on screen width.

View on npm Check it out on GitHub

I'm a huge fan of using the font scales over at typescale.com to define typographic rhythm. My favourite scale for larger screens and print has always been the "augmented fourth" (1.414) but I've found that if I use this scale at smaller screen size, the rhythm scale is too large.

This plugin allows you to define different type scales at minimum and maximum tailwind screen sizes ensuring a relevant type hierarchy at any screen size.