Matt Cherubino
Gallery website for Melbourne based photographer Matt Cherubino
Credits:
Awards and Recognition:
Links:
Story:
Joshua reached out with a very clean site design showcasing the work of Matt Cherubino.
Matt is an extremely talented Melbourne based photographer, whose work bridges raw adventure and grit with impactful commercial photography. (see )
The site was to be a comprehensive gallery and personal one for Matt, showcasing his work and providing insight into Matt’s personality and ethos.
Process and Tech:
CMS
This build was architected to keep everything as lightweight and performant as possible without sacrificing the visual quality of Matt’s stunning work.
I started by building out the CMS. For this build I opted for a custom CMS structure using .
With this custom studio, Matt can easily add and manage his work, including images, videos, and text content.
Frontend
was the natural choice here and given the scope of the project we can statically generate the entire site - which is a huge win for load times and SEO.
For type generation and data queries I used GraphQL (see ).
In all we end up with very small, readable components.
Here is the real code for the footer component:
---
import PortableText from "@fields/PortableText.astro";
import SanityLink from "@fields/SanityLink.astro";
import { sanityClient } from "sanity/client";
import { footerQuery } from "sanity/queries/footer";
import MonogramSvg from "@svgs/monogram.svg";
const footerQueryQuery = await sanityClient.request(footerQuery);
const footerData = footerQueryQuery.allFooter[0];
---
<footer id="footer" class:list={[{ hidden: Astro.url.pathname === "/" }]}>
<div class="monogram">
<MonogramSvg />
</div>
<div class="row">
<div class="description">
<PortableText value={footerData.textRaw} />
</div>
<div class="link">
<SanityLink linkData={footerData.button?.link}>
<span class="type-button-large">{footerData.button?.label}</span>
</SanityLink>
</div>
</div>
</footer>
<style>
footer {
margin-top: var(--s200);
padding: 0 var(--margin) var(--margin);
display: flex;
flex-direction: column;
align-items: flex-start;
color: var(--color-grey);
}
footer.hidden {
display: none;
}
.monogram {
width: 70px;
height: 32px;
}
.row {
width: 100%;
margin-top: var(--s12);
display: grid;
grid-template-columns: calc(21 * var(--column) + 20 * var(--gutter)) 1fr;
gap: var(--gutter);
align-items: end;
}
@media (max-width: 800px) {
.row {
grid-template-columns: 1fr;
gap: var(--s8);
}
}
.description {
justify-self: start;
}
.link {
justify-self: end;
}
@media (max-width: 800px) {
.link {
justify-self: center;
}
}
</style>No fancy styling frameworks here, just good old CSS and a focus on clean, minimal design. I’m not sure it gets simpler than that!
Images
Images are highly optimised using Sanity’s image pipeline, webp format, and lazy loading to ensure fast load times without sacrificing quality.
Video
Videos are hosted and streamed using , which takes care of encoding and delivery, ensuring smooth playback across devices and network conditions.
Repo
The entire codebase lives in a single pnpm monorepo, clean, tidy and shared dependencies between the frontend and CMS.
Hosting
I always opt for self-hosting where possible.
In this case I set Matt up with a Cloudflare account where he can manage his own DNS and hosting.
This way Matt has full control and ownership over his site, and he only pays for what he uses.
Outcomes:
Matt was stoked! He’s probably out in the mountains somewhere so you’ll just have to take my word for it.
The site is performing well, with fast load times and great SEO performance. It scores a cool 97-100-98-100 on Lighthouse.
And with the self-hosting and custom CMS, Matt hasn’t had to hit me up at all yet - which is always a good sign