# Nikolai Lehbrink

> Passionate fullstack developer dedicated to creating beautiful and functional web applications.

Personal portfolio and technical blog by Nikolai Lehbrink, a Full Stack Developer and Frontend Engineer based in Munich. The blog covers web development with a focus on Astro, React, TypeScript, and Tailwind CSS.

## Blog posts

- [Using Claude Code to fix our most-reported bug](https://www.nikolailehbr.ink/blog/fixing-a-react-raf-leak-with-claude): How I used Claude Code with react-scan and agent-browser to track down a self-replicating requestAnimationFrame leak that dragged our chat down to 4 FPS.
- [Redirecting off-campers.com to vanever.com](https://www.nikolailehbr.ink/blog/redirect-off-campers-to-vanever): How we handled our domain migration to preserve organic traffic, with automated checks verifying redirects for 240+ URLs.
- [Why font format order matters in @font-face declarations](https://www.nikolailehbr.ink/blog/font-face-declaration-order): Learn why the order of font formats in @font-face src declarations is crucial for performance and browser compatibility.
- [Prevent AI Bots from spamming your forms with honeypots](https://www.nikolailehbr.ink/blog/prevent-form-spamming-honeypot): Learn how to implement a honeypot to protect your form from spam submissions by AI or regular bots.
- [Relative Links in Next.js: A Shortcut for Nested Routes](https://www.nikolailehbr.ink/blog/relative-linking-nextjs): How to use relative links in Next.js <Link> component, with an example showing simpler navigation.
- [How to Load Files as ArrayBuffer in Vite](https://www.nikolailehbr.ink/blog/load-files-as-arraybuffer-vite): How to load files like fonts as ArrayBuffers in Vite, with an example for embedding custom fonts when using Satori or @vercel/og for dynamic OG images.
- [How to set up a table of contents in MDX](https://www.nikolailehbr.ink/blog/mdx-table-of-contents): Learn how to automatically extract a structured table of contents from MDX posts using rehype plugins, Vite, and TypeScript.
- [Set up path aliases and type checking in MDX with TypeScript](https://www.nikolailehbr.ink/blog/enhance-mdx-typescript): Improve DX and reliability in your MDX + TypeScript setup using two small but powerful configuration changes.
- [How to generate a robots.txt file in React Router 7 and Remix](https://www.nikolailehbr.ink/blog/robots-txt-react-router-7): Learn how to dynamically generate a robots.txt file for your React Router 7 or Remix app with environment-based rules and automatic sitemap integration.
- [Make your button look like an actual button](https://www.nikolailehbr.ink/blog/realistic-button-design-css): A simple guide to creating buttons that feel interactive, using nothing but modern CSS techniques inspired by real-world materials and lighting.
- [Tailwind CSS v4 tips every developer should know](https://www.nikolailehbr.ink/blog/tailwindcss-v4-tips): Looking for ways to improve your development with Tailwind CSS v4? Discover tips and tricks from workflow optimizations to common design patterns.
- [How to generate a Sitemap in React Router 7 and Remix](https://www.nikolailehbr.ink/blog/sitemap-react-router-7): Learn how to automatically generate a sitemap.xml file for your React Router 7 or Remix app using minimal configuration with this step-by-step guide.
- [The missing guide to fonts in React Router 7 and Remix](https://www.nikolailehbr.ink/blog/fonts-remix-react-router-7): Learn how to self-host fonts, integrate Fontsource, style with Tailwind CSS, and boost performance using preloading.
- [Sending thousands of Emails with Deno and Postmark](https://www.nikolailehbr.ink/blog/batch-mails-deno-postmark): Learn how we efficiently send over 37k notification emails with detailed logging and error handling.
- [Tailwind CSS v3 tips every developer should know](https://www.nikolailehbr.ink/blog/tailwindcss-v3-tips): Looking for ways to improve your development with Tailwind CSS v3? Discover tips and tricks from workflow optimizations to common design patterns.
- [Modern Syntax Highlighting with Shiki in Next.js 14](https://www.nikolailehbr.ink/blog/syntax-highlighting-shiki-next-js): Learn how to implement Shiki for modern and performant syntax highlighting in your React and Next.js projects with this comprehensive step-by-step guide.

## Key pages

- [Home](https://www.nikolailehbr.ink/): About Nikolai, projects, skills, and work experience
- [Blog](https://www.nikolailehbr.ink/blog/): All articles
- [Chat](https://www.nikolailehbr.ink/chat/): AI assistant that answers questions about Nikolai, his projects, and his blog posts
- [RSS feed](https://www.nikolailehbr.ink/rss.xml): Full-text feed of new posts