Skip to content
Rebuilt my collection of focus tools on Gatsby instead of Jekyll
JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
config
content/projects
cypress
src
static
.eslintrc
.gitignore
LICENSE
README.md
cypress.json
gatsby-config.js
gatsby-node.js
gatsby-ssr.js
package-lock.json
package.json
renovate.json
yarn.lock

README.md

Curated collection of tools to get focused and maintain flow state

Live demo: https://focus-tools.com

Technical details

Getting Started

Check your development environment! You'll need Node.js, the Gatsby CLI and node-gyp installed. The official Gatsby website also lists two articles regarding this topic:

To copy and install this starter run this command (with "project-name" being the name of your folder you wish to install it in):

gatsby new project-name https://github.com/LekoArts/gatsby-starter-portfolio-emma
cd project-name
npm run dev

Configuration

(part of original theme tutorial by LekoArts)

You can configure your setup in config/website.js:

module.exports = {
  pathPrefix: '/', // Prefix for all links. If you deploy your site to example.com/portfolio your pathPrefix should be "portfolio"
  siteTitle: 'Emma', // Navigation and Site Title
  siteTitleAlt: 'Emma - Gatsby Starter Portfolio', // Alternative Site title for SEO
  siteHeadline: 'Creating marvelous art & blazginly fast websites', // Headline for schema.org JSONLD
  siteTitleShort: 'Emma', // short_name for manifest
  siteUrl: 'https://emma.lekoarts.de', // Domain of your site. No trailing slash!
  siteLanguage: 'en', // Language Tag on <html> element
  siteLogo: '/logo.png', // Used for SEO and manifest
  siteDescription: 'Minimalistic bright portfolio with full-width grid and large images',
  author: 'LekoArts', // Author for schema.org JSONLD

  // siteFBAppID: '123456789', // Facebook App ID - Optional
  userTwitter: '@emma', // Twitter Username
  ogSiteName: 'emma', // Facebook Site Name
  ogLanguage: 'en_US',
  googleAnalyticsID: 'UA-12345689-1',

  // Manifest and Progress color
  themeColor: '#3498DB',
  backgroundColor: '#2b2e3c',
}

You can also configure the styling of the site by editing the theme variables in config/theme.js.

import { darken } from 'polished'

const brand = {
  primary: '#cf1993',
  secondary: '#7b8acc',
}

const colors = {
  grey: '#6b6b6b',
  black: '#000',
  white: '#fff',
  bg_color: '#f3f3f3',
  body_color: '#444',
  link_color: brand.primary,
  link_color_hover: `${darken(0.15, brand.primary)}`,
}

const theme = {
  brand,
  colors,
  breakpoints: {
    xs: '400px',
    s: '600px',
    m: '900px',
    l: '1200px',
  },
  container: {
    base: '100rem',
    text: '55rem',
  },
  spacer: {
    horizontal: '2rem',
    vertical: '3rem',
  },
}

export default theme

Attention: You also need to edit static/robots.txt to include your domain!

You can’t perform that action at this time.