This Website

Instead of relying on a CMS like WordPress, I built this portfolio in Svelte as a fully data-driven system. Every project is a JSON file. The site reads those files and renders them into project pages, filterable lists, and gallery thumbnails, all without a database or backend.

Designing the site this way made me realize how much the structure of data shapes how information can be explored. The portfolio stopped feeling like a collection of pages and more like a dataset that could be navigated from different perspectives.

One of the features I'm most fond of is the tags, languages, and tools filtering system. Rather than scrolling through a flat list of projects, you can query by what matters, a specific programming language, a design tool, a topic area. This turns the project list into something closer to a queryable dataset than a static page.

Alongside the project pages, the portfolio includes an infinite canvas, a spatial, navigable reflection space. Rather than a linear about page, I wanted reflections, goals, and identity to feel like something you explore, and how each element is related to another. Cards on the canvas link out to project pages, creating a two-way relationship between the structured project data and the more personal narrative layer.

This was also my first time building a custom canvas renderer in Svelte, handling panning, zooming, card layout from JSON, and navigation between named positions.

This was my first Svelte project. Coming from plain HTML/CSS and WordPress, Svelte's reactivity model made it easy to build filtering, live updates, and component-driven layouts without a lot of boilerplate. I get why people like it, though it's also easy to get lost in reactive variables and stores when the project grows.