CareerConnect: a graduate outcomes platform, designed and built end to end
A marketing and product-demonstration site for a platform that measures graduate outcomes from consented activity instead of end-of-term surveys. Built without a framework, with a scroll-scrubbed cinematic hero and four interactive product views rendered in the DOM.
About the data on these screens. CareerConnect is a Cogwheel concept build, not a client engagement. Every institution, graduate, and employer shown is fictional, and every figure is demonstration data — the product labels it as such on its own screens. What is real is the design and engineering, which is what this page is about.
The brief
Universities are asked to prove where their graduates landed, and the honest answer is usually an estimate built from a survey with a response rate nobody defends. CareerConnect proposes measuring the same thing from activity a graduate has consented to share — an application, an interview, an offer — and resolving those events into a destination that traces back to a record.
That is a difficult thing to sell from a feature list. It needed a site that could carry an argument: show the gap, show the mechanism, and show the governance, without asking the visitor to take any of it on faith.
Walk through it
Eleven views from the live site. Select a thumbnail to change the frame, or open any image full screen.
Scroll-Scrubbed Cinematic Hero
A single high-resolution still that the visitor pushes into as they scroll, resolving onto the product screen on the monitor. No autoplaying video, no layout shift.
Graduate Outcomes Platform
A marketing and product-demonstration site for a platform that measures graduate outcomes from consented activity rather than end-of-term surveys, built as a zero-framework static site
Cinematic Hero
Scroll-scrubbed camera push with a still as the LCP element
Interactive Demos
Four-view console and a four-stage pipeline, built in the DOM
No Framework
One stylesheet, one script, no build step, no runtime dependency
Interaction & Motion
Product Narrative
Engineering Notes
How it is built
The interesting decisions here were about restraint — what to leave out so the things that matter load instantly and hold up under scrutiny.
Scroll-scrubbed cinematic hero
A high-resolution still and a matching end frame drive a camera push tied directly to scroll position, resolving from a wide establishing shot onto the product screen. The still ships as a real image element, so the largest paint is a static asset rather than something the browser has to wait on JavaScript to draw.
Product demos built in the DOM
The dashboards are not screenshots. Counters count up, sparklines draw, radial gauges sweep, and bar rows fill as each panel enters the viewport. Four product views share a single frame and swap on demand, which keeps the page weight flat no matter how many views are added.
No framework, no build step
One stylesheet and one script, hand-written. There is no bundler, no runtime dependency, and nothing to keep patched. For a marketing site whose job is to load instantly and look expensive, the framework was cost without benefit.
Motion that respects the reader
Section reveals are driven by intersection observers rather than scroll handlers, so nothing is recalculating on every frame. Movement is used to direct attention through the argument, not to decorate it.
How the page argues
Structure is the product here. The order of the sections is doing as much work as the visuals.
The problem, before the product
The page opens on a gap rather than a feature list: a graduate nobody has asked about, a career office starting reporting season with a survey, and a provost whose honest answer to the board is an estimate. Only once that lands does the product appear.
Three jobs, one record
The whole platform is compressed into capture, resolve, report. Every screen that follows is an argument that those three things trace back to a single underlying record.
Consent as a selling point
The permission model is not buried in a policy page. Mailbox access is shown as opt-in, read-only, scoped, and revocable in one click, with an explicit statement of what the institution can and cannot see.
Honest about uncertainty
The resolution stage renders resolved, partial, and unresolved as visually distinct states. A match below the confidence threshold queues for a person instead of being guessed at — and the interface says so.
Built with
Why no framework
A marketing site is judged on how fast it paints and how expensive it looks. A framework buys neither of those. It buys component reuse and state management, which a six-page site with no authenticated surface does not need. Leaving it out removed the bundle, the build step, and the upgrade treadmill in one decision.
Want something built to this standard?
This is the level of design and engineering we bring to client work — whether that is a marketing site, a product demo, or the application behind it.