diff --git a/app/manifest.ts b/app/manifest.ts index 3450af8..858a524 100644 --- a/app/manifest.ts +++ b/app/manifest.ts @@ -22,4 +22,4 @@ export default function manifest(): MetadataRoute.Manifest { background_color: '#ef1f1f', display: 'standalone', } -} \ No newline at end of file +} diff --git a/app/projects/page.tsx b/app/projects/page.tsx new file mode 100644 index 0000000..9c26dc4 --- /dev/null +++ b/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 { + 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 ( +
+
+

{meta.title}

+

{meta.description}

+
{content}
+
+ + +
+ ) +} diff --git a/components/layout/navItems.tsx b/components/layout/navItems.tsx index 76a4a94..14d0727 100644 --- a/components/layout/navItems.tsx +++ b/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: , }, { href: '/tags', label: 'Tags', icon: }, + { href: '/projects', label: 'Projects', icon: }, { href: '/setup', label: 'Setup', icon: }, { href: '/feed.xml', diff --git a/components/post/Post.tsx b/components/post/Post.tsx index f0023e6..9b1f53d 100644 --- a/components/post/Post.tsx +++ b/components/post/Post.tsx @@ -23,7 +23,12 @@ export function Post({ post, isLatest, showImageSlot }: PostProps) { return (
{((isLatest && coverImage) || showImageSlot) && ( -
+
{coverImage && }
)} diff --git a/content/pages/about.md b/content/pages/about.md index e427bd3..0eb2ace 100644 --- a/content/pages/about.md +++ b/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. @@ -38,4 +38,4 @@ Living in Czechia offers a solid blend of modern comfort and rich culture — a --- -Feel free to look around, or reach out at [f.borisjuk@hangerthem.com](mailto:f.borisjuk@hangerthem.com) or on [GitHub](https://github.com/HangerThem). \ No newline at end of file +Feel free to look around, or reach out at [f.borisjuk@hangerthem.com](mailto:f.borisjuk@hangerthem.com) or on [GitHub](https://github.com/HangerThem). diff --git a/content/pages/projects.md b/content/pages/projects.md new file mode 100644 index 0000000..06b59a0 --- /dev/null +++ b/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). diff --git a/content/posts/life-update-new-chapter.md b/content/posts/life-update-new-chapter.md index d1e1a1a..8931f92 100644 --- a/content/posts/life-update-new-chapter.md +++ b/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 diff --git a/content/posts/vigilare-custom-dashboard.md b/content/posts/vigilare-custom-dashboard.md index 92e2af9..121632b 100644 --- a/content/posts/vigilare-custom-dashboard.md +++ b/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 diff --git a/lib/tags.ts b/lib/tags.ts index d651c39..837f9df 100644 --- a/lib/tags.ts +++ b/lib/tags.ts @@ -43,4 +43,4 @@ export function getPostsByTag(tagSlug: string) { } return getAllPostsMeta().filter((post) => post.tags?.includes(tag)) -} \ No newline at end of file +} diff --git a/public/posts/bitez-dashboard.png b/public/posts/bitez-dashboard.png new file mode 100644 index 0000000..4d92a5c Binary files /dev/null and b/public/posts/bitez-dashboard.png differ diff --git a/public/posts/linkboard-editor.png b/public/posts/linkboard-editor.png new file mode 100644 index 0000000..a230361 Binary files /dev/null and b/public/posts/linkboard-editor.png differ diff --git a/public/posts/linkboard-new.png b/public/posts/linkboard-new.png new file mode 100644 index 0000000..526c35e Binary files /dev/null and b/public/posts/linkboard-new.png differ diff --git a/public/posts/linkboard-old.png b/public/posts/linkboard-old.png new file mode 100644 index 0000000..52f0cd2 Binary files /dev/null and b/public/posts/linkboard-old.png differ