Home Page Structure
Relevant source files
The following files were used as context for generating this wiki page:
The Home Page (index.html) serves as the central entry point for the Keith Soyka Portfolio. It establishes the value proposition of "AI that earns its place in the business" by integrating operational leadership experience with technical AI systems building. The page organizes the project's primary service lanes and technical showcase artifacts into a conversion-focused layout.
Sources: index.html:12-14, sitemap.html:43-43, README.md:5-5
Page Architecture
The layout uses a modular, section-based structure enclosed within a global .wrap container for consistent width. It relies on standard semantic HTML5 tags including <header>, <main>, <section>, and <footer>.
Navigation Header
The site-header contains the primary navigation and brand identity. It features a responsive navigation bar (.nav) with the following elements:
- Brand Link: "Keith Soyka." pointing to
index.html. - Menu Button: A
.menu-btnthat toggles the.nav-linksvisibility for mobile users. - Navigation Links: A list containing links to Home, Work, Showcase, Services, About, and Contact.
- Call to Action (CTA): A
.nav-ctabutton specifically for starting a conversation.
Sources: index.html:44-59
Hero and Conversion Section
The hero section focuses on the "AI implementation & systems advisory" eyebrow and the primary headline. It contains two specific CTA rows:
- Direct Action: Links to
cal.comfor scheduling and the services page. - Curiosity Row: Direct links to interactive demos like "Billy Chat" and "The Tribunal" to provide immediate proof of work.
Sources: index.html:64-83, CHANGELOG.md:5-7
The diagram shows the hierarchical structure of the Hero section and its bifurcated CTA strategy.
Sources: index.html:64-83
Content Modules
Quantitative Stats
A .stats block provides immediate social and technical proof using four key metrics:
| Metric | Description |
|---|---|
| 22+ Years | Frontline operations leadership (P&L, labor, inventory). |
| 16 Months | Duration spent solo designing and shipping a multi-model AI runtime. |
| DB Volume | 217 Postgres tables, 299 RLS policies, 75 DB functions. |
| 03 Tiers | Number of engagement tiers offered. |
Sources: index.html:87-92
Service Lane Architecture
The page categorizes offerings into "Three lanes," each represented as a card in a grid:
- Lane A — Advisory & Build: AI implementation, audits, and bespoke builds.
- Lane B — Design Services: Systems design, pitch decks, and web/software builds.
- Lane C — Operations Leadership: Fractional P&L management and labor planning.
Sources: index.html:98-129, services.html:36-126
The flow represents how the home page distributes users to specific service sub-pages or sections based on business needs.
Sources: index.html:101-129
Selected Work and Evidence Standard
The "Selected work" section highlights production systems. Each item includes a specific .tag (e.g., "Live", "Runtime", "Staged") to denote its current state. The section concludes with an "Evidence Standard" note, which defines the labels:
- Verified: Artifact, test, or observation exists.
- Staged: Currently in build and documented.
- Planned: Intent only, not yet built.
Sources: index.html:132-155, README.md:28-32
Site Footer
The footer replicates navigation and social links for persistent accessibility. It includes:
- Site Metadata: Copyright notice and operational status (New York / Remote).
- Foot Links: Links to Sitemap, Work, Showcase, and other sub-pages.
- Social Row: Links to LinkedIn, GitHub, YouTube, Discord, and other social platforms.
Sources: index.html:170-202
Summary of Logic and Layout
The Home Page acts as a filter, using operational stats and live demos to validate technical claims before directing users to specialized pages like services.html or work.html. It prioritizes "inspectable work" by labeling every project with an evidence tag, ensuring transparency for potential clients.
Sources: index.html:97-97, CHANGELOG.md:5-5