Peak Services Ltd — Malta
2026
LoyalEdge
Three files, no build step, no external request — and a counter that refuses to be left reading zero.
Delivered to
Europe — relocation to Malta
LoyalEdge careers
Everything
One HTML file, one stylesheet, one script
Discovery: JobPosting structured data
Techniques
2
4 constants, formulas and guards
A conversion-focused recruitment page for a multilingual customer-support programme that relocates people to Malta for paid training. Its most consequential constraint is not technical: the copy is legally reviewed, and the brief states in its own opening block that the legal review overrides everything else in it. The design had to make reviewed wording persuasive without being allowed to rewrite it.
Offline
A recruitment landing page for a relocation programme. Not linked from this page; claims are made against the source.
Three files, no dependencies — and a counter that refuses to be left reading zero.
What a naive count-up leaves behind: a recruitment page advertising zero placements, zero languages, zero countries.
Every early return writes the final value first. The animation is an enhancement over a correct number, never the thing that produces it.
3
files — HTML, CSS, JS
0
dependencies
0
build step
861px
the breakpoint, as a live query
What was built, and for whom.
LoyalEdge careers
Europe — relocation to Malta
en
Single page plus legal routes, structured data for job postings, and zero runtime dependencies.
Each one starts with something that was broken.
- 01
A counter is never left stranded at zero
The failure
Numbers that count up on scroll are rendered as 0 and animated to their value. Every path where the animation does not run — no observer support, motion preference set, the element already past when the script loads — leaves the page stating that the programme has zero of everything. The failure is silent and it says the opposite of what the page is for.
The decision
Treat the animation as an enhancement over a correct value rather than as the thing that produces it. Every early return sets the final number first, and the same failsafe is applied to the reveals so no section can be left invisible either. The source names it as the same pattern in both places.
- guardscript.js
“Same failsafe as the reveals: never leave a counter stranded at ‘0’.” - guardscript.js
if (reduceMotion || !('IntersectionObserver' in window)) — settle immediately - guardscript.js
parallax targets are an empty list under reduced motion, so nothing binds
- 02
Desktop behaviour is a query, not a width read
The failure
Behaviour gated on a width measured once at load is behaviour that is wrong for anyone who rotates a tablet, splits a window or resizes — and it is wrong silently, because nothing re-checks.
The decision
Express the breakpoint as a media query object and let the browser maintain the answer, so a layout that changes behaviour above a threshold keeps agreeing with the layout the stylesheet is drawing at the same threshold.
- constantscript.js
var desktop = window.matchMedia('(min-width: 861px)')
Every animation, with what it does when asked for less.
The last column is the one worth reading. “Respects reduced motion” is easy to assert and easy to skip, so where it is not true here, it says so.
Trust counters
On intersection
Ease-out
Skipped — the final value is written immediately.
Section reveals
On intersection, once
Ease-out
Settled immediately; the observer never binds.
Image parallax
Scroll-linked
Linear to scroll
Never bound — the target list is empty under the preference.
Accordions
Height transition
Ease
Unaffected — disclosure, not decoration.
What it was built on, what is claimed, and what is not.
Everything
One HTML file, one stylesheet, one script
No framework, no build step, no external request. It can be opened from a folder, and it will still open from a folder in five years.
Discovery
JobPosting structured data
A recruitment page's real distribution channel is the job aggregators that read structured data, not the page's own traffic.
Logo
Inlined SVG
The one asset that must never arrive late is the mark at the top of the page.
Claimed — and how to check it
No dependencies and no build step
The repository is an HTML file, a stylesheet, a script and two legal pages.
Counters and reveals both have a no-animation failsafe
The early returns in script.js, and the comment naming the shared pattern.
Parallax is fully disabled under reduced motion
The target list is built empty when the preference is set.
Not claimed
- No application, hire or conversion figure.
- No claim over the copy. It is legally reviewed wording that the design was built around and was not permitted to rewrite.
- No traffic or aggregator-placement figure.
Guards and constants read from the repository's single script file.