-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
124 lines (124 loc) · 5.92 KB
/
Copy pathindex.html
File metadata and controls
124 lines (124 loc) · 5.92 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Studio — Chandra Thota</title>
<meta name="description" content="Public studio: repositories, projects, and packages — live sites that stay in sync." />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Serif:ital,wght@0,500;0,600;1,500&display=swap" rel="stylesheet" />
<style>
:root {
--ink: #f4f6f2;
--muted: #9aa39a;
--line: #1c2a1c;
--paper: #070907;
--card: #0d120d;
--lime: #00ff01;
--forest: #002f1b;
--accent: #4493f8;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); font-family: "IBM Plex Sans", system-ui, sans-serif; }
a { color: inherit; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 40px 24px 80px; }
header { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: baseline; }
.mark { color: var(--lime); font-weight: 600; letter-spacing: 0.08em; font-size: 12px; text-transform: uppercase; }
nav { display: flex; gap: 18px; font-size: 13px; color: var(--muted); }
nav a:hover { color: var(--lime); }
h1 { font-family: "IBM Plex Serif", Georgia, serif; font-size: clamp(36px, 6vw, 64px); line-height: 1.05; letter-spacing: -0.03em; margin: 48px 0 16px; max-width: 16ch; }
.lede { font-size: 18px; color: var(--muted); max-width: 54ch; line-height: 1.55; }
.tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 40px 0 56px; }
.tab {
border: 1px solid var(--line);
background: var(--card);
padding: 18px 16px;
border-radius: 14px;
text-decoration: none;
}
.tab:hover { border-color: var(--lime); }
.tab b { display: block; font-size: 15px; margin-bottom: 6px; }
.tab span { color: var(--muted); font-size: 13px; line-height: 1.45; }
h2 { font-family: "IBM Plex Serif", Georgia, serif; font-size: 28px; margin: 0 0 16px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.card {
border: 1px solid var(--line);
background: var(--card);
border-radius: 16px;
padding: 20px;
min-height: 180px;
display: flex;
flex-direction: column;
text-decoration: none;
}
.card:hover { border-color: #2a4a2a; }
.kicker { color: var(--lime); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }
.card h3 { margin: 10px 0 8px; font-size: 20px; font-family: "IBM Plex Serif", Georgia, serif; }
.card p { margin: 0 0 16px; color: var(--muted); font-size: 14px; line-height: 1.5; flex: 1; }
.go { font-size: 13px; color: var(--lime); font-weight: 600; }
footer { margin-top: 64px; color: var(--muted); font-size: 13px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
@media (max-width: 720px) {
.tabs { grid-template-columns: 1fr; }
h1 { margin-top: 32px; }
}
</style>
</head>
<body>
<div class="wrap">
<header>
<div class="mark">Design with Chandra · Studio</div>
<nav>
<a href="https://github.com/designwithchandra?tab=repositories">Repositories</a>
<a href="https://github.com/designwithchandra?tab=projects">Projects</a>
<a href="https://github.com/designwithchandra?tab=packages">Packages</a>
<a href="https://designwithchandra.com">Portfolio</a>
</nav>
</header>
<h1>Three surfaces. One studio.</h1>
<p class="lede">
Repositories hold the work. Projects keep the work moving. Packages share the system.
Live sites update when the repo updates.
</p>
<div class="tabs">
<a class="tab" href="https://github.com/designwithchandra?tab=repositories">
<b>Repositories</b>
<span>Public work with a homepage, topics, and a README that points at the live site.</span>
</a>
<a class="tab" href="https://github.com/users/designwithchandra/projects/1">
<b>Projects</b>
<span>One Studio board: Now, Next, Live — every repo and package is on it.</span>
</a>
<a class="tab" href="https://github.com/designwithchandra?tab=packages">
<b>Packages</b>
<span>@designwithchandra/tokens — the color system used across GitHub and these labs.</span>
</a>
</div>
<h2>Live</h2>
<div class="grid">
<a class="card" href="https://designwithchandra.github.io/agentic-launchpad/">
<span class="kicker">Product</span>
<h3>Agentic LaunchPad</h3>
<p>Idea to library to blueprint to workflow to generated GitHub files. Reuse first.</p>
<span class="go">Open live demo →</span>
</a>
<a class="card" href="https://github.com/designwithchandra/tokens">
<span class="kicker">Package</span>
<h3>Tokens</h3>
<p>GitHub colorblind greys and Affine lime, published to GitHub Packages.</p>
<span class="go">Open repository →</span>
</a>
<a class="card" href="https://designwithchandra.com">
<span class="kicker">Portfolio</span>
<h3>designwithchandra.com</h3>
<p>Selected work, research, and the practice behind Fortune 100 product systems.</p>
<span class="go">Open site →</span>
</a>
</div>
<footer>
<span>Chandra Mouli Thota · Design Lead · Agentic Designer</span>
<a href="mailto:designwithchandra@gmail.com">designwithchandra@gmail.com</a>
</footer>
</div>
</body>
</html>