konstantinmuenster / gatsby-theme-portfolio-minimal Goto Github PK

Hi,

Firstly, thank you for this fantastic theme!

I apologize in advance if this is a really silly question. This is my first time using React or any SSG.

I'd like the button in the ProjectsSection to be redirected to a page in the same tab. Currently, it opens the correct page but is in a new tab.

The index.tsx for the ProjectsSection does have the variable externalLink={True}.
Setting this to false followed by gatsby clean and gatsby develop, does the trick, but to my understanding, changes in index.tsx will not show up when I host this on Netlify.

Button in question

What would be the solution to this?

Thanks for the help!!

I am new to Gatsby and I am confused by the plugin manifest that should allow PWA but your theme should support it also.
Should I install this plugin, or could it bring conflicts?

I'm trying to build my site for the first time and I'm encountering this error when I try to build:

failed Building static HTML for pages - 2.783s

 ERROR #95313  HTML.COMPILATION

Building static HTML failed for path "/blog/brand-new-look-same-great-arjun/"

See our docs page for more info on this error: https://gatsby.dev/debug-html


   8 |     return (
   9 |         <div className={classes.AuthorSnippet}>
> 10 |             <GatsbyImage image={avatar.childImageSharp.gatsbyImageData} alt={author} className={classes.Avatar} />
     |                                        ^
  11 |             <div className={classes.Description}>
  12 |                 <span className={classes.WrittenBy}>
  13 |                     Written By <u>{author}</u>


  WebpackError: TypeError: Cannot read properties of null (reading 'childImageSharp')

  - index.tsx:10
    [gatsby-starter-portfolio-minimal-theme]/[gatsby-theme-portfolio-minimal]/src/components/AuthorSnippet/index.tsx:10:40

  - linkedin.js:33
    [gatsby-starter-portfolio-minimal-theme]/[gatsby-plugin-gdpr-cookies]/services/linkedin.js:33:12

  - TemplateTag.js:18
    [gatsby-starter-portfolio-minimal-theme]/[common-tags]/es/TemplateTag/TemplateTag.js:18:44

  - TemplateTag.js:24
    [gatsby-starter-portfolio-minimal-theme]/[common-tags]/es/TemplateTag/TemplateTag.js:24:1

  - TemplateTag.js:27
    [gatsby-starter-portfolio-minimal-theme]/[common-tags]/es/TemplateTag/TemplateTag.js:27:1

  - TemplateTag.js:19
    [gatsby-starter-portfolio-minimal-theme]/[common-tags]/es/TemplateTag/TemplateTag.js:19:1

  - TemplateTag.js:24
    [gatsby-starter-portfolio-minimal-theme]/[common-tags]/es/TemplateTag/TemplateTag.js:24:1

  - TemplateTag.js:27
    [gatsby-starter-portfolio-minimal-theme]/[common-tags]/es/TemplateTag/TemplateTag.js:27:1

  - TemplateTag.js:24
    [gatsby-starter-portfolio-minimal-theme]/[common-tags]/es/TemplateTag/TemplateTag.js:24:1

  - TemplateTag.js:27
    [gatsby-starter-portfolio-minimal-theme]/[common-tags]/es/TemplateTag/TemplateTag.js:27:1

  - TemplateTag.js:19
    [gatsby-starter-portfolio-minimal-theme]/[common-tags]/es/TemplateTag/TemplateTag.js:19:1

  - TemplateTag.js:24
    [gatsby-starter-portfolio-minimal-theme]/[common-tags]/es/TemplateTag/TemplateTag.js:24:1

  - TemplateTag.js:27
    [gatsby-starter-portfolio-minimal-theme]/[common-tags]/es/TemplateTag/TemplateTag.js:27:1

  - TemplateTag.js:19
    [gatsby-starter-portfolio-minimal-theme]/[common-tags]/es/TemplateTag/TemplateTag.js:19:1

  - TemplateTag.js:24
    [gatsby-starter-portfolio-minimal-theme]/[common-tags]/es/TemplateTag/TemplateTag.js:24:1

The build completes successfully if I omit the articles folder. I suspect I'm getting the filepath wrong for the avatar. I've tried many different ones but I just can't get it to work.

Any ideas here? Happy to provide more information if needed.

First off, thanks a lot for creating a great theme! However, when accessing my site using a mobile device, only the first project in my projects.json appears. I have no idea why this happens as all projects appear when the site is accessed on the computer.

5:09:39 PM: build-image version: d7b3813f01c06610bc1723ff1b22446513ee7941 (focal)
5:09:39 PM: build-image tag: v4.14.3
5:09:39 PM: buildbot version: 0a9525e006898c513bdd79a097f61c04604a28eb
5:09:39 PM: Fetching cached dependencies
5:09:39 PM: Failed to fetch cache, continuing with build
5:09:39 PM: Starting to prepare the repo for build
5:09:39 PM: No cached dependencies found. Cloning fresh repo
5:09:39 PM: git clone https://github.com/robjwa20/TSR_web_app
5:09:40 PM: Preparing Git Reference refs/heads/master
5:09:40 PM: Parsing package.json dependencies
5:09:42 PM: Section completed: initializing
5:09:42 PM: Starting build script
5:09:42 PM: Installing dependencies
5:09:42 PM: Python version set to 2.7
5:09:42 PM: Downloading and installing node v16.18.1...
5:09:42 PM: Downloading https://nodejs.org/dist/v16.18.1/node-v16.18.1-linux-x64.tar.xz...
5:09:43 PM: Computing checksum with sha256sum
5:09:43 PM: Checksums matched!
5:09:45 PM: Now using node v16.18.1 (npm v8.19.2)
5:09:45 PM: Enabling node corepack
5:09:45 PM: Started restoring cached build plugins
5:09:45 PM: Finished restoring cached build plugins
5:09:45 PM: Attempting ruby version 2.7.2, read from environment
5:09:46 PM: Using ruby version 2.7.2
5:09:46 PM: Using PHP version 8.0
5:09:46 PM: No npm workspaces detected
5:09:46 PM: Started restoring cached node modules
5:09:46 PM: Finished restoring cached node modules
5:09:47 PM: Installing NPM modules using NPM version 8.19.2
5:10:01 PM: npm WARN ERESOLVE overriding peer dependency
5:10:01 PM: npm WARN While resolving: [email protected]
5:10:01 PM: npm WARN Found: [email protected]
5:10:01 PM: npm WARN node_modules/graphql
5:10:01 PM: npm WARN graphql@"^16.6.0" from [email protected]
5:10:01 PM: npm WARN node_modules/gatsby
5:10:01 PM: npm WARN gatsby@"^5.0.1" from the root project
5:10:01 PM: npm WARN 5 more (gatsby-theme-portfolio-minimal, ...)
5:10:01 PM: npm WARN 21 more (@graphql-codegen/add, @graphql-codegen/core, ...)
5:10:01 PM: npm WARN
5:10:01 PM: npm WARN Could not resolve dependency:
5:10:01 PM: npm WARN peer graphql@"^14.7.0 || ^15.3.0" from [email protected]
5:10:01 PM: npm WARN node_modules/express-graphql
5:10:01 PM: npm WARN express-graphql@"^0.12.0" from [email protected]
5:10:01 PM: npm WARN node_modules/gatsby
5:10:01 PM: npm WARN
5:10:01 PM: npm WARN Conflicting peer dependency: [email protected]
5:10:01 PM: npm WARN node_modules/graphql
5:10:01 PM: npm WARN peer graphql@"^14.7.0 || ^15.3.0" from [email protected]
5:10:01 PM: npm WARN node_modules/express-graphql
5:10:01 PM: npm WARN express-graphql@"^0.12.0" from [email protected]
5:10:01 PM: npm WARN node_modules/gatsby
5:10:05 PM: npm WARN ERESOLVE overriding peer dependency
5:10:05 PM: npm WARN While resolving: [email protected]
5:10:05 PM: npm WARN Found: [email protected]
5:10:05 PM: npm WARN node_modules/gatsby
5:10:05 PM: npm WARN gatsby@"^5.0.1" from the root project
5:10:05 PM: npm WARN 5 more (gatsby-theme-portfolio-minimal, ...)
5:10:05 PM: npm WARN
5:10:05 PM: npm WARN Could not resolve dependency:
5:10:05 PM: npm WARN peer gatsby@"^2.24.77 || ^3.0.0 || ^4.0.0" from [email protected]
5:10:05 PM: npm WARN node_modules/gatsby-plugin-gdpr-cookies
5:10:05 PM: npm WARN gatsby-plugin-gdpr-cookies@"^2.0.9" from [email protected]
5:10:05 PM: npm WARN node_modules/gatsby-theme-portfolio-minimal
5:10:05 PM: npm WARN
5:10:05 PM: npm WARN Conflicting peer dependency: [email protected]
5:10:05 PM: npm WARN node_modules/gatsby
5:10:05 PM: npm WARN peer gatsby@"^2.24.77 || ^3.0.0 || ^4.0.0" from [email protected]
5:10:05 PM: npm WARN node_modules/gatsby-plugin-gdpr-cookies
5:10:05 PM: npm WARN gatsby-plugin-gdpr-cookies@"^2.0.9" from [email protected]
5:10:05 PM: npm WARN node_modules/gatsby-theme-portfolio-minimal
5:10:05 PM: npm WARN ERESOLVE overriding peer dependency
5:10:05 PM: npm WARN While resolving: [email protected]
5:10:05 PM: npm WARN Found: [email protected]
5:10:05 PM: npm WARN node_modules/react
5:10:05 PM: npm WARN react@"^18.2.0" from the root project
5:10:05 PM: npm WARN 12 more (gatsby, react-dom, gatsby-theme-portfolio-minimal, ...)
5:10:05 PM: npm WARN
5:10:05 PM: npm WARN Could not resolve dependency:
5:10:05 PM: npm WARN peer react@"^16.13.1 || ^17.0.1" from [email protected]
5:10:05 PM: npm WARN node_modules/gatsby-plugin-gdpr-cookies
5:10:05 PM: npm WARN gatsby-plugin-gdpr-cookies@"^2.0.9" from [email protected]
5:10:05 PM: npm WARN node_modules/gatsby-theme-portfolio-minimal
5:10:05 PM: npm WARN
5:10:05 PM: npm WARN Conflicting peer dependency: [email protected]
5:10:05 PM: npm WARN node_modules/react
5:10:05 PM: npm WARN peer react@"^16.13.1 || ^17.0.1" from [email protected]
5:10:05 PM: npm WARN node_modules/gatsby-plugin-gdpr-cookies
5:10:05 PM: npm WARN gatsby-plugin-gdpr-cookies@"^2.0.9" from [email protected]
5:10:05 PM: npm WARN node_modules/gatsby-theme-portfolio-minimal
5:10:05 PM: npm WARN ERESOLVE overriding peer dependency
5:10:05 PM: npm WARN While resolving: [email protected]
5:10:05 PM: npm WARN Found: [email protected]
5:10:05 PM: npm WARN node_modules/react-dom
5:10:05 PM: npm WARN react-dom@"^18.2.0" from the root project
5:10:05 PM: npm WARN 11 more (gatsby, gatsby-theme-portfolio-minimal, ...)
5:10:05 PM: npm WARN
5:10:05 PM: npm WARN Could not resolve dependency:
5:10:05 PM: npm WARN peer react-dom@"^16.13.1 || ^17.0.1" from [email protected]
5:10:05 PM: npm WARN node_modules/gatsby-plugin-gdpr-cookies
5:10:05 PM: npm WARN gatsby-plugin-gdpr-cookies@"^2.0.9" from [email protected]
5:10:05 PM: npm WARN node_modules/gatsby-theme-portfolio-minimal
5:10:05 PM: npm WARN
5:10:05 PM: npm WARN Conflicting peer dependency: [email protected]
5:10:05 PM: npm WARN node_modules/react-dom
5:10:05 PM: npm WARN peer react-dom@"^16.13.1 || ^17.0.1" from [email protected]
5:10:05 PM: npm WARN node_modules/gatsby-plugin-gdpr-cookies
5:10:05 PM: npm WARN gatsby-plugin-gdpr-cookies@"^2.0.9" from [email protected]
5:10:05 PM: npm WARN node_modules/gatsby-theme-portfolio-minimal
5:10:05 PM: npm WARN ERESOLVE overriding peer dependency
5:10:05 PM: npm WARN While resolving: [email protected]
5:10:05 PM: npm WARN Found: [email protected]
5:10:05 PM: npm WARN node_modules/gatsby
5:10:05 PM: npm WARN gatsby@"^5.0.1" from the root project
5:10:05 PM: npm WARN 5 more (gatsby-theme-portfolio-minimal, ...)
5:10:05 PM: npm WARN
5:10:05 PM: npm WARN Could not resolve dependency:
5:10:05 PM: npm WARN peer gatsby@"^4.0.0-next" from [email protected]
5:10:05 PM: npm WARN node_modules/gatsby-plugin-manifest
5:10:05 PM: npm WARN gatsby-plugin-manifest@"^4.18.1" from [email protected]
5:10:05 PM: npm WARN node_modules/gatsby-theme-portfolio-minimal
5:10:05 PM: npm WARN
5:10:05 PM: npm WARN Conflicting peer dependency: [email protected]
5:10:05 PM: npm WARN node_modules/gatsby
5:10:05 PM: npm WARN peer gatsby@"^4.0.0-next" from [email protected]
5:10:05 PM: npm WARN node_modules/gatsby-plugin-manifest
5:10:05 PM: npm WARN gatsby-plugin-manifest@"^4.18.1" from [email protected]
5:10:05 PM: npm WARN node_modules/gatsby-theme-portfolio-minimal
5:10:05 PM: npm WARN ERESOLVE overriding peer dependency
5:10:09 PM: npm WARN ERESOLVE overriding peer dependency
5:10:09 PM: npm WARN While resolving: [email protected]
5:10:09 PM: npm WARN Found: [email protected]
5:10:09 PM: npm WARN node_modules/react
5:10:09 PM: npm WARN react@"^18.2.0" from the root project
5:10:09 PM: npm WARN 12 more (gatsby, react-dom, gatsby-theme-portfolio-minimal, ...)
5:10:09 PM: npm WARN
5:10:09 PM: npm WARN Could not resolve dependency:
5:10:09 PM: npm WARN peer react@"^16.13.1 || ^17.0.0" from [email protected]
5:10:09 PM: npm WARN node_modules/react-cookie-consent
5:10:09 PM: npm WARN react-cookie-consent@"^6.4.1" from [email protected]
5:10:09 PM: npm WARN node_modules/gatsby-theme-portfolio-minimal
5:10:09 PM: npm WARN
5:10:09 PM: npm WARN Conflicting peer dependency: [email protected]
5:10:09 PM: npm WARN node_modules/react
5:10:09 PM: npm WARN peer react@"^16.13.1 || ^17.0.0" from [email protected]
5:10:09 PM: npm WARN node_modules/react-cookie-consent
5:10:09 PM: npm WARN react-cookie-consent@"^6.4.1" from [email protected]
5:10:09 PM: npm WARN node_modules/gatsby-theme-portfolio-minimal
5:10:10 PM: npm WARN ERESOLVE overriding peer dependency
5:10:10 PM: npm WARN While resolving: [email protected]
5:10:10 PM: npm WARN Found: [email protected]
5:10:10 PM: npm WARN node_modules/react
5:10:10 PM: npm WARN react@"^18.2.0" from the root project
5:10:10 PM: npm WARN 12 more (gatsby, react-dom, gatsby-theme-portfolio-minimal, ...)
5:10:10 PM: npm WARN
5:10:10 PM: npm WARN Could not resolve dependency:
5:10:10 PM: npm WARN peer react@"0.0.0-experimental-c8b778b7f-20220825" from [email protected]
5:10:10 PM: npm WARN node_modules/react-server-dom-webpack
5:10:10 PM: npm WARN react-server-dom-webpack@"0.0.0-experimental-c8b778b7f-20220825" from [email protected]
5:10:10 PM: npm WARN node_modules/gatsby
5:10:10 PM: npm WARN
5:10:10 PM: npm WARN Conflicting peer dependency: [email protected]
5:10:10 PM: npm WARN node_modules/react
5:10:10 PM: npm WARN peer react@"0.0.0-experimental-c8b778b7f-20220825" from [email protected]
5:10:10 PM: npm WARN node_modules/react-server-dom-webpack
5:10:10 PM: npm WARN react-server-dom-webpack@"0.0.0-experimental-c8b778b7f-20220825" from [email protected]
5:10:10 PM: npm WARN node_modules/gatsby
5:10:17 PM: npm WARN EBADENGINE Unsupported engine {
5:10:17 PM: npm WARN EBADENGINE package: '[email protected]',
5:10:17 PM: npm WARN EBADENGINE required: { node: '>=18.0.0' },
5:10:17 PM: npm WARN EBADENGINE current: { node: 'v16.18.1', npm: '8.19.2' }
5:10:17 PM: npm WARN EBADENGINE }
5:10:17 PM: npm WARN EBADENGINE Unsupported engine {
5:10:17 PM: npm WARN EBADENGINE package: '[email protected]',
5:10:17 PM: npm WARN EBADENGINE required: { node: '>=18.0.0' },
5:10:17 PM: npm WARN EBADENGINE current: { node: 'v16.18.1', npm: '8.19.2' }
5:10:17 PM: npm WARN EBADENGINE }
5:10:17 PM: npm WARN EBADENGINE Unsupported engine {
5:10:17 PM: npm WARN EBADENGINE package: '[email protected]',
5:10:17 PM: npm WARN EBADENGINE required: { node: '>=18.0.0' },
5:10:17 PM: npm WARN EBADENGINE current: { node: 'v16.18.1', npm: '8.19.2' }
5:10:17 PM: npm WARN EBADENGINE }
5:10:17 PM: npm WARN EBADENGINE Unsupported engine {
5:10:17 PM: npm WARN EBADENGINE package: '[email protected]',
5:10:17 PM: npm WARN EBADENGINE required: { node: '>=18.0.0' },
5:10:17 PM: npm WARN EBADENGINE current: { node: 'v16.18.1', npm: '8.19.2' }
5:10:17 PM: npm WARN EBADENGINE }
5:10:17 PM: npm WARN EBADENGINE Unsupported engine {
5:10:17 PM: npm WARN EBADENGINE package: '[email protected]',
5:10:17 PM: npm WARN EBADENGINE required: { node: '>=18.0.0' },
5:10:17 PM: npm WARN EBADENGINE current: { node: 'v16.18.1', npm: '8.19.2' }
5:10:17 PM: npm WARN EBADENGINE }
5:10:17 PM: npm WARN EBADENGINE Unsupported engine {
5:10:17 PM: npm WARN EBADENGINE package: '[email protected]',
5:10:17 PM: npm WARN EBADENGINE required: { node: '>=18.0.0' },
5:10:17 PM: npm WARN EBADENGINE current: { node: 'v16.18.1', npm: '8.19.2' }
5:10:17 PM: npm WARN EBADENGINE }
5:10:17 PM: npm WARN EBADENGINE Unsupported engine {
5:10:17 PM: npm WARN EBADENGINE package: '[email protected]',
5:10:17 PM: npm WARN EBADENGINE required: { node: '>=18.0.0' },
5:10:17 PM: npm WARN EBADENGINE current: { node: 'v16.18.1', npm: '8.19.2' }
5:10:17 PM: npm WARN EBADENGINE }
5:10:17 PM: npm WARN EBADENGINE Unsupported engine {
5:10:17 PM: npm WARN EBADENGINE package: '[email protected]',
5:10:17 PM: npm WARN EBADENGINE required: { node: '>=18.0.0' },
5:10:17 PM: npm WARN EBADENGINE current: { node: 'v16.18.1', npm: '8.19.2' }
5:10:17 PM: npm WARN EBADENGINE }
5:10:17 PM: npm WARN EBADENGINE Unsupported engine {
5:10:17 PM: npm WARN EBADENGINE package: '[email protected]',
5:10:17 PM: npm WARN EBADENGINE required: { node: '>=18.0.0' },
5:10:17 PM: npm WARN EBADENGINE current: { node: 'v16.18.1', npm: '8.19.2' }
5:10:17 PM: npm WARN EBADENGINE }
5:10:17 PM: npm WARN EBADENGINE Unsupported engine {
5:10:17 PM: npm WARN EBADENGINE package: '[email protected]',
5:10:17 PM: npm WARN EBADENGINE required: { node: '>=18.0.0' },
5:10:17 PM: npm WARN EBADENGINE current: { node: 'v16.18.1', npm: '8.19.2' }
5:10:17 PM: npm WARN EBADENGINE }
5:10:17 PM: npm WARN EBADENGINE Unsupported engine {
5:10:17 PM: npm WARN EBADENGINE package: '[email protected]',
5:10:17 PM: npm WARN EBADENGINE required: { node: '>=18.0.0' },
5:10:17 PM: npm WARN EBADENGINE current: { node: 'v16.18.1', npm: '8.19.2' }
5:10:17 PM: npm WARN EBADENGINE }
5:10:17 PM: npm WARN EBADENGINE Unsupported engine {
5:10:17 PM: npm WARN EBADENGINE package: '[email protected]',
5:10:17 PM: npm WARN EBADENGINE required: { node: '>=18.0.0' },
5:10:17 PM: npm WARN EBADENGINE current: { node: 'v16.18.1', npm: '8.19.2' }
5:10:17 PM: npm WARN EBADENGINE }
5:10:17 PM: npm WARN EBADENGINE Unsupported engine {
5:10:17 PM: npm WARN EBADENGINE package: '[email protected]',
5:10:17 PM: npm WARN EBADENGINE required: { node: '>=18.0.0' },
5:10:17 PM: npm WARN EBADENGINE current: { node: 'v16.18.1', npm: '8.19.2' }
5:10:17 PM: npm WARN EBADENGINE }
5:10:17 PM: npm WARN EBADENGINE Unsupported engine {
5:10:17 PM: npm WARN EBADENGINE package: '[email protected]',
5:10:17 PM: npm WARN EBADENGINE required: { node: '>=18.0.0' },
5:10:17 PM: npm WARN EBADENGINE current: { node: 'v16.18.1', npm: '8.19.2' }
5:10:17 PM: npm WARN EBADENGINE }
5:10:17 PM: npm WARN EBADENGINE Unsupported engine {
5:10:17 PM: npm WARN EBADENGINE package: '[email protected]',
5:10:17 PM: npm WARN EBADENGINE required: { node: '>=18.0.0' },
5:10:17 PM: npm WARN EBADENGINE current: { node: 'v16.18.1', npm: '8.19.2' }
5:10:17 PM: npm WARN EBADENGINE }
5:10:17 PM: npm WARN EBADENGINE Unsupported engine {
5:10:17 PM: npm WARN EBADENGINE package: '[email protected]',
5:10:17 PM: npm WARN EBADENGINE required: { node: '>=18.0.0' },
5:10:17 PM: npm WARN EBADENGINE current: { node: 'v16.18.1', npm: '8.19.2' }
5:10:17 PM: npm WARN EBADENGINE }
5:10:17 PM: npm WARN EBADENGINE Unsupported engine {
5:10:17 PM: npm WARN EBADENGINE package: '[email protected]',
5:10:17 PM: npm WARN EBADENGINE required: { node: '>=18.0.0' },
5:10:17 PM: npm WARN EBADENGINE current: { node: 'v16.18.1', npm: '8.19.2' }
5:10:17 PM: npm WARN EBADENGINE }
5:10:17 PM: npm WARN EBADENGINE Unsupported engine {
5:10:17 PM: npm WARN EBADENGINE package: '[email protected]',
5:10:17 PM: npm WARN EBADENGINE required: { node: '>=18.0.0' },
5:10:17 PM: npm WARN EBADENGINE current: { node: 'v16.18.1', npm: '8.19.2' }
5:10:17 PM: npm WARN EBADENGINE }
5:10:17 PM: npm WARN EBADENGINE Unsupported engine {
5:10:17 PM: npm WARN EBADENGINE package: '@gatsbyjs/[email protected]',
5:10:17 PM: npm WARN EBADENGINE required: { node: '>=18.0.0', parcel: '2.x' },
5:10:17 PM: npm WARN EBADENGINE current: { node: 'v16.18.1', npm: '8.19.2' }
5:10:17 PM: npm WARN EBADENGINE }
5:10:17 PM: npm WARN EBADENGINE Unsupported engine {
5:10:17 PM: npm WARN EBADENGINE package: '[email protected]',
5:10:17 PM: npm WARN EBADENGINE required: { node: '>=18.0.0' },
5:10:17 PM: npm WARN EBADENGINE current: { node: 'v16.18.1', npm: '8.19.2' }
5:10:17 PM: npm WARN EBADENGINE }
5:10:17 PM: npm WARN EBADENGINE Unsupported engine {
5:10:17 PM: npm WARN EBADENGINE package: '[email protected]',
5:10:17 PM: npm WARN EBADENGINE required: { node: '>=18.0.0' },
5:10:17 PM: npm WARN EBADENGINE current: { node: 'v16.18.1', npm: '8.19.2' }
5:10:17 PM: npm WARN EBADENGINE }
5:10:17 PM: npm WARN EBADENGINE Unsupported engine {
5:10:17 PM: npm WARN EBADENGINE package: '[email protected]',
5:10:17 PM: npm WARN EBADENGINE required: { node: '>=18.0.0' },
5:10:17 PM: npm WARN EBADENGINE current: { node: 'v16.18.1', npm: '8.19.2' }
5:10:17 PM: npm WARN EBADENGINE }
5:10:17 PM: npm WARN EBADENGINE Unsupported engine {
5:10:17 PM: npm WARN EBADENGINE package: '[email protected]',
5:10:17 PM: npm WARN EBADENGINE required: { node: '>=18.0.0' },
5:10:17 PM: npm WARN EBADENGINE current: { node: 'v16.18.1', npm: '8.19.2' }
5:10:17 PM: npm WARN EBADENGINE }
5:10:17 PM: npm WARN EBADENGINE Unsupported engine {
5:10:17 PM: npm WARN EBADENGINE package: '[email protected]',
5:10:17 PM: npm WARN EBADENGINE required: { node: '>=18.0.0' },
5:10:17 PM: npm WARN EBADENGINE current: { node: 'v16.18.1', npm: '8.19.2' }
5:10:17 PM: npm WARN EBADENGINE }
5:10:17 PM: npm WARN EBADENGINE Unsupported engine {
5:10:17 PM: npm WARN EBADENGINE package: '[email protected]',
5:10:17 PM: npm WARN EBADENGINE required: { node: '>=18.0.0' },
5:10:17 PM: npm WARN EBADENGINE current: { node: 'v16.18.1', npm: '8.19.2' }
5:10:17 PM: npm WARN EBADENGINE }
5:10:17 PM: npm WARN EBADENGINE Unsupported engine {
5:10:17 PM: npm WARN EBADENGINE package: '[email protected]',
5:10:17 PM: npm WARN EBADENGINE required: { node: '>=18.0.0' },
5:10:17 PM: npm WARN EBADENGINE current: { node: 'v16.18.1', npm: '8.19.2' }
5:10:17 PM: npm WARN EBADENGINE }
5:10:17 PM: npm WARN EBADENGINE Unsupported engine {
5:10:17 PM: npm WARN EBADENGINE package: '[email protected]',
5:10:17 PM: npm WARN EBADENGINE required: { node: '>=18.0.0' },
5:10:17 PM: npm WARN EBADENGINE current: { node: 'v16.18.1', npm: '8.19.2' }
5:10:17 PM: npm WARN EBADENGINE }
5:10:17 PM: npm WARN EBADENGINE Unsupported engine {
5:10:17 PM: npm WARN EBADENGINE package: '[email protected]',
5:10:17 PM: npm WARN EBADENGINE required: { node: '>=18.0.0' },
5:10:17 PM: npm WARN EBADENGINE current: { node: 'v16.18.1', npm: '8.19.2' }
5:10:17 PM: npm WARN EBADENGINE }
5:10:17 PM: npm WARN EBADENGINE Unsupported engine {
5:10:17 PM: npm WARN EBADENGINE package: '[email protected]',
5:10:17 PM: npm WARN EBADENGINE required: { node: '>=18.0.0' },
5:10:17 PM: npm WARN EBADENGINE current: { node: 'v16.18.1', npm: '8.19.2' }
5:10:17 PM: npm WARN EBADENGINE }
5:10:21 PM: npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
5:10:21 PM: npm WARN deprecated @hapi/[email protected]: Moved to 'npm install @sideway/address'
5:10:21 PM: npm WARN deprecated [email protected]: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
5:10:21 PM: npm WARN deprecated [email protected]: No longer maintained. Use lru-cache version 7.6 or higher, and provide an asynchronous fetchMethod option.
5:10:21 PM: npm WARN deprecated @hapi/[email protected]: Switch to 'npm install joi'
5:10:25 PM: npm WARN deprecated [email protected]: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.
5:10:25 PM: npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
5:10:25 PM: npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
5:10:28 PM: npm WARN deprecated [email protected]: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.
5:10:35 PM: added 1561 packages, and audited 1562 packages in 48s
5:10:35 PM: 307 packages are looking for funding
5:10:35 PM: run npm fund for details
5:10:35 PM: 3 high severity vulnerabilities
5:10:35 PM: To address all issues (including breaking changes), run:
5:10:35 PM: npm audit fix --force
5:10:35 PM: Run npm audit for details.
5:10:35 PM: NPM modules installed
5:10:35 PM: Creating package sha
5:10:35 PM: Started restoring cached go cache
5:10:35 PM: Finished restoring cached go cache
5:10:35 PM: Installing Go version 1.17 (requested 1.17)
5:10:45 PM: unset GOOS;
5:10:45 PM: unset GOARCH;
5:10:45 PM: export GOROOT='/opt/buildhome/.gimme/versions/go1.17.linux.amd64';
5:10:45 PM: export PATH="/opt/buildhome/.gimme/versions/go1.17.linux.amd64/bin:${PATH}";
5:10:45 PM: go version >&2;
5:10:45 PM: export GIMME_ENV="/opt/buildhome/.gimme/env/go1.17.linux.amd64.env"
5:10:46 PM: go version go1.17 linux/amd64
5:10:46 PM: Detected 1 framework(s)
5:10:46 PM: "gatsby" at version "5.0.1"
5:10:46 PM: Installing missing commands
5:10:46 PM: Verify run directory
5:10:47 PM: ​
5:10:47 PM: ────────────────────────────────────────────────────────────────
5:10:47 PM: Netlify Build
5:10:47 PM: ────────────────────────────────────────────────────────────────
5:10:47 PM: ​
5:10:47 PM: ❯ Version
5:10:47 PM: @netlify/build 28.1.13
5:10:47 PM: ​
5:10:47 PM: ❯ Flags
5:10:47 PM: baseRelDir: true
5:10:47 PM: buildId: 6372764f846cfc0c76916673
5:10:47 PM: deployId: 6372764f846cfc0c76916675
5:10:47 PM: ​
5:10:47 PM: ❯ Current directory
5:10:47 PM: /opt/build/repo
5:10:47 PM: ​
5:10:47 PM: ❯ Config file
5:10:47 PM: No config file was defined: using default values.
5:10:47 PM: ​
5:10:47 PM: ❯ Context
5:10:47 PM: production
5:10:47 PM: ​
5:10:47 PM: ❯ Installing plugins
5:10:47 PM: - @netlify/[email protected]
5:10:53 PM: ​
5:10:53 PM: ❯ Loading plugins
5:10:53 PM: - @netlify/[email protected] from Netlify app
5:10:54 PM: ​
5:10:54 PM: ────────────────────────────────────────────────────────────────
5:10:54 PM: 1. @netlify/plugin-gatsby (onPreBuild event)
5:10:54 PM: ────────────────────────────────────────────────────────────────
5:10:54 PM: ​
5:10:54 PM: No Gatsby cache found. Building fresh.
5:10:54 PM: Please install gatsby-plugin-netlify and enable it in your gatsby-config.js. https://www.gatsbyjs.com/plugins/gatsby-plugin-netlify/
5:10:54 PM: ​
5:10:54 PM: (@netlify/plugin-gatsby onPreBuild completed in 7ms)
5:10:54 PM: ​
5:10:54 PM: ────────────────────────────────────────────────────────────────
5:10:54 PM: 2. Build command from Netlify app
5:10:54 PM: ────────────────────────────────────────────────────────────────
5:10:54 PM: ​
5:10:54 PM: $ npm run build
5:10:54 PM: > [email protected] build
5:10:56 PM: Creating deploy upload records
5:10:54 PM: > gatsby build
5:10:56 PM: Failed during stage 'building site': Build script returned non-zero exit code: 2 (https://ntl.fyi/exit-code-2)
5:10:55 PM: error Gatsby requires Node.js 18.0.0 or higher (you have v16.18.1).
5:10:55 PM: Upgrade Node to the latest stable release: https://gatsby.dev/upgrading-node-js
5:10:55 PM: ​
5:10:55 PM: ────────────────────────────────────────────────────────────────
5:10:55 PM: "build.command" failed
5:10:55 PM: ────────────────────────────────────────────────────────────────
5:10:55 PM: ​
5:10:55 PM: Error message
5:10:55 PM: Command failed with exit code 1: npm run build (https://ntl.fyi/exit-code-1)
5:10:55 PM: ​
5:10:55 PM: Error location
5:10:55 PM: In Build command from Netlify app:
5:10:55 PM: npm run build
5:10:55 PM: ​
5:10:55 PM: Resolved config
5:10:55 PM: build:
5:10:55 PM: command: npm run build
5:10:55 PM: commandOrigin: ui
5:10:55 PM: publish: /opt/build/repo/public
5:10:55 PM: publishOrigin: ui
5:10:55 PM: plugins:
5:10:55 PM: - inputs: {}
5:10:55 PM: origin: ui
5:10:55 PM: package: '@netlify/plugin-gatsby'
5:10:55 PM: Caching artifacts
5:10:55 PM: Started saving node modules
5:10:55 PM: Finished saving node modules
5:10:55 PM: Started saving build plugins
5:10:55 PM: Finished saving build plugins
5:10:55 PM: Started saving pip cache
5:10:55 PM: Finished saving pip cache
5:10:55 PM: Started saving emacs cask dependencies
5:10:55 PM: Finished saving emacs cask dependencies
5:10:55 PM: Started saving maven dependencies
5:10:55 PM: Finished saving maven dependencies
5:10:55 PM: Started saving boot dependencies
5:10:55 PM: Finished saving boot dependencies
5:10:55 PM: Started saving rust rustup cache
5:10:55 PM: Finished saving rust rustup cache
5:10:55 PM: Started saving go dependencies
5:10:55 PM: Finished saving go dependencies
5:10:56 PM: Build failed due to a user error: Build script returned non-zero exit code: 2
5:10:56 PM: Failing build: Failed to build site
5:10:57 PM: Finished processing build request in 1m17.810799643s

I'm not too sure what to do to fix it

I am trying to add logo image instead of plain text:

"siteConfiguration": {
"logo": { "text":"Portfolio"},"

I was not able to figure out how to insert a image in a responsive way. Could you please help.

Appreciate the wonderful template.

Hi ! I really enjoy your theme but I can't install prismjs with your theme so I can't highlight my code in my articles. I think it is a good feature to add to your theme :)

I changed in node module footer file, in gatsby-theme-portfolio-minimal. And its working on local server but, when i deployed this local server website to Vercel. Then its download the node modules from server, so its replaced my customization, so any solution because i think its very hard-coded, correct me if i am wrong?

Hi Konstantin,
your theme looks promising. I'd like to use it.
However, I see you don't have a license file. Would you mind adding one, so I know at what terms I'll be using it?
You should be able to add a standard one (e.g. MIT) directly through Github.

In settings.json the options for social links are very limited. I see that the available options are limited to:

node_modules/gatsby-theme-portfolio-minimal/src/components/SocialProfiles/index.tsx

export enum SocialProfile {
    Behance = 'behance',
    GitHub = 'github',
    Medium = 'medium',
    Mail = 'mail',
    LinkedIn = 'linkedin',
    Twitter = 'twitter',
    Hashnode = 'hashnode',
}

I'd like to add my Dribbble account to the page. Can we add Dribbble as an option? Ideally, it would be nice to add any key/value pair to social and have it generate the button accordingly.

I want to create a toggle switch using a component and add it to the footer so its easier to switch between the themes. Can someone suggest anyway it can implemented in this gatsby theme

Im completely new to GatsbyJS

There are the errors:

10:46:58 PM: error “gatsby-theme-portfolio-minimal” threw an error while running the createPages lifecycle:
10:46:58 PM: Cannot read properties of undefined (reading ‘path’)
10:46:58 PM:
10:46:58 PM:
10:46:58 PM: TypeError: Cannot read properties of undefined (reading ‘path’)
10:46:58 PM:
10:46:58 PM: - createPages.js:17 Object.module.exports [as createPages]
10:46:58 PM: [repo]/[gatsby-theme-portfolio-minimal]/src/gatsby/node/createPages.js:17:57
10:46:58 PM: - task_queues:95 processTicksAndRejections
10:46:58 PM: node:internal/process/task_queues:95:5
10:46:58 PM:
10:46:58 PM: - api-runner-node.js:487 runAPI
10:46:58 PM: [repo]/[gatsby]/src/utils/api-runner-node.js:487:16
10:46:58 PM:
10:46:58 PM:
10:46:58 PM: failed createPages - 0.299s
10:46:58 PM: ​
10:46:58 PM: “build.command” failed
10:46:58 PM: ────────────────────────────────────────────────────────────────
10:46:58 PM: ​
10:46:58 PM: Error message
10:46:58 PM: Command failed with exit code 1: npm run build (Search results for '"non-zero exit code: 1"' - Netlify Support Forums)
10:46:58 PM: ​
10:46:58 PM: Error location
10:46:58 PM: In Build command from Netlify app:
10:46:58 PM: npm run build
10:46:58 PM: ​
10:46:58 PM: Resolved config
10:46:58 PM: build:
10:46:58 PM: command: npm run build
10:46:58 PM: commandOrigin: ui
10:46:58 PM: environment:
10:46:58 PM: - NODE_VERSION
10:46:58 PM: publish: /opt/build/repo/public
10:46:58 PM: publishOrigin: ui
10:46:58 PM: plugins:
10:46:58 PM: - inputs: {}
10:46:58 PM: origin: ui
10:46:58 PM: package: ‘@netlify/plugin-gatsby’

10:46:59 PM: Node.js v18.0.0
10:46:59 PM: node:internal/modules/cjs/loader:942
10:46:59 PM: throw err;
10:46:59 PM: ^
10:46:59 PM: Error: Cannot find module ‘./util.js’
10:46:59 PM: Require stack:
10:46:59 PM: - /opt/build/repo/node_modules/yurnalist/dist/reporters/console/console-reporter.js
10:46:59 PM: - /opt/build/repo/node_modules/yurnalist/dist/index.js
10:46:59 PM: - /opt/build/repo/node_modules/gatsby-cli/lib/reporter/loggers/yurnalist/index.js
10:46:59 PM: - /opt/build/repo/node_modules/gatsby-cli/lib/reporter/start-logger.js
10:46:59 PM: - /opt/build/repo/node_modules/gatsby-cli/lib/reporter/index.js
10:46:59 PM: - /opt/build/repo/node_modules/gatsby/dist/schema/resolvers.js
10:46:59 PM: - /opt/build/repo/node_modules/gatsby/dist/schema/extensions/index.js
10:46:59 PM: - /opt/build/repo/node_modules/gatsby/dist/schema/types/type-defs.js
10:46:59 PM: - /opt/build/repo/node_modules/gatsby/dist/redux/reducers/inference-metadata.js
10:46:59 PM: - /opt/build/repo/node_modules/gatsby/dist/redux/reducers/index.js
10:46:59 PM: - /opt/build/repo/node_modules/gatsby/dist/redux/index.js
10:46:59 PM: - /opt/build/repo/node_modules/gatsby/dist/utils/jobs/worker-messaging.js
10:46:59 PM: - /opt/build/repo/node_modules/gatsby/dist/utils/worker/child/index.js
10:46:59 PM: - /opt/build/repo/node_modules/gatsby-worker/dist/child.js
10:46:59 PM: at Function.Module._resolveFilename (node:internal/modules/cjs/loader:939:15)
10:46:59 PM: at Function.Module._load (node:internal/modules/cjs/loader:780:27)
10:46:59 PM: at Module.require (node:internal/modules/cjs/loader:1005:19)
10:46:59 PM: at require (node:internal/modules/cjs/helpers:102:18)
10:46:59 PM: at _load_util (/opt/build/repo/node_modules/yurnalist/dist/reporters/console/console-reporter.js:34:18)
10:46:59 PM: at ConsoleReporter.error (/opt/build/repo/node_modules/yurnalist/dist/reporters/console/console-reporter.js:267:19)
10:46:59 PM: at /opt/build/repo/node_modules/gatsby-cli/lib/reporter/loggers/yurnalist/index.js:166:13
10:46:59 PM: at dispatch (/opt/build/repo/node_modules/gatsby-cli/lib/reporter/redux/index.js:47:5)
10:46:59 PM: at Object.createLog (/opt/build/repo/node_modules/redux/lib/redux.js:586:12)
10:46:59 PM: at Reporter.error (/opt/build/repo/node_modules/gatsby-cli/lib/reporter/reporter.js:163:23)
10:46:59 PM: at console.error (/opt/build/repo/node_modules/gatsby-cli/lib/reporter/patch-console.js:26:14)
10:46:59 PM: at printErrorAndExit (/opt/build/repo/node_modules/@turist/fetch/dist/sourcemap-register.js:1:7058)
10:46:59 PM: at process.emit (/opt/build/repo/node_modules/@turist/fetch/dist/sourcemap-register.js:1:7292)
10:46:59 PM: at process._fatalException (node:internal/process/execution:167:25) {
10:46:59 PM: code: ‘MODULE_NOT_FOUND’,
10:46:59 PM: requireStack: [
10:46:59 PM: ‘/opt/build/repo/node_modules/yurnalist/dist/reporters/console/console-reporter.js’,
10:46:59 PM: ‘/opt/build/repo/node_modules/yurnalist/dist/index.js’,
10:46:59 PM: ‘/opt/build/repo/node_modules/gatsby-cli/lib/reporter/loggers/yurnalist/index.js’,
10:46:59 PM: ‘/opt/build/repo/node_modules/gatsby-cli/lib/reporter/start-logger.js’,
10:46:59 PM: ‘/opt/build/repo/node_modules/gatsby-cli/lib/reporter/index.js’,
10:46:59 PM: ‘/opt/build/repo/node_modules/gatsby/dist/schema/resolvers.js’,
10:46:59 PM: ‘/opt/build/repo/node_modules/gatsby/dist/schema/extensions/index.js’,
10:46:59 PM: ‘/opt/build/repo/node_modules/gatsby/dist/schema/types/type-defs.js’,
10:46:59 PM: ‘/opt/build/repo/node_modules/gatsby/dist/redux/reducers/inference-metadata.js’,
10:46:59 PM: ‘/opt/build/repo/node_modules/gatsby/dist/redux/reducers/index.js’,
10:46:59 PM: ‘/opt/build/repo/node_modules/gatsby/dist/redux/index.js’,
10:46:59 PM: ‘/opt/build/repo/node_modules/gatsby/dist/utils/jobs/worker-messaging.js’,
10:46:59 PM: ‘/opt/build/repo/node_modules/gatsby/dist/utils/worker/child/index.js’,
10:46:59 PM: ‘/opt/build/repo/node_modules/gatsby-worker/dist/child.js’
10:46:59 PM: ]
10:46:59 PM: }

Hi!

I'm not an SEO expert so I might be missing something but I notice all external links (mainly social profiles and projects) have the following attribute settings:

target="_blank" rel="nofollow noopener noreferrer"

My understanding is that target="_blank" and noopener together are for UX (forcing a new tab) and security purposes. I know there's debate online whether to do this or not. Maybe a separate issue.

But I'm wondering if the choice to have nofollow and noreferrer is also intentional as I would imagine people linking to their own products and online profiles could prefer to not have these (for SEO and analytics purposes).

Hi,

Got a question.

Is there a way to extend the routing with authentication? Any tips would be appreciated.

I want to be able to make the article banner image become the image for og:image and twitter:image meta tags. Unfortunately, it seems like the original source location of the image gets lost when trying to modify the Article index.tsx, even if I wanted to use Helmet directly.

Any ideas on how to support this?

When viewing the website on a mobile device* only the first project is visible in the Projects section. As a user, I do not know that I can to scroll to the right to see more projects. I noticed this observing a few first-time viewers but issue #5 suggests this issue can even confuse the person who made the website...

Suggested fix: "always" show a portion of the second project to hint that there is more than one project to see.

Currently projects appear with a fade up animation as soon as the space they would occupy on the screen goes above a certain threshold. The suggested fix would make the second project appear at the same time as the first one on mobile devices.

This issue is different but related to #9. It looks like both could be fixed with a modification of the onScreen threshold. I'm going to try different values to see if I can find one that solves both issues without negatively impacting the overall theme UX.

*Issue experienced on the following devices : pixel 6a, iPhone 11, Xiaomi Redmi note 10s. All using Chrome.

When I add a image to the src in projects.json, it displays a very small .webp version of my full HD png image.
Only the preexisting images get displayed right.

Hi - I love the theme, and it's been really easy to use. Thank you so much for this!

I only hit one serious issue. After adding 6 or more projects, I found that when viewed on desktop, none of my projects was shown. If I reduce the projects to 5, the problem goes away.

The issue looks to be with the way that the useOnScreen hook is used by the Animation component:

useOnScreen has a default threshold of 0.25, which means that 25% of an element must be on screen before useOnScreen indicates that it is on screen.

Animation checks whether an element is on screen, using the default threshold, and hides it (opacity: 0) if it's not on screen.

All the projects are rendered within a single Animation component.

So the problem arises when the total length of the projects div exceeds 4x the screen height.

At this point it becomes impossible for 25% of the projects div to be on screen at once, so it's never considered 'on screen', and always rendered with opacity : 0

I have made a local fix & patch by reducing the default threshold for useOnScreen to 0.01 (1%). That's working fine for me now, but I'm not sure it's the best fix...

• You might want to make the "onScreen" threshold adjust dynamically depending on the number of projects?
• Or you might want to switch things around in ProjectsSection so that there is an Animation component per-project, rather than having one that spans all the projects?

Either way, I hope this bug report & analysis is useful.

Please don't rush to fix on my account, as I'm happy with may patched version for now. But this may be a helpful bug to fix before others hit it. 6 projects doesn't seem like that many to me.

Hello,

I noticed that when the logo text wraps on mobile, it overlaps.

The overlap is also visible in the header

Hi,

Firstly, thank you for this fantastic theme!

I apologize in advance if this is a really silly question. This is my first time using React or any SSG.

I want to create a section that is exactly similar to the ProcextsSection but takes in data from a different .json

What would be the right approach for this?

Thanks for the help!

Hi,

Im trying to override --page-width via globalStyles/theme.css as below:

:root {
  --page-width: 105rem;
}

Although the page width can be adjusted successfully, it broke a few other styling, e.g. burger becomes invisible when viewing on a mobile device, darkTheme/lightTheme both only display light theming colors.

I am getting the following error while building the project for production. For development it's running fine

 ERROR #95313 

Building static HTML failed for path "/blog"

See our docs page for more info on this error: https://gatsby.dev/debug-html


  631 |
  632 |   if (!context) {
> 633 |     throw new Error("useLocation hook was used but a 
LocationContext.Provider was not found in the parent tree. Make sure this is 
used in a component that is a child of Router");
      | ^
  634 |   }
  635 |
  636 |   return context.location;


  WebpackError: useLocation hook was used but a LocationContext.Provider was not
   found in the parent tree. Make sure this is used in a component that is a chi
  ld of Router

I don't use Medium, so how can I show the latest articles directly from the site's internal blog page instead of feeding them from Medium?

Thanks!

Dear author, how to use gatsby framework to build a website like 'https://medium.com/' ?

Hello!

I was wondering if you can provide me with any insight as to how I can incorporate the blog feature of this theme into your old gastby site. I tried following the readme for doing exactly what I just mentioned, but run into issues when running npm install gatsby-theme-portfolio-minimal. In specific, the new theme depends on gatsby V4, while the old site appears to be built on V2 as indicated by the dependencies in the package.json files.

I tried updating gatsby, but the old site then fails to compile when I run gatsby develop. I tried looking into the theme contents to see if I could scrape off the actual blog node components, but the new site is configured differently than the old one I am used to.

I would migrate my old site, but I have edited many of the node components that seem to be more hidden in this new version (things like splashScreen.js, underlining.js, navbar.js, cookiebar.js etc).

I understand that the old site is marked as depreciated and you no longer support it, but I thought I would open up a issue to see if you can provide me with any sort of direction.

Cheers, TJ!

Hi! Thank you so much for the theme. I haven't made a gatsby site in a while and the theming feature allows for a quick turnaround. I am having one issue however. I am using the AboutSection with multiple markdown files with unique filenames and section ids. However sometimes the pages with the AboutSection renders the incorrect piece of content. For example I have a file structure in the content folder like this

But the AboutSection component with a sectionId="safety" renders the about.md content. If I clear the cache it will sometimes render the correct content. This happens locally and on Netlify. Any help would be much appreciated. Thanks in advance.

Hi! I've been using this theme for some time now and love it. I was trying to see if there was a way to update the favicon and the title name on the tab part of google and was coming up with challenges. Is there a way to change these two things? Thank you very much!

I am getting the warning below, should we rename it? Not sure if expected.

warn Plugin `gatsby-theme-portfolio-minimal` has customized the GraphQL type `MarkdownRemark`, which has already been defined by
the plugin `gatsby-transformer-remark`. This could potentially cause conflicts.

Hi there,
I am a ux designer dabbling into frontend development for fun. A step on the way is a Gatsby portfolio.
However, I cannot for the life of me figure out where I can edit colors, fonts, etc.? I tried adding the globalStyles but I could not get it to work....

Can anyone/you help?

Hello!
Been using this lovely theme alot for writing blogs. Apologies if this isn't an issue (not a dev 😅)

I'm having an issue though ever since I deployed the most recent blog the og:image property is not found on the page

Where as say for the one for the live demo it is.

Linkedin Post inspector

When I look at LinkedIn Post inspector for it - here You can see that the image property it is using is not the correct image/url

Facebook url inspector

When using the facebook one here.

Question

I'm abit lost onto why this is happening as it has only happened on my most recently deployment but all I've done was add the markdown.md for the article and left the code untouched.

Perhaps it depends on the website. But when I use to post it on LinkedIn the correct image would be inferred for the og:image tag. But looking for the tag via inspect elements I cannot find it being set anymore

You can see in the article markdown here that the banner: src: is pointing to the correct image that would normally be used for the og:image

Any insight in this would be appreciated.

I cannot build the template.

Node version : 18.14.0
NPM version : 9.5.0

λ npm run build -- --verbose                                                                             
                                                                                                         
> [email protected] build                                                                                 
> gatsby build --verbose                                                                                 
                                                                                                         
verbose set gatsby_log_level: "verbose"                                                                  
verbose set gatsby_executing_command: "build"                                                            
verbose loading local command from: REDACTED\node_modules\gatsby\dist\commands\build.js    
verbose running command: build                                                                           
verbose Running build in "production" environment                                                        
success compile gatsby files - 2.146s                                                                    
success load gatsby config - 2.784s                                                                      
                                                                                                         
 ERROR  UNKNOWN                                                                                          
                                                                                                         
plugin "gatsby-transformer-inline-svg threw the following error:                                         
 Cannot find module 'gatsby-transformer-inline-svg/package.json'                                         

The dependencies are the following:

  "dependencies": {
    "gatsby": "^5.9.0",
    "gatsby-theme-portfolio-minimal": "^4.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },

Nice looking theme, but I run into issues with a fresh install of gatsby - errors below:

 ERROR #98123  WEBPACK

Generating development SSR bundle failed

/home/matthewjones/Pers/portfolio-minimal/node_modules/gatsby-theme-portfolio-minimal/src/hooks/useSiteConfiguration.tsx: Cannot read property 'path' of undefined

File: node_modules/gatsby-theme-portfolio-minimal/src/hooks/useSiteConfiguration.tsx


 ERROR #98123  WEBPACK

Generating development SSR bundle failed

/home/matthewjones/Pers/portfolio-minimal/node_modules/gatsby-theme-portfolio-minimal/src/hooks/useSiteMetadata.tsx: Cannot read property 'path' of undefined

File: node_modules/gatsby-theme-portfolio-minimal/src/hooks/useSiteMetadata.tsx


 ERROR #98123  WEBPACK

Generating development SSR bundle failed

/home/matthewjones/Pers/portfolio-minimal/node_modules/gatsby-theme-portfolio-minimal/src/sections/About/data.tsx: Cannot read property 'path' of undefined

File: node_modules/gatsby-theme-portfolio-minimal/src/sections/About/data.tsx


 ERROR #98123  WEBPACK

Generating development SSR bundle failed

/home/matthewjones/Pers/portfolio-minimal/node_modules/gatsby-theme-portfolio-minimal/src/sections/Articles/data.tsx: Cannot read property 'path' of undefined

File: node_modules/gatsby-theme-portfolio-minimal/src/sections/Articles/data.tsx


 ERROR #98123  WEBPACK

Generating development SSR bundle failed

/home/matthewjones/Pers/portfolio-minimal/node_modules/gatsby-theme-portfolio-minimal/src/sections/Contact/data.tsx: Cannot read property 'path' of undefined

File: node_modules/gatsby-theme-portfolio-minimal/src/sections/Contact/data.tsx


 ERROR #98123  WEBPACK

Generating development SSR bundle failed

/home/matthewjones/Pers/portfolio-minimal/node_modules/gatsby-theme-portfolio-minimal/src/sections/Hero/data.tsx: Cannot read property 'path' of undefined

File: node_modules/gatsby-theme-portfolio-minimal/src/sections/Hero/data.tsx


 ERROR #98123  WEBPACK

Generating development SSR bundle failed

/home/matthewjones/Pers/portfolio-minimal/node_modules/gatsby-theme-portfolio-minimal/src/sections/Interests/data.tsx: Cannot read property 'path' of undefined

File: node_modules/gatsby-theme-portfolio-minimal/src/sections/Interests/data.tsx


 ERROR #98123  WEBPACK

Generating development SSR bundle failed

/home/matthewjones/Pers/portfolio-minimal/node_modules/gatsby-theme-portfolio-minimal/src/sections/Legal/data.tsx: Cannot read property 'path' of undefined

File: node_modules/gatsby-theme-portfolio-minimal/src/sections/Legal/data.tsx


 ERROR #98123  WEBPACK

Generating development SSR bundle failed

/home/matthewjones/Pers/portfolio-minimal/node_modules/gatsby-theme-portfolio-minimal/src/sections/Projects/data.tsx: Cannot read property 'path' of undefined

File: node_modules/gatsby-theme-portfolio-minimal/src/sections/Projects/data.tsx

not finished Building development bundle - 2.454s

Output of gatsby info

  System:
    OS: Linux 5.11 Ubuntu 20.04.3 LTS (Focal Fossa)
    CPU: (16) x64 Intel(R) Core(TM) i7-10870H CPU @ 2.20GHz
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 14.18.1 - ~/.nvm/versions/node/v14.18.1/bin/node
    Yarn: 1.22.15 - /usr/bin/yarn
    npm: 6.14.15 - ~/.nvm/versions/node/v14.18.1/bin/npm
  Languages:
    Python: 3.9.6 - /home/matthewjones/.pyenv/shims/python
  Browsers:
    Chrome: 95.0.4638.54
    Firefox: 93.0
  npmPackages:
    gatsby: ^3.7.1 => 3.14.5
    gatsby-theme-portfolio-minimal: latest => 2.6.3

Any help would be appreciated :)

Hey, I'm using your template for my personal blog, but when I add an image in an article in .MD, the image is zoomed in real bad and it misses a lot of information. How can I change that ?

Real image :

Image in the article :

Hey, thank you for creating this theme, I really appreciate it!

This really isn't a bug, but I'm just wondering if there is any way for me to set the theme on command. My plan is to use the system's theme as default but also allow the users to use a toggle to change between light and dark modes, with the preferences stored locally via react's localStorage. I'm not really sure if there is already an existing variable that stores the mode, but if there is, then please do let me know.

Thanks!

In order to remove elements in the navigation and the footer I was able to remove the label text in the settings.json file.

However, the when removing the text "Resume" from the ctaButton designed for the resume button, the border remains. I tried commenting out the cta button but got the following error:

ERROR #11321 PLUGIN

"gatsby-transformer-json" threw an error while running the onCreateNode lifecycle:

Unable to parse JSON: file C:/Users/...settings.json

80 | } catch {
81 | const hint = node.absolutePath ? file ${node.absolutePath} : in node ${node.id};

82 | throw new Error(Unable to parse JSON: ${hint});
| ^
83 | }
84 |
85 | if (_.isArray(parsedContent)) {

File: node_modules\gatsby-transformer-json\gatsby-node.js:82:11

Error: Unable to parse JSON: file C:/Users/...settings.json

• gatsby-node.js:82 Object.onCreateNode
  [mysite]/[gatsby-transformer-json]/gatsby-node.js:82:11

• api-runner-node.js:487 runAPI
  [mysite]/[gatsby]/src/utils/api-runner-node.js:487:16

I want to add a toggle button for dark and light modes in the Navbar. How can I do that?

I would like to use this theme. I'm new to web dev and Gatsby so please forgive me for asking otherwise obvious questions.

I would like each page to have sidebar which could display a tag cloud, sereach bar, possiblly an add block. Does your template support this. Does your template make use of CSS Grids?

why i am getting this error while cloning : command failed with exit code 1: npm install --loglevel error --color always --legacy-peer-deps --no-audit.....also not able to deploy the project also

Hey! Great theme!!!
Is it possible to use the same section (for example, InterestsSection) several times, but use different interests.json for the content? Thank you!

Hi, thanks for creating this awesome theme!
I'm trying to shadow the theme files so I can customize it to my needs, and could some help.

I shadowed the entire theme, not just some components, as otherwise there's a lot of missing dependency errors to deal with. I copied the entire contents of my-portfolio/node_modules/gatsby-theme-portfolio-minimal/src directory into my-portfolio/src/gatsby-theme-portfolio-minimal/.

Error occurs when editing ProjectsSectionQuery query in my-portfolio/src/gatsby-theme-portfolio-minimal/sections/Projects/data.tsx, causing the development build to fail. Not sure but it seems to be related to caching issues.

Specifically, I came across this as I tried to increase project image size. Either changing the width value or removing it altogether causes the same build error:

  src {
      childImageSharp {
          gatsbyImageData(width: 1000)
  }

As a test, I also tried removing the linkTo from the image node (which I'm not using in projects.json anyway), which causes the same error. I haven't tried editing any other data.tsx components or queries.

1. Running gatsby develop shows this error:

ERROR  UNKNOWN

Module not found: Error: Can't resolve '../../../../public/page-data/sq/d/1487972840.json' in
'E:\portfolio-minimal\src\gatsby-theme-portfolio-minimal\sections\Projects'

 ModuleNotFoundError: Module not found: Error: Can't resolve '../../../../public/page-data/sq/d/1487972840.json' in 'E:\portfolio-minimal\src\gatsby-theme-portfolio
  -minimal\sections\Projects'

2. If the query is edited while development build is already running, it works and changes are successfully reflected on localhost:8000. However, if the dev server is restarted, it fails again with the above error.

3. Running gatsby build successfully builds every time. However, if the build contains the edited query, running gatsby serve on localhost:9000 just shows a blank screen, while the DevTools console shows errors:

Error: The result of this StaticQuery could not be fetched.

This is likely a bug in Gatsby and if refreshing the page does not fix it, please open an issue in https://github.com/gatsbyjs/gatsby/issues
    at l (static-query.js:83:11)
    at _ (data.tsx:18:12)
    at Eo (react-dom.production.min.js:167:137)
    at xi (react-dom.production.min.js:290:337)
    at bs (react-dom.production.min.js:280:389)
    at vs (react-dom.production.min.js:280:320)
    at gs (react-dom.production.min.js:280:180)
    at ls (react-dom.production.min.js:271:88)
    at as (react-dom.production.min.js:268:429)
    at S (scheduler.production.min.js:13:203)

If this is not reproducing, run gatsby clean before gatsby build.

4. There are no issues when editing other shadowed files, whether it's components or styles, as long as the Query is untouched. Both gatsby develop and gatsby build work fine and the page is properly rendered, including any changes in other shadow files.

Description:

Under "logo" in the "siteConfiguration" section, you can make the logo an "image" instead of "text".

After running gatsby develop, the logo appears as normal in the webpage and the startup animation is normal. However, after running gatsby build, the logo becomes very large in both the startup animation and in the webpage itself.

Relevant Settings:

"siteConfiguration": {
    "logo": { "image": "../content/images/react.png"},
    ...
}

Adding "text" also doesn't work:

"siteConfiguration": {
    "logo": { "text": "Portfolio",
              "image": "../content/images/react.png"},
   ...
}

Screen Recording after gatsby develop vs gatsby build:

After gatsby develop:

After gatsby build, gatsby serve:

Hi there! I've been using this theme for some time now and love it. One issue I'm running into while tweaking it comes when I attempt to create a new section using ArticlesListingTemplate. I have this in my index.js:

import React from 'react';
import {
   HeroSection,
   Page,
   Seo,
} from 'gatsby-theme-portfolio-minimal';
import ArticleListingTemplate from 'gatsby-theme-portfolio-minimal/src/templates/ArticleListing';

export default function IndexPage() {
   return (
       <>
   <Page>
           <Seo title="Gatsby Theme Portfolio Minimal" />
               <HeroSection sectionId="hero" />
   			<ArticleListingTemplate heading="Explore Collections" />
           </Page>
       </>
   );
}

but end up with this error:

Cannot read properties of undefined (reading 'articles')

  23 | export default function ArticleListingTemplate(props: ArticleListingTemplateProps): React.ReactElement {
  24 |     const ARTICLES_PER_PAGE = 9;
> 25 |     const articles = props.pageContext.articles;
     |                                       ^
  26 |     const [filterOptions, setFilterOptions] = React.useState<FilterOption[]>(extractFilterOptions(articles));
  27 |     const [shownArticlesNumber, setShownArticlesNumber] = React.useState<number>(ARTICLES_PER_PAGE);
  28 |

articles is defined earlier in the file through an interface, so not sure why I'm getting this error. What might be going wrong here? Appreciate any help!

Hi @konstantinmuenster !

I recently came across Gatsby and have been thrilled to implement it for my personal site. I found your portfolio theme and love it! Thanks for providing this awesome resource.

The one thing I have encountered is the load more interests button in content/interests/interest.json. I've changed the "visible" field to false but after saving and refreshing the browser, the button remains on the page. I've also tried gatsby clean and relaunching the development server but still no luck.

Do you have any suggestions for this piece?

Thanks!

I see there is a Medium integration in the src/section/Articles/

How does this piece of code work exactly, and where does it have a place to pull from a specific user's Medium feed?

I can't see how it is integrated with the Markdown exactly.

It is not put in the example so is it useable?

Thank you for anyone who could answer this question!

Thank you very much Konstantin for your theme. Am loving it! ❤️

I submitted a pull request for your review to allow the user to specify the button label in the Interests section. It currently appears hard-coded to a fixed phrase.

Hi!

I'm trying to customize the theme by using the concept of shadowing as defined in the readme. I have created a file called theme.css in the following directory.

{project root}/src/globalStyles

However, when I change any of the hex values, the style does not seem to change. When I check chrome developer tools, it still shows that the styles for the body are the default ones provided in the readme.

How can I fix this?

Hello there, first of all thank you for the cool theme. I think it's perfect for me, however I'm struggling with shadowing the files.

I can shadow the simple stuffs such as CSS files, the settings, and the contents. But when I attempted more complex actions, such as adding a button and new animations, the changes were not applied to the development.

What I've done:

1. Repeatedly use Gatsby Clean before Gatsby Develop
2. Sometimes even deleting node_modules
3. Tried both
   hans-pasaribu\src\gatsby-theme-portfolio-minimal\sections\Hero and
   hans-pasaribu\src\sections\Hero
   still doesn't work
4. Altough hans-pasaribu\src\gatsby-theme-portfolio-minimal\sections\Hero is more of a 404 error like this:

There's not a page or function yet at /

Preview custom 404 page

Create a page at this url
Create a React.js component like the following in your site directory at "src/pages/index.js" and then refresh to show the new page component you created.

import * as React from "react"

export default function Component () {
  return "Hello world"
}

I think the only page that isn't detectable is the homepage because /blog/ works fine. Do you know how to solve it? I put everything in src\gatsby-theme-portfolio-minimal\ so src only contains that single folder. Thanks once again.