Skip to content

Commit 412c6b3

Browse files
ryanphuangryanphuang
committed
update recent projects style
1 parent 54fb2e9 commit 412c6b3

3 files changed

Lines changed: 145 additions & 73 deletions

File tree

‎assets/css/modern.css‎

Lines changed: 87 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,7 @@ a:hover {
120120
margin-top: 12px;
121121
margin-bottom: 10px;
122122
padding: 10px 14px;
123-
border-radius: 12px;
123+
border-radius: 0;
124124
border: 1px solid rgba(22, 49, 84, 0.75);
125125
background: linear-gradient(180deg, #132b49, #10243d);
126126
backdrop-filter: blur(8px);
@@ -185,7 +185,7 @@ a:hover {
185185
.hero-banner {
186186
position: relative;
187187
overflow: hidden;
188-
border-radius: 12px;
188+
border-radius: 0;
189189
width: calc(100% - 24px);
190190
max-width: 1230px;
191191
margin: 0 auto 28px;
@@ -202,7 +202,7 @@ a:hover {
202202
}
203203

204204
.hero-banner--sm {
205-
border-radius: 10px;
205+
border-radius: 0;
206206
width: min(1160px, calc(100% - 24px));
207207
padding: 4.4rem 0 3.3rem;
208208
}
@@ -483,6 +483,7 @@ a:hover {
483483
display: flex;
484484
flex-direction: column;
485485
gap: 0.7rem;
486+
height: 100%;
486487
}
487488

488489
.project-card__content h3 {
@@ -501,7 +502,7 @@ a:hover {
501502
}
502503

503504
.project-card__content .button {
504-
margin-top: auto;
505+
margin-top: 0.55rem;
505506
align-self: flex-start;
506507
}
507508

@@ -518,6 +519,86 @@ a:hover {
518519
padding: 0.22rem 0.58rem;
519520
}
520521

522+
.project-carousel-shell {
523+
position: relative;
524+
}
525+
526+
.project-carousel .project-card {
527+
height: 100%;
528+
margin: 0 2px;
529+
}
530+
531+
.project-carousel .owl-stage {
532+
display: flex;
533+
}
534+
535+
.project-carousel .owl-item {
536+
display: flex;
537+
}
538+
539+
.project-carousel .owl-item .project-card {
540+
display: flex;
541+
flex-direction: column;
542+
width: 100%;
543+
}
544+
545+
.project-carousel .project-card__media {
546+
height: 220px;
547+
}
548+
549+
.project-carousel .project-card__media img {
550+
min-height: 220px;
551+
}
552+
553+
.project-carousel .project-card__content {
554+
min-height: 292px;
555+
}
556+
557+
.project-carousel .project-card__content .project-badge {
558+
margin-top: auto;
559+
}
560+
561+
.project-carousel .owl-nav {
562+
margin-top: 18px;
563+
display: flex;
564+
justify-content: center;
565+
gap: 0.55rem;
566+
position: static !important;
567+
transform: none !important;
568+
}
569+
570+
.project-carousel .owl-nav button.owl-prev,
571+
.project-carousel .owl-nav button.owl-next {
572+
width: 38px;
573+
height: 38px;
574+
border-radius: 999px !important;
575+
border: 1px solid #c9d7ea !important;
576+
background: #ffffff !important;
577+
color: #2a4f80 !important;
578+
display: inline-flex !important;
579+
align-items: center;
580+
justify-content: center;
581+
transition: all 0.2s ease;
582+
position: static !important;
583+
top: auto !important;
584+
left: auto !important;
585+
right: auto !important;
586+
transform: none !important;
587+
}
588+
589+
.project-carousel .owl-nav button.owl-prev:hover,
590+
.project-carousel .owl-nav button.owl-next:hover {
591+
border-color: var(--brand) !important;
592+
background: var(--brand) !important;
593+
color: #ffffff !important;
594+
}
595+
596+
.project-carousel .owl-nav .carousel-arrow {
597+
font-size: 1.2rem;
598+
line-height: 1;
599+
font-weight: 700;
600+
}
601+
521602
/* Buttons */
522603
.button {
523604
border-radius: 999px;
@@ -896,12 +977,8 @@ a:hover {
896977
padding: 1.25rem;
897978
}
898979

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;
980+
.project-carousel .project-card__content {
981+
min-height: 0;
905982
}
906983

907984
.sponsor-grid {
@@ -923,10 +1000,6 @@ a:hover {
9231000
grid-template-columns: 1fr;
9241001
}
9251002

926-
.project-showcase__grid > .project-card:not(.project-card--feature) {
927-
grid-column: span 12;
928-
}
929-
9301003
.blog-grid {
9311004
grid-template-columns: 1fr;
9321005
}

‎assets/js/main.js‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -24,17 +24,17 @@ $(function() {
2424
/*----------------------------------------------------*/
2525
function active_course() {
2626
if ($(".active_course").length) {
27-
$(".active_course").owlCarousel({
28-
loop: true,
29-
margin: 20,
30-
items: 3,
31-
nav: true,
32-
dots: false,
33-
responsiveClass: true,
34-
thumbs: true,
35-
thumbsPrerendered: true,
36-
navText: ["<img src='assets/img/prev.png'>", "<img src='assets/img/next.png'>"],
37-
responsive: {
27+
$(".active_course").owlCarousel({
28+
loop: true,
29+
margin: 20,
30+
items: 3,
31+
nav: true,
32+
dots: false,
33+
responsiveClass: true,
34+
thumbs: true,
35+
thumbsPrerendered: true,
36+
navText: ["<span class='carousel-arrow' aria-hidden='true'>&lsaquo;</span>", "<span class='carousel-arrow' aria-hidden='true'>&rsaquo;</span>"],
37+
responsive: {
3838
0: {
3939
items: 1,
4040
margin: 0

‎index.html‎

Lines changed: 47 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -117,57 +117,56 @@ <h2>What We Build</h2>
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="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>
120+
<div class="project-carousel-shell mt-4">
121+
<div class="owl-theme owl-carousel active_course project-carousel">
122+
<article class="project-card">
123+
<div class="project-card__media">
124+
<img class="project-logo-fit" src="{{ '/assets/img/project/traincheck_logo.png' | relative_url }}" alt="TrainCheck" />
125+
</div>
126+
<div class="project-card__content">
127+
<h3>Catching Silent Errors in Deep Learning Training</h3>
128+
<p>TrainCheck learns semantic invariants from healthy runs and enforces checks at runtime to catch silent training errors early.</p>
129+
<p class="project-badge">OSDI 2025</p>
130+
<a class="button button-light" href="{{ '/paper/traincheck-osdi25-preprint.pdf' | relative_url }}" target="_blank">Read Paper</a>
131+
</div>
132+
</article>
135133

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>
134+
<article class="project-card">
135+
<div class="project-card__media">
136+
<img src="{{ '/assets/img/project/trainverify.png' | relative_url }}" alt="TrainVerify figure" />
137+
</div>
138+
<div class="project-card__content">
139+
<h3>TrainVerify: Equivalence-Based Verification for Distributed LLM Training</h3>
140+
<p>TrainVerify verifies semantic equivalence across distributed LLM training executions to catch subtle correctness issues.</p>
141+
<p class="project-badge">SOSP 2025</p>
142+
<a class="button button-light" href="{{ '/paper/trainverify-sosp25.pdf' | relative_url }}" target="_blank">Read Paper</a>
143+
</div>
144+
</article>
147145

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>
146+
<article class="project-card">
147+
<div class="project-card__media">
148+
<img src="{{ '/assets/img/project/phoenix.png' | relative_url }}" alt="Phoenix figure" />
149+
</div>
150+
<div class="project-card__content">
151+
<h3>Phoenix: Optimistic Recovery via Partial Process State Preservation</h3>
152+
<p>Phoenix improves availability by preserving partial process state and enabling low-overhead optimistic recovery.</p>
153+
<p class="project-badge">SOSP 2025</p>
154+
<a class="button button-light" href="{{ '/paper/phoenix-sosp25.pdf' | relative_url }}" target="_blank">Read Paper</a>
155+
</div>
156+
</article>
159157

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" />
163-
</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>
158+
<article class="project-card">
159+
<div class="project-card__media">
160+
<img class="project-xinda-fit" src="{{ '/assets/img/project/xinda.png' | relative_url }}" alt="Xinda figure" />
161+
</div>
162+
<div class="project-card__content">
163+
<h3>Enhancing Slow-Fault Tolerance in Distributed Systems</h3>
164+
<p>Xinda diagnoses and mitigates slow faults with adaptive mechanisms tailored to modern distributed system behavior.</p>
165+
<p class="project-badge">NSDI 2025</p>
166+
<a class="button button-light" href="{{ '/paper/xinda-nsdi25-preprint.pdf' | relative_url }}" target="_blank">Read Paper</a>
167+
</div>
168+
</article>
169+
</div>
171170
</div>
172171
</div>
173172
</section>

0 commit comments

Comments
 (0)