Every consultancy needs a shopfront. This one needed to look like a terminal. Here's the stack, the design decisions, and what happens when you treat a website like infrastructure.
The Stack
Three pieces. No more.
Astro 5 — Static site generation. Zero JavaScript shipped by default. Builds at deploy time and outputs flat HTML.
Contentful — Headless CMS. Content types for the homepage, projects, background section, and blog. All content lives here. The site is a pure render layer.
Cloudflare Pages — Hosting and CDN. Deploys from the CLI, serves from the edge. No servers to manage.
The architecture is deliberately simple: Contentful is the source of truth. Astro pulls from it at build time. Cloudflare serves static files. That means no database queries at runtime, no API routes, no server-side rendering on every request. Just HTML, CSS, and the occasional sprinkle of JavaScript where it actually adds value.
Why SSG Over SSR
Server-side rendering makes sense when content changes per request — logged-in state, personalised feeds, real-time data. A consultancy site doesn't need any of that. The content changes when I publish something new, not when someone visits the page.
Static generation means the slowest thing in the request path is network latency, not a server building a page. Cloudflare's edge serves pre-built HTML faster than any server-side framework can respond. And there's nothing to attack — no Node process, no API surface, no database connection string sitting in a runtime environment.
The tradeoff: publishing new content requires a rebuild. That's solved with a Contentful webhook that triggers a GitLab CI pipeline, which builds and deploys in under a minute. For a blog and portfolio, that cadence is perfectly fine.
The Design System
The aesthetic is terminal-meets-cyberpunk. Think Bloomberg Terminal if it ran on neon.
Colours — Dark background (#080c10), teal accent (#00c8a0), blue secondary (#0af), amber tertiary (#f0a500). Everything else is shades of steel blue and dim grey.
Typography — Three fonts, each with a job. Orbitron for headings (geometric, technical, imposing). Share Tech Mono for navigation and UI chrome (monospace, precise). Rajdhani for body text (clean, readable, slightly condensed).
Overlays — A fixed scanline effect across the entire viewport. A grid background at 40px spacing. A radial vignette darkening the edges. All three are CSS pseudo-elements on the body — zero markup overhead.
Corners — Cards and sections use diagonal corner decorations. Project cards have a folded-corner effect on hover. Buttons use clip-path polygons instead of border-radius.
Animations — Staggered fade-up on page sections. A pulsing status indicator in the nav. Hover states on interactive elements are subtle border-colour transitions, never scale transforms.
The design is heavy on atmosphere but light on payload. The scanlines, grid, and vignette are all pure CSS. The SVG hero graphic is inline. No background images, no icon fonts, no animation libraries. The entire stylesheet including fonts clocks in under 30KB.
The Content Model
Contentful structures the site through four content types:
HomePage — Singleton. Tagline, hero subtext, dual CTAs, SEO metadata.
Project — Repeatable. Name, slug, badge (live/tool/analysis), rich text description, tags array, URL, optional wide layout flag, ordering integer.
BackgroundSection — Singleton. Heading, rich text body, companies array.
BlogPost — Repeatable. Title, slug, rich text body, published date, excerpt, tags, author, cover image, canonical URL, SEO fields.
The Astro layer mirrors this with typed query modules — one file per content type in lib/contentful/. Each exports typed fetch functions. Pages call these at build time via Astro's top-level await. Components receive typed props.
Project Cards as a Design Pattern
The project grid was the most interesting component to design. Each card has a badge that drives its colour — live projects glow teal, tool projects pulse blue, analysis projects burn amber. Tags sit below the description in subtle bordered chips. Cards are clickable and link out to live projects.
The wide variant spans the full two-column grid and switches to a side-by-side internal layout — description on the left, tags on the right. It's used for larger, more complex projects like the FCDO GDPR analysis pipeline. The flag is a simple boolean in Contentful. Astro reads it and applies the CSS class.
What's Not Here
No frameworks. No React, Vue, or Svelte. Astro components with scoped CSS do everything needed. No CSS-in-JS. No runtime state management. No analytics scripts, no tracking pixels, no cookie banners. The site doesn't set cookies. It doesn't make client-side requests except for font files from Google Fonts.
That's a deliberate choice. A consultancy that sells data integrity and auditability should practice what it preaches. The site is inspectable in its entirety from the browser's View Source. Every asset is static. There are no third-party scripts in the request chain.
Deploying from the CLI
Cloudflare's dashboard unification of Workers and Pages has made the Git integration path harder to find. The solution: deploy directly with wrangler.
Two commands. npm run build generates the static output. npx wrangler pages deploy dist pushes it to Cloudflare's edge. Environment variables for the Contentful API keys are set in Cloudflare's Pages settings. They're injected at build time and never touch the browser.
For automated deploys on content changes, the plan is a Contentful webhook that triggers a GitLab CI pipeline. That pipeline runs the same two commands. Publish a blog post, wait 45 seconds, it's live.
What's Next
The site is live but not finished. On the roadmap:
Proper OG image generation (currently using a static default)
Contentful preview mode for draft content
A /support and /contact page
RSS feed for the blog
The Contentful-to-GitLab webhook for automated deploys
Possibly a dark/light toggle — though that might ruin the whole terminal thing
But the foundation is solid. Static site. Headless CMS. Edge deployment. A design system that's consistent, lightweight, and distinctive. Built the way I build data pipelines — from first principles, with minimal dependencies, and an audit trail.
DataMasters Consulting builds verifiable data infrastructure. If you need pipeline engineering, cryptographic integrity, or data analysis work — get in touch.