Portfolio Website (v3)
Solo Projects · 2026 - Present
A personal portfolio site generated with custom Python build scripts from structured TOML data, featuring twelve interactive HTML5 canvas background simulations.
Built
I built this website using a lightweight custom static generator in Python that compiles structured content from a TOML configuration file into clean HTML pages. The visual background is powered by a custom JavaScript canvas engine that provides twelve interactive particle and physics simulations with adjustable settings.
Hard parts
- Maintaining smooth canvas animation performance behind semi-transparent backdrop filters across both desktop and mobile web browsers.
- Ensuring canvas event listeners handle user interaction smoothly without interfering with text selection, link clicks, or normal page scrolling.
- Supporting accessibility preferences by respecting reduced motion settings and persisting user simulation choices in local storage.
Learned
Building a personal site with a simple file-driven static generator makes content maintenance easy while keeping page load speeds fast and avoiding runtime framework dependencies.
Also
- Custom Python static site generator that compiles TOML data and HTML partials into static pages.
- Responsive design with dark and light themes, smooth navigation anchors, and contact form integration.
- Interactive canvas background system with twelve selectable simulation modes and real-time parameter controls.
Design and static generation
When designing this portfolio, I wanted a site that loaded quickly, was simple to host on GitHub Pages, and could be updated easily without the overhead of heavy web frameworks or database-driven content management systems. I wrote a small static site generator in Python that reads all portfolio content, project writeups, and experience details from a single TOML configuration file, rendering them into clean static HTML files through reusable page templates.
Featured projects receive both a concise overview card on the main page and a detailed project page with technical writeups and architecture diagrams, allowing readers to explore the background and implementation details of each build.
Interactive canvas background engine
Behind the text content runs a standalone HTML5 canvas engine that renders twelve different mathematical and physics simulations, including particle fields, orbital mechanics, cellular automata, and wave interference patterns. Visitors can interact directly with the simulations using their mouse or touchscreen, open a control panel in the header to adjust simulation parameters in real time, or switch between visual presets.
A key focus during implementation was ensuring that the canvas renders efficiently without consuming excessive processor cycles or blocking user interaction with the page. The animation loop adjusts its resolution for high-density screens, pauses when the browser tab is hidden, respects user preferences for reduced motion, and sits behind transparent content layers without capturing clicks or scrolling gestures meant for the text.