Behind the Site
This portfolio is a living showcase of game development and technical art work, built to feel as polished as the projects it presents. It is fast, visual, and intentionally simple to navigate, so visitors can focus on the work without distractions.
This post explains how the site was built and why key choices were made. It highlights the in-site management tools, how media is handled for speed, and how the client, server, and backend work together to keep content secure and easy to update.
What This Project Is
This is a personal portfolio site that highlights game development and technical art projects. It is designed to feel fast, clean, and easy to explore, while still telling the story behind each piece of work.
Built-In Site Management
The most compelling part of this site is that it is also its own publishing tool. Authorized users can log in and manage everything directly inside the website, without needing a separate CMS, a separate admin app, or a developer to rebuild the site each time something changes.
On Site Management
The site includes dedicated management screens for:
- Creating new projects
- Adding sub-projects under those projects
- Writing and publishing blog posts
This keeps the whole workflow in one place. You can draft, edit, and publish without leaving the site.
Uploaded Media
Images and videos can be uploaded right inside the site management area. From there, media can be attached to projects and blog posts, set as thumbnails, or arranged into galleries. That makes it easy to keep content visually rich without juggling external tools.
Live Changes
When an authorized user saves changes, the update is stored in the database and the site can show it immediately. There is no need to restart the server, rebuild the project, or redeploy the site just to add a new post or update a project.
Authorized Users Only
Editing tools are protected behind a login, so only approved users can change content. Visitors still get a clean, fast browsing experience while the editing tools remain private.
Technologies Used
Site and UI
- SvelteKit with Svelte 5 for the site framework
- TypeScript for safer, maintainable code
- Tailwind CSS for consistent styling
Data and Content
- Supabase (PostgreSQL) for data storage and authentication
- Drizzle ORM for structured database access
- MDsveX for writing pages and posts in Markdown
Media Handling
- Supabase Storage for images and videos
- Sharp for image resizing and compression
Key Decisions
Fast Media Loading
Large images and videos can slow down a site. To keep the experience smooth, the site serves media through a server endpoint instead of linking directly to storage. That lets us:
- Deliver smaller, optimized image sizes based on the page
- Convert images to efficient formats when the browser supports them
- Cache processed images so repeat views are instant
- Support video seeking without downloading the entire file
The result is a site that looks crisp but still loads quickly, even with big visuals.
Access on the Server
The browser only uses a public, limited key when it needs to read data. Anything that requires full access stays on the server. That separation keeps private credentials and elevated permissions away from the client while still allowing secure features like uploads and admin tools.
Human-Readable Content
Markdown is used for content so writing and editing project pages stays simple and readable. It keeps the focus on the story and avoids unnecessary complexity in the authoring process.
Self-Hosted Supabase
This project is set up to work with a self-hosted Supabase instance rather than relying only on a hosted project. That means the database, authentication, and file storage run under our own control while still using the familiar Supabase APIs. It provides flexibility for future growth and keeps all data in a place we manage directly.
How Client, Server, and Backend Work
Here is the high-level flow:
- The browser requests a page from the SvelteKit server.
- The server handles sessions and decides what data the user can see.
- The server talks to Supabase for data and storage access.
- Media requests go through a server route that can resize and optimize files before sending them back to the browser.
This split keeps the site fast for visitors while protecting sensitive operations behind the server.