Skip to content

Commit 54fb2e9

Browse files
ryanphuangryanphuang
committed
update recent projects
1 parent 0f0837c commit 54fb2e9

9 files changed

Lines changed: 181 additions & 93 deletions

File tree

‎_includes/banner.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div class="main_menu">
33
<nav class="navbar navbar-expand-lg navbar-light">
44
<div class="container box_1620">
5-
<a class="navbar-brand logo_h" href="{{ '/' | relative_url }}"><img src="{{ '/assets/img/logo.png' | relative_url }}" alt=""></a>
5+
<a class="navbar-brand logo_h" href="{{ '/' | relative_url }}"><img src="{{ '/assets/img/logo-dark.png' | relative_url }}" alt="OrderLab"></a>
66
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
77
<span class="icon-bar"></span>
88
<span class="icon-bar"></span>

‎assets/css/modern.css‎

Lines changed: 131 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -120,25 +120,27 @@ a:hover {
120120
margin-top: 12px;
121121
margin-bottom: 10px;
122122
padding: 10px 14px;
123-
border-radius: 999px;
124-
border: 1px solid var(--line);
125-
background: rgba(255, 255, 255, 0.94);
123+
border-radius: 12px;
124+
border: 1px solid rgba(22, 49, 84, 0.75);
125+
background: linear-gradient(180deg, #132b49, #10243d);
126126
backdrop-filter: blur(8px);
127127
box-shadow: var(--shadow-sm);
128128
}
129129

130130
.header_area .navbar-brand {
131131
margin-right: 14px;
132-
border-radius: 12px;
133-
padding: 0.28rem 0.6rem;
134-
background: #f3f6fb;
135-
border: 1px solid #e2eaf5;
132+
border-radius: 10px;
133+
padding: 0.26rem 0.56rem;
134+
background: #f7f9fd;
135+
border: 1px solid #dbe5f2;
136+
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
136137
}
137138

138139
.header_area .navbar-brand img {
139-
max-height: 46px;
140+
max-height: 42px;
140141
width: auto;
141-
filter: contrast(1.18) brightness(0.82) saturate(1.15);
142+
display: block;
143+
filter: none;
142144
}
143145

144146
.header_area .navbar .nav .nav-item {
@@ -152,16 +154,16 @@ a:hover {
152154
letter-spacing: 0.08em;
153155
text-transform: uppercase;
154156
border-radius: 999px;
155-
color: #1d304a;
157+
color: rgba(238, 245, 255, 0.95);
156158
padding: 8px 11px;
157159
line-height: 1.2;
158160
transition: all 0.2s ease;
159161
}
160162

161163
.header_area .navbar .nav .nav-item:hover .nav-link,
162164
.header_area .navbar .nav .nav-item.active .nav-link {
163-
color: var(--brand);
164-
background: rgba(31, 79, 143, 0.1);
165+
color: #ffffff;
166+
background: rgba(255, 255, 255, 0.16);
165167
}
166168

167169
.header_area.navbar_fixed .main_menu {
@@ -183,7 +185,7 @@ a:hover {
183185
.hero-banner {
184186
position: relative;
185187
overflow: hidden;
186-
border-radius: 28px;
188+
border-radius: 12px;
187189
width: calc(100% - 24px);
188190
max-width: 1230px;
189191
margin: 0 auto 28px;
@@ -200,7 +202,7 @@ a:hover {
200202
}
201203

202204
.hero-banner--sm {
203-
border-radius: 20px;
205+
border-radius: 10px;
204206
width: min(1160px, calc(100% - 24px));
205207
padding: 4.4rem 0 3.3rem;
206208
}
@@ -418,6 +420,104 @@ a:hover {
418420
color: var(--ink);
419421
}
420422

423+
/* Project showcase */
424+
.project-showcase__grid {
425+
display: grid;
426+
grid-template-columns: repeat(12, minmax(0, 1fr));
427+
gap: 14px;
428+
}
429+
430+
.project-card {
431+
border: 1px solid var(--line);
432+
border-radius: var(--radius-lg);
433+
background: #ffffff;
434+
box-shadow: var(--shadow-sm);
435+
overflow: hidden;
436+
display: flex;
437+
flex-direction: column;
438+
min-height: 100%;
439+
}
440+
441+
.project-card--feature {
442+
grid-column: span 12;
443+
display: grid;
444+
grid-template-columns: 1.15fr 1fr;
445+
}
446+
447+
.project-showcase__grid > .project-card:not(.project-card--feature) {
448+
grid-column: span 4;
449+
}
450+
451+
.project-card__media {
452+
background: #eef3fa;
453+
overflow: hidden;
454+
}
455+
456+
.project-card__media img {
457+
width: 100%;
458+
height: 100%;
459+
min-height: 188px;
460+
object-fit: cover;
461+
object-position: center;
462+
display: block;
463+
}
464+
465+
.project-card--feature .project-card__media img {
466+
min-height: 300px;
467+
}
468+
469+
.project-card__media img.project-logo-fit {
470+
object-fit: contain;
471+
object-position: center;
472+
background: #f3f6fb;
473+
padding: 0.75rem 1rem;
474+
}
475+
476+
.project-card__media img.project-xinda-fit {
477+
object-fit: cover;
478+
object-position: center top;
479+
}
480+
481+
.project-card__content {
482+
padding: 1.1rem 1.15rem 1.2rem;
483+
display: flex;
484+
flex-direction: column;
485+
gap: 0.7rem;
486+
}
487+
488+
.project-card__content h3 {
489+
margin: 0;
490+
font-size: 1.42rem;
491+
line-height: 1.25;
492+
}
493+
494+
.project-showcase__grid > .project-card:not(.project-card--feature) .project-card__content h3 {
495+
font-size: 1.08rem;
496+
}
497+
498+
.project-card__content p {
499+
margin: 0;
500+
font-size: 0.95rem;
501+
}
502+
503+
.project-card__content .button {
504+
margin-top: auto;
505+
align-self: flex-start;
506+
}
507+
508+
.project-badge {
509+
display: inline-block;
510+
border-radius: 999px;
511+
border: 1px solid #f0c7c7;
512+
background: #fff4f4;
513+
color: #b33535;
514+
font-weight: 700;
515+
font-size: 0.75rem;
516+
letter-spacing: 0.04em;
517+
text-transform: uppercase;
518+
padding: 0.22rem 0.58rem;
519+
}
520+
421521
/* Buttons */
422522
.button {
423523
border-radius: 999px;
@@ -725,7 +825,8 @@ a:hover {
725825
.blog-card:hover,
726826
.newslist li:hover,
727827
.publications li:hover,
728-
.team_members_area ul li:hover {
828+
.team_members_area ul li:hover,
829+
.project-card:hover {
729830
transform: translateY(-3px);
730831
box-shadow: var(--shadow-md);
731832
border-color: #c4d6ea;
@@ -746,12 +847,12 @@ a:hover {
746847
margin-bottom: 0;
747848
border-radius: 0;
748849
border: 0;
850+
background: linear-gradient(180deg, #132b49, #10243d);
749851
}
750852

751853
.header_area .navbar-brand {
752-
background: transparent;
753-
border: 0;
754-
padding: 0;
854+
border-radius: 8px;
855+
padding: 0.2rem 0.45rem;
755856
}
756857

757858
.header_area .navbar .nav .nav-item .nav-link {
@@ -795,6 +896,14 @@ a:hover {
795896
padding: 1.25rem;
796897
}
797898

899+
.project-card--feature {
900+
grid-template-columns: 1fr;
901+
}
902+
903+
.project-showcase__grid > .project-card:not(.project-card--feature) {
904+
grid-column: span 6;
905+
}
906+
798907
.sponsor-grid {
799908
grid-template-columns: repeat(2, minmax(0, 1fr));
800909
}
@@ -814,6 +923,10 @@ a:hover {
814923
grid-template-columns: 1fr;
815924
}
816925

926+
.project-showcase__grid > .project-card:not(.project-card--feature) {
927+
grid-column: span 12;
928+
}
929+
817930
.blog-grid {
818931
grid-template-columns: 1fr;
819932
}

‎assets/img/favicon.ico‎

5.3 KB
Binary file not shown.

‎assets/img/favicon.png‎

-376 Bytes
Binary file not shown.

‎assets/img/logo-dark.png‎

58.8 KB
Loading

‎assets/img/project/phoenix.png‎

348 KB
Loading

‎assets/img/project/trainverify.png‎

158 KB
Loading

‎assets/img/project/xinda.png‎

171 KB
Loading

‎index.html‎

Lines changed: 49 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -111,91 +111,66 @@ <h2>What We Build</h2>
111111
<!--================ End scope section =================-->
112112

113113
<!--================ Start recent projects section =================-->
114-
<div class="recent_projects section-margin">
114+
<section class="section-margin project-showcase">
115115
<div class="container">
116116
<div class="section-intro text-center">
117117
<h2 class="section-intro__title">Recent Projects</h2>
118118
<p class="section-intro__subtitle">Representative systems and tooling from recent lab work.</p>
119119
</div>
120-
<div class="row mt-4">
121-
<div class="col-lg-12">
122-
<div class="owl-theme owl-carousel active_course">
123-
<div class="single_recent_project">
124-
<div class="recent_project_head">
125-
<img class="img-fluid" src="{{ '/assets/img/project/traincheck_logo.png' | relative_url }}" alt="TrainCheck" />
126-
</div>
127-
<div class="recent_project_content">
128-
<h4 class="mb-3">
129-
<a href="#">Catching Silent Errors in Deep Learning Training</a>
130-
</h4>
131-
<p>
132-
Silent errors in deep learning training can waste significant GPU resources and lead to low-quality models.
133-
TrainCheck learns semantic invariants from healthy runs and enforces them at runtime.
134-
</p>
135-
<div class="recent_project_meta mt-4">
136-
<a class="button button-light" href="{{ '/paper/traincheck-osdi25-preprint.pdf' | relative_url }}" target="_blank">Read More</a>
137-
</div>
138-
</div>
139-
</div>
120+
<div class="project-showcase__grid mt-4">
121+
<article class="project-card project-card--feature">
122+
<div class="project-card__media">
123+
<img class="project-logo-fit" src="{{ '/assets/img/project/traincheck_logo.png' | relative_url }}" alt="TrainCheck" />
124+
</div>
125+
<div class="project-card__content">
126+
<h3>Catching Silent Errors in Deep Learning Training</h3>
127+
<p>
128+
TrainCheck learns semantic invariants from healthy runs and enforces checks at runtime,
129+
catching silent training errors before they consume GPU time and degrade model quality.
130+
</p>
131+
<p class="project-badge">OSDI 2025</p>
132+
<a class="button button-light" href="{{ '/paper/traincheck-osdi25-preprint.pdf' | relative_url }}" target="_blank">Read Paper</a>
133+
</div>
134+
</article>
140135

141-
<div class="single_recent_project">
142-
<div class="recent_project_head">
143-
<img class="img-fluid" src="{{ '/assets/img/project/watchdog.jpg' | relative_url }}" alt="Watchdog" />
144-
</div>
145-
<div class="recent_project_content">
146-
<h4 class="mb-3">
147-
<a href="#">Generating Watchdogs to Localize Partial Failure</a>
148-
</h4>
149-
<p>
150-
We synthesize custom watchdog monitors that mimic core program logic to detect and localize partial failures.
151-
<span class="text-danger">Best Paper Award, NSDI '20</span>
152-
</p>
153-
<div class="recent_project_meta mt-4">
154-
<a class="button button-light" href="{{ '/paper/omegagen-nsdi20-preprint.pdf' | relative_url }}" target="_blank">Read More</a>
155-
</div>
156-
</div>
157-
</div>
136+
<article class="project-card">
137+
<div class="project-card__media">
138+
<img src="{{ '/assets/img/project/trainverify.png' | relative_url }}" alt="TrainVerify figure" />
139+
</div>
140+
<div class="project-card__content">
141+
<h3>TrainVerify: Equivalence-Based Verification for Distributed LLM Training</h3>
142+
<p>TrainVerify verifies semantic equivalence across distributed LLM training executions to catch subtle correctness issues.</p>
143+
<p class="project-badge">SOSP 2025</p>
144+
<a class="button button-light" href="{{ '/paper/trainverify-sosp25.pdf' | relative_url }}" target="_blank">Read Paper</a>
145+
</div>
146+
</article>
158147

159-
<div class="single_recent_project">
160-
<div class="recent_project_head">
161-
<img class="img-fluid" src="{{ '/assets/img/project/panorama.jpg' | relative_url }}" alt="Panorama" />
162-
</div>
163-
<div class="recent_project_content">
164-
<h4 class="mb-3">
165-
<a href="#">Capturing Observability to Detect Gray Failure</a>
166-
</h4>
167-
<p>
168-
Panorama captures requester-observable symptoms to detect and report gray failures
169-
that traditional telemetry often misses.
170-
</p>
171-
<div class="recent_project_meta mt-4">
172-
<a class="button button-light" href="{{ '/paper/panorama-osdi18.pdf' | relative_url }}" target="_blank">Read More</a>
173-
</div>
174-
</div>
175-
</div>
148+
<article class="project-card">
149+
<div class="project-card__media">
150+
<img src="{{ '/assets/img/project/phoenix.png' | relative_url }}" alt="Phoenix figure" />
151+
</div>
152+
<div class="project-card__content">
153+
<h3>Phoenix: Optimistic Recovery via Partial Process State Preservation</h3>
154+
<p>Phoenix improves software availability by preserving partial process state and enabling low-overhead optimistic recovery.</p>
155+
<p class="project-badge">SOSP 2025</p>
156+
<a class="button button-light" href="{{ '/paper/phoenix-sosp25.pdf' | relative_url }}" target="_blank">Read Paper</a>
157+
</div>
158+
</article>
176159

177-
<div class="single_recent_project">
178-
<div class="recent_project_head">
179-
<img class="img-fluid" src="{{ '/assets/img/project/leaseos.jpg' | relative_url }}" alt="LeaseOS" />
180-
</div>
181-
<div class="recent_project_content">
182-
<h4 class="mb-3">
183-
<a href="#">Lease-Based Utilitarian Mobile OS</a>
184-
</h4>
185-
<p>
186-
LeaseOS adapts lease mechanisms to mobile resource management, mitigating energy bugs
187-
while using utility signals to drive policy decisions.
188-
</p>
189-
<div class="recent_project_meta mt-4">
190-
<a class="button button-light" href="{{ '/paper/leaseos-asplos19.pdf' | relative_url }}" target="_blank">Read More</a>
191-
</div>
192-
</div>
193-
</div>
160+
<article class="project-card">
161+
<div class="project-card__media">
162+
<img class="project-xinda-fit" src="{{ '/assets/img/project/xinda.png' | relative_url }}" alt="Xinda figure" />
194163
</div>
195-
</div>
164+
<div class="project-card__content">
165+
<h3>Enhancing Slow-Fault Tolerance in Distributed Systems</h3>
166+
<p>Xinda diagnoses and mitigates slow faults with adaptive mechanisms tailored to modern distributed system behavior.</p>
167+
<p class="project-badge">NSDI 2025</p>
168+
<a class="button button-light" href="{{ '/paper/xinda-nsdi25-preprint.pdf' | relative_url }}" target="_blank">Read Paper</a>
169+
</div>
170+
</article>
196171
</div>
197172
</div>
198-
</div>
173+
</section>
199174
<!--================ End recent projects section =================-->
200175

201176
<!--================ Start blog preview section =================-->

0 commit comments

Comments
 (0)