Bespoke Collaboration Portfolio

Nov 2022

A screenshot of Hamworks on mobile dimensions.

A screenshot of Hamworks on tablet dimensions.

A screenshot of Hamworks on desktop dimensions.

Hamworks on different screen sizes

Overview

Hamworks is a visual project that was the result of a collaboration between James Currie (3D Artist) and me. The main purpose of the website is to showcase James’ 3D renders and provide a way to contact him. You can find some more of his work here. Building this website enriched my experience with implementing Tailwind.

Website Planning

I made a Figma file to facilitate planning, which involved deciding what content to include, the website design and layout. This became the basis of our mood board compilations and general communications. Here, James created a checklist of the specific features he wanted to be added, and I created my own list of the tasks I had ongoing or completed.

A screenshot of the figma file canvas zoomed out showing various panels with writing and images for inspiration.

A screenshot of the figma file canvas showing early versions of the Hamworks introduction section and the contact form.

Screenshots of the figma file

We took inspiration from several sites:

After the initial planning James made a mockup of the website for desktop screens.

A screenshot of the mockup showing the introduction and projects.

A screenshot of the mockup showing the projects, about section, contact form and footer.

Challenges

The main challenge was understanding how to use and debug Tailwind code in React components. Using my portfolio’s Tailwind code as a reference and the Tailwind documentation, I made each section of the mockup into separate components.

A screenshot of the source code showing a React function component called Project.

Tailwind code is written inside the className prop which compiles to CSS code in the browser

I used DevTools to debug visual differences between the output CSS code and the mockup, and I saved my fixes by editing the corresponding Tailwind code.

You can change the output CSS directly inside the browser using DevTools

By using this method, I accurately translated James’ mockup into a functioning website with responsiveness on mobile and tablet devices.

A screenshot of the figma file showing 4 panels: the first panel shows the mockup, the second panel shows the website on desktop dimensions, the third panel shows the website on tablet dimensions and the fourth panel shows the website on mobile dimensions.

The leftmost panel is the mockup and the other 3 panels are screenshots of the website on different dimensions

Future Features

In the future we will be adding a blog section using a headless CMS and the ability to view James’ 3D renders within the browser with Three.js. We are also looking to add some motion graphics, animations and interactive decorations using Framer Motion. I am also going to refactor the Tailwind code using the official prettier extension.