Orbital Surveys Website Modernization Implementation Plan

For Claude: REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.

Goal: Rebuild the Orbital Surveys dev website as a cinematic, accessible geospatial portfolio focused on aerial mapping, real production software and enquiry conversion.

Architecture: Retain Jekyll and the current GitHub Pages workflow, but replace the Sleek theme runtime with new semantic Liquid layouts, data-driven content, a standalone modern stylesheet and a small vanilla JavaScript interaction layer. Keep all existing public service URLs and the live Formspree endpoint while building and verifying exclusively on the dev worktree.

Tech Stack: Jekyll/Liquid, YAML data, semantic HTML, modern CSS, vanilla JavaScript, Ruby verification script, GitHub Pages.

Task 1: Add a failing modern-site verification harness

Skills: @superpowers:test-driven-development

Files:

Create: script/verify-modern-site.rb
Modify: DEV_WORKFLOW.md

Step 1: Create the output verification script

Write a standard-library Ruby script that accepts the built-site directory as its first argument and checks:

required_pages = %w[
  index.html
  contact/index.html
  aerial_surveys/index.html
  terrestrial/index.html
  hydro/index.html
  computer/index.html
  minetrak/index.html
]

required_home_content = [
  'See the ground clearly. Build with confidence.',
  'id="capabilities"',
  'id="process"',
  'id="software"',
  'CloudConstruct',
  'CloudCanvas',
  'Pit bench design',
  'Trench design',
  'id="contact"'
]

Also assert that the generated homepage references /assets/css/site.css and /assets/js/site.js, does not reference jQuery or Velocity, and that the generated contact form retains https://formspree.io/f/mzdnzpya.

Exit non-zero and print every missing expectation; print a concise pass summary when all assertions hold.

Step 2: Build the current site

Run:

rtk proxy powershell -NoProfile -Command "bundle exec jekyll build --destination '..\gps-webpage-modern-build'"

Expected: Jekyll build succeeds.

Step 3: Run the verifier and confirm it fails

Run:

rtk proxy ruby script/verify-modern-site.rb "..\gps-webpage-modern-build"

Expected: FAIL because the modern homepage sections and new assets do not exist yet.

Step 4: Correct the documented dev output path

Update DEV_WORKFLOW.md to use ..\gps-webpage-dev-build, avoiding spaces in the destination directory name while still keeping generated output outside the repository.

Step 5: Commit the verification foundation

rtk git add script/verify-modern-site.rb DEV_WORKFLOW.md
rtk git diff --staged --check
rtk git commit -m "test: add modern site verification harness"

Task 2: Replace the global brand and document shell

Skills: @agent-skills:frontend-ui-engineering

Files:

Create: assets/img/orbital-mark.svg
Create: assets/css/site.css
Create: assets/js/site.js
Modify: _includes/head.html
Modify: _includes/header.html
Modify: _includes/footer.html
Modify: _config.yml

Step 1: Create the Orbital vector mark

Build a compact SVG combining an orbital ellipse, survey crosshair and central datum point. Use currentColor, include an accessible <title>, and keep the geometry legible at 32px.

Step 2: Replace the head asset loading

Remove the old inline critical CSS/loadCSS block. Load:

<link rel="stylesheet" href="/assets/css/site.css">
<script defer src="/assets/js/site.js"></script>

Retain `

Orbital Surveys Website Modernization Implementation Plan | Orbital Surveys

, favicons, viewport and optional Google Tag Manager support. Change theme/application metadata from Sleek to Orbital Surveys`.

Step 3: Build the semantic header

Use a logo link with mark and wordmark, a real <button> for the mobile menu, aria-expanded, and navigation anchors for #capabilities, #process, #software, #work, #about and #contact. On non-home pages, prefix anchors with /.

Step 4: Build the global footer

Add concise company positioning, navigation, the existing email address and copyright. Avoid inactive social icons.

Step 5: Add CSS foundations

Define tokens for basalt, warm paper, terrain green and survey orange; typography, spacing, containers, focus states, buttons, header, footer, responsive breakpoints and reduced-motion defaults.

Step 6: Add minimal global JavaScript

Implement only the mobile-navigation state and header scroll state initially. Do not add reveal/parallax behavior until Task 7.

Step 7: Build and inspect the shell

Run the Jekyll build command. Expected: build succeeds and every page loads the new CSS/JS without referencing the old runtime bundle.

Step 8: Commit the brand shell

rtk git add assets/img/orbital-mark.svg assets/css/site.css assets/js/site.js _includes/head.html _includes/header.html _includes/footer.html _config.yml
rtk git diff --staged --check
rtk git commit -m "feat: replace legacy shell with Orbital brand"

Task 3: Build the cinematic homepage foundation

Skills: @agent-skills:frontend-ui-engineering

Files:

Create: _data/process.yml
Create: _data/capabilities.yml
Modify: _layouts/default.html
Modify: index.md
Modify: assets/css/site.css

Step 1: Add factual process data

Create four entries: Plan, Capture, Process and Deliver. Each entry must contain an eyebrow, title, short factual description and an existing image path.

Step 2: Add capability data

Create entries for aerial surveys, orthophotos, terrain/elevation models, contours/spatial deliverables, GPS control, hydrographic surveys and mapping/spatial data. Link each entry to an existing service URL where one exists.

Step 3: Rebuild the homepage layout

Create semantic sections for:

Hero with the approved headline and two actions.
Positioning statement.
Scroll-led process sequence with id="process".
Capability presentation with id="capabilities".

Use the existing ortho_1920x1080.jpg, drone, orthophoto and terrain imagery. Include meaningful alt text and explicit aspect-ratio wrappers.

Step 4: Style the homepage foundation

Add the full-viewport hero, survey-grid overlay, editorial typography, process layout, capability rows and responsive stacked variants. Keep all content visible before JavaScript runs.

Step 5: Build and inspect at representative widths

Verify source order and responsive behavior at 375px, 768px and 1440px.

Step 6: Commit the homepage foundation

rtk git add _data/process.yml _data/capabilities.yml _layouts/default.html index.md assets/css/site.css
rtk git diff --staged --check
rtk git commit -m "feat: build aerial mapping homepage foundation"

Task 4: Add the CloudConstruct and CloudCanvas product story

Skills: @agent-skills:frontend-ui-engineering

Files:

Create: _data/software.yml
Create: assets/img/software/cloudcanvas-surface.png
Create: assets/img/software/cloudcanvas-ortho.png
Modify: _layouts/default.html
Modify: assets/css/site.css

Step 1: Add factual product data

Define CloudConstruct as the production pipeline for survey imagery, control, alignment, dense reconstruction, reporting and orthophoto output.

Define CloudCanvas capability groups as:

Terrain analysis
Pit bench design
Trench design
Drillhole and delivery workflows

State that both are used in-house and available to clients by pricing enquiry.

Step 2: Copy genuine CloudCanvas visuals

Copy, without modifying the source repository:

D:\CloudCanvas Backup\CloudCanvas\src\cloudcanvas\screenshot1.png to assets/img/software/cloudcanvas-surface.png
D:\CloudCanvas Backup\CloudCanvas\src\cloudcanvas\screenshot.png to assets/img/software/cloudcanvas-ortho.png

Use existing GPS-site point-cloud and DEM imagery for CloudConstruct rather than fabricating a UI screenshot.

Step 3: Build the software section

Add id="software", the approved heading Built for our own production work. Available to yours., one CloudConstruct story and one larger CloudCanvas story. Include factual pit-bench/trench details and Enquire about pricing links to the contact section.

Step 4: Style the software narrative

Create a dark technical section with large imagery, compact capability labels, a process connector and desktop sticky behavior that degrades to a normal stacked layout on smaller screens.

Step 5: Build and verify copy accuracy

Confirm that no automatic purchasing, unsupported AI capability or unverified survey-grade claim appears.

Step 6: Commit the software showcase

rtk git add _data/software.yml assets/img/software _layouts/default.html assets/css/site.css
rtk git diff --staged --check
rtk git commit -m "feat: showcase Orbital production software"

Task 5: Complete the homepage portfolio, credibility and contact journey

Files:

Modify: _layouts/default.html
Modify: _includes/form.html
Modify: assets/css/site.css

Step 1: Add the work section

Create id="work" using the existing orthophoto, terrain model, point-cloud, drone and mine imagery in an editorial image mosaic. Describe outputs rather than inventing project/customer case studies.

Step 2: Add the about/credibility section

Create id="about" and use only the factual history that Orbital has provided surveying and mapping services since 1995.

Step 3: Redesign the contact form

Preserve the exact Formspree action and current fields. Improve grouping, helper text, focus/error states and button wording. Add an enquiry-type selector with survey project, CloudConstruct pricing and CloudCanvas pricing options.

Step 4: Add the homepage contact section

Create id="contact", include the form and provide the direct email fallback.

Step 5: Build and verify the endpoint

Inspect generated HTML and confirm https://formspree.io/f/mzdnzpya remains the form action.

Step 6: Commit the completed homepage

rtk git add _layouts/default.html _includes/form.html assets/css/site.css
rtk git diff --staged --check
rtk git commit -m "feat: complete Orbital homepage journey"

Task 6: Redesign and rewrite all supporting pages

Files:

Modify: _layouts/page.html
Modify: _layouts/post.html
Modify: _includes/card.html
Modify: contact.md
Modify: _posts/2014-01-01-aerial_surveys.md
Modify: _posts/2011-11-26-terrestrial.md
Modify: _posts/2014-06-18-hydro.md
Modify: _posts/2013-01-02-computer.md
Modify: _posts/2015-02-01-minetrak.md
Modify: 404.md
Modify: assets/css/site.css

Step 1: Replace generic page and post layouts

Use a compact image-led masthead, breadcrumbs/eyebrow, readable content measure, related-capability links and consistent contact CTA. Remove blog dates and reading-time framing from service pages.

Step 2: Rewrite aerial surveys

Lead with aerial mapping and photogrammetry; retain factual orthophoto, DTM/DEM, photography, accuracy and deliverable information.

Step 3: Rewrite terrestrial, hydrographic and mapping services

Improve language and hierarchy while preserving supported claims. Rename the visible Computer Services title to Mapping & Spatial Data while retaining /computer/.

Step 4: Reframe MineTrak

Present it as a specialist field/mining navigation product and preserve its factual capabilities and comparison imagery. Avoid current-platform compatibility promises that the old copy cannot support.

Step 5: Rewrite contact and 404 pages

Keep contact concise and provide a useful path back to capabilities/home from 404.

Step 6: Build and verify all legacy URLs

Run the verifier. Expected: all required paths exist and contain the new global shell.

Step 7: Commit supporting pages

rtk git add _layouts/page.html _layouts/post.html _includes/card.html contact.md _posts 404.md assets/css/site.css
rtk git diff --staged --check
rtk git commit -m "feat: modernize Orbital capability pages"

Task 7: Add purposeful scroll motion and interaction polish

Skills: @agent-skills:frontend-ui-engineering

Files:

Modify: assets/js/site.js
Modify: assets/css/site.css
Modify: _layouts/default.html

Step 1: Add reveal hooks without hiding baseline content

Apply data-reveal, data-reveal-group, data-route-line and limited data-parallax attributes. Only the .js state may opt elements into pre-reveal styling.

Step 2: Implement Intersection Observer reveals

Add .is-visible once elements cross a conservative threshold. Stagger groups with CSS custom properties rather than timers.

Step 3: Implement restrained scroll depth

Use one passive scroll listener with requestAnimationFrame to update only the hero and a small number of marked image layers. Clamp movement and skip all scroll transforms when reduced motion is requested.

Step 4: Add drawn route/grid motion

Animate SVG stroke offset only when the owning section becomes visible. Keep the final route visible when animation is disabled.

Step 5: Add reduced-motion and no-JS verification

With prefers-reduced-motion: reduce, remove transforms/delays and expose final states. With JavaScript disabled, all text, images and links remain visible and usable.

Step 6: Commit interaction polish

rtk git add assets/js/site.js assets/css/site.css _layouts/default.html
rtk git diff --staged --check
rtk git commit -m "feat: add accessible geospatial motion"

Task 8: Remove legacy runtime dependencies and perform full verification

Skills: @agent-skills:browser-testing-with-devtools, @superpowers:verification-before-completion

Files:

Modify: package.json
Modify: package-lock.json
Modify: README.md
Retain but stop loading: assets/js/bundle.js, assets/css/main.css, legacy _sass and _js sources unless deletion is separately approved.

Step 1: Remove unused browser dependencies

Remove jQuery, Velocity, lazySizes and browserify/Babel runtime-build dependencies only if no new template references them. Regenerate package-lock.json with the repository’s package manager.

Step 2: Replace the placeholder test command

Set npm test to build to ..\gps-webpage-modern-build and run script/verify-modern-site.rb, using a Windows-compatible script arrangement where necessary.

Step 3: Update development documentation

Replace theme-template README content with the Orbital site structure, dev preview command, content update locations and publish workflow.

Step 4: Run full static verification

Run:

rtk git diff --check
rtk proxy powershell -NoProfile -Command "bundle exec jekyll build --destination '..\gps-webpage-modern-build'"
rtk proxy ruby script/verify-modern-site.rb "..\gps-webpage-modern-build"

Expected: all commands exit 0.

Step 5: Run browser verification

Start the dev server from the dev worktree and verify:

375px, 768px, 1024px and 1440px layouts.
Mobile navigation by keyboard and pointer.
Hero, process, software and work sections.
CloudConstruct/CloudCanvas pricing links reach contact.
Service-page URLs and contact page.
Reduced-motion presentation.
No console errors or missing assets.

Step 6: Confirm live deployment files are untouched

Run:

rtk git diff master..dev -- .github/workflows/pages.yml CNAME

Expected: no differences.

Step 7: Commit cleanup and documentation

rtk git add package.json package-lock.json README.md
rtk git diff --staged --check
rtk git commit -m "chore: retire legacy frontend tooling"

Orbital Surveys Website Modernization Implementation Plan

Task 1: Add a failing modern-site verification harness

Task 2: Replace the global brand and document shell

Task 3: Build the cinematic homepage foundation

Task 4: Add the CloudConstruct and CloudCanvas product story

Task 5: Complete the homepage portfolio, credibility and contact journey

Task 6: Redesign and rewrite all supporting pages

Task 7: Add purposeful scroll motion and interaction polish

Task 8: Remove legacy runtime dependencies and perform full verification

Final Checkpoint