Toha

A Hugo theme for a personal portfolio with minimalist design and responsiveness.

Example Site: Toha Example Site

Features

• Minimalist Design
• Fully Responsive
• Carefully designed cards
• Great Experience timeline
• Achievement gallery
• Sidebar to categorize posts
• Short Codes
• Google Analytics Support
• Disqus Comment Support

Requirements

• Hugo Version 0.68.0 or higher

Installation

• Create your site if you haven't already

hugo new site my-site -f=yamlcd my-sitegit init

• Add the theme as git sub-module

git submodule add https://github.com/junyazhang/toha.git themes/toha

Don't use SSH URL of the theme during adding as git sub-module. Also, don't clone the theme in your themes directory using git clone. They don't work well with Github Action or Netlify.

If you want to customize the theme templates, then fork it and use the fork as your theme.

Configuration

Configure your config.yaml file of your site as below:

baseURL: http://example.org/languageCode: en-ustitle: "Toha"theme: "toha"# Allow raw html in markdown filemarkup:
goldmark:
renderer:
unsafe: true# Enable Google AnalyticsgoogleAnalytics: UA-xxxxxxxx# Enable Disqus forumdisqusShortname: does-not-exist# Enable global emoji supportenableEmoji: true# Custom parametersparams:
# copyrightcopyright: © 2020 Copyright.# background image of the landing pagebackground: "images/background.jpg"# GitHub repo URL of your sitegitRepo: https://github.com/hossainemruz/toha-example-site# specify whether you want to write blog post or notenableBlogPost: true# specify the list of custom menus that you want to show in the top navbar.# they will be separated by a divider from the main menus.customMenus:
- name: Notesurl: https://hossainnotes.netlify.app/docs/example/# some information about youauthor:
name: "Jane Doe"image: "images/avatar.png"# give your some contact information. they will be used in the footercontactInfo:
email: "janedoe@example.com"phone: "+0123456789"# a summary of what you dosummary:
- I am a Developer
- I work with Go
- I love to work with some fun projects

You can just copy the content for config.yaml files from theme/toha/exampleSite/config.yaml.

Usage

Run your hugo site with this theme.

hugo server -w

Don't panic if the generated site does not look like what have you seen in the demo. Now, you have to provide some data in data folder of your site.

Follow the posts giving step by step instructions for configuring your data folder from here.

You can also follow the sample format given in themes/toha/exampleSite/data directory.

Shortcodes

Here, are some handy shortcodes you can use with this theme.

• img
• split
• vs
• alert

Project Roadmap

Here, are the current plan and progress of various components of this theme. The components will be prioritized based on users requests.

Sections

• Home

  • Configurable Background
  • Author Image
  • Greeting
  • Typing Carousel

• About

  • Name and Designation
  • Summary
    • Markdown Support
  • Social Links
    • Font Awesome Support
  • Resume Link
  • Soft Skills Indicator

• Skills

  • Skill Cards
  • Markdown Support

• Experiences

  • Designation
  • Timeline
  • Company Overview
  • Responsibilities

• Projects

  • Category Filter
  • Project Card
    • Overview
      • Markdown Support
    • Github Stars
    • External URL Support
    • Technology Tags

• Recent Posts

• Publications

  • Category Filter
  • Card
  • Abstract
  • Authors
  • Tags
  • Links
  • Gallery

• Accomplishment / Courses

  • Overview
  • Certificate

• Achievements Gallery

  • Image
  • Summary

List Page

• Post Cards
• Sidebar
• Pagination

Reading Page

• Hero Image
• Author Information
• Next & Previous Page Navigation
• Improve This Page Button
• Disqus Comment
• Option to navigate to list page

Tracking and Comments

• Google Analytics
• Disqus Comment

Shortcodes

• Image
• Split Page into Multiple Column
• Vertical space between two sections
• Alert
• Figure & sub-figure
• Tabs

Attribution

• Thanks Anup Deb for his design guidance.
• Many of the illustrations have been taken from iconscout.