Skip to content

Commit 9e88e17

Browse files
SakthiProgrammerSakthiProgrammer
committed
Fix: Project Section card Style Changed
1 parent caa2883 commit 9e88e17

File tree

3 files changed

+158
-121
lines changed

3 files changed

+158
-121
lines changed

‎index.html‎

Lines changed: 62 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -331,100 +331,99 @@ <h4>GOVT. HR SEC SCHOOL</h4>
331331
<h3 class="subsection-title animate-on-scroll">Profiles & Certificates</h3>
332332
<div class="achievements-subsection achievements-slider animate-on-scroll">
333333

334-
<!-- LeetCode Card -->
335-
<div class="achievement-card">
336-
<div class="achievement-image">
337-
<iframe class="leetcode-frame"
338-
src="https://leetcard.jacoblin.cool/Sakthivel_D47?theme=unicorn&extension=activity"
339-
title="LeetCode Profile Card">
340-
</iframe>
341-
</div>
342-
<div class="achievement-info">
343-
<h4>LeetCode</h4>
344-
</div>
334+
<!-- LeetCode Card -->
335+
<div class="achievement-card">
336+
<div class="achievement-image">
337+
<iframe class="leetcode-frame iframe-wrapper"
338+
src="https://leetcard.jacoblin.cool/Sakthivel_D47?theme=unicorn&extension=activity"
339+
title="LeetCode Profile Card">
340+
</iframe>
341+
</div>
342+
<div class="achievement-info">
343+
<h4>LeetCode</h4>
345344
</div>
345+
</div>
346346

347-
<!-- Code Ninja Card -->
348-
<div class="achievement-card">
349-
<a href="https://www.naukri.com/code360/profile/SakthivelD" target="_blank">
347+
<!-- Code Ninja Card -->
348+
<div class="achievement-card">
349+
<a href="https://www.naukri.com/code360/profile/SakthivelD" target="_blank">
350350
<div class="achievement-image">
351351
<img src="docs/code-ninja.png" alt="Code Ninja Logo">
352352
</div>
353-
</a>
354-
<div class="achievement-info">
355-
<h4>Code Ninja</h4>
356-
</div>
353+
</a>
354+
<div class="achievement-info">
355+
<h4>Code Ninja</h4>
357356
</div>
357+
</div>
358358

359-
<!-- hacker rant certificate -->
360-
<div class="achievement-card">
361-
<a href="https://www.hackerrank.com/certificates/80f8f666bd94" target="_blank">
359+
<!-- hacker rant certificate -->
360+
<div class="achievement-card">
361+
<a href="https://www.hackerrank.com/certificates/80f8f666bd94" target="_blank">
362362
<div class="achievement-image">
363363
<img src="docs/java-hr.png" alt="Java Certificate">
364364
</div>
365-
</a>
366-
<div class="achievement-info">
367-
<h4>Java Certificate</h4>
368-
</div>
365+
</a>
366+
<div class="achievement-info">
367+
<h4>Java Certificate</h4>
369368
</div>
369+
</div>
370370

371-
<div class="achievement-card">
372-
<a href="https://courses.etrain.skillsnetwork.site/certificates/f42439078b194f929e8c61f540adb0b0" target="_blank">
371+
<div class="achievement-card">
372+
<a href="https://courses.etrain.skillsnetwork.site/certificates/f42439078b194f929e8c61f540adb0b0"
373+
target="_blank">
373374
<div class="achievement-image">
374375
<img src="docs/java-ibm-1.png" alt="Java Certificate">
375376
</div>
376-
</a>
377+
</a>
377378

378-
<div class="achievement-info">
379-
<h4>Java IBM Certificate</h4>
380-
</div>
379+
<div class="achievement-info">
380+
<h4>Java IBM Certificate</h4>
381381
</div>
382+
</div>
382383

383384
</div>
384385
</div>
385386
</section>
386387

387388
<!-- Projects Section -->
389+
388390
<section id="projects" class="section">
389391
<div class="container">
390392
<h2 class="section-title animate-on-scroll">Projects</h2>
391-
<div class="projects-grid">
392-
<div class="project-card animate-on-scroll">
393-
<h3>Online Food Delivery and Restaurant Management System</h3>
394-
<div class="project-tech">
395-
<span class="tech-tag">HTML</span>
396-
<span class="tech-tag">CSS</span>
397-
<span class="tech-tag">Java</span>
398-
<span class="tech-tag">Spring Boot</span>
399-
<span class="tech-tag">MySQL</span>
400-
<span class="tech-tag">Thymeleaf</span>
393+
<div class="projects-slider">
394+
<!-- Project 1 -->
395+
<div class="project-card">
396+
<div class="card-inner">
397+
<div class="card-front">
398+
<img src="docs/food-delivery.png" alt="Food Delivery Project">
399+
<h3>Food Delivery System</h3>
400+
</div>
401+
<div class="card-back">
402+
<p>Full-stack web app for restaurants & food ordering with role-based login.</p>
403+
<a href="https://github.com/yourusername/food-delivery" target="_blank" class="github-link">
404+
View on GitHub
405+
</a>
406+
</div>
401407
</div>
402-
<ul class="project-features">
403-
<li>Designed a full-stack web application enabling restaurant owners to register and manage
404-
menus with a one-to-many relationship between restaurants and food items.</li>
405-
<li>Developed secure role-based authentication for Admins, Restaurant Owners, and Users using
406-
Spring Security and JPA for entity management.</li>
407-
<li>Implemented dynamic and responsive user interfaces using Thymeleaf templates for restaurant
408-
listing, cart functionality, and admin dashboard.</li>
409-
</ul>
410408
</div>
411-
<div class="project-card animate-on-scroll">
412-
<h3>Car Rental System (Console-Based Application)</h3>
413-
<div class="project-tech">
414-
<span class="tech-tag">Java (OOPs)</span>
415-
<span class="tech-tag">JDBC API</span>
416-
<span class="tech-tag">MySQL</span>
409+
410+
<!-- Project 2 -->
411+
<div class="project-card">
412+
<div class="card-inner">
413+
<div class="card-front">
414+
<img src="docs/car-rental.png" alt="Car Rental Project">
415+
<h3>Car Rental System</h3>
416+
</div>
417+
<div class="card-back">
418+
<p>Console-based Java app with JDBC and MySQL for renting cars.</p>
419+
<a href="https://github.com/yourusername/car-rental" target="_blank" class="github-link">
420+
View on GitHub
421+
</a>
422+
</div>
417423
</div>
418-
<ul class="project-features">
419-
<li>Built a console-based car rental system in Java using JDBC, applying key Object-Oriented
420-
Programming principles such as inheritance, encapsulation, and abstraction.</li>
421-
<li>Implemented functionality for users to rent, return, and manage cars, while admins can
422-
perform CRUD operations on the car inventory and manage admin accounts.</li>
423-
<li>Integrated a booking history tracker that logs rentals with timestamps and user details,
424-
enhancing transparency and traceability.</li>
425-
</ul>
426424
</div>
427425
</div>
426+
428427
</div>
429428
</section>
430429

‎script.js‎

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -197,18 +197,7 @@ document.querySelectorAll(".achievement-card").forEach(card => {
197197
}
198198

199199
// Add some interactive elements
200-
const cards = document.querySelectorAll('.education-card, .project-card');
201-
cards.forEach(card => {
202-
card.addEventListener('mouseenter', function () {
203-
this.style.transform = 'translateY(-8px) rotate(1deg)';
204-
});
205-
206-
card.addEventListener('mouseleave', function () {
207-
this.style.transform = 'translateY(0) rotate(0deg)';
208-
});
209-
210-
});
211-
200+
212201
// Image hover effects
213202
const heroImage = document.querySelector('.hero-image');
214203
const aboutImage = document.querySelector('.about-image-img');

‎styles.css‎

Lines changed: 95 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1302,6 +1302,7 @@ body {
13021302
font-weight: 600;
13031303
color: #1995AD;
13041304
}
1305+
13051306
.achievements-slider {
13061307
display: flex;
13071308
gap: 30px; /* bigger gap between cards */
@@ -1323,7 +1324,7 @@ body {
13231324
/* Card wrapper */
13241325
.achievement-card {
13251326
background: #fff;
1326-
flex: 0 0 280px; /* smaller fixed width */
1327+
flex: 0 0 300px; /* smaller fixed width */
13271328
max-width: 320px; /* cap max size */
13281329
border-radius: 0;
13291330
box-shadow: 0 6px 15px rgba(0,0,0,0.1);
@@ -1377,6 +1378,8 @@ body {
13771378
color: #333;
13781379
}
13791380

1381+
1382+
13801383
/* Mobile: adjust slightly */
13811384
@media (max-width: 768px) {
13821385
.achievement-card {
@@ -1385,6 +1388,27 @@ body {
13851388
.achievement-image {
13861389
height: 160px;
13871390
}
1391+
1392+
/* Wrapper to control aspect ratio */
1393+
.iframe-wrapper {
1394+
position: relative;
1395+
width: 100%;
1396+
padding-top: 60%; /* 👈 aspect ratio ~ 16:9, adjust as needed */
1397+
overflow: hidden;
1398+
background: #fafafa;
1399+
}
1400+
1401+
/* Make iframe fill the wrapper */
1402+
.iframe-wrapper iframe {
1403+
position: absolute;
1404+
top: 0;
1405+
left: 0;
1406+
width: 100%;
1407+
height: 100%;
1408+
border: none;
1409+
overflow: hidden; /* no scrollbars inside */
1410+
}
1411+
13881412
}
13891413

13901414

@@ -1423,68 +1447,93 @@ body {
14231447
}
14241448

14251449
/* Projects Section */
1426-
.projects-grid {
1427-
text-align: left;
1428-
display: grid;
1429-
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
1430-
gap: 2rem;
1431-
max-width: 1000px;
1432-
margin: 0 auto;
1450+
1451+
.projects-slider {
1452+
display: flex;
1453+
gap: 20px; /* space between cards */
1454+
overflow-x: auto;
1455+
padding: 20px;
1456+
scroll-behavior: smooth;
1457+
scrollbar-width: none; /* Firefox */
1458+
-ms-overflow-style: none;/* IE/Edge */
1459+
}
1460+
.projects-slider::-webkit-scrollbar {
1461+
display: none; /* Chrome, Safari */
14331462
}
14341463

14351464
.project-card {
1436-
background: white;
1437-
padding: 2rem;
1438-
border-radius: 15px;
1439-
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
1440-
transition: all 0.3s ease;
1441-
border-top: 4px solid var(--color-primary);
1465+
flex: 0 0 300px; /* fixed width for each card */
1466+
height: 340px;
1467+
perspective: 1000px;
1468+
background: transparent;
1469+
border-radius: 0; /* 👈 no border-radius */
14421470
}
14431471

1444-
.project-card:hover {
1445-
transform: translateY(-5px);
1446-
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
1472+
.card-inner {
1473+
width: 100%;
1474+
height: 100%;
1475+
position: relative;
1476+
transform-style: preserve-3d;
1477+
transition: transform 0.8s ease;
14471478
}
14481479

1449-
.project-card h3 {
1450-
color: var(--color-primary);
1451-
margin-bottom: 1rem;
1452-
font-size: 1.3rem;
1480+
.project-card:hover .card-inner {
1481+
transform: rotateY(180deg);
14531482
}
14541483

1455-
.project-tech {
1484+
/* Front + Back (no radius) */
1485+
.card-front, .card-back {
1486+
position: absolute;
1487+
width: 100%;
1488+
height: 100%;
1489+
border-radius: 0; /* 👈 removed rounded corners */
1490+
box-shadow: 0 6px 18px rgba(0,0,0,0.15);
1491+
backface-visibility: hidden;
14561492
display: flex;
1457-
flex-wrap: wrap;
1458-
gap: 0.5rem;
1459-
margin-bottom: 1.5rem;
1493+
flex-direction: column;
1494+
align-items: center;
1495+
justify-content: center;
1496+
padding: 1rem;
14601497
}
14611498

1462-
.tech-tag {
1463-
background: linear-gradient(135deg, var(--color-secondary), var(--color-accent));
1464-
color: white;
1465-
padding: 0.3rem 0.8rem;
1466-
border-radius: 15px;
1467-
font-size: 0.8rem;
1468-
font-weight: 500;
1499+
/* Front */
1500+
.card-front {
1501+
background: #fff;
14691502
}
1470-
1471-
.project-features {
1472-
list-style: none;
1473-
padding-left: 0;
1503+
.card-front img {
1504+
width: 100%;
1505+
height: 75%;
1506+
object-fit: cover;
14741507
}
1475-
1476-
.project-features li {
1477-
margin-bottom: 0.8rem;
1478-
padding-left: 1.5rem;
1479-
position: relative;
1508+
.card-front h3 {
1509+
margin-top: 0.8rem;
1510+
font-size: 1.2rem;
1511+
color: var(--color-primary);
14801512
}
14811513

1482-
.project-features li::before {
1483-
content: '✓';
1484-
position: absolute;
1485-
left: 0;
1514+
/* Back */
1515+
.card-back {
1516+
background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
1517+
color: #fff;
1518+
transform: rotateY(180deg);
1519+
text-align: center;
1520+
justify-content: space-around;
1521+
}
1522+
.card-back p {
1523+
font-size: 0.9rem;
1524+
margin-bottom: 1rem;
1525+
}
1526+
.github-link {
1527+
display: inline-block;
1528+
padding: 0.5rem 1rem;
1529+
background: #fff;
14861530
color: var(--color-primary);
1487-
font-weight: bold;
1531+
font-weight: 600;
1532+
text-decoration: none;
1533+
transition: background 0.3s;
1534+
}
1535+
.github-link:hover {
1536+
background: #f1f1f1;
14881537
}
14891538

14901539
/* About Section */

0 commit comments

Comments
 (0)