Art portfolio website: https://www.terezemedne.com/
Designed by Tereze Medne, the application's design embraces minimalism, featuring a playful collage like masonry layout and placing the artist's work in the foreground. With responsivenes and mobile usage in mind, the layout transfers to a single column on smaller devices further focusing on the content itself.
The application is developed using Jamstack principles with Next.js. Styled with the default Tailwind theme.
It's hosted freely on Netlify and uses Netlify CMS. ❤️
Through a customized admin panel, the CMS creates and merges a pull request with the changes. The content is publicly available, stored on the file system and the GitHub repository itself.
The HTML files are generated by the Next.js export command with the MDX content being parsed by gray-matter and loaded by next-mdx-remote packages.
A sharp script (scripts/sharp.js) is used at build time to
- load image settings from
constants/images.js - load images from
UPLOADS_DIR - create responsive JPEG and PNG images with WebP counterparts to
RESIZED_DIRusingIMAGE_WIDTHS,IMAGE_QUALITY - create HTMLImageElement
width,height, mappedsrc-setandsrcattributes toIMAGE_ATTRIBUTES_URI
Afterwards the resized images are used through an image loader (loaders/resizedLoader by default) in a custom <Image /> component.
