Description

My modern visual portfolio built with SvelteKit, Prisma, PlanetScale, & Tailwind

UPDATE: I'm grabbing my project images and tech images from my MySQL (PlanetScale) database, rather than having them as static assets.

Overview

I originally built this portfolio in Next.js to get a better handle on Next 13 as I move towards developing more apps in Vercel's ecosystem. You can view that version here: Next.js version (unmaintained). While experiencing no problems hosting the app on Vercel, I ran into too many incompatibilities with Next Image components and hosting Next 13 on Cloudflare, which was bothersome.

Since the site is content-oriented anyways, I spent a day rewriting it in Astro. I cleaned up the UI a bit, added Tailwind's HeadlessUI, and pieced together a much cleaner, much faster version of my new portfolio. That version here (open-source).

But Astro's syntax is easy to transmute into Svelte's, SvelteKit 1.0 had released, and I ended up migrating the whole project over to SvelteKit. I restyled the entire app, turned it into a single-page application, and settled on a mobile-first, single-column approach. I swapped the images over to Cloudinary to improve Lighthouse scores and caching, added Google Analytics 4, and attached a service-worker & manifest to turn it into a progressive web app.

I originally set up the site with Prisma and PlanetScale to make it "full-stack", using a Cloudflare Worker to query my project items and tech items from my MySQL database. After briefly swapping over to Google's Firestore, I doubled down on the Prisma PlanetScale approach, used Lucia for authentication (currently unavailable) and authorization, and I'm now using the app as a testing ground to improve my full-stack competencies. More features to come soon.