Architecture
Page structure convention
Every page on this site follows the same structural rule without exception:
| Concern | Location |
|---|---|
| Global styles | styles.css — linked from every page |
| Page-specific styles | <style> block in <head> of each page |
| JavaScript interactions | <script> block before </body> of each page |
| No per-page CSS files | All page-specific overrides stay inline |
| No external JS libraries | All interactions are vanilla JavaScript |
When editing any page, follow this convention. Do not move styles to
styles.css unless they apply to every page on the site.
Repository structure
douglasebhoman.github.io/
├── assets/
│ └── images/
│ ├── git-series-card.svg
│ ├── openweather-card.svg
│ ├── systems-over-sentences-card.png
│ ├── personal-website-setup-guide.png
│ ├── site-docs-card.png
│ ├── mkdocs-for-technical-writers-card.png
│ ├── writing-for-developers-cover.png
│ ├── anatomy-of-great-documentation-cover.png
│ ├── douglas.jpg
│ ├── headshot-v3.jpeg
│ └── about-image.png
├── blog/
│ ├── index.html
│ └── posts/
│ ├── from-writing-to-documentation-systems/
│ │ └── index.html
│ ├── your-documentation-is-a-bakery/
│ │ └── index.html
│ ├── how-product-teams-actually-handle-documentation/
│ │ └── index.html
│ ├── writing-for-developers-vs-non-technical-users/
│ │ └── index.html
│ ├── anatomy-of-great-documentation/
│ │ └── index.html
│ └── introduction-to-structured-writing/
│ └── index.html
├── work/
│ └── index.html
├── services/
│ └── index.html
├── audit/
│ └── index.html
├── site-docs/ ← Separate MkDocs build. See site-docs/docs/
│ ├── docs/ Source Markdown files for this documentation
│ ├── mkdocs.yml MkDocs configuration
│ └── (built output) Generated by MkDocs, served at /site-docs/
├── 404.html
├── CNAME
├── index.html
├── styles.css
├── sitemap.xml
└── robots.txt
Key files
index.html
The homepage. Contains all homepage sections inline: hero, gold strip, impact metrics, about, health check widget, selected work, writing samples, documentation audit, process steps, social proof, final CTA, and footer. The most JavaScript-heavy page on the site. See JavaScript for full interaction documentation.
styles.css
The global stylesheet shared across every page. Contains brand tokens,
layout rules, navigation, footer, and shared component styles. The rule
is simple: if a style applies to more than one page, it belongs here.
If it applies to one page only, it belongs in that page's <style> block.
work/index.html
The work page at /work/. Displays the full portfolio grid. Each card
follows the same structure: banner image, work number, tags, title,
before/after block, outcome line, and a read link. Adding a new card
means duplicating an existing card block and updating the content.
services/index.html
The services page at /services/. Documents the Documentation Audit
service in full: deliverables, pricing, FAQ, and booking CTA. Follows
the standard page structure convention.
audit/index.html
The audit page at /audit/. A standalone booking page linked from the
nav and CTA sections. Contains the Calendly embed and supporting copy.
Follows the standard page structure convention.
blog/index.html
The blog index at /blog/. Lists all published posts in the Systems Over
Sentences series with a featured article strip, article grid, and
newsletter embed. Update this file manually when publishing a new post.
blog/posts/[slug]/index.html
Each blog post lives in its own folder. The folder name is the URL slug. All posts follow the same HTML template. See Content Guide for the full post template and step-by-step publishing instructions.
CNAME
Declares douglasebhoman.com as the custom domain for GitHub Pages.
Must match the DNS CNAME record in Cloudflare. Do not edit this file
unless the domain is changing.
sitemap.xml
XML sitemap for search engine indexing. Update manually when adding a
new page or publishing a new blog post. Add the new URL with the
correct <lastmod> date.
robots.txt
Crawler directives. Currently allows all crawlers. No changes needed unless specific pages need to be excluded from indexing.
Stylesheets
| Scope | Location |
|---|---|
| Global styles | styles.css |
| Page-specific styles | <style> block in <head> of each page |
Design tokens
All tokens are CSS custom properties defined at :root in styles.css.
Reference these tokens in all new CSS. Do not use raw hex values.
Colour
| Token | Value | Usage |
|---|---|---|
--navy |
#18222C |
Primary dark background |
--navy-mid |
#1E2D3D |
Secondary dark surface |
--navy-light |
#243044 |
Tertiary dark surface |
--cream |
#F9F7F4 |
Primary light background |
--gold |
#B8962E |
Primary accent — CTAs, labels, borders |
--gold-light |
#D4B060 |
Hover and highlight variant |
--text-dark |
#111827 |
Primary body text on light backgrounds |
--text-muted |
#9CA3AF |
De-emphasised text |
--green |
#4ADE80 |
Availability indicator |
Typography
| Token | Value | Usage |
|---|---|---|
--serif |
'Fraunces', Georgia, serif |
Headlines, pull quotes, blog body |
--sans |
'DM Sans', system-ui, sans-serif |
Body text, UI copy |
--mono |
'DM Mono', monospace |
Labels, tags, metadata, code |
Layout
| Token | Value | Purpose |
|---|---|---|
--container |
960px |
Maximum content width |
--pad |
clamp(24px, 5vw, 48px) |
Responsive horizontal padding |
--fast |
0.15s ease |
Quick transitions — hover states |
--base |
0.25s ease |
Standard transitions — cards, panels |
Responsive breakpoints
| Breakpoint | Width | What changes |
|---|---|---|
| Desktop | Above 768px |
Full layout — two-column sections, side-by-side footer grid, inline nav links |
| Mobile | 768px and below |
Nav collapses to hamburger menu, footer grid stacks to single column, hero stats switch to 2×2 grid, about section drops to single column |
| Small mobile | 480px and below |
Reduced padding, smaller type scale, single-column contact grid |