Demo Blog

Welcome to the demo blog. You can customize (or remove) this section in the _index.md file in the blog folder. You can read about how to organize content in Hugo in the official docs.

The posts below are in the same folder (blog/) and can be in the supported formats by hugo (Markdown, HTML, Emacs Org Mode, AsciiDoc, Pandoc, or reStructuredText).

You can use translations as well.

Icons

Published on

Fri Feb 28, 2025

81 Words

The theme has multiple icons available for use.

You can see them rendered here:

threads:
bluesky:
x-twitter:
email:
user:
table-list:
download:
circle-info:
square-twitter:
square-facebook:
linkedin:
square-github:
circle-arrow-left:
circle-arrow-right:
circle-arrow-up:
circle-arrow-down:
quote-left:
face-smile:
square-arrow-up-right:
youtube:
square-xing:
instagram:
dribbble:
behance:
file-pdf:
codepen:
yelp:
cloud-arrow-down:
medium:
stack-overflow:
meetup:

Do you need more icons? You can check this github issue to check how to add your own, or if it’s relevant for the community you can request one via the issue tracker like @klangborste did.

Theme shortcodes

Published on

Fri Feb 14, 2025

1251 Words

Shortcodes are a convenient functionality of Hugo, allowing you to embed templates or layouts within other content.

Some of the example built-in shortcodes are Instagram posts, YouTube videos, QR codes, etc. You can find the full list in the official docs.

The theme provides custom shortcodes to allow you to customize your landing page as you want:

education-list: Displays a list of educational qualifications.
experience-list: Shows a list of professional experiences.
platform-links: Embeds links to various platforms with icons.
newsletter-section: Adds a section for newsletter subscription.
link: Creates a hyperlink with an icon.
experience-section: Inserts a detailed experience section.
contact-section: Adds a contact information section, with a customizable form and information.
client-and-work-section: Displays a section for clients and work.
about-section: About section, with image, buttons for call to action and image.
testimonial-section: Adds references from customers, colleagues, etc.
showcase:

The shortcodes can be customized with different arguments:

Create your own version of the site

Published on

Tue Feb 11, 2025

1498 Words

This article is a guide to help you create your own version of the site using Adritian. It will cover the main steps to get started with the theme, and how to customize it to your needs.

Creating a site

This theme is for the content management system Hugo, so that will be a pre-requirement. Make sure that you install the extended version of Hugo, as the theme uses SCSS for styling, as well as image optimization.

Other installation methods

Published on

Tue Feb 11, 2025

1292 Words

This is a guide that extends the default instructions offered in the theme readme.

Manual configuration

If you prefer to manually set your site, you need to replace the contents of your config file (hugo.toml) file by these:

hugo.toml configuration

baseURL = "<your website url>"
languageCode = "en"

[module]
[module.hugoVersion]
# We use hugo.Deps to list dependencies, which was added in Hugo 0.92.0
min = "0.92.0"

[[module.imports]]
path="github.com/zetxek/adritian-free-hugo-theme"

## Base mounts - so your site's assets are available
  [[module.mounts]]
    source = "archetypes"
    target = "archetypes"

  [[module.mounts]]
    source = "assets"
    target = "assets"

  [[module.mounts]]
    source = "i18n"
    target = "i18n"

  [[module.mounts]]
    source = "layouts" 
    target = "layouts"

  [[module.mounts]]
    source = "static"
    target = "static"

# The following mounts are required for the theme to be able to load bootstrap
# Remember also to copy the theme's `package.json` to your site, and run `npm install`
[[module.mounts]]
  source = "node_modules/bootstrap/scss"
  target = "assets/scss/bootstrap"

[[module.mounts]]
  source = "node_modules/bootstrap/dist/js"
  target = "assets/js/bootstrap"

[[module.mounts]]
  source = "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
  target = "assets/js/vendor/bootstrap.bundle.min.js"

## Optional, if you want print improvements (to PDF/printed)
[[module.mounts]]
source = "node_modules/bootstrap-print-css/css/bootstrap-print.css"
target = "assets/css/bootstrap-print.css"

[params]

  title = 'Your website title'
  description = 'Your website description'
  sections = ["showcase", "about", "education", "experience", "client-and-work", "testimonial", "contact", "newsletter"]

  # If you want to display an image logo in the header, you can add it here
  # logo = '/img/hugo.svg'
  homepageExperienceCount = 6

  [params.analytics]
  ## Analytics parameters.
  ### Supported so far: Vercel (Page Insights, Analytics)
  ### And Google (Tag Manager, Analytics)

  # controls vercel page insights - disabled by default
  # to enable, just set to true
  vercelPageInsights = false
  vercelAnalytics = false
  
  # google analytics and tag manager. to enable, set "enabled" to true
  # and add the tracking code (UA-something for analytics, GTM-something for tag manager)
  [params.analytics.googleAnalytics]
      code = "UA-XXXXX-Y"
      enabled = false
  [params.analytics.googleTagManager]
      code = "GTM-XXXXX"
      enabled = false

[build]
  [build.buildStats]
    disableClasses = false
    disableIDs = false
    disableTags = false
    enable = true

[params.languages.selector.disable]
  footer = false

[languages]
  [languages.en]
    disabled = false
    languageCode = 'en'
    languageDirection = 'ltr'
    languageName = 'English'
    title = ''
    weight = 0

    [languages.en.menus]
      [[languages.en.menus.header]]
        name = 'About'
        URL = '#about'
        weight = 2
      [[languages.en.menus.header]]
        name = 'Portfolio'
        URL = '#portfolio'
        weight = 3
      #  [[languages.en.menus.header]]
      #  name = "Experience"
      #  URL = "#experience"
      #  weight = 4

      [[languages.en.menus.header]]
        name = "Blog"
        URL = "/blog"
        weight = 5

      [[languages.en.menus.header]]
        name = "Contact"
        URL = "#contact"
        weight = 6

      [[languages.en.menus.footer]]
        name = "About"
        URL = "#about"
        weight = 2

      [[languages.en.menus.footer]]
        name = "Portfolio"
        URL = "#portfolio"
        weight = 3

      [[languages.en.menus.footer]]
        name = "Contact"
        URL = "#contact"
        weight = 4


  [languages.es]
    disabled = false
    languageCode = 'es'
    languageDirection = 'ltr'
    languageName = 'Español'
    title = ''
    weight = 0
      [[languages.es.menus.header]]
        name = 'Sobre mi'
        URL = '/es/#about'
        weight = 2
      [[languages.es.menus.header]]
        name = 'Portfolio'
        URL = '/es/#portfolio'
        weight = 3

      #  [[languages.es.menus.header]]
      #  name = "Experiencia"
      #  URL = "/es/#experience"
      #  weight = 4

      [[languages.es.menus.header]]
        name = "Blog"
        URL = "/es/blog"
        weight = 5

      [[languages.es.menus.header]]
        name = "Contacto"
        URL = "/es/#contact"
        weight = 6

      [[languages.es.menus.footer]]
        name = "Sobre mi"
        URL = "/es/#about"
        weight = 2

      [[languages.es.menus.footer]]
        name = "Portfolio"
        URL = "/es/#portfolio"
        weight = 3

      [[languages.es.menus.footer]]
        name = "Contact"
        URL = "/es/#contact"
        weight = 4

  [languages.fr]
    disabled = false
    languageCode = 'fr'
    languageDirection = 'ltr'
    languageName = 'Français'
    title = ''
    weight = 0

    [languages.fr.menus]
      [[languages.fr.menus.header]]
        name = 'About'
        URL = '#about'
        weight = 2
      [[languages.fr.menus.header]]
        name = 'Portfolio'
        URL = '#portfolio'
        weight = 3
      #  [[languages.fr.menus.header]]
      #  name = "Experience"
      #  URL = "#experience"
      #  weight = 4

      [[languages.fr.menus.header]]
        name = "Blog"
        URL = "/blog"
        weight = 5

      [[languages.fr.menus.header]]
        name = "Contact"
        URL = "#contact"
        weight = 6

      [[languages.fr.menus.footer]]
        name = "About"
        URL = "#about"
        weight = 2

      [[languages.fr.menus.footer]]
        name = "Portfolio"
        URL = "#portfolio"
        weight = 3

      [[languages.fr.menus.footer]]
        name = "Contact"
        URL = "#contact"
        weight = 4

# Plugins
[params.plugins]

  # CSS Plugins
  [[params.plugins.css]]
  URL = "css/custom.css"
  [[params.plugins.css]]
  URL = "css/adritian-icons.css"
  ## Optional, if you want print improvements (to PDF/printed)
  [[params.plugins.css]]
  URL = "css/bootstrap-print.css"
  
  # JS Plugins
  [[params.plugins.js]]
  URL = "js/rad-animations.js"
  [[params.plugins.js]]
  URL = "js/sticky-header.js"
  [[params.plugins.js]]
  URL = "js/library/fontfaceobserver.js"

  # SCSS Plugins
  [[params.plugins.scss]]
  URL = "scss/adritian.scss"


# theme/color style 
[params.colorTheme]

## the following configuration would disable automatic theme selection
#  [params.colorTheme.auto]
#    disable = true
#  [params.colorTheme.forced]
#    theme = "dark"

## the following parameter will disable theme override in the footer
#  [params.colorTheme.selector.disable]
#  footer = true


## by default we allow override AND automatic selection

[params.blog]
layout = "default" # options: default, sidebar
sidebarWidth = "25" # percentage width of the sidebar
showCategories = true
showRecentPosts = true
recentPostCount = 5
listStyle = "summary" # options: simple, summary

Get the module: hugo mod get -u
Execute hugo mod npm pack - this will generate a package.json file in the root folder of your site, with the dependencies for the theme.
Execute npm install - this will install the dependencies for the theme (including bootstrap)
(Optional, to override the defaults) Create a file data/homepage.yml with the contents of the exampleSite/data/homepage.yml file, and customize to your needs (note: this file is not included in your theme if you use hugo modules, download it manually from the repository)

Traditional Installation (as git submodule)

If you prefer not to use Hugo Modules, you can still install the theme as a git submodule. The guide is very similar to official “Quick Start”, just changing the theme URL in the git submodule add command:

Sample content: featured image

Published on

Mon Jun 24, 2024

196 Words

Sample blog content. Like a lorem ipsum but saying something more interesting.

Example image

Welcome to the world of “Content Ipsum,” the fresh alternative to the classic lorem ipsum. It’s the perfect blend for designers and writers who crave a dash of creativity and meaning in their placeholder text. Imagine a text that not only fills the space but also sparks the imagination, a text that weaves tales of innovation, inspiration, and the endless possibilities that creativity brings.

Sample content: formatting styles

Published on

Fri Jun 21, 2024

302 Words

Sample blog content. Like a lorem ipsum but saying something more interesting.

We will show some content that is supported:

Basic Syntax

Headings

# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Emphasis

*This text will be italic*
_This will also be italic_

**This text will be bold**
__This will also be bold__

_You **can** combine them_

This text will be italic