pillon.hu

A személyes portfólió oldalam, ami egyben blogot és projekt-galériát is tartalmaz. A cél egy minimalista, animált felület volt, ahol a kibervédelmi tanulmányaim során írt jegyzetek és a saját projektek egy helyen elérhetők.

Funkciók

• Landing oldal animált LetterGlitch háttérrel és SplitText szövegekkel
• About oldal bemutatkozással és elérhetőségekkel
• Blog markdown fájlokból generálva, frontmatter alapú metaadatokkal (cím, dátum, leírás)
• Projects markdown alapú projekt-galéria, tech stack chip-ekkel és GitHub linkkel
• Külön részletes oldal minden bejegyzéshez és projekthez, react-markdown + remark-gfm renderrel
• Cloudflare Pages-re optimalizált statikus build (force-static, generateStaticParams)

Tech stack

• Next.js 16 App Router, Turbopack
• React 19 és TypeScript 5
• Tailwind CSS 4 + @tailwindcss/typography
• gray-matter a frontmatter parse-oláshoz
• react-markdown + remark-gfm a markdown renderhez
• Saját komponensek: LetterGlitch, SplitText, MarkdownViewer, PillNav

Felépítés

app/
  page.tsx              # landing
  about/page.tsx        # bemutatkozó
  blog/                 # blog lista + [slug] aloldal
  projects/             # projekt lista + [slug] aloldal
lib/
  posts.ts              # blog markdown loader
  projects.ts           # projekt markdown loader
posts/                  # blog markdown fájlok
projects/                # projekt markdown fájlok
components/             # animációk, nav, markdown viewer

Tanulságok

A projekt fő tanulsága a markdown-first content workflow kialakítása volt: a tartalom (blog bejegyzések, projektek) sima .md fájlokban él a repóban, frontmatterben tárolt metaadatokkal. Build-időben statikus HTML generálódik, így nincs szükség CMS-re vagy adatbázisra, és teljesen ingyen futtatható Cloudflare Pages-en.