NEXCORE Industry — a B2B corporate site for an EV parts manufacturer

A corporate site for a tier-1 supplier machining precision parts for EV drivetrains. Nobody visits a manufacturing site for brand mood. They come to check how tight the tolerances are, how the defect rate moved, and which certifications exist. So the protagonists here are numbers and drawings, not photography.

The problem

Most Korean parts-manufacturer sites are a company-brochure PDF transplanted onto the web. The information a buyer or engineer actually needs — process capability, metrology equipment, on-time delivery, certifications — is buried inside that PDF, so verification never finishes before the inquiry.

Design approach

Steel black and industrial blue with monospace numeric labels build the grammar of a screen you read like a drawing. The 1px grid, drafting-style corner markers and dimension lines are all hand-authored SVG, which keeps photographic dependency low. The few photos used are tight shots of machining, overlaid with dimension callouts so they read as technical documentation.

Signature interactions

• Data visualisation without a chart library — the defect-rate line chart, the Cpk capability bars and the on-time-delivery gauge are hand-written inline SVG that draw themselves via stroke-dashoffset on scroll. Each chart ships a "view data table" disclosure, serving both screen readers and anyone who wants to check the figures.
• Global footprint SVG map — no maps API; the paths are authored directly, and each site node opens its tooltip on hover and on keyboard focus.
• Five-stage process walkthrough — equipment, tolerance and inspection items for every stage from incoming material to assembly, followed by scrolling.
• Canvas hero — a faint circuit/gear line field drawn with requestAnimationFrame, replaced by a still frame under reduced motion.

Designing for trust

Certification badges are typeset as text rather than borrowed logo images. Every figure carries a "demo data" caption so a portfolio piece can never be mistaken for real performance. The inquiry form follows a genuine RFQ flow — company, inquiry type, drawing-attachment guidance — without sending anything.

Engineering, performance, accessibility

• Build-free static site — plain HTML, CSS and vanilla JS. With no framework or bundler, the deployed output is the source, so nothing can rot at maintenance time.
• Deployed on Cloudflare Pages — served from the edge, with a _headers file applying security headers (X-Content-Type-Options, Referrer-Policy, X-Frame-Options, Permissions-Policy) and a one-year immutable cache for static assets. Unknown paths return a branded 404 page with a real 404 status.
• Images — everything converted to WebP, every img carrying explicit width/height so there is no layout shift. The hero loads eagerly, everything else lazily.
• Motion — animations touch only transform and opacity so they stay on the compositor, and every auto-playing motion stops under prefers-reduced-motion.
• Accessibility — skip link, semantic landmarks, keyboard-operable tabs, lightbox and mobile navigation, visible focus rings, live regions for form status, and WCAG AA contrast.
• SEO — title, description, canonical, Open Graph, Twitter card and vertical-appropriate JSON-LD structured data.

Result

Live demo: ononc-nexcore-industry.pages.dev

This is a fictional-brand demo built by ononc to show production quality. It is not a real business, and the inquiry forms do not send anything. Photography comes from freely licensed Wikimedia Commons images, credited in the site footer.