Personal project and portfolio site. I wanted it to reflect both my background in computer graphics and my experience with full-stack architecture.
A overview of the efforts behind the project to offer insight, inspiration, or to be used as reference for others—How nice would that be!
The WebGL hero section was built from scratch, featuring a custom, no-library
vanilla physics solver based on this white
paper,
commonly used in video games.
I designed a creative navbar that "floats" and swipes through sections as you scroll the page. It involved several challenges—especially when handling sticky elements like the careers section on narrow screens where the navbar layout becomes vertical.
The experience section is powered by JSON files, and the projects are
written in MDX files. These include metadata for generating project listings
and Open Graph social images.
Each project page includes personal reflections—such as motivation and
context—while dynamically embedding the corresponding GitHub README.md to
document technical details without duplication.
I implemented modals with parallel routing, allowing users to browse through projects without triggering full route changes or page reloads.
Project metadata in the MDX files is used to generate dynamic Open Graph
images for better sharing and visibility on social platforms.
The website is designed around interactive, animated tiles, with a responsive spacing system that adapts proportionally based on tile size—offering a clean and consistent grid layout across devices.
The visual design reflects my personality and engineering mindset—everything measured, squared, and aligned. The themes, especially the dark mode, take inspiration from technical blueprints and architectural drafts.
Simultaneously I wanted to have echoes from my background with is Computer Graphics for the VFX Industry, which can be seen in places such as:
- Physics animation in the hero section.
- Film strip and 3D animated cubes in the projects section.
I used motion.dev (formerly Framer Motion) to build
precise and orchestrated animations, aiming to make the UI feel fluid,
responsive, and intentional.
Interactive components were designed to showcase web application screens as they would appear on a laptop device. Features include screen transitions on hover, fullscreen (maximized) view on click, and keyboard navigation to cycle through each screen—offering an intuitive and dynamic way to explore the UI.