Skip to content

Commit b64c9a9

Browse files
rkn2rkn2
committed
Refine Research tabs visuals
- Replaced emojis with SVG icons in tab buttons - Added representative images to all research sub-area cards - Changed 'DAMAGE' tab accent color from brick red to deep blue - Styled sub-card images with hover effects
1 parent f44961a commit b64c9a9

File tree

2 files changed

+80
-4
lines changed

2 files changed

+80
-4
lines changed

‎index.html‎

Lines changed: 47 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -193,17 +193,44 @@ <h2 class="section-title">Research Areas</h2>
193193
<div class="research-tabs-container">
194194
<div class="research-tabs">
195195
<button class="tab-btn active" data-tab="damage">
196-
<span class="tab-icon">🏚️</span>
196+
<span class="tab-icon">
197+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
198+
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
199+
stroke-linejoin="round">
200+
<path d="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z" />
201+
<path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2" />
202+
<path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2" />
203+
<path d="M10 6h4" />
204+
<path d="M10 10h4" />
205+
<path d="M10 14h4" />
206+
<path d="M10 18h4" />
207+
</svg>
208+
</span>
197209
<span class="tab-text">DAMAGE</span>
198210
<span class="tab-subtitle">Understanding Vulnerability</span>
199211
</button>
200212
<button class="tab-btn" data-tab="data">
201-
<span class="tab-icon">📊</span>
213+
<span class="tab-icon">
214+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
215+
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
216+
stroke-linejoin="round">
217+
<rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
218+
<line x1="12" x2="12" y1="8" y2="16" />
219+
<line x1="8" x2="16" y1="12" y2="12" />
220+
</svg>
221+
</span>
202222
<span class="tab-text">DATA</span>
203223
<span class="tab-subtitle">Extracting Knowledge</span>
204224
</button>
205225
<button class="tab-btn" data-tab="design">
206-
<span class="tab-icon">✨</span>
226+
<span class="tab-icon">
227+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
228+
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
229+
stroke-linejoin="round">
230+
<circle cx="12" cy="12" r="10" />
231+
<path d="m9 12 2 2 4-4" />
232+
</svg>
233+
</span>
207234
<span class="tab-text">DESIGN</span>
208235
<span class="tab-subtitle">Creating Resilience</span>
209236
</button>
@@ -215,6 +242,7 @@ <h2 class="section-title">Research Areas</h2>
215242
<div class="tab-pane active" id="damage">
216243
<div class="research-sub-grid">
217244
<div class="research-card sub-card">
245+
<img src="images/research/drone.jpeg" alt="Digital Documentation" class="sub-card-image">
218246
<h3>Digital Documentation & Damage Mapping</h3>
219247
<p>We capture the physical reality of heritage structures through photogrammetry, laser
220248
scanning, and UAV-based imaging, creating high-fidelity 3D models that serve as
@@ -224,13 +252,17 @@ <h3>Digital Documentation & Damage Mapping</h3>
224252
records that track deterioration over time and inform intervention priorities.</p>
225253
</div>
226254
<div class="research-card sub-card">
255+
<img src="images/research/gpr_analysis.png" alt="Structural Diagnostics"
256+
class="sub-card-image">
227257
<h3>Structural Diagnostics</h3>
228258
<p>Using non-destructive evaluation techniques like Ground Penetrating Radar and thermal
229259
imaging, we see beneath the surface of historic buildings without compromising their
230260
integrity. Our data-driven models automate the interpretation of GPR scans to reveal
231261
hidden structural elements, voids, and material properties.</p>
232262
</div>
233263
<div class="research-card sub-card">
264+
<img src="images/research/disaster_resilience.png" alt="Post-Disaster Assessment"
265+
class="sub-card-image">
234266
<h3>Post-Disaster Assessment</h3>
235267
<p>When disasters strike historic communities, rapid and accurate damage assessment is
236268
important for recovery. We develop frameworks and tools for post-event reconnaissance
@@ -246,6 +278,8 @@ <h3>Post-Disaster Assessment</h3>
246278
<div class="tab-pane" id="data">
247279
<div class="research-sub-grid">
248280
<div class="research-card sub-card">
281+
<img src="images/research/image_segmentation.jpg" alt="Computer Vision & AI"
282+
class="sub-card-image">
249283
<h3>Computer Vision & AI</h3>
250284
<p>We design and train convolutional neural networks specifically for the challenges of
251285
historic structures—complex geometries, heterogeneous materials, and damage patterns
@@ -256,6 +290,8 @@ <h3>Computer Vision & AI</h3>
256290
workflows.</p>
257291
</div>
258292
<div class="research-card sub-card">
293+
<img src="images/research/multimodal.jpg" alt="Multi-Modal Data Fusion"
294+
class="sub-card-image">
259295
<h3>Multi-Modal Data Fusion</h3>
260296
<p>Heritage structures generate data from diverse sources: laser scans, thermal imaging,
261297
moisture sensors, historical records, and community surveys. We use factor analysis and
@@ -265,6 +301,8 @@ <h3>Multi-Modal Data Fusion</h3>
265301
physical deterioration to social and environmental factors.</p>
266302
</div>
267303
<div class="research-card sub-card">
304+
<img src="images/research/fem_analysis.jpg" alt="Machine Learning-Informed Physics"
305+
class="sub-card-image">
268306
<h3>Machine Learning-Informed Physics</h3>
269307
<p>We use machine learning for dimensionality reduction on finite element model datasets to
270308
identify which features actually drive structural vulnerability. By letting real
@@ -281,6 +319,8 @@ <h3>Machine Learning-Informed Physics</h3>
281319
<div class="tab-pane" id="design">
282320
<div class="research-sub-grid">
283321
<div class="research-card sub-card">
322+
<img src="images/research/latent_space.jpg" alt="Adaptive Reuse & Optimization"
323+
class="sub-card-image">
284324
<h3>Adaptive Reuse & Optimization</h3>
285325
<p>Historic buildings must evolve to meet contemporary needs while preserving their
286326
character and integrity. We integrate Shape Grammar with artificial intelligence to
@@ -291,6 +331,8 @@ <h3>Adaptive Reuse & Optimization</h3>
291331
breathing new life into existing structures.</p>
292332
</div>
293333
<div class="research-card sub-card">
334+
<img src="images/research/historic_construction.png" alt="Resilience Frameworks"
335+
class="sub-card-image">
294336
<h3>Resilience Frameworks</h3>
295337
<p>We create actionable frameworks that help historic communities prepare for, withstand,
296338
and recover from disasters and climate change. Our work connects social science insights
@@ -301,6 +343,8 @@ <h3>Resilience Frameworks</h3>
301343
happens.</p>
302344
</div>
303345
<div class="research-card sub-card">
346+
<img src="images/research/multimodal.jpg" alt="Knowledge Transfer & Decision Support"
347+
class="sub-card-image">
304348
<h3>Knowledge Transfer & Decision Support</h3>
305349
<p>Technical research only creates impact when it reaches the people who make decisions
306350
about heritage. We translate complex data science and engineering findings into guidance

‎styles.css‎

Lines changed: 33 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@
66
--primary-blue-light: hsl(200, 60%, 85%);
77
--accent-teal: hsl(185, 55%, 50%);
88
--accent-brick: hsl(15, 45%, 45%);
9+
/* Keeping for legacy, but using new blue for Damage */
10+
--accent-blue-deep: hsl(220, 60%, 40%);
11+
/* New color for Damage tab */
912
--accent-warm: hsl(30, 40%, 60%);
1013

1114
/* Neutral colors */
@@ -755,6 +758,21 @@ img {
755758
/* Default border color */
756759
transition: all var(--transition-base);
757760
height: 100%;
761+
display: flex;
762+
flex-direction: column;
763+
}
764+
765+
.sub-card-image {
766+
width: 100%;
767+
height: 180px;
768+
object-fit: cover;
769+
border-radius: var(--radius-md);
770+
margin-bottom: var(--spacing-md);
771+
transition: transform 0.3s ease;
772+
}
773+
774+
.sub-card:hover .sub-card-image {
775+
transform: scale(1.02);
758776
}
759777

760778
.sub-card:hover {
@@ -772,11 +790,12 @@ img {
772790
color: var(--text-secondary);
773791
line-height: 1.6;
774792
font-size: 1rem;
793+
flex-grow: 1;
775794
}
776795

777796
/* Color coding for sub-cards based on parent tab context - handled via CSS if we wrap them or just generic */
778797
#damage .sub-card {
779-
border-left-color: var(--accent-brick);
798+
border-left-color: var(--accent-blue-deep);
780799
}
781800

782801
#data .sub-card {
@@ -787,6 +806,19 @@ img {
787806
border-left-color: var(--accent-teal);
788807
}
789808

809+
/* Active tab button colors */
810+
.tab-btn[data-tab="damage"].active {
811+
background: var(--accent-blue-deep);
812+
}
813+
814+
.tab-btn[data-tab="data"].active {
815+
background: var(--primary-blue);
816+
}
817+
818+
.tab-btn[data-tab="design"].active {
819+
background: var(--accent-teal);
820+
}
821+
790822
/* Mobile adjustments */
791823
@media (max-width: 768px) {
792824
.research-tabs {

0 commit comments

Comments
 (0)