Skip to content

Commit 61a91f9

Browse files
UtpalJayNadigerclaude
UtpalJayNadiger
and
claude
committed
Site prototypes: digger, opentaco, opencomputer
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
0 parents  commit 61a91f9

File tree

5 files changed

+1137
-0
lines changed

5 files changed

+1137
-0
lines changed

‎digger/index.html‎

Lines changed: 360 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,360 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Digger — Infrastructure you forget about</title>
7+
<link rel="preconnect" href="https://fonts.googleapis.com">
8+
<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet">
9+
<style>
10+
* {
11+
margin: 0;
12+
padding: 0;
13+
box-sizing: border-box;
14+
}
15+
16+
body {
17+
background: #fff;
18+
color: #111;
19+
font-family: 'Inter', -apple-system, sans-serif;
20+
-webkit-font-smoothing: antialiased;
21+
-moz-osx-font-smoothing: grayscale;
22+
}
23+
24+
::selection {
25+
background: #111;
26+
color: #fff;
27+
}
28+
29+
/* ── NAV ── */
30+
nav {
31+
max-width: 1080px;
32+
margin: 0 auto;
33+
padding: 28px 40px;
34+
display: flex;
35+
justify-content: space-between;
36+
align-items: center;
37+
}
38+
39+
.logo {
40+
font-family: 'Geist Mono', monospace;
41+
font-size: 15px;
42+
font-weight: 500;
43+
color: #111;
44+
}
45+
46+
.nav-links {
47+
display: flex;
48+
gap: 28px;
49+
}
50+
51+
.nav-link {
52+
font-family: 'Inter', sans-serif;
53+
font-size: 14px;
54+
color: #999;
55+
text-decoration: none;
56+
transition: color 0.15s;
57+
}
58+
59+
.nav-link:hover {
60+
color: #111;
61+
}
62+
63+
/* ── HERO ── */
64+
.hero {
65+
max-width: 1080px;
66+
margin: 0 auto;
67+
padding: 120px 40px 100px;
68+
text-align: center;
69+
}
70+
71+
.hero-name {
72+
font-family: 'Geist Mono', monospace;
73+
font-size: 13px;
74+
font-weight: 500;
75+
letter-spacing: 3px;
76+
text-transform: uppercase;
77+
color: #bbb;
78+
margin-bottom: 32px;
79+
}
80+
81+
.hero h1 {
82+
font-family: 'Instrument Serif', serif;
83+
font-size: clamp(40px, 7vw, 80px);
84+
line-height: 1.1;
85+
letter-spacing: -2px;
86+
max-width: 700px;
87+
margin: 0 auto 36px;
88+
}
89+
90+
.hero-sub {
91+
font-family: 'Inter', sans-serif;
92+
font-size: 18px;
93+
line-height: 1.7;
94+
color: #666;
95+
max-width: 480px;
96+
margin: 0 auto;
97+
}
98+
99+
/* ── PROJECTS ── */
100+
.projects-section {
101+
max-width: 1080px;
102+
margin: 0 auto;
103+
padding: 0 40px 120px;
104+
}
105+
106+
.projects-label {
107+
font-family: 'Geist Mono', monospace;
108+
font-size: 12px;
109+
letter-spacing: 2px;
110+
text-transform: uppercase;
111+
color: #bbb;
112+
margin-bottom: 32px;
113+
text-align: center;
114+
}
115+
116+
.project-grid {
117+
display: grid;
118+
grid-template-columns: 1fr 1fr;
119+
gap: 16px;
120+
}
121+
122+
.project-card {
123+
border: 1px solid #e8e8e8;
124+
border-radius: 12px;
125+
padding: 48px 40px;
126+
text-decoration: none;
127+
color: inherit;
128+
display: flex;
129+
flex-direction: column;
130+
transition: all 0.25s ease;
131+
position: relative;
132+
overflow: hidden;
133+
min-height: 320px;
134+
}
135+
136+
.project-card::before {
137+
content: '';
138+
position: absolute;
139+
inset: 0;
140+
background: #111;
141+
opacity: 0;
142+
transition: opacity 0.25s ease;
143+
z-index: 0;
144+
}
145+
146+
.project-card:hover::before {
147+
opacity: 1;
148+
}
149+
150+
.project-card:hover {
151+
border-color: #111;
152+
color: #fff;
153+
}
154+
155+
.project-card > * {
156+
position: relative;
157+
z-index: 1;
158+
}
159+
160+
.project-mono {
161+
font-family: 'Geist Mono', monospace;
162+
font-size: 14px;
163+
font-weight: 500;
164+
color: #999;
165+
margin-bottom: 24px;
166+
display: flex;
167+
justify-content: space-between;
168+
align-items: center;
169+
}
170+
171+
.project-card:hover .project-mono {
172+
color: #666;
173+
}
174+
175+
.project-arrow {
176+
font-size: 18px;
177+
transition: transform 0.25s ease;
178+
display: inline-block;
179+
}
180+
181+
.project-card:hover .project-arrow {
182+
transform: translateX(6px);
183+
}
184+
185+
.project-title {
186+
font-family: 'Instrument Serif', serif;
187+
font-size: clamp(28px, 3vw, 36px);
188+
line-height: 1.2;
189+
letter-spacing: -0.8px;
190+
margin-bottom: 16px;
191+
flex-grow: 0;
192+
}
193+
194+
.project-desc {
195+
font-family: 'Inter', sans-serif;
196+
font-size: 15px;
197+
line-height: 1.65;
198+
color: #888;
199+
margin-top: auto;
200+
}
201+
202+
.project-card:hover .project-desc {
203+
color: #999;
204+
}
205+
206+
/* ── ABOUT ── */
207+
.about {
208+
max-width: 580px;
209+
margin: 0 auto;
210+
padding: 80px 40px 120px;
211+
text-align: center;
212+
}
213+
214+
.about p {
215+
font-family: 'Inter', sans-serif;
216+
font-size: 16px;
217+
line-height: 1.8;
218+
color: #888;
219+
margin-bottom: 20px;
220+
}
221+
222+
.about p:last-of-type {
223+
margin-bottom: 0;
224+
}
225+
226+
.about em {
227+
font-family: 'Instrument Serif', serif;
228+
font-style: italic;
229+
font-size: 18px;
230+
color: #111;
231+
}
232+
233+
/* ── FOOTER ── */
234+
footer {
235+
border-top: 1px solid #eee;
236+
max-width: 1080px;
237+
margin: 0 auto;
238+
padding: 32px 40px;
239+
display: flex;
240+
justify-content: space-between;
241+
align-items: center;
242+
}
243+
244+
footer span,
245+
footer a {
246+
font-family: 'Geist Mono', monospace;
247+
font-size: 13px;
248+
color: #bbb;
249+
text-decoration: none;
250+
transition: color 0.15s;
251+
}
252+
253+
footer a:hover {
254+
color: #111;
255+
}
256+
257+
.footer-links {
258+
display: flex;
259+
gap: 24px;
260+
}
261+
262+
/* ── FADE ── */
263+
.fade {
264+
opacity: 0;
265+
transform: translateY(20px);
266+
transition: opacity 0.8s ease, transform 0.8s ease;
267+
}
268+
269+
.fade.in {
270+
opacity: 1;
271+
transform: translateY(0);
272+
}
273+
274+
/* stagger hero children */
275+
.hero .fade:nth-child(1) { transition-delay: 0s; }
276+
.hero .fade:nth-child(2) { transition-delay: 0.1s; }
277+
.hero .fade:nth-child(3) { transition-delay: 0.2s; }
278+
279+
/* ── RESPONSIVE ── */
280+
@media (max-width: 720px) {
281+
nav { padding: 20px; }
282+
.hero { padding: 80px 24px 60px; }
283+
.projects-section { padding: 0 24px 80px; }
284+
.project-grid { grid-template-columns: 1fr; }
285+
.project-card { min-height: auto; padding: 32px 28px; }
286+
.about { padding: 60px 24px 80px; }
287+
footer { padding: 24px; flex-direction: column; gap: 12px; }
288+
}
289+
</style>
290+
</head>
291+
<body>
292+
293+
<nav>
294+
<span class="logo">digger</span>
295+
<div class="nav-links">
296+
<a href="https://github.com/diggerhq" class="nav-link">github</a>
297+
</div>
298+
</nav>
299+
300+
<section class="hero">
301+
<p class="hero-name fade">digger</p>
302+
<h1 class="fade">Infrastructure you forget about.</h1>
303+
<p class="hero-sub fade">
304+
We build the infra so your agents can just run.
305+
</p>
306+
</section>
307+
308+
<section class="projects-section">
309+
<p class="projects-label fade">what we've shipped</p>
310+
311+
<div class="project-grid">
312+
<a href="https://opentaco.dev" class="project-card fade">
313+
<div class="project-mono">
314+
opentaco
315+
<span class="project-arrow">&rarr;</span>
316+
</div>
317+
<div class="project-title">CI/CD orchestrator for Terraform</div>
318+
<p class="project-desc">
319+
Auto-plan on every PR. Apply on merge. Drift detection. State management with rollback. Runs in your CI, your secrets never leave your environment. 4.9k GitHub stars, 600+ orgs in production.
320+
</p>
321+
</a>
322+
323+
<a href="https://opencomputer.dev" class="project-card fade">
324+
<div class="project-mono">
325+
opencomputer
326+
<span class="project-arrow">&rarr;</span>
327+
</div>
328+
<div class="project-title">Computers for AI agents</div>
329+
<p class="project-desc">
330+
Background infra to run your agents. Hibernate when idle, wake when needed. With auth, storage and deployment out of the box.
331+
</p>
332+
</a>
333+
</div>
334+
</section>
335+
336+
<section class="about fade">
337+
<p>
338+
We just build and ship. If agents need it, we're probably making it.
339+
</p>
340+
</section>
341+
342+
<footer>
343+
<span>digger &copy; 2026</span>
344+
<div class="footer-links">
345+
<a href="https://github.com/diggerhq">github</a>
346+
</div>
347+
</footer>
348+
349+
<script>
350+
const fades = document.querySelectorAll('.fade');
351+
const obs = new IntersectionObserver((entries) => {
352+
entries.forEach(e => {
353+
if (e.isIntersecting) e.target.classList.add('in');
354+
});
355+
}, { threshold: 0.1 });
356+
fades.forEach(el => obs.observe(el));
357+
</script>
358+
359+
</body>
360+
</html>

‎index.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Site Prototypes</title>
7+
<link href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500&family=Inter:wght@400;500&display=swap" rel="stylesheet">
8+
<style>
9+
* { margin: 0; padding: 0; box-sizing: border-box; }
10+
body { background: #fff; color: #111; font-family: 'Inter', sans-serif; display: flex; align-items: center; justify-content: center; min-height: 100vh; }
11+
.container { text-align: center; }
12+
h1 { font-family: 'Geist Mono', monospace; font-size: 14px; font-weight: 500; color: #bbb; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 48px; }
13+
a { display: block; font-family: 'Inter', sans-serif; font-size: 20px; font-weight: 500; color: #111; text-decoration: none; padding: 16px 0; transition: color 0.15s; }
14+
a:hover { color: #888; }
15+
a span { font-family: 'Geist Mono', monospace; font-size: 13px; color: #bbb; margin-left: 8px; }
16+
</style>
17+
</head>
18+
<body>
19+
<div class="container">
20+
<h1>site prototypes</h1>
21+
<a href="digger/">digger <span>company</span></a>
22+
<a href="opentaco/">opentaco <span>product</span></a>
23+
<a href="opencomputer/">opencomputer <span>product</span></a>
24+
</div>
25+
</body>
26+
</html>

0 commit comments

Comments
 (0)