Git Product home page Git Product logo

gatsby-folio's Introduction

An Do's Portfolio and Blogs

This project is built with Gatsby and hosted with Netlify, Check out the Live Preview.

Netlify Status

demo

๐Ÿš€ Quick start

Install nodejs and yarn

nodejs
yarn

Install the Gatsby CLI

yarn global add gatsby-cli

Install nodejs version management nvm

nvm

nvm install

or add nvm hook to your .zshrc

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"   # This loads nvm bash_completion

autoload -U add-zsh-hook
load-nvmrc() {
  local node_version="$(nvm version)"
  local nvmrc_path="$(nvm_find_nvmrc)"

  if [ -n "$nvmrc_path" ]; then
    local nvmrc_node_version=$(nvm version "$(cat "${nvmrc_path}")")

    if [ "$nvmrc_node_version" = "N/A" ]; then
      nvm install
    elif [ "$nvmrc_node_version" != "$node_version" ]; then
      nvm use
    fi
  elif [ "$node_version" != "$(nvm version default)" ]; then
    echo "Reverting to nvm default version"
    nvm use default
  fi
}
add-zsh-hook chpwd load-nvmrc
load-nvmrc

Install dependencies

yarn install

Start the development server

yarn start

๐Ÿ’ซ Production build and deployment

Build

yarn build

Preview

yarn serve

Optional deyployment to Netlify

Deploy to Netlify

๐Ÿง What's inside?

I will guide you through some parts that you need to custom your own verson of this project. For generic (Gatsby Project Structure)(https://www.gatsbyjs.org/docs/gatsby-project-structure/), please check out the link.

.
โ”œโ”€โ”€ node_modules
โ”œโ”€โ”€ src
โ”œโ”€โ”€ .gitignore
โ”œโ”€โ”€ .prettierrc
โ”œโ”€โ”€ gatsby-browser.js
โ”œโ”€โ”€ gatsby-config.js
โ”œโ”€โ”€ gatsby-node.js
โ”œโ”€โ”€ gatsby-ssr.js
โ”œโ”€โ”€ LICENSE
โ”œโ”€โ”€ package-lock.json
โ”œโ”€โ”€ package.json
โ””โ”€โ”€ README.md
  1. /dir

Explaination ---

  1. /file.js:

Explaination ---

๐ŸŒˆ Color scheme

I use gruvbox as my color scheme

Dark mode

Color Hex
bg #282828 #282828
bg0_h #1d2021 #1d2021
bg0_s #32302f #32302f
bg0 #282828 #282828
bg1 #3c3836 #3c3836
bg2 #504945 #504945
bg3 #665c54 #665c54
bg4 #7c6f64 #7c6f64
fg #ebdbb2 #ebdbb2
fg0 #fbf1c7 #fbf1c7
fg1 #ebdbb2 #ebdbb2
fg2 #d5c4a1 #d5c4a1
fg3 #bdae93 #bdae93
fg4 #a89984 #a89984
red1 #cc241d #cc241d
red2 #fb4934 #fb4934
green1 #98971a #98971a
green2 #b8bb26 #b8bb26
yellow1 #d79921 #d79921
yellow2 #fabd2f #fabd2f
blue1 #458588 #458588
blue2 #83a598 #83a598
purple1 #b16286 #b16286
purple2 #d3869b #d3869b
aqua1 #689d6a #689d6a
aqua2 #8ec07c #8ec07c
gray1 #a89984 #a89984
gray2 #928374 #928374
gray3 #928374 #928374
orange1 #d65d0e #d65d0e
orange2 #fe8019 #fe8019

Light mode

Not support yet

๐Ÿ‘“ Inspiration

This project gets heavily insprired by
typings.gg
Brittany Chiang's portfolio

๐Ÿฆ„ Forking this repo

Feel free to fork this repo and change it to whatever you want. If you want to give me a credit, please just give a link back to my website https://andodevel.me.
Happy coding ๐Ÿ’ป!

gatsby-folio's People

Contributors

andodevel avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.