added swap-button on contact cards

nitinsooni · Oct 30, 2024 · 661c791 · 661c791
1 parent 316f21f
commit 661c791
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 1 deletion.
diff --git a/css/media.css b/css/media.css
@@ -433,6 +433,13 @@
         left: 15.8px; /*31.8 for 20rem width*/
     }
 
+    #contact .table .table-r .container .card .swap-button {
+        bottom: 1.2rem;
+        right: 1rem;
+        font-size: 1rem;
+        padding: .5rem .6rem;
+    }
+
     #contact .table .table-r .container .card.one .content .block-top {
         flex-direction: column;
         justify-content: center;

diff --git a/css/style.css b/css/style.css
@@ -341,7 +341,7 @@ nav .nav-overlay .container .nav-link {
     text-decoration: none;
     display: grid;
     grid-template-columns: 2rem auto;
-    gap: 1rem;
+    gap: .8rem;
     margin: 2.5rem 0;
 }
 
@@ -850,6 +850,19 @@ nav .nav-overlay .container .nav-link .text {
     pointer-events: none;
 }
 
+#contact .table .table-r .container .card .swap-button {
+    position: absolute;
+    bottom: 1.5rem;
+    right: 1.25rem;
+    font-size: 1.1rem;
+    color: var(--gold);
+    background: transparent;
+    padding: .55rem .7rem;
+    border: 1px solid rgba(255, 255, 255, .24);
+    border-radius: 12px;
+    backdrop-filter: blur(24px);
+}
+
 #contact .table .table-r .container .card.one .content i {
     padding-right: .5rem;
 }

diff --git a/index.html b/index.html
@@ -3,6 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="I'm Nitin Soni - explore my portfolio, connect via diverse contact options, and engage on social platforms for deeper insights.">
     <meta name="color-scheme" content="only dark">
     <meta name="darkreader-lock">
     <title>Nitin Soni's Digital Space</title>
@@ -194,12 +195,14 @@ <h3>Nitin Soni</h3>
                                         </div>
                                     </div>
                                 </div>
+                                <button onclick="swapButton()" class="swap-button"><i class="fa-solid fa-repeat"></i></button>
                             </div>
                             <div class="card two">
                                 <img src="/assets/images/card-border.svg">
                                 <div class="content">
                                     <img src="/assets/images/zero2.gif" loading="lazy">
                                 </div>
+                                <button onclick="swapButton()" class="swap-button"><i class="fa-solid fa-repeat"></i></button>
                             </div>
                         </div>
                     </div>

diff --git a/js/index.js b/js/index.js
@@ -94,6 +94,12 @@ function swapCards(selectedCard) {
     frontCard = selectedCard;
 }
 
+// Swap cards when user click swap-card button
+function swapButton() {
+    event.stopPropagation();
+    swapCards(frontCard === cardOne ? cardTwo : cardOne);
+}
+
 // Swap cards when user horizontal swipe on front card
 let touchStartX = 0;
 let touchEndX = 0;