Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dmikaia/sunnyside-agency
Sunnyside agency, a Frontend Mentor challenge
https://github.com/dmikaia/sunnyside-agency
astro astrojs react reactjs-components
Last synced: 2 months ago
JSON representation
Sunnyside agency, a Frontend Mentor challenge
- Host: GitHub
- URL: https://github.com/dmikaia/sunnyside-agency
- Owner: DMikaia
- Created: 2024-08-17T05:20:35.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-08-18T18:01:23.000Z (5 months ago)
- Last Synced: 2024-11-03T07:40:39.933Z (2 months ago)
- Topics: astro, astrojs, react, reactjs-components
- Language: Astro
- Homepage: https://sunnyside-agency-sage.vercel.app
- Size: 2.13 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - Sunnyside agency landing page solution
This is a solution to the [Sunnyside agency landing page challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/sunnyside-agency-landing-page-7yVs3B6ef). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
## Table of contents
- [Overview](#overview)
- [The challenge](#the-challenge)
- [Screenshot](#screenshot)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [What I learned](#what-i-learned)
- [Useful resources](#useful-resources)
- [Author](#author)## Overview
### The challenge
Users should be able to:
- View the optimal layout for the site depending on their device's screen size
- See hover states for all interactive elements on the page### Screenshot
![hero](./screenshots//hero.png)
### Links
- Solution URL: [code-source](https://github.com/DMikaia/sunnyside-agency)
- Live Site URL: [demo](https://sunnyside-agency-sage.vercel.app/)## My process
### Built with
- [Astro](https://docs.astro.build/en/)
- [React](https://reactjs.org/) - JS library### What I learned
I've found a fun way to add svg elements and be able to change their colors without copying the whole svg. The only drawback is that it only works with a specific pattern of the element.
See the code snippets below:
```astro
{socials.map(social => (
))}
```### Useful resources
- [Stackoverflow](https://stackoverflow.com)
- [Astro docs](https://docs.astro.build/fr/getting-started/)## Author
- Frontend Mentor - [@dmikaia](https://www.frontendmentor.io/profile/dmikaia)