Something went wrong. Try again.
WIP: My personal website
Something went wrong. Try again.
4.6 kB · 121 lines
Svelte
at freetime
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122<script lang="ts"> import { reveal } from '$lib/actions/reveal'; import moover from '$lib/assets/projects/moover.webp'; import npmx from '$lib/assets/projects/npmx.png'; import gatekeeper from '$lib/assets/projects/gatekeeper.jpg'; import badger from '$lib/assets/projects/badger.jpg'; import twentyfortyeight from '$lib/assets/projects/2048.png'; import giveaways from '$lib/assets/projects/giveaways.webp'; import atToolbox from '$lib/assets/projects/attoolbox.webp';
type Project = { name: string; description: string; image: string; href: string; };
const projects: Project[] = [ { name: 'PDS MOOver', description: 'A tool kit to help you migrate between atproto PDS instances as well as recover and restore your atproto account.', image: moover, href: 'https://pdsmoover.com' }, { name: 'npmx', description: 'I am a core member of the npmx project. A fast, modern browser for the npm registry. I host the pds npmx.social and help with atproto social integrations ', image: npmx, href: 'https://npmx.dev' }, { name: 'PDS Gatekeeper', description: 'A sidecar service (a microservice if you will) that sites in front of the PDS to provide extra security in the form of 2FA for users, captcha, on signups, and customizable rate limits.', image: gatekeeper, href: 'https://github.com/baileytownsend/reveal-ui' }, { name: 'Rusty Badger', description: 'A simple Rust firmware written for the Badger 2040 W from Pimoroni. Counts wifi networks found, reads a shtc3 sensor for temperature and humidity, and displays the results on the Badger display.', image: badger, href: 'https://tangled.org/pds.dad/rusty-badger' }, { name: 'AT Toobox', description: 'An iOS app that makes atproto actions easy with shortcuts', image: atToolbox, href: 'https://apps.apple.com/us/app/at-toolbox/id6747999688' }, { name: 'at://2048', description: '2048 written in rust with atproto features to track your game history and to share with friends. Some have called it the first game on atproto, others have said "Hey does that count if it\'s just saving game history to the repo??" others have said "dear god why did you write this in web assembly"', image: twentyfortyeight, href: 'https://2048.blue' }, { name: 'Label Watcher', description: 'Automated moderation made easier for PDS admins. Subscribe to multiple atproto labelers and receive an email or have an auto takedown if a selected label is found on a user on a PDS you manage.', image: 'https://tangled.org/pds.dad/label-watcher/opengraph', href: 'https://tangled.org/pds.dad/label-watcher' }, { name: 'at://giveaways', description: 'Host a giveaway from the comfort of your own Bluesky post. Choose randomly from who liked, reposts, or any combination of the two. Powered by microcosm.', image: giveaways, href: 'https://giveaways.baileytownsend.dev/' } ];
const INITIAL_COUNT = 4; const LOAD_STEP = 2; let visibleCount = $state(INITIAL_COUNT); const visibleProjects = $derived(projects.slice(0, visibleCount)); const hasMore = $derived(visibleCount < projects.length);</script>
<div id="projects" class="mt-10 flex flex-col items-center justify-center md:mt-20" use:reveal> <div class="flex flex-col items-center justify-center"> <h1 class="text-center font-urbanist text-2xl font-semibold md:text-5xl">Open Source</h1> <span class="text-md mt-2 px-2 text-center font-urbanist md:mt-4 md:px-5 md:text-xl"> A few things I'm building and sharing with the community. </span> </div> <div class="container mt-10 grid gap-10 p-4 md:grid-cols-2 xl:grid-cols-3"> {#each visibleProjects as item (item.name)} <div class="card bg-base-100 shadow-sm transition duration-300 hover:-translate-y-1"> <figure> <img class="h-48 w-full object-cover" src={item.image} alt={item.name} /> </figure> <div class="card-body"> <h2 class="card-title font-urbanist text-2xl font-black">{item.name}</h2> <p class="text-md font-urbanist font-medium opacity-60">{item.description}</p> <div class="mt-2 card-actions justify-end"> <a class="btn font-urbanist btn-primary" href={item.href} target="_blank" rel="noopener noreferrer" > View Project </a> </div> </div> </div> {/each} </div> {#if hasMore} <button class="btn mt-10 font-urbanist btn-primary" onclick={() => (visibleCount = Math.min(visibleCount + LOAD_STEP, projects.length))} > Load More </button> {/if}</div>