riesinger.dev

Hi there 👋 You've found my personal website and blog.

Built with Hugo and plain CSS; served by Caddy.

Local development

Run hugo server and open http://localhost:1313/. Use hugo for a production build.

Design system

All pages use the Pocket ID-inspired theme: locally hosted Instrument Serif for the homepage name and main page titles, system sans-serif for section headings and body text, neutral surfaces, rounded cards, and automatic light/dark modes. No Tailwind or frontend build dependencies are needed.

• assets/css/base.css owns shared theme tokens, typography, navigation, and footer.
• assets/css/main.css owns the homepage, archives, articles, projects, and reference tables.
• assets/css/finance.css adds finance-specific layouts without redefining the shared theme.
• layouts/partials/icon.html contains the shared inline icons.

The editorial R in static/icon.svg is outlined from the site's Instrument Serif typeface, with slightly strengthened strokes for small sizes. This vector master has no runtime font dependency and is used in the personal-site header and as the SVG favicon. Its colors adapt to light/dark preferences. PNG and ICO exports use the fixed dark tile; the Apple touch icon is opaque for the platform's own mask.

Icon URLs carry the v=2 revision to avoid stale browser caches. When replacing the artwork, update that revision in the header, head links, and web manifest.

Regenerate the raster exports with ImageMagick:

magick -background none -density 1536 static/icon.svg -resize 1024x1024 \
  -depth 8 -strip /tmp/riesinger-icon-master.png
for size in 16 32; do
  magick /tmp/riesinger-icon-master.png -resize "${size}x${size}" "static/favicon-${size}x${size}.png"
done
for size in 192 512; do
  magick /tmp/riesinger-icon-master.png -resize "${size}x${size}" "static/android-chrome-${size}x${size}.png"
done
magick /tmp/riesinger-icon-master.png -resize 180x180 -background '#171717' \
  -alpha remove -alpha off static/apple-touch-icon.png
magick /tmp/riesinger-icon-master.png -define icon:auto-resize=48,32,16 static/favicon.ico

The main archive's tag filter is progressively enhanced: without JavaScript, all entries remain visible. Wide reference pages use wide: true in frontmatter.

Same-origin navigation uses native CSS View Transitions from base.css, with a steady header and a quick page fade by default. Writing, project, and investment card titles marked data-transition-title move into the destination main h1 over 320ms; the remaining content then fades in over 180ms.

assets/js/page-transitions.js pairs only the selected title through the native pageswap / pagereveal events. Its classic script deliberately loads in the head before the first render; do not add async, defer, or type="module". It hands off an ephemeral source/destination URL pair through session storage, consumes it on arrival, and clears temporary transition names when finished. New card title markers must be inside their destination links.

Reduced-motion preferences disable all page transitions. Without JavaScript, the required browser APIs, or session storage, navigation keeps the basic fade where supported, otherwise ordinary page changes. No client-side router is used; same-page anchors and opening links in a new tab retain their native behavior.

Finance introduction

The German learning area starts at /finance-intro/. Its layouts live in layouts/finance-intro/ and use the same shared design system as the main site. The finance area does not require JavaScript.

Content lives in content/finance-intro/. Each investment page defines its category (classic or market), weight, label, summary, a short benefit and drawback for the overview, and benefits / drawbacks lists for the detail page. The overview and related-topic links are generated from these pages.

Keep explanations brief, cite authoritative sources, and link unfamiliar terms to the explicit anchors in glossar.md. The glossary navigation is generated from its headings.