From dc4176c47ad09820c2da179792dc6f8bf5e2c801 Mon Sep 17 00:00:00 2001 From: Chuck Dries Date: Sat, 17 Jul 2021 14:52:42 -0700 Subject: [PATCH] add readme --- readme.md | 59 +++++++------------------------------------------------ 1 file changed, 7 insertions(+), 52 deletions(-) diff --git a/readme.md b/readme.md index 2f81819..858a770 100644 --- a/readme.md +++ b/readme.md @@ -1,54 +1,9 @@ -

- - Gatsby - -

-

- Gatsby minimal starter -

+# chuckdries.com -## ๐Ÿš€ Quick start +My personal website. +- gatsby +- tailwind +- node-vibrant +- react-helmet -1. **Create a Gatsby site.** - - Use the Gatsby CLI to create a new site, specifying the minimal starter. - - ```shell - # create a new Gatsby site using the minimal starter - npm init gatsby - ``` - -2. **Start developing.** - - Navigate into your new siteโ€™s directory and start it up. - - ```shell - cd my-gatsby-site/ - npm run develop - ``` - -3. **Open the code and start customizing!** - - Your site is now running at http://localhost:8000! - - Edit `src/pages/index.js` to see your site update in real-time! - -4. **Learn more** - - - [Documentation](https://www.gatsbyjs.com/docs/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter) - - - [Tutorials](https://www.gatsbyjs.com/tutorial/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter) - - - [Guides](https://www.gatsbyjs.com/tutorial/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter) - - - [API Reference](https://www.gatsbyjs.com/docs/api-reference/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter) - - - [Plugin Library](https://www.gatsbyjs.com/plugins?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter) - - - [Cheat Sheet](https://www.gatsbyjs.com/docs/cheat-sheet/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter) - -## ๐Ÿš€ Quick start (Gatsby Cloud) - -Deploy this starter with one click on [Gatsby Cloud](https://www.gatsbyjs.com/cloud/): - -[Deploy to Gatsby Cloud](https://www.gatsbyjs.com/dashboard/deploynow?url=https://github.com/gatsbyjs/gatsby-starter-minimal) +I use node-vibrant in the gatsby OnCreateNode hook to pull colors from the images and store them in the gatsby node structure. I query them in the client, then assign CSS custom properties with react-helmet. In my tailwind config, I define custom colors that use those properties. This gets me classes like `text-vibrant-light` that change colors to vibe with the selected image \ No newline at end of file