gatsby-portfolio | Portfolio / Personal Website - Built with Gatsby.js | Portfolio library

by konstantinmuenster JavaScript Version: Current License: MIT

X-Ray Key Features Code Snippets Community Discussions(6)Vulnerabilities Install Support

kandi X-RAY | gatsby-portfolio Summary

gatsby-portfolio is a JavaScript library typically used in Web Site, Portfolio, React, Next.js, Gatsby applications. gatsby-portfolio has no bugs, it has no vulnerabilities, it has a Permissive License and it has low support. You can download it from GitHub.

Konstantin Münster – konstantin.digital – mail@konstantin.digital. Distributed under the MIT license. See LICENSE for more information.

Support

Quality

Security

License

Reuse

Support

gatsby-portfolio has a low active ecosystem.

It has 16 star(s) with 6 fork(s). There are 2 watchers for this library.

It had no major release in the last 6 months.

gatsby-portfolio has no issues reported. There are no pull requests.

It has a neutral sentiment in the developer community.

The latest version of gatsby-portfolio is current.

Quality

gatsby-portfolio has 0 bugs and 0 code smells.

Security

gatsby-portfolio has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.

gatsby-portfolio code analysis shows 0 unresolved vulnerabilities.

There are 0 security hotspots that need review.

License

gatsby-portfolio is licensed under the MIT License. This license is Permissive.

Permissive licenses have the least restrictions, and you can use them in most projects.

Reuse

gatsby-portfolio releases are not available. You will need to build from source code and install.

Installation instructions are available. Examples and code snippets are not available.

Top functions reviewed by kandi - BETA

kandi's functional review helps you automatically verify the functionalities of the libraries and avoid rework.
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of gatsby-portfolio

Get all kandi verified functions for this library.

gatsby-portfolio Key Features

No Key Features are available at this moment for gatsby-portfolio.

gatsby-portfolio Examples and Code Snippets

No Code Snippets are available at this moment for gatsby-portfolio.

Community Discussions

Trending Discussions on gatsby-portfolio

Gatsby Styled Components plugin: window is not defined

Netlify throwing errors on my Gatsby JS about jQuery

Sourcing MDX files to programmatically create portfolio pages in Gatsby

Gatsby Create Pages

Testing different fonts in a React project

Gatsby Image Not Working - Images Blurry on Deploy or does not show up at all

QUESTION

Gatsby Styled Components plugin: window is not defined

Asked 2021-Mar-31 at 15:11

I'm getting the following error inside my Gatsby with Sanity app on running npm run build:

...

ANSWER

Answered 2021-Mar-31 at 15:11

This is because your project or the gatsby-plugin-styled-components is using somewhere styled-components@5.2.2 which is a broken version using window.

The issue has been tracked on SC Github: https://github.com/styled-components/styled-components/issues/3444

I recommend you to update to styled-components@5.2.3

Source https://stackoverflow.com/questions/66882751

QUESTION

Netlify throwing errors on my Gatsby JS about jQuery

Asked 2021-Jan-19 at 07:34

Trying to deploy my Gatsby app on netlify. Basically, I added some jQuery for some specific purposes but when I uploaded it, I got the ff error:

...

ANSWER

Answered 2021-Jan-19 at 07:34

As I was saying, it's not Netlify's fault since the project is not building locally. You should ensure always that your project is correctly coded in both environments (build and develop) since they have substantial differences between them. A project that works under gatsby develop doesn't mean that it's perfectly coded, only means that it work under certain conditions. You can check the overview between runtime and build-time in Gatsby's docs, the main difference relies on gatsby build's Gatsby Server-Side Rendering (SSR). Keep in mind that you are using jQuery, which points directly to the real DOM, having a high-performance impact on the site, while React, creates and manipulates a virtual DOM (vDOM) to avoid that kind of high-cost actions. It's odd using both approaches.

In addition, you are importing everything in the component, which will be used across your project in multiple components/pages. This may lead to multiple script rendering/loading if the component is rerendered.

Said that, your issue may be caused by:

AOS.init();
The script importation: since they aren't promises, they will be imported at the same time. If for some reason one of them is loaded first (the lighter) and it's dependant on the other one, it will break your project, since it won't be able to load. You are not loading jQuery, unless it's in scripts.js.

You have many approaches, from changing the approach and using a React-based one, to try to async the script importation (and loading jQuery before), but all the workarounds will need to be tested with some trials and errors:

Loading jQuery before:

Source https://stackoverflow.com/questions/65785462

QUESTION

Sourcing MDX files to programmatically create portfolio pages in Gatsby

Asked 2020-Dec-24 at 10:37

I'm a newbie trying to build a Gatsby site that programmatically generates pages for MDX files placed at /content/portfolio using the following url structure: sitename/portfolio/single-portfolio-item. The site is running on the gatsby-starter-blog-theme.

Here are the steps I followed:

Create a new gatsby site: gatsby new gatsby-portfolio https://github.com/gatsbyjs/gatsby-starter-blog-theme and start the server with gatsby develop.
Create a directory for portfolio MDX posts: content/portfolio
create a portfolio post: content/portfolio/pf1.mdx with the following content:

...

ANSWER

Answered 2020-Nov-24 at 06:23

Besides the fact that allMdx is the common way to retrieve .mdx data. To create a and display it in the front end, just:

Source https://stackoverflow.com/questions/64981073

QUESTION

Gatsby Create Pages

Asked 2020-Oct-07 at 07:16

I am trying to create a gatsby site where I have projects posted, each with tags. I followed a basic tutorial on creating a gatsby blog, and am now working through gatsby's tags as documented on their website. Along the way while changing variable names from path to slug to avoid reserved words, I seem to have messed up because I can no longer create blogpost pages, nor tag pages. Each post is enclosed in a folder named by the post title, holding an index.md file defining its content, date, tag etc.

The following error is output when I try to run gatsby develop,

ERROR #11323

...

ANSWER

Answered 2020-Oct-07 at 04:49

You are passing a tag in your context but expecting a slug:

Source https://stackoverflow.com/questions/64235565

QUESTION

Testing different fonts in a React project

Asked 2020-May-26 at 20:29

Question

How to quickly test different fonts in a React project?

Overview

I'm learning how to use React/Gatsby with this template. In this example the site uses .sass files for styling and I see font-family: "slick" is referenced in the slider.sass file and reset.sass file has this entry:

...

ANSWER

Answered 2020-May-26 at 20:29

Let me kick my answer off with a warning:

Disclaimer: I do not recommend doing this in production. This is intended for testing font pairings locally.

Once you have chosen your fonts, I suggest hosting webfonts on your domain to avoid hitting a remote CDN. You could use classic @font-face declarations, or Kyle Matthew's typefaces packages, for example.

Now, what you basically want to do is to import fonts client-side, to make it easy to try them out without rebuilding your site.

1. Get a link to embed your fonts client-side

First, you'll need to get an embed link from your font hosting CDN (in your case, from Google Fonts). It will look like this:

Source https://stackoverflow.com/questions/62012637

QUESTION

Gatsby Image Not Working - Images Blurry on Deploy or does not show up at all

Asked 2020-Mar-18 at 22:13

Project Description: Using Gatsby to create a portfolio website to showcase my JavaScript projects.

Problem: I cannot get images to load using gatsby-image in my deployment to github pages - it works on my local machine. If I use childImageSharp.fixed it is blurry and if I use childImageSharp.noBase64 the image does not show up at all.

What I have tried: I have tried deleting my public and .cache folders and rebuilding (many times) - didn't work. I have tried using older versions of Gatsby and gatsby-images this didn't work and it seems to break other things. I've tried improving the quality but changing some settings but it didn't work. These are all things I have tried from other StackOverflow posts I've been reading the past couple of days.

*Note: I also tried to not use Gatsby Images and you will see a lot of other data in my query even without Gatsby images I cannot get the images to show up not broken. But using gatsby images it's either blurry or blank as I stated above.

Github repo: https://github.com/mk0b/gatsby-portfolio-site

Live Github Pages Site: https://mk0b.github.io/gatsby-portfolio-site/

**Notes on structure - My graphQL query is in Projects.js and is passing down all the info to Project.js which then uses gatsby image.

Thank you for any help/guidance in advance!!

...

ANSWER

Answered 2020-Mar-16 at 19:21

Someone in one my of my slack communities suggested I try Netlify instead of github pages and the images work with Netlify deploy. So this is not resolved but is no longer pressing.

Source https://stackoverflow.com/questions/60707409

Community Discussions, Code Snippets contain sources that include Stack Exchange Network

Vulnerabilities

No vulnerabilities reported

Install gatsby-portfolio

If you don't already have the Gatsby CLI, install it. Clone the project and change directory accordingly. Run development server and enjoy.

Support

For any new features, suggestions and bugs create an issue on GitHub. If you have any questions check and ask questions on community page Stack Overflow .

Find more information at: