The latest articles on Forem by Henri Fournier (@hfournier). https://forem.com/hfournier https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1487701%2F44ad0ccf-c06f-46c4-b7cb-d1066d5ad999.jpg https://forem.com/hfournier en Henri Fournier Mon, 13 May 2024 05:16:52 +0000 https://forem.com/hfournier/professional-profile-website-for-a-performer-3f1e https://forem.com/hfournier/professional-profile-website-for-a-performer-3f1e <p><em>This is a submission for the <a href="https://dev.to/challenges/netlify">Netlify Dynamic Site Challenge</a>: Visual Feast.</em></p> <h2> What I Built </h2> <p>A professional profile website for a storyteller, actor, singer, playwright, and director based in Toronto. The site features a CSS-only carousel and a masonary-style gallery showcasing performance images.</p> <h2> Demo </h2> <p><a href="https://thomas-fournier-astro.netlify.app/">https://thomas-fournier-astro.netlify.app/</a></p> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fu4tjw2z3n0fw79jue7fd.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fu4tjw2z3n0fw79jue7fd.png" alt="Masonary-style gallery" width="800" height="563"></a></p> <h2> Platform Primitives </h2> <p>Using Astro, I leveraged the Netlify Image CDN to automatically optimize all the images used in the carousel, the gallery, and the lightbox-style popup images. Despite being an image heavy website, it stills scores 100 across the board on the Lighthouse performance audit. The best part was that it required almost no extra effort... all I had to do was add the Netlify adapter to my Astro project. Bam!</p> netlifychallenge devchallenge webdev javascript