Frontend Mentor | Galleria slideshow site

This is my solution to the Galleria slideshow site challenge from Frontend Mentor.

The gallery page significantly deviates from the original design, mainly through the use of a single column size. This offers a robust and scalable solution because paintings can be reordered, added, or removed while maintaining their aspect ratio and the masonry layout.

Tech Stack

• Angular 17
• Sass

Main Features

• Standalone components
• Title resolver (from URL)
• Images served from ImageKit CDN
• Image lazy loading with NgOptimizedImage
• Masonry layout (JavaScript library)
• Angular animations (route transitions)
• Self-hosted fonts (downloaded from Google Fonts)
• Bash automation (see PR #1)
• GitHub Actions:
  • Vercel deployments
  • CodeQL analysis

Developer Tools

• VS Code
• Figma
• GitHub Copilot

Links

• Website hosted with Vercel
• Solution

Screenshots

Mobile Home

Mobile Slideshow

Tablet Home

Tablet Slideshow

Desktop Home

Desktop Slideshow

About Frontend Mentor

Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Copyright

© 2024 Johnny Gérard