🏠 JSP CONSTRUCTION INC.

Professional Multi-Page Business Website for a Licensed Los Angeles General Contractor

JSP Construction Inc. is a production-grade, multi-page business website built for a licensed Los Angeles general contractor (CSLB #1094925). Engineered with a zero-dependency, modular CSS architecture and native Vanilla JavaScript, it delivers a premium brand experience while achieving strong SEO performance, WCAG-accessible markup, and sub-second page loads — all without a single framework or build tool.

---

🎨 Visual Philosophy & Design System

The site implements an "Elevated Professional Trust" design language — balancing visual warmth with the authority a licensed contractor needs to convert visitors into consultation requests:

• Curated Palette: A sophisticated token system pairing deep Navy Primary (#1a1a2e) with warm Gold-Amber accents (#c9a84c), off-white warm greys, and precisely tuned text contrast ratios — all defined as CSS Custom Properties in a dedicated variables.css design token file.
• Professional Typography: Pairing Outfit (bold, architectural headings) with Inter (clean, highly legible body copy) via Google Fonts, with a fully fluid clamp()-based type scale that smoothly adapts from mobile to ultrawide displays.
• Layered Depth System: Five progressively intense box-shadow tokens (--shadow-xs through --shadow-xl), custom cubic-bezier easing curves (including a spring easing --ease-spring), and overlay gradients that create consistent visual depth across cards, headers, and hero sections.
• Motion & Scroll Reveals: Scroll-triggered entrance animations via IntersectionObserver with staggered delay classes (reveal-delay-1 through reveal-delay-4), fully respecting prefers-reduced-motion for accessibility compliance.

---

⚙️ Core Technical Architecture

1. Modular CSS Design Token System (assets/css/variables.css)

A centralized design token file powers the entire visual identity — 119 lines of meticulously organized custom properties covering colors, typography (scale, weight, tracking, leading), spacing (14 spatial tokens), layout constraints, border radii, shadows, transitions, and overlay effects. This separation ensures complete design consistency across all 6 pages and makes full-site visual changes a single-file operation.

/* Fluid Type Scale — no breakpoints needed */
--text-base: clamp(0.9375rem, 0.88rem + 0.25vw, 1.0625rem);
--text-3xl:  clamp(1.875rem, 1.5rem + 1.5vw, 2.75rem);
--text-5xl:  clamp(2.75rem, 2rem + 3vw, 4.5rem);

/* Motion Easing Tokens */
--ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

2. Scalable Multi-File CSS Architecture

Instead of a monolithic stylesheet, the CSS is broken into 5 purpose-driven modules loaded in dependency order:

File	Purpose	Size
variables.css	Design tokens & custom properties	4.4 KB
base.css	Resets, global element styles, skip-link	3.5 KB
layout.css	Container, grid system, split layouts	2.7 KB
components.css	Cards, buttons, nav, footer, forms, accordion	12.5 KB
pages.css	Page-specific hero, service detail, CTA sections	8.2 KB

Combined CSS weight: ~31 KB — delivering a fully responsive, premium design system with no preprocessors, no PostCSS, and no build pipeline.

3. Accessibility-First Interactive Navigation (assets/js/navigation.js)

A lightweight navigation module that handles three concerns in one IIFE:

• Scroll-Aware Sticky Header: Dynamically adds/removes the scrolled class at a 60px threshold, with smart hero-page detection to preserve transparent-header aesthetics on the homepage.
• Mobile Menu: Full keyboard support including Escape to close with focus restoration, proper aria-expanded state management, and body scroll locking.
• Smooth Anchor Scrolling: Hijacks # anchor clicks for native scrollIntoView behavior.

// Smart hero-page detection prevents header flash on interior pages
if (currentScroll > 60) {
  header.classList.add('scrolled');
} else {
  if (document.querySelector('.hero')) {
    header.classList.remove('scrolled');  // Only on pages with a hero
  }
}

4. Performant Scroll Animation System (assets/js/animations.js)

A clean, 41-line animation module built on IntersectionObserver:

• One-shot observation: Each .reveal element is unobserved after animation, preventing redundant DOM operations.
• Reduced motion respect: Immediately sets all elements to visible if the user's OS-level prefers-reduced-motion: reduce preference is detected.
• Staggered timing: Works with CSS delay classes for cascading entrance effects across grid layouts.

5. Production Form Handler with Formspree Integration (assets/js/form.js)

A complete client-side form validation and submission engine:

• Declarative Validation Rules: Field rules defined as a clean configuration object with required, validate, and message properties.
• Real-Time Feedback: Validates on blur and clears errors on subsequent input, only re-validating fields already in an error state to avoid premature warnings.
• Async REST Submission: Posts JSON payloads to Formspree with proper Content-Type headers, managing button disabled states and error/success UX flows.
• Smart Focus Management: Automatically focuses the first field with an error on failed submission.

// Declarative validation — clean, extensible rule configuration
const validators = {
  firstName: {
    required: true,
    validate: (val) => val.trim().length >= 2,
    message: 'Please enter your first name.'
  },
  email: {
    required: true,
    validate: (val) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val),
    message: 'Please enter a valid email address.'
  }
};

---

📂 Project Structure

JSPConstruction/
├── index.html               # Homepage — Hero, Services Grid, Trust Pillars, CTA
├── about.html               # Company Story, Values, Visual Timeline
├── contact.html             # Consultation Form + Contact Sidebar + Formspree
├── faq.html                 # Accordion FAQ with Inline JS Controller
├── 404.html                 # Brand-Cohesive 404 Error Page
├── robots.txt               # Crawler Directives
├── sitemap.xml              # XML Sitemap for Search Indexing
├── services/
│   └── index.html           # 5 Service Categories with Feature Lists & CTAs
└── assets/
    ├── css/
    │   ├── variables.css    # Design Token System (colors, type, spacing, shadows)
    │   ├── base.css         # Global Resets & Element Defaults
    │   ├── layout.css       # Container, Grid & Split Layout Utilities
    │   ├── components.css   # Reusable UI Components (nav, cards, buttons, forms)
    │   └── pages.css        # Page-Specific Section Styles
    ├── js/
    │   ├── navigation.js    # Sticky Header, Mobile Menu, Smooth Scroll
    │   ├── animations.js    # IntersectionObserver Scroll Reveals
    │   └── form.js          # Client-Side Validation + Formspree Handler
    └── images/
        ├── authentic/       # High-Resolution Project Photography (8 assets)
        ├── hero/            # Hero Background Assets
        └── services/        # Service-Specific Photography

---

🔍 SEO & Performance Highlights

This site was built with organic search visibility as a first-class concern:

• Unique Title & Meta Tags on every page with location-specific keywords (e.g., "Los Angeles Home Remodeling").
• Canonical URLs to prevent duplicate content issues across www and non-www variants.
• Open Graph Metadata for rich social sharing previews on Facebook and LinkedIn.
• Semantic HTML5 with proper heading hierarchy (h1 → h2 → h3), <main>, <nav>, <section>, and <footer> landmarks.
• robots.txt + XML Sitemap for crawler guidance and efficient indexing.
• Image Optimization — explicit width and height attributes on all <img> tags to prevent Cumulative Layout Shift (CLS), with loading="lazy" on below-fold images.
• Skip Navigation Link (<a class="skip-link">) for screen reader users on every page.

---

🚀 Setup & Execution

Since the project is built on standard web standards, there are no dependencies to install and no build processes required.

Local Development

1. Clone this repository:

   git clone https://github.com/threadbearer/JSPConstruction.git

2. Run a simple static server from the root folder:
   • VSCode: Right-click index.html and select "Open with Live Server".
   • Python:

     python3 -m http.server 8000

3. Open your browser and navigate to http://localhost:8000.

Production Deployment

The site is deployed to a Google Cloud Storage bucket configured for static website hosting:

gsutil -m rsync -r -d ./ gs://your-bucket-name

---

🛠️ Portfolio Context & Key Engineering Takeaways

• Modular CSS Architecture: The 5-file CSS system demonstrates how to scale a design system across a multi-page site without preprocessors — achieving the maintainability of SASS/LESS through disciplined use of CSS Custom Properties and purposeful file separation.
• Zero-Dependency Performance: The entire site — HTML, CSS, and JS combined — weighs under 115 KB of source code. No framework overhead, no unused CSS, no tree-shaking necessary. Every byte is intentional.
• Production SEO Patterns: Demonstrates a complete SEO implementation (canonical URLs, Open Graph, XML sitemap, structured heading hierarchies, image optimization) that mirrors what agencies charge thousands to configure.
• Accessibility by Default: Skip links, ARIA attributes, keyboard navigation, reduced-motion respect, and semantic HTML aren't afterthoughts — they're foundational to the architecture.
• Real Client Deployment: This is not a tutorial project. It serves a real, licensed contractor and processes real consultation requests through Formspree in production.