Without a Spot! Commercial Cleaning
Owner-operated post-construction cleaning, built to win larger commercial contracts.
View Case StudyPortfolio
Real Builds, in the Wild.
Very different businesses, one standard of build: custom-coded, mobile-first, accessible, and fast. Open any case study for the full-page tour, the challenge, and how it was solved.
Without a Spot! Commercial Cleaning
Commercial Cleaning · Owner-Operated · Bid Pipeline
The Inspiration
Post-construction cleaning is a specialized, technical trade — the rough clean while trades finish, the final clean before inspection, the touch-up before keys change hands — but the websites in the space read like generic maid services. The challenge was translating that specialized closeout work into a site credible enough to win larger commercial contracts, with real names and real phone numbers behind the brand instead of a call center.
The Approach
I led with the founders — faces, names, and values — then organized the full scope of work into a clear service ledger, added an interactive before/after slider from a real completed job, and wired a bid-request pipeline built for fast, honest follow-up. Even the pricing page explains how bids are actually built instead of inventing tiers a walkthrough-based service can't commit to.
Standout Features
- A real bid-request pipeline — Live validation, AJAX submission with an in-page confirmation, and mail routed through the business's own domain for proper sender alignment — behind honeypot, timing, CSRF, and rate-limit protection.
- A signature chamfered-corner motif — Carried across buttons, cards, photo frames, and badges — a distinct identity instead of the generic rounded-rectangle template look.
- An automatic photo-treatment system — A consistent navy tint and saturation trim on every photo, so real phone-camera job-site shots added mid-project read as one cohesive family with no per-image editing.
- A before/after slider from a real job — An interactive drag comparison pulled from an actual completed closeout, not a stock demo.
Lee-James Audio
Audio Engineer · One-Page Portfolio · Broadcast-Console Aesthetic
The Inspiration
A working audio engineer splits time between podcast post, live events, and mixing — and needs one link that carries a real professional identity, not a résumé PDF or a generic one-page template with someone else's fingerprints on it. The idea was a single page that sounds as sharp as the work: something you could hand a prospective client that feels unmistakably like the person who made it.
The Approach
I built the whole thing to speak the language of the work — a broadcast-console aesthetic in amber and cyan against near-black, with channel-strip layouts, a scrolling ticker, and animated frequency and VU meters. It ships as a single self-contained HTML file with no framework and no build step, and every claim on it is grounded in the engineer's actual résumé.
Standout Features
- A broadcast-console visual system — A ticker-tape header, channel-strip service rows, a patch-bay contact card, and a footer VU meter, tied together by a custom-drawn inline SVG favicon.
- Five distinct sections, one page — Hero, Services, Work, About, and Contact each carry their own layout logic rather than repeating one block.
- A pivot from form to contact card — When mailbox constraints made a backend impractical mid-build, the contact section pivoted to a direct-contact card without disturbing the surrounding design.
- Résumé-accurate content — Every credential, certification, and role is verifiable — inflated placeholder claims were removed in favor of facts.
City of Rocky Top
Municipal Redesign · WordPress → Custom PHP · Civic Identity
The Inspiration
My own town's website was a dated WordPress and Elementor build — slow, template-dependent, hard to maintain, and not really responsive across the devices residents actually use. A city site is the front door to its whole community, and Rocky Top's deserved to match the place: the coal-country history, the trails, the genuine downtown revival. I wanted to show what a civic site could be when it's built from the ground up instead of assembled from a theme.
The Approach
I rebuilt it from zero as a custom PHP platform designed around the community's identity — and, critically, built to be maintained and extended by the city for years. Everything runs from one config file and one tokenized stylesheet, so a phone number or a color scheme changes in a single place and updates everywhere.
Standout Features
- A genuinely used seventh breakpoint — The old build gave tablet users a phone layout in a bigger box; the redesign gives 768px real work — three-column timelines, four-across quick-links, an about sidebar, and a contact split.
- An icon-system fix — Consolidating to one icon library uncovered a cascade-layer bug silently forcing every component icon back to default size across the adventure section, park cards, and header — traced and fixed.
- An asymmetric, modern hero — A left-aligned composition with a capped-width tagline and a flat hairline stat strip, replacing a dated centered layout that pushed content below the fold on phones.
- A config-driven architecture — Navigation, constants, and social links in one file; change a phone number once and the header, mobile menu, contact page, and footer all update together.
Sweet Wheels
Dessert Truck · Playful Brand · Interactive Build
The Inspiration
Food trucks live and die by where they are and when — but most of their web presence is a single Instagram bio link and a phone number. I wanted to build the opposite: a dessert truck site so bright and playful it feels like the treat itself, with the location and menu front-and-center, and a little bit of fun baked in to make people actually want to hang around.
The Approach
The build started as four competing static mockups. I took the strongest direction and ported its exact visual language into a real multi-page PHP site — shared includes, one full design-token system, and interaction quality tuned to portfolio standard. The goal was to prove a playful brand can still be built with serious engineering underneath.
Standout Features
- A canvas-drawn prize wheel — Every element derives from one shared radius, so it stays perfectly concentric at any size — confirmed a 0.00px seam from 240 to 340px — with a confetti win-moment.
- An infinite testimonial carousel — Autoplay, swipe, keyboard nav, and round progress dots, with no dead-end at the last slide.
- A candy-gradient mobile drawer — A branded off-canvas panel with icon-badge nav cards, a "Find the Truck" CTA, and a staggered entrance.
- A one-token reskin — ~150 raw color literals replaced with custom properties, value-for-value, so the whole site can be recolored in a couple of edits.
Smokey's Burgers
Restaurant · Scratch Kitchen · Cart-to-Checkout Flow
The Inspiration
A great local burger joint usually has a devoted following and no way to show a new customer the menu before they drive out — just a Facebook page and maybe a photo of a chalkboard. Most small-restaurant sites solve this by leaning on a page builder or bolting on a third-party ordering widget. I wanted to prove a from-scratch build could deliver e-commerce-grade ordering without either crutch.
The Approach
I built the whole presence — homepage, a menu with a live item customizer, about, contact, and a complete cart-to-checkout flow — in PHP with Vue 3 for reactivity and nothing else. One shared Vue app defines nav, cart, and scroll-lock once; the customizer and checkout extend it, so there's no duplicated state across pages.
Standout Features
- A live item customizer — A config-driven modal for every menu item — toppings, sauces, patty count, bun choice — all pricing out live.
- A persistent cart — localStorage-backed state that survives reloads and navigation, with quantity controls and a live running total in a slide-out drawer.
- A simulated checkout that behaves real — Real-time validation and phone auto-formatting, generating an order number and pickup-time confirmation with no backend.
- A self-auditing build — Automated brace-balance, orphaned-selector, and unused-image sweeps caught six dead CSS rules and two orphaned images before launch.
Ultra Precision Machining
Precision Manufacturing · B2B · RFQ Pipeline
The Inspiration
Precision machine shops do some of the most exacting work there is, and then represent it with a website that looks like it was last touched in 2009. I wanted to build a B2B industrial site credible enough that an engineering buyer, a procurement manager, or an R&D team would take it seriously as a supplier — one that communicates accuracy and confidence the way the shop floor does.
The Approach
The design direction is clean and technical: dark-on-light anchored by a strong red accent, tight uppercase typography, and a component library that feels precise without feeling sterile. The centerpiece is a full RFQ pipeline — the actual thing a machine shop needs from a website — treated as seriously as the shop treats a tolerance.
Standout Features
- A 600-line RFQ contact page — A two-panel layout with a drag-and-drop file upload, a sticky contact sidebar, and a semantic FAQ — CSRF-protected with an animated, no-reload success state.
- A detailed Wire EDM service page — The most technical page in the build: process steps, material specs, an application grid, a comparison table against conventional machining, and a parts gallery, all without crowding.
- A custom lightbox gallery — A keyboard-navigable image grid with caption and counter, scroll-lock, and proper focus-trap management.
- Portable folder architecture — SITE_URL auto-detection strips the subfolder from the script path, so the site runs identically from a root or a subdirectory with zero config changes.
Mastercraft Construction
General Contractor · Trade Industry · Estimate Intake
The Inspiration
Construction companies build things to last and then market themselves with a template that looks like everyone else's in the trade. In a competitive local field, a general contractor's site has to command credibility instantly — look serious, load fast, and make requesting an estimate effortless. I wanted to build one that felt as solid and dependable as the work it represents.
The Approach
This one began as a ground-up rebrand of an existing demo into a construction company, and turned into a full production build — every layer of the codebase audited, refactored, and brought to current standards before a line of new content was written. The result carries an industrial-citrus identity: a near-black void with lime-to-orange accents and a fully tokenized system with no magic numbers.
Standout Features
- A full AJAX estimate form — Client and server validation, honeypot protection, double-submit prevention, and live aria-invalid feedback, with a demo-mode flag so the full flow works without a mail server.
- A three-zone mobile nav panel — A glassmorphism bar with a slide-in panel — fixed header, scrollable links, fixed contact footer — that traps focus and closes on resize.
- A systematic dark-on-dark bug fix — A cascade audit caught a token resolving to its light-mode value inside dark sections, causing dark-on-dark text throughout — corrected everywhere it appeared.
- A trade-appropriate rebrand — Services reconceived from cleaning phases to construction trades, with all copy rewritten to a craftsman-heritage contractor's voice, down to the confirmation email.
Belle & Blossom Boutique
E-commerce Storefront · Southern Boutique · Full Checkout Flow
The Inspiration
Southern boutiques are everywhere in East Tennessee, and their websites almost never do them justice — a Facebook page, a Linktree, maybe a stiff template with a checkout that fights the customer. Belle & Blossom started from that gap: what would it look like if a small local boutique had a storefront as considered as its clothes? The answer had to feel like the brand — warm, feminine, a little editorial — while doing the hard commerce work a boutique actually needs.
The Approach
I built the entire shopping experience from scratch rather than leaning on a store platform, so every interaction could be tuned to the brand instead of the other way around. A single PHP product catalogue drives the whole site; the storefront, search, product pages, cart, and a three-step checkout were all composed from scratch around it, so the boutique owner changes a product once and it updates everywhere.
Standout Features
- Weighted live search — Word-boundary scoring across name, category, tags, and collection — it returns genuinely relevant results, not just string matches, and ranks the closest ones first.
- A 3D card carousel — Auto-advancing, hover-to-pause on desktop, touch-swipe on mobile — custom-written, no carousel library.
- Quick-view product modals — Shop the grid without losing your place — colour and size selection, gallery, and add-to-cart in an overlay.
- Persistent cart & wishlist — Browser-persisted with live badge counts and an account dashboard with deep-linkable tabs.
- A single-source catalogue — 26 products across 5 categories and 3 curated collections, all managed from one PHP data file.
Ron's Lawns & Landscaping
Commercial Landscaping · Owner-Operated Brand · Quote Pipeline
The Inspiration
Local landscaping companies do beautiful work and then hide it behind a website that looks like a phone book listing — no crew, no personality, no reason to trust them over the next guy. Ron's Lawns started from the idea that an owner-operated crew's biggest advantage is that they're not a faceless franchise, so the site should sell exactly that: the owner, the name, the handshake you can count on.
The Approach
I built the brand voice into the code itself — Ron, a crew that earned their spots, commercial-only work, no subcontracting — with named constants keeping that story consistent across every page from one source file. The whole site was then tested programmatically at every breakpoint rather than eyeballed on three.
Standout Features
- A working demo contact pipeline — Full client and server validation, phone auto-formatting, a character counter, and an inline success card — with CSRF, honeypot, and rate limiting all running; one line flips mail delivery live.
- Tested at every breakpoint, not three — 4 pages verified programmatically across 9 viewport widths — 36 combinations, zero horizontal overflow, with two real overflow bugs caught by an automated scan.
- A right-side flyout mobile menu — A native dialog off-canvas panel with a branded header, active-page indicator, and tap-to-call footer — real focus containment, not a manually-built loop.
- A brand baked into the architecture — A full rebrand pass eliminated every trace of the placeholder identity: 30+ brand-string replacements, every inline style de-inlined and tokenized.
Dreamscape Vacations
Travel Agency · Fantasy Concept · Multi-Page Build
The Inspiration
Travel-agency sites tend to look like spreadsheets of destinations — grids of stock photos and price tags, none of the wonder that makes someone actually want to book a trip. Dreamscape asked the opposite question: what if the site felt like the vacation it was selling? So the whole thing leans into a saturated, dreamlike world — underwater resorts, cloud-kingdom cruises, canopy kingdoms — while staying fast and effortless underneath.
The Approach
I built a signature motif — a luggage-tag destination wall — and let the rest of the site orbit it, using wave-seam dividers so the page reads as one continuous world rather than stacked blocks. Every playful flourish is engineered to stay out of the way of speed and accessibility.
Standout Features
- A luggage-tag destination wall — Twelve fantasy destinations as punched-hole travel tags in seven palette colors, scattered at jaunty angles, lifting and turning on hover.
- A Ken Burns hero carousel — Full-screen slideshow with slow pan-and-zoom, a frosted-glass headline panel, and a staggered entrance.
- Wave seam dividers — SVG curves that melt one section into the next for a single continuous world.
- Expandable team cards — SVG-framed agent portraits that open to reveal specialties and a booking prompt, keyboard-operable and closing on Escape.
- Cinematic video bands — Muted looping background video in the hero and footer, each auto-pausing when scrolled offscreen.
Ironwood Brewing Co + Kitchen
Craft Brewery · Taproom & Events · Copper-and-Barrel Aesthetic
The Inspiration
A neighborhood brewery does not live or die on online food orders — it lives on who shows up on a Friday night. But a lot of brewery sites bury the events and the taproom under a menu and an order button, chasing e-commerce that a taproom doesn't really need. Ironwood started as that same e-commerce assumption, then pivoted mid-build to what actually fills a taproom: live events, the beer lineup, the kitchen, and getting people through the door.
The Approach
That pivot became the defining engineering moment of the build. An entire ordering system — cart, checkout, confirmation, API endpoints — was surgically removed from a live codebase while navigation, copy, and layout stayed completely coherent, then re-pointed toward events and the taproom, all wrapped in an industrial copper-and-barrel aesthetic.
Standout Features
- A clean mid-build pivot — Thirteen files — order, checkout, confirmation, cart drawer, API endpoints, stylesheets — removed without a single orphaned reference, with Merch and Gift Cards kept as informational, cart-free pages.
- The barrel reserve feature — A cinematic, layered dark section pairing two barrel photographs into an editorial spread that anchors the beers page.
- A unified card & grid system — Ten card families across the site drawing from one shared component vocabulary — the moment it went from "a set of pages" to "a product."
- Subject-matched photography — 26 optimized WebP images wired precisely to content — each beer to its style, each dish to its plate.
Pink Steel
Boutique Fitness Studio · Vertical Rail Nav · Portfolio Demo
The Inspiration
Fitness studio websites follow the same formula: horizontal navbar, hero video, three service cards, a CTA. Pink Steel started from a different structural question — what if the nav lived on the side instead of the top, giving every hero section a true full-viewport canvas with no bar eating the upper edge? Replacing the nav also removed all of its JavaScript: the toggle handler, focus trap, overlay, and escape-key listener don't exist when the nav never closes.
The Approach
A single <nav> element in one shared PHP include serves three completely different layouts — a bottom tab bar on mobile, a 72px icon rail mid-range, and a full 248px labeled rail with a persistent CTA on wide screens — all restyled through the CSS @layer cascade with zero JavaScript toggling and zero duplicate markup. The fictional brand has an internal logic that holds across all five pages: Dana Whitlock's six-woman cap started because that's all her garage held, and stayed because it turned out to be the whole secret.
Standout Features
- Vertical rail nav — three lives, one element — One <nav> source restyled through @layer: bottom tab bar at 320-639px, 72px icon rail at 640-1279px, full 248px labeled rail with persistent CTA at 1280px+. No JS toggle, no display:none swaps, no duplicate markup.
- A disk-guard video system — A VIDEO_SOURCES constant registers every video slot. Three helper functions use is_file() before emitting a <video> — if the file is missing, the poster image serves with zero failed requests. Swapping a placeholder for a real clip is a file drop, no code change.
- One brand file, zero find-and-replace — Business name, nav, footer, meta, hero, and section headings all render from a single config constant. The fictional rebrand through three name iterations was completed with one edit each time.
- Native-details FAQ accordion — <details>/<summary> with the name="faq" attribute for exclusive-open accordion behavior — browser-native since 2024. Zero JavaScript, full keyboard nav, semantic state, rotating chevron via [open] CSS.
- A footer seam fix worth noting — The footer border-top was drawing behind the fixed rail. Fixed by replacing the border property with an absolutely positioned ::before element whose left value matches the rail width at each breakpoint — the hairline begins exactly where the footer content begins.
Big Reels Fishing Charters
Concept Redesign · Lake Fishing Charter · Cinematic Build
The Inspiration
The original site — a template build — used a single flat teal for the header, every spacer between sections, and the footer, flattening the whole page into one undifferentiated block. Panoramic lake photos were letterboxed and awkwardly cropped; a cart icon implied an e-commerce path the business never ran. The charter's real strength — foggy sunrise water, big striper catches, a lifetime of local knowledge on Norris Lake — never made it to the surface. The redesign started with one question: what if the site felt like a short documentary about a morning on the water?
The Approach
I rebuilt the site around the charter's actual story: one trip per day, priced by party size, 6AM departure, a USCG-licensed captain, everything provided. A single recurring device — a monospace expedition log motif (LOG 01, LOG 02) — ties every section into a running field journal. The invented e-commerce cart came out; booking became the only conversion path, presented as a clean rate menu with dotted leaders and a marked slot for the live scheduler embed.
Standout Features
- A cinematic film-title hero — The homepage opens like a title card: letterbox bars, GPS coordinates in monospace, a towering condensed headline, and a looping water video behind a graded scrim — backed by an animated CSS water gradient for slow loads and reduced-motion users.
- The expedition log motif — A single device — LOG 01, LOG 02, a gold hairline — turns standard marketing sections into a running expedition journal and gives the whole site one consistent voice from hero to footer.
- A drift-and-pause photo marquee — The catch gallery runs as a slow seamless film-strip drift that pauses on hover, keyboard focus, and tap — and degrades to a manually swipeable strip under reduced-motion, satisfying the pause-control requirement for auto-moving content.
- A true mosaic photo gallery — On the Photos page, featured frames span 2x2, accent frames run tall, and every gap is backfilled — frames genuinely interlock at two, three, and four columns, driven by grid geometry rather than fixed aspect ratios.
- A custom gold fishhook favicon — Designed from scratch and shipped as a full set: scalable SVG, multi-resolution ICO, Apple touch icon, PWA icons, and a 1200x630 social share image built from the fog-ridge photo with the branded title-card treatment.
Gameday Ledger
Live Fan Dashboard · College Football · API + Cron Architecture
The Inspiration
Tennessee Vols fans in Rocky Top deserve better than a national sports site that buries their team under thirty other programs and serves everything with ads. Gameday Ledger started from a simple idea: one page, one team, everything a fan needs on gameday — scores, schedule, weather at the venue, rankings, win probability, series history against this week's opponent — all refreshing automatically without anyone touching the code.
The Approach
The whole thing runs on a PHP cron job that hits 13 College Football Data API endpoints on a schedule — daily for slow-changing feeds, every 15 minutes on gameday Saturdays — and writes the results to local JSON files. The browser fetches those files on load, so the page is fast even on slow connections, and if the API goes down mid-game, the last successful pull keeps everything running. No CMS, no framework, no manual content updates at any point in the season.
Standout Features
- A 20-card bento grid — A 12-column, 9-row CSS Grid with twenty explicitly-placed information cards — scores, schedule, weather, rankings, win probability, series history, stat leaders, and more. Zero holes and zero overlaps verified programmatically every build.
- A four-state vibe engine — A lightweight state machine reads the game calendar on load and sets a data-vibe attribute on the body. Four states — offseason, midweek, gameday eve, and live — drive the page's color accents, animation speeds, ticker velocity, and status beacon behavior. No manual configuration, all season.
- Away-game awareness — A focusVenue() helper checks whether the next game is home or away, looks up the away stadium's coordinates in the venues feed, and automatically updates the weather card and map. Home: Neyland Stadium, Knoxville. Away at Arkansas: Razorback Stadium, Fayetteville. Fully automatic.
- Live win probability — Shows a pregame estimate from the model endpoint before kickoff, then switches to a live play-by-play feed once the game starts — same card, different data source, no manual intervention.
- ICS calendar export — The cron generates a full-season .ics file and individual game files. One tap adds the entire Vols schedule to any calendar app.
Redesigns & Rescues
Not Just Built — Rebuilt.
Some of the best work here starts with a site that already exists. Drag the divider and see the difference for yourself.
City of Rocky Top — Municipal Redesign
Redesign · Live Municipal Site · Before / After
The Starting Point. The existing site was a dated WordPress-and-Elementor build — slow to load, dependent on a page-builder theme, and never truly mobile-first, so residents pulling it up on a phone got a cramped desktop layout shrunk down. The content was all there, but the front door to the whole community didn't reflect the place: the coal-country history, the trails, the real downtown revival happening in Rocky Top.
The Rework. I rebuilt it from the ground up as a custom platform designed around the community's own identity — mobile-first from the first line, with a modern tokenized design system, genuine tablet and desktop layouts at every breakpoint, and a config-driven structure the city can actually maintain. Every color, icon, and section was chosen to feel like Rocky Top rather than a stock municipal template.
The Difference. The redesign loads faster, works properly on the phones residents actually use, and gives the town a civic presence that matches its character instead of fighting it. Just as important, it's built to be extended and maintained for years — a real platform, not a theme that ages out the next time the builder updates.
See the old site (archived copy, opens in a new tab) See the redesigned site (opens in a new tab)
Without A Spot — Site Redesign
Redesign · Existing Environment · Demo Entry
Component demonstration — placeholder imagery until a real before/after ships
The Starting Point. DEMO COPY — describe what the site looked like on arrival: dated visuals, weak mobile behavior, buried contact paths, slow loads.
The Rework. DEMO COPY — describe what changed and why: rebuilt layout, modern responsive CSS, accessibility fixes, tuned performance, clarified calls to action.
The Difference. DEMO COPY — the measurable or visible outcome: faster loads, working phones, inquiries that actually arrive.
Rocky Top, Tennessee — Civic Refresh
Redesign · Community Site · Demo Entry
Component demonstration — placeholder imagery until a real before/after ships
The Starting Point. DEMO COPY — the site as it stood: hard to read on phones, buried history, no clear paths to local resources.
The Rework. DEMO COPY — the changes: warm visual identity, mobile-first rebuild, clear wayfinding to City Hall, the Chamber, and the museum.
The Difference. DEMO COPY — the outcome: a civic front door people actually share.
The Burger Shack — Menu-First Rework
Redesign · Restaurant · Demo Entry
Component demonstration — placeholder imagery until a real before/after ships
The Starting Point. DEMO COPY — the site as found: a menu PDF nobody could read on a phone, hours in three conflicting places.
The Rework. DEMO COPY — appetite-first design, real HTML menu, hours and directions impossible to miss.
The Difference. DEMO COPY — customers arrive already decided; the phone rings for orders, not questions.