-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathjournal.html
More file actions
244 lines (217 loc) · 12 KB
/
Copy pathjournal.html
File metadata and controls
244 lines (217 loc) · 12 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Journal · Mukul Rayana</title>
<meta name="description" content="Field notes from building at the edge of AI — Mukul Rayana.">
<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=Cinzel+Decorative:wght@400;700;900&family=Cinzel:wght@400;600;700&family=Rajdhani:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500&display=swap" rel="stylesheet">
<style>
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
--gold:#c9a84c;--gold-l:#f5e09a;--gold-d:#7a5e20;
--teal:#4fd1c5;--teal-d:#2a8a84;
--violet:#9b7fe8;--crimson:#e63946;
--bg:#030510;--panel:rgba(8,12,28,.88);
--text:#ccd6f6;--dim:#7a8aba;
--bdr:rgba(201,168,76,.18);--bdr-b:rgba(201,168,76,.55);
}
html{scroll-behavior:smooth;overflow-x:hidden}
body{background:var(--bg);color:var(--text);font-family:'Rajdhani',sans-serif;overflow-x:hidden;min-height:100vh}
/* ─── STARFIELD ─── */
#starfield{position:fixed;inset:0;z-index:0;pointer-events:none}
/* ─── NOISE GRAIN ─── */
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:9990;opacity:.3;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E")}
/* ─── NAV ─── */
nav{position:fixed;top:0;left:0;right:0;z-index:500;display:flex;justify-content:space-between;align-items:center;padding:1.2rem 5vw;background:linear-gradient(180deg,rgba(3,5,16,.95) 0%,transparent 100%);backdrop-filter:blur(14px);border-bottom:1px solid rgba(201,168,76,.09)}
.nav-logo{font-family:'Cinzel Decorative',serif;font-size:1rem;font-weight:700;color:var(--gold);text-decoration:none;letter-spacing:.1em}
.nav-logo span{color:var(--teal)}
.nav-back{font-family:'Rajdhani',sans-serif;font-size:.8rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);text-decoration:none;transition:color .3s}
.nav-back:hover{color:var(--gold-l)}
/* ─── MAIN WRAP ─── */
.journal-wrap{max-width:780px;margin:0 auto;padding:8rem 5vw 5rem;position:relative;z-index:10}
/* ─── PAGE HEADER ─── */
.journal-header{margin-bottom:3.5rem;text-align:center}
.journal-title{font-family:'Cinzel Decorative',serif;font-size:clamp(2rem,5vw,3.2rem);font-weight:900;color:var(--gold-l);text-shadow:0 0 40px rgba(201,168,76,.25);margin-bottom:.6rem}
.journal-sub{font-family:'JetBrains Mono',monospace;font-size:.72rem;color:var(--teal);letter-spacing:.2em;text-transform:uppercase}
/* ─── POST CARD ─── */
.post-card{
position:relative;overflow:hidden;
background:linear-gradient(135deg,rgba(10,16,36,.93),rgba(6,10,22,.97));
border:1px solid var(--bdr);padding:2.8rem 3rem;
clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px));
margin-bottom:3rem}
.post-card::before{
content:'';position:absolute;top:0;left:0;right:0;height:2px;
background:linear-gradient(90deg,transparent,var(--gold),var(--teal),var(--violet),transparent);
background-size:200%;animation:shimmer 4s linear infinite}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.post-card::after{
content:'';position:absolute;inset:0;pointer-events:none;
background:radial-gradient(ellipse 80% 50% at 50% 0%,rgba(201,168,76,.06),transparent 65%)}
/* post meta */
.post-meta{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.4rem;position:relative;z-index:2}
.post-date{font-family:'JetBrains Mono',monospace;font-size:.68rem;color:var(--teal);letter-spacing:.15em;text-transform:uppercase}
.post-tag{font-family:'JetBrains Mono',monospace;font-size:.63rem;color:var(--gold);letter-spacing:.1em;padding:.18rem .6rem;border:1px solid rgba(201,168,76,.3);background:rgba(201,168,76,.05)}
.post-sep{color:var(--dim);opacity:.4;font-size:.7rem}
/* post title */
.post-title{font-family:'Cinzel',serif;font-size:clamp(1.3rem,3vw,1.85rem);font-weight:700;color:var(--gold-l);line-height:1.25;margin-bottom:1.8rem;position:relative;z-index:2}
/* post body */
.post-body{position:relative;z-index:2}
.post-body p{font-family:'Rajdhani',sans-serif;font-size:1rem;line-height:1.85;color:var(--text);margin-bottom:1.3rem}
.post-body p:last-child{margin-bottom:0}
/* metrics bar */
.post-metrics{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.8rem;margin-bottom:1.8rem;position:relative;z-index:2}
.post-metric{font-family:'JetBrains Mono',monospace;font-size:.64rem;color:var(--gold);padding:.26rem .6rem;background:rgba(201,168,76,.07);border:1px solid rgba(201,168,76,.15)}
/* post links */
.post-links{display:flex;flex-wrap:wrap;gap:.9rem;position:relative;z-index:2}
.post-link{
font-family:'Rajdhani',sans-serif;font-size:.82rem;font-weight:700;
letter-spacing:.18em;text-transform:uppercase;color:var(--teal);text-decoration:none;
display:inline-flex;align-items:center;gap:.5rem;
transition:gap .2s,color .2s}
.post-link:hover{gap:1rem;color:var(--gold-l)}
/* ─── CONSTRUCTION ZONE ─── */
.construction-zone{position:relative;margin-top:2rem;margin-bottom:3rem}
.tape{
position:relative;width:100%;height:38px;overflow:hidden;
background:repeating-linear-gradient(-45deg,#f5c518,#f5c518 20px,#1a1a1a 20px,#1a1a1a 40px);
background-size:56px 56px;
opacity:.85;box-shadow:0 4px 20px rgba(0,0,0,.5);
animation:scrolltape 8s linear infinite}
@keyframes scrolltape{to{background-position:56px 0}}
.tape-top{transform:rotate(-1deg);margin-bottom:0}
.tape-bottom{transform:rotate(.8deg);margin-top:0}
.wip-inner{
background:linear-gradient(135deg,rgba(10,16,36,.92),rgba(6,10,22,.96));
border:1px solid rgba(201,168,76,.15);
border-top:none;border-bottom:none;
padding:2.8rem 3rem;text-align:center}
.wip-title{
font-family:'Cinzel',serif;font-size:clamp(1rem,2.5vw,1.4rem);
font-weight:700;color:var(--gold);letter-spacing:.12em;text-transform:uppercase;
margin-bottom:.7rem}
.wip-sub{
font-family:'JetBrains Mono',monospace;font-size:.68rem;
color:var(--dim);letter-spacing:.1em;line-height:1.8}
/* ─── BACK LINK ─── */
.back-wrap{text-align:center;padding-bottom:3rem;position:relative;z-index:10}
.back-link{
font-family:'Rajdhani',sans-serif;font-size:.84rem;font-weight:700;
letter-spacing:.2em;text-transform:uppercase;text-decoration:none;
padding:.88rem 2.1rem;display:inline-block;position:relative;
color:var(--gold);border:1px solid var(--bdr-b);
transition:all .3s;
clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px))}
.back-link:hover{background:rgba(201,168,76,.08);transform:translateY(-3px);box-shadow:0 10px 36px rgba(201,168,76,.2)}
/* ─── RESPONSIVE ─── */
@media(max-width:768px){
.post-card{padding:2rem 1.6rem}
.wip-inner{padding:2rem 1.6rem}
.journal-wrap{padding:7rem 4vw 4rem}
}
@media(max-width:480px){
.post-card{padding:1.6rem 1.2rem;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px))}
.post-title{font-size:1.2rem}
}
</style>
</head>
<body>
<canvas id="starfield"></canvas>
<!-- NAV -->
<nav>
<a href="index.html" class="nav-logo">M<span>.</span>R</a>
<a href="index.html" class="nav-back">← Portfolio</a>
</nav>
<!-- JOURNAL CONTENT -->
<div class="journal-wrap">
<!-- Page header -->
<div class="journal-header">
<h1 class="journal-title">Journal</h1>
<p class="journal-sub">Field notes from building at the edge of AI.</p>
</div>
<!-- Published post -->
<article class="post-card">
<div class="post-meta">
<span class="post-date">April 24, 2026</span>
<span class="post-sep">·</span>
<span class="post-tag">Competition</span>
<span class="post-tag">Agentic AI</span>
<span class="post-tag">LLMOps</span>
</div>
<h2 class="post-title">We Won. Here's What I Actually Learned.</h2>
<div class="post-body">
<p>Team Synapse just won 1st place at the 2026 UMD Smith Agentic AI Challenge. $4,000. Real industry problem. Built and shipped in a day.</p>
<p>The problem came from OnAsset Intelligence — pharmaceutical shipments moving across the world, live sensor data streaming in real time, and operations teams consistently finding out about failures too late. Temperature deviations, shock events, routing delays — by the time the alert reaches the right person, the damage is already downstream.</p>
<p>We built an AI Cargo Monitor: 8 agents that coordinate the moment a shipment is at risk — flagging compliance issues, finding backup facilities, rerouting carriers, rescheduling patient appointments, and drafting insurance claims. A human stays in the loop and signs off before anything is acted on.</p>
<p>The decision I'm most proud of: only 2–3 of those 8 agents use an LLM. The rest are deterministic. Pharma logistics doesn't need creativity — it needs auditable, traceable decisions that hold up to scrutiny. Knowing when not to use an LLM turned out to be the real engineering challenge.</p>
<p>Grateful to have figured that out alongside Karthik Ramanathan, Nikhil Sumesh, Rahul Sharma and Yash Oulkar — and to Professor Manmohan Aseri and the Robert H. Smith School of Business for building a challenge around problems that actually matter to someone.</p>
<img
src="assets/images/Team_Synapse.jpg"
alt="Team Synapse at the 2026 UMD Smith Agentic AI Challenge"
style="width:100%;display:block;object-fit:cover;max-height:420px;border:1px solid rgba(201,168,76,.25);border-radius:4px;margin:1.8rem 0 .8rem"
>
<p style="font-family:'JetBrains Mono',monospace;font-size:.62rem;color:#5a6a9a;letter-spacing:.12em;text-align:center;margin-bottom:1.8rem;text-transform:uppercase">
Team Synapse · UMD Smith Agentic AI Challenge · April 24, 2026 · 1st Place
</p>
</div>
<div class="post-metrics">
<span class="post-metric">🏆 1st Place</span>
<span class="post-metric">$4,000 Prize</span>
<span class="post-metric">8-Agent System</span>
<span class="post-metric">Built in 30 Days</span>
</div>
<div class="post-links">
<a href="https://lnkd.in/ehMHMRPv" target="_blank" class="post-link">View Demo →</a>
</div>
</article>
<!-- Construction zone for future posts -->
<div class="construction-zone">
<div class="tape tape-top"></div>
<div class="wip-inner">
<div class="wip-title">More Field Notes Loading...</div>
<div class="wip-sub">RL training runs · Genshin theorycrafting · archery form breakdowns<br>and whatever rabbit holes come next.</div>
</div>
<div class="tape tape-bottom"></div>
</div>
<!-- Back link -->
<div class="back-wrap">
<a href="index.html" class="back-link">← Back to Portfolio</a>
</div>
</div>
<script>
/* starfield */
(function() {
var canvas = document.getElementById('starfield');
if (!canvas) return;
var ctx = canvas.getContext('2d');
var W, H, stars = [];
function resize() { W = canvas.width = window.innerWidth; H = canvas.height = window.innerHeight; }
resize();
window.addEventListener('resize', function() { resize(); mkStars(); });
function mkStars() {
stars = [];
for (var i = 0; i < 80; i++) {
stars.push({ x: Math.random()*W, y: Math.random()*H, r: Math.random()*1.4+.2,
a: Math.random(), tw: Math.random()*Math.PI*2 });
}
}
mkStars();
function draw(t) {
ctx.clearRect(0, 0, W, H);
stars.forEach(function(s) {
var tw = Math.sin(t*.0008 + s.tw)*.35 + .65;
ctx.beginPath();
ctx.arc(s.x, s.y, s.r, 0, Math.PI*2);
ctx.fillStyle = 'rgba(255,255,255,' + (s.a * tw) + ')';
ctx.fill();
});
requestAnimationFrame(draw);
}
requestAnimationFrame(draw);
})();
</script>
</body>
</html>