PaperModAlpha is a Hugo theme based on theme hugo-PaperMod. I wanted to add more features and customization to the original theme as required for my personal site, I decided to maintain my own fork (I didn't want to keep overwriting a bunch of files as a fork workflow is much cleaner).

• Support to float Table of Content box to right or left (it only shows on the side when minimum screen size is 1440px)

  params:
    TocSide: "right" # or 'left'

• Option to disable social icons in home.yaml in data dir

  showSocialIcons: false # or 'true'

• Option to show list of dynamic tags/ topics in home.yaml in data dir

  showTags: true # or 'false'
  tagsTitle: | # Optional, show any custom title if showTags is set to true
    example: `You can find blogs about:`

• Option to add animated wave icon in home.yaml in data dir

  showWaveIcon: true # or 'false'

• Option to show terminal window in home.yaml in data dir with support for custom query and response

  showTerminalWindow: true # or 'false'
  terminalQuery: whoami # require showTerminalWindow to true
  terminalResponse: | # require showTerminalWindow to true
    Curious, Full Stack Developer

  

• Option to configure about page via about.yaml in data dir

  aboutInfo: |
    Hello, I’m Yogesh Jain 👋
  aboutInfoMore: |
    Some more detailed descriotio here
  imageUrl: "images/profile.png" # optional
  imageTitle: Yogesh Jain # set's image title if imageUrl is set
  imageWidth: 250 # set's image width if imageUrl is set
  imageHeight: 250 # set's image width if imageUrl is set
  imageCaption: "Captured by [NA](#)" # set's image caption if imageUrl is set
  aboutInfo: |
    Hello, I’m Yogesh Jain 👋
  contactInfo: |
    You can reach out to me via email `contactemail[at]gmail[dot]com`
  showSocialIcons: true # or 'false'

  Configure the layout to about in markdown page

  ---
  title: "About Me"
  layout: "about"
  summary: "about page"
  ---

• Add support for timeline

  - year: "2024"
    events:
      - |
        ### Experience
        Write Something!
  - year: "2018"
    events:
      - |
        #### Education
        `tag1` `tag2` `tag3`
        This is the first multi-line text entry.
        It spans multiple lines and supports markdown
  
        🔗[link-text](https://curiousone.in)
      - |
        #### Another Achivement
        And here is the another entry with
        additional lines.
        - abc
        - xyz

  Configure the layout to timeline in markdown page

  ---
  title: "My Timeline"
  layout: "timeline"
  summary: "My timeline page"
  ---

• Implemented a Sticky Horizontal Bar on the blog content page, positioned at the top during scrolling - This feature serves to visually represent the reader's progress, offering a dynamic indicator of how much content has been consumed

• Add support for automatic switching of image sources between light and dark modes by adding a class toggleDarkMode to image tags. JavaScript will append the -dark suffix to the image filename for dark mode and remove it for light mode. Ensure that dark mode images are named with the -dark suffix in the source path

  Example:

  <!-- Light mode -->
  <img class="toggleDarkMode" src="my-image-path.jpg"/>

  <!-- Dark mode -->
  <!-- Suffixed '-dark' to image name -->
  <img class="toggleDarkMode" src="my-image-path-dark.jpg"/>

• Add support for Image Slider using swiper.js

  Example:

  {{< slider >}}
  /images/your-image-dir/image-1.png|Image 1 Caption goes here
  /images/your-image-dir/image-2.png|Image 2 Caption goes here
  /images/your-image-dir/image-3.png|Image 3 Caption goes here
  /images/your-image-dir/image-4.png|Image 4 Caption goes here
  /images/your-image-dir/image-5.png|Image 5 Caption goes here
  {{< /slider >}}
  

1. Follow Hugo Docs's - Quick Start guide to install Hugo.
   (Make sure you install Hugo >= v0.112.4)

2. Create a new Hugo site

   hugo new site MyNewSite --format yaml
   # replace MyNewSite with name of your website

   Note:

   • Older versions of Hugo may not support --format yaml
   • Read more here about Hugo Docs's - hugo new site command

After you have created a new site, follow the below steps to add PaperModAlpha

• Themes reside in MyNewSite/themes directory.
• PaperMod will be installed in MyNewSite/themes/PaperModAlpha

Expand Method 1 - Git Clone

INSTALL : Inside the folder of your Hugo site MyNewSite, run:

git clone https://github.com/yogeshjain96/PaperModAlpha themes/PaperModAlpha --depth=1

UPDATE: Inside the folder of your Hugo site MyNewSite, run:

cd themes/PaperMod
git pull

Expand Method 2 - Git Submodule (recomended)

INSTALL : Inside the folder of your Hugo site MyNewSite, run:

git submodule add --depth=1 https://github.com/yogeshjain96/PaperModAlpha.git themes/PaperModAlpha
git submodule update --init --recursive # needed when you reclone your repo (submodules may not get cloned automatically)

You may use --branch v7.0 to end of above command if you want to stick to specific release. Read more about git submodules here.

UPDATE: Inside the folder of your Hugo site MyNewSite, run:

git submodule update --remote --merge

theme: ["PaperModAlpha"]

As PaperModAlpha is a custom version of PaperMod theme, existing doc version is still valid. Documentation of PaperMod theme can be found here: 📚 Wiki

Aditionally, following configs are also supported

# theme: ["PaperModAlpha"]
params:
  TocSide: 'right'  # or 'left'

Create home.yaml sample file in data dir

showSocialIcons: false  # or 'true'
showTags: true # or 'false'
tagsTitle: | # Optional, show any custom title if showTags is set to true
  example: `You can find blogs about:`
showWaveIcon: true # or 'false'
showTerminalWindow: true # or 'false'
terminalQuery: whoami # require showTerminalWindow to be true
terminalResponse: | # require showTerminalWindow to be true
  Yogesh Jain

Create about.yaml sample file in data dir

imageUrl: "images/profile.png" # optional
imageTitle: Yogesh Jain # set's image title if imageUrl is set
imageWidth: 250 # set's image width if imageUrl is set
imageHeight: 250 # set's image width if imageUrl is set
imageCaption: "Captured by [NA](#)" # set's image caption if imageUrl is set
aboutInfo: |
  Hello, I’m Yogesh Jain 👋
  Some description here
aboutInfoMore: |
  Some more detailed descriotio here
contactInfo: |
  You can reach out to me via email `contactemail[at]gmail[dot]com`
showSocialIcons: true # or 'false'

Create timeline.yaml sample file in data dir

- year: "2021"
  events:
  - |
    ### Experience
    Write Something!
- year: "2022"
  events:
  - |
    #### Achivement
    `tag1` `tag2` `tag3`

    This is the first multi-line text entry.
    It spans multiple lines and supports markdown

    🔗[link-text](https://curiousone.in)

  - |
    #### Another Achivement

    And here is the another entry with
    additional lines.
    - abc
    - xyz

• Star 🌟 this repository.
• Help spread the word about PaperModAlpha by sharing it on social media and recommending it to your friends.