Skip to content

Commit a7e7ec5

Browse files
Siddhant-K-codeona-agent
Siddhant-K-code
and
ona-agent
committed
Revert landing page to original layout, keep author headshot
Co-authored-by: Ona <no-reply@ona.com>
1 parent 491bc2b commit a7e7ec5

1 file changed

Lines changed: 66 additions & 66 deletions

File tree

‎src/pages/index.astro‎

Lines changed: 66 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -24,91 +24,94 @@ const totalChapters = allChapters.filter((c) => c.chapter).length;
2424

2525
<main class="pt-14">
2626
<!-- Hero -->
27-
<section class="relative overflow-hidden">
28-
<div class="max-w-2xl mx-auto px-6 pt-16 pb-20 lg:pt-24 lg:pb-28">
29-
<p class="font-[var(--font-mono)] text-[11px] tracking-[0.2em] uppercase text-[var(--text-tertiary)] mb-6">
30-
Open-source book
31-
</p>
32-
<h1 class="text-[2.5rem] lg:text-[3.25rem] font-semibold tracking-[-0.035em] leading-[1.08] mb-5 text-[var(--text-primary)]">
27+
<section class="border-b border-[var(--border-subtle)]">
28+
<div class="max-w-3xl mx-auto px-6 py-20 lg:py-28">
29+
<span class="font-[var(--font-mono)] text-xs tracking-widest uppercase text-[var(--text-tertiary)] mb-4 block">
30+
/Book
31+
</span>
32+
<h1 class="text-4xl lg:text-5xl font-semibold tracking-tight leading-[1.1] mb-4">
3333
The Agentic<br />Engineering Guide
3434
</h1>
35-
<p class="text-base text-[var(--text-secondary)] leading-[1.7] max-w-lg mb-8">
36-
Concepts, workflows, and team practices for AI agent infrastructure. From context engineering to cost control, from authorization to adoption playbooks.
35+
<p class="text-lg text-[var(--text-secondary)] leading-relaxed max-w-xl mb-3">
36+
Concepts, workflows, and team practices for AI agent infrastructure.
3737
</p>
38-
<div class="flex items-center gap-3 text-[13px] text-[var(--text-tertiary)] mb-10 font-[var(--font-mono)]">
39-
<span>{totalChapters} chapters</span>
40-
<span class="text-[var(--border)]">·</span>
41-
<span>10 parts</span>
42-
<span class="text-[var(--border)]">·</span>
43-
<span>Siddhant Khare</span>
44-
</div>
45-
<div class="flex items-center gap-3">
38+
<p class="text-sm text-[var(--text-tertiary)] mb-8">
39+
Siddhant Khare · February 2026 · 10 Parts · {totalChapters} Chapters
40+
</p>
41+
<div class="flex flex-wrap gap-3">
4642
<a
4743
href={`${base}/preface/`}
48-
class="inline-flex items-center gap-2 h-9 px-4 text-[13px] font-medium bg-[var(--text-primary)] text-[var(--bg-primary)] rounded-md hover:opacity-90 transition-opacity"
44+
class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-medium bg-[var(--text-primary)] text-[var(--bg-primary)] rounded-md hover:opacity-90 transition-opacity"
4945
>
50-
Start reading
51-
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
46+
Start Reading →
5247
</a>
5348
<a
5449
href="https://github.com/Siddhant-K-code/agentic-engineering-guide"
5550
target="_blank"
5651
rel="noopener noreferrer"
57-
class="inline-flex items-center gap-2 h-9 px-4 text-[13px] font-medium border border-[var(--border)] text-[var(--text-secondary)] rounded-md hover:border-[var(--text-tertiary)] hover:text-[var(--text-primary)] transition-colors"
52+
class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-medium border border-[var(--border)] rounded-md hover:border-[var(--text-tertiary)] transition-colors"
5853
>
59-
<svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
60-
Source
54+
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
55+
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
56+
</svg>
57+
GitHub
6158
</a>
6259
</div>
6360
</div>
64-
<!-- Subtle decorative element -->
65-
<div class="absolute top-0 right-0 w-[400px] h-[400px] opacity-[0.03] pointer-events-none" aria-hidden="true">
66-
<svg viewBox="0 0 400 400" fill="none" stroke="var(--text-primary)" stroke-width="0.5">
67-
<circle cx="200" cy="200" r="60" /><circle cx="200" cy="200" r="120" /><circle cx="200" cy="200" r="180" />
68-
<line x1="200" y1="20" x2="200" y2="380" /><line x1="20" y1="200" x2="380" y2="200" />
69-
</svg>
70-
</div>
7161
</section>
7262

73-
<div class="h-px bg-[var(--border-subtle)]" />
63+
<!-- About -->
64+
<section class="border-b border-[var(--border-subtle)]">
65+
<div class="max-w-3xl mx-auto px-6 py-14">
66+
<span class="font-[var(--font-mono)] text-xs tracking-widest uppercase text-[var(--text-tertiary)] mb-4 block">
67+
/About
68+
</span>
69+
<p class="text-[var(--text-secondary)] leading-relaxed max-w-xl">
70+
This book is for engineering leaders navigating the shift to AI-assisted development. It covers the decisions, trade-offs, and organizational patterns that determine whether AI agents become a force multiplier or a source of burnout. From context engineering to cost control, from authorization to adoption playbooks.
71+
</p>
72+
</div>
73+
</section>
7474

7575
<!-- Table of Contents -->
76-
<section>
77-
<div class="max-w-2xl mx-auto px-6 py-16">
78-
<p class="font-[var(--font-mono)] text-[11px] tracking-[0.2em] uppercase text-[var(--text-tertiary)] mb-8">
79-
Contents
80-
</p>
81-
<div class="space-y-10">
76+
<section class="border-b border-[var(--border-subtle)]">
77+
<div class="max-w-3xl mx-auto px-6 py-14">
78+
<span class="font-[var(--font-mono)] text-xs tracking-widest uppercase text-[var(--text-tertiary)] mb-6 block">
79+
/Table of Contents
80+
</span>
81+
<div class="space-y-8">
8282
{groups.map((group) => (
8383
<div>
84-
{group.part > 0 && group.part < 99 && (
85-
<div class="flex items-baseline gap-3 mb-3">
86-
<span class="font-[var(--font-mono)] text-[11px] tracking-wider text-[var(--text-tertiary)] tabular-nums">
87-
{String(group.part).padStart(2, "0")}
84+
{group.part > 0 && group.part < 99 ? (
85+
<div class="mb-3">
86+
<span class="font-[var(--font-mono)] text-xs tracking-wider text-[var(--text-tertiary)]">
87+
Part {group.part}
8888
</span>
89-
<span class="text-[13px] font-medium text-[var(--text-primary)]">
90-
{group.title}
89+
<span class="text-sm font-medium text-[var(--text-secondary)] ml-2">
90+
/ {group.title}
9191
</span>
9292
</div>
93-
)}
94-
{group.part === 99 && (
95-
<div class="mb-3 pt-6">
96-
<span class="text-[13px] font-medium text-[var(--text-tertiary)]">
93+
) : group.part === 99 ? (
94+
<div class="mb-3 pt-4 border-t border-[var(--border-subtle)]">
95+
<span class="font-[var(--font-mono)] text-xs tracking-wider text-[var(--text-tertiary)]">
9796
{group.title}
9897
</span>
9998
</div>
100-
)}
101-
<ul class="space-y-0.5">
99+
) : null}
100+
<ul class="space-y-1">
102101
{group.chapters.map((ch) => (
103102
<li>
104103
<a
105104
href={`${base}/${ch.slug}/`}
106-
class="group flex items-baseline gap-3 py-[5px] text-[14px] text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition-colors"
105+
class="flex items-start gap-3 py-1 text-sm text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition-colors"
107106
>
108-
<span class="font-[var(--font-mono)] text-[11px] text-[var(--text-tertiary)] tabular-nums w-5 shrink-0 group-hover:text-[var(--text-secondary)] transition-colors">
109-
{ch.chapter ? String(ch.chapter).padStart(2, "0") : ""}
110-
</span>
111-
<span class="group-hover:translate-x-0.5 transition-transform duration-150">{ch.title}</span>
107+
{ch.chapter ? (
108+
<span class="font-[var(--font-mono)] text-xs text-[var(--text-tertiary)] mt-0.5 w-5 shrink-0">
109+
{String(ch.chapter).padStart(2, "0")}
110+
</span>
111+
) : (
112+
<span class="w-5 shrink-0" />
113+
)}
114+
<span>{ch.title}</span>
112115
</a>
113116
</li>
114117
))}
@@ -119,28 +122,25 @@ const totalChapters = allChapters.filter((c) => c.chapter).length;
119122
</div>
120123
</section>
121124

122-
<div class="h-px bg-[var(--border-subtle)]" />
123-
124125
<!-- Author -->
125126
<section>
126-
<div class="max-w-2xl mx-auto px-6 py-16">
127-
<p class="font-[var(--font-mono)] text-[11px] tracking-[0.2em] uppercase text-[var(--text-tertiary)] mb-5">
128-
Author
129-
</p>
127+
<div class="max-w-3xl mx-auto px-6 py-14">
128+
<span class="font-[var(--font-mono)] text-xs tracking-widest uppercase text-[var(--text-tertiary)] mb-4 block">
129+
/Author
130+
</span>
130131
<div class="flex items-start gap-4">
131132
<img
132133
src={`${base}/images/author.webp`}
133134
alt="Siddhant Khare"
134-
width="40"
135-
height="40"
136-
class="w-10 h-10 rounded-full object-cover shrink-0"
135+
width="48"
136+
height="48"
137+
class="w-12 h-12 rounded-full object-cover shrink-0"
137138
/>
138139
<div>
139-
<p class="text-[15px] font-medium text-[var(--text-primary)] mb-1">Siddhant Khare</p>
140-
<p class="text-[13px] text-[var(--text-tertiary)] leading-relaxed mb-3">
141-
Software Engineer at Ona. OpenFGA Maintainer (CNCF).
140+
<p class="text-[var(--text-secondary)] leading-relaxed max-w-xl mb-3">
141+
<strong class="text-[var(--text-primary)]">Siddhant Khare</strong> is a software engineer at Ona and a maintainer of OpenFGA (CNCF Incubating). His essay "AI fatigue is real and nobody talks about it" reached #1 on Hacker News and was covered by Business Insider, Futurism, and NDTV.
142142
</p>
143-
<div class="flex gap-4 text-[12px] text-[var(--text-tertiary)]">
143+
<div class="flex gap-4 text-sm text-[var(--text-tertiary)]">
144144
<a href="https://twitter.com/Siddhant_K_code" target="_blank" rel="noopener noreferrer" class="hover:text-[var(--text-primary)] transition-colors">Twitter</a>
145145
<a href="https://github.com/Siddhant-K-code" target="_blank" rel="noopener noreferrer" class="hover:text-[var(--text-primary)] transition-colors">GitHub</a>
146146
<a href="https://siddhantkhare.com" target="_blank" rel="noopener noreferrer" class="hover:text-[var(--text-primary)] transition-colors">Website</a>

0 commit comments

Comments
 (0)