AI-Centric Website Rewrite — Design Spec

AI-Centric Website Rewrite — Design Spec

Overview

Rewrite jamesorourke.tech from a single-page startup consultant portfolio to a multi-page, AI-centric professional site. The site positions James as a senior AI-augmented engineer whose output matches a small team — making senior engineering accessible to startups that couldn’t previously afford it.

Target Audience

Startups who need senior engineering (infrastructure, DevOps, AI, architecture) but can’t justify full-time headcount. The pitch: one AI-augmented senior consultant delivers what used to require a team.

Core Messaging

  • Headline: “Your startup deserves senior engineering.”
  • Subtext: “In the age of AI-powered development, a single expert consultant can deliver what used to require a team. I bring 20 years of hands-on experience in infrastructure, architecture, and AI — now amplified by the tools that are reshaping our industry.”
  • Tone: Confident authority. Direct, bold, no hedging.

Visual Direction: Dark & Warm

Colors

| Token | Value | Usage | |——-|——-|——-| | --bg | #0d1117 | Page background | | --surface | #161b22 | Cards, nav, lifted elements | | --border | #30363d | Subtle dividers | | --text-primary | #f0f0f0 | Headings, body text | | --text-secondary | #8b949e | Subtext, descriptions | | --accent | #e98a15 | CTAs, highlights, labels | | --accent-hover | #f5a030 | Hover states |

Typography

  • Headings: System font stack (-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif), weight 700/800
  • Body: Same stack, weight 400
  • Monospace labels: System monospace (ui-monospace, "SF Mono", monospace) for category labels (e.g., “AI-AUGMENTED ENGINEERING”)
  • Scale: Hero ~3.5rem, section headings ~2rem, body ~1rem
  • Font loading: System fonts only — no external font requests. Fast, private, consistent.

Style Rules

  • Generous whitespace
  • No animations beyond subtle hover transitions
  • No stock images — text-driven design
  • Headshot on About page only
  • SVG icons for services (reuse/adapt existing where possible)

Site Architecture

Pages

| Route | Layout | Purpose | |——-|——–|———| | / | home.html | Hero + services preview + CTA | | /about | page.html | Story, experience, AI approach | | /services | page.html | Three service categories, detailed | | /portfolio | page.html | Case studies grid | | /portfolio/cicd | case-study.html | Existing CI/CD case study | | /portfolio/data-pipeline | case-study.html | Existing data pipeline case study | | /portfolio/analytics | case-study.html | Existing analytics case study | | /contact | page.html | Email, GitHub, LinkedIn |

Layout Hierarchy

_layouts/
  default.html      → Base (head, nav, footer, scripts)
  home.html         → Homepage with hero (extends default)
  page.html         → Standard content page (extends default)
  case-study.html   → Portfolio detail pages (extends default)

_includes/
  nav.html          → Persistent top nav across all pages
  footer.html       → Site footer with contact links
  hero.html         → Homepage hero section
  services-preview.html → Homepage services summary cards

Technology Decisions

  • Drop: Bootstrap 3, jQuery, WOW.js
  • Keep: Jekyll 4, SCSS, jekyll-sitemap
  • Add: Modern CSS (grid, flexbox, custom properties), no JS framework needed
  • Fonts: System font stack only (no external requests)

Page Content

Homepage (/)

  1. Hero section
    • Label: “JAMES O’ROURKE” (monospace, accent color)
    • Headline: “Your startup deserves senior engineering.”
    • Subtext: AI-powered delivery pitch (see Core Messaging)
    • CTA button: “SEE HOW I WORK” → links to /services
  2. Services preview
    • Three cards linking to /services:
      • Infrastructure & DevOps
      • AI-Powered Development
      • System Architecture & Design
    • One-line description per card
  3. Credibility line
    • “20 years building software for startups in Australia and Silicon Valley”
  4. Final CTA
    • “Let’s talk about your project” → links to Contact

About (/about)

  • Professional story: 20 years, startups, Australia + Silicon Valley
  • The AI-augmented approach: how you work now, why it changes the economics
  • The thesis: agentive development makes expert-level work accessible to startups
  • Headshot photo

Services (/services)

Three categories, each with a short paragraph and bullet points:

  1. Infrastructure & DevOps
    • CI/CD pipeline design and implementation
    • Infrastructure as Code (Terraform, AWS)
    • Cloud architecture and platform engineering
    • Developer productivity and automation
  2. AI-Powered Development
    • AI agent development and integration
    • LLM integration into existing systems
    • AI-augmented development workflows
    • RAG pipelines and knowledge systems
  3. System Architecture & Design
    • System design and architecture review
    • Proof of concept and tracer bullet builds
    • New technology appraisal and selection
    • Scaling strategy and technical roadmaps

Portfolio (/portfolio)

  • Grid layout showing case studies
  • Each card: title, category tag, brief description, tech icons
  • Links to individual case study pages
  • Existing three projects retained as-is:
    • CI/CD Journey (Qwilr) — DevOps
    • Emmi Data Pipeline — Infrastructure as Code
    • Real-time Analytics (Qwilr) — Architecture
  • Structure supports adding future AI portfolio pieces as markdown files

Contact (/contact)

  • Email: james@cloudadvantage.com.au
  • GitHub: jorourke
  • LinkedIn: jamesworourke
  • Simple CTA messaging

Persistent top nav on all pages:

  • Logo/name (left) → links to home
  • Links (right): About, Services, Portfolio, Contact

Mobile: hamburger menu using a small vanilla JS toggle (no framework needed — ~10 lines).

Active page is highlighted in the nav via a Jekyll page.url check adding an .active class.

Case Study Page Structure

Each case study page uses case-study.html layout with this front matter:

---
layout: case-study
title: "CI/CD Journey"
category: "DevOps"
description: "Transformed build pipeline from minimal to shipping multiple times per day"
technologies: [Buildkite, Docker, AWS, Cypress, Jest]
client: "Qwilr"
---

Page sections (rendered from markdown body + layout):

  • Header with title, category tag, and client name
  • Technology tags row
  • Body content (existing case study prose, migrated from current includes)

Portfolio Card Icons

Tech icons on portfolio cards use the existing SVG files in /img/ (buildkite.svg, docker.svg, terraform.svg, etc.). Rendered as inline <img> tags, ~24px height, in a row on each card.

Simple footer include containing:

  • Copyright line: “© 2026 James O’Rourke”
  • Links: Email, GitHub, LinkedIn (same as contact page)
  • No tagline or extra content

Credibility Line

Rendered as a centered text block between the services preview and final CTA on the homepage. Styled as --text-secondary color, slightly larger than body text (~1.1rem).

Responsive Breakpoints

Breakpoint Behavior
>= 768px Full nav, 3-column services/portfolio grid
< 768px Hamburger nav, single-column layout, stacked cards

Two breakpoints only. No tablet-specific layout — the single-column mobile layout works fine up to 768px.

SCSS Structure

_sass/
  _variables.scss    → CSS custom properties, breakpoints
  _base.scss         → Reset, body, typography defaults
  _nav.scss          → Navigation and hamburger
  _hero.scss         → Homepage hero section
  _cards.scss        → Service and portfolio cards
  _page.scss         → Standard page content styling
  _case-study.scss   → Case study detail page
  _footer.scss       → Footer
  main.scss          → Imports all partials

What’s NOT in Scope

  • Blog/content section (structure supports future addition)
  • AI portfolio pieces (placeholder for future)
  • Analytics/tracking integration
  • Contact form (just links for now)
  • Custom domain or hosting changes