More Premium Hugo Themes Premium Vue Themes

Gridsome Portfolio Starter

A simple portfolio theme for Gridsome powered by Tailwind CSS v1

Gridsome Portfolio Starter

A simple portfolio theme for Gridsome powered by Tailwind CSS v1

Author Avatar Theme by drehimself
Github Stars Github Stars: 375
Last Commit Last Commit: Nov 18, 2023 -
First Commit Created: Apr 29, 2023 -
Gridsome Portfolio Starter screenshot

Overview

The Gridsome Portfolio Starter is a simple and minimalistic theme designed for Gridsome, a static site generator. It is a portfolio starter theme that includes features such as a clean design, Tailwind CSS v1, a blog with markdown content for posts, documentation type that shows how to use Vue components in Markdown, theme switcher with dark mode, search functionality for posts, basic pagination, syntax highlighting, 404 page, RSS feed, and sitemap in XML.

Features

  • Clean and minimal design
  • Tailwind CSS v1 (with PurgeCSS)
  • Scroll to sections using vue-scrollto
  • Blog with markdown content for posts
  • Documentation type that shows how to use Vue components in Markdown
  • 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

To install the Gridsome Portfolio Starter theme, follow these steps:

  1. Install Gridsome CLI tool if you don’t have it:
npm install --global @gridsome/cli
  1. Clone the repo:
git clone https://github.com/drehimself/gridsome-portfolio-starter.git
  1. Change directory to the cloned repo:
cd gridsome-portfolio-starter
  1. Install dependencies (This may take some time due to Cypress. If you don’t need Cypress for testing, you can remove it from package.json):
npm install
  1. Start a local dev server at http://localhost:8080:
gridsome develop

Summary

The Gridsome Portfolio Starter is a minimalistic and clean theme designed for Gridsome. It offers a variety of features including a blog with markdown content, documentation type for using Vue components in Markdown, dark mode, search functionality, pagination, 404 page, RSS feed, and sitemap. The installation process is straightforward and can be done by cloning the repository and running a few commands. It is a great starting point for building a portfolio website using Gridsome.