I am the appointed outsourced IT function for a DFSA-regulated Category 4 insurance intermediary in the Dubai International Financial Centre, a firm licensed for insurance intermediation and insurance management and permitted to hold insurance money. The role carries operational responsibility for technical controls, monitoring, incident detection and response, asset inventory, access control, patching, backups and resilience.

The estate is designed rather than built so far, so here is the design work:

• A rule to control to evidence matrix covering all 19 rules of DFSA GEN 5.5, GEN 5.3.21 through 5.3.27 and the DIFC Data Protection regime. The fourth column is the one that matters: who owns each control, split between contractor, firm and vendor, so nothing is left implicitly assigned.
• Three architecture options costed as lifetime obligations instead of build price. Every component you add is something that must be patched, monitored, tested, registered, vendor-assessed and explained to an assessor for as long as it exists, and all of that rests on one person. I turned down a technically sound reference architecture on exactly that ground.
• A regulatory return read as a data model. Per-transaction tagging of insurance class down to roughly 30 subclasses and one of 12 mutually exclusive jurisdiction buckets, with reinsurance following the ceding insurer, and per-balance ageing of client money against a 30-day threshold. Specified before vendor selection, so the requirement lands in the system rather than in somebody's spreadsheet every quarter.
• Monitoring designed against three parallel notification clocks that a single incident can start at once: immediately, within 72 hours, and without undue delay, each under a different instrument. That makes monitoring a downtime timer running against each approved recovery objective, not an alert saying something is down.
• Third-party ICT due diligence to the GEN 5.5.3 standard, including a process that converts a vendor's spoken answers into written evidence an assessor will accept, because a supplier attesting to itself is not evidence.

I build and document the technical controls so the firm's compliance officer can evidence conformity to the regulator. I do not certify compliance, and I am deliberate about writing it that way.

My own site. Each project gets the reasoning instead of a gallery: what the constraint was, what I tried, what I threw away, and the number it ended at. The same rules as the rest of my work apply to it — strict TypeScript, Feature-Sliced Design, CSS Modules with design tokens, no UI library.

Site for a game studio, plus the Google Play compliance pages its Monkey Escape title needed to stay listed. Seventeen landing sections and two mini-games written by hand: a DOM whack-a-mole on a 3×3 crate grid with 30-second rounds, and a canvas runner with gravity jump, AABB collision and banana projectiles.

There is not one animation library in the project. Reveals are a single IntersectionObserver per subscriber, counters are requestAnimationFrame with easeOutCubic and a setTimeout settle fallback, and all of it stops under prefers-reduced-motion. The 2026 pass added the entire responsive layout and 12 of the 17 sections.

Studio site built around a cost calculator that has to survive being wrong in public. A 24-step quiz splices any of 15 feature detail pages into 9 base steps as you answer, and the price is deterministic: option hours multiplied by role rate, frontend at $11/h, backend $15, design $8, AI $20.

The estimate is composed into an 800×1185 pt PDF in the browser through @react-pdf/renderer, so nothing is uploaded and the route works offline once loaded. Behind the site sits a 26-module NestJS monolith over 25 entities that serves the public pages, the admin CMS and a Telegram bot with scheduled broadcasts.

Single-page sale of NFT node licences whose only conversion goal is a whitelist registration relayed to Telegram. App Router serves the page statically, Pages Router serves the one API route as a function.

The port fixed a real hazard: the Telegram client was constructed at module scope with polling: { autoStart: true }, which starts an unbounded getUpdates loop per instance and made the build itself dial Telegram. Rewritten pollingless, with a 5 requests/minute limit and a documented six-code response contract.

A 2023 Gulp, Webpack and SCSS landing page rewritten from nothing on Next 16 with Feature-Sliced Design. I extracted the behaviour instead of porting the build.

The custom fullpage engine replaces the library: wrappers carry data-fp-state, slides move on translate3d(0, ±100%, 0) with the original 0.7s cubic-bezier(0.55, 0.085, 0, 0.99), and a slide only switches once its inner content has been scrolled to the edge. Twelve per-screen animation modules replaced the single legacy placeholder that made every screen enter identically. Images went 2.8 MB to roughly 0.5 MB.

A 2022 Gulp and Webpack site rewritten line by line on Next 16 with three production dependencies in total: next, react, react-dom. Everything else is pinned exactly in devDependencies.

Hover on touch devices is solved once for the whole site by a client agent that maps hover state onto scroll position under (hover: none), with sections opting in through data attributes so they stay server components. That work surfaced a subtle bug worth keeping: an IntersectionObserver with root: Element never checks whether the root itself is on screen, which left catalogue cards lit forever. The legacy icon font was disassembled with opentype.js into 18 currentColor SVG components, and the consultation calendar is unit-tested including a Sunday-start month and a leap February.

Marketing site and lead funnel for a 12-villa complex in Istanbul, split out of a private monorepo into three repositories with the 2024 source kept verbatim on dev.

Every section reads its copy from a *.config.ts module sitting beside the component, which is why all four routes still render complete with zero network calls after the backend died. Motion is hand-rolled throughout: an 11-layer parallax hero driven by one mousemove listener writing --move-x and --move-y, a requestAnimationFrame marquee that wraps at a quarter of scrollWidth, and floor plans that nest an EffectFlip Swiper inside a floor-paginating Swiper.

A 2023 Gulp, SCSS and PHP site for a buy-now-pay-later platform, rewritten on Next 16 and Feature-Sliced Design with the same design and copy and none of the original code. The 2023 source lives on a legacy branch with the bot token that had shipped in it replaced.

Two decisions I would make again. Assets went 43 MB to 707 KB through sharp, one 3840×2160 flat-gradient background having been 7 MB by itself. And the 30 coverage pins come from a plate-carrée projection fitted against five unambiguous coastlines instead of being eyeballed, so a correction is an edit to latitude and longitude. Every accordion was deleted: the legal page's 146 clauses became a sticky rail beside both documents in full, findable with Ctrl+F and linkable.

A Telegram Mini App farming game where the world cycles through three eras, rebuilt from scratch across four repositories. One Next 16 application serves the landing page, the game and the dev stand by hostname. A NestJS 11 and Prisma 7 game server speaks a binary WebSocket protocol. Terraform and Ansible describe three Hetzner machines with 14 roles and 29 alert rules, with monitoring deliberately on its own box so a dead server cannot also silence the alarm about itself.

Authentication is four separate entry doors with argon2id and a rotating __Host-df_rt refresh cookie whose retired fingerprints are archived, so presenting an old one is read as theft and kills every session that owner has.

On 2 August 2026 I moved the legacy game off AWS onto Hetzner with 7 minutes of downtime, taking the bill from about $546 a month to roughly $140 and closing the AWS account. The restore drill is measured rather than assumed: from zero, the game API was live with matching data in 17 minutes. Port 22 is closed to the internet, with SSH only over Tailscale.

Production platform for a UK distributor of veterinary diagnostic reagents: public site in six locales, NestJS and PostgreSQL API, admin CMS and the whole Terraform and Ansible contour, running as containers on one Hetzner CPX32 behind a single server_name-routing nginx.

Locales live on app/[locale] with no i18n library. proxy.ts resolves cookie, then Accept-Language, then Cloudflare's CF-IPCountry, then falls back to English, and database content is typed LocalizedText resolved with an English fallback so a missing translation never leaves a hole on the page.

POST /feedback validates a class-validator DTO, writes a Lead row and fires a Telegram message inside one request, deriving city, country and IP server-side from Cloudflare headers so the browser only sends screen size and locale. The infrastructure had been provisioned by hand before I took it over. I imported the live server, firewall and DNS records into Terraform and drove the plan down to zero changes and zero destroys.

Bilingual production site for a financial consultant working between DIFC and Turkey. The Russian and English switch is built on useSyncExternalStore over a module-level store instead of Context, and getServerSnapshot always returns English so only one version ever gets indexed.

The whole contour is mine: Dockerfile, three Compose profiles, nginx, a Cloudflare Origin Certificate, a two-stage GitLab pipeline and a self-hosted runner on a Hetzner CCX13.

The repository carries a 1,052-line engineering log of 40 numbered decisions that records the options which lost, including the false leads I discarded while bisecting an iOS WebKit bug across 10 test inputs. next/font and font-display: swap were racing on form fields, which gave an invisible caret and a jumping page. The fix was a system font stack for inputs and textareas only.

The landing page of a B2B wholesale price aggregator, restored out of an agency product whose buyer cabinet and admin panel were built by other developers and removed.

The interesting engineering here is subtractive. A 69 MB Figma SVG export containing 2,465 conic-gradient foreignObject elements and 34 MB of duplicated clip paths was rasterised in headless Chromium at 2× with alpha into roughly 1 MB of WebP, and the dependency tree went from 40 packages to 5 runtime dependencies. The search demo is a three-state machine whose offers are generated from a string hash rather than Math.random, so there is no hydration drift.

A 14-section token portal with a public trust-score route and machine-readable /total-supply and /circulating-supply pages, prerendered statically because CoinGecko and CoinMarketCap fetch a URL and read the body rather than running JavaScript.

Five viewport tiers resolve centrally through a useView hook, and the heavier blocks ship separate implementations per tier: the roadmap exists three times over.

The restoration's real value was the security pass. The OpenSea key had been sitting in the env block of next.config.js, which inlines it into the client bundle. It moved server-side, the SendGrid key came out with it, and both were treated as compromised.

Marketing and investor-relations site for a discontinued Web 3.0 and AI venture platform, restored with its lost content rebuilt from a production database dump plus June 2024 Wayback snapshots.

The entire site reads from one string_storage table whose keys encode layout position, as in home_page_offer_section_1_title, and four metadata_<page> rows hold JSON documents, which made SEO itself editable content. Every recovered string was verified byte for byte in both the SQL seed and the TypeScript fallback.

I kept the original architecture rather than forking it: SSR still calls GET /string-storage?page= with a 5-second timeout, and every non-empty row the API returns overwrites the archived fallback string by string.

A private tutor's site where every string, price, news item and SEO tag is editable from the CMS.

The design decision worth naming is uniformity: 20 NestJS modules scaffolded from templates all expose the same five verbs over 17 soft-deleting entities and 11 migrations, so the admin panel drives every entity through one generic table and one generic form, and adding a content type is a scaffold plus a migration with no new UI.

Review moderation has no moderation screen at all. A new review posts to Telegram with an inline button whose callback hits PATCH /reviews/:id/verify, which is why the guard accepts either a JWT or a shared bot secret.

Publisher-acquisition landing for an ad network, carrying a full-viewport React Three Fiber canvas driven by shaders I wrote by hand. gradient.frag and gradient.vert with glslify simplex noise compile through a raw-loader to glslify-loader webpack rule while all five routes stay statically prerendered.

The one runtime request, the success-story cards, is client-side, optional, and skipped entirely when NEXT_PUBLIC_API_URL is unset. Rather than faking a working platform, the dead calls-to-action go through a provider with seven configured popups that explain what this archive is.

Storefront for a car body-parts shop, recovered from a company that had shut down and made runnable without its API.

The offline seam lives in exactly one file, offlineFallback.service.ts: the live call is raced against a 4-second timeout and logs which endpoint went missing, so server rendering, client pagination and the vehicle picker all share one fallback path.

The archive was desktop only, with width media queries in 15 of 136 styled files. The rebuild covers eight bands, verified by loading the production build into a resizable iframe and checking 20 pages at 15 widths from 280 to 2560 px against 5 assertions each.

Wholesale truck tyre and wheel storefront with its own admin CMS, built around the fact that the dealer's stock lived in the accountant's spreadsheets.

POST /parsing takes a CSV and a category slug and runs createFilters(), groupProperties() and creatItems() against four column maps that match the shop's real 2024 exports. Filters and their options are database rows linked many-to-many to items, so faceted search is a SQL join on indexed UUIDs.

24 modules, 20 entities and 19 migrations spanning January to December 2024. The offline demo hooks in at the transport layer, so every page still fires the real request and only falls back to a 65-item snapshot when it fails.

A drag-and-drop geography game: 17 country cards dropped onto their capitals on a Middle East map I drew, with the entire game state held in two useState calls.

Because the map is inline SVG rather than an image, the drop zones live in the artwork's own coordinate space and the map scales losslessly without a second request.

The 2026 pass added touch support through two coexisting positioning systems, SVG-relative fractions below 1024 px and the original hand-tuned pixel sets above, plus the SEO and PWA layer the archive never had.

Control system for a 4DX attraction: a Next 15 kiosk console plus an Express 5 and Socket.IO service that streams Time,Yaw,Pitch,Roll telemetry at roughly 10 Hz over serialport to an Arduino platform.

Safety here is structural rather than conventional. Movements go through a sequential task queue, and emergency_stop sets a flag and then empties the queue outright, so a halt cannot be stuck behind queued motion.

Licensed motion tracks are AES-256-CBC at rest with the 32-byte key validated at boot. A ride decrypts a track to a sibling CSV, then unlinks both the plaintext and the encrypted file, so a track is literally consumed by being played.

Four template repositories and a 225-line agent skill that takes an empty folder to a created GitLab group, populated repositories, a green check-all, provisioned Hetzner and Cloudflare infrastructure and a deployed site in one pass.

All the variance between projects lives in a 19-row project passport that 56 placeholder variables resolve against across 209 occurrences, and dependency pins are re-resolved through npm view at generation time so a new project never inherits stale versions.

The part I am most careful about is where it stops. The skill encodes six points at which it must hand back to a human: creating a top-level group, any missing token, any purchase, customer credentials, any Terraform plan containing a destroy or a replace, and image files.