Skip to content

Personal Portfolio Website

You are looking at it right now! This website is a "meta-project" designed to be more than just a resume; it is a playground for static site generation experiments and automation.

🚀 The Motivation

Standard academic websites are often functional but dry. I wanted a platform that could:

  1. Automate maintenance: Update my CV automatically when I push a new BibTeX entry.
  2. Showcase personality: Move away from standard bootstrap themes to a modern Glassmorphism aesthetic.
  3. Experiment with UX: Implement interactive elements like the "Rotating Bento Grid" to surface buried content.

🛠️ Key Technical Features

This isn't just a standard theme configuration. It relies on a custom Python build pipeline (main.py) that hooks into the MkDocs build process.

Dynamic Bibliography

A custom Python script parses my publications.bib file during the build. It generates:

  • A sortable, filterable main list.
  • Individual Markdown pages for every single paper with abstract and citation buttons.

Jinja2 Macros

I wrote custom macros like generate_rotating_grid() that scan my content folders, extract metadata (YAML frontmatter), and render interactive, rotating cards that pause on hover and support deep linking.

Custom CSS Theme

A complete override of the Material for MkDocs colors using CSS variables to create a dark-mode "Neon Glass" aesthetic with backdrop filters, gradients, and animated progress bars.

💻 Tech Stack

Python Material for MkDocs Jinja2 CSS3 GitHub Actions

🔄 Automated Deployment

The site is built using a CI/CD pipeline on GitHub Actions. It follows a modern "Infrastructure as Code" approach:

  1. Trigger: Push to main branch.
  2. Build: A uv-optimized Python environment installs dependencies.
  3. Generate: main.py runs, converting BibTeX and Markdown data into HTML structures.
  4. Deploy: mkdocs build compiles the final site, which is pushed natively to GitHub Pages via artifacts.