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.
Scan or click to visit the live client site
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
Post-Launch Refinements
After going live and reviewing the site with the client, a second round of targeted changes was made to sharpen the design and tighten the copy based on their direct feedback:
- Hero readout visibility - the PASS readout in the scan animation was made larger and more prominent; the green cleared state is now the most readable element on the first screen.
- Background contrast - the homepage background was darkened; the original off-white read as too bright and reduced text contrast on certain displays.
- Global reach, not statewide - copy updated throughout to reflect that Sort-Tek serves OEM customers nationally and internationally, not just Michigan.
Month 1 — Search Performance
Five weeks after launch, the site has built a measurable search footprint. A second round of technical SEO work was done in August 2026 to accelerate indexing:
- Fixed 3 redirect errors Google flagged in Search Console (about, capabilities, and privacy pages)
- Added breadcrumb navigation to all inner pages — eligible for Google rich result display in SERPs. All 5 pages now show as valid in GSC.
- Created and submitted a video sitemap — Google discovered 2 facility videos within 24 hours
- Enhanced Service schema to list all 10 individual services by name, enabling specific service-query matching
- Updated page titles across all pages to lead with "automotive sorting" — the keyword prospects actually search
- Deployed Dealfront B2B visitor identification on all 7 pages
Current metrics as of August 30, 2026 — 5 weeks live:
- 6/6 pages indexed — every sitemap page confirmed in Google's index
- 280 search impressions — doubled from 140 in the prior period as Google expands the site's query coverage
- 5.47% homepage CTR — industry average for B2B is 2–3%. When the homepage appears, people click it.
- Homepage at position 10.78 — approaching page 1, up from position 15 at launch
- Capabilities page at position 7.84 — already on the edge of page 1 for inspection capability queries
- 1m 42s average engagement time — visitors are reading the content, not bouncing
- Organic traffic arriving from Google, Bing, DuckDuckGo, and ChatGPT
- Referral traffic from ThomasNet — the primary B2B industrial supplier directory, where Sort-Tek is now discoverable alongside national competitors
The site is indexed, approaching page 1 on multiple pages, and picking up organic traffic from multiple search engines — all on a domain that didn't exist 5 weeks ago.
"Got my first lead from the website today and it's a good one. Meeting with them tomorrow to review the opportunity."
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 →What Came Next
The website was the start of the relationship. Sort-Tek later visited the MSU Apple Developer Academy, where they connected with a colleague of mine about a new project. When that colleague landed another opportunity and couldn't commit full time, he recommended me — which meant a lot. I joined Sort-Tek as an intern to work on a confidential project, stepping into a role built on the trust the website had already established.