seahaven-site/about/index.njk

111 lines
6 KiB
Text
Raw Normal View History

Migrate to thin Eleventy build + a11y/SEO/perf/CI hardening (#20) * chore(build): add Eleventy scaffold Thin Eleventy build (v3.1.6, pinned) — passthrough-copies assets/, robots.txt, sitemap.xml; outputs flat HTML to _site/. _data/site.json holds site-wide constants; _data/images.json maps image keys to src+width+height for the {% image %} shortcode (CLS fix). Output stays flat HTML served from the same S3 bucket + CloudFront. * refactor(templates): base layout, partials, shared JS, CSS extraction - _includes/base.njk + nav/mobile-menu/footer partials reproduce the shared chrome once (was hand-duplicated across 13 pages). Adds a skip-link and <main> landmark (WCAG 2.4.1), aria-expanded/role=dialog hooks on the menu, and a {% year %} shortcode replacing document.write. - assets/js/nav.js: extracted sticky-nav + accessible mobile-menu dialog (focus trap, Escape, focus return) + rAF-throttled hero parallax. - assets/js/form.js: Basin AJAX submit with an accessible status region. - assets/css/*.css: per-page inline <style> extracted into page CSS files (home/about/services/careers/jobs/contact/social/legal/404); skip-link + :focus-visible added to main.css. - index.njk: homepage converted as the reference page. * fix(css): make hero-bg url root-relative after extraction Inline CSS used a document-relative url('assets/...') that resolves correctly from / but breaks once moved into /assets/css/home.css. Rewrite to /assets/images/. * refactor(pages): convert 12 pages to Eleventy templates Convert about, services, careers (listing + 3 jobs), contact, social- accountability, privacy-policy, terms-of-service, eula, and 404 from standalone HTML to .njk against base.njk. Each page now carries only front-matter (title/description/SEO) + its <main> content; shared head/ nav/footer/scripts come from the layout. JobPosting + LocalBusiness JSON-LD preserved. Images use the {% image %} shortcode (width/height). Contact gets an accessible #form-status region. form.js generalized to wire BOTH the contact form and the .apply-form job application forms (was contact-only), preserving each submit button's own label. * fix(a11y): footer contrast to WCAG AA + scope services .form-group Raise footer text colors (footer-bottom/col/brand/social/contact) and darken --text-muted so muted text clears 4.5:1 on the dark footer and warm-gray surfaces. Scope services' flex .form-group override to .contact-form .form-group so it can't leak to the global rule. * perf(seo): og-cover image, webp logos, hero preload Add a real 1200x630 og-cover.jpg (was a 153x49 favicon) wired site-wide via base.njk og:image/twitter:image. Convert nav/footer logos to webp (nav 58KB->22KB); PNGs kept as passthrough so old URLs still resolve. Preload the LCP hero image on the homepage (fetchpriority=high). All <img> carry width/height via the image shortcode (CLS). * ci(deploy): build-then-sync, cache headers, safe concurrency Rename main.yml -> deploy.yaml (org convention). Build with Eleventy (npm ci && npm run build) and sync _site/ instead of the repo root, so only built output ships (no source/templates/node_modules). Split Cache-Control (1-day assets, no-cache HTML) and keep /* invalidation since filenames are not yet fingerprinted. concurrency cancel-in-progress false so a deploy is never cut mid sync. ci.yaml validates _site/ via ci-static build mode. * docs: README for the Eleventy build and structure * fix(security): wire services form, guard build, harden deploy Fable build-review findings: - BLOCK: services puts .contact-form on the <form> itself (contact uses a wrapper div), so form.js selector '.contact-form form' never matched it — the services lead form submitted natively with an empty reCAPTCHA token. Selector now also matches form.contact-form. - Guard the build before the --delete S3 sync: require index/contact/404 and >=40 files, so a silently-empty build can never wipe the live bucket. - npm ci --ignore-scripts on deploy (build verified to pass) to shrink the supply-chain window on the OIDC-credentialed runner. - Escape quotes in the image shortcode alt text.
2026-06-12 17:02:06 -04:00
---
layout: base.njk
title: "About — Sea Haven Industries"
description: "Learn about Sea Haven Industries — your trusted partner in construction with 20 years of experience, expert technicians, and a commitment to excellence."
pageCss: about
breadcrumbName: "About"
Migrate to thin Eleventy build + a11y/SEO/perf/CI hardening (#20) * chore(build): add Eleventy scaffold Thin Eleventy build (v3.1.6, pinned) — passthrough-copies assets/, robots.txt, sitemap.xml; outputs flat HTML to _site/. _data/site.json holds site-wide constants; _data/images.json maps image keys to src+width+height for the {% image %} shortcode (CLS fix). Output stays flat HTML served from the same S3 bucket + CloudFront. * refactor(templates): base layout, partials, shared JS, CSS extraction - _includes/base.njk + nav/mobile-menu/footer partials reproduce the shared chrome once (was hand-duplicated across 13 pages). Adds a skip-link and <main> landmark (WCAG 2.4.1), aria-expanded/role=dialog hooks on the menu, and a {% year %} shortcode replacing document.write. - assets/js/nav.js: extracted sticky-nav + accessible mobile-menu dialog (focus trap, Escape, focus return) + rAF-throttled hero parallax. - assets/js/form.js: Basin AJAX submit with an accessible status region. - assets/css/*.css: per-page inline <style> extracted into page CSS files (home/about/services/careers/jobs/contact/social/legal/404); skip-link + :focus-visible added to main.css. - index.njk: homepage converted as the reference page. * fix(css): make hero-bg url root-relative after extraction Inline CSS used a document-relative url('assets/...') that resolves correctly from / but breaks once moved into /assets/css/home.css. Rewrite to /assets/images/. * refactor(pages): convert 12 pages to Eleventy templates Convert about, services, careers (listing + 3 jobs), contact, social- accountability, privacy-policy, terms-of-service, eula, and 404 from standalone HTML to .njk against base.njk. Each page now carries only front-matter (title/description/SEO) + its <main> content; shared head/ nav/footer/scripts come from the layout. JobPosting + LocalBusiness JSON-LD preserved. Images use the {% image %} shortcode (width/height). Contact gets an accessible #form-status region. form.js generalized to wire BOTH the contact form and the .apply-form job application forms (was contact-only), preserving each submit button's own label. * fix(a11y): footer contrast to WCAG AA + scope services .form-group Raise footer text colors (footer-bottom/col/brand/social/contact) and darken --text-muted so muted text clears 4.5:1 on the dark footer and warm-gray surfaces. Scope services' flex .form-group override to .contact-form .form-group so it can't leak to the global rule. * perf(seo): og-cover image, webp logos, hero preload Add a real 1200x630 og-cover.jpg (was a 153x49 favicon) wired site-wide via base.njk og:image/twitter:image. Convert nav/footer logos to webp (nav 58KB->22KB); PNGs kept as passthrough so old URLs still resolve. Preload the LCP hero image on the homepage (fetchpriority=high). All <img> carry width/height via the image shortcode (CLS). * ci(deploy): build-then-sync, cache headers, safe concurrency Rename main.yml -> deploy.yaml (org convention). Build with Eleventy (npm ci && npm run build) and sync _site/ instead of the repo root, so only built output ships (no source/templates/node_modules). Split Cache-Control (1-day assets, no-cache HTML) and keep /* invalidation since filenames are not yet fingerprinted. concurrency cancel-in-progress false so a deploy is never cut mid sync. ci.yaml validates _site/ via ci-static build mode. * docs: README for the Eleventy build and structure * fix(security): wire services form, guard build, harden deploy Fable build-review findings: - BLOCK: services puts .contact-form on the <form> itself (contact uses a wrapper div), so form.js selector '.contact-form form' never matched it — the services lead form submitted natively with an empty reCAPTCHA token. Selector now also matches form.contact-form. - Guard the build before the --delete S3 sync: require index/contact/404 and >=40 files, so a silently-empty build can never wipe the live bucket. - npm ci --ignore-scripts on deploy (build verified to pass) to shrink the supply-chain window on the OIDC-credentialed runner. - Escape quotes in the image shortcode alt text.
2026-06-12 17:02:06 -04:00
---
<!-- ── Page Hero ── -->
<section class="page-hero">
<div class="container">
<nav class="breadcrumb" aria-label="Breadcrumb">
<a href="/">Home</a>
<span aria-hidden="true">/</span>
<span>About Us</span>
</nav>
<h1>Your Trusted Partner in Construction</h1>
</div>
</section>
<!-- ── About Intro ── -->
<section class="section about-intro">
<div class="container">
<div class="about-intro-grid">
<div>
{% image "team-at-work", "Sea Haven Industries team at work", 'class="about-intro-img" loading="lazy"' %}
</div>
<div class="about-intro-content">
<p class="label">About Us</p>
<h2 class="display-lg">Transforming Visions into Reality</h2>
<p>At Sea Haven Industries, we are dedicated to transforming visions into tangible realities. With 20 years of experience in the construction industry, our team of skilled professionals delivers high-quality craftsmanship and innovative solutions for every project. From commercial to industrial spaces, we prioritize customer satisfaction, safety, and sustainability in all our endeavors.</p>
</div>
</div>
</div>
</section>
<!-- ── Philosophy / Mission / Values ── -->
<section class="section values-section">
<div class="container">
<div class="values-grid">
<div class="value-card">
<h3>Philosophy</h3>
<p>At Sea Haven Industries, we believe in building not just structures, but lasting relationships. Our philosophy is rooted in integrity, quality, and innovation. We strive to exceed expectations by delivering exceptional craftsmanship and reliable service.</p>
</div>
<div class="value-card">
<h3>Mission</h3>
<p>Our mission is to build the future with integrity, innovation, and excellence. We are dedicated to delivering high-quality construction services that exceed expectations, ensuring safety, sustainability, and satisfaction in every project.</p>
</div>
<div class="value-card">
<h3>Values</h3>
<p>We prioritize integrity, quality craftsmanship, and innovation. Our transparent approach and commitment to excellence drive us to deliver superior results. We value collaboration, fostering a supportive environment for success.</p>
</div>
</div>
</div>
</section>
<!-- ── Why Choose Us ── -->
<section class="section why-section">
<div class="container">
<div class="why-grid">
<div class="why-content">
<p class="label">Why Choose Us</p>
<h2 class="display-lg">Built on Experience, Driven by Quality</h2>
<p>Sea Haven Industries is a premier provider of comprehensive facilities maintenance services, showcasing core capabilities that span across multiple domains.</p>
<div class="feature-item">
<h4>Rapid Response</h4>
<p>Enabled by our innovative system, we can dispatch crews for both emergency and standard service calls at a moment's notice, ensuring minimal downtime and maximum operational efficiency.</p>
</div>
<div class="feature-item">
<h4>Self-Performing Model</h4>
<p>As a self-performing company, we maintain direct control over our services, eliminating inconsistencies associated with subcontracting and guaranteeing superior quality work at competitive prices.</p>
</div>
<div class="feature-item">
<h4>Safety &amp; Quality Standards</h4>
<p>Our commitment to maintaining the highest safety and quality standards is unwavering. Our team operates adhering to industry best practices to provide safe, reliable, and efficient services.</p>
</div>
<div class="feature-item">
<h4>Problem-solving &amp; Innovation</h4>
<p>Our track record of custom solutions, such as retrofitting facilities with bespoke equipment, demonstrates our ability to identify, strategize, and implement effective solutions to unique client problems.</p>
</div>
<div class="feature-item">
<h4>Integrated Facilities Maintenance</h4>
<p>We offer a wide array of maintenance services including electrical work, plumbing, HVACR, garage door repair, and handyman services. Our holistic approach ensures optimal functionality and longevity of your facilities.</p>
</div>
</div>
<div class="why-img-wrap">
{% image "team-member", "Sea Haven Industries team member", 'class="why-img" loading="lazy"' %}
</div>
</div>
</div>
</section>
<!-- ── CTA Banner ── -->
<section class="cta-section">
<div class="container">
<div class="cta-inner">
<div class="cta-text">
<p class="label">Start Your Project</p>
<h2 class="display-md">Get in Touch, Get Results</h2>
<p>Have questions or ready to start your project? Contact us today for prompt, professional service and expert advice. We're here to help with all your construction needs.</p>
</div>
<div class="cta-actions">
<a href="/contact/" class="btn btn-primary">Contact Us</a>
<div class="cta-phone">
<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true" focusable="false"><path d="M2 3.5C2 2.67 2.67 2 3.5 2h1.586a1 1 0 0 1 .707.293l1.414 1.414a1 1 0 0 1 0 1.414L6.12 6.207A10.003 10.003 0 0 0 9.793 9.88l1.086-1.086a1 1 0 0 1 1.414 0l1.414 1.414A1 1 0 0 1 14 11v1.5c0 .83-.67 1.5-1.5 1.5C6.596 14 2 9.404 2 3.5z"/></svg>
Or call us: <strong>(631) 776-5102</strong>
</div>
</div>
</div>
</div>
</section>