Skip to content

[codex] Improve site accessibility and mobile polish #15

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Radical-Coder merged 3 commits into from
Jun 22, 2026
Merged

[codex] Improve site accessibility and mobile polish #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a35234b
Improve site accessibility and mobile polish
Radical-Coder Jun 22, 2026
3507213
Harden mobile navigation and PR feedback
Radical-Coder Jun 22, 2026
f92abdb
Harden metadata test assertions
Radical-Coder Jun 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 47 additions & 14 deletions ai-app-rescue/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,6 +136,34 @@
overflow-x: hidden;
}

.skip-link {
position: fixed;
top: 12px;
left: 12px;
z-index: 200;
padding: 10px 14px;
border: 2px solid var(--border);
border-radius: 4px;
background: #ffffff;
color: var(--ink);
font-family: var(--font-display);
font-size: 13px;
font-weight: 800;
text-decoration: none;
opacity: 0;
pointer-events: none;
transform: translateY(-12px);
transition:
opacity 120ms ease,
transform 120ms ease;
}

.skip-link:focus-visible {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}

img,
video {
max-width: 100%;
Expand Down Expand Up @@ -243,6 +271,10 @@
padding: 80px 24px;
}

.bordered-section {
border-top: 2px solid var(--border);
}

.hero-section {
padding-top: 72px;
padding-bottom: 56px;
Expand Down Expand Up @@ -880,6 +912,7 @@
</style>
</head>
<body>
<a class="skip-link" href="#main-content">Skip to main content</a>
<header class="site-header">
<div class="header-container">
<a href="/" class="brand-wordmark">RYAN GONYON<span class="brand-cursor">_</span></a>
Expand All @@ -890,12 +923,12 @@
<a href="#book" class="nav-link">Book</a>
</nav>
<div class="header-cta">
<a href="https://www.upwork.com/services/product/development-it-ryan-2066951544316331152?ref=project_share" class="btn btn-outline btn-sm" target="_blank" rel="noopener">Book on Upwork</a>
<a href="https://www.upwork.com/services/product/development-it-ryan-2066951544316331152?ref=project_share" class="btn btn-outline btn-sm" target="_blank" rel="noopener noreferrer">Book on Upwork</a>
</div>
</div>
</header>

<main>
<main id="main-content" tabindex="-1">
<section class="section-container hero-section" aria-labelledby="hero-title">
<div class="hero-grid">
<div>
Expand All @@ -921,7 +954,7 @@ <h1 class="hero-title" id="hero-title">Turn your AI-built prototype into a build
</div>

<div class="hero-actions">
<a href="https://www.upwork.com/services/product/development-it-ryan-2066951544316331152?ref=project_share" class="btn btn-blue btn-lg" target="_blank" rel="noopener">Book the Consultation</a>
<a href="https://www.upwork.com/services/product/development-it-ryan-2066951544316331152?ref=project_share" class="btn btn-blue btn-lg" target="_blank" rel="noopener noreferrer">Book the Consultation</a>
<a href="#proof" class="btn btn-outline btn-lg">See Proof &darr;</a>
</div>
</div>
Expand All @@ -938,7 +971,7 @@ <h1 class="hero-title" id="hero-title">Turn your AI-built prototype into a build
</div>
</section>

<section id="fit" class="section-container" aria-labelledby="fit-title" style="border-top: 2px solid var(--border);">
<section id="fit" class="section-container bordered-section" aria-labelledby="fit-title">
<div class="section-header">
<span class="section-eyebrow">BEST FIT</span>
<h2 class="section-title" id="fit-title">Use this when the demo exists, but trust does not.</h2>
Expand Down Expand Up @@ -975,7 +1008,7 @@ <h3 class="fit-title">Founder translation</h3>
</div>
</section>

<section id="deliverables" class="section-container" aria-labelledby="deliverables-title" style="border-top: 2px solid var(--border);">
<section id="deliverables" class="section-container bordered-section" aria-labelledby="deliverables-title">
<div class="section-header">
<span class="section-eyebrow">CALL OUTPUT</span>
<h2 class="section-title" id="deliverables-title">A working session with a concrete handoff.</h2>
Expand Down Expand Up @@ -1015,7 +1048,7 @@ <h3 class="protocol-title">Leave with the next move</h3>
</div>
</section>

<section class="section-container" aria-labelledby="scan-title" style="border-top: 2px solid var(--border);">
<section class="section-container bordered-section" aria-labelledby="scan-title">
<div class="hero-grid">
<div>
<span class="section-eyebrow">RISK SCAN</span>
Expand Down Expand Up @@ -1061,22 +1094,22 @@ <h2 class="section-title" id="scan-title" style="margin-bottom: 20px;">The call
</div>
</section>

<section id="proof" class="section-container" aria-labelledby="proof-title" style="border-top: 2px solid var(--border);">
<section id="proof" class="section-container bordered-section" aria-labelledby="proof-title">
<div class="section-header">
<span class="section-eyebrow">PROOF SURFACE</span>
<h2 class="section-title" id="proof-title">The offer has a real operating model behind it.</h2>
</div>

<div class="proof-grid">
<div class="media-card">
<img src="/assets/ai-app-rescue/ai-app-rescue-dashboard.png" alt="AI App Rescue dashboard with intake, risk scanner, scoped next move, and reviewed operating surfaces." />
<img src="/assets/ai-app-rescue/ai-app-rescue-dashboard.png" alt="AI App Rescue dashboard with intake, risk scanner, scoped next move, and reviewed operating surfaces." loading="lazy" decoding="async" />
<div class="media-card-caption">
<strong>AI App Rescue Console</strong>
<span>An anonymized consultation dashboard showing intake, risk review, architecture mapping, and scoped next move.</span>
</div>
</div>
<div class="media-card">
<img src="/assets/ai-app-rescue/mobile-responsive-proof.png" alt="Mobile responsive view of the AI App Rescue dashboard." />
<img src="/assets/ai-app-rescue/mobile-responsive-proof.png" alt="Mobile responsive view of the AI App Rescue dashboard." loading="lazy" decoding="async" />
<div class="media-card-caption">
<strong>Mobile-ready proof</strong>
<span>The same workflow compressed for a founder reviewing the plan from a phone.</span>
Expand All @@ -1085,7 +1118,7 @@ <h2 class="section-title" id="proof-title">The offer has a real operating model
</div>
</section>

<section class="section-container" aria-labelledby="ledger-title" style="border-top: 2px solid var(--border);">
<section class="section-container bordered-section" aria-labelledby="ledger-title">
<div class="section-header">
<span class="section-eyebrow">RELATED WORK</span>
<h2 class="section-title" id="ledger-title">Relevant systems and proof paths.</h2>
Expand Down Expand Up @@ -1127,7 +1160,7 @@ <h2 class="section-title" id="ledger-title">Relevant systems and proof paths.</h
</td>
<td data-label="Why it matters" class="ledger-risk-desc">Retail catalog data needed controlled AI usage, review queues, audit trail, and export paths.</td>
<td data-label="Output" class="ledger-outcome-desc">Live operator console with source-row staging, entity review, approval workflow, and usage caps.</td>
<td data-label="Link"><a href="https://ai-platform-catalog-intelligence-de.vercel.app" class="ledger-link" target="_blank" rel="noopener">Live MVP &rarr;</a></td>
<td data-label="Link"><a href="https://ai-platform-catalog-intelligence-de.vercel.app" class="ledger-link" target="_blank" rel="noopener noreferrer">Live MVP &rarr;</a></td>
</tr>
<tr>
<td data-label="Proof">
Expand All @@ -1141,20 +1174,20 @@ <h2 class="section-title" id="ledger-title">Relevant systems and proof paths.</h
</td>
<td data-label="Why it matters" class="ledger-risk-desc">Production workflows required operational clarity across listings, lead paths, review, SEO, and visibility rules.</td>
<td data-label="Output" class="ledger-outcome-desc">Hardened marketplace and management-side workflows in a real operating environment.</td>
<td data-label="Link"><a href="https://www.automarkets.com.au/" class="ledger-link" target="_blank" rel="noopener">Live Site &rarr;</a></td>
<td data-label="Link"><a href="https://www.automarkets.com.au/" class="ledger-link" target="_blank" rel="noopener noreferrer">Live Site &rarr;</a></td>
</tr>
</tbody>
</table>
</section>

<section id="book" class="section-container" style="border-top: 2px solid var(--border);">
<section id="book" class="section-container bordered-section">
<div class="cta-panel">
<div>
<h2 class="cta-title">If the app looks 80% done but you do not trust it yet, this is the right call.</h2>
<p class="cta-copy">Book through Upwork for the cleanest payment/review path, or email me if you need to send context before booking.</p>
</div>
<div class="hero-actions">
<a href="https://www.upwork.com/services/product/development-it-ryan-2066951544316331152?ref=project_share" class="btn btn-blue btn-lg" target="_blank" rel="noopener">Book on Upwork</a>
<a href="https://www.upwork.com/services/product/development-it-ryan-2066951544316331152?ref=project_share" class="btn btn-blue btn-lg" target="_blank" rel="noopener noreferrer">Book on Upwork</a>
<a href="mailto:coderradical@gmail.com?subject=AI%20App%20Rescue%20Consultation" class="btn btn-outline btn-lg">Email Ryan</a>
</div>
</div>
Expand Down
63 changes: 40 additions & 23 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,8 +141,9 @@
<link rel="stylesheet" href="/styles.css" />
</head>
<body>
<a class="skip-link" href="#main-content">Skip to main content</a>
<header class="site-header">
<a class="brand" href="#top" aria-label="Ryan Gonyon home">
<a class="brand" href="/" aria-label="Ryan Gonyon home">
<span class="brand-mark">RG</span>
<span class="brand-copy">
<strong>Ryan Gonyon</strong>
Expand All @@ -161,7 +162,7 @@
<a class="header-cta" href="/ai-app-rescue/">Start a project</a>

<button class="menu-button" type="button" aria-expanded="false" aria-controls="mobile-menu" data-menu-button>
<span class="sr-only">Open navigation</span>
<span class="sr-only" data-menu-label>Open navigation</span>
<span></span>
<span></span>
<span></span>
Expand All @@ -176,7 +177,7 @@
<a href="#contact">Contact</a>
</nav>

<main id="top">
<main id="main-content" tabindex="-1">
<section class="hero section">
<div class="hero-copy">
<h1>Reviewable AI systems and app rescue for software that already matters.</h1>
Expand Down Expand Up @@ -230,6 +231,7 @@ <h1>Reviewable AI systems and app rescue for software that already matters.</h1>
width="1815"
height="866"
alt="Laptop showing a workflow dashboard with review cards and approved outputs"
decoding="async"
fetchpriority="high"
/>
<figcaption>
Expand Down Expand Up @@ -368,6 +370,8 @@ <h2>Proof should look like working product.</h2>
width="1440"
height="980"
alt="AutoMarkets live listing search page with collector car filters and market cards"
loading="lazy"
decoding="async"
/>
</figure>
<div class="proof-case-body">
Expand All @@ -392,6 +396,8 @@ <h3>AutoMarkets</h3>
width="1440"
height="980"
alt="MyGradHub MVP feed with student profile, vendor discovery, bookings, and admin console tabs"
loading="lazy"
decoding="async"
/>
</figure>
<div class="proof-case-body">
Expand All @@ -408,6 +414,8 @@ <h3>MyGradHub</h3>
width="1440"
height="980"
alt="Radical Workflow canvas showing connected prompt, generator, notes, and app preview nodes"
loading="lazy"
decoding="async"
/>
</figure>
<div class="proof-case-body">
Expand All @@ -424,6 +432,8 @@ <h3>Radical Workflow</h3>
width="1440"
height="900"
alt="Internal AI workspace with source text, executive summary output, and action items"
loading="lazy"
decoding="async"
/>
</figure>
<div class="proof-case-body">
Expand All @@ -440,6 +450,8 @@ <h3>Source to reviewed output</h3>
width="1440"
height="900"
alt="Internal AI admin dashboard with processing metrics and recent AI actions"
loading="lazy"
decoding="async"
/>
</figure>
<div class="proof-case-body">
Expand Down Expand Up @@ -532,28 +544,28 @@ <h2>Offer ladder.</h2>
<span role="columnheader">Included</span>
</div>
<div class="package-row" role="row">
<span role="cell">Workflow Audit</span>
<span role="cell">$500-$1,500</span>
<span role="cell">A team that needs workflow, risk, and build path clarity before coding.</span>
<span role="cell">Workflow map, examples review, risk notes, first-sprint recommendation.</span>
<span role="cell" data-label="Package">Workflow Audit</span>
<span role="cell" data-label="Range">$500-$1,500</span>
<span role="cell" data-label="Best for">A team that needs workflow, risk, and build path clarity before coding.</span>
<span role="cell" data-label="Included">Workflow map, examples review, risk notes, first-sprint recommendation.</span>
</div>
<div class="package-row featured" role="row">
<span role="cell">Automation Sprint</span>
<span role="cell">$2,500-$7,500</span>
<span role="cell">One repeated workflow with messy input, human review, and a real output destination.</span>
<span role="cell">Working lane, review queue, output handoff, logs, docs, tuning notes.</span>
<span role="cell" data-label="Package">Automation Sprint</span>
<span role="cell" data-label="Range">$2,500-$7,500</span>
<span role="cell" data-label="Best for">One repeated workflow with messy input, human review, and a real output destination.</span>
<span role="cell" data-label="Included">Working lane, review queue, output handoff, logs, docs, tuning notes.</span>
</div>
<div class="package-row" role="row">
<span role="cell">AI App Rescue</span>
<span role="cell">$500 consultation or scoped milestone</span>
<span role="cell">A tool-built app nearing users, payments, private data, or handoff pressure.</span>
<span role="cell">Risk map, launch checklist, fix-now / fix-next plan, milestone scope.</span>
<span role="cell" data-label="Package">AI App Rescue</span>
<span role="cell" data-label="Range">$500 consultation or scoped milestone</span>
<span role="cell" data-label="Best for">A tool-built app nearing users, payments, private data, or handoff pressure.</span>
<span role="cell" data-label="Included">Risk map, launch checklist, fix-now / fix-next plan, milestone scope.</span>
</div>
<div class="package-row" role="row">
<span role="cell">Internal Dashboard MVP</span>
<span role="cell">$2,500-$7,500</span>
<span role="cell">A team replacing scattered status threads, sheets, and manual checks.</span>
<span role="cell">Operator surface, filters, status model, reporting, and handoff notes.</span>
<span role="cell" data-label="Package">Internal Dashboard MVP</span>
<span role="cell" data-label="Range">$2,500-$7,500</span>
<span role="cell" data-label="Best for">A team replacing scattered status threads, sheets, and manual checks.</span>
<span role="cell" data-label="Included">Operator surface, filters, status model, reporting, and handoff notes.</span>
</div>
</div>
</section>
Expand Down Expand Up @@ -637,17 +649,22 @@ <h2>Bring one fragile app or workflow. I will bring the proof loop.</h2>
};

const menuButton = document.querySelector("[data-menu-button]");
const menuLabel = document.querySelector("[data-menu-label]");
const mobileMenu = document.querySelector("[data-mobile-menu]");

function setMenuOpen(isOpen) {
menuButton?.setAttribute("aria-expanded", String(isOpen));
if (menuLabel) menuLabel.textContent = isOpen ? "Close navigation" : "Open navigation";
if (mobileMenu) mobileMenu.hidden = !isOpen;
}

function closeMenu() {
menuButton?.setAttribute("aria-expanded", "false");
if (mobileMenu) mobileMenu.hidden = true;
setMenuOpen(false);
}

menuButton?.addEventListener("click", () => {
const isOpen = menuButton.getAttribute("aria-expanded") === "true";
menuButton.setAttribute("aria-expanded", String(!isOpen));
if (mobileMenu) mobileMenu.hidden = isOpen;
setMenuOpen(!isOpen);
});

mobileMenu?.querySelectorAll("a").forEach((link) => {
Expand Down
Loading