abdalidahir / gatsby-portfolio Goto Github PK

View Code? Open in Web Editor NEW

92.0 3.0 30.0 9.42 MB

creative personal & portfolio template based on gatsby. designed so you can showcase your work and write your blogs.

Home Page: https://gatsby-persoanl.netlify.app/

License: Other

JavaScript 92.01% CSS 0.79% TypeScript 7.19%

gatsby-site markdown gatsby github-api portfolio personal react designer ui-design

gatsby-portfolio's Introduction

Gatsby's Portfolio starter

creative personal & portfolio template based on gatsby. designed so you can showcase your work and write your blogs.

🚀 Quick start

Clone site.

Use the Gatsby CLI to create a new site, specifying the default starter.
```
git clone https://github.com/AbdaliDahir/gatsby-portfolio.git
```
Start developing.

Navigate into your new site’s directory and start it up.
```
cd gatsby-portfolio/
```
```
npm install
```
Set up environment.
```
cp .env.example .env.development
```
```
vi .env.development
```
Open the file .env.development and paste your personal GitHub access token in it. At least with repository and user read access. The file should then look like the following
```
# .env.development
GATSBY_GITHUB_API_TOKEN=b621..................
GATSBY_GOOGLE_ANALYTICS=
```
Start development server
```
gatsby develop
```
Open the source code and start editing!

Your site is now running at http://localhost:8000!

Note: You'll also see a second link: http://localhost:8000/___graphql. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the Gatsby tutorial.

🧐 What's inside?

A quick look at the top-level files and directories you'll see in a Gatsby project.

.
├── node_modules
├── src
├── static
├── .gitignore
├── .prettierrc
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── LICENSE
├── package-lock.json
├── package.json
└── README.md

/node_modules: This directory contains all of the modules of code that your project depends on (npm packages) are automatically installed.
/src: This directory will contain all of the code related to what you will see on the front-end of your site (what you see in the browser) such as your site header or a page template. src is a convention for “source code”.
.gitignore: This file tells git which files it should not track / not maintain a version history for.
.prettierrc: This is a configuration file for Prettier. Prettier is a tool to help keep the formatting of your code consistent.
gatsby-browser.js: This file is where Gatsby expects to find any usage of the Gatsby browser APIs (if any). These allow customization/extension of default Gatsby settings affecting the browser.
gatsby-config.js: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you’d like to include, etc. (Check out the config docs for more detail).
gatsby-node.js: This file is where Gatsby expects to find any usage of the Gatsby Node APIs (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process.
gatsby-ssr.js: This file is where Gatsby expects to find any usage of the Gatsby server-side rendering APIs (if any). These allow customization of default Gatsby settings affecting server-side rendering.
LICENSE: Gatsby is licensed under the MIT license.
package-lock.json (See package.json below, first). This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. (You won’t change this file directly).
package.json: A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how npm knows which packages to install for your project.
README.md: A text file containing useful reference information about your project.

🛠 Features

Gatsby v2
Uses styled-components + styled-system for styling
SEO
Responsive design
Icons from featherIcons
Netlify Deployment Friendly
fetching data from the official GitHub gatsby-source-github-api
Google Analytics integration
Easy site customization

🎓 Learning Gatsby

Looking for more guidance? Full documentation for Gatsby lives on the website. Here are some places to start:

For most developers, we recommend starting with our in-depth tutorial for creating a site with Gatsby. It starts with zero assumptions about your level of ability and walks through every step of the process.
To dive straight into code samples, head to our documentation. In particular, check out the Guides, API Reference, and Advanced Tutorials sections in the sidebar.

💫 Deploy

gatsby-portfolio's People

Contributors

Stargazers

Watchers

gatsby-portfolio's Issues

Need help with developing

Sandro@DESKTOP-P01QU4V MINGW64 ~/Desktop/code/gatsby-portfolio (master)
$ gatsby develop
success open and validate gatsby-configs - 0.119s
success load plugins - 1.847s
success onPreInit - 0.050s
info One or more of your plugins have changed since the last time you ran
Gatsby. As
a precaution, we're deleting your site's cache to ensure there's no stale data.
success initialize cache - 0.157s
success copy gatsby files - 0.112s
success onPreBootstrap - 0.025s
success createSchemaCustomization - 0.071s
success Checking for changed pages - 0.001s
success source and transform nodes - 0.555s
success building schema - 0.651s
info Total nodes: 95, SitePage nodes: 13 (use --verbose for breakdown)
success createPages - 0.076s
success Checking for changed pages - 0.000s
success createPagesStatefully - 0.102s
success update schema - 0.047s
success write out redirect data - 0.001s
success Build manifest and related icons - 0.144s
success onPostBootstrap - 0.150s
info bootstrap finished - 7.518s
success onPreExtractQueries - 0.002s

 ERROR #85923  GRAPHQL

There was an error in your GraphQL query:

Cannot query field "name" on type "GithubDataDataViewer".

If you don't expect "name" to exist on the type "GithubDataDataViewer" it is
most likely a typo.
However, if you expect "name" 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 "name" 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 at 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
"GithubDataDataViewer":
https://www.gatsbyjs.org/docs/schema-customization/#creating-type-definitions

File: src\pages\repositories.js:40:11


 ERROR #85923  GRAPHQL

There was an error in your GraphQL query:

Cannot query field "description" on type
"GithubDataDataViewerRepositoriesNodes".

If you don't expect "description" to exist on the type
"GithubDataDataViewerRepositoriesNodes" it is most likely a typo.
However, if you expect "description" 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 "description" 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 at 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
"GithubDataDataViewerRepositoriesNodes":
https://www.gatsbyjs.org/docs/schema-customization/#creating-type-definitions

File: src\pages\repositories.js:45:15


 ERROR #85923  GRAPHQL

There was an error in your GraphQL query:

Cannot query field "homepageUrl" on type
"GithubDataDataViewerRepositoriesNodes".

If you don't expect "homepageUrl" to exist on the type
"GithubDataDataViewerRepositoriesNodes" it is most likely a typo.
However, if you expect "homepageUrl" 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 "homepageUrl" 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 at 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
"GithubDataDataViewerRepositoriesNodes":
https://www.gatsbyjs.org/docs/schema-customization/#creating-type-definitions

File: src\pages\repositories.js:46:15


 ERROR #85923  GRAPHQL

There was an error in your GraphQL query:

Cannot query field "languages" on type "GithubDataDataViewerRepositoriesNodes".

If you don't expect "languages" to exist on the type
"GithubDataDataViewerRepositoriesNodes" it is most likely a typo.
However, if you expect "languages" 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 "languages" 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 at 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
"GithubDataDataViewerRepositoriesNodes":
https://www.gatsbyjs.org/docs/schema-customization/#creating-type-definitions

File: src\pages\repositories.js:51:15


 ERROR #85923  GRAPHQL

There was an error in your GraphQL query:

Cannot query field "licenseInfo" on type
"GithubDataDataViewerRepositoriesNodes".

If you don't expect "licenseInfo" to exist on the type
"GithubDataDataViewerRepositoriesNodes" it is most likely a typo.
However, if you expect "licenseInfo" 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 "licenseInfo" 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 at 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
"GithubDataDataViewerRepositoriesNodes":
https://www.gatsbyjs.org/docs/schema-customization/#creating-type-definitions

File: src\pages\repositories.js:59:15

failed extract queries from components - 0.690s
success write out requires - 0.021s
success run static queries - 0.155s - 4/4 25.78/s
success run page queries - 0.022s - 3/3 136.32/s

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed


C:\Users\Sandro\Desktop\code\gatsby-portfolio\src\pages\repositories.js
  40:11  error  Cannot query field "name" on type "GithubDataDataViewer"
graphql/template-strings

✖ 1 problem (1 error, 0 warnings)


File: src\pages\repositories.js

failed Building development bundle - 15.371s

What is wrong? I'm trying to start developing for 2 hours, please help me.

GraphQL Error

I am trying to deploy the site using netlify. I have also set the token in netlify, but I am continuously getting this below error

Any input please graphql error

https://githubmemory.com/repo/AbdaliDahir/gatsby-portfolio/issues/2?page=2
I'm running into this same error. Do you have an input for me please? This project is 2 years old and I need to make some updates

Github API errors

BTW, this is an amazing site you have here. So, I cloned the site, and added my API key. Then I deployed to netlify. I always get this error, no matter what I try.

1st, let me tell you that this is the best ever 🥇 portfolio gatsby site so far. You guys certainly deserve applause👏 for the awesome work 🥳.
I just forked your repo & deployed it . I had issues with images getting blurred.

Recommend Projects

React

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

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

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

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
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.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

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

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.