Projects subpage

app/projects/page.tsx

@@ -0,0 +1,35 @@
+import { metadata } from '@/app/metadata'
+import { TableOfContents } from '@/components/post/TableOfContents'
+import { getPostBySlug } from '@/lib/posts'
+import type { Metadata } from 'next'
+
+export async function generateMetadata(): Promise<Metadata> {
+  const { meta } = await getPostBySlug('projects', 'content/pages')
+  return {
+    title: `${meta.title} | ${metadata.title!.toString()}`,
+    description: meta.description,
+    openGraph: {
+      type: 'website',
+      title: `${meta.title} | ${metadata.title!.toString()}`,
+      description: meta.description,
+      url: process.env.SITE_URL + `/projects`,
+      siteName: metadata.title!.toString(),
+    },
+  }
+}
+
+export default async function ProjectsPage() {
+  const { meta, content, tableOfContents } = await getPostBySlug('projects', 'content/pages')
+
+  return (
+    <main className="flex w-full">
+      <article className="max-w-3xl 2xl:max-w-4xl mx-auto px-4 py-8 mb-8 lg:py-16 min-w-0">
+        <h1 className="text-4xl font-bold mb-4">{meta.title}</h1>
+        <p className="text-fg text-lg mb-4">{meta.description}</p>
+        <div className="prose">{content}</div>
+      </article>
+
+      <TableOfContents items={tableOfContents} />
+    </main>
+  )
+}

components/layout/navItems.tsx

@@ -1,4 +1,4 @@
-import { ChartColumnStacked, GitBranch, Home, Info, Rss, Server, Tags } from 'lucide-react'
+import { ChartColumnStacked, GitBranch, Home, Info, Rss, Server, Tags, CodeXml } from 'lucide-react'
 
 type NavItem = {
   href: string
@@ -18,6 +18,7 @@ export const navItems: NavItem[] = [
     icon: <ChartColumnStacked className={navIconsClassName} />,
   },
   { href: '/tags', label: 'Tags', icon: <Tags className={navIconsClassName} /> },
+  { href: '/projects', label: 'Projects', icon: <CodeXml className={navIconsClassName} /> },
   { href: '/setup', label: 'Setup', icon: <Server className={navIconsClassName} /> },
   {
     href: '/feed.xml',

components/post/Post.tsx

@@ -23,7 +23,12 @@ export function Post({ post, isLatest, showImageSlot }: PostProps) {
   return (
     <article className={cn('flex flex-col gap-4', isLatest && 'items-center md:flex-row')}>
       {((isLatest && coverImage) || showImageSlot) && (
-        <div className={cn(isLatest && coverImage ? 'flex-1 w-full' : 'h-60', !coverImage && 'hidden md:block')}>
+        <div
+          className={cn(
+            isLatest && coverImage ? 'flex-1 w-full' : 'h-60',
+            !coverImage && 'hidden md:block',
+          )}
+        >
           {coverImage && <ImageWrapper src={coverImage} alt={coverImageAlt ?? title} isListing />}
         </div>
       )}

content/pages/about.md

@@ -22,7 +22,7 @@ I'm active in [gly.cz](https://gly.cz), a webring community I co-founded with my
 ## My Passions
 
 - **Reading** — I have a deep appreciation for anything with a compelling story and excellent writing. Tolkien remains a favorite, and I've been pulled into deep dives on mythology, theology, and obscure traditions ever since.
-- **Video Games** — I lean toward rich narratives, like *Hollow Knight*, alongside relaxing builders like *Minecraft*, *Stardew Valley*, and *Terraria*. Not much of a BR or FPS person.
+- **Video Games** — I lean toward rich narratives, like _Hollow Knight_, alongside relaxing builders like _Minecraft_, _Stardew Valley_, and _Terraria_. Not much of a BR or FPS person.
 - **TTRPG** — A forever Dungeon Master at heart. World-building, storytelling, and the shared creative chaos of a good session are hard to beat. I'm not actively running a table right now, but I still enjoy reading new systems and stealing ideas for worlds I haven't built yet.
 - **Programming** — Web development is my main craft, but I like poking at whatever's unfamiliar. Lately that's meant self-hosting, privacy tooling, and running my own Linux infrastructure end to end.
 

content/pages/projects.md

@@ -0,0 +1,146 @@
+---
+title: Projects
+description: A collection of my personal and professional projects, showcasing my skills, creativity, and problem-solving abilities. Explore the diverse range of work I've done, from software development to design, and see how I approach challenges and deliver innovative solutions.
+---
+
+## Bitez
+
+**Confidentiality Note:** This project is built under NDA. Details shared here reflect publicly sharable information only.
+
+B2B social media management platform designed for restaurants and cafes. Streamlines content creation, scheduling, and analytics for food service businesses managing multiple locations.
+
+It included real-time chat and media processing job queues, allowing users to upload images and videos, which were then processed asynchronously for optimal performance.
+
+Alongside the core platform, I developed a companion mobile app for iOS and Android, later gravitating towards a Progressive Web App (PWA) approach for broader accessibility and ease of updates.
+
+**Tech Stack:** Next.js, TypeScript, Supabase, Prisma, PostgreSQL, Redis, BullMQ
+
+**Status:** Maintained
+
+**Screenshots:**
+![Bitez Dashboard (Some parts were redacted to comply with confidentiality)](bitez-dashboard.png)
+
+---
+
+## Linkboard
+
+Self-hosted alternative to Linktree, a centralized link management and sharing solution you can deploy on your own infrastructure.
+
+The first build of this project was a learning exercise for me and thus was not production-ready. I am currently working on a complete rewrite of the project, focusing on ease of deployment, user experience, and maintainability. The new version will be open-source and available on GitHub.
+
+The new version has focus on ease of use for not tech-savvy users, with a simple and intuitive interface for managing links, analytics, and customization options.
+
+**Tech Stack:** Next.js, TypeScript, Prisma, SQLite
+
+**GitHub:** [HangerThem/linkboard](https://github.com/HangerThem/linkboard)
+
+**Live (old version):** [socials.hangerthem.com](https://socials.hangerthem.com)
+
+**Status:** Active / Maintained
+
+**Screenshots:**
+![Linkboard UI (Old Version)](linkboard-old.png)
+![Linkboard UI (New Version)](linkboard-new.png)
+![Linkboard Editor](linkboard-editor.png)
+
+---
+
+## LRC Audio Player
+
+NPM package that synchronizes LRC (lyrics file format) display with audio playback. Useful for music apps, karaoke platforms, and lyric-synced UIs.
+
+It also has React wrapper support, allowing developers to easily integrate it into React applications.
+
+**Tech Stack:** TypeScript, Audio API, NPM
+
+**GitHub:** [HangerThem/lrc-audio-player](https://github.com/HangerThem/lrc-audio-player)
+
+**NPM Package:** [lrc-audio-player](https://www.npmjs.com/package/lrc-audio-player)
+
+**Status:** Maintained
+
+**Features:**
+
+- Real-time lyric synchronization
+- Customizable UI
+- Flexible timing formats
+- React wrapper for easy integration
+
+---
+
+## Social Network
+
+Personal learning project building a full-stack social network from scratch. It includes user authentication, profile management, post creation, and a basic feed system.
+
+**Tech Stack:** Next.js, TypeScript, Supabase, Prisma, PostgreSQL, better-auth
+
+**GitHub:** [HangerThem/socials-example](https://github.com/HangerThem/socials-example)
+
+**Status:** Active Development / Learning Project
+
+---
+
+## Venia
+
+Open-source cookie consent library with a strong anti-dark-pattern philosophy. Provides accessible, user-friendly consent management without manipulative UX patterns.
+
+It is designed to be framework-agnostic, with implementations for React and Vue, and a core library that can be integrated into any web application.
+
+For developers, it offers a CLI tool for easy setup and configuration, along with customizable components to fit various design needs.
+
+**Tech Stack:** TypeScript, React, Vue, Node.js
+
+**GitHub:** [HangerThem/venia](https://github.com/HangerThem/venia)
+
+**NPM Package (core):** [venia/core](https://www.npmjs.com/package/@venia-consent/core)
+
+**NPM Package (React):** [venia/react](https://www.npmjs.com/package/@venia-consent/react)
+
+**NPM Package (Vue):** [venia/vue](https://www.npmjs.com/package/@venia-consent/vue)
+
+**NPM Package (CLI):** [venia/cli](https://www.npmjs.com/package/@venia-consent/cli)
+
+**Status:** Maintained
+
+**Key Features:**
+
+- GDPR/CCPA compliant
+- No dark patterns
+- Accessible by default
+- Lightweight and customizable
+
+---
+
+## lighthouse-report-svg
+
+Converts Lighthouse audit results into SVG visualizations. Useful for CI/CD pipelines, performance dashboards, and automated reporting.
+
+**Tech Stack:** TypeScript, Node.js, SVG
+
+**GitHub:** [HangerThem/lighthouse-report-svg](https://github.com/HangerThem/lighthouse-report-svg)
+
+**Live Demo:** [lighthouse-report-svg.vercel.app](https://lighthouse-report-svg.vercel.app)
+
+**Status:** Maintained
+
+**Use Cases:**
+
+- Performance monitoring in CI/CD
+- Automated performance reports
+- Visual audit dashboards
+
+---
+
+## This blog
+
+This very blog is a personal project where I share my thoughts, tutorials, and insights on web development, programming, and technology trends.
+
+**Tech Stack:** Next.js, TypeScript, Tailwind CSS
+
+**Source Code:** [HangerThem/blog.hangerthem.com](https://git.hangerthem.com/HangerThem/blog.hangerthem.com)
+
+---
+
+## Summary
+
+All source code is available on [GitHub](https://github.com/HangerThem).

content/posts/life-update-new-chapter.md

@@ -1,5 +1,5 @@
 ---
-title: "Life Update: New Chapter"
+title: 'Life Update: New Chapter'
 description: Post about recent changes in my life, including dropping out of university, starting a new job, fitness progress, teaching, and balancing work and hobbies.
 date: 2025-02-20 19:15:00 +0200
 category: Life

content/posts/vigilare-custom-dashboard.md

@@ -1,5 +1,5 @@
 ---
-title: "Vigilare: A Local-First Productivity Dashboard"
+title: 'Vigilare: A Local-First Productivity Dashboard'
 description: Introducing Vigilare, a local-first, customizable productivity dashboard built with Next.js. Designed for developers and technical users, Vigilare offers a distraction-free way to manage links, notes, commands, and service status without logins or cloud dependencies.
 date: 2026-02-07 14:00:00 +0200
 category: Productivity