├── .gitignore ├── LICENSE.md ├── README.md ├── docs ├── after.png ├── before.png ├── long-tag-example.png ├── tag-clamped.png └── tag-example.png ├── package.json ├── public ├── favicon.ico ├── fonts │ └── Inter-variable.woff2 ├── images │ ├── alexandru-rotariu-dog.avif │ ├── alexandru-rotariu-dog.jpg │ ├── alexandru-rotariu-dog@2x.avif │ ├── alexandru-rotariu-dog@2x.jpg │ ├── alexandru-rotariu-dog@3x.avif │ ├── alexandru-rotariu-dog@3x.jpg │ ├── andy-holmes-giraffe.avif │ ├── andy-holmes-giraffe.jpg │ ├── andy-holmes-giraffe@2x.avif │ ├── andy-holmes-giraffe@2x.jpg │ ├── andy-holmes-giraffe@3x.avif │ ├── andy-holmes-giraffe@3x.jpg │ ├── geran-de-klerk-squirrel.avif │ ├── geran-de-klerk-squirrel.jpg │ ├── geran-de-klerk-squirrel@2x.avif │ ├── geran-de-klerk-squirrel@2x.jpg │ ├── geran-de-klerk-squirrel@3x.avif │ ├── geran-de-klerk-squirrel@3x.jpg │ ├── hero-img.avif │ ├── hero-img.jpg │ ├── hero-img@2x.avif │ ├── hero-img@2x.jpg │ ├── hero-img@3x.avif │ ├── hero-img@3x.jpg │ ├── karsten-winegeart-dog.avif │ ├── karsten-winegeart-dog.jpg │ ├── karsten-winegeart-dog@2x.avif │ ├── karsten-winegeart-dog@2x.jpg │ ├── karsten-winegeart-dog@3x.avif │ ├── karsten-winegeart-dog@3x.jpg │ ├── mark-stoop-lizard.avif │ ├── mark-stoop-lizard.jpg │ ├── mark-stoop-lizard@2x.avif │ ├── mark-stoop-lizard@2x.jpg │ ├── mark-stoop-lizard@3x.avif │ ├── mark-stoop-lizard@3x.jpg │ ├── marko-blazevic-cat.avif │ ├── marko-blazevic-cat.jpg │ ├── marko-blazevic-cat@2x.avif │ ├── marko-blazevic-cat@2x.jpg │ ├── marko-blazevic-cat@3x.avif │ ├── marko-blazevic-cat@3x.jpg │ ├── scott-walsh-fox.avif │ ├── scott-walsh-fox.jpg │ ├── scott-walsh-fox@2x.avif │ ├── scott-walsh-fox@2x.jpg │ ├── scott-walsh-fox@3x.avif │ ├── scott-walsh-fox@3x.jpg │ ├── vincent-van-zalinge-bird.avif │ ├── vincent-van-zalinge-bird.jpg │ ├── vincent-van-zalinge-bird@2x.avif │ ├── vincent-van-zalinge-bird@2x.jpg │ ├── vincent-van-zalinge-bird@3x.avif │ ├── vincent-van-zalinge-bird@3x.jpg │ ├── wexor-tmg-turtle.avif │ ├── wexor-tmg-turtle.jpg │ ├── wexor-tmg-turtle@2x.avif │ ├── wexor-tmg-turtle@2x.jpg │ ├── wexor-tmg-turtle@3x.avif │ └── wexor-tmg-turtle@3x.jpg ├── index.html └── swoop.svg ├── src ├── components │ ├── App │ │ ├── App.js │ │ └── index.js │ ├── Footer │ │ ├── Footer.js │ │ └── index.js │ ├── GlobalStyles │ │ ├── GlobalStyles.js │ │ └── index.js │ ├── Header │ │ ├── Header.js │ │ └── index.js │ ├── Hero │ │ ├── Hero.js │ │ └── index.js │ ├── Logo │ │ ├── Logo.js │ │ └── index.js │ ├── MainContent │ │ ├── MainContent.js │ │ └── index.js │ ├── MaxWidthWrapper │ │ ├── MaxWidthWrapper.js │ │ └── index.js │ ├── PhotoGridItem │ │ ├── PhotoGridItem.js │ │ └── index.js │ ├── SearchInput │ │ ├── SearchInput.js │ │ └── index.js │ └── VisuallyHidden │ │ ├── VisuallyHidden.js │ │ └── index.js ├── data.js └── index.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | # Josh's Course Materials License 2 | 3 | Version 1, November 2020 4 | Copyright (c) Josh Comeau, 2020 5 | 6 | The files in this repository are meant to be used as part of a paid course, and are not intended for public distribution. They're open-source because it's the simplest form of distribution, and provides the best experience for students enrolled in the course. 7 | 8 | All are welcome to create personal copies of this repository, and modify its contents for educational use. Please experiment with the code, and see what you can build! 9 | 10 | It is forbidden to use these contents in any sort of commercial endeavour, including but not limited to: 11 | 12 | • Reselling its contents as part of a different course 13 | • Incorporating the code into a pre-existing business or project 14 | • Selling your solution to students enrolled in the course 15 | 16 | Exemptions can be made, on a case-by-case basis. Contact Josh Comeau (me@joshwcomeau.com) for more information. 17 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Unsprinkle — Module 6 workshop 2 | 3 | In this workshop, we're going to optimize and improve an existing application. 4 | 5 | Using the tricks we learned about typography and images in this module, we'll improve the performance, accessibility, and user experience for Unsprinkle, a photo-sharing application. 6 | 7 | ## Troubleshooting 8 | 9 | If you run into problems running a local development server, check out our [Troubleshooting Guide](https://courses.joshwcomeau.com/troubleshooting) on the course platform. 10 | 11 | This guide addresses the common `Digital Envelope Routine` error you may have seen. 12 | 13 | --- 14 | 15 | ## Exercise 1: Optimize fonts 16 | 17 | This project is using a variable font, but it's quite hefty! Using Google Fonts, swap it out for an optimized version. 18 | 19 | Bonus points for self-hosting the optimized font! 20 | 21 | ## Exercise 2: Improve images 22 | 23 | For a photo-heavy site like this one, we can significantly improve the user experience by optimizing the images that appear. 24 | 25 | The images in the photo grid and the hero should implement the following optimizations: 26 | 27 | 1. Serve larger images to users who use high-DPI displays. 28 | 2. Serve modern `.avif` images instead of `.jpg` images to users on supported browsers. 29 | 30 | **All of the images have already been created for you**. They follow a consistent naming pattern: 31 | 32 | ``` 33 | - photo-name.jpg 34 | - photo-name.avif 35 | - photo-name@2x.jpg 36 | - photo-name@2x.avif 37 | - photo-name@3x.jpg 38 | - photo-name@3x.avif 39 | ``` 40 | 41 | For the hero, you can hardcode these values. For the photo grid, you'll need to use some JavaScript to update the photo names. You can use the `replace` method: 42 | 43 | ```js 44 | src.replace('.jpg', '@2x.avif'); 45 | ``` 46 | 47 | One last thing: the images are a little distorted right now. This happens because our images are all the same size, but they don't share the same aspect ratio. 48 | 49 | Here's what the giraffe picture looks like by default: 50 | 51 | ![Squashed photo of a giraffe](./docs/before.png) 52 | 53 | …And here's what it should look like after your modifications: 54 | 55 | ![Regular photo of a giraffe](./docs/after.png) 56 | 57 | ## Exercise 3: Accessibility issues 58 | 59 | There are several images in this application, and none of them have been given the required "alt" attribute. 60 | 61 | Update all images so that they have appropriate alternative text. 62 | 63 | There are 11 images in total, including 2 in the `Hero.js` component. Be sure to consider the context (if you weren't able to see the page, what would you want to know about them?). 64 | 65 | ## Exercise 4: Tag overflow 66 | 67 | Each photo has associated tags, shown in small grey boxes below the image: 68 | 69 | ![Screenshot from the app, showing a dog with 3 tags below](./docs/tag-example.png) 70 | 71 | Some of these items have _very_ long tags: 72 | 73 | ![Screenshot from the app, showing a lizard with a particlarly long tag](./docs/long-tag-example.png) 74 | 75 | Update the CSS so that the tags _always fit on 1 line_. If there is too much text, the final tag should have an ellipsis (…). 76 | 77 | ![The lizard example, but with an ellipsis at the right edge, in the second label](./docs/tag-clamped.png) 78 | 79 | **This is a challenging exercise.** You'll need to tweak some of the existing CSS (Hint: Flexbox might not be the right layout mode for this) 80 | -------------------------------------------------------------------------------- /docs/after.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/unsprinkle/4088c6245d6a1d18b7f491a0aeca41b878883495/docs/after.png -------------------------------------------------------------------------------- /docs/before.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/unsprinkle/4088c6245d6a1d18b7f491a0aeca41b878883495/docs/before.png -------------------------------------------------------------------------------- /docs/long-tag-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/unsprinkle/4088c6245d6a1d18b7f491a0aeca41b878883495/docs/long-tag-example.png -------------------------------------------------------------------------------- /docs/tag-clamped.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/unsprinkle/4088c6245d6a1d18b7f491a0aeca41b878883495/docs/tag-clamped.png -------------------------------------------------------------------------------- /docs/tag-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/unsprinkle/4088c6245d6a1d18b7f491a0aeca41b878883495/docs/tag-example.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "unsprinkle", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.11.4", 7 | "@testing-library/react": "^11.1.0", 8 | "@testing-library/user-event": "^12.1.10", 9 | "react": "^17.0.2", 10 | "react-dom": "^17.0.2", 11 | "react-feather": "^2.0.9", 12 | "react-scripts": "4.0.3", 13 | "styled-components": "^5.3.0", 14 | "web-vitals": "^1.0.1" 15 | }, 16 | "scripts": { 17 | "start": "react-scripts start", 18 | "build": "react-scripts build", 19 | "test": "react-scripts test", 20 | "eject": "react-scripts eject" 21 | }, 22 | "eslintConfig": { 23 | "extends": [ 24 | "react-app", 25 | "react-app/jest" 26 | ] 27 | }, 28 | "browserslist": { 29 | "production": [ 30 | ">0.2%", 31 | "not dead", 32 | "not op_mini all" 33 | ], 34 | "development": [ 35 | "last 1 chrome version", 36 | "last 1 firefox version", 37 | "last 1 safari version" 38 | ] 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/unsprinkle/4088c6245d6a1d18b7f491a0aeca41b878883495/public/favicon.ico -------------------------------------------------------------------------------- /public/fonts/Inter-variable.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/unsprinkle/4088c6245d6a1d18b7f491a0aeca41b878883495/public/fonts/Inter-variable.woff2 -------------------------------------------------------------------------------- /public/images/alexandru-rotariu-dog.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/unsprinkle/4088c6245d6a1d18b7f491a0aeca41b878883495/public/images/alexandru-rotariu-dog.avif -------------------------------------------------------------------------------- /public/images/alexandru-rotariu-dog.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/unsprinkle/4088c6245d6a1d18b7f491a0aeca41b878883495/public/images/alexandru-rotariu-dog.jpg -------------------------------------------------------------------------------- /public/images/alexandru-rotariu-dog@2x.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/unsprinkle/4088c6245d6a1d18b7f491a0aeca41b878883495/public/images/alexandru-rotariu-dog@2x.avif -------------------------------------------------------------------------------- /public/images/alexandru-rotariu-dog@2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/unsprinkle/4088c6245d6a1d18b7f491a0aeca41b878883495/public/images/alexandru-rotariu-dog@2x.jpg -------------------------------------------------------------------------------- /public/images/alexandru-rotariu-dog@3x.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/unsprinkle/4088c6245d6a1d18b7f491a0aeca41b878883495/public/images/alexandru-rotariu-dog@3x.avif -------------------------------------------------------------------------------- /public/images/alexandru-rotariu-dog@3x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/unsprinkle/4088c6245d6a1d18b7f491a0aeca41b878883495/public/images/alexandru-rotariu-dog@3x.jpg -------------------------------------------------------------------------------- /public/images/andy-holmes-giraffe.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/unsprinkle/4088c6245d6a1d18b7f491a0aeca41b878883495/public/images/andy-holmes-giraffe.avif -------------------------------------------------------------------------------- /public/images/andy-holmes-giraffe.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/unsprinkle/4088c6245d6a1d18b7f491a0aeca41b878883495/public/images/andy-holmes-giraffe.jpg -------------------------------------------------------------------------------- /public/images/andy-holmes-giraffe@2x.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/unsprinkle/4088c6245d6a1d18b7f491a0aeca41b878883495/public/images/andy-holmes-giraffe@2x.avif -------------------------------------------------------------------------------- /public/images/andy-holmes-giraffe@2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/unsprinkle/4088c6245d6a1d18b7f491a0aeca41b878883495/public/images/andy-holmes-giraffe@2x.jpg -------------------------------------------------------------------------------- /public/images/andy-holmes-giraffe@3x.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/unsprinkle/4088c6245d6a1d18b7f491a0aeca41b878883495/public/images/andy-holmes-giraffe@3x.avif -------------------------------------------------------------------------------- /public/images/andy-holmes-giraffe@3x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/unsprinkle/4088c6245d6a1d18b7f491a0aeca41b878883495/public/images/andy-holmes-giraffe@3x.jpg -------------------------------------------------------------------------------- /public/images/geran-de-klerk-squirrel.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/unsprinkle/4088c6245d6a1d18b7f491a0aeca41b878883495/public/images/geran-de-klerk-squirrel.avif -------------------------------------------------------------------------------- /public/images/geran-de-klerk-squirrel.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/unsprinkle/4088c6245d6a1d18b7f491a0aeca41b878883495/public/images/geran-de-klerk-squirrel.jpg -------------------------------------------------------------------------------- /public/images/geran-de-klerk-squirrel@2x.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/unsprinkle/4088c6245d6a1d18b7f491a0aeca41b878883495/public/images/geran-de-klerk-squirrel@2x.avif -------------------------------------------------------------------------------- /public/images/geran-de-klerk-squirrel@2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/unsprinkle/4088c6245d6a1d18b7f491a0aeca41b878883495/public/images/geran-de-klerk-squirrel@2x.jpg -------------------------------------------------------------------------------- /public/images/geran-de-klerk-squirrel@3x.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/unsprinkle/4088c6245d6a1d18b7f491a0aeca41b878883495/public/images/geran-de-klerk-squirrel@3x.avif -------------------------------------------------------------------------------- /public/images/geran-de-klerk-squirrel@3x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/unsprinkle/4088c6245d6a1d18b7f491a0aeca41b878883495/public/images/geran-de-klerk-squirrel@3x.jpg -------------------------------------------------------------------------------- /public/images/hero-img.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/unsprinkle/4088c6245d6a1d18b7f491a0aeca41b878883495/public/images/hero-img.avif -------------------------------------------------------------------------------- /public/images/hero-img.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/unsprinkle/4088c6245d6a1d18b7f491a0aeca41b878883495/public/images/hero-img.jpg -------------------------------------------------------------------------------- /public/images/hero-img@2x.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/unsprinkle/4088c6245d6a1d18b7f491a0aeca41b878883495/public/images/hero-img@2x.avif -------------------------------------------------------------------------------- /public/images/hero-img@2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/unsprinkle/4088c6245d6a1d18b7f491a0aeca41b878883495/public/images/hero-img@2x.jpg -------------------------------------------------------------------------------- /public/images/hero-img@3x.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/unsprinkle/4088c6245d6a1d18b7f491a0aeca41b878883495/public/images/hero-img@3x.avif -------------------------------------------------------------------------------- /public/images/hero-img@3x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/unsprinkle/4088c6245d6a1d18b7f491a0aeca41b878883495/public/images/hero-img@3x.jpg -------------------------------------------------------------------------------- /public/images/karsten-winegeart-dog.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/unsprinkle/4088c6245d6a1d18b7f491a0aeca41b878883495/public/images/karsten-winegeart-dog.avif -------------------------------------------------------------------------------- /public/images/karsten-winegeart-dog.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/unsprinkle/4088c6245d6a1d18b7f491a0aeca41b878883495/public/images/karsten-winegeart-dog.jpg -------------------------------------------------------------------------------- /public/images/karsten-winegeart-dog@2x.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/unsprinkle/4088c6245d6a1d18b7f491a0aeca41b878883495/public/images/karsten-winegeart-dog@2x.avif -------------------------------------------------------------------------------- /public/images/karsten-winegeart-dog@2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/unsprinkle/4088c6245d6a1d18b7f491a0aeca41b878883495/public/images/karsten-winegeart-dog@2x.jpg -------------------------------------------------------------------------------- /public/images/karsten-winegeart-dog@3x.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/unsprinkle/4088c6245d6a1d18b7f491a0aeca41b878883495/public/images/karsten-winegeart-dog@3x.avif -------------------------------------------------------------------------------- /public/images/karsten-winegeart-dog@3x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/unsprinkle/4088c6245d6a1d18b7f491a0aeca41b878883495/public/images/karsten-winegeart-dog@3x.jpg -------------------------------------------------------------------------------- /public/images/mark-stoop-lizard.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/unsprinkle/4088c6245d6a1d18b7f491a0aeca41b878883495/public/images/mark-stoop-lizard.avif -------------------------------------------------------------------------------- /public/images/mark-stoop-lizard.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/unsprinkle/4088c6245d6a1d18b7f491a0aeca41b878883495/public/images/mark-stoop-lizard.jpg -------------------------------------------------------------------------------- /public/images/mark-stoop-lizard@2x.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/unsprinkle/4088c6245d6a1d18b7f491a0aeca41b878883495/public/images/mark-stoop-lizard@2x.avif -------------------------------------------------------------------------------- /public/images/mark-stoop-lizard@2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/unsprinkle/4088c6245d6a1d18b7f491a0aeca41b878883495/public/images/mark-stoop-lizard@2x.jpg -------------------------------------------------------------------------------- /public/images/mark-stoop-lizard@3x.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/unsprinkle/4088c6245d6a1d18b7f491a0aeca41b878883495/public/images/mark-stoop-lizard@3x.avif -------------------------------------------------------------------------------- /public/images/mark-stoop-lizard@3x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/unsprinkle/4088c6245d6a1d18b7f491a0aeca41b878883495/public/images/mark-stoop-lizard@3x.jpg -------------------------------------------------------------------------------- /public/images/marko-blazevic-cat.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/unsprinkle/4088c6245d6a1d18b7f491a0aeca41b878883495/public/images/marko-blazevic-cat.avif -------------------------------------------------------------------------------- /public/images/marko-blazevic-cat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/unsprinkle/4088c6245d6a1d18b7f491a0aeca41b878883495/public/images/marko-blazevic-cat.jpg -------------------------------------------------------------------------------- /public/images/marko-blazevic-cat@2x.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/unsprinkle/4088c6245d6a1d18b7f491a0aeca41b878883495/public/images/marko-blazevic-cat@2x.avif -------------------------------------------------------------------------------- /public/images/marko-blazevic-cat@2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/unsprinkle/4088c6245d6a1d18b7f491a0aeca41b878883495/public/images/marko-blazevic-cat@2x.jpg -------------------------------------------------------------------------------- /public/images/marko-blazevic-cat@3x.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/unsprinkle/4088c6245d6a1d18b7f491a0aeca41b878883495/public/images/marko-blazevic-cat@3x.avif -------------------------------------------------------------------------------- /public/images/marko-blazevic-cat@3x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/unsprinkle/4088c6245d6a1d18b7f491a0aeca41b878883495/public/images/marko-blazevic-cat@3x.jpg -------------------------------------------------------------------------------- /public/images/scott-walsh-fox.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/unsprinkle/4088c6245d6a1d18b7f491a0aeca41b878883495/public/images/scott-walsh-fox.avif -------------------------------------------------------------------------------- /public/images/scott-walsh-fox.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/unsprinkle/4088c6245d6a1d18b7f491a0aeca41b878883495/public/images/scott-walsh-fox.jpg -------------------------------------------------------------------------------- /public/images/scott-walsh-fox@2x.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/unsprinkle/4088c6245d6a1d18b7f491a0aeca41b878883495/public/images/scott-walsh-fox@2x.avif -------------------------------------------------------------------------------- /public/images/scott-walsh-fox@2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/unsprinkle/4088c6245d6a1d18b7f491a0aeca41b878883495/public/images/scott-walsh-fox@2x.jpg -------------------------------------------------------------------------------- /public/images/scott-walsh-fox@3x.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/unsprinkle/4088c6245d6a1d18b7f491a0aeca41b878883495/public/images/scott-walsh-fox@3x.avif -------------------------------------------------------------------------------- /public/images/scott-walsh-fox@3x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/unsprinkle/4088c6245d6a1d18b7f491a0aeca41b878883495/public/images/scott-walsh-fox@3x.jpg -------------------------------------------------------------------------------- /public/images/vincent-van-zalinge-bird.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/unsprinkle/4088c6245d6a1d18b7f491a0aeca41b878883495/public/images/vincent-van-zalinge-bird.avif -------------------------------------------------------------------------------- /public/images/vincent-van-zalinge-bird.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/unsprinkle/4088c6245d6a1d18b7f491a0aeca41b878883495/public/images/vincent-van-zalinge-bird.jpg -------------------------------------------------------------------------------- /public/images/vincent-van-zalinge-bird@2x.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/unsprinkle/4088c6245d6a1d18b7f491a0aeca41b878883495/public/images/vincent-van-zalinge-bird@2x.avif -------------------------------------------------------------------------------- /public/images/vincent-van-zalinge-bird@2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/unsprinkle/4088c6245d6a1d18b7f491a0aeca41b878883495/public/images/vincent-van-zalinge-bird@2x.jpg -------------------------------------------------------------------------------- /public/images/vincent-van-zalinge-bird@3x.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/unsprinkle/4088c6245d6a1d18b7f491a0aeca41b878883495/public/images/vincent-van-zalinge-bird@3x.avif -------------------------------------------------------------------------------- /public/images/vincent-van-zalinge-bird@3x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/unsprinkle/4088c6245d6a1d18b7f491a0aeca41b878883495/public/images/vincent-van-zalinge-bird@3x.jpg -------------------------------------------------------------------------------- /public/images/wexor-tmg-turtle.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/unsprinkle/4088c6245d6a1d18b7f491a0aeca41b878883495/public/images/wexor-tmg-turtle.avif -------------------------------------------------------------------------------- /public/images/wexor-tmg-turtle.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/unsprinkle/4088c6245d6a1d18b7f491a0aeca41b878883495/public/images/wexor-tmg-turtle.jpg -------------------------------------------------------------------------------- /public/images/wexor-tmg-turtle@2x.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/unsprinkle/4088c6245d6a1d18b7f491a0aeca41b878883495/public/images/wexor-tmg-turtle@2x.avif -------------------------------------------------------------------------------- /public/images/wexor-tmg-turtle@2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/unsprinkle/4088c6245d6a1d18b7f491a0aeca41b878883495/public/images/wexor-tmg-turtle@2x.jpg -------------------------------------------------------------------------------- /public/images/wexor-tmg-turtle@3x.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/unsprinkle/4088c6245d6a1d18b7f491a0aeca41b878883495/public/images/wexor-tmg-turtle@3x.avif -------------------------------------------------------------------------------- /public/images/wexor-tmg-turtle@3x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/css-for-js/unsprinkle/4088c6245d6a1d18b7f491a0aeca41b878883495/public/images/wexor-tmg-turtle@3x.jpg -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | Unsprinkle 11 | 20 | 21 | 22 | 23 | 26 |
27 | 28 | 29 | -------------------------------------------------------------------------------- /public/swoop.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/App/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from 'styled-components/macro'; 3 | 4 | import GlobalStyles from '../GlobalStyles'; 5 | import Header from '../Header'; 6 | import Hero from '../Hero'; 7 | import MainContent from '../MainContent'; 8 | import Footer from '../Footer'; 9 | 10 | const App = () => { 11 | return ( 12 | <> 13 | 14 |
15 | 16 |
17 | 18 | 19 |
20 |