A static gridsome site for my personal portfolio.
- Clean and minimal design
- Tailwind CSS v1 (with PurgeCSS). Using this gridsome plugin.
- Scroll to sections using vue-scrollto
- Wordpress rest for posts
- Theme Switcher with Dark Mode
- Search posts with Fuse.js and vue-fuse
- Tags from wordpress posts
- Basic pagination
- Syntax highlighting with Shiki (using this gridsome plugin)
- 404 Page
- RSS Feed
- Sitemap in XML
- Install Gridsome CLI tool if you don't have it:
npm install --global @gridsome/cli - Clone the repo:
git clone https://github.com/arifpavel/portfolio.git cd portfolionpm install(This can be a long download because of Cypress. If you don't care about testing with Cypress, remove it frompackage.json)gridsome developto start a local dev server athttp://localhost:8080
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.
- Based on Andre Madarang's Gridsome Portfolio Starter. I wanted to use Wordpress CMS backend with more features instead of markdowns.
- Illustrations from unDraw
- Search is based on Fuse.js and vue-fuse.