Skip to content

Commit 534780d

Browse files
savini98savini98
committed
Add Jaseci highlight card and enhance theme card styles for improved visibility
1 parent c3c30bc commit 534780d

File tree

2 files changed

+256
-48
lines changed

2 files changed

+256
-48
lines changed

‎index.html‎

Lines changed: 40 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -85,28 +85,30 @@ <h3 class="nav-title">links</h3>
8585

8686
<!-- Hero / Abstract -->
8787
<section id="abstract" class="hero-section">
88+
<a href="https://www.jaseci.org/" class="jaseci-highlight-card" target="_blank" rel="noopener">
89+
<div class="jhc-badge">NSF POSE Funded Open-Source Ecosystem</div>
90+
<div class="jhc-content">
91+
<div class="jhc-icon">
92+
<svg width="22" height="22" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5.22 14.78a.75.75 0 001.06 0l7.22-7.22v5.69a.75.75 0 001.5 0v-7.5a.75.75 0 00-.75-.75h-7.5a.75.75 0 000 1.5h5.69l-7.22 7.22a.75.75 0 000 1.06z" clip-rule="evenodd"/></svg>
93+
</div>
94+
<div class="jhc-text">
95+
<div class="jhc-title">Visit Jaseci.org</div>
96+
<div class="jhc-desc">Docs, tutorials, community &amp; everything Jaseci</div>
97+
</div>
98+
</div>
99+
</a>
100+
88101
<h1>Jaseci: An Open-Source AI-Native Language and Runtime Stack</h1>
89-
<p class="hero-sub">From Agentic AI Development to Systems Research</p>
102+
<p class="hero-sub-highlight">From Agentic AI Development to Systems Research</p>
90103
<p class="subtitle"><span class="gradient-text">Mar 22 (Sunday) Morning Session · ASPLOS'26 @ Pittsburgh</span></p>
91104
<p class="hero-venue"><span class="venue-label">Venue</span> Warhol Room</p>
92-
<a href="https://www.jaseci.org/" class="jaseci-cta" target="_blank" rel="noopener">
93-
Visit Jaseci.org — Docs, tutorials &amp; community
94-
<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5.22 14.78a.75.75 0 001.06 0l7.22-7.22v5.69a.75.75 0 001.5 0v-7.5a.75.75 0 00-.75-.75h-7.5a.75.75 0 000 1.5h5.69l-7.22 7.22a.75.75 0 000 1.06z" clip-rule="evenodd"/></svg>
95-
</a>
96105

97106
<div class="text-block">
98107
<p>
99108
Agentic AI development is broken. Too many tools, too many languages, too much glue code.
100109
<strong>Jaseci</strong> fixes this: an open-source language and runtime extending Python with native AI
101-
and scaling constructs. Write less, build more — no boilerplate, no DevOps, no manual prompts.
110+
and scaling constructs. Prompt less, smile more — no boilerplate, no DevOps, no manual prompts.
102111
</p>
103-
<p>In this tutorial, you will learn:</p>
104-
<ul>
105-
<li><strong>(a)</strong> How to build multi-agent AI systems using Jaseci's graph-based walker paradigm with <strong>zero boilerplate</strong></li>
106-
<li><strong>(b)</strong> How the <code>by llm()</code> construct lets <strong>the compiler write prompts</strong> for you</li>
107-
<li><strong>(c)</strong> How Jaseci <strong>auto-deploys</strong> from laptop to Kubernetes with zero DevOps configuration</li>
108-
<li><strong>(d)</strong> How Jaseci's Python-transpiling frontend <strong>fixes PyTorch 2 FX graph breaks</strong> for ML compiler research</li>
109-
</ul>
110112
</div>
111113

112114
<div class="stats-row">
@@ -123,37 +125,31 @@ <h1>Jaseci: An Open-Source AI-Native Language and Runtime Stack</h1>
123125
<div class="stat-lbl">Prompts Required</div>
124126
</div>
125127
</div>
126-
127-
<div class="nsf-badge">NSF POSE Funded &nbsp;&bull;&nbsp; Open-Source Ecosystem</div>
128-
129-
<div class="cta-block">
130-
<p>Interested in attending? Let us know so we can plan accordingly and keep you updated.</p>
131-
<a href="https://sites.google.com/view/cryptorch-asplos-2026-tutorial" class="cta-btn" target="_blank" rel="noopener">
132-
Let us know if you are interested!
133-
<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z" clip-rule="evenodd"/></svg>
134-
</a>
135-
</div>
136128
</section>
137129

138130
<!-- Tutorial Themes -->
139131
<section id="themes">
140132
<h2>Tutorial Themes</h2>
141133
<div class="themes-grid">
142134
<div class="theme-card theme-1">
135+
<div class="theme-number">01</div>
143136
<div class="theme-label">Theme 1</div>
144-
<h3>Hands-On Agentic AI Development</h3>
145-
<p class="theme-audience">For developers and students</p>
146-
<p>Write <code>by llm()</code> and the compiler writes the prompts. Build multi-agent systems with walkers on graphs. Zero boilerplate, zero glue code.</p>
137+
<div class="theme-title">Hands-On Agentic AI Development</div>
138+
<div class="theme-audience">For developers and students</div>
139+
<div class="theme-desc">Write <code class="code-hl">by llm()</code> and the compiler writes the prompts. Build multi-agent systems with walkers on graphs. Zero boilerplate.</div>
140+
<div class="theme-glow"></div>
147141
</div>
148142
<div class="theme-card theme-2">
143+
<div class="theme-number">02</div>
149144
<div class="theme-label">Theme 2</div>
150-
<h3>Research the Jaseci Stack Enables</h3>
151-
<p class="theme-audience">For students and researchers</p>
152-
<ul class="theme-list">
153-
<li><strong>Agentic AI</strong> — Native language constructs for multi-agent systems</li>
154-
<li><strong>Auto-Deploy &amp; Scale</strong> — Laptop to Kubernetes, zero config. Auto monolith-to-microservice</li>
155-
<li><strong>ML Compilers</strong> — Python-transpiling frontend that fixes PyTorch 2 FX graph breaks</li>
156-
</ul>
145+
<div class="theme-title">Research the Jaseci Stack Enables</div>
146+
<div class="theme-audience">For students and researchers</div>
147+
<div class="research-items">
148+
<div class="research-item"><div class="research-dot"></div><div><strong>Agentic AI</strong> — Native language constructs for multi-agent systems</div></div>
149+
<div class="research-item"><div class="research-dot"></div><div><strong>Auto-Deploy &amp; Scale</strong> — Laptop to Kubernetes, zero config. Auto monolith-to-microservice</div></div>
150+
<div class="research-item"><div class="research-dot"></div><div><strong>ML Compilers</strong> — Python-transpiling frontend that fixes PyTorch 2 FX graph breaks</div></div>
151+
</div>
152+
<div class="theme-glow"></div>
157153
</div>
158154
</div>
159155
</section>
@@ -199,6 +195,17 @@ <h3>Organizer Name</h3>
199195
</div>
200196
</section>
201197

198+
<!-- CTA -->
199+
<section id="attend" class="cta-section">
200+
<div class="cta-block">
201+
<p>Interested in attending? Let us know so we can plan accordingly and keep you updated.</p>
202+
<a href="https://sites.google.com/view/cryptorch-asplos-2026-tutorial" class="cta-btn" target="_blank" rel="noopener">
203+
Let us know if you are interested!
204+
<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z" clip-rule="evenodd"/></svg>
205+
</a>
206+
</div>
207+
</section>
208+
202209
</article>
203210

204211
<aside class="on-this-page">

‎styles.css‎

Lines changed: 216 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -346,6 +346,136 @@ section:last-child { border-bottom: none; }
346346
margin-top: 8px;
347347
}
348348

349+
/* Jaseci Highlight Card */
350+
.jaseci-highlight-card {
351+
display: block;
352+
text-decoration: none;
353+
padding: 20px 24px;
354+
margin-bottom: 32px;
355+
background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(234, 88, 12, 0.05) 100%);
356+
border: 1px solid rgba(245, 158, 11, 0.25);
357+
border-radius: var(--radius-lg);
358+
transition: all 0.3s ease;
359+
position: relative;
360+
overflow: hidden;
361+
}
362+
363+
.jaseci-highlight-card::before {
364+
content: '';
365+
position: absolute;
366+
top: 0;
367+
right: 0;
368+
width: 200px;
369+
height: 200px;
370+
background: radial-gradient(circle, rgba(245, 158, 11, 0.15) 0%, transparent 70%);
371+
pointer-events: none;
372+
}
373+
374+
.jaseci-highlight-card:hover {
375+
transform: translateY(-3px);
376+
box-shadow: 0 12px 32px rgba(245, 158, 11, 0.2);
377+
border-color: rgba(245, 158, 11, 0.5);
378+
}
379+
380+
.jhc-badge {
381+
display: inline-block;
382+
font-size: 0.7rem;
383+
font-weight: 700;
384+
text-transform: uppercase;
385+
letter-spacing: 0.08em;
386+
color: var(--primary-color);
387+
background: rgba(245, 158, 11, 0.15);
388+
padding: 5px 12px;
389+
border-radius: 4px;
390+
margin-bottom: 12px;
391+
}
392+
393+
.jhc-content {
394+
display: flex;
395+
align-items: center;
396+
gap: 14px;
397+
}
398+
399+
.jhc-icon {
400+
flex-shrink: 0;
401+
width: 44px;
402+
height: 44px;
403+
border-radius: 10px;
404+
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
405+
display: flex;
406+
align-items: center;
407+
justify-content: center;
408+
color: #0f1117;
409+
}
410+
411+
.jhc-icon svg {
412+
width: 20px;
413+
height: 20px;
414+
}
415+
416+
.jhc-text {
417+
flex: 1;
418+
}
419+
420+
.jhc-title {
421+
font-size: 1.1rem;
422+
font-weight: 700;
423+
color: var(--text-main);
424+
margin-bottom: 2px;
425+
}
426+
427+
.jhc-desc {
428+
font-size: 0.9rem;
429+
color: var(--text-muted);
430+
}
431+
432+
/* Theme Card Additional Styles */
433+
.theme-desc {
434+
font-size: 0.95rem;
435+
color: var(--text-muted);
436+
line-height: 1.65;
437+
}
438+
439+
.code-hl {
440+
font-family: 'JetBrains Mono', 'Courier New', monospace;
441+
background: rgba(245, 158, 11, 0.15);
442+
border: 1px solid rgba(245, 158, 11, 0.2);
443+
border-radius: 5px;
444+
padding: 2px 8px;
445+
font-size: 0.85em;
446+
color: var(--primary-color);
447+
}
448+
449+
.research-items {
450+
display: flex;
451+
flex-direction: column;
452+
gap: 12px;
453+
margin-top: 8px;
454+
}
455+
456+
.research-item {
457+
display: flex;
458+
gap: 12px;
459+
align-items: flex-start;
460+
font-size: 0.95rem;
461+
color: var(--text-muted);
462+
line-height: 1.5;
463+
}
464+
465+
.research-dot {
466+
width: 8px;
467+
height: 8px;
468+
min-width: 8px;
469+
background: var(--secondary-color);
470+
border-radius: 50%;
471+
margin-top: 6px;
472+
}
473+
474+
.research-item strong {
475+
color: var(--primary-color);
476+
font-weight: 600;
477+
}
478+
349479
/* CTA Block */
350480
.cta-block {
351481
margin: 40px 0 0;
@@ -403,50 +533,121 @@ h2 {
403533
margin-top: -4px;
404534
}
405535

536+
.hero-sub-highlight {
537+
font-size: 1.5rem;
538+
font-weight: 600;
539+
color: var(--text-main);
540+
margin-bottom: 12px;
541+
margin-top: -8px;
542+
padding: 8px 0;
543+
border-left: 4px solid var(--primary-color);
544+
padding-left: 16px;
545+
background: linear-gradient(90deg, rgba(245, 158, 11, 0.08) 0%, transparent 100%);
546+
}
547+
548+
[data-theme="light"] .hero-sub-highlight {
549+
background: linear-gradient(90deg, rgba(245, 158, 11, 0.12) 0%, transparent 100%);
550+
}
551+
406552
/* Tutorial Themes */
407553
.themes-grid {
408554
display: grid;
409555
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
410-
gap: 20px;
556+
gap: 24px;
411557
margin-top: 28px;
412558
}
413559

414560
.theme-card {
415561
border-radius: var(--radius-lg);
416-
padding: 24px 28px;
417-
transition: transform 0.2s, box-shadow 0.2s;
562+
padding: 28px 28px 32px;
563+
transition: transform 0.3s, box-shadow 0.3s;
564+
position: relative;
565+
overflow: hidden;
418566
}
419567

420568
.theme-card:hover {
421-
transform: translateY(-2px);
422-
box-shadow: var(--shadow-lg);
569+
transform: translateY(-4px);
570+
box-shadow: 0 20px 40px rgba(245, 158, 11, 0.15);
423571
}
424572

425573
.theme-card.theme-1 {
426-
background: rgba(245,158,11,0.05);
427-
border: 1px solid rgba(245,158,11,0.18);
574+
background: linear-gradient(145deg, rgba(245,158,11,0.12) 0%, rgba(245,158,11,0.03) 100%);
575+
border: 1px solid rgba(245,158,11,0.25);
576+
}
577+
578+
.theme-card.theme-1:hover {
579+
border-color: rgba(245,158,11,0.5);
428580
}
429581

430582
.theme-card.theme-2 {
431-
background: rgba(234,88,12,0.05);
432-
border: 1px solid rgba(234,88,12,0.18);
583+
background: linear-gradient(145deg, rgba(234,88,12,0.12) 0%, rgba(234,88,12,0.03) 100%);
584+
border: 1px solid rgba(234,88,12,0.25);
585+
}
586+
587+
.theme-card.theme-2:hover {
588+
border-color: rgba(234,88,12,0.5);
433589
}
434590

591+
.theme-number {
592+
font-size: 4rem;
593+
font-weight: 800;
594+
position: absolute;
595+
top: -10px;
596+
right: 16px;
597+
opacity: 0.08;
598+
line-height: 1;
599+
pointer-events: none;
600+
}
601+
602+
.theme-1 .theme-number { color: var(--primary-color); }
603+
.theme-2 .theme-number { color: var(--secondary-color); }
604+
605+
.theme-glow {
606+
position: absolute;
607+
width: 150px;
608+
height: 150px;
609+
border-radius: 50%;
610+
filter: blur(60px);
611+
opacity: 0.15;
612+
pointer-events: none;
613+
top: -30px;
614+
right: -30px;
615+
transition: opacity 0.3s;
616+
}
617+
618+
.theme-card:hover .theme-glow {
619+
opacity: 0.25;
620+
}
621+
622+
.theme-1 .theme-glow { background: var(--primary-color); }
623+
.theme-2 .theme-glow { background: var(--secondary-color); }
624+
435625
.theme-label {
436626
font-size: 0.72rem;
437627
font-weight: 700;
438628
text-transform: uppercase;
439629
letter-spacing: 0.1em;
440-
margin-bottom: 6px;
630+
margin-bottom: 8px;
631+
display: inline-block;
632+
padding: 4px 10px;
633+
border-radius: 4px;
634+
}
635+
636+
.theme-1 .theme-label {
637+
color: var(--primary-color);
638+
background: rgba(245, 158, 11, 0.15);
441639
}
442640

443-
.theme-1 .theme-label { color: var(--primary-color); }
444-
.theme-2 .theme-label { color: var(--secondary-color); }
641+
.theme-2 .theme-label {
642+
color: var(--secondary-color);
643+
background: rgba(234, 88, 12, 0.15);
644+
}
445645

446-
.theme-card h3 {
447-
font-size: 1.15rem;
646+
.theme-title {
647+
font-size: 1.3rem;
448648
font-weight: 700;
449-
margin-bottom: 4px;
649+
margin-bottom: 6px;
650+
color: var(--text-main);
450651
}
451652

452653
.theme-audience {

0 commit comments

Comments
 (0)