Portfolio with Componently

https://componently-com.github.io/portfolio-with-componently/

If you like this template, check out componently.com, a marketplace where developers can search, compare and integrate web application building blocks.

Strongly based on the theme from smakosh.

Theme

Gatsby-theme-portfolio

Features

• Eslint/Prettier configured
• Scores 100% on a11y / Performance / PWA / SEO
• PWA (desktop & mobile)
• Easy to customize
• Nice project structure
• Amazing illustrations by Undraw.co
• Tablet & mobile friendly
• Continuous deployment with Vercel
• Or with Netlify, check Netlify branch
• A contact form protected by Google Recaptcha
• Can be deployed with one click
• Functional components with Recompose React Hooks! ready to migrate to React hooks!
• Fetches your Github pinned projects with most stars (You could customize this if you wish)
• One click deployment to Vercel
• Contact form powered by Static Forms
• Appointment booking with Acuity Scheduling
• Feature switches from Split
• CMS from Contentful

Design

Project on Behance

Structure

.
├── data
│   └── config              # SEO related tags
├── src
│   └── assets              # Assets
│   │   │── icons             # icons
│   │   │── illustrations     # illustrations from (undraw.co)
│   │   └── thumbnail         # cover of your website when it's shared to social media
│   ├── components          # Components
│   │   │── common            # Common components
│   │   │── landing           # Components used on the landing page
│   │   └── theme             # Header & Footer
│   └── pages               # Pages
└── static                  # favicon & Netlify redirects

Prerequisites

Online

1. Fetch an access key for Static Forms
2. Grab a Google recaptcha key from Google Recaptcha
3. Grab your Github token from GitHub
4. Set up an account at Acuity Scheduling and find your owner id
5. Set up an account at Split and fetch your key and authorization key
6. Set up an account at Contentful, set up a content model for "Skill" with a name as short text and a description as rich text and add at least one skill, then fetch your space id and access token
7. Click and pass in your:

• Static Forms access key
• Google recaptcha public key
• Github token

To Env variables section.

Locally

1. Fetch an access key for Static Forms
2. Install Yarn
3. Grab a Google recaptcha key from Google Recaptcha
4. Set up an account at Acuity Scheduling and find your owner id
5. Set up an account at Split and fetch your key and authorization key
6. Set up an account at Contentful, set up a content model for "Skill" with a name as "Text" and a description as "Rich text" and add at least one skill, then from "API Keys" fetch your Space ID and Content Delivery API access token.
7. Run cp .env.development.template .env.development
8. Run yarn && yarn start

You could run vercel env pull to get your env variables from Vercel.

Deploying locally to Vercel

I highly recommend that you push to GitHub/GitLab and deploy your repository to Vercel instead or just hit the Deploy button.

Clean the cache

This removes the .cache/ & public/ folders

yarn reset

Built with

• Adobe XD
• Gatsby
• React & GraphQL
• Formik
• Google recaptcha
• VSCode
• Static Forms
• Acuity Scheduling
• Split
• Contentful
• And these useful of JavaScript libraries & Gatsby plugins package.json

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Contributors

• Ajay NS smakosh/gatsby-portfolio-dev#3
• Ryan Lee smakosh/gatsby-portfolio-dev#6
• David smakosh/gatsby-portfolio-dev#8
• Léu Almeida smakosh/gatsby-portfolio-dev#21
• Kudakwashe Mupeni smakosh/gatsby-portfolio-dev#20
• sasannnn smakosh/gatsby-portfolio-dev#22
• Michael Seifarth smakosh/gatsby-portfolio-dev#27
• Daniel Bartholomae Changes in this repository
• Smakosh Original template

Support

If you love this Gatsby template and want to support Smakosh, you can do so through his GitHub profile.