https://github.com/johnnygerard/fem-galleria-slideshow-site

Galleria slideshow site
https://github.com/johnnygerard/fem-galleria-slideshow-site

angular frontend-mentor sass

Last synced: about 1 month ago
JSON representation

Galleria slideshow site

• Host: GitHub
• URL: https://github.com/johnnygerard/fem-galleria-slideshow-site
• Owner: johnnygerard
• License: mit
• Created: 2024-01-29T20:30:10.000Z (12 months ago)
• Default Branch: main
• Last Pushed: 2024-02-11T14:14:13.000Z (12 months ago)
• Last Synced: 2024-04-15T10:28:27.419Z (9 months ago)
• Topics: angular, frontend-mentor, sass
• Language: TypeScript
• Homepage: https://fem-galleria-slideshow-site-jgerard.vercel.app
• Size: 580 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

        
# Frontend Mentor | Galleria slideshow site

This is my solution to the [Galleria slideshow site challenge](https://www.frontendmentor.io/challenges/galleria-slideshow-site-tEA4pwsa6) from [Frontend Mentor](https://www.frontendmentor.io/).

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.

[![project status](https://img.shields.io/badge/status-solution%20published-success?style=for-the-badge)](https://www.frontendmentor.io/solutions/galleria-slideshow-site-zUwKdEn5YJ)

 ## Tech Stack

- Angular 17

- Sass

## Main Features

- Standalone components

- Title resolver (from URL)

- Images served from [ImageKit](https://imagekit.io/) CDN

- Image lazy loading with [NgOptimizedImage](https://angular.dev/guide/image-optimization)

- [Masonry](https://masonry.desandro.com/) layout (JavaScript library)

- Angular animations (route transitions)

- Self-hosted fonts (downloaded from [Google Fonts](https://fonts.google.com))

- Bash automation (see [PR #1](../../pull/1))

- [GitHub Actions](../../tree/main/.github/workflows):

  - Vercel deployments

  - CodeQL analysis

## Developer Tools

- VS Code

- Figma

- GitHub Copilot

## Links

 - [Website](https://fem-galleria-slideshow-site-jgerard.vercel.app) hosted with [Vercel](https://vercel.com/)

 - [Solution](https://www.frontendmentor.io/solutions/galleria-slideshow-site-zUwKdEn5YJ)

## Screenshots

### Mobile Home

![mobile home screenshot](screenshots/mobile-home.avif)

### Mobile Slideshow

![mobile slideshow screenshot](screenshots/mobile-slideshow.avif)

### Tablet Home

![tablet home screenshot](screenshots/tablet-home.avif)

### Tablet Slideshow

![tablet slideshow screenshot](screenshots/tablet-slideshow.avif)

### Desktop Home

![desktop home screenshot](screenshots/desktop-home.avif)

### Desktop Slideshow

![desktop slideshow screenshot](screenshots/desktop-slideshow.avif)

## About Frontend Mentor

[Frontend Mentor](https://www.frontendmentor.io/) challenges help you improve your coding skills by building realistic projects.

## Copyright

© 2024 Johnny Gérard