This is my website that I wanted to build using Gatsby and I used the start below from Smakosh as my base. I've modified it a little but to include my content and will be modifying it further to include new illustrations and more content.
- 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
- A contact form protected by Google Recaptcha
- Can be deployed with one click
- Functional components with
RecomposeReact 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
Project on Behance
.
├── 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
- Create an account at Formik and grab your form endpoint url
- Grab a Google recaptcha key from Google Recaptcha
- Grab your Github token from GitHub
- Formik form endpoint
- Google recaptcha public key
- Github token
To Env variables section.
- Create an account at Formik
- Install Yarn
- Grab a Google recaptcha key from Google Recaptcha
- Grab your Github token from GitHub
- Run
cp .env.development.template .env.development
- Run
yarn && yarn start
This removes the .cache/
& public/
folders
yarn reset
- Adobe XD
- Gatsby
- React & GraphQL
- Formik
- Google recaptcha
- VSCode
- And these useful of JavaScript libraries & Gatsby plugins package.json
This project is licensed under the MIT License - see the LICENSE.md file for details