smakosh/gatsby-theme-portfolio

Gatsby theme portfolio

Gatsby Theme Portfolio

See the live demo

Installation

To use this theme in your Gatsby sites, follow these instructions:

1. Install the theme

   npm i gatsby-theme-portfolio

   or

   yarn add gatsby-theme-portfolio

2. Add the theme to your gatsby-config.js:

   module.exports = {
     plugins: [
       {
         resolve: "gatsby-theme-portfolio",
         options: {
           contentPath: `${__dirname}/content` // the path to your markdown files
         }
       }
     ]
   }

3. There are two markdown files

   1. intro.md with content that looks like this:

    ---
    section: intro
    title: Hi there!
    description: I’m John and I’m a Wizard!
    action: Hire me
    ---

   2. about.md with content that looks like this:

    ---
    section: about
    title: Hello
    description: description
    action: Hire me
    ---

4. Create a src/gatsby-theme-portfolio/data/index.js file and pass in this object of data to override the theme's data:

    module.exports = {
      defaultTitle: "Smakosh",
      logo: "https://gatsby-theme-portfolio.smakosh.com/favicon/favicon-512.png",
      author: "John Doe",
      url: "https://gatsby-theme-portfolio.smakosh.com",
      legalName: "John Doe",
      defaultDescription: "I’m John and I’m a Backend & Devops engineer!",
      socialLinks: {
        twitter: "http://www.twitter.com/smakosh",
        github: "https://github.com/smakosh",
        linkedin: "https://www.linkedin.com/in/ismail-ghallou-630149122/",
        instagram: "https://instagram.com/smakosh19",
        youtube: "https://www.youtube.com/user/smakoshthegamer",
        google: "https://plus.google.com/u/0/+IsmailSmakoshGhallou",
        telegram: "https://t.me/smakosh",
        stackOverflow: "https://stackoverflow.com/users/story/7396786"
      },
      googleAnalyticsID: "UA-xxxxx-x",
      themeColor: "#6b63ff",
      backgroundColor: "#6b63ff",
      social: {
        facebook: "appId",
        twitter: "@smakosh"
      },
      address: {
        city: "City",
        region: "Region",
        country: "Country",
        zipCode: "ZipCode"
      },
      contact: {
        email: "email",
        phone: "phone number"
      },
      foundingDate: "2019",
      recaptcha_key: "xxxxxxxxxx"
    };

5. Create a .env.development file and put this env variable with your GitHub token as value

   GITHUB_TOKEN=xxxxxxxxxx

6. Start your site

   gatsby develop

7. You can override colors by creating a src/gatsby-theme-portfolio/tokens/colors.js file with object:

 export default {
   primary: "#009688",
   primaryOverlay: "ccf2e2",
   buttonColor: "#009688",
   buttonColorSecondary: "#009688"
 };

When deploying on Netlify, you will have to set the private key as well

SITE_RECAPTCHA_KEY=xxxxx

SITE_RECAPTCHA_SECRET=xxxxx

I highly recommend you check this repository for more details about the Google Recaptcha and Netlify forms

gatsby-theme-portfolio's Issues

Graphql Query error - Response not successful: Received status code 401

While Building the project using Gatsby build I ran into this:

There was an error in your GraphQL query:

Response not successful: Received status code 401

   1 | query cUsersLeviDesktopGatsbyPortfolionodeModulesgatsbyThemePortfoliosrccomponentslandingProjectsindexJsx3489004344 {
   2 |   github {
>  3 |     viewer {
     |     ^
   4 |       repositories(first: 8, orderBy: {field: STARGAZERS, direction: DESC}) {
   5 |         edges {
   6 |           node {
   7 |             id
   8 |             name
   9 |             url
  10 |             description
  11 |             stargazers {
  12 |               totalCount
  13 |             }

Demo graphql queries nok?

I tried to run the demo (commit: 77f4b7a). The build was ok, but seems like the GraphQL queries are not ok:

> gatsby develop
...
success update schema - 0.047s   

 ERROR #85923  GRAPHQL

There was an error in your GraphQL query:

Cannot query field "github" on type "Query".

If you don't expect "github" to exist on the type "Query" it is most likely a typo.
However, if you expect "github" to exist there are a couple of solutions to common problems:

- If you added a new data source and/or changed something inside gatsby-node.js/gatsby-config.js, please try 
a restart of your development server
- The field might be accessible in another subfield, please try your query in GraphiQL and use the GraphiQL explorer to see which fields you can query and what shape they have
- You want to optionally use your field "github" and right now it is not used anywhere. Therefore Gatsby can't infer the type and add it to the GraphQL schema. A quick fix is to add a least one entry with that field ("dummy content")

It is recommended to explicitly type your GraphQL schema if you want to use optional fields. This way you don't have to add the mentioned "dummy content". Visit our docs to learn how you can define the schema for "Query":
https://www.gatsbyjs.org/docs/schema-customization/#creating-type-definitions

File: node_modules\gatsby-theme-portfolio\src\components\landing\Projects\index.jsx:20:9

failed extract queries from components - 0.647s
...

node: v12.14.1
npm: 6.13.4
`-- [email protected]

Error: Cannot find module 'change-case'

I'm getting the following error when running gatsby develop:

Error: Cannot find module 'change-case'

The error has to do with the required plugin gatsby-mdx.