Skip to content

Commit 83fc900

Browse files
kshptlkshptl
committed
feat: Replace project list and fixed preview with interactive impact cards.
1 parent 7e50d0d commit 83fc900

File tree

3 files changed

+148
-179
lines changed

3 files changed

+148
-179
lines changed

‎assets/css/style.css‎

Lines changed: 87 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -219,49 +219,13 @@ a {
219219
/* Projects Section */
220220
.projects-section {
221221
padding-bottom: 200px;
222-
position: relative;
223-
}
224-
225-
/* Fixed Project Preview */
226-
.project-preview-wrapper {
227-
position: fixed;
228-
top: 50%;
229-
left: 50%;
230-
transform: translate(-50%, -50%);
231-
width: 600px;
232-
height: 400px;
233-
z-index: -1;
234-
/* Behind content */
235-
pointer-events: none;
236-
opacity: 0;
237-
transition: opacity 0.3s ease;
238-
overflow: hidden;
239-
}
240-
241-
.project-preview {
242-
width: 100%;
243-
height: 100%;
244-
background-size: cover;
245-
background-position: center;
246-
filter: grayscale(100%) contrast(1.2);
247-
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
248-
}
249-
250-
.project-preview::after {
251-
content: '';
252-
position: absolute;
253-
top: 0;
254-
left: 0;
255-
width: 100%;
256-
height: 100%;
257-
background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
258222
}
259223

260224
.section-header {
261225
display: flex;
262226
justify-content: space-between;
263227
align-items: flex-end;
264-
margin-bottom: 80px;
228+
margin-bottom: 60px;
265229
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
266230
padding-bottom: 20px;
267231
}
@@ -271,56 +235,104 @@ a {
271235
font-weight: 800;
272236
}
273237

274-
.section-header .count {
275-
font-family: var(--font-display);
276-
font-size: 1.5rem;
277-
color: var(--text-secondary);
238+
/* Impact Grid */
239+
.impact-grid {
240+
display: flex;
241+
flex-direction: column;
242+
gap: 20px;
278243
}
279244

280-
.project-list {
245+
.impact-card {
246+
position: relative;
247+
width: 100%;
248+
min-height: 300px;
249+
border: 1px solid rgba(255, 255, 255, 0.1);
250+
padding: 60px;
281251
display: flex;
282252
flex-direction: column;
253+
justify-content: center;
254+
overflow: hidden;
255+
transition: border-color 0.3s ease;
283256
}
284257

285-
.project-item {
286-
display: flex;
287-
align-items: center;
288-
padding: 60px 0;
289-
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
290-
position: relative;
291-
transition: padding 0.3s ease;
292-
background: transparent;
258+
.impact-card:hover {
259+
border-color: rgba(255, 255, 255, 0.3);
293260
}
294261

295-
.project-item:hover {
296-
padding: 80px 0;
262+
/* Local Background */
263+
.card-bg {
264+
position: absolute;
265+
top: 0;
266+
left: 0;
267+
width: 100%;
268+
height: 100%;
269+
background-size: cover;
270+
background-position: center;
271+
opacity: 0;
272+
transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
273+
z-index: 0;
274+
transform: scale(1.1);
275+
filter: brightness(0.6);
297276
}
298277

299-
.project-item:hover .project-name {
300-
transform: translateX(20px);
301-
color: var(--text-secondary);
278+
.impact-card:hover .card-bg {
279+
opacity: 1;
280+
transform: scale(1);
302281
}
303282

304-
.project-number {
305-
font-family: var(--font-display);
283+
/* Content */
284+
.card-content {
285+
position: relative;
286+
z-index: 2;
287+
}
288+
289+
.card-title {
290+
font-size: 3.5rem;
291+
margin-bottom: 10px;
292+
transition: transform 0.3s ease;
293+
}
294+
295+
.card-desc {
306296
font-size: 1.2rem;
307297
color: var(--text-secondary);
308-
width: 100px;
298+
max-width: 600px;
299+
margin-bottom: 30px;
300+
transition: color 0.3s ease;
309301
}
310302

311-
.project-name {
312-
font-size: 3rem;
313-
font-family: var(--font-display);
314-
font-weight: 700;
315-
flex-grow: 1;
316-
transition: transform 0.3s ease, color 0.3s ease;
303+
.impact-card:hover .card-desc {
304+
color: rgba(255, 255, 255, 0.9);
317305
}
318306

319-
.project-cat {
307+
.card-links {
308+
list-style: none;
309+
display: flex;
310+
flex-wrap: wrap;
311+
gap: 20px;
312+
transform: translateY(20px);
313+
opacity: 0;
314+
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
315+
}
316+
317+
.impact-card:hover .card-links {
318+
transform: translateY(0);
319+
opacity: 1;
320+
}
321+
322+
.card-links a {
320323
font-size: 1rem;
321-
color: var(--text-secondary);
322-
text-transform: uppercase;
323-
letter-spacing: 1px;
324+
border: 1px solid rgba(255, 255, 255, 0.3);
325+
padding: 8px 16px;
326+
border-radius: 100px;
327+
background: rgba(0, 0, 0, 0.5);
328+
backdrop-filter: blur(5px);
329+
transition: background 0.3s ease, border-color 0.3s ease;
330+
}
331+
332+
.card-links a:hover {
333+
background: #fff;
334+
color: #000;
335+
border-color: #fff;
324336
}
325337

326338
/* Footer */
@@ -392,22 +404,16 @@ a {
392404
font-size: 15vw;
393405
}
394406

395-
.project-item {
396-
flex-direction: column;
397-
align-items: flex-start;
398-
gap: 10px;
399-
}
400-
401-
.project-number {
402-
margin-bottom: 10px;
407+
.card-title {
408+
font-size: 2rem;
403409
}
404410

405-
.project-name {
406-
font-size: 2rem;
411+
.impact-card {
412+
padding: 40px 20px;
407413
}
408414

409-
.project-preview-wrapper {
410-
display: none;
411-
/* Hide preview on mobile */
415+
.card-links {
416+
opacity: 1;
417+
transform: translateY(0);
412418
}
413419
}

‎assets/js/main.js‎

Lines changed: 1 addition & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -134,42 +134,7 @@ document.addEventListener('DOMContentLoaded', () => {
134134
});
135135

136136

137-
// 4. Fixed Project Preview Logic
138-
const projectItems = document.querySelectorAll('.project-item');
139-
const previewWrapper = document.querySelector('.project-preview-wrapper');
140-
const previewImage = document.querySelector('.project-preview');
141-
142-
projectItems.forEach(item => {
143-
item.addEventListener('mouseenter', () => {
144-
const imageUrl = item.getAttribute('data-image');
145-
previewImage.style.backgroundImage = `url(${imageUrl})`;
146-
147-
// Reveal wrapper
148-
gsap.to(previewWrapper, {
149-
opacity: 1,
150-
duration: 0.3,
151-
scale: 1,
152-
ease: 'power2.out'
153-
});
154-
155-
// Slight zoom effect on image
156-
gsap.fromTo(previewImage,
157-
{ scale: 1.1 },
158-
{ scale: 1, duration: 0.5, ease: 'power2.out' }
159-
);
160-
});
161-
162-
item.addEventListener('mouseleave', () => {
163-
gsap.to(previewWrapper, {
164-
opacity: 0,
165-
duration: 0.3,
166-
scale: 0.95,
167-
ease: 'power2.out'
168-
});
169-
});
170-
});
171-
172-
// 5. GSAP Animations
137+
// 4. GSAP Animations
173138
gsap.registerPlugin(ScrollTrigger);
174139

175140
// Footer Parallax/Reveal

‎index.html‎

Lines changed: 60 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -73,69 +73,67 @@ <h1 class="hero-title">
7373
<section id="projects" class="projects-section">
7474
<div class="container">
7575
<div class="section-header">
76-
<h2>Selected Works</h2>
77-
<span class="count">07</span>
76+
<h2>Impact Areas</h2>
7877
</div>
7978

80-
<div class="project-list">
81-
<!-- Project 1 -->
82-
<a href="https://github.com/kshptl/Patient-Selection-for-Diabetes-Drug-Testing-using-EHR-Data"
83-
class="project-item" target="_blank"
84-
data-image="https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?q=80&w=2070&auto=format&fit=crop">
85-
<span class="project-number">01</span>
86-
<h3 class="project-name">Patient Selection</h3>
87-
<span class="project-cat">Machine Learning</span>
88-
</a>
89-
90-
<!-- Project 2 -->
91-
<a href="https://github.com/kshptl/Drug-Review-Sentiment-Analysis" class="project-item"
92-
target="_blank"
93-
data-image="https://images.unsplash.com/photo-1555435024-2c4d456b63be?q=80&w=2070&auto=format&fit=crop">
94-
<span class="project-number">02</span>
95-
<h3 class="project-name">Sentiment Analysis</h3>
96-
<span class="project-cat">NLP / Deep Learning</span>
97-
</a>
98-
99-
<!-- Project 3 -->
100-
<a href="https://github.com/kshptl/Pneumonia-Detection" class="project-item" target="_blank"
101-
data-image="https://images.unsplash.com/photo-1530026405186-ed1f139313f8?q=80&w=2070&auto=format&fit=crop">
102-
<span class="project-number">03</span>
103-
<h3 class="project-name">Pneumonia Detection</h3>
104-
<span class="project-cat">Computer Vision</span>
105-
</a>
106-
107-
<!-- Project 4 -->
108-
<a href="https://github.com/kshptl/covid-19-emissions" class="project-item" target="_blank"
109-
data-image="https://images.unsplash.com/photo-1611273426761-53c8577a3c18?q=80&w=2070&auto=format&fit=crop">
110-
<span class="project-number">04</span>
111-
<h3 class="project-name">Covid Emissions</h3>
112-
<span class="project-cat">Data Visualization</span>
113-
</a>
114-
115-
<!-- Project 5 -->
116-
<a href="https://github.com/kshptl/Plagarism-Checker-Algorithm" class="project-item" target="_blank"
117-
data-image="https://images.unsplash.com/photo-1455390582262-044cdead277a?q=80&w=2073&auto=format&fit=crop">
118-
<span class="project-number">05</span>
119-
<h3 class="project-name">Plagiarism Checker</h3>
120-
<span class="project-cat">Algorithm Design</span>
121-
</a>
122-
123-
<!-- Project 6 -->
124-
<a href="https://github.com/kshptl/Network-Communities-and-Clustering" class="project-item"
125-
target="_blank"
126-
data-image="https://images.unsplash.com/photo-1558494949-efc02570fbc9?q=80&w=2070&auto=format&fit=crop">
127-
<span class="project-number">06</span>
128-
<h3 class="project-name">Network Clustering</h3>
129-
<span class="project-cat">Network Analysis</span>
130-
</a>
131-
132-
<!-- Project 7 -->
133-
<a href="https://github.com/kshptl/Topic-Modeling" class="project-item" target="_blank"
134-
data-image="https://images.unsplash.com/photo-1504868584819-f8e8b4b6d7e3?q=80&w=2076&auto=format&fit=crop">
135-
<span class="project-number">07</span>
136-
<h3 class="project-name">Topic Modeling</h3>
137-
<span class="project-cat">NLP</span>
138-
</a>
79+
<div class="impact-grid">
80+
81+
<!-- Impact Card 1: Healthcare -->
82+
<div class="impact-card">
83+
<div class="card-bg"
84+
style="background-image: url('https://images.unsplash.com/photo-1579165466741-7f35a4755657?q=80&w=2000&auto=format&fit=crop');">
85+
</div>
86+
<div class="card-content">
87+
<h3 class="card-title">Advancing Healthcare</h3>
88+
<p class="card-desc">Leveraging ML to optimize drug testing and improve diagnostic accuracy.
89+
</p>
90+
<ul class="card-links">
91+
<li><a href="https://github.com/kshptl/Patient-Selection-for-Diabetes-Drug-Testing-using-EHR-Data"
92+
target="_blank">Patient Selection for Drug Testing &rarr;</a></li>
93+
<li><a href="https://github.com/kshptl/Pneumonia-Detection" target="_blank">Pneumonia
94+
Detection (CNN) &rarr;</a></li>
95+
</ul>
96+
</div>
97+
</div>
98+
99+
<!-- Impact Card 2: Intelligence -->
100+
<div class="impact-card">
101+
<div class="card-bg"
102+
style="background-image: url('https://images.unsplash.com/photo-1620712943543-bcc4688e7485?q=80&w=2000&auto=format&fit=crop');">
103+
</div>
104+
<div class="card-content">
105+
<h3 class="card-title">Deciphering Intelligence</h3>
106+
<p class="card-desc">Unlocking insights from text and patterns using NLP and advanced
107+
algorithms.</p>
108+
<ul class="card-links">
109+
<li><a href="https://github.com/kshptl/Drug-Review-Sentiment-Analysis"
110+
target="_blank">Drug Review Sentiment Analysis &rarr;</a></li>
111+
<li><a href="https://github.com/kshptl/Topic-Modeling" target="_blank">Topic Modeling
112+
(PLSA) &rarr;</a></li>
113+
<li><a href="https://github.com/kshptl/Plagarism-Checker-Algorithm"
114+
target="_blank">Plagiarism Checker &rarr;</a></li>
115+
</ul>
116+
</div>
117+
</div>
118+
119+
<!-- Impact Card 3: Global Systems -->
120+
<div class="impact-card">
121+
<div class="card-bg"
122+
style="background-image: url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?q=80&w=2000&auto=format&fit=crop');">
123+
</div>
124+
<div class="card-content">
125+
<h3 class="card-title">Modeling Global Systems</h3>
126+
<p class="card-desc">Visualizing and analyzing complex network dynamics and environmental
127+
impact.</p>
128+
<ul class="card-links">
129+
<li><a href="https://github.com/kshptl/covid-19-emissions" target="_blank">Covid-19
130+
Emissions Impact &rarr;</a></li>
131+
<li><a href="https://github.com/kshptl/Network-Communities-and-Clustering"
132+
target="_blank">Network Clustering &rarr;</a></li>
133+
</ul>
134+
</div>
135+
</div>
136+
139137
</div>
140138
</div>
141139
</section>
@@ -147,7 +145,7 @@ <h2 class="footer-title">Let's work together</h2>
147145
<div class="footer-links">
148146
<a href="mailto:[email protected]">Email</a>
149147
<a href="https://github.com/kshptl">GitHub</a>
150-
<a href="#">LinkedIn</a>
148+
<a href="https://linkedin.com/in/kushpatel44">LinkedIn</a>
151149
</div>
152150
<p class="copyright">&copy; 2025 Kush Patel</p>
153151
</div>

0 commit comments

Comments
 (0)