Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/patrikarvidsson/portfolio-gatsby-contentful
Portfolio on Gatsby, Tailwind and EmotionJS. Content served from Contentful.
https://github.com/patrikarvidsson/portfolio-gatsby-contentful
contentful emotionjs gatsby gatsbyjs portfolio react reactjs tailwindcss
Last synced: 2 months ago
JSON representation
Portfolio on Gatsby, Tailwind and EmotionJS. Content served from Contentful.
- Host: GitHub
- URL: https://github.com/patrikarvidsson/portfolio-gatsby-contentful
- Owner: patrikarvidsson
- License: mit
- Created: 2019-02-19T07:13:01.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-11T21:01:48.000Z (almost 2 years ago)
- Last Synced: 2024-10-01T03:24:06.699Z (3 months ago)
- Topics: contentful, emotionjs, gatsby, gatsbyjs, portfolio, react, reactjs, tailwindcss
- Language: JavaScript
- Homepage: https://patrik-contentful.netlify.com
- Size: 8.65 MB
- Stars: 25
- Watchers: 1
- Forks: 6
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Patrik Arvidsson
This project was based on [gatsby-tailwind-emotion-starter](https://github.com/muhajirframe/gatsby-tailwind-emotion-starter)
[](https://app.netlify.com/sites/portfolio-contentful/deploys)
# A similar version exists with Gatsby + Sanity
I recently rebuilt this portfolio with Sanity instead of Contentful. It's not
completely finished yet, and so far I would argue this one is more "flashy".
Sanity had some really nice things like hot-reload of content and
GraphQL-support out of the box. It also felt like build times on Netlify was
much quicker.
If you're interested you can find the new repository at [portfolio-gatsby-sanity](https://github.com/patrikarvidsson/portfolio-gatsby-sanity).
## Build environment
Build fails on Netlify with default node `8.15.1`, so make sure environment used
is matching listed versions below. Node version is set in `netlify.toml` so
deploying to Netlify should work itself out automatically.
- `node` version `11.10.1`
- `yarn` version `1.13.0`
- `npm` version `6.7.0`
## Getting up and running
Install Gatsby CLI:
```sh
npm install --global gatsby-cli
```
Clone project
```sh
git clone https://github.com/patrikarvidsson/portfolio-gatsby-contentful
```
```sh
cd portfolio-gatsby-contentful
```
Rename `.contentful.json.sample` to `.contentful.json` and update with
Contentful API details.
Make sure `graphql` queries matches your content model over at Contentful. This
repo is using a slightly modified version of the Contentful demo that is shown
when signing up.
Install packages from `portfolio-gatsby-contentful` directory.
```sh
yarn
```
## Usage
Start development server
```sh
yarn develop
```
Run format to prettify code
```sh
yarn format
```
Build site
```sh
gatsby build
```
Your built site will be in `/public`. This folder can then be uploaded to a
static host such as Netlify.
### Deploying to Netlify
`netlify.toml` handles all deployment, but you have to manually enter
environmental variables at Netlify if you want to use continuous deployment from
git. Variables to add are `CONTENTFUL_DELIVERY_TOKEN` and `CONTENTFUL_SPACE_ID`.
Install netlify-cli
```sh
npm install --global netlify-cli
```
Deploy to Netlify
``` sh
netlify deploy -p
```
## Details
### Why should I use Tailwind CSS or Emotion JS?
TailwindCSS is really great. If you used
[Tachyons](https://tachyons.io/) before, you know how amazing utility first CSS
can be compared to CSS framework like [Bootstrap](http://getbootstrap.com/).
If you haven't tried a utility first CSS before, I urge you to give it a try. Tailwind is
a great place to start, and it's more customizable than Tachyons.
But, because [Tailwind CSS](https://tailwindcss.com) gives you alot of class as
utilities the file gets bloated very quickly. Most developers solve this by
using something like [purgeCSS](https://github.com/FullHuman/purgecss) and while
it's awesome on it's own you still get into the habit of loading styles the
current page doesn't need.
[More information on how you can control file size](https://tailwindcss.com/docs/controlling-file-size)
We use [Emotion](https://github.com/emotion-js/emotion) because it's equally awesome. CSS-in-JS allows you to only load
the required styles for the particular page you're on, by defining this as
CSS-in-JS. In return, each page CSS footprint is smaller than the magic purgeCSS
can do on it's own.
### So how do I use it?
```javascript
import React from 'react'
import styled from '@emotion/styled'
const Container = styled.div`
${tw`py-8`};
`
const Text = styled.p`
${tw`bg-black text-white`};
`
const Home = () => (
I am Text component made with Tailwind CSS + EmotionJS
)
export default Home
```
Furthremore, CSS-in-JS is just awesome. [CSS in JS: Benefits, Drawbacks, and Tooling](https://objectpartners.com/2017/11/03/css-in-js-benefits-drawbacks-and-tooling/)
### Why Gatsby?
Because Gatsby is blazing fast, is highly extensible and the community is
awesome.
## Credits
Credits goes to [Muhammad Muhajir](https://github.com/muhajirdev), creator
of the boilerplate used for this portfolio.
And to [GatsbyJS](https://www.gatsbyjs.org/),
[TailwindCSS](https://tailwindcss.com/),
[Emotion](https://github.com/emotion-js/emotion),
[Contentful](https://www.contentful.com/) and [Netlify](https://www.netlify.com/).