Hugo Themes

Prev/Next: All Themes

Yuan

Fast and minimalistic SPA theme for Hugo

  • Author: 17ms
  • GitHub Stars: 1
  • Updated: 2023-11-07
  • License: MIT
  • Tags: Dark Minimal
Download Demo
Yuan

Minimalistic SPA theme for Hugo - Demo

A minimal single-page application theme for Hugo.

Features

  • Single-page application structure with interactive navbar
  • About section with minimal SVG icon pack for displaying socials
  • Projects section with horizontally scrollable card view of the items
  • Mobile friendly scaling
  • Toggleable mouse tracker/hover animation
  • Optimized CSS, JS, and webfonts (Yellow Lab Tools analysis)
  • Small build size (~40 KB)

Hugo Themes Website GitHub code size in bytes GitHub

Usage

The easiest way to install the theme is to use git submodules:

$ git submodule add --depth=1 https://github.com/17ms/yuan.git themes/yuan
# Required when recloning the repository (e.g. during automated deployment)
$ git submodule update --init --recursive

Use the hugo.yaml template below to configure the theme:

# Note that due to performance reasons the custom webfont used in the site's
# titles is stripped to only contain unicode range U+0000-007F

baseURL: https://example.com/
title: Example
author: Example Author
language: en-GB
paginate: 10

theme: yuan

params:
  description: Example description

  # Mouse tracking animation
  enableMouseTracker: false

  # Trunaction limit of summaries inside projects display containers
  truncationLimit: 150

  # Logos, favicons and theme colors
  assets:
    favicon: "favicon.ico"
    favicon16: "favicon-16x16.png"
    favicon32: "favicon-32x32.png"
    appleTouchIcon: "apple-touch-icon.png"
    safariPinnedTabIcon: "safari-pinned-tab.svg"
    safariPinnedTabColor: "#5bbad5"
    manifest: "manifest.json"
    msTileColor: "#2b5797"
    msTileIcon: "mstile-150x150.png"
    themeColor: "#040404"
    logo: "logo.svg"

  # Icons shown below the about text snippet
  # List of the available icons can be found in the /layouts/partials/svg.html file
  socialIcons:
    - name: email
      url: "mailto:example@example.com"
      display: Optional name shown in tooltips, defaults to capitalized name

  # List of displayed items (e.g. software projects)
  itemDisplays:
    - name: Example project
      url: "#"
      description: Project description example

See Also