From dfec30b78bf4391eb0757e9a0dc3a5d44c42257e Mon Sep 17 00:00:00 2001 From: "Mark A. Herschberg" <275769+mherschberg@users.noreply.github.com> Date: Fri, 10 Jul 2026 00:59:11 -0400 Subject: [PATCH] Update site video walkthrough --- brand/site/index.html | 43 +++++++++++++++++++++++++++++++++++++++++-- docs/index.html | 43 +++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 82 insertions(+), 4 deletions(-) diff --git a/brand/site/index.html b/brand/site/index.html index 44ed653..1d217a0 100644 --- a/brand/site/index.html +++ b/brand/site/index.html @@ -66,6 +66,7 @@ .hero h1{font-size:66px;margin:18px 0 0;} .hero .lead{font-size:24px;color:#4a4036;margin:22px 0 30px;max-width:580px;} .hero .cta{display:flex;gap:14px;flex-wrap:wrap;} + .hero .cta .btn{width:252px;text-align:center;} .hero .sub{margin-top:18px;font-size:15px;color:var(--mortar);font-family:var(--mono);} /* hero visual: the actual social card */ .herocard-img{width:100%;height:auto;border-radius:16px;display:block;box-shadow:0 24px 60px -24px rgba(42,37,33,.5);} @@ -102,6 +103,17 @@ .artifact-note{margin-top:28px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;color:var(--mortar);font-size:18px;} .artifact-note p{margin:0;max-width:640px;} + /* videos */ + .videos{background:var(--paper);} + .video-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;} + .video-card{background:var(--lime);border:1px solid #e8ddc8;border-radius:8px;padding:18px;min-width:0;display:flex;flex-direction:column;} + .video-card .num{font-family:var(--mono);color:var(--ochreD);font-size:13px;margin-bottom:10px;} + .video-card h3{font-size:18px;margin-bottom:8px;} + .video-card p{color:var(--mortar);font-size:16px;line-height:1.48;margin:0 0 12px;} + .video-card a{font-size:16px;font-weight:600;margin-top:auto;} + .video-note{margin-top:24px;color:var(--mortar);font-size:18px;max-width:760px;} + .video-note p{margin:0;} + /* sessions */ .sessions{background:var(--paper);} .session-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:start;} @@ -153,7 +165,7 @@ @media(max-width:860px){ .hero-grid{grid-template-columns:1fr;gap:40px;} .hero h1{font-size:48px;} - .cards3,.artifact-grid,.flow,.session-grid,.session-list,.ops-grid,.fit-grid{grid-template-columns:1fr;} + .cards3,.artifact-grid,.flow,.session-grid,.session-list,.ops-grid,.fit-grid,.video-grid{grid-template-columns:1fr;} .session-list{grid-auto-flow:row;grid-template-rows:none;} h2{font-size:31px;} } @@ -168,6 +180,7 @@ Principles Process Project memory + Videos Sessions Operations Quickstart @@ -187,6 +200,7 @@

From idea to blueprint to built.

Use this template View on GitHub + Watch the walkthrough
Plain Markdown + a Bash setup wizard · BSD-3-Clause
@@ -200,7 +214,7 @@

From idea to blueprint to built.

How it works

Three principles, all the way through.

-

The architecture you lay down at the start is carried through every phase, step, and check-in.

+

Vibe-coded projects often start fast, then decay when nobody can explain the architecture, tradeoffs, or next safe change. Throughstone makes that project memory explicit from the start.

01

Think before you code.

Start with architecture docs and decision records, then code. You begin from a plan you can read and question.

@@ -266,6 +280,31 @@

Periodic reconciliation

+
+
+
+
Video walkthrough
+

Watch Throughstone turn a sample app idea into project structure.

+

The videos follow AlignedDating, a fictional dating app built with Throughstone. They work as a launch sequence or a start-here path for people evaluating the method.

+
+
+
01

Welcome to Throughstone

A general overview of what Throughstone does and its benefits.

Watch video 1
+
02

Initial Setup

How to install Throughstone to start your project.

Watch video 2
+
03

Business Overview Walkthrough

An overview of the first interactive session, describing your project.

Watch video 3
+
04

Moving to the Next Sessions

Shows how the system guides you automatically so you can focus on your product, not the process.

Watch video 4
+
05

Conditional Sessions

An overview of how optional planning sessions work based on your needs.

Watch video 5
+
06

Scaling Session Example

Deep dive into an example session on scaling.

Watch video 6
+
07

Observability Session Example

Deep dive into an example session on observability.

Watch video 7
+
08

Glossary Session Example

The system glossary, what it is, and how it helps your project.

Watch video 8
+
09

Post Architecture Session File Example

Shows what files get created by the architecture sessions.

Watch video 9
+
10

Creating Steps

Shows how the development work gets broken down into smaller feature sets.

Watch video 10
+
+
+

For the full ordered list, including every AlignedDating session link, use the README video section.

+
+
+
+
diff --git a/docs/index.html b/docs/index.html index 44ed653..1d217a0 100644 --- a/docs/index.html +++ b/docs/index.html @@ -66,6 +66,7 @@ .hero h1{font-size:66px;margin:18px 0 0;} .hero .lead{font-size:24px;color:#4a4036;margin:22px 0 30px;max-width:580px;} .hero .cta{display:flex;gap:14px;flex-wrap:wrap;} + .hero .cta .btn{width:252px;text-align:center;} .hero .sub{margin-top:18px;font-size:15px;color:var(--mortar);font-family:var(--mono);} /* hero visual: the actual social card */ .herocard-img{width:100%;height:auto;border-radius:16px;display:block;box-shadow:0 24px 60px -24px rgba(42,37,33,.5);} @@ -102,6 +103,17 @@ .artifact-note{margin-top:28px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;color:var(--mortar);font-size:18px;} .artifact-note p{margin:0;max-width:640px;} + /* videos */ + .videos{background:var(--paper);} + .video-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;} + .video-card{background:var(--lime);border:1px solid #e8ddc8;border-radius:8px;padding:18px;min-width:0;display:flex;flex-direction:column;} + .video-card .num{font-family:var(--mono);color:var(--ochreD);font-size:13px;margin-bottom:10px;} + .video-card h3{font-size:18px;margin-bottom:8px;} + .video-card p{color:var(--mortar);font-size:16px;line-height:1.48;margin:0 0 12px;} + .video-card a{font-size:16px;font-weight:600;margin-top:auto;} + .video-note{margin-top:24px;color:var(--mortar);font-size:18px;max-width:760px;} + .video-note p{margin:0;} + /* sessions */ .sessions{background:var(--paper);} .session-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:start;} @@ -153,7 +165,7 @@ @media(max-width:860px){ .hero-grid{grid-template-columns:1fr;gap:40px;} .hero h1{font-size:48px;} - .cards3,.artifact-grid,.flow,.session-grid,.session-list,.ops-grid,.fit-grid{grid-template-columns:1fr;} + .cards3,.artifact-grid,.flow,.session-grid,.session-list,.ops-grid,.fit-grid,.video-grid{grid-template-columns:1fr;} .session-list{grid-auto-flow:row;grid-template-rows:none;} h2{font-size:31px;} } @@ -168,6 +180,7 @@ Principles Process Project memory + Videos Sessions Operations Quickstart @@ -187,6 +200,7 @@

From idea to blueprint to built.

Use this template View on GitHub + Watch the walkthrough
Plain Markdown + a Bash setup wizard · BSD-3-Clause
@@ -200,7 +214,7 @@

From idea to blueprint to built.

How it works

Three principles, all the way through.

-

The architecture you lay down at the start is carried through every phase, step, and check-in.

+

Vibe-coded projects often start fast, then decay when nobody can explain the architecture, tradeoffs, or next safe change. Throughstone makes that project memory explicit from the start.

01

Think before you code.

Start with architecture docs and decision records, then code. You begin from a plan you can read and question.

@@ -266,6 +280,31 @@

Periodic reconciliation

+
+
+
+
Video walkthrough
+

Watch Throughstone turn a sample app idea into project structure.

+

The videos follow AlignedDating, a fictional dating app built with Throughstone. They work as a launch sequence or a start-here path for people evaluating the method.

+
+
+
01

Welcome to Throughstone

A general overview of what Throughstone does and its benefits.

Watch video 1
+
02

Initial Setup

How to install Throughstone to start your project.

Watch video 2
+
03

Business Overview Walkthrough

An overview of the first interactive session, describing your project.

Watch video 3
+
04

Moving to the Next Sessions

Shows how the system guides you automatically so you can focus on your product, not the process.

Watch video 4
+
05

Conditional Sessions

An overview of how optional planning sessions work based on your needs.

Watch video 5
+
06

Scaling Session Example

Deep dive into an example session on scaling.

Watch video 6
+
07

Observability Session Example

Deep dive into an example session on observability.

Watch video 7
+
08

Glossary Session Example

The system glossary, what it is, and how it helps your project.

Watch video 8
+
09

Post Architecture Session File Example

Shows what files get created by the architecture sessions.

Watch video 9
+
10

Creating Steps

Shows how the development work gets broken down into smaller feature sets.

Watch video 10
+
+
+

For the full ordered list, including every AlignedDating session link, use the README video section.

+
+
+
+