Design By Nicole
My friend Nicole Calzavara commissioned a portfolio website from me with a catch: it needed to have modular blocks for laying out pages, and be responsive and well-documented so she could easily add content and build layouts on the fly.
A page from Nicole Calzavara's website shown in dark mode
A page from Nicole Calzavara's website shown in light mode
An Image-With-Text component showing a heading, blurb and an image
An Image-With-Text component showing a heading, blurb and an image
Lume was my choice of static site generator, and Vento was the templating language I used. For the modular "blocks" I used Lume components, which work similarly to JSX components.
By referencing figma wireframes provided by Nicole, I developed each component along with thorough documentation, ensuring they would be flexible and responsive so she could use them for a variety of purposes.
Nicole's website on mobile, with a hamburger menu in the header
Nicole's website on mobile, with an open hamburger menu in the header
The resulting site feels clean, flexible in its layout capabilities, and dynamic. This was my first time creating a modular design framework from the ground up, and I had a great time coming up with all kinds of ways to make adding content to the site modular, without impeding creativity.
Some of the components from Nicole's site have actually made their way over to this one, per her permission!
Nicole's about page in darkmode, featuring a header with a portrait of Nicole
Nicole's about page in lightmode, featuring a header with a portrait of Nicole
Nicole's freelance page in lightmode, featuring a large heading and subtitle with a product image on the right
Nicole's freelance page in lightmode, showing the footer with her logo and a series of links
This project was a lot of work, but a blast all the same. Building websites has become something I love doing, and I'm eager to keep at it!