How do I add the Tech Stack block to a Hugo site?

Add a "block: tech-stack" entry to the sections list in your page's front matter, then fill in the content fields. HugoBlox renders it automatically — copy the example config above as a starting point.

Is the Tech Stack block free to use?

Yes. Every HugoBlox block is free and open-source under the MIT license — use it in personal and commercial projects, with no attribution required.

Can I customize the Tech Stack block?

Yes. It exposes 8 content options, plus 3 design options, and inherits the shared block settings for background, spacing, and colors. You can also describe the changes you want to Hugo Chat AI and it will edit the config for you.

Does the Tech Stack block work with any Hugo theme?

The block ships in the open-source HugoBlox kit. Add the kit to any Hugo site and the block becomes available in your page sections — there is no theme lock-in.

hugoblox.com/blocks/tech-stack

Profile & resumeFree · MITHugo

Tech Stack block

Show the technologies you work with — icons grouped by category, with optional proficiency.

Customize with AI View source

Add it to any Hugo page's sections list — no build step.

v1.0.0Version

8Options

MITLicense

Quick start

Add the Tech Stack block

Drop this into your page's front matter, under the sections list. Edit the values, and HugoBlox renders the block — no build step.

Add to your page's sections

- block: tech-stack
  id: skills
  content:
    title: Tech Stack
    subtitle: Technologies I use to build things
    categories:
      - name: Languages
        items:
          - name: TypeScript
            icon: devicon/typescript
            level: expert
          - name: Python
            icon: devicon/python
            level: advanced
          - name: Go
            icon: devicon/go
            level: intermediate
      - name: Frontend
        items:
          - name: React
            icon: devicon/react
          - name: Next.js
            icon: devicon/nextjs
          - name: Tailwind CSS
            icon: devicon/tailwindcss
  design:
    style: grid
    show_levels: true

Overview

About the Tech Stack block

A visual grid display of technologies and skills organized by category, with icon support and optional proficiency indicators.

Features

Category Organization: Group technologies by type (Languages, Frontend, Backend, etc.)
Icon Support: DevIcon, brand icons, or Heroicons integration
Proficiency Levels: Optional skill level indicators (expert, advanced, intermediate, beginner)
Glass Morphism: Modern card design with hover effects
Responsive Grid: Adapts from 2 to 6 columns based on screen size
Multiple Styles: Grid or flat list layout options

Usage

- block: tech-stack
  id: skills
  content:
    title: "Tech Stack"
    subtitle: "Technologies I use to build things"
    categories:
      - name: Languages
        items:
          - name: TypeScript
            icon: devicon/typescript
            level: expert
          - name: Python
            icon: devicon/python
            level: advanced
          - name: Go
            icon: devicon/go
            level: intermediate
      - name: Frontend
        items:
          - name: React
            icon: devicon/react
          - name: Next.js
            icon: devicon/nextjs
          - name: Tailwind CSS
            icon: devicon/tailwindcss
      - name: Backend
        items:
          - name: Node.js
            icon: devicon/nodejs
          - name: PostgreSQL
            icon: devicon/postgresql
          - name: Redis
            icon: devicon/redis
      - name: DevOps
        items:
          - name: Docker
            icon: devicon/docker
          - name: AWS
            icon: devicon/amazonwebservices
          - name: GitHub Actions
            icon: brands/github
  design:
    style: grid
    show_levels: true

Parameters

Content

Parameter	Type	Default	Description
`title`	string	-	Section title
`subtitle`	string	-	Section subtitle
`categories`	array	required	Array of category objects
`categories[].name`	string	-	Category heading
`categories[].items`	array	required	Technologies in category
`categories[].items[].name`	string	required	Technology name
`categories[].items[].icon`	string	-	Icon identifier
`categories[].items[].level`	string	-	Proficiency level

Design

Parameter	Type	Default	Description
`style`	string	`grid`	Display style (`grid` or `list`)
`show_levels`	boolean	`false`	Show proficiency indicators

Icon Support

The block supports multiple icon sources:

DevIcon: devicon/react, devicon/typescript, devicon/nodejs
Brand Icons: brands/github, brands/linkedin
Heroicons: code-bracket, server, cloud

Proficiency Levels

Level	Color	Bar Width
`expert`	Emerald	100%
`advanced`	Primary	75%
`intermediate`	Amber	50%
`beginner`	Gray	25%

Styling

The block uses glass morphism styling with:

Semi-transparent backgrounds
Backdrop blur effects
Subtle borders that glow on hover
Gradient hover effects

Flexibility

Layouts & variants

Switch the block's design with these presets — no custom CSS.

styleDisplay style

griddefaultlist

Reference

Configuration

Every option the Tech Stack block accepts, generated from its schema.

Content options

Properties set under the block's content key.

Property	Type	Default	Description
`title`	`string`	—	Section title (supports Markdown)
`subtitle`	`string`	—	Section subtitle (supports Markdown)
`categories`required	`object[]`	—	Categories of technologies
`categories[].name`	`string`	—	Category name
`categories[].items`required	`object[]`	—	Technologies in this category
`categories[].items[].name`required	`string`	—	Technology name
`categories[].items[].icon`	`string`	—	Icon identifier (supports devicon/, brands/, or hero icons)
`categories[].items[].level`	`expert \| advanced \| intermediate \| beginner`	—	Proficiency level (optional)

Design options

Properties set under the block's design key — shared background, spacing, and color settings apply on top.

Property	Type	Default	Description
`style`	`grid \| list`	grid	Display style
`show_levels`	`boolean`	false	Show proficiency level indicators
`animations`	`boolean`	true	Enable hover and stagger animations

Compose

Works well with

Blocks that pair naturally with Tech Stack on the same page.

Dev Hero Portfolio Resume Skills

Frequently asked

Tech Stack block FAQ

Add a "block: tech-stack" entry to the sections list in your page's front matter, then fill in the content fields. HugoBlox renders it automatically — copy the example config above as a starting point.

Ready to build with the Tech Stack block?

Customize with AI View source