Skip to content

Commit 150c193

Browse files
ValeyardsValeyards
committed
Update with new styling
1 parent eccafa2 commit 150c193

4 files changed

Lines changed: 138 additions & 36 deletions

File tree

‎_pages/about.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ I am deeply indebted to everyone who has supported me in my academic career.
4040
</ul>
4141
</div>
4242

43-
# 📝 Publications
43+
# 📝 Selected Publications
4444
{% include_relative pubs.md %}
4545

4646

‎_pages/image/pubs/1763999594176.png‎

240 KB
Loading

‎_pages/image/pubs/1763999597401.png‎

240 KB
Loading

‎_pages/pubs.md‎

Lines changed: 137 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,137 @@
11
<head>
22
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
3+
<style>
4+
.spotlight-btn {
5+
position: relative;
6+
display: inline-block;
7+
padding: 0.75em 1.5em;
8+
background-color: #1e3a5f;
9+
color: rgba(255, 255, 255, 0.6);
10+
text-decoration: none !important;
11+
border-radius: 4px;
12+
font-weight: 500;
13+
overflow: hidden;
14+
--mouse-x: 50%;
15+
--mouse-y: 50%;
16+
}
17+
18+
.spotlight-btn:hover {
19+
text-decoration: none !important;
20+
}
21+
22+
.spotlight-btn::before {
23+
content: '';
24+
position: absolute;
25+
width: 0;
26+
height: 0;
27+
left: var(--mouse-x);
28+
top: var(--mouse-y);
29+
border-radius: 50%;
30+
background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 40%, transparent 70%);
31+
transform: translate(-50%, -50%);
32+
transition: width 0.4s ease, height 0.4s ease, opacity 0.3s ease;
33+
pointer-events: none;
34+
opacity: 0;
35+
}
36+
37+
.spotlight-btn:hover::before {
38+
width: 150px;
39+
height: 150px;
40+
opacity: 1;
41+
}
42+
43+
.spotlight-btn i {
44+
position: relative;
45+
z-index: 1;
46+
margin-right: 0.5em;
47+
transition: color 0.2s ease;
48+
color: rgba(255, 255, 255, 0.6);
49+
}
50+
51+
.spotlight-btn i.highlight {
52+
color: #66b3ff;
53+
}
54+
55+
.spotlight-btn span {
56+
position: relative;
57+
z-index: 1;
58+
}
59+
60+
.spotlight-btn .word {
61+
position: relative;
62+
display: inline-block;
63+
transition: color 0.2s ease;
64+
}
65+
66+
.spotlight-btn .word.highlight {
67+
}
68+
</style>
69+
<script>
70+
document.addEventListener('DOMContentLoaded', function() {
71+
const btn = document.querySelector('.spotlight-btn');
72+
if (!btn) return;
73+
74+
btn.addEventListener('mousemove', function(e) {
75+
const rect = this.getBoundingClientRect();
76+
const x = e.clientX - rect.left;
77+
const y = e.clientY - rect.top;
78+
this.style.setProperty('--mouse-x', x + 'px');
79+
this.style.setProperty('--mouse-y', y + 'px');
80+
});
81+
82+
function getRandomRainbowColor() {
83+
const hue = Math.floor(Math.random() * 360);
84+
return `hsl(${hue}, 100%, 70%)`;
85+
}
86+
87+
const icon = btn.querySelector('i');
88+
const span = btn.querySelector('span');
89+
90+
function clearHighlights() {
91+
if (icon) {
92+
icon.classList.remove('highlight');
93+
icon.style.color = '';
94+
}
95+
if (span) {
96+
span.querySelectorAll('.word').forEach(w => {
97+
w.classList.remove('highlight');
98+
w.style.color = '';
99+
});
100+
}
101+
}
102+
103+
if (icon) {
104+
icon.addEventListener('mouseenter', function() {
105+
clearHighlights();
106+
this.classList.add('highlight');
107+
});
108+
}
109+
110+
if (span) {
111+
const text = span.textContent;
112+
const words = text.split(/\s+/);
113+
span.innerHTML = words.map(word => `<span class="word">${word}</span>`).join(' ');
114+
115+
const wordElements = span.querySelectorAll('.word');
116+
117+
wordElements.forEach(wordEl => {
118+
wordEl.addEventListener('mouseenter', function() {
119+
clearHighlights();
120+
this.classList.add('highlight');
121+
this.style.color = getRandomRainbowColor();
122+
});
123+
});
124+
125+
span.addEventListener('mouseleave', function() {
126+
clearHighlights();
127+
});
128+
}
129+
130+
btn.addEventListener('mouseleave', function(e) {
131+
clearHighlights();
132+
});
133+
});
134+
</script>
3135
</head>
4136

5137

@@ -93,38 +225,8 @@ X. Y. Wang†, J. H. Zhao†, E. Marostica, **W. Yuan**, J. T. Jin, J. Y. Zhang,
93225
</div>
94226

95227

96-
<ul class="pub-list">
97-
98-
<li class="pub-item">
99-
<div class="pub-left">
100-
<span class="venue-tag">Remote Sensing</span>
101-
</div>
102-
<div class="pub-right">
103-
<span class="pub-title">
104-
<a href="https://www.mdpi.com/2072-4292/16/11/1956">
105-
ESatSR: Enhancing Super-Resolution for Satellite Remote Sensing Images with State Space Model and Spatial Context
106-
</a>
107-
</span>
108-
<span class="pub-authors">
109-
Y. X. Wang†, <strong>W. Yuan†</strong>, X. Fang, B. J. Lin#
110-
</span>
111-
</div>
112-
</li>
113-
114-
<li class="pub-item">
115-
<div class="pub-left">
116-
<span class="venue-tag">BSPC</span>
117-
</div>
118-
<div class="pub-right">
119-
<span class="pub-title">
120-
<a href="https://doi.org/10.1016/j.bspc.2023.105821">
121-
Automatic Tooth Segmentation for Patients with Alveolar Clefts Guided by Tooth Descriptors
122-
</a>
123-
</span>
124-
<span class="pub-authors">
125-
Y. H. Gong, J. Zhang, J. Cheng, <strong>W. Yuan</strong>, L. He#
126-
</span>
127-
</div>
128-
</li>
129-
130-
</ul>
228+
<div style="text-align: center; margin: 2em 0;">
229+
<a href="https://scholar.google.com/citations?user=iJTVJf8AAAAJ" class="spotlight-btn">
230+
<i class="fas fa-graduation-cap"></i><span>View All Publications on Google Scholar</span>
231+
</a>
232+
</div>

0 commit comments

Comments
 (0)