Andromedae is an Australian SMSF administration business running its public website on a legacy Wix site. The business needed a complete rebuild: a modern, maintainable implementation built around its updated visual identity, covering services, company and team information, fees, contact options, privacy and security practices, the complaints process and supporting business information.This is a production replacement rather than a portfolio demonstration. The Astro implementation went live on the public domain on 10 August 2026, replacing the legacy Wix site. www.andromedae.com.au is now served from Cloudflare, with the apex domain redirecting to www.
My role
I am responsible for the technical implementation and production delivery of the new website. The visual design direction was supplied to the project as Figma design work; my job was to turn it into a working, accessible, maintainable site and get it safely into production.That covered:
translating the supplied Figma design direction into a responsive website;
establishing the Astro project architecture and reusable component/page layouts;
implementing the site in TypeScript, Astro and CSS;
developing and maintaining the design-token and styling system;
optimising and managing website imagery;
accessibility work — semantic structure, heading hierarchy, keyboard navigation, focus states, image alternatives and colour contrast;
SEO fundamentals including metadata, sitemap and robots configuration;
preparing redirects that preserve legacy Wix URLs;
configuring Cloudflare deployment and production security headers;
planning the DNS, TLS and rollback requirements for the migration; and
documenting the deployment and ongoing development approach.
I also maintain the website after launch as part of a broader systems, security and development role at Andromedae.
Technical approach
Astro for the site framework, with TypeScript, HTML and vanilla CSS
Astro image optimisation for the site's imagery
Cloudflare, deployed through the Cloudflare Workers / Wrangler workflow
Git / GitHub for version control
Figma as the design source
Claude Code as the primary AI-assisted development environment
The site deliberately uses a lightweight component and CSS architecture rather than pulling in a large UI framework it does not need. For a content site of this size, a small set of well-factored components and a disciplined token system is less for the business to carry than a framework it does not need.
The interesting problem: migrating a live commercial site
Rebuilding the site was the straightforward half. The harder half was replacing a live commercial website without losing the things the business already depends on.That meant treating the cutover as its own engineering problem: preserving legacy Wix URLs through redirects so existing links and search rankings survive, planning DNS and TLS changes, preparing security headers as part of the production configuration rather than as a post-launch addition, and documenting a rollback strategy so a failed cutover has a defined way back rather than an improvised one.
AI-assisted workflow
Claude Code is part of a structured engineering workflow here, not a code-generation shortcut.The project carries a persistent CLAUDE.md giving the agent project-specific context and constraints: architecture, component conventions, styling rules, accessibility expectations, image-handling requirements, implementation constraints, verification requirements, and what counts as acceptable completed work. I have also been developing reusable Claude Code skills for the project, including design-related workflows.Within that context, Claude Code supports implementation planning, component development, analysing existing patterns before changes are made, translating design requirements into implementation tasks, debugging, refactoring, responsive-design and accessibility reviews, deployment preparation, security review, documentation, code review and verification.Implementation work runs through a spec-driven loop with two human gates: compare the current implementation against the reference, produce a scoped plan, get that plan approved before a single file is touched, implement only the approved change, verify it, then check the result against written acceptance criteria before anything is called done. If a check fails, the loop returns to the relevant earlier step rather than moving forward.My role is to define the requirements and constraints, make the architectural and security decisions, approve the plan, review proposed changes, test the resulting site and decide whether the work meets the project's Definition of Done.The useful distinction is not how much code an agent produced. It is how the assistance is governed, reviewed and verified.
Where it stands
Live on the public domain since 10 August 2026, replacing the legacy Wix site. Delivered: the rebuild itself, the migration to a developer-managed Astro architecture, production deployment through Cloudflare Workers/Wrangler, a reusable component architecture, accessibility as a development requirement rather than a retrofit, security headers serving in production, legacy URL preservation through redirects, SEO migration, and a documented rollback strategy for the cutover.
Measured against the live domain
The security posture is the part that is verifiable from outside, so it is the part worth stating precisely. The production response carries HSTS, X-Content-Type-Options: nosniff, X-Frame-Options: DENY, Referrer-Policy: strict-origin-when-cross-origin, a Permissions-Policy denying camera, microphone, geolocation and payment, and a Content-Security-Policy that permits scripts only from the site's own origin plus one named hash — no unsafe-inline for scripts, with object-src 'none' and frame-ancestors 'none'.Lighthouse against the public domain, replacing the pre-launch figures this section used to carry. Median of three mobile runs and two desktop runs, because a single run on simulated throttling moves by a few points either way:
Desktop — Performance 96, Accessibility 100, Best Practices 93, SEO 92. First Contentful Paint 0.9s, Largest Contentful Paint 1.2s, Total Blocking Time 0ms, Cumulative Layout Shift 0.004.
Mobile — Performance 95, Accessibility 100, Best Practices 93, SEO 92. First Contentful Paint 2.2s, Largest Contentful Paint 2.5s, Total Blocking Time 0ms, Cumulative Layout Shift 0.000.
The first measurement against the live domain was worse than this, and the gap is the useful part. Mobile Performance came back at 75, with a 6.1 second Largest Contentful Paint. The hero was a CSS background-image, which the browser's preload scanner cannot see, so 2.3 seconds went on load delay before the request was even made; and image-set() selects on device pixel ratio rather than width, so a 412px phone was served a 2880px, 422 KB image — half the page's total weight in one file.The fix was to promote the hero to a real <img> with a width-based srcset, sizes="100vw" and fetchpriority="high". A phone now receives the 828px variant at 28 KB instead of the 2880px one at 422 KB, the whole page dropped from 843 KB to 461 KB, and mobile Largest Contentful Paint went from 6.1s to 2.5s — inside the "good" Core Web Vitals threshold, though not yet comfortably so. Fonts are now 70% of what remains and are the next thing to look at.That sequence is the point of measuring against production rather than a preview deployment. The pre-launch build scored 100 on a fast connection from a Workers preview; the same code served to a throttled phone did not, and only the production measurement showed why.The Best Practices deduction is the platform's rather than the site's. Cloudflare injects its own analytics beacon and bot-management script into the response, and the Content-Security-Policy refuses to execute what it has not been told to trust. The beacon is now allow-listed deliberately so the client keeps its analytics; the bot-management script carries a per-request token, so its hash changes on every response and it cannot be allow-listed by hash even in principle. One console error therefore remains, as an accepted trade-off rather than an oversight — the alternative is unsafe-inline, which would undo the point of the policy. The remaining SEO deduction is a Content-Signal directive in robots.txt that Lighthouse reports as unknown; it is a deliberate content-signals policy declining AI training use, and worth more than the audit point it costs.
What I took from it
Security and accessibility are much cheaper as development requirements than as post-launch fixes — headers, semantics, focus behaviour and contrast were part of the build rather than a remediation pass afterwards.The other lesson is about AI-assisted work at production scale: the quality of the output tracks the quality of the context and the verification around it. A persistent CLAUDE.md, explicit constraints, reusable skills and a real Definition of Done do more for the result than any individual prompt.The repository is a private work repository, so this case study describes the architecture and engineering approach rather than linking source code.
My role is to define the requirements and constraints, make the architectural and security decisions, approve the plan, review proposed changes, test the resulting site and decide whether the work meets the project's Definition of Done.
The useful distinction is not how much code an agent produced. It is how the assistance is governed, reviewed and verified.