Gridsome Portfolio Starter

screenshot of Gridsome Portfolio Starter
gridsome
vue
tailwind

A simple portfolio theme for Gridsome powered by Tailwind CSS v1

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

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.

gridsome
Gridsome

Gridsome is a Vue.js-based static site generator that makes it easy to build fast and flexible websites and applications by leveraging modern web technologies like GraphQL, Webpack, and hot reloading

vue
Vue

Vue.js is a lightweight and flexible JavaScript framework that allows developers to easily build dynamic and reactive user interfaces. Its intuitive syntax, modular architecture, and focus on performance make it a popular choice for modern web development.

tailwind
Tailwind

Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.