Portfolio Website

This portfolio website is a personal space designed to display my projects, share experiments, and publish technical articles. The goal was to build a clean, blazing-fast, and visually appealing developer portfolio that lets the work and content stand out.

#🛠️ Tech Stack

• Framework: Next.js (App Router & Static Generation)
• Styling: Tailwind CSS v4 & Vanilla CSS variables
• Content Engine: Custom MDX parser with LaTeX and syntax highlighting support
• Hosting: Vercel with integrated speed insights

---

#📖 The MDX Content Engine

The heart of the website is a highly customized MDX parsing and rendering engine designed to parse .mdx files into interactive HTML pages on-the-fly.

#🔌 Custom Markdown Processor (MarkdownRenderer)

The renderer combines ReactMarkdown with a customized pipeline of remark and rehype plugins:

• Math Equations: Integrated remark-math and rehype-katex to natively parse and format LaTeX blocks (display equations and inline math formulas) using KaTeX style sheets.
• Syntax Highlighting: Powered by rehype-highlight with automatic programming language detection.
• Copy-to-Clipboard: Code blocks are wrapped in a custom PreWithCopy component that renders a copy button showing visual feedback states.
• Anchor Headings: Headers (h2, h3, h4) are automatically slugified to generate unique IDs, adding a hoverable # anchor link for easy section sharing.
• Secure Links: Auto-detects external links to append target="_blank" and rel="noopener noreferrer".

#📊 Lazy-Loaded Mermaid Diagrams

• Renders flowcharts and diagrams using Mermaid.js.
• To keep the initial page load lightweight, the Mermaid component is loaded using dynamic client-side imports (next/dynamic with ssr: false).
• The component dynamically queries the resolved theme from next-themes to render light or dark layouts matching the site theme.

#🧭 Scroll Utilities

• Visual Table of Contents: A sidebar navigation that tracks headings dynamically. It uses an IntersectionObserver alongside scroll event fallback mechanisms to highlight the current active heading. It renders a clean dashboard visual where section lines dynamically expand and reveal their titles on hover.
• Scroll Progress Indicator: An optimized scroll depth indicator mounted to document.body using a React Portal. It animates a high-contrast top-screen bar as the user scrolls down the page.