A showcase of every reusable component. Press ` on the home page to get here.
Use <b> to highlight important tools, APIs, and techniques within text. The color is Catppuccin mauve — purple in light mode, pastel lavender in dark.
Example: I built this with Vulkan, C++, and GLSL, using deferred rendering with a g-buffer for SSAO and shadow maps.
Standard paragraph text. This uses var(--text) and should be clearly readable on both light and dark themes. Multiple paragraphs are separated by the default spacing.
A second paragraph to show spacing. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames.
This is an image caption using .image-caption
This is a blockquote-style aside using inline styles — faint text with a left border.
A standalone image. Click to open in lightbox.
Multiple images in a responsive grid using .image-grid.
An earth-like planet generated with simplex and ridge noises.
Drag the slider to compare. Click to open in lightbox.
When 3+ images are passed, dot navigation appears below.
A horizontal scrolling carousel. Drag or use scroll.
Inline video with autoplay. Click to open in lightbox.
Playable video with sound. Uses controls attribute — no autoplay.
A short description of what was done. Mentions C++ and Vulkan as key tools.
Use class="link-arrow" for external links with a diagonal arrow that raises on hover.
Check out my GitHub or read the ArtFX website.
Used within sections for sub-topics.