[{"data":1,"prerenderedAt":761},["ShallowReactive",2],{"profile":3,"work:cubby":70,"work:neighbours:cubby":186},{"title":4,"description":5,"name":6,"role":7,"tagline":8,"location":9,"country":10,"workEligibility":10,"remote":11,"timezone":12,"email":13,"availability":14,"links":15,"skills":22,"education":40,"languages":52,"slug":54,"body":55},"","I build interfaces for products people use every day — mostly in Vue and Nuxt, and mostly at the\npoint where a design system meets real production constraints.","Jake Armour","Senior Frontend Developer","Vue 3 · Nuxt · TypeScript","Telford, United Kingdom","UK",true,"UTC−2 to UTC+2","jobs@jakearmour.com","Open to senior frontend roles",[16,19],{"label":17,"href":18},"GitHub","https:\u002F\u002Fgithub.com\u002Fjake-armour",{"label":20,"href":21},"LinkedIn","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fjakearmour",{"core":23,"other":31},[24,25,26,27,28,29,30],"Vue 3","Nuxt","TypeScript","JavaScript","HTML\u002FCSS","Tailwind CSS","Pinia",[32,33,34,35,36,37,38,39],"Design systems","Component libraries","Headless CMS","Core Web Vitals","Unit testing","CI\u002FCD","Data visualisation","Git",[41,47],{"institution":42,"qualification":43,"grade":44,"start":45,"end":46},"The University of Huddersfield","MEng Computer Science","Pass with Distinction",2014,2019,{"institution":48,"qualification":49,"grade":50,"start":51,"end":45},"Telford College of Arts and Technology","BTEC Information Technology","D*D*D*",2012,[53],"English (fluent)","profile",{"type":56,"children":57},"root",[58,65],{"type":59,"tag":60,"props":61,"children":62},"element","p",{},[63],{"type":64,"value":5},"text",{"type":59,"tag":60,"props":66,"children":67},{},[68],{"type":64,"value":69},"I'm currently a senior frontend developer at Spamhaus, where I've led two company rebrands and\nbuilt the Vue 3 component library the rest of the team ships on. Outside work I build tools I\nactually need: a component workshop for Vue, a zero-knowledge password manager, and a monitor\nthat watches the containers running in my house.",{"title":71,"description":72,"tagline":73,"year":74,"status":75,"role":76,"featured":11,"order":77,"stack":78,"highlights":84,"slug":88,"body":89},"Cubby","Cubby is a self-hosted password manager — a Bitwarden replacement with a web dashboard and a\nFirefox extension. The constraint that shapes every decision in it: the server never sees\nanything it could decrypt. Your master password and vault keys do not leave the client.","A zero-knowledge password manager",2026,"building","Creator",3,[79,26,80,81,82,83],"Nuxt 4","Web Crypto","Postgres","Docker","WXT",[85,86,87],"Server only ever holds ciphertext","Shared vaults without breaking the model","Proven by test, not by claim","cubby",{"type":56,"children":90},[91,104,109,116,136,142,147,153,158,164],{"type":59,"tag":60,"props":92,"children":93},{},[94,96,102],{"type":64,"value":95},"Cubby is a self-hosted password manager — a Bitwarden replacement with a web dashboard and a\nFirefox extension. The constraint that shapes every decision in it: ",{"type":59,"tag":97,"props":98,"children":99},"strong",{},[100],{"type":64,"value":101},"the server never sees\nanything it could decrypt.",{"type":64,"value":103}," Your master password and vault keys do not leave the client.",{"type":59,"tag":60,"props":105,"children":106},{},[107],{"type":64,"value":108},"That is easy to claim and easy to get subtly wrong, so it is asserted by a test that talks to a\nlive Postgres, registers a user, creates an item, and fails if any row holds anything but\nciphertext. The property is enforced by CI rather than by my good intentions.",{"type":59,"tag":110,"props":111,"children":113},"h2",{"id":112},"where-the-crypto-lives",[114],{"type":64,"value":115},"Where the crypto lives",{"type":59,"tag":60,"props":117,"children":118},{},[119,121,127,129,134],{"type":64,"value":120},"Key derivation happens in the browser. The symmetric key stays in memory only — reload the page\nand you get the unlock screen back, master password required. The API deals exclusively in opaque\nblobs; it can tell you ",{"type":59,"tag":122,"props":123,"children":124},"em",{},[125],{"type":64,"value":126},"that",{"type":64,"value":128}," an item changed and ",{"type":59,"tag":122,"props":130,"children":131},{},[132],{"type":64,"value":133},"when",{"type":64,"value":135},", never what it says.",{"type":59,"tag":110,"props":137,"children":139},{"id":138},"sharing-without-cheating",[140],{"type":64,"value":141},"Sharing without cheating",{"type":59,"tag":60,"props":143,"children":144},{},[145],{"type":64,"value":146},"Shared vaults are where zero-knowledge designs usually quietly compromise. Cubby gives every user\nan RSA key-pair, with the private key wrapped under their own symmetric key. A shared vault has\nits own key, delivered to each member encrypted to that member's public key. Invite by email,\naccept, and everyone can read and edit — while the server still holds nothing but ciphertext and\na set of per-member wrapped keys it cannot open.",{"type":59,"tag":110,"props":148,"children":150},{"id":149},"the-rest-of-it",[151],{"type":64,"value":152},"The rest of it",{"type":59,"tag":60,"props":154,"children":155},{},[156],{"type":64,"value":157},"Revision-based delta sync against an encrypted local cache, so a client fetches what changed\nrather than the whole vault. Folders with encrypted names. Live TOTP codes. A configurable\ngenerator with look-alike exclusion. Client-side Bitwarden JSON import — decrypted, re-encrypted\nand uploaded without the plaintext touching the wire. Account recovery via a one-time key issued\nat signup, because \"we can reset it for you\" is precisely what a zero-knowledge system cannot\noffer.",{"type":59,"tag":110,"props":159,"children":161},{"id":160},"running-it",[162],{"type":64,"value":163},"Running it",{"type":59,"tag":60,"props":165,"children":166},{},[167,169,176,178,184],{"type":64,"value":168},"One ",{"type":59,"tag":170,"props":171,"children":173},"code",{"className":172},[],[174],{"type":64,"value":175},"docker compose up",{"type":64,"value":177}," brings up Postgres, the API, and a Caddy proxy handling auto-TLS and\nrouting, plus a scheduled ",{"type":59,"tag":170,"props":179,"children":181},{"className":180},[],[182],{"type":64,"value":183},"pg_dump",{"type":64,"value":185}," backup with retention. The Firefox extension is built with\nWXT and is the piece still in progress.",{"previous":187,"next":595},{"title":188,"description":189,"tagline":190,"year":74,"status":75,"role":76,"featured":11,"order":191,"stack":192,"highlights":196,"slug":200,"body":201},"Vitro","Vitro is a component workshop for Vue 3 — the thing you open to build a component in isolation,\nbefore it has a page to live on.","A Vite-native component workshop for Vue 3",2,[24,193,26,194,195],"Vite","vue-component-meta","Shiki",[197,198,199],"Stories are real Vue templates","Controls derived from your props","A playground non-developers can use","vitro",{"type":56,"children":202},[203,207,212,224,230,235,248,254,267,456,469,475,503,509,540,545,551,578,584,589],{"type":59,"tag":60,"props":204,"children":205},{},[206],{"type":64,"value":189},{"type":59,"tag":60,"props":208,"children":209},{},[210],{"type":64,"value":211},"It exists because writing Storybook stories was always the part of the job I put off. Authoring\nfriction was the problem I actually wanted to solve; format churn came a close second, because a\nstory format that keeps changing underneath you turns migrations into routine work. Histoire, the\nobvious alternative, had stalled.",{"type":59,"tag":60,"props":213,"children":214},{},[215,217,222],{"type":64,"value":216},"The CLI is ",{"type":59,"tag":170,"props":218,"children":220},{"className":219},[],[221],{"type":64,"value":200},{"type":64,"value":223},". Vite is the builder — not wrapped, not shimmed, just Vite.",{"type":59,"tag":110,"props":225,"children":227},{"id":226},"who-it-turned-out-to-be-for",[228],{"type":64,"value":229},"Who it turned out to be for",{"type":59,"tag":60,"props":231,"children":232},{},[233],{"type":64,"value":234},"It has earned its keep in a way I did not plan for. A lot of my work at Spamhaus is building\ncomponents that the marketing team have only ever seen as a Figma frame — approved in a design\nfile, never touched. Giving non-technical stakeholders somewhere hands-on to poke at instead\n(change the props yourself, with the Figma frame sitting next to the real rendered component)\nhas been worth more than any amount of written documentation.",{"type":59,"tag":60,"props":236,"children":237},{},[238,240,246],{"type":64,"value":239},"That is what makes the shareable-URL state and the ",{"type":59,"tag":170,"props":241,"children":243},{"className":242},[],[244],{"type":64,"value":245},"figmaUrl",{"type":64,"value":247}," embed the two features I would\nkeep above all the others: they turn \"here is the component\" from a meeting into a link.",{"type":59,"tag":110,"props":249,"children":251},{"id":250},"stories-are-just-vue",[252],{"type":64,"value":253},"Stories are just Vue",{"type":59,"tag":60,"props":255,"children":256},{},[257,259,265],{"type":64,"value":258},"The format is a ",{"type":59,"tag":170,"props":260,"children":262},{"className":261},[],[263],{"type":64,"value":264},".story.vue",{"type":64,"value":266}," file containing ordinary Vue markup:",{"type":59,"tag":268,"props":269,"children":273},"pre",{"className":270,"code":271,"language":272,"meta":4,"style":4},"language-vue shiki shiki-themes github-light github-dark","\u003Ctemplate>\n  \u003CStory title=\"Button\">\n    \u003CVariant title=\"Primary\">\n      \u003CAppButton variant=\"primary\">Save changes\u003C\u002FAppButton>\n    \u003C\u002FVariant>\n  \u003C\u002FStory>\n\u003C\u002Ftemplate>\n","vue",[274],{"type":59,"tag":170,"props":275,"children":276},{"__ignoreMap":4},[277,300,334,364,405,422,439],{"type":59,"tag":278,"props":279,"children":282},"span",{"class":280,"line":281},"line",1,[283,289,295],{"type":59,"tag":278,"props":284,"children":286},{"style":285},"--shiki-default:#24292E;--shiki-dark:#E1E4E8",[287],{"type":64,"value":288},"\u003C",{"type":59,"tag":278,"props":290,"children":292},{"style":291},"--shiki-default:#22863A;--shiki-dark:#85E89D",[293],{"type":64,"value":294},"template",{"type":59,"tag":278,"props":296,"children":297},{"style":285},[298],{"type":64,"value":299},">\n",{"type":59,"tag":278,"props":301,"children":302},{"class":280,"line":191},[303,308,313,319,324,330],{"type":59,"tag":278,"props":304,"children":305},{"style":285},[306],{"type":64,"value":307},"  \u003C",{"type":59,"tag":278,"props":309,"children":310},{"style":291},[311],{"type":64,"value":312},"Story",{"type":59,"tag":278,"props":314,"children":316},{"style":315},"--shiki-default:#6F42C1;--shiki-dark:#B392F0",[317],{"type":64,"value":318}," title",{"type":59,"tag":278,"props":320,"children":321},{"style":285},[322],{"type":64,"value":323},"=",{"type":59,"tag":278,"props":325,"children":327},{"style":326},"--shiki-default:#032F62;--shiki-dark:#9ECBFF",[328],{"type":64,"value":329},"\"Button\"",{"type":59,"tag":278,"props":331,"children":332},{"style":285},[333],{"type":64,"value":299},{"type":59,"tag":278,"props":335,"children":336},{"class":280,"line":77},[337,342,347,351,355,360],{"type":59,"tag":278,"props":338,"children":339},{"style":285},[340],{"type":64,"value":341},"    \u003C",{"type":59,"tag":278,"props":343,"children":344},{"style":291},[345],{"type":64,"value":346},"Variant",{"type":59,"tag":278,"props":348,"children":349},{"style":315},[350],{"type":64,"value":318},{"type":59,"tag":278,"props":352,"children":353},{"style":285},[354],{"type":64,"value":323},{"type":59,"tag":278,"props":356,"children":357},{"style":326},[358],{"type":64,"value":359},"\"Primary\"",{"type":59,"tag":278,"props":361,"children":362},{"style":285},[363],{"type":64,"value":299},{"type":59,"tag":278,"props":365,"children":367},{"class":280,"line":366},4,[368,373,378,383,387,392,397,401],{"type":59,"tag":278,"props":369,"children":370},{"style":285},[371],{"type":64,"value":372},"      \u003C",{"type":59,"tag":278,"props":374,"children":375},{"style":291},[376],{"type":64,"value":377},"AppButton",{"type":59,"tag":278,"props":379,"children":380},{"style":315},[381],{"type":64,"value":382}," variant",{"type":59,"tag":278,"props":384,"children":385},{"style":285},[386],{"type":64,"value":323},{"type":59,"tag":278,"props":388,"children":389},{"style":326},[390],{"type":64,"value":391},"\"primary\"",{"type":59,"tag":278,"props":393,"children":394},{"style":285},[395],{"type":64,"value":396},">Save changes\u003C\u002F",{"type":59,"tag":278,"props":398,"children":399},{"style":291},[400],{"type":64,"value":377},{"type":59,"tag":278,"props":402,"children":403},{"style":285},[404],{"type":64,"value":299},{"type":59,"tag":278,"props":406,"children":408},{"class":280,"line":407},5,[409,414,418],{"type":59,"tag":278,"props":410,"children":411},{"style":285},[412],{"type":64,"value":413},"    \u003C\u002F",{"type":59,"tag":278,"props":415,"children":416},{"style":291},[417],{"type":64,"value":346},{"type":59,"tag":278,"props":419,"children":420},{"style":285},[421],{"type":64,"value":299},{"type":59,"tag":278,"props":423,"children":425},{"class":280,"line":424},6,[426,431,435],{"type":59,"tag":278,"props":427,"children":428},{"style":285},[429],{"type":64,"value":430},"  \u003C\u002F",{"type":59,"tag":278,"props":432,"children":433},{"style":291},[434],{"type":64,"value":312},{"type":59,"tag":278,"props":436,"children":437},{"style":285},[438],{"type":64,"value":299},{"type":59,"tag":278,"props":440,"children":442},{"class":280,"line":441},7,[443,448,452],{"type":59,"tag":278,"props":444,"children":445},{"style":285},[446],{"type":64,"value":447},"\u003C\u002F",{"type":59,"tag":278,"props":449,"children":450},{"style":291},[451],{"type":64,"value":294},{"type":59,"tag":278,"props":453,"children":454},{"style":285},[455],{"type":64,"value":299},{"type":59,"tag":60,"props":457,"children":458},{},[459,461,467],{"type":64,"value":460},"No abstract ",{"type":59,"tag":170,"props":462,"children":464},{"className":463},[],[465],{"type":64,"value":466},"args",{"type":64,"value":468}," object standing in for a template. You write the markup you would actually\nwrite, which means a story is readable by anyone on the team and stays honest about how the\ncomponent is really used. The format is a semver-protected, additive-only contract — the\nmigration churn is the thing I was trying to escape, so committing to never causing it was the\npoint.",{"type":59,"tag":110,"props":470,"children":472},{"id":471},"controls-you-didnt-have-to-write",[473],{"type":64,"value":474},"Controls you didn't have to write",{"type":59,"tag":60,"props":476,"children":477},{},[478,480,485,487,493,495,501],{"type":64,"value":479},"Controls are derived from the component's own props via ",{"type":59,"tag":170,"props":481,"children":483},{"className":482},[],[484],{"type":64,"value":194},{"type":64,"value":486},". A variant with no\nslot content auto-renders ",{"type":59,"tag":170,"props":488,"children":490},{"className":489},[],[491],{"type":64,"value":492},"\u003CComponent v-bind=\"state\" \u002F>",{"type":64,"value":494},", so a component you have just written\ngets a working playground with zero configuration. Manual ",{"type":59,"tag":170,"props":496,"children":498},{"className":497},[],[499],{"type":64,"value":500},"Hst*",{"type":64,"value":502}," controls are there when you want\nto override, and control changes update the preview live without remounting — state survives, so\nyou can tweak a prop mid-interaction.",{"type":59,"tag":110,"props":504,"children":506},{"id":505},"three-views",[507],{"type":64,"value":508},"Three views",{"type":59,"tag":60,"props":510,"children":511},{},[512,517,519,524,526,531,533,538],{"type":59,"tag":97,"props":513,"children":514},{},[515],{"type":64,"value":516},"Canvas",{"type":64,"value":518}," for the component, ",{"type":59,"tag":97,"props":520,"children":521},{},[522],{"type":64,"value":523},"Source",{"type":64,"value":525}," for Shiki-highlighted markup, ",{"type":59,"tag":97,"props":527,"children":528},{},[529],{"type":64,"value":530},"Docs",{"type":64,"value":532}," for autodocs —\nprop, event and slot tables pulled from the type signatures, including JSDoc descriptions. If a\n",{"type":59,"tag":170,"props":534,"children":536},{"className":535},[],[537],{"type":64,"value":245},{"type":64,"value":539}," is set on the story, the Figma frame embeds alongside it.",{"type":59,"tag":60,"props":541,"children":542},{},[543],{"type":64,"value":544},"The full UI state — story, variant, every control value, viewport, background, theme — is encoded\nin the URL. Any view you are looking at is a link you can paste to a designer.",{"type":59,"tag":110,"props":546,"children":548},{"id":547},"built-output",[549],{"type":64,"value":550},"Built output",{"type":59,"tag":60,"props":552,"children":553},{},[554,560,562,568,570,576],{"type":59,"tag":170,"props":555,"children":557},{"className":556},[],[558],{"type":64,"value":559},"vitro build",{"type":64,"value":561}," produces a static, relative-path ",{"type":59,"tag":170,"props":563,"children":565},{"className":564},[],[566],{"type":64,"value":567},"dist\u002F",{"type":64,"value":569}," with per-story chunks that will serve from\nany subpath. It also emits a Storybook-compatible ",{"type":59,"tag":170,"props":571,"children":573},{"className":572},[],[574],{"type":64,"value":575},"\u002Findex.json",{"type":64,"value":577},", so existing visual-regression\ntooling — Lost Pixel, Playwright — works against it without adaptation. Adopting a new workshop\nshould not mean rewriting your VR pipeline.",{"type":59,"tag":110,"props":579,"children":581},{"id":580},"status",[582],{"type":64,"value":583},"Status",{"type":59,"tag":60,"props":585,"children":586},{},[587],{"type":64,"value":588},"M1–M6 complete: the full v1 workshop is working. Next is hosted publishing.",{"type":59,"tag":590,"props":591,"children":592},"style",{},[593],{"type":64,"value":594},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":596,"description":597,"tagline":598,"year":74,"status":75,"role":76,"featured":11,"order":366,"stack":599,"highlights":602,"slug":606,"body":607},"Beacon","I run a handful of Docker containers at home that are reachable from the internet. Beacon exists\nbecause I kept finding out one of them had fallen over by trying to use it.","Uptime monitoring for the containers I self-host",[79,600,81,82,601],"Drizzle","Cloudflare Tunnel",[603,604,605],"Watches from outside the box","No inbound ports, no manual DNS","One docker compose up","beacon",{"type":56,"children":608},[609,613,619,629,635,646,652,690,696,756],{"type":59,"tag":60,"props":610,"children":611},{},[612],{"type":64,"value":597},{"type":59,"tag":110,"props":614,"children":616},{"id":615},"the-one-rule",[617],{"type":64,"value":618},"The one rule",{"type":59,"tag":60,"props":620,"children":621},{},[622,627],{"type":59,"tag":97,"props":623,"children":624},{},[625],{"type":64,"value":626},"The monitor must not run on the same host as the things it watches.",{"type":64,"value":628}," Its entire job is to\nnotice when that host dies, which it cannot do from inside it. Obvious once stated, easy to get\nwrong when you are the person who owns both boxes and has a spare slot on one of them. Beacon\nruns somewhere else, deliberately, and everything about its packaging assumes that.",{"type":59,"tag":110,"props":630,"children":632},{"id":631},"getting-out-of-the-house-safely",[633],{"type":64,"value":634},"Getting out of the house safely",{"type":59,"tag":60,"props":636,"children":637},{},[638,640,644],{"type":64,"value":639},"The services it watches reach the internet through a ",{"type":59,"tag":97,"props":641,"children":642},{},[643],{"type":64,"value":601},{"type":64,"value":645}," — no inbound ports\nopen on the home network, no port forwarding, no DNS records maintained by hand, no certificates\nto renew. The tunnel dials out; nothing dials in.",{"type":59,"tag":110,"props":647,"children":649},{"id":648},"what-it-is",[650],{"type":64,"value":651},"What it is",{"type":59,"tag":60,"props":653,"children":654},{},[655,657,661,663,667,669,673,675,681,683,688],{"type":64,"value":656},"A ",{"type":59,"tag":97,"props":658,"children":659},{},[660],{"type":64,"value":79},{"type":64,"value":662}," app with an auth-protected dashboard: what is up, what is down, how long it has been\nthat way, and history per service. Checks and results live in ",{"type":59,"tag":97,"props":664,"children":665},{},[666],{"type":64,"value":81},{"type":64,"value":668}," via ",{"type":59,"tag":97,"props":670,"children":671},{},[672],{"type":64,"value":600},{"type":64,"value":674},", with\nmigrations applied on startup so a deploy is a restart. Auth is ",{"type":59,"tag":170,"props":676,"children":678},{"className":677},[],[679],{"type":64,"value":680},"nuxt-auth-utils",{"type":64,"value":682},". The whole\nthing is a single ",{"type":59,"tag":170,"props":684,"children":686},{"className":685},[],[687],{"type":64,"value":175},{"type":64,"value":689}," on a host that needs Docker and nothing else — no Node, no\npackage manager; dependencies are installed and the app built inside the image.",{"type":59,"tag":110,"props":691,"children":693},{"id":692},"configuration-is-load-bearing",[694],{"type":64,"value":695},"Configuration is load-bearing",{"type":59,"tag":60,"props":697,"children":698},{},[699,701,707,709,715,717,722,724,730,732,738,740,746,748,754],{"type":64,"value":700},"A note I left in the deployment guide for my future self, after it bit me twice: every\napplication variable must be ",{"type":59,"tag":170,"props":702,"children":704},{"className":703},[],[705],{"type":64,"value":706},"NUXT_",{"type":64,"value":708},"-prefixed. Nitro bakes ",{"type":59,"tag":170,"props":710,"children":712},{"className":711},[],[713],{"type":64,"value":714},"runtimeConfig",{"type":64,"value":716}," at build time and\nre-reads it at runtime ",{"type":59,"tag":122,"props":718,"children":719},{},[720],{"type":64,"value":721},"only",{"type":64,"value":723}," from ",{"type":59,"tag":170,"props":725,"children":727},{"className":726},[],[728],{"type":64,"value":729},"NUXT_*",{"type":64,"value":731},". Set ",{"type":59,"tag":170,"props":733,"children":735},{"className":734},[],[736],{"type":64,"value":737},"ADMIN_PASSWORD_HASH",{"type":64,"value":739}," instead of\n",{"type":59,"tag":170,"props":741,"children":743},{"className":742},[],[744],{"type":64,"value":745},"NUXT_ADMIN_PASSWORD_HASH",{"type":64,"value":747}," and sign-in returns a 503 while ",{"type":59,"tag":170,"props":749,"children":751},{"className":750},[],[752],{"type":64,"value":753},"docker compose exec",{"type":64,"value":755}," shows you a\nperfectly correct-looking value in the environment. The container starts, the dashboard loads,\nand the one thing you need it to do fails silently.",{"type":59,"tag":60,"props":757,"children":758},{},[759],{"type":64,"value":760},"Small operational details like that are most of what running your own infrastructure actually is.",1785686103714]