DRAUGEL ENGINEERING
Back to the proposal
Under the hood · The stack

What it is built out of, and why.

Every piece listed here is doing a job on the pages you have been clicking through. There is no list of things we like: if a library is on this page, something on your site stops working without it, and the entry says what.

14
pages a visitor can land on, each written out as finished HTML
13
share cards drawn at build time
0
servers or databases to keep running
~8s
to rebuild the entire site from scratch

Everything below is chosen on the same principle: standard parts, owned outright. Each one is something a competent developer already knows or can learn from public documentation, and none of it is a service that can raise its price or close its doors and take your website with it.

The foundation

3

Next.js 16.2.12

The framework the site is built in

It is what turns the source into the fourteen finished pages, and it is configured to produce plain files rather than a running application. That single setting is why there is no server to patch, no runtime to keep alive, and nothing that can be down at two in the morning.

It also draws the preview cards that appear when a page is shared, handles the search metadata on every page, and generates the sitemap.

Why it matters to you: the most common way a website becomes expensive is that it needs something running to serve a page. This one does not.

React 19.2.4

How the pages are assembled from parts

The site is built from reusable pieces rather than repeated markup. A card, a badge, a section header: each is defined once, and every page that needs one uses the same definition.

The practical effect is that a change lands everywhere at once. When the news cards were reworked, the article, LinkedIn and video cards all moved together because they share the parts underneath.

Why it matters to you: the largest, best-documented hiring pool in front-end work. This is not a niche choice you would struggle to staff.

TypeScript 5.9.3

Catches mistakes before anyone sees them

Every piece of content on the site has a declared shape. An article has a title, a date, a set of tags drawn from a fixed list. Get one wrong and the build stops with the file and line, rather than the page going out with a blank space in it.

That is not theoretical here. The tags were renamed twice while the news section was being built, and both times the rename was safe because a tag that no longer existed could not compile.

Why it matters to you: a whole category of small public embarrassments becomes impossible rather than unlikely.

How it looks

4

Tailwind CSS 4.3.3

The styling system

The brand is defined once as a set of named values: the navy, the orange, the corner radius, the spacing steps, the easing curve. Everything on the site refers to those names rather than repeating the numbers.

Change the orange in one place and it changes everywhere it was meant to, and nowhere it was not. It also strips out every style the site does not actually use, which is most of why the pages are as light as they are.

Why it matters to you: a rebrand is an afternoon, not a rewrite.
cva

Class Variance Authority 0.7.1

Keeps the component variants honest

A button has sizes and styles; a badge has colours and sizes. This declares those options in one table per component, so “small outline badge” is a named combination rather than a string of styles somebody retyped slightly differently on another page.

Where it is: the button and the badge, the two pieces used most often across the site.
clsx

clsx 2.1.1

Chooses styles conditionally

A small helper for “apply this style only when the card is featured”. Two kilobytes doing a job that is otherwise a mess of string joining.

Paired with: tailwind-merge, immediately below. The two are used together everywhere as one function.
merge

tailwind-merge 3.6.0

Settles style conflicts predictably

When a component says “normal padding” and the page using it says “more padding”, something has to decide. This makes the last instruction win, every time, instead of the outcome depending on which style was written first.

The non-obvious part: without it, a component could not be adjusted where it is used, and the codebase would fill up with near-duplicate components differing by one value.

Interface parts

3
radix

Radix Dialog 1.1.23

The video player overlay

Opening a video darkens the page and shows the player. What that actually requires is more than it looks: the keyboard has to stay inside the overlay while it is open, Escape has to close it, focus has to return to the thumbnail you clicked, and a screen reader has to be told the rest of the page is inert.

All of that is solved here, correctly, by people who work on it full time. Written by hand it is a reliable source of accessibility defects.

The non-obvious part: the YouTube player itself is not loaded until you click. Four embedded players on a page would pull roughly a megabyte each and set tracking cookies for visitors who never pressed play.
radix

Radix Slot 1.3.3

Lets a button be a link

“Request a demo” looks like a button but is a link, because it goes somewhere. This is what lets one component carry the styling while the underlying element stays whichever one is correct.

Why it matters: a link that is really a button breaks opening in a new tab, and a button that is really a link breaks the keyboard. Getting this right is invisible when it works.

Lucide 1.27.0

The icon set

One consistent, open-licensed set for every arrow, tick and chevron on the site, drawn as shapes rather than images so they stay sharp at any size and take their colour from the text beside them.

The non-obvious part: it deliberately does not include company logos, so the LinkedIn and YouTube marks are drawn by hand in one shared file. That is the correct arrangement: another company’s trademark should not arrive through a general icon dependency and change shape when it updates.

Movement

3

Three libraries for movement looks like one too many, so here is the division of labour: one animates things as they arrive, one draws the two diagrams that draw themselves, and one changes how scrolling itself feels. They are three different problems, and each of these is confined to the one it is best at.

motion

Motion 12.42.2

Entrances, and everything that reacts to you

Sections rise into place as they come into view, cards lift under the cursor, the reveal order staggers down a list. It runs animation on the browser’s own compositor where it can, which is the difference between movement that feels attached to the page and movement that stutters.

The non-obvious part: the hero deliberately does not use it. Its entrance is plain CSS, because a headline animated in JavaScript cannot appear until the JavaScript has loaded, and that made the largest element on the page arrive nearly a second and a half late. Moving it to CSS brought that to 170 milliseconds.
gsap

GSAP 3.15.0

The two drawings that draw themselves

The line that threads through the five stages of the process diagram, and the arcs that reach across the coverage map, are drawn on rather than faded in. Doing that means measuring the true length of each curve in the browser at the moment it runs, then animating the line from fully hidden to fully drawn.

That measurement is the reason this library is here. It is a specific capability, used in exactly two places.

Deliberately limited: nothing on this site is pinned in place or tied frame-by-frame to the scrollbar, which is the effect GSAP is usually hired for and the one that most often makes a page feel like it is fighting you. Its triggers here fire once, when a section first comes into view, and then stop.
lenis

Lenis 1.3.25

The weight of the scroll

Gives the wheel a small amount of momentum, so the page feels like a surface being moved rather than a list jumping by fixed steps. Subtle by design: you would notice its absence sooner than its presence.

Its second job is quieter. Once anything is smoothing the scroll, two parts of the page can disagree about where the scroll actually is. Everything that reacts to scrolling is pointed at this one source instead, so they cannot drift apart.

How we know nothing depends on it: when a visitor’s device asks for reduced motion, it is never switched on at all, and the whole site runs without it. That path is exercised, not assumed.

Build and delivery

2

Node.js runtime

Runs the build, and only the build

Two small scripts of our own run either side of it: one pulls the latest videos from the channel before the site is built, one stamps the copyright notice into every page afterwards.

Worth being clear about: this runs on our machine and on the build server. It is not running anywhere a visitor touches, and it is not something your hosting has to support.

Cloudflare Pages hosting

Where the finished site lives

The built folder is copied to servers worldwide and each visitor is answered by the nearest one. Because there is nothing to execute, hosting a site like this sits at the bottom of every pricing table, and often at zero.

Not a lock-in: the output is a folder of HTML files. It would run unchanged on any host that can serve a folder, which is all of them. Moving is a copy, not a migration.

What is deliberately not here

Every dependency is a thing that can break, get slower, change its licence or need updating. These are the ones worth naming because their absence is a decision, not an oversight.

×

No analytics or tracking scripts

Nothing on these pages reports your visitors to a third party. No tag manager, no pixels, no cookie banner needed, because there are no cookies to consent to. Measurement can be added later and deliberately, with a tool that does not require one.

×

No database, and no CMS to log into

Content lives in files that are versioned like code, so every change has an author and a date and can be undone. For a site this size that is faster to work with and impossible to leave unpatched.

×

No web fonts fetched from Google

The typefaces are served from your own domain. One less company knowing who reads your site, and one less connection to somebody else’s server before your text can appear.

×

No page builder, and no theme to outgrow

Nothing here is a template bought from somewhere with parts that cannot be reached. Every element on the page is ours to change, which is why the revisions you have asked for have been changes rather than workarounds.