Website History

Hidden dashboard - changelog

February 12, 2026

Battle Game History Page

› Added `/research/games/battle/history` page showing the battle game's full change log
› Reads `HISTORY.md` from the battle game's static directory at build time
› Timeline layout with color-coded categories (Added/Changed/Fixed/Removed)
› "History" button added to the battle game card on the games catalog page
› Summary section skipped; detailed per-date entries displayed

Last Updated Date on Research Games

› Added "Updated <date>" display next to tech label on the games catalog page
› Date is pulled automatically from the last git commit on the battle game `.pck` file
› Uses a server-side loader (`+page.server.ts`) so it stays in sync without manual updates

February 10, 2026

Research Games Catalog

› Created hidden `/research/games` page listing game prototypes with card-based layout
› Battle Game listed with link, description, tech stack, and status badge
› Dark mode support with explicit text color overrides
› Site structure updated: Games nested under new Research folder, linking to catalog page
› Added embedded game page at `/research/games/battle` with iframe wrapper
› Catalog offers both "Play Embedded" (within site) and "Fullscreen" (standalone) options

Battle Game (Godot Export)

› Added Godot HTML5 game export to `static/external_projects/battle_game/`
› Added `.wasm` file tracking to `.gitattributes` for Git LFS
› Linked game from the hidden `/site` structure page

February 8, 2026

Print Styles for Blog Posts

› Added `@media print` rules to optimize blog posts for printing and PDF export
› Hides header, footer, scroll-to-top, reading progress, share buttons, keyboard shortcuts, post navigation, table of contents, tags, reader button, back-to-blogs button, and hit counter
› Removes background gradients and shadows for clean paper output
› Expands content to full page width
› Appends URLs after links so readers can see where links point (except for internal anchor links)

Active Page Highlighting in Navigation

› Nav links now highlight the current page with white text, subtle background, and purple underline
› Uses `$page.url.pathname` with prefix matching (e.g. blog sub-pages highlight "Blog")
› Added `aria-current="page"` attribute for screen reader accessibility
› Full dark mode support

Language Attribute on Blog Posts

› Added `lang` attribute to blog post content wrapper using existing `language` frontmatter field
› Posts now declare `lang="en"` or `lang="de"` for screen readers and browser translation tools
› Added `inLanguage` field to JSON-LD structured data for search engine language detection

February 7, 2026

Code Syntax Highlighting

› Added Shiki syntax highlighter for code blocks in blog posts via mdsvex highlight option
› Dual theme support: `github-light` for light mode, `github-dark-dimmed` for dark mode
› Theme switching uses CSS variables, matching the existing dark mode toggle
› Runs entirely at build time — zero client-side JavaScript impact
› Pre-loaded languages: JS, TS, Python, HTML, CSS, Bash, JSON, Markdown, Svelte, C++, C, Go, C#, Rust
› Styled inline code with purple accent matching site theme
› Code blocks have rounded corners, borders, and horizontal scroll for long lines
› Added sample code blocks (C++, Go, Rust) to the first blog post

Accessibility Audit & Fixes (Lighthouse)

› Ran Lighthouse accessibility audit on 6 key pages (scores: 90–100)
› Fixed missing accessible name on Pac-Man link (home page) — added `aria-label`
› Fixed color contrast on "site" link in WIP badge (dark mode) — light text on dark red
› Fixed heading order on Renewable Energy page — changed h3 to h2
› Added underlines to blog post inline links for distinguishability beyond color alone
› Final scores after fixes: all pages 95–100

Lazy Loading for Images

› Added `loading="lazy"` to the Lego display image on the Renewable Energy page
› Added a rehype plugin (`rehypeLazyImages`) in mdsvex config that automatically sets `loading="lazy"` on all images in markdown blog posts
› Above-the-fold profile photos (About Me, Contact) intentionally left eager for best perceived performance
› Applies to all current and future blog post images automatically

SEO Improvements for Internet Awareness

› Added structured data (JSON-LD `BlogPosting` schema) to blog posts for Google rich results
› Added `<link rel="canonical">` to all pages via layout to consolidate search ranking signals
› Added default Open Graph and Twitter meta tags in layout for non-blog pages
› Upgraded Twitter card from `summary` to `summary_large_image` for larger social previews
› All blog post metadata (title, date, summary, tags, image) feeds into structured data automatically

February 6, 2026

Mobile-Friendly Blog Header Layout

› ToC, tags, and reader button stack vertically on small screens
› Expanded ToC dropdown overlays content on mobile instead of being clipped
› Minimum width on ToC dropdown for readability on narrow screens
› Clicking a heading link auto-closes the ToC
› Full dark mode support

Per-Blog Hit Counter

› Added individual view counter for each blog post using Netlify Blobs
› Displayed below "Published on" line as "This blog hits: X"
› Each post tracked separately by slug
› Local dev fallback with placeholder count

Blockquote Styling for Blog Posts

› Added styled blockquotes for markdown content (`>` syntax)
› Purple left border with subtle violet background
› Rounded corners on the right side
› Full dark mode support

February 5, 2026

Keyboard Shortcuts for Blog Posts

› Arrow left/right to navigate between older/newer posts
› `R` to toggle reader mode, `Escape` to exit reader mode
› Subtle hint bar at bottom of screen showing available shortcuts
› Hidden on touch-only devices (phones, tablets without keyboard) using `hover` media query
› Guards against firing when typing in inputs or using modifier keys
› Full dark mode support

Table of Contents for Blog Posts

› Collapsible ToC at the top of blog posts using `<details>/<summary>`
› Extracts h2 and h3 headings from raw markdown at build time
› Uses github-slugger for IDs matching rehype-slug exactly
› Placed inline with tags and reader button (left column of grid)
› Arrow indicators on each link, indented h3 entries
› Only shown for posts with 2+ headings, hidden in reader mode
› Full dark mode support

Anchor Links on Headings

› Activated rehype-slug and rehype-autolink-headings plugins
› Headings in blog posts now have clickable `#` anchor links for deep-linking
› Anchor appears on hover (appended after heading text) with purple accent
› Focus state for keyboard accessibility
› Full dark mode support

Previous/Next Post Navigation

› Added older/newer post navigation cards at the bottom of blog posts
› Two-column grid layout with chevron icons, stacks on mobile
› Card-style links with purple hover accent
› Posts sorted by date; all resolved at build time (zero runtime cost)
› Full dark mode support

Reading Progress in Reader Mode

› Reading progress bar now stays visible in reader mode

Blog Post Layout Improvements

› Moved "Published on" date immediately below blog content for better proximity
› Reordered bottom sections: published date → share buttons → post navigation → back button

Light Mode Contrast Improvements

› Darkened text colors throughout the site for better readability in light mode
› Added explicit light mode CSS rules for card sections
› Fixed text contrast issues on mobile devices (iPhone)

About Me Page Redesign

› Redesigned timeline/location section with flexbox layout
› Bold dates with proper text wrapping alignment
› Adjusted profile card spacing

February 4, 2026

Reading Progress Indicator

› Horizontal progress bar at top of blog posts
› Shows scroll position as percentage through the article
› Purple gradient styling matching site theme
› Smooth width transition for visual polish
› Hidden in reader mode
› Full dark mode support

Scroll-to-Top Button

› Floating button appears after scrolling 300px down
› Purple gradient styling matching site theme
› Smooth scroll animation back to top
› Fade-in animation when appearing
› Hidden in reader mode to avoid conflict with exit button
› Full dark mode support

Custom 404 Error Page

› Redesigned error page with animated character theme
› 404: Green dizzy chomper spinning next to broken link with bouncing question marks
› Server errors: Ghost with stunned yellow chomper and twinkling stars
› Shows the attempted URL for 404 errors
› Added "Contact Me" button alongside "Back Home"
› Full dark mode support

Social Sharing Buttons

› Added share buttons at bottom of blog posts
› Supports Copy link, Facebook, LinkedIn, BlueSky, and X/Twitter
› Styled card matching blog content area
› Opens share links in new browser tabs
› Enhanced Open Graph meta tags for blog posts (og:image, og:type, og:site_name)
› Posts can specify custom images via frontmatter, falls back to profile image
› Fixed og:image rendering for Facebook/LinkedIn sharing previews

Site Structure Page Redesign

› Replaced ASCII tree characters with emoji folder/page icons
› Modern card-based styling with hover highlights
› Hidden link to /site from "site" in WIP badge on home page

Retro Hit Counter

› Added retro-style LED hit counter to footer
› Green-on-black digit display with 12 digits grouped in threes
› Counts all page views site-wide (not just home page)
› Uses Netlify Blobs for persistent storage (requires environment variables)
› Separator line above counter to distinguish from legal info

February 3, 2026

Sitemap for Search Engines

› Added sitemap.xml at `/sitemap.xml` for search engine crawlers
› Includes all static pages with priority and change frequency hints
› Auto-discovers blog posts with last modification dates
› Helps Google/Bing index new content faster

Blog Layout Improvements

› Reduced spacing between paragraphs and following lists for tighter typography
› Widened blog content area on desktop (576px → 896px)

February 2, 2026

Blog Rendering Improvements

› Added spacing between paragraphs in markdown content
› Added table styling with borders, padding, header backgrounds, and zebra striping
› Added dark mode support for tables
› Increased spacing before h2 and h3 headings for better readability
› Reduced blog post title (h1) font size for better readability on mobile devices

Open Graph Meta Tags

› Added Open Graph tags (og:title, og:description, og:image, og:url) for social sharing
› Added Twitter Card meta tags for Twitter/X previews
› Uses profile photo as default social image

RSS Feed

› Added RSS feed at `/rss.xml` for blog subscribers
› Feed includes all blog posts with title, summary, date, and link
› Added autodiscovery link in HTML head for feed readers
› Added "Subscribe via RSS" button at bottom of blog page

Footnote Support

› Added remark-gfm and remark-footnotes@2 plugins for markdown footnotes
› Footnote references ([^1]) now link to footnote definitions at bottom of post
› Styled footnotes section with separator line and proper formatting
› Added dark mode support for footnotes

Language Flags & Filter

› Added graphical SVG flags (German, English) to blog post list next to reading time
› Added language filter buttons with flag icons to filter posts by language
› Language filter works in combination with existing tag filter
› Added "Clear filters" button when any filter is active

Site Structure Page

› Created `/site` hidden page showing website structure as tree view
› Displays all pages organized by section with descriptions
› Includes hidden pages (todo, history, site) with visual indicator
› Uses monospace font with ASCII tree branches for file-system style display

January 30, 2026

Estimated Reading Time

› Added reading time calculation for blog posts (200 words per minute)
› Display "X min read" alongside date on blog list and detail pages

Hidden TODO Dashboard

› Created `/todo` route as a hidden dashboard for improvement ideas
› Page parses and displays TODO.md with styled checkboxes
› Includes `noindex` meta tag to prevent search engine indexing

Hidden History Page

› Created `/history` route showing the website changelog
› Timeline design with date badges and feature cards
› Parses HISTORY.md and displays it with styled UI

January 29, 2026

WIP Diagonal Banderole

› Added orange/yellow "WIP" diagonal banner to research project card

Blog Timeline Improvement

› Changed year badge to show full year instead of abbreviated

YouTube Links for Games

› Added YouTube video links for multiple games in the games list
› Created red YouTube button style

Mobile & Footer Fixes

› Fixed blog banner overlapping headline on mobile devices
› Added time to footer build timestamp

January 28, 2026

Site Branding & Error Page

› Updated site branding elements
› Improved error page styling

Build Timestamp

› Added build timestamp to footer

WIP Badge Styling

› Styled WIP badge with red colors and construction signs
› Added animated bouncing exclamation marks

New Blog Post Banderole

› Added diagonal "New Blog Post" banner on landing page
› Purple/pink gradient style

Reader Mode

› Added reader mode toggle for blog posts
› Hides navigation for distraction-free reading

Blog Improvements

› Added blog tagging system with filtering
› Improved blog post layout with date, centered tags, and back button
› Fixed dark mode styling for tag filter buttons
› Added publication date to blog post pages
› Added timeline design to blog page

Navigation

› Added back buttons to About Me sub-pages
› Combined party sections on politics page

Dark Mode Enhancements

› Fixed dark mode across all pages
› Added dark mode support for blog posts
› Added light/dark mode support for clock component
› Updated header/footer colors and welcome title for dark mode

Landing Page

› Added Pac-Man and Wind Turbines interactive section
› Added recent blog post section

Games List

› Added Wikipedia links to more games
› Added company era headers (Funatics, Blue Byte) to games timeline
› Added partner company links to games
› Added Asterix & Obelix: Heroes

Other Pages

› Fixed contact page
› Added main party link to politics page
› Standardized section borders on game development page
› Updated renewable energy page styling
› Added two additional wind turbines

January 27, 2026

Dark Mode

› Added dark mode toggle with localStorage persistence

Modern Design Overhaul

› Modernized site design with gradient theme and glass-morphism effects
› Fixed font consistency

Interactive Elements

› Added animated ticking clock with date to landing page
› Added interactive pills to Pac-Man animation
› Added button-style links to games list
› Added animated Pac-Man to Game Development page
› Added animated wind turbine to Renewable Energy page

Page Transitions

› Added page transition animations using View Transitions API
› Added responsive font sizes to page headers

Games List

› Created games list sub-page to Game Development section
› Added Sacred 2 Remaster
› Added Wikipedia links to games

Skills Section

› Added comprehensive skills section to Software Engineer page

Header Navigation

› Fixed header navigation display on small mobile screens

January 26, 2026

Major Framework Upgrade

› Upgraded to Svelte 5, SvelteKit 2.x, and Tailwind CSS 4
› Added .nvmrc to specify Node.js 20 for Netlify

New Pages

› Added German legal pages (Impressum, Datenschutz)
› Added Software Engineer page
› Added Politics page
› Added Game Development section
› Added Renewable Energy section

Blog System

› Refactored blog to use year-based directory structure
› Formatted blog post dates in human-readable format
› Reorganized blog posts

Design Updates

› Restyled header and footer with dark grey theme
› Added footer with Imprint and Contact links
› Added 2026 edition note to home page

Social & Contact

› Centralized contact information
› Added profile image
› Added social links (Facebook, BlueSky, Twitter/X)

August 2021

Initial Setup

› Created initial Svelte app with TypeScript
› Added navigation bar and layout
› Added Tailwind CSS
› Added error page
› Added contact to navigation
› Configured Netlify deployment (replaced GitLab CI)
› Implemented markdown style imports
› Added mdsvex for markdown processing

← Back to Home