FixFusion

Premium Construction & Renovation — Indiana

---

Overview

FixFusion is a high-performance, mobile-first landing page for a premium construction company based in Indiana. Built with zero frameworks — just clean, hand-crafted HTML, CSS, and JavaScript.

Key Features

Feature	Details
Mobile-first responsive	Pixel-perfect on every screen from 320px to 4K. 44px touch targets, iOS zoom prevention, landscape support
Multi-step quote form	3-step wizard with real-time validation & email delivery via Web3Forms
Scroll animations	IntersectionObserver-powered reveal, counters, parallax
Accessibility	ARIA landmarks, skip-link, focus-visible, prefers-reduced-motion, keyboard nav, forced-colors
Security	CSP meta header, input sanitization, honeypot spam protection, rate-limiting
SEO	Local SEO (geo-targeted), FAQPage + GeneralContractor schemas, sitemap.xml, robots.txt, Open Graph, Twitter Cards
Performance	No frameworks, preloaded assets, preconnect hints, lazy-loaded images, will-change hints
FAQ section	5 geo-rich Q&As targeting Indiana construction keywords for search dominance

---

Project Structure

fixfusion/
├── assets/              # Images, SVG icons, logos
│   ├── icons/           # Service icons (1.svg – 9.svg)
│   ├── banner.png       # Hero background (desktop)
│   ├── mobile_logo.png  # Hero background (mobile)
│   ├── logo.svg         # Main logo
│   ├── logo2.svg        # Navigation logo
│   └── ...
├── tests/               # Jest unit tests
│   └── script.test.js
├── index.html           # Single-page HTML
├── styles.css           # All styles (mobile-first)
├── script.js            # All interactivity (strict mode, IIFE)
├── sitemap.xml          # XML sitemap for search engines
├── robots.txt           # Crawler directives
├── package.json         # Dev dependencies (Jest)
├── .gitignore
└── README.md

---

Getting Started

No build step needed. Open index.html in any browser.

Local development

# Clone
git clone https://github.com/ArvavTheMan/fixfusion.git
cd fixfusion

# Open in browser
open index.html          # macOS
start index.html         # Windows
xdg-open index.html      # Linux

Run tests

npm install
npm test

---

Tech Stack

• HTML5 — Semantic markup, ARIA roles, structured data
• CSS3 — Custom properties, clamp(), CSS Grid, Flexbox, keyframe animations
• JavaScript — ES5+ in strict-mode IIFE, IntersectionObserver, Fetch API
• Web3Forms — Serverless form submission → email delivery
• Jest — Unit testing with jsdom

---

Form & Email

The quote form submits to Web3Forms. No backend needed. Submissions are delivered to the configured email address.

Security layers:

• HTML5 pattern + minlength / maxlength attributes
• Client-side validation per step (name, phone, email format)
• Input sanitization (HTML entity encoding)
• Honeypot field to block bots
• Rate-limiting (5 s cooldown between submits)
• Content Security Policy restricts connect-src to api.web3forms.com

---

Browser Support

Browser	Version
Chrome	90+
Firefox	88+
Safari	14+
Edge	90+
iOS Safari	14+
Samsung Internet	14+

---

License

This project is proprietary software owned by FixFusion LLC. All rights reserved.

---

Made with precision for FixFusion