Projects I designed, built and shipped.

GitBasedDocs

A private docs site that reads Markdown from one GitHub repo. Write in Obsidian, push, and a few seconds later the pages are live for the people you shared them with. Each project is a folder in the repo, and a reader sees only the projects an admin linked to their account. Anyone else gets the same 404 as a project that does not exist. A webhook starts a delta sync that fetches only changed files, a timed recheck covers a missing webhook, and pages are served from SQLite, so reading never calls GitHub. It renders the Markdown Obsidian and GitHub both know: Shiki code, Mermaid diagrams, KaTeX math and Obsidian callouts, plus wikilinks and image embeds. Next.js 16, React 19, next-auth v4 and Drizzle on SQLite, about 9,200 lines of TypeScript, MIT.

• Tailwindcss
• Typescript
• Nextjs
• ShadCN
• React
• Bun

MD Kanban

A kanban board where every card is a markdown file on your disk, built so you can watch what an AI coding agent is doing without asking it. Each connected folder is a project, each subfolder groups work, and each task is one `.md` file whose YAML frontmatter holds status, priority, assignee, due date and labels. Dragging a card between columns rewrites the file, and the agent edits the same files from its side. That is the whole design: Jira and Linear keep state behind an API, so an agent needs credentials and a connector before it can move a card, while a folder is something it can already write to. The repo ships the contract twice, as `AGENTS.md` for any agent and as a Claude skill, and tracks its own remaining build as task files inside itself. Vue 3, Vite, TypeScript and Tailwind v4 over the browser File System Access API, about 1,800 lines, MIT.

• Tailwindcss
• Javascript
• Typescript
• Vue

AI Writing Rules

A Claude Code plugin that stops Claude writing like an AI. It loads a 270-word ruleset into every session, then runs a checker after every file write that flags the tells by line number and refuses to let the model move on. The rules come from 29 documented patterns, each researched into its own file with a measurable threshold: burstiness under 0.4 where human prose sits at 0.6 to 1.2, more than 20 em dashes per 1,000 words where humans use 3.2 to 10, more than one polished three-item list per 200 words. The checker is 17 regex rules and 3 statistical ones in Python with no dependencies. Tested against a sample with 14 planted tells, it caught all 14, stayed silent on clean prose, and found a real tricolon in the research files themselves.

• Python

Vouch

A hiring platform for Kuwait and the GCC, designed from a blank page around one promise: every job here is real, and every employer answers. 82 screens and 642 prototype links across a 15 page website at two breakpoints, an 18 screen mobile app, and 29 dashboard screens covering job seeker, employer and internal admin. The position comes from the data on ghost jobs rather than from features, and the whole system runs on four variable collections that switch theme and language.

• Figma

Filament Atelier

A visual page builder for Laravel, shipped as a Filament plugin. Developers define blocks in code, clients arrange them and watch the real page update as they type.

• Laravel
• Blade
• Tailwindcss
• FilamentPHP
• AlpineJS
• Livewire

Sufra

A meal subscription brand for Kuwait, designed from a blank page: name, position, palette, type, copy, then the three surfaces the business would run on. 162 frames and 1,719 prototype links across a 28 page marketing site at two breakpoints, a 32 screen mobile app, and a 46 screen dashboard covering both the subscriber account and the operations CMS. The position is taken from why people cancel rather than from taste, and the whole product is built around one number: the 22:00 kitchen cutoff.

• ShadCN
• Figma

WP2Code

A Claude Code plugin that ports a WordPress site to Laravel, Next.js, Astro or plain HTML by measuring the original instead of rebuilding it by eye. It mirrors the live site, drives headless Chrome to read getBoundingClientRect() on both the original and the port, and prints a section-by-section table of height and position deltas. Nine commands cover the loop from detecting the page builder through to deleting the mirror. Tested against a live Elementor site: 159 assets mirrored with zero references left pointing at the origin, and the site's whole design system recovered from computed styles.

• Laravel
• Blade
• Tailwindcss
• Javascript
• HTML
• Nextjs
• Playwright
• Astro

Training Board

A gym scoreboard over 1,324 animated exercises, built to be used one-handed on a phone between sets. Filter by split, muscle or equipment, then log sets against an exercise while the animation plays. It tracks volume, week streaks, personal records, 28 milestones across three tiers, bodyweight and InBody scans, and multi-week programmes that render as today's checklist instead of a catalogue. Next.js 16 and React 19 on Appwrite, installable as a PWA, deployed to a VPS in Docker. It started on Payload and Postgres and moved to Appwrite in a day.

• Tailwindcss
• Typescript
• Docker
• Javascript
• Nextjs
• ShadCN
• React

Design to HTML

A Figma plugin that exports a selected frame to a single, self-contained HTML file. It maps auto-layout to flexbox, keeps colors, per-side borders, radius, and typography, inlines vectors as SVG, and adds a Google Fonts link for the fonts you used. The code preview is syntax highlighted, with three export modes: HTML and CSS together, HTML alone, or CSS alone. Built with TypeScript as a Figma plugin.

• Typescript
• HTML
• CSS