← Vissza a projectekhez

pillon.hu

2026. máj. 20.

Next.jsReactTypeScriptTailwindMarkdownCloudflare Pages

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.