Skip to content

Commit dde7dc9

Browse files
Lliar-liarLliar-liar
committed
Add SkillLens related project link
1 parent cd9a0a0 commit dde7dc9

2 files changed

Lines changed: 236 additions & 0 deletions

File tree

‎index.html‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -244,6 +244,115 @@
244244
text-transform: none;
245245
}
246246

247+
.related-project {
248+
display: inline-flex;
249+
align-items: center;
250+
gap: 14px;
251+
max-width: 100%;
252+
margin-top: 28px;
253+
padding: 10px 22px 10px 14px;
254+
color: inherit;
255+
background: rgba(255, 255, 255, 0.72);
256+
border: 1px solid rgba(124, 58, 237, 0.20);
257+
border-radius: 999px;
258+
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
259+
text-align: left;
260+
text-decoration: none;
261+
backdrop-filter: blur(8px);
262+
transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
263+
}
264+
265+
.related-project:hover {
266+
color: inherit;
267+
transform: translateY(-2px);
268+
border-color: rgba(124, 58, 237, 0.42);
269+
box-shadow: 0 12px 28px rgba(124, 58, 237, 0.14);
270+
}
271+
272+
.related-icon {
273+
position: relative;
274+
flex: 0 0 auto;
275+
width: 28px;
276+
height: 28px;
277+
border-radius: 10px;
278+
background: linear-gradient(135deg, #4f46e5, #7c3aed 56%, #ec4899);
279+
}
280+
281+
.related-icon::before {
282+
content: "";
283+
position: absolute;
284+
top: 6px;
285+
left: 6px;
286+
width: 10px;
287+
height: 10px;
288+
border: 2px solid #ffffff;
289+
border-radius: 999px;
290+
}
291+
292+
.related-icon::after {
293+
content: "";
294+
position: absolute;
295+
right: 7px;
296+
bottom: 7px;
297+
width: 8px;
298+
height: 2px;
299+
background: #ffffff;
300+
border-radius: 999px;
301+
transform: rotate(45deg);
302+
transform-origin: center;
303+
}
304+
305+
.related-text {
306+
display: flex;
307+
min-width: 0;
308+
flex-direction: column;
309+
gap: 2px;
310+
}
311+
312+
.related-tag {
313+
color: var(--violet);
314+
font-family: var(--mono);
315+
font-size: 0.62rem;
316+
font-weight: 700;
317+
letter-spacing: 0.14em;
318+
text-transform: uppercase;
319+
}
320+
321+
.related-title {
322+
color: var(--ink);
323+
font-size: 0.98rem;
324+
font-weight: 600;
325+
line-height: 1.3;
326+
}
327+
328+
.related-title strong {
329+
font-family: var(--display);
330+
font-size: 1.16rem;
331+
font-weight: 700;
332+
font-style: italic;
333+
background: linear-gradient(135deg, #4f46e5, #ec4899);
334+
-webkit-background-clip: text;
335+
background-clip: text;
336+
-webkit-text-fill-color: transparent;
337+
}
338+
339+
.related-summary {
340+
color: var(--muted);
341+
font-size: 0.8rem;
342+
line-height: 1.35;
343+
}
344+
345+
.related-arrow {
346+
flex: 0 0 auto;
347+
color: var(--red);
348+
font-size: 1.1rem;
349+
transition: transform 180ms ease;
350+
}
351+
352+
.related-project:hover .related-arrow {
353+
transform: translateX(4px);
354+
}
355+
247356
.hero-ledger {
248357
position: relative;
249358
overflow: hidden;
@@ -1491,6 +1600,15 @@ <h1>SkillOpt</h1>
14911600
Video
14921601
</a>
14931602
</div>
1603+
<a class="related-project" href="https://microsoft.github.io/SkillLens/" target="_blank" rel="noopener" aria-label="Open the SkillLens project page">
1604+
<span class="related-icon" aria-hidden="true"></span>
1605+
<span class="related-text">
1606+
<span class="related-tag">Related project</span>
1607+
<span class="related-title"><strong>SkillLens</strong> studies model-generated agent skills.</span>
1608+
<span class="related-summary">A companion project page from Microsoft Research.</span>
1609+
</span>
1610+
<span class="related-arrow" aria-hidden="true">-&gt;</span>
1611+
</a>
14941612
</div>
14951613

14961614
<aside class="hero-ledger" aria-label="Key result summary">

‎skillopt.html‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -244,6 +244,115 @@
244244
text-transform: none;
245245
}
246246

247+
.related-project {
248+
display: inline-flex;
249+
align-items: center;
250+
gap: 14px;
251+
max-width: 100%;
252+
margin-top: 28px;
253+
padding: 10px 22px 10px 14px;
254+
color: inherit;
255+
background: rgba(255, 255, 255, 0.72);
256+
border: 1px solid rgba(124, 58, 237, 0.20);
257+
border-radius: 999px;
258+
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
259+
text-align: left;
260+
text-decoration: none;
261+
backdrop-filter: blur(8px);
262+
transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
263+
}
264+
265+
.related-project:hover {
266+
color: inherit;
267+
transform: translateY(-2px);
268+
border-color: rgba(124, 58, 237, 0.42);
269+
box-shadow: 0 12px 28px rgba(124, 58, 237, 0.14);
270+
}
271+
272+
.related-icon {
273+
position: relative;
274+
flex: 0 0 auto;
275+
width: 28px;
276+
height: 28px;
277+
border-radius: 10px;
278+
background: linear-gradient(135deg, #4f46e5, #7c3aed 56%, #ec4899);
279+
}
280+
281+
.related-icon::before {
282+
content: "";
283+
position: absolute;
284+
top: 6px;
285+
left: 6px;
286+
width: 10px;
287+
height: 10px;
288+
border: 2px solid #ffffff;
289+
border-radius: 999px;
290+
}
291+
292+
.related-icon::after {
293+
content: "";
294+
position: absolute;
295+
right: 7px;
296+
bottom: 7px;
297+
width: 8px;
298+
height: 2px;
299+
background: #ffffff;
300+
border-radius: 999px;
301+
transform: rotate(45deg);
302+
transform-origin: center;
303+
}
304+
305+
.related-text {
306+
display: flex;
307+
min-width: 0;
308+
flex-direction: column;
309+
gap: 2px;
310+
}
311+
312+
.related-tag {
313+
color: var(--violet);
314+
font-family: var(--mono);
315+
font-size: 0.62rem;
316+
font-weight: 700;
317+
letter-spacing: 0.14em;
318+
text-transform: uppercase;
319+
}
320+
321+
.related-title {
322+
color: var(--ink);
323+
font-size: 0.98rem;
324+
font-weight: 600;
325+
line-height: 1.3;
326+
}
327+
328+
.related-title strong {
329+
font-family: var(--display);
330+
font-size: 1.16rem;
331+
font-weight: 700;
332+
font-style: italic;
333+
background: linear-gradient(135deg, #4f46e5, #ec4899);
334+
-webkit-background-clip: text;
335+
background-clip: text;
336+
-webkit-text-fill-color: transparent;
337+
}
338+
339+
.related-summary {
340+
color: var(--muted);
341+
font-size: 0.8rem;
342+
line-height: 1.35;
343+
}
344+
345+
.related-arrow {
346+
flex: 0 0 auto;
347+
color: var(--red);
348+
font-size: 1.1rem;
349+
transition: transform 180ms ease;
350+
}
351+
352+
.related-project:hover .related-arrow {
353+
transform: translateX(4px);
354+
}
355+
247356
.hero-ledger {
248357
position: relative;
249358
overflow: hidden;
@@ -1491,6 +1600,15 @@ <h1>SkillOpt</h1>
14911600
Video
14921601
</a>
14931602
</div>
1603+
<a class="related-project" href="https://microsoft.github.io/SkillLens/" target="_blank" rel="noopener" aria-label="Open the SkillLens project page">
1604+
<span class="related-icon" aria-hidden="true"></span>
1605+
<span class="related-text">
1606+
<span class="related-tag">Related project</span>
1607+
<span class="related-title"><strong>SkillLens</strong> studies model-generated agent skills.</span>
1608+
<span class="related-summary">A companion project page from Microsoft Research.</span>
1609+
</span>
1610+
<span class="related-arrow" aria-hidden="true">-&gt;</span>
1611+
</a>
14941612
</div>
14951613

14961614
<aside class="hero-ledger" aria-label="Key result summary">

0 commit comments

Comments
 (0)