✅ completed
⭐ Featured
Quinn Chrest, Software Developer
Projects
✅ completed
⭐ Featured
✅ completed
Reborndle
SvelteTypescript
My friend Sean (Loopysaurs) live streams on Twitch and wanted me to remix my YuYudle for his long running Pokemon Reborn series. Guess the Pokemon Trainer!
✅ completed
✅ completed
✅ completed
✅ completed
To Go
GOSQLiteBubble Tea
You might say "Not another to do list app", but what if I told you this one is accessed only from the terminal with an entire UI!
✅ completed
Developer Site
SveltKitTypeScriptTailwind CSS
A developer focused website built with SvelteKit and Tailwind CSS. Features include a dev log and project showcase with smooth animations and responsive design.
Dev Log
RSS Feed✨
Feature
New Site: activities.quinnchrest.dev
This post was written using generative AI. activities.quinnchrest.dev ("Quinn in Motion") is a new site that puts every bike ride and walk Quinn has recorded on Strava onto one map. It launched with 149 activities going back to 2020: 92 rides covering about 1,170 miles and 57 walks covering about 150 miles. The map - Every route is drawn as a faint, semi-transparent line on a dark map, so roads that get ridden over and over glow brighter. It ends up working like a heatmap of where Quinn actually goes. - Rides and walks get their own colors, and the map can be filtered by type and year. - Hovering a route previews it. Where several routes overlap, a list of every activity on that spot pops up and can be pinned. Clicking a route opens it on Strava. - On phones, tapping a route opens a bottom sheet instead, since there's no hover. Highlights - A second page has lifetime totals, distance per year and per month, personal records like longest ride and longest walk, some fun equivalents, and a GitHub-style calendar of active days. - Miles and feet by default, with a toggle for kilometers. - All the charts are plain HTML and CSS, with no charting library. Getting the data in - Strava lets you download an archive of your whole account. An import script reads the activities list and the GPS files in it (GPX, TCX and FIT) and turns them into a single JSON file that the site reads. There's no backend. - Only rides and walks are kept. Runs, virtual rides and activities without GPS are skipped. - Activities recorded on a Garmin device are detected so the site can show the attribution Garmin asks for. Privacy - Routes that start at home would show exactly where home is, so the import script cleans every route before it's published. - Anything inside a privacy zone is cut out. Routes that pass through one are split so no line is drawn across it. - The first and last few hundred meters of every activity are trimmed off, and routes are simplified and rounded to about a meter. - The raw Strava export never leaves the computer. Only the cleaned-up JSON is committed. Stack - React, TypeScript and Vite, with MapLibre GL for the map and OpenFreeMap's free dark map style, so no API key is needed. - Hosted on GitHub Pages and deployed by GitHub Actions on every push, like the rest of the quinnchrest.dev sites. - Planned but not built yet: a nightly job that pulls new activities from the Strava API automatically instead of re-importing the archive by hand.
ReactViteMapLibreStravaClaude Code
📝
Update
Moving to GitHub Pages + SEO Cleanup
This post was written using generative AI. The site no longer runs on a self-hosted server with a Postgres database. It is now a fully static site hosted on GitHub Pages. Moving off the server - Switched SvelteKit from adapter-node to adapter-static, so every page, the RSS feed, and the sitemap are rendered to plain files at build time. - Moved the projects and dev log entries out of Postgres and into Markdown files in the repo, one file per entry with the details in a small frontmatter header. Existing content was pulled from the live API so nothing was lost, and the RSS item IDs were kept the same so feed readers won't see old posts as new. - Removed the admin panel, its login/rate limiting, and all of the write APIs. Writing a new post is now just adding a file and pushing to main. - Added a GitHub Actions workflow that builds and deploys the site on every push. - The Dockerfile, deploy script, and nightly database backups from the last entry are no longer needed. Git history is the backup now. SEO and performance - The avatar in the nav bar was an 8.6 MB, 3024x4032 phone photo shown at 36 pixels. It is now a 48 KB, 512x512 crop, which is by far the biggest improvement to page load time. - Added a proper title and description, a canonical URL, and Open Graph/Twitter tags so shared links show a preview card. - Added schema.org structured data describing the site and Quinn, linked to the GitHub and LinkedIn profiles. - Fixed the heading structure (the only h1 on the page used to be "GitHub Stats"), marked projects and dev log entries up as articles, and made project images lazy load. - Replaced the favicon, which was loading from an external site, with one generated from the same photo. Bugs found along the way - Bug fix entries in this log were showing a grey badge because of a "bugfix" vs "bug-fix" mismatch. They now get the proper red badge. - The page linked to an app.css file that didn't exist. The static build refuses to finish with a broken link, which is how it got caught.
SvelteKitGitHub PagesSEOClaude Code
✨
Feature
New Site: photos.quinnchrest.dev
*This post was created with the help of AI tools and reviewed and edited by me before publishing.* photos.quinnchrest.dev is a new site for showing off photos Quinn has taken and likes. It launched with the first 15 photos. The site - A React + Vite app built with Bun and deployed to GitHub Pages by a GitHub Actions workflow on every push to main. - Photos are shown in a grid. Clicking one opens it full screen, with arrow keys or swiping to move between photos and the camera, lens, settings and date shown underneath. - Each photo has its own link, so a single photo can be shared directly. - While a photo loads, a small blurred preview (ThumbHash) is shown in its place so the page doesn't jump around. Adding photos - Full-size originals go in a folder that is never committed to git. - Running one script makes 640, 1280 and 2048 pixel copies of each photo in AVIF, WebP and JPEG, reads the EXIF data, and updates a JSON file the site reads from. GPS location is left out on purpose. - Photos that haven't changed are skipped, and copies of removed photos are cleaned up. - A title, caption and tags can be added by hand and are kept the next time the script runs. A change of plans - The first version kept images out of the repo and served them from Cloudflare R2. R2 custom domains need the domain's DNS to be on Cloudflare, and quinnchrest.dev's DNS is at Porkbun. - Rather than move DNS, the web-sized copies are now committed to the repo and served by GitHub Pages alongside the site. It's free, keeps everything on photos.quinnchrest.dev, and removes an upload step. GitHub Pages has a 1 GB limit, which is room for roughly a thousand photos.
ReactViteBunClaude Code
✨
Feature
PostgreSQL Backups
So since I incorporated an admin panel into my website with the ability to add/remove/update projects and dev logs, I became concerned of data corruption and malicious attacks. After fighting linux I finally got the correct version of Postgres tools install to run a pg_dump to get table backups. Set it up in a bash script to run a backup, date stamp the backup, and delete any backups older than 7 days. Then configured the Cron jobs on my Ubuntu box to run this script every night so if something gets compromised or messed up I at least have some backups to fall back on. Now if the server itself dies that's a whole other problem... 😊
PostgreSQLCronJobBash Script
✨
Feature
Developer Site - Admin Panel
I wanted to make a tool for performing general CRUD operations on my dev log and projects showcase without having to manually perform operations on the database. Probably should have done this right away but I wanted to get the project published since visually it is mostly complete even though there are still items that are a work in progress. I was thinking of making an external tool so I didn't have to worry about exposing the ability to edit this data, but thought I could give Cursor a chance to continue development on the website it created. Just like before it amazed me at how quickly it could analyze my project and implement a new feature, and a pretty hefty one at that. Building a CRUD platform for manipulating data in a database isn't anything complex, but it does take a fair amount of code. With the first pass it built out all the api endpoints for performing the CRUD operations and a pretty good looking UI. Since I am going to be the only user accessing this panel I instructed it to build a very simple authentication system. After doing it's first pass, I looked over how Cursor decided to handle the authentication. I'm glad I did because Cursor forgot to authenticate the user on the api endpoints for non-read actions and only checked on login! So if you new the http requests to send on a tool like Postman you could perform whatever actions you wanted to. We course corrected and added some extra security features like limiting login attempts and adding an expiration to logins. That is a good reminder though to be diligent when generating code that can expose your platform to attacks and potential data loss. I have merged in the feature on github and have deployed into production. This dev log is actually being written using the feature right now!
SveltkitCursor Agent
GitHub Stats
Live analytics for @QuinnChrest
Loading GitHub stats...
Use ← → keys to navigate
Swipe left/right to navigate