Skip to content

Commit c62c350

Browse files
Chandra Mouli ThotaChandra Mouli Thota
Chandra Mouli Thota
authored and
Chandra Mouli Thota
committed
Publish the live studio index for repos, projects, and packages.
0 parents  commit c62c350

4 files changed

Lines changed: 159 additions & 0 deletions

File tree

‎.nojekyll‎

Whitespace-only changes.

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2026 Chandra Mouli Thota
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# Studio
2+
3+
**Studio surface:** User site · repository · tracked on [Studio](https://github.com/users/designwithchandra/projects/1)
4+
5+
Live index of public work: repositories, the Studio project board, and GitHub Packages.
6+
7+
https://designwithchandra.github.io
8+
9+
| Surface | Where |
10+
| --- | --- |
11+
| Live | https://designwithchandra.github.io |
12+
| Repositories | https://github.com/designwithchandra?tab=repositories |
13+
| Projects | https://github.com/designwithchandra?tab=projects |
14+
| Packages | https://github.com/designwithchandra?tab=packages |

‎index.html‎

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

0 commit comments

Comments
 (0)