Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
405 lines (373 loc) · 33.6 KB
/
Copy pathindex.html
File metadata and controls
405 lines (373 loc) · 33.6 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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>tanujnotes · Privacy focused minimal apps</title>
<meta name="description" content="Tanuj makes privacy focused minimal apps: Olauncher, Pro Launcher, Pentastic, Ogesture, Note to Self and Supernova.">
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 36'%3E%3Cpath d='M5 2.5C10 1.8 15 2.2 19.5 2.6C21.6 3 22 4.6 21.8 7C21.6 15 21.9 23 21.6 31C21.4 33.2 20 33.8 17.5 33.7C13 33.5 9 33.8 5 33.4C2.9 33.1 2.3 31.8 2.4 29.5C2.6 21 2.2 13 2.5 5.4C2.6 3.4 3.4 2.6 5.6 2.4M9.5 29.6C11.2 29.3 12.8 29.4 14.4 29.6' fill='none' stroke='%23888' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E">
<style>
/* Hand-drawn font for headings and buttons: Shantell Sans, copyright 2022 The Shantell Sans Project Authors
(https://github.com/arrowtype/shantell-sans), SIL Open Font License 1.1 (https://openfontlicense.org).
Weight 600, Informality 100, Bounce 50, trimmed to only the characters the headings and buttons use:
space ',./ABCGHILMNOPSTXabcefghijlmnoprstuvwy. Any other character falls back to the system font. */
@font-face{font-family:'Shantell Display';src:url(data:font/woff2;base64,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) format('woff2');font-weight:300 800;font-style:normal;font-display:block}
/* Colors: dark by default, light when the theme switch is on */
body{--bg:#000000;--fg:#EDEDED;--dim:#A3A3A3;--ink:#EDEDED;--ink-soft:#4A4A4A;--play:#3DDC84;color-scheme:dark}
body:has(#theme:checked){--bg:#FFFFFF;--fg:#141414;--dim:#555555;--ink:#141414;--ink-soft:#BDBDBD;--play:#0B7A40;color-scheme:light}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
.display,.p-name,.hint,.brand,.sk{font-family:'Shantell Display',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}
::selection{background:var(--fg);color:var(--bg)}
a{color:var(--fg);text-decoration:none}
:focus-visible{outline:2px dashed var(--fg);outline-offset:5px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.wrap{max-width:1120px;margin:0 auto;padding:0 clamp(20px,5vw,64px)}
/* Doodles */
.doodle{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.doodle path{vector-effect:non-scaling-stroke}
.doodle.soft{stroke:var(--dim)}
.rule{display:block;width:100%;height:10px;overflow:visible;fill:none;stroke:var(--ink-soft);stroke-width:1.6;stroke-linecap:round}
.rule path{vector-effect:non-scaling-stroke}
.arr{flex:none;width:.72em;height:.72em;opacity:.55;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
a:hover .arr{opacity:1}
/* Header */
header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:0 24px;padding:20px 0}
.brand{display:inline-flex;align-items:center;gap:10px;padding:12px 0;font-size:20px;font-weight:600}
nav{display:flex;flex-wrap:wrap;align-items:center;gap:0 26px;font-size:18px}
nav a{display:inline-block;padding:12px 2px;color:var(--dim)}
nav a:hover{color:var(--fg)}
.theme-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0 -10px 0 -8px;color:var(--dim);cursor:pointer}
.theme-btn:hover{color:var(--fg)}
.theme-btn svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.theme-btn .moon{display:none}
#theme:checked + .theme-btn .sun{display:none}
#theme:checked + .theme-btn .moon{display:block}
#theme:focus-visible + .theme-btn{outline:2px dashed var(--fg);outline-offset:2px;border-radius:50%}
/* Hero */
.hero{padding-top:120px}
.hero-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px}
h1{margin:0;font-size:clamp(46px,7.2vw,96px);font-weight:600;line-height:1.05;letter-spacing:-0.02em}
.hl,.circled,.scribble{position:relative;white-space:nowrap}
.hl .uline{position:absolute;left:-2%;bottom:-.14em;width:104%;height:.2em}
.circled,.scribble{color:var(--fg)}
.circled svg{position:absolute;left:-16px;top:-10px;width:calc(100% + 32px);height:calc(100% + 20px)}
.scribble svg{position:absolute;left:-2px;bottom:-7px;width:calc(100% + 4px);height:12px}
.face{flex:none;width:96px;height:96px}
.intro{margin:40px 0 0;max-width:620px;font-size:clamp(19px,1.9vw,23px);line-height:1.55;color:var(--dim)}
/* Sketchy pill buttons */
.pills{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.sk{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 20px;color:var(--fg);border:2px solid currentColor;border-radius:28px 18px 26px 16px / 18px 26px 16px 28px;font-size:17px;font-weight:500}
.sk::after{content:"";position:absolute;inset:-4px -2px -1px -4px;border:1.2px solid currentColor;border-radius:22px 30px 18px 28px / 28px 18px 30px 22px;opacity:.35;pointer-events:none;transform:rotate(-1deg)}
.sk:nth-child(2n){transform:rotate(1deg)}
.sk:nth-child(3n){transform:rotate(-.7deg)}
.sk:hover{transform:rotate(-2deg) scale(1.03)}
.sk.play{color:var(--play)}
.sk.big{min-height:62px;padding:0 28px;font-size:clamp(20px,2.2vw,26px)}
/* Work */
.work-section{padding-top:160px}
.work-title{display:flex;align-items:flex-end;gap:14px;margin-bottom:26px}
.work-title h2{margin:0;font-size:22px;font-weight:500;color:var(--dim)}
.work{display:flex;flex-wrap:wrap;gap:48px 72px}
.work-list{flex:999 1 520px;min-width:0}
.project{padding:0 0 30px}
.project .rule{margin-bottom:28px}
.p-name{position:relative;display:inline-block;margin:0;font-size:clamp(32px,3.6vw,44px);font-weight:600;line-height:1.15;letter-spacing:-0.01em}
.p-name .uline{display:none;position:absolute;left:-2%;bottom:-10px;width:104%;height:14px}
.p-desc{margin:14px 0 0;max-width:580px;font-size:18px;line-height:1.6;color:var(--dim)}
.p-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 24px;margin-top:16px}
.p-meta{display:flex;flex-wrap:wrap;gap:2px 22px;font-size:15px;line-height:1.7;color:var(--dim)}
.p-links{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:12px;margin-left:auto}
.p-links .sk{min-height:44px;padding:0 18px;font-size:16px}
/* The app you hover (or Olauncher, when you hover nothing) is highlighted */
.project:is(:hover,:focus-within) :is(.p-desc,.p-meta){color:var(--fg)}
.project:is(:hover,:focus-within) .p-name .uline{display:block}
.work:not(:has(.project:hover,.project:focus-within)) .p-olauncher :is(.p-desc,.p-meta){color:var(--fg)}
.work:not(:has(.project:hover,.project:focus-within)) .p-olauncher .p-name .uline{display:block}
/* Show more */
.more summary{display:inline-flex;align-items:center;gap:10px;min-height:56px;margin-top:4px;padding:12px 0;color:var(--dim);font-size:19px;font-weight:500;cursor:pointer;list-style:none}
.more summary::-webkit-details-marker{display:none}
.more summary:hover{color:var(--fg)}
.more .less,.more[open] .moretext{display:none}
.more[open] .less{display:inline}
.more-arr{width:18px;height:18px;stroke:currentColor}
.more[open] .more-arr{transform:rotate(180deg)}
/* Phone preview */
.stage-col{flex:1 1 264px}
.stage{position:sticky;top:40px;display:flex;flex-direction:column;align-items:center}
.hint{display:flex;align-items:center;gap:6px;margin:0 0 22px;font-size:20px;color:var(--dim);transform:rotate(-3deg)}
.phone{position:relative;width:264px;height:548px;padding:12px;border:2.5px solid var(--ink);border-radius:50px 42px 48px 40px / 42px 50px 40px 48px;transform:rotate(-1deg)}
.phone::after{content:"";position:absolute;inset:-5px -3px -2px -5px;border:1.3px solid var(--ink);border-radius:44px 52px 40px 50px / 50px 42px 52px 44px;opacity:.35;transform:rotate(1.2deg);pointer-events:none}
.screen{position:relative;width:100%;height:100%;overflow:hidden;border:1.5px solid var(--ink-soft);border-radius:36px 30px 38px 28px / 30px 38px 28px 36px}
.cam{position:absolute;top:12px;left:50%;z-index:2;width:10px;height:10px;margin-left:-5px;border:1.5px solid var(--dim);border-radius:50% 45% 55% 48%}
.pv{position:absolute;inset:0;padding:44px 22px 24px;display:none}
.pv-olauncher{display:block}
.work:has(.project:hover,.project:focus-within) .pv-olauncher{display:none}
.work:has(.p-olauncher:is(:hover,:focus-within)) .pv-olauncher,
.work:has(.p-pro:is(:hover,:focus-within)) .pv-pro,
.work:has(.p-pentastic:is(:hover,:focus-within)) .pv-pentastic,
.work:has(.p-ogesture:is(:hover,:focus-within)) .pv-ogesture,
.work:has(.p-notes:is(:hover,:focus-within)) .pv-notes,
.work:has(.p-supernova:is(:hover,:focus-within)) .pv-supernova{display:block}
.mini-list{display:flex;flex-direction:column;justify-content:center;gap:15px;height:100%;font-size:19px}
.mini-task{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1.5px dashed var(--ink-soft);font-size:15px}
.mini-task i{position:relative;flex:none;width:15px;height:15px;border:1.6px solid var(--ink);border-radius:4px 2px 5px 3px}
.mini-task i svg{position:absolute;left:-3px;top:-6px;width:20px;height:20px}
.mini-task.done span{color:var(--dim);text-decoration:line-through;text-decoration-thickness:1.5px}
.edge{position:absolute;top:44%;display:flex;align-items:center;justify-content:center;width:22px;height:62px;border:2px solid var(--ink)}
.edge svg{width:9px;height:14px}
.edge-l{left:-2px;border-radius:0 16px 12px 0 / 0 12px 16px 0}
.edge-r{right:-2px;border-radius:14px 0 0 18px / 18px 0 0 14px}
.g-label{position:absolute;font-size:13px;color:var(--dim)}
.home-squiggle{position:absolute;bottom:14px;left:50%;width:96px;height:10px;margin-left:-48px}
.chat{display:flex;flex-direction:column;justify-content:flex-end;gap:10px;height:100%}
.bubble{align-self:flex-end;max-width:80%;padding:8px 13px;border:1.6px solid var(--ink);border-radius:16px 14px 4px 18px / 14px 18px 4px 16px;font-size:13.5px;line-height:1.35}
.composer{display:flex;align-items:center;justify-content:space-between;margin-top:8px;padding:5px 5px 5px 16px;border:1.6px solid var(--ink-soft);border-radius:24px 18px 22px 16px / 18px 24px 16px 22px;font-size:14px;color:var(--dim)}
.composer svg{width:28px;height:28px}
.col,.pro{display:flex;flex-direction:column;height:100%}
.clock{display:flex;flex-direction:column;gap:6px}
.pro-row{display:flex;justify-content:space-between}
.pro-acts{display:flex;flex-direction:column;gap:13px}
.pro-acts svg{width:20px;height:22px;stroke-width:1.5}
.nova{display:flex;flex-direction:column;justify-content:space-between;height:100%}
.nova-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 16px;margin-top:10px}
.nova-grid i{display:block;aspect-ratio:1;border:1.6px solid var(--ink);border-radius:12px 9px 13px 8px / 9px 13px 8px 12px}
.nova-grid i:nth-child(3n){border-radius:52% 48% 50% 46%}
.nova-grid i:nth-child(4n+1){border-radius:5px 3px 6px 2px}
.nova-grid i:nth-child(5n){background-image:repeating-linear-gradient(45deg,var(--ink) 0 1.2px,transparent 1.2px 5px)}
.nova-grid i:nth-child(7n+2){border-style:dashed}
.nova-dock{display:flex;justify-content:space-around;padding:10px 8px;border:1.6px solid var(--ink-soft);border-radius:24px 18px 26px 16px / 18px 26px 16px 24px}
.nova-dock i{width:32px;height:32px;border:1.6px solid var(--ink);border-radius:52% 46% 50% 48%}
/* Connect + footer */
.contact{padding-top:176px}
.contact-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px}
.contact h2{margin:0;font-size:clamp(40px,6vw,76px);font-weight:600;line-height:1.05;letter-spacing:-0.01em}
.contact p{margin:20px 0 0;max-width:540px;font-size:19px;line-height:1.55;color:var(--dim)}
.big-links{display:flex;flex-wrap:wrap;gap:16px;margin-top:36px}
.cup{width:22px;height:22px}
footer{margin-top:128px}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 24px;padding:20px 0 40px;font-size:17px;color:var(--dim)}
.foot span{display:inline-flex;align-items:center;gap:12px}
/* Phones: no hover, so no preview and no highlight */
@media (max-width:900px){
.stage-col{display:none}
.work .project .p-desc,.work .project .p-meta{color:var(--dim) !important}
.work .project .p-name .uline{display:none !important}
.face{width:72px;height:72px}
}
</style>
</head>
<body>
<!-- Doodles used more than once, drawn here once and reused with <use href="#…"> -->
<svg width="0" height="0" style="position:absolute" aria-hidden="true">
<symbol id="arr" viewBox="0 0 16 16" overflow="visible"><path d="M3.5 12.6C6.5 9.6 9.4 6.6 12.4 3.6M6.4 3.4C8.4 3.5 10.4 3.3 12.6 3.4C12.7 5.5 12.5 7.5 12.6 9.6"/></symbol>
<symbol id="rule1" viewBox="0 0 1000 10" preserveAspectRatio="none" overflow="visible"><path vector-effect="non-scaling-stroke" d="M2 5C90 2 170 8 260 5S430 2 520 6S700 8 790 4S940 3 998 6"/></symbol>
<symbol id="rule2" viewBox="0 0 1000 10" preserveAspectRatio="none" overflow="visible"><path vector-effect="non-scaling-stroke" d="M2 6C70 8 150 3 240 5S400 8 500 4S660 2 760 6S920 7 998 4"/></symbol>
<symbol id="rule3" viewBox="0 0 1000 10" preserveAspectRatio="none" overflow="visible"><path vector-effect="non-scaling-stroke" d="M2 4C110 7 200 2 300 5S480 7 580 4S760 2 850 6S960 5 998 5"/></symbol>
<symbol id="uline" viewBox="0 0 200 14" preserveAspectRatio="none" overflow="visible"><path vector-effect="non-scaling-stroke" d="M3 9C40 4 80 13 120 7S180 5 197 9"/></symbol>
<symbol id="tick" viewBox="0 0 16 16" overflow="visible"><path vector-effect="non-scaling-stroke" d="M2.5 8.5C4 10 5.2 11.6 6.4 13.6C8.6 9 11.2 5.6 14.6 2"/></symbol>
</svg>
<div class="wrap">
<header id="top">
<a class="brand" href="#top"><svg class="doodle" viewBox="0 0 24 36" width="17" height="26" aria-hidden="true"><path d="M5 2.5C10 1.8 15 2.2 19.5 2.6C21.6 3 22 4.6 21.8 7C21.6 15 21.9 23 21.6 31C21.4 33.2 20 33.8 17.5 33.7C13 33.5 9 33.8 5 33.4C2.9 33.1 2.3 31.8 2.4 29.5C2.6 21 2.2 13 2.5 5.4C2.6 3.4 3.4 2.6 5.6 2.4"/><path d="M9.5 29.6C11.2 29.3 12.8 29.4 14.4 29.6"/></svg>tanujnotes</a>
<nav aria-label="Main">
<a href="#work">Apps</a>
<a href="#contact">Connect</a>
<input type="checkbox" id="theme" class="sr-only" aria-label="Light mode">
<label for="theme" class="theme-btn" title="Switch light / dark mode">
<svg class="sun" viewBox="0 0 24 24" width="22" height="22" aria-hidden="true"><path d="M12 7.6C14.6 7.4 16.5 9.4 16.4 12C16.3 14.7 14.3 16.5 11.8 16.4C9.3 16.3 7.5 14.4 7.6 11.8C7.7 9.6 9.4 7.8 12.3 7.7"/><path d="M12 2.2L12.2 4.6M12.1 19.5L11.9 21.9M2.3 11.9L4.7 12.1M19.4 12L21.8 11.8M5 5.2L6.6 6.8M17.4 17.3L19 18.9M5.1 18.8L6.8 17.2M17.3 6.7L18.9 5.1"/></svg>
<svg class="moon" viewBox="0 0 24 24" width="22" height="22" aria-hidden="true"><path d="M19.6 14.6C18.2 18 14.8 20.3 11.2 20C6.6 19.6 3.6 15.6 4.1 11.2C4.5 7.6 7.2 4.6 10.4 4C8.6 6.6 8.8 10.4 11.2 12.9C13.4 15.2 17 15.8 19.6 14.6Z"/></svg>
</label>
</nav>
</header>
<main>
<section class="hero" aria-label="Introduction">
<div class="hero-row">
<h1 class="display">Hi, I'm <span class="hl">Tanuj<svg class="uline doodle" viewBox="0 0 300 18" preserveAspectRatio="none" aria-hidden="true"><path d="M4 11C60 4 120 15 180 8S270 6 296 10"/><path d="M24 15C90 10 170 17 250 12" opacity=".45"/></svg></span></h1>
<svg class="face doodle" viewBox="0 0 120 120" aria-hidden="true"><path d="M61 9C91 8 112 31 111 61C110 92 87 112 58 111C28 110 8 88 9 58C10 30 31 9 64 11"/><path d="M41 47C41.4 51 41.7 54 42 57"/><path d="M77 46C77.4 50 77.6 53 77.8 56"/><path d="M36 72C47 87 73 89 85 71"/><path d="M27 31C37 17 57 10 75 15M47 14C56 6 70 6 83 14"/></svg>
</div>
<p class="intro">I specialise in making privacy focused <span class="scribble">minimal<svg class="doodle" viewBox="0 0 200 12" preserveAspectRatio="none" aria-hidden="true"><path d="M2 8C40 3 80 10 120 5S180 4 198 7"/></svg></span> apps. <span class="circled">3 million+<svg class="doodle" viewBox="0 0 200 60" preserveAspectRatio="none" aria-hidden="true"><path d="M30 10C80 2 160 4 188 18C204 30 186 52 120 56C60 59 10 52 8 32C6 16 40 8 70 7"/></svg></span> downloads across apps. Great ratings.</p>
<div class="pills">
<a class="sk play" href="https://play.google.com/store/apps/dev?id=7198807840081074933">Apps<svg class="arr" aria-hidden="true"><use href="#arr"/></svg></a>
<a class="sk" href="https://github.com/tanujnotes">GitHub<svg class="arr" aria-hidden="true"><use href="#arr"/></svg></a>
<a class="sk" href="https://x.com/tanujnotes">X/Twitter<svg class="arr" aria-hidden="true"><use href="#arr"/></svg></a>
</div>
</section>
<section id="work" class="work-section" aria-labelledby="work-title">
<div class="work-title">
<h2 id="work-title">Selected work</h2>
<svg class="doodle soft" viewBox="0 0 70 50" width="56" height="40" aria-hidden="true"><path d="M4 8C26 4 46 12 54 34"/><path d="M44 30C48 33 52 36 55 40C58 35 60 31 62 27"/></svg>
</div>
<div class="work">
<div class="work-list">
<article class="project p-olauncher">
<svg class="rule" aria-hidden="true"><use href="#rule1"/></svg>
<h3 class="p-name">Olauncher<svg class="uline doodle" aria-hidden="true"><use href="#uline"/></svg></h3>
<p class="p-desc">Likely the most popular minimal launcher on Android. It helps you reduce your screen time. Free and open-source. No ads.</p>
<div class="p-foot">
<div class="p-meta"><span>2M+ downloads</span><span>4.8 ★ on Play Store</span><span>3.9k stars</span></div>
<div class="p-links">
<a class="sk" href="https://github.com/tanujnotes/Olauncher">GitHub<svg class="arr" aria-hidden="true"><use href="#arr"/></svg></a>
<a class="sk play" href="https://play.google.com/store/apps/details?id=app.olauncher">Play Store<svg class="arr" aria-hidden="true"><use href="#arr"/></svg></a>
</div>
</div>
</article>
<article class="project p-pro">
<svg class="rule" aria-hidden="true"><use href="#rule2"/></svg>
<h3 class="p-name">Pro Launcher<svg class="uline doodle" aria-hidden="true"><use href="#uline"/></svg></h3>
<p class="p-desc">Pro version of Olauncher with extra features. Uniquely combines minimal design and productivity.</p>
<div class="p-foot">
<div class="p-meta"><span>300K+ downloads</span></div>
<div class="p-links">
<a class="sk play" href="https://play.google.com/store/apps/details?id=app.prolauncher">Play Store<svg class="arr" aria-hidden="true"><use href="#arr"/></svg></a>
</div>
</div>
</article>
<article class="project p-pentastic">
<svg class="rule" aria-hidden="true"><use href="#rule3"/></svg>
<h3 class="p-name">Pentastic<svg class="uline doodle" aria-hidden="true"><use href="#uline"/></svg></h3>
<p class="p-desc">A minimal to-do list inspired by the simplicity of pen and paper. Write it down, tick it off, move on. Free and open-source.</p>
<div class="p-foot">
<div class="p-meta"><span>4.9 ★ on Play Store</span></div>
<div class="p-links">
<a class="sk" href="https://github.com/tanujnotes/Pentastic">GitHub<svg class="arr" aria-hidden="true"><use href="#arr"/></svg></a>
<a class="sk play" href="https://play.google.com/store/apps/details?id=app.pentastic">Play Store<svg class="arr" aria-hidden="true"><use href="#arr"/></svg></a>
</div>
</div>
</article>
<svg class="rule" aria-hidden="true"><use href="#rule2"/></svg>
<details class="more">
<summary><span class="moretext">Show more</span><span class="less">Show less</span><svg class="more-arr doodle" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 2.5C8.2 6 7.9 9.5 8.1 13M3.8 9C5.3 10.4 6.7 11.8 8.1 13.3C9.5 11.8 10.9 10.4 12.3 9"/></svg></summary>
<article class="project p-ogesture">
<svg class="rule" aria-hidden="true"><use href="#rule1"/></svg>
<h3 class="p-name">Ogesture<svg class="uline doodle" aria-hidden="true"><use href="#uline"/></svg></h3>
<p class="p-desc">Adds back, home and recents gestures to third-party launchers on any Android phone. Collects no data and doesn't even ask for network access.</p>
<div class="p-foot">
<div class="p-meta"><span>No network permission</span><span>Open source</span></div>
<div class="p-links">
<a class="sk" href="https://github.com/tanujnotes/Ogesture">GitHub<svg class="arr" aria-hidden="true"><use href="#arr"/></svg></a>
<a class="sk play" href="https://play.google.com/store/apps/details?id=com.ogesture">Play Store<svg class="arr" aria-hidden="true"><use href="#arr"/></svg></a>
</div>
</div>
</article>
<article class="project p-notes">
<svg class="rule" aria-hidden="true"><use href="#rule2"/></svg>
<h3 class="p-name">Note to Self<svg class="uline doodle" aria-hidden="true"><use href="#uline"/></svg></h3>
<p class="p-desc">Write notes to yourself the way you'd text a friend. Private, password-protected and kept on your device.</p>
<div class="p-foot">
<div class="p-meta"><span>Private by default</span><span>Offline backups</span></div>
<div class="p-links">
<a class="sk" href="https://github.com/jeerovan/ntsapp">GitHub<svg class="arr" aria-hidden="true"><use href="#arr"/></svg></a>
<a class="sk play" href="https://play.google.com/store/apps/details?id=com.makenotetoself">Play Store<svg class="arr" aria-hidden="true"><use href="#arr"/></svg></a>
</div>
</div>
</article>
<article class="project p-supernova">
<svg class="rule" aria-hidden="true"><use href="#rule3"/></svg>
<h3 class="p-name">Supernova<svg class="uline doodle" aria-hidden="true"><use href="#uline"/></svg></h3>
<p class="p-desc">Infinitely customizable, an open-source alternative to Nova Launcher.</p>
<div class="p-foot">
<div class="p-meta"><span>Open source</span></div>
<div class="p-links">
<a class="sk" href="https://github.com/tanujnotes/Supernova">GitHub<svg class="arr" aria-hidden="true"><use href="#arr"/></svg></a>
</div>
</div>
</article>
</details>
</div>
<div class="stage-col" aria-hidden="true">
<div class="stage">
<p class="hint">hover an app<svg class="doodle soft" viewBox="0 0 24 30" width="20" height="26"><path d="M6 3C14 8 15 16 12 26"/><path d="M7 21C9 23 10.5 25 12 27C14 25 16 23 18 21"/></svg></p>
<div class="phone">
<div class="screen">
<span class="cam"></span>
<div class="pv pv-olauncher">
<div class="col">
<div class="clock"><span style="font-size: 40px; font-weight: 300; line-height: 1">10:24</span><span style="font-size: 14px; color: var(--dim)">Thu, 22 Oct</span></div>
<div class="mini-list" style="flex: 1; height: auto"><span>Maps</span><span>Music</span><span>Notes</span><span>Phone</span><span>Gallery</span></div>
</div>
</div>
<div class="pv pv-pro" style="padding-left: 14px; padding-right: 14px">
<div class="pro">
<div class="pro-row" style="align-items: flex-start">
<div class="clock"><span style="font-size: 34px; font-weight: 300; line-height: 1">10:24</span><span style="font-size: 13px; color: var(--dim)">Thu, 22 Oct</span></div>
<div class="clock" style="align-items: flex-end"><span style="font-size: 22px; font-weight: 500">24°</span><span style="font-size: 13px; color: var(--dim)">Clear</span></div>
</div>
<div class="pro-row" style="align-items: flex-end; margin-top: auto">
<div class="mini-list" style="height: auto; font-size: 18px; line-height: 22px; gap: 13px"><span>Maps</span><span>Music</span><span>Work <span style="color: var(--dim)">›</span></span><span>Notes</span><span>Calendar</span></div>
<div class="pro-acts">
<svg class="doodle" viewBox="0 0 24 24"><path d="M10.4 3.6C13.9 3.5 16.7 6.2 16.6 9.9C16.5 13.4 13.8 16 10.3 15.9C6.8 15.8 4.1 13.1 4.2 9.6C4.3 6.3 7 3.6 10.9 3.7"/><path d="M14.9 14.6C16.6 16.3 18.4 18.1 20.2 19.9"/></svg>
<svg class="doodle" viewBox="0 0 24 24"><path d="M4 6.1C4 4.9 4.8 4.1 6 4.1H18C19.2 4 20 4.8 20 6V18C20.1 19.2 19.2 20 18 20H6C4.8 20.1 4 19.2 4 18V6"/><path d="M4.3 16.4L9.2 11.4L13.4 15.6L15.6 13.4L19.8 17.6"/><path d="M15.5 7.4C16.4 7.3 17 8 16.9 8.8C16.8 9.6 16.2 10.1 15.4 10C14.6 9.9 14.1 9.3 14.2 8.5C14.3 7.8 14.9 7.4 15.8 7.5"/></svg>
<svg class="doodle" viewBox="0 0 24 24"><path d="M3.5 8.1C3.5 7 4.3 6.4 5.3 6.4H8L9.6 4.2H14.5L16 6.4H18.8C19.8 6.4 20.5 7.1 20.5 8.1V17.6C20.6 18.6 19.8 19.3 18.8 19.3H5.2C4.2 19.4 3.5 18.6 3.5 17.6V8"/><path d="M12.2 9.6C14 9.5 15.4 11 15.3 12.8C15.2 14.7 13.8 16 12 15.9C10.1 15.8 8.8 14.4 8.9 12.6C9 11 10.3 9.7 12.6 9.8"/></svg>
<svg class="doodle" viewBox="0 0 24 24"><path d="M4 6.2C4 4.6 5 3.7 6.6 3.7H17.5C19.1 3.6 20.2 4.7 20.2 6.2V13.4C20.3 15 19.1 16 17.6 16.1H10.2L6.1 19.8V16H6.6C5 16 4 15 4.1 13.5V6"/></svg>
<svg class="doodle" viewBox="0 0 24 24"><path d="M6.6 3.6C5 4.1 4 5.6 4.3 7.6C5.2 13.1 10.9 18.8 16.4 19.7C18.4 20.1 19.9 19.1 20.4 17.6L17.6 14.9L15 16.3C12 14.9 9.2 12.1 7.8 9.1L9.3 6.5L6.6 3.6"/></svg>
</div>
</div>
</div>
</div>
<div class="pv pv-pentastic">
<div class="col">
<p style="margin: 8px 0 16px; font-size: 26px; font-weight: 600">Today</p>
<div class="mini-task done"><i><svg class="doodle"><use href="#tick"/></svg></i><span>Buy groceries</span></div>
<div class="mini-task done"><i><svg class="doodle"><use href="#tick"/></svg></i><span>Reply to emails</span></div>
<div class="mini-task"><i></i><span>Water the plants</span></div>
<div class="mini-task"><i></i><span>Call Mom</span></div>
<div class="mini-task"><i></i><span>Go for a walk</span></div>
<div class="composer" style="margin-top: auto"><span>Add a task…</span><svg class="doodle" viewBox="0 0 28 28" style="stroke-width: 1.5"><path d="M14 2.5C21 2.4 25.8 7.4 25.6 14.2C25.4 21 20.4 25.7 13.6 25.5C7 25.3 2.4 20.4 2.6 13.7C2.8 7.2 7.6 2.6 14.6 2.7"/><path d="M14.1 8.6C14 12 14.1 15.6 14 19.4M8.8 14.1C12.2 14 15.6 14.1 19.2 14"/></svg></div>
</div>
</div>
<div class="pv pv-ogesture">
<div class="nova" style="padding-bottom: 34px">
<div class="nova-grid"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
<div class="nova-dock"><i></i><i></i><i></i><i></i></div>
</div>
<span class="edge edge-l"><svg class="doodle" viewBox="0 0 10 16"><path d="M7.5 2C6 4.5 4.2 6.4 2.6 8.1C4.2 9.8 6 11.6 7.6 14"/></svg></span>
<span class="edge edge-r"><svg class="doodle" viewBox="0 0 10 16"><path d="M2.5 2C4 4.5 5.8 6.4 7.4 8.1C5.8 9.8 4 11.6 2.4 14"/></svg></span>
<span class="g-label" style="top: 39%; left: 30px">back</span>
<span class="g-label" style="bottom: 30px; left: 50%; margin-left: -18px">home</span>
<svg class="home-squiggle doodle" viewBox="0 0 100 10" preserveAspectRatio="none"><path d="M3 6C20 3 35 8 50 5S80 3 97 6"/></svg>
</div>
<div class="pv pv-notes">
<div class="chat">
<span class="bubble">Idea: a launcher with no icons</span>
<span class="bubble">Buy oat milk</span>
<span class="bubble">Wi-Fi password is on the fridge</span>
<span class="bubble">Call Mom at 7</span>
<div class="composer"><span>Note to self…</span><svg class="doodle" viewBox="0 0 28 28"><path d="M14 2.5C21 2.4 25.8 7.4 25.6 14.2C25.4 21 20.4 25.7 13.6 25.5C7 25.3 2.4 20.4 2.6 13.7C2.8 7.2 7.6 2.6 14.6 2.7"/><path d="M14 19C14.1 15.6 14 12.2 14.1 9M10.2 12.4C11.4 11.2 12.6 10 14.1 8.6C15.4 10 16.6 11.2 17.8 12.4"/></svg></div>
</div>
</div>
<div class="pv pv-supernova">
<div class="nova">
<div class="nova-grid"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
<div class="nova-dock"><i></i><i></i><i></i><i></i></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="contact" class="contact" aria-labelledby="contact-title">
<div class="contact-row">
<h2 id="contact-title" class="display">Connect.</h2>
<svg class="doodle" viewBox="0 0 90 64" width="86" height="62" aria-hidden="true"><path d="M5 34C32 25 60 15 86 6C74 24 62 41 50 58C46 51 42 45 38 39C27 37 16 36 5 34Z"/><path d="M38 39C54 28 70 17 86 6"/><path d="M38 39C39 45 40 50 41 55C44 52 47 50 50 47"/><path d="M2 58C8 52 14 62 22 55" stroke-dasharray="3 5"/></svg>
</div>
<p>The quickest way to reach me is on X. I also write now and then on Substack.</p>
<div class="big-links">
<a class="sk big" href="https://x.com/tanujnotes">X/Twitter<svg class="arr" aria-hidden="true"><use href="#arr"/></svg></a>
<a class="sk big" href="https://github.com/tanujnotes">GitHub<svg class="arr" aria-hidden="true"><use href="#arr"/></svg></a>
<a class="sk big" href="https://github.com/sponsors/tanujnotes"><svg class="cup doodle" viewBox="0 0 32 32" aria-hidden="true"><path d="M6 13C6.2 19 7 25 14 26.5C21 26.6 22.6 20.5 22.8 13C17 13.3 11.5 12.8 6 13Z"/><path d="M22.8 15.5C27.5 14.6 28.6 20.6 22.4 21.2"/><path d="M11 3.5C9 5.6 13 7 11 9.4M16.4 3C14.4 5.1 18.4 6.5 16.4 8.9"/></svg>BMAC<svg class="arr" aria-hidden="true"><use href="#arr"/></svg></a>
</div>
</section>
</main>
<footer>
<svg class="rule" aria-hidden="true"><use href="#rule1"/></svg>
<div class="foot">
<span>© 2026 tanujnotes</span>
<span><svg class="doodle soft" viewBox="0 0 40 50" width="30" height="38" aria-hidden="true"><path d="M20 4C30 3 36 12 33 20C38 26 32 34 24 32C20 36 12 35 10 30C3 29 2 20 8 16C6 9 13 3 21 4.5"/><path d="M20 32C20.5 37 20 42 20.4 47"/><path d="M10 47C16 46 24 48 31 47"/></svg>Everyone needs a hobby in 2026 that doesn't involve a screen.</span>
</div>
</footer>
</div>
</body>
</html>