Journal Post · CloneCore
A look behind how CloneCore works under the hood, and why I chose to build it this way.
What CloneCore has going on
CloneCore runs on Nuxt 3 with Vercel handling deploys, builds, and caching. TypeScript and SCSS keep everything clean and maintainable, and GitHub acts as both version control and the content backend — including admin authentication. Most of the site is statically generated for raw speed, while dynamic features like the admin panel and auth are layered on top where they actually matter.
The goal was pretty simple: build the kind of portfolio I'd be proud to hand to a client. So the whole thing comes with a managed theme system, a content dashboard for adding and organizing portfolio items, and a consistent visual identity that carries across pages, components, and even the pixel mascot around the UI. Everything is designed to feel like pieces of the same world instead of random features glued together.
The animated background and the theme-reactive sprites on the homepage follow the same philosophy: visuals and systems work together, not separately.
How Nuxt, Vercel, and a streak of precision-obsessed stubbornness turned into a whole ecosystem.
Nuxt gives the whole site structure: sections for narrative flow, components for reusable UI patterns, composables for shared behavior, and server routes for real backend logic. Most pages are statically generated so they load instantly, with dynamic features like auth, admin tools, and modals added only where they're genuinely needed.
Vercel handles deployments, previews, and edge caching. Every pull request from the admin panel or the codebase gets its own preview build. That effectively turns this site into a full CI workflow: I can test content or features in a live sandbox before it ever hits production.
All site content lives inside version-controlled JSON files. The admin panel updates them by opening pull requests through custom API endpoints instead of mutating files directly. That gives me commit history, code review, preview environments, and an audit trail — all without dragging in a full CMS or database.
The part nobody sees, but everyone should appreciate.
The admin panel is a private dashboard locked behind GitHub authentication. Once you're in, you can manage three content areas: web projects, Blender add-ons, and 3D artworks. Each category is a clean list of entries with thumbnails, titles, and an associated image folder. You can reorder items, delete them, or edit them through a simple form UI. Adding something new works the same way: fill out the form, drop images in the right folder, and the panel handles the rest.
Whenever you submit changes, the admin bundles up the JSON updates and any new images, then asks the backend to create a GitHub branch and a pull request. Vercel builds a preview automatically. You check it. You merge it. The site updates. The workflow stays civilized.
The admin panel in action — managing web projects with live preview and drag-to-reorder.
Four themes. One face. Infinite charm.
The whole theme system is powered by global color-mode logic backed by a set of CSS variables. All four themes share the same layout but switch out their surface, accent, and border colors. The pixel mascot tags along automatically: each theme includes its own matching sprite. The Contrast theme was built specifically with accessibility in mind — dialed-back blur, a more readable font, and UI colors chosen to meet WCAG AA standards.
The sprites stay intentionally low-res so they remain crisp on every device without weird scaling artifacts. They're not decorative; they're tiny avatars tied to the current theme, which helps the UI and character design feel like they belong to the same world.
The invisible but essential stuff.
Nuxt Image handles almost all the heavy lifting with media. Images get served in WebP or AVIF where possible, with responsive breakpoints tuned for everything from tiny pixel sprites to full-width gallery shots. Paired with Vercel's caching and static generation, the site stays quick even when the artwork isn't small.
Most of the real work here shows up in the details: proper alt text for portfolio images, motion that respects reduced-motion settings, and layouts that are built mobile-first instead of squeezed down from desktop designs. The “Build with Me” page, for example, is written so screen readers get the same narrative experience as sighted visitors.
The JSON brain at the center of everything.
Every card on the homepage — whether it's a web project, an add-on, or an artwork entry — comes from structured JSON. Each item has an ID, title, description, tags, images, and optional badges or status flags. The front end doesn't care where it came from; it just maps the data into cards, modals, and galleries.
Because the content structure and the UI are cleanly separated, the admin doesn't need to know anything about how the site is built. They just fill out a form, upload images, and the system generates the JSON automatically. No hand-editing components. No digging through config. Just content in, site updates out.
{
"id": "example-project",
"title": "Example Project",
"description": "A short summary of what this thing is.",
"externalLink": "https://example.com",
"tags": [
"Web Design",
"Nuxt"
],
"images": [
"/images/web-projects/example/hero.png"
],
"badge": "Designed & Built"
}
The same pattern powers add-ons, artwork, and web projects.
If you're building something yourself — whether it's a tool, a site, or an odd idea that needs clean execution — I'd love to help make it real. This portfolio exists to show that I care about the details, from the way a JSON object is shaped to how a tiny pixel sprite tilts its head.
Reach out if you want someone who thinks in systems, ships deliberately, and still has fun with the small stuff.