project csard

Author: Sarim2022

index.html

@@ -482,6 +482,9 @@ <h4 class="project-name">Dev Simulation</h4>
                         </div>
                     </article>
                 </div>
+                <div class="projects-cta">
+                    <a href="index.html?projects=all#projects" target="_blank" rel="noopener noreferrer" class="btn btn-primary">All Projects</a>
+                </div>
             </div>
         </div>
     </section>

script.js

@@ -18,6 +18,17 @@ const DOM = {
     }
 };
 
+// ============================================
+// Project View Mode
+// ============================================
+const ProjectView = {
+    init() {
+        const params = new URLSearchParams(window.location.search);
+        if (params.get('projects') === 'all') {
+            document.body.classList.add('show-all-projects');
+        }
+    }
+};
 
 
 // ============================================
@@ -165,6 +176,7 @@ const addAnimationStyles = () => {
 // ============================================
 function init() {
     DOM.init();
+    ProjectView.init();
     Navigation.init();
     SmoothScroll.init();
     addAnimationStyles();

style.css

@@ -131,6 +131,7 @@ body {
 
 .nav-links a:hover {
     opacity: 1;
+    font-weight: 700;
 }
 
 .nav-social {
@@ -799,6 +800,15 @@ section.section.hobby-section::before {
     box-shadow: 0 24px 42px var(--project-shadow);
 }
 
+.projects-cta {
+    display: none;
+    margin-top: var(--space-xl);
+}
+
+.projects-cta .btn {
+    min-width: 180px;
+}
+
 /* ============================================
    Section Backgrounds
    ============================================ */
@@ -873,6 +883,7 @@ section.section.experience-section::before {
 }
 
 section.section.contact-section {
+    background: var(--blue-primary);
     min-height: 100vh;
     min-height: 100svh;
     display: flex;
@@ -1365,6 +1376,10 @@ section.section.experience-section .experience-desc {
     .project-content {
         padding: var(--space-lg);
     }
+
+    .projects-cta {
+        display: none;
+    }
 
     /* Skills */
     .skill-tag {
@@ -1488,49 +1503,92 @@ section.section.experience-section .experience-desc {
         font-size: 0.93rem;
     }
 
+    .projects-grid {
+        grid-template-columns: 1fr;
+        gap: 0.85rem;
+    }
+
+    body:not(.show-all-projects) .projects-grid .project-card:nth-child(n + 4) {
+        display: none;
+    }
+
+    .projects-cta {
+        display: flex;
+        justify-content: center;
+        margin-top: var(--space-lg);
+    }
+
+    .projects-cta .btn {
+        width: auto;
+        min-width: 160px;
+        padding: 0.8rem 1.1rem;
+        font-size: 0.82rem;
+    }
+
+    body.show-all-projects .projects-cta {
+        display: none !important;
+    }
+
     .project-art {
-        min-height: 240px;
+        min-height: 112px;
+        padding: 0.8rem;
     }
 
     .project-art__frame {
-        width: min(100%, 300px);
+        display: none;
     }
 
     .project-art__badge {
-        font-size: 0.6rem;
-        letter-spacing: 0.14em;
+        top: 0.8rem;
+        left: 0.8rem;
+        padding: 0.42rem 0.62rem;
+        font-size: 0.55rem;
+        letter-spacing: 0.12em;
     }
 
     .project-art__title {
-        font-size: 0.62rem;
-        letter-spacing: 0.22em;
+        left: 0.8rem;
+        bottom: 0.8rem;
+        font-size: 0.58rem;
+        letter-spacing: 0.2em;
     }
 
-    .project-stats {
-        grid-template-columns: 1fr;
+    .project-content {
+        padding: 0.85rem 0.9rem 0.95rem;
     }
 
-    .project-stats div {
-        border-right: none;
-        border-bottom: 1px solid var(--gray-200);
-        padding-right: 0;
-        padding-bottom: 0.75rem;
-        margin-bottom: 0.75rem;
+    .project-kicker {
+        font-size: 0.56rem;
+        letter-spacing: 0.14em;
     }
 
-    .project-stats div:last-child {
-        border-bottom: none;
-        margin-bottom: 0;
-        padding-bottom: 0;
+    .project-name {
+        margin-top: 0.5rem;
+        font-size: 1.08rem;
+        line-height: 1.08;
     }
 
-    .project-stats span {
-        font-size: 0.72rem;
-        letter-spacing: 0.2em;
+    .project-desc {
+        margin-top: 0.55rem;
+        font-size: 0.82rem;
+        line-height: 1.45;
+        -webkit-line-clamp: 2;
     }
 
-    .project-stats strong {
-        font-size: 1rem;
+    .project-tech {
+        margin-top: 0.65rem;
+        font-size: 0.6rem;
+        letter-spacing: 0.12em;
+    }
+
+    .project-stats {
+        display: none;
+    }
+
+    .project-link {
+        margin-top: 0.75rem;
+        padding: 0.72rem 0.95rem;
+        font-size: 0.78rem;
     }
 
     /* Skills */