Personal Blog & Portfolio

Hugo Site (Production)

The live site at blog.jfkeci.com is built with Hugo — a Go-based static site generator. Content is authored in Markdown with YAML frontmatter and rendered through a custom template hierarchy.

Key features:

• Multi-language support — English (default) and Croatian (/hr/ paths) using Hugo's i18n system, content file suffixes (.hr.md), and language-specific data files
• Dark mode — html.dark class toggle with localStorage persistence and system preference fallback
• Interactive CV — Tabbed sections (About, Experience, Education, Skills, Projects) driven by YAML data files with downloadable PDF
• Blog — Client-side search with category filtering, Prism.js syntax highlighting, and MermaidJS diagrams via shortcode
• Data-driven content — Projects, experience, education, and skills loaded from data/*.yaml with per-language overrides
• SEO — JSON-LD structured data (Person, Article, Website schemas), OpenGraph/Twitter meta tags
• Deployment — deploy.sh builds with hugo --minify and force-pushes /public to gh-pages

Architecture: Template inheritance via baseof.html with section-specific overrides. Tailwind CSS via CDN with inline config. Partials for reusable components (header, footer, language switcher, schema generators).

Astro Rewrite (Experimental)

An experimental rewrite of the site using Astro 5 with a modern toolchain. Located in the astro-site/ subdirectory.

What changed:

• Tailwind CSS v4 via Vite plugin (replaces CDN approach) with CSS-first configuration using @theme directives
• Shiki dual-theme syntax highlighting (replaces Prism.js) — github-light / github-dark themes with automatic switching
• Content Collections with Zod-validated schemas for type-safe frontmatter
• View Transitions for smooth client-side page navigation
• Component architecture — .astro single-file components organized by section
• TypeScript data files replace YAML — data/experience.ts, data/skills.ts, etc.
• Image optimization via Sharp integration
• Scroll animations using IntersectionObserver-based reveal effects

Stack: Astro 5, TypeScript, Tailwind CSS v4, Shiki, Geist fonts, Lucide icons, @astrojs/sitemap, @astrojs/rss