IronShield Roofing
Storm-damage lead generation page. Trust-first layout, call-driven structure, and a focused quote request flow built for a local roofing contractor.
View Demo →WebOps Studio · Selected Work
Built From Scratch.
Built to Perform.
No templates. No page builders. Every project is hand-coded HTML, CSS, and JavaScript. Structured for speed, clarity, and conversion.
100%Hand-Coded
0Templates Used
LiveReal Deployments
Live Sites
Production · Live
Featured Project
Guardian 4 Heroes
This one means a lot to me personally. Guardian 4 Heroes is an equine therapy nonprofit serving veterans and first responders, people I have a deep connection with as a veteran myself. They needed a site that felt emotionally grounded, mission-driven, and easy to navigate, so I built everything from scratch in HTML, CSS, and vanilla JavaScript, keeping it lightweight, accessible, and conversion-focused throughout.
01 · Hero
Design Breakdown · 01
Hero & Navigation Structure
The nav sits transparent over a full-viewport barn interior photograph, creating immediate emotional context. The Donate button is front and center, not buried, because for a nonprofit, that is the primary conversion action and it needs to be visible at all times.
Design
Playfair Display was chosen for the title to bring warmth and authority. It reads as trustworthy, not corporate.
Design
The gold accent on the "4" and the gold rule separator create a visual anchor that carries through the entire site identity.
Tech
Transparent nav is positioned absolute over the hero so the image bleeds full-height. On scroll, the header gains a dark background via a JavaScript scroll class.
02 · Mission
Design Breakdown · 02
Mission & Content Hierarchy
The left border accent on headings is a deliberate structural choice. It creates visual rhythm without adding visual weight. The horse silhouette bleeds into the background behind the content, adding emotional resonance without pulling focus away from the text.
Design
The warm golden background image reinforces the mission theme: connection, earth, nature. It stays readable at all contrast levels.
Design
Strong typographic contrast between the bold uppercase heading and body copy creates clear hierarchy without needing extra UI elements.
Tech
Background image is set in CSS with a semi-transparent overlay layer so text remains WCAG-compliant at all screen sizes.
03 · Shop
Design Breakdown · 03
Product Card Layout
The shop section needed to feel warm and handmade, because it is. The card uses a light background against the golden gradient to pull the eye and separate the product from the page. Personality-driven copy alongside the price makes it feel human, not like a checkout form.
Design
The rounded card with a light background creates contrast against the warm site palette. Intentional separation that signals "this is an action item."
Design
Product copy with personality drives emotional connection before the purchase, which fits the nonprofit tone.
Tech
Card layout is pure CSS Flexbox. No JavaScript, no library. Scales cleanly from mobile to desktop without a single breakpoint override.
04 · Donation
Design Breakdown · 04
Donation UX & Conversion Flow
The tiered button layout is a UX decision, not just a style choice. Giving people pre-set amounts reduces friction and increases conversion. They do not have to think, they just pick. The cowboy-and-horse silhouette behind the buttons is emotionally loaded without being distracting.
Design
Pre-set donation amounts follow nonprofit best-practice UX. Anchored tiers drive average donation value up by removing the blank-field anxiety of custom input.
Design
The silhouette communicates the mission in a single image. No words required. Emotion before action.
Tech
Buttons are laid out in CSS Grid. They reflow from a 2-column layout on desktop to a single column on mobile automatically, no JS needed.
05 · Code
Code Breakdown · 05
styles.css: Under the Hood
This is what the code actually looks like. Organized sections, a CSS custom property token system at the top, and clear comment headers throughout. Not just a working stylesheet, but a maintainable one.
L4-18
:root token system: all colors, spacing, and shadows defined as custom properties. Change one value, update the entire site.
L20-22
Section comment headers: every section is labeled and separated. Any developer can pick this up and know exactly where everything lives.
L49-56
body::before pseudo-element: the site-wide overlay effect handled in pure CSS. Zero JavaScript required.
L38-42
background-attachment: fixed: the parallax scroll effect is a single CSS property. No libraries, no JavaScript.
Demo Sites & Landing Pages
Demo · Live
Landing Pages & Demos
Industry Demo Builds
These are purpose-built landing pages designed to show what a conversion-focused build looks like across different industries. Each one is hand-coded, deployed live, and built to demonstrate a real use case. Not just a pretty layout.
Fitness Coach FunnelUpload: fitness-coach-preview.jpg
Fitness Coach Funnel
Application-style landing page for a high-ticket coaching offer. Built to qualify leads and drive form submissions, not just traffic.
Request This Build →
SaaS Beta WaitlistUpload: saas-waitlist-preview.jpg
SaaS Beta Waitlist
Clean waitlist page for a product launch. Focused layout, fast load, and a clear value stack built to convert visitors into signups.
Request This Build →
Concept Builds
UI · Concept
Concept Builds
UI & Range Demos
These concept builds exist to show range. Different industries, different tones, different layout challenges, all hand-coded from scratch to demonstrate that the skill set goes well beyond any single niche.
Construction Co.Upload: construction-preview.jpg
Local Construction Business
Full business site with service pages, project gallery, and contact flow. Built to rank locally and convert traffic into phone calls.
Start Something Similar →
Local CafeUpload: cafe-preview.jpg
Local Cafe Demo Site
Concept build showing menu layout, event listings, and a reservation mockup. Built to demonstrate range beyond nonprofit and contractor work.
Start Something Similar →
Your Project
Want a Build Like This?
Tell me what you need and I will map out the build and the best path to ship it clean.