Gridsome Portfolio Starter

Check out the Astro version here: https://github.com/drehimself/astro-portfolio-starter

A simple portfolio starter theme for Gridsome

Demo URL

https://gridsome-portfolio-starter.netlify.com

Features

Clean and minimal design
Tailwind CSS v1 (with PurgeCSS). Using this gridsome plugin.
Scroll to sections using vue-scrollto
Blog with markdown content for posts
Documentation type that shows how to use Vue components in Markdown (click Docs)
Theme Switcher with Dark Mode
Search posts with Fuse.js and vue-fuse
Tags for posts
Basic pagination
Syntax highlighting with Shiki (using this gridsome plugin)
404 Page
RSS Feed
Sitemap in XML

Installation

Install Gridsome CLI tool if you don't have it: npm install --global @gridsome/cli
Clone the repo: git clone https://github.com/drehimself/gridsome-portfolio-starter.git
cd gridsome-portfolio-starter
npm install (This can be a long download because of Cypress. If you don't care about testing with Cypress, remove it from package.json)
gridsome develop to start a local dev server at http://localhost:8080

Testing

I have some basic end-to-end tests using Cypress. You can find them in /cypress/integration/tests.js.

To run tests, first make sure your dev server is running with gridsome develop. I'm assuming you're using the default port of 8080. If not, change the baseUrl key in the cypress.json file.

After your dev server is running, you can run npm run test or ./node_modules/.bin/cypress open to start Cypress. The Cypress electron app will run. Click the tests.js file and the tests will run in an automated browser.

Notes

When Gridsome moves to Vue 3, I'll update this repo as well. I'll also update to Tailwind v2, along with other Tailwind v2 goodies like dark mode and the JIT.
Based on my personal portfolio website. I wanted to create an open source version with more features.
Check out a screencast I did where I go through the process of building my website.
Illustrations from unDraw
Search is based on Fuse.js and vue-fuse. It only searches the title and summary of posts for now. Some tweaking may be necessary to get it to search to your liking. Check out the fuse documentation for search settings. This PR added the ability to search both "Post" and "Documentation" types.
Check out these other Gridsome Starters where I got some ideas from:
- Gridsome Starter Blog
- Gridsome Starter Bleda
- Jigsaw Starter Blog - I got a lot of design inspiration from this starter theme.

Other versions

Nuxt version: https://github.com/drehimself/nuxt-portfolio-starter
Saber version: https://github.com/drehimself/saber-portfolio-starter

drehimself / gridsome-portfolio-starter Goto Github PK