George Clinkscales Jr.Sort-Tek Inspection Systems
A bespoke 6-page marketing website for a Troy, Michigan fastener inspection company — built from scratch in plain HTML, CSS, and JavaScript. 100/100 Lighthouse across all four categories on both mobile and desktop. No framework, no build step, no template.
The Problem
Sort-Tek Inspection Systems is an ISO 9001:2015-certified fastener inspection company in Troy, Michigan that has been operating since 1997 — nearly 30 years in business. The goal wasn't to fix a failing business; it was to give an already-successful one a professional online presence that reflects the quality of the work they've been doing for decades, and to open new channels for growth beyond their existing network.
When we connected, their existing site was a placeholder — an "under construction" page with a phone number and nothing else. No content, no SEO footprint, nothing for potential customers to find when searching for fastener inspection or containment services. The client provided a PDF deck and some internal documents. Everything else had to be built from scratch. The project came through a referral — my first solo freelance web build.
Mobile Experience
sort-tek.com
Scroll inside the phone to explore. Open in a new tab ↗ for the full experience.
The Approach
Plain HTML, CSS, and JavaScript — no framework, no build step, no CMS. The client has no developer on staff and the content doesn't change frequently, so a static site is the fastest, most maintainable fit. The design system, animations, and SEO were all built from scratch to meet 99–100/100 Lighthouse scores across the board.
Technical Implementation
Design System
The palette is defined as CSS custom properties — Sort-Tek Red, Ink, Steel, Silver, and Paper. All three fonts (Oswald for headlines, Inter for body, IBM Plex Mono for data readouts) load non-blocking via the rel="preload" pattern so they never hold up the first paint.
Hero Animation
The signature element is the homepage hero: a camera-reticle viewport with red corner brackets, a scanline that sweeps once on load, and a status readout that flips from SCANNING to PASS. The animation runs on the GPU compositor using transform: translateY() — not top — to avoid forced layout recalculation on every frame. The client requested the green PASS state specifically to mirror their real-world process of scanning parts and clearing them as defect-free.
Performance
All images are served as WebP with PNG fallbacks via <picture> elements. Every <img> has explicit width and height attributes so the browser reserves the correct aspect ratio before the image loads, eliminating layout shift. The facility drone poster image is resized to the exact display width to avoid sending oversized pixels over the wire. Result: 0ms Total Blocking Time, 0.03 Cumulative Layout Shift.
SEO & Contact Form
Unique meta descriptions on all six pages, Open Graph and Twitter Card tags, a LocalBusiness Schema.org JSON-LD block, canonical URLs, a sitemap.xml, and robots.txt. The contact form submits via Formspree AJAX with a success state swap and an inline error fallback — no page reload, no third-party redirect.
Custom Design & Animation
Hero animation — camera reticle, scanline sweep, and PASS readout
Laser inspection page — the client requested a green PASS readout after the scan completes, directly mirroring Sort-Tek's real work of scanning parts and clearing them as defect-free
Inside the Facility
Drone footage of the Troy, MI facility floor — used as a full-bleed background video on the site
The Outcome
The site launched with perfect scores: 100/100 across all four Lighthouse categories — Performance, Accessibility, Best Practices, and SEO — on both mobile and desktop. The mobile critical path latency dropped from 588ms (pre-optimization) to 223ms after font loading and image delivery fixes. The site also scores 2/2 on AI search readiness, meaning it surfaces correctly in AI-powered search tools like Google's AI Overview.
Beyond the site itself: Google Analytics was integrated with a custom quote_request conversion event on the contact form, Google Search Console was verified and the sitemap submitted, and a privacy policy page was added to cover data collection. A sticky click-to-call button was added for mobile users.
Built and delivered in under one week for a real client paying for a real business deliverable.
Week 1 Live — Real Data
One week after launch (July 24–30, 2026), the site was already performing well above typical benchmarks for a brand-new domain:
- 17 active users, 22 sessions — real visitors, not bots
- 77% engagement rate with a 4.5 minute average session — visitors are reading, not bouncing
- 50% of traffic from organic search (Google and Bing) in the first week of existence
- 2 phone call clicks and 1 quote request tracked via custom GA4 events
Post-launch work extended beyond the codebase:
- NAP audit found address inconsistencies across LinkedIn, MapQuest, and other directories
- Unclaimed Google Business Profile discovered and flagged for the client to claim
- Old WordPress cached result with an outdated phone number submitted for Google removal
- Inner page titles updated with targeted search keywords
- Sitemap submitted to Search Console — all 6 pages confirmed crawled within 48 hours
sort-tek.com
Client Feedback
"We needed a clean, professional web presence for Sort-Tek and George delivered exactly that. He was easy to work with, communicated well throughout the project, and the final result speaks for itself. Highly recommend."
Need a website for your business? I take on select freelance web projects.
Let's talk →