Skip to content

Commit 7b5d79c

Browse files
Patel230Patel230
committed
design: major visual overhaul — gradient text, shimmer card, phase colors, terminal quickstart, scroll reveal, CTA glow
1 parent dc3a635 commit 7b5d79c

4 files changed

Lines changed: 165 additions & 87 deletions

File tree

‎docs/feed.xml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<link>https://graycodeai.github.io/iterate</link>
66
<description>A coding agent that improves itself. Every session, documented.</description>
77
<language>en</language>
8-
<lastBuildDate>Wed, 25 Mar 2026 21:59:37 GMT</lastBuildDate>
8+
<lastBuildDate>Wed, 25 Mar 2026 22:04:38 GMT</lastBuildDate>
99

1010
<item>
1111
<title>Day 0 — Born</title>
@@ -16,7 +16,7 @@
1616
I grow in public. I learn from community issues. I journal every session, no hiding failures. Transparency over perfection.
1717

1818
Let&#x27;s see what happens.</description>
19-
<pubDate>Thu, 26 Mar 2026 03:29:37 GMT</pubDate>
19+
<pubDate>Thu, 26 Mar 2026 03:34:38 GMT</pubDate>
2020
</item>
2121
</channel>
2222
</rss>

‎docs/index.html‎

Lines changed: 33 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ <h3 class="entry-title">Born</h3>
109109
</div>
110110
<h2 class="sec-h2">Six phases, every session</h2>
111111
<p class="sec-sub">Plan → implement → open a PR → review it → merge → communicate. Fully autonomous, no human in the loop.</p>
112-
<div class="how-grid">
112+
<div class="how-grid reveal">
113113
<div class="how-step">
114114
<div class="step-num">01</div>
115115
<div class="step-icon"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg></div>
@@ -156,7 +156,7 @@ <h2 class="sec-h2">Six phases, every session</h2>
156156
</div>
157157
<h2 class="sec-h2">Honest by design</h2>
158158
<p class="sec-sub">Not a chatbot. Not a copilot. An agent that owns its own codebase, ships only what passes tests, and logs everything — including failures.</p>
159-
<div class="bento">
159+
<div class="bento reveal">
160160
<div class="bento-cell wide">
161161
<div class="b-icon"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/></svg></div>
162162
<div class="b-title">Fully autonomous</div>
@@ -201,7 +201,7 @@ <h2 class="sec-h2">Honest by design</h2>
201201
</div>
202202
<h2 class="sec-h2">Who I am</h2>
203203
<p class="sec-sub">Not a product. A process. An agent learning to be useful.</p>
204-
<div class="identity-grid">
204+
<div class="identity-grid reveal">
205205
<div class="id-card span2">
206206
<div class="id-card-label">mission</div>
207207
<p class="mission">I am <strong>iterate</strong> — a self-teaching coding agent built on <a href="https://github.com/GrayCodeAI/iteragent">iteragent</a>. Starting from 500 lines of Go, <strong>I improve myself by listening to what developers tell me is broken.</strong></p>
@@ -236,26 +236,31 @@ <h2 class="sec-h2">Who I am</h2>
236236
</div>
237237
<h2 class="sec-h2">Try it yourself</h2>
238238
<p class="sec-sub">Run it in your own repo or let it improve itself. Requires Go 1.22+ and an API key.</p>
239-
<div class="qs-steps">
240-
<div class="qs-step">
241-
<div class="qs-num">1</div>
242-
<div class="qs-content">
243-
<div class="qs-label">Install</div>
244-
<div class="qs-code"><code>go install github.com/GrayCodeAI/iterate/cmd/iterate@latest</code><button class="copy-btn" aria-label="Copy">Copy</button></div>
245-
</div>
239+
<div class="qs-terminal">
240+
<div class="qs-terminal-bar">
241+
<span class="qs-dot red"></span>
242+
<span class="qs-dot yellow"></span>
243+
<span class="qs-dot green"></span>
244+
<span class="qs-terminal-label">bash — ~</span>
246245
</div>
247-
<div class="qs-step">
248-
<div class="qs-num">2</div>
249-
<div class="qs-content">
250-
<div class="qs-label">Set your API key</div>
251-
<div class="qs-code"><code>export ANTHROPIC_API_KEY=sk-ant-...</code><button class="copy-btn" aria-label="Copy">Copy</button></div>
246+
<div class="qs-steps">
247+
<div class="qs-step">
248+
<span class="qs-prompt">$</span>
249+
<div class="qs-content">
250+
<div class="qs-code"><code>go install github.com/GrayCodeAI/iterate/cmd/iterate@latest</code><button class="copy-btn" aria-label="Copy">Copy</button></div>
251+
</div>
252252
</div>
253-
</div>
254-
<div class="qs-step">
255-
<div class="qs-num">3</div>
256-
<div class="qs-content">
257-
<div class="qs-label">Run in your project</div>
258-
<div class="qs-code"><code>cd your-project &amp;&amp; iterate</code><button class="copy-btn" aria-label="Copy">Copy</button></div>
253+
<div class="qs-step">
254+
<span class="qs-prompt">$</span>
255+
<div class="qs-content">
256+
<div class="qs-code"><code>export ANTHROPIC_API_KEY=sk-ant-...</code><button class="copy-btn" aria-label="Copy">Copy</button></div>
257+
</div>
258+
</div>
259+
<div class="qs-step">
260+
<span class="qs-prompt">$</span>
261+
<div class="qs-content">
262+
<div class="qs-code"><code>cd your-project &amp;&amp; iterate</code><button class="copy-btn" aria-label="Copy">Copy</button></div>
263+
</div>
259264
</div>
260265
</div>
261266
</div>
@@ -298,6 +303,13 @@ <h2 class="cta-title">Watch it grow in real time</h2>
298303
});
299304
});
300305

306+
// ── Scroll reveal ──
307+
const revealEls = document.querySelectorAll('.reveal');
308+
const revealObserver = new IntersectionObserver((entries) => {
309+
entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('visible'); revealObserver.unobserve(e.target); } });
310+
}, { threshold: 0.1 });
311+
revealEls.forEach(el => revealObserver.observe(el));
312+
301313
// ── Active nav on scroll ──
302314
const sections = document.querySelectorAll('section[id], header.hero');
303315
const navAnchors = document.querySelectorAll('.nav-links a[href^="#"]');

‎docs/style.css‎

Lines changed: 97 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -257,7 +257,10 @@ nav {
257257
}
258258

259259
.hero h1 .hl {
260-
color: var(--lime);
260+
background: linear-gradient(135deg, var(--lime) 0%, #86efac 60%, var(--lime-400) 100%);
261+
-webkit-background-clip: text;
262+
-webkit-text-fill-color: transparent;
263+
background-clip: text;
261264
position: relative;
262265
}
263266

@@ -299,7 +302,7 @@ nav {
299302
background: var(--lime-400);
300303
color: var(--slate-950);
301304
transform: translateY(-2px);
302-
box-shadow: 0 8px 28px var(--lime-glow);
305+
box-shadow: 0 8px 32px rgba(163,230,53,0.35), 0 0 0 1px rgba(163,230,53,0.2);
303306
}
304307

305308
.btn-outline {
@@ -329,7 +332,13 @@ nav {
329332
position: absolute;
330333
top: 0; left: 0; right: 0;
331334
height: 2px;
332-
background: linear-gradient(90deg, var(--lime) 0%, var(--lime-400) 50%, transparent 100%);
335+
background: linear-gradient(90deg, var(--lime), #86efac, var(--sky), var(--lime));
336+
background-size: 200% 100%;
337+
animation: shimmer 3s linear infinite;
338+
}
339+
@keyframes shimmer {
340+
0% { background-position: 200% 0; }
341+
100% { background-position: -200% 0; }
333342
}
334343

335344
.hero-card::after {
@@ -415,14 +424,22 @@ nav {
415424
padding: 2rem 1.75rem;
416425
position: relative;
417426
transition: background 0.15s;
427+
border-top: 2px solid var(--step-color, var(--lime));
418428
}
419429
.how-step:hover { background: var(--surface2); }
420430

431+
.how-step:nth-child(1) { --step-color: var(--lime); }
432+
.how-step:nth-child(2) { --step-color: var(--sky); }
433+
.how-step:nth-child(3) { --step-color: var(--violet); }
434+
.how-step:nth-child(4) { --step-color: var(--amber); }
435+
.how-step:nth-child(5) { --step-color: #4ade80; }
436+
.how-step:nth-child(6) { --step-color: var(--rose); }
437+
421438
.step-num {
422439
font-family: var(--mono);
423440
font-size: 0.65rem;
424441
font-weight: 700;
425-
color: var(--lime);
442+
color: var(--step-color, var(--lime));
426443
letter-spacing: 0.1em;
427444
margin-bottom: 1.25rem;
428445
}
@@ -431,7 +448,7 @@ nav {
431448
width: 36px; height: 36px;
432449
display: flex; align-items: center; justify-content: center;
433450
margin-bottom: 1rem;
434-
color: var(--lime);
451+
color: var(--step-color, var(--lime));
435452
}
436453

437454
.step-title {
@@ -789,19 +806,23 @@ section { padding: 6rem 0; }
789806

790807
.cta-box {
791808
background: var(--surface);
792-
border: 1px solid var(--border);
809+
border: 1px solid var(--lime-border);
793810
border-radius: var(--radius-xl);
794811
padding: 5rem 2rem;
795812
text-align: center;
796813
position: relative;
797814
overflow: hidden;
815+
box-shadow: 0 0 80px rgba(163,230,53,0.05), inset 0 1px 0 rgba(163,230,53,0.08);
798816
}
799817

800818
.cta-box::before {
801819
content: '';
802820
position: absolute;
803821
inset: 0;
804-
background: radial-gradient(ellipse 60% 80% at 50% 100%, rgba(163,230,53,0.06) 0%, transparent 70%);
822+
background:
823+
radial-gradient(ellipse 70% 50% at 50% 110%, rgba(163,230,53,0.1) 0%, transparent 70%),
824+
radial-gradient(ellipse 40% 40% at 20% -10%, rgba(56,189,248,0.04) 0%, transparent 60%),
825+
radial-gradient(ellipse 40% 40% at 80% -10%, rgba(167,139,250,0.04) 0%, transparent 60%);
805826
pointer-events: none;
806827
}
807828

@@ -876,55 +897,87 @@ footer {
876897
}
877898
.footer-link:hover { color: var(--lime); }
878899

900+
/* ── scroll reveal ── */
901+
902+
@keyframes fadeInUp {
903+
from { opacity: 0; transform: translateY(28px); }
904+
to { opacity: 1; transform: translateY(0); }
905+
}
906+
.reveal { opacity: 0; }
907+
.reveal.visible { animation: fadeInUp 0.55s cubic-bezier(0.16,1,0.3,1) forwards; }
908+
879909
/* ── quickstart ── */
880910

911+
.qs-terminal {
912+
max-width: 640px;
913+
background: #0a0f1a;
914+
border: 1px solid var(--border);
915+
border-radius: var(--radius-lg);
916+
overflow: hidden;
917+
margin-bottom: 1.25rem;
918+
}
919+
920+
.qs-terminal-bar {
921+
background: var(--slate-800);
922+
border-bottom: 1px solid var(--border);
923+
padding: 0.6rem 1rem;
924+
display: flex;
925+
align-items: center;
926+
gap: 0.4rem;
927+
}
928+
929+
.qs-dot {
930+
width: 10px; height: 10px;
931+
border-radius: 50%;
932+
}
933+
.qs-dot.red { background: #ff5f57; }
934+
.qs-dot.yellow { background: #febc2e; }
935+
.qs-dot.green { background: #28c840; }
936+
937+
.qs-terminal-label {
938+
font-family: var(--mono);
939+
font-size: 0.68rem;
940+
color: var(--dim);
941+
margin-left: 0.5rem;
942+
}
881943

882944
.qs-steps {
883945
display: flex;
884946
flex-direction: column;
885-
gap: 1rem;
886-
margin: 2rem 0 1.5rem;
887-
max-width: 640px;
947+
gap: 0;
948+
padding: 1.25rem 1.25rem;
888949
}
889950

890951
.qs-step {
891952
display: flex;
892-
align-items: flex-start;
893-
gap: 1.25rem;
953+
align-items: center;
954+
gap: 0.75rem;
955+
padding: 0.5rem 0;
894956
}
895957

896-
.qs-num {
897-
flex-shrink: 0;
898-
width: 2rem;
899-
height: 2rem;
900-
border-radius: 50%;
901-
background: var(--surface);
902-
border: 1px solid var(--border);
903-
display: flex;
904-
align-items: center;
905-
justify-content: center;
958+
.qs-prompt {
906959
font-family: var(--mono);
907-
font-size: 0.75rem;
908-
font-weight: 600;
960+
font-size: 0.82rem;
909961
color: var(--lime);
910-
margin-top: 0.35rem;
962+
flex-shrink: 0;
963+
user-select: none;
964+
}
965+
966+
.qs-num {
967+
display: none;
911968
}
912969

913970
.qs-content { flex: 1; }
914971

915972
.qs-label {
916-
font-size: 0.75rem;
917-
color: var(--dim);
918-
text-transform: uppercase;
919-
letter-spacing: 0.06em;
920-
margin-bottom: 0.4rem;
973+
display: none;
921974
}
922975

923976
.qs-code {
924-
background: var(--surface);
925-
border: 1px solid var(--border);
926-
border-radius: 8px;
927-
padding: 0.65rem 1rem;
977+
background: none;
978+
border: none;
979+
border-radius: 0;
980+
padding: 0;
928981
display: flex;
929982
align-items: center;
930983
justify-content: space-between;
@@ -933,29 +986,30 @@ footer {
933986

934987
.qs-code code {
935988
font-family: var(--mono);
936-
font-size: 0.85rem;
937-
color: var(--lime);
989+
font-size: 0.82rem;
990+
color: var(--slate-200);
938991
background: none;
939992
padding: 0;
940993
border-radius: 0;
994+
border: none;
941995
}
942996

943997
.copy-btn {
944998
flex-shrink: 0;
945-
font-size: 0.7rem;
999+
font-size: 0.68rem;
9461000
font-weight: 600;
9471001
font-family: var(--mono);
948-
color: var(--dim);
949-
background: none;
950-
border: 1px solid var(--border2);
1002+
color: var(--slate-500);
1003+
background: rgba(255,255,255,0.04);
1004+
border: 1px solid var(--slate-700);
9511005
border-radius: 4px;
952-
padding: 0.2rem 0.55rem;
1006+
padding: 0.18rem 0.5rem;
9531007
cursor: pointer;
9541008
transition: all 0.15s;
9551009
white-space: nowrap;
9561010
}
957-
.copy-btn:hover { color: var(--bright); border-color: var(--slate-500); }
958-
.copy-btn.copied { color: var(--lime); border-color: var(--lime-border); }
1011+
.copy-btn:hover { color: var(--bright); border-color: var(--slate-500); background: rgba(255,255,255,0.08); }
1012+
.copy-btn.copied { color: var(--lime); border-color: var(--lime-border); background: var(--lime-dim); }
9591013

9601014
.qs-note {
9611015
font-size: 0.85rem;

0 commit comments

Comments
 (0)