From 1cedafdd7ade42138dfbd61c40a4615273b3ab1b Mon Sep 17 00:00:00 2001 From: Nitin Soni Date: Mon, 16 Sep 2024 23:03:19 +0530 Subject: [PATCH] added back contact section --- assets/images/anilist-icon.svg | 11 --- assets/images/email-icon.svg | 10 --- assets/images/github-icon.svg | 10 --- assets/images/instagram-icon.svg | 10 --- assets/images/linkedin-icon.svg | 10 --- assets/images/spotify-icon.svg | 3 - assets/images/whatsapp-icon.svg | 3 - css/media.css | 40 +++------ css/style.css | 135 +------------------------------ index.html | 34 +------- js/script.js | 29 ------- 11 files changed, 15 insertions(+), 280 deletions(-) delete mode 100644 assets/images/anilist-icon.svg delete mode 100644 assets/images/email-icon.svg delete mode 100644 assets/images/github-icon.svg delete mode 100644 assets/images/instagram-icon.svg delete mode 100644 assets/images/linkedin-icon.svg delete mode 100644 assets/images/spotify-icon.svg delete mode 100644 assets/images/whatsapp-icon.svg diff --git a/assets/images/anilist-icon.svg b/assets/images/anilist-icon.svg deleted file mode 100644 index 986c865..0000000 --- a/assets/images/anilist-icon.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - diff --git a/assets/images/email-icon.svg b/assets/images/email-icon.svg deleted file mode 100644 index 0d9bf71..0000000 --- a/assets/images/email-icon.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/assets/images/github-icon.svg b/assets/images/github-icon.svg deleted file mode 100644 index 755225c..0000000 --- a/assets/images/github-icon.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/assets/images/instagram-icon.svg b/assets/images/instagram-icon.svg deleted file mode 100644 index b26fd09..0000000 --- a/assets/images/instagram-icon.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/assets/images/linkedin-icon.svg b/assets/images/linkedin-icon.svg deleted file mode 100644 index 4133e3d..0000000 --- a/assets/images/linkedin-icon.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/assets/images/spotify-icon.svg b/assets/images/spotify-icon.svg deleted file mode 100644 index 14c142d..0000000 --- a/assets/images/spotify-icon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/assets/images/whatsapp-icon.svg b/assets/images/whatsapp-icon.svg deleted file mode 100644 index ded9fd6..0000000 --- a/assets/images/whatsapp-icon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/css/media.css b/css/media.css index 43f8a8b..ea937b8 100644 --- a/css/media.css +++ b/css/media.css @@ -39,6 +39,10 @@ /*----------------------------------------------------*/ + #contact .t-container { + padding: 0; + } + #contact .table { width: 100%; align-items: center; @@ -46,18 +50,6 @@ row-gap: 2rem; } - #contact .scroll-container .fade-overlay { - display: block; - } - - #contact .scroll-container .pill-container { - justify-content: flex-start; - } - - #contact .scroll-container .pill-container .pill { - animation: bounce 2s infinite; - } - #contact .table .table-l { width: 90%; padding: 2rem 0; @@ -208,20 +200,6 @@ font-size: 3rem; } - #contact .scroll-container .pill-container .pill { - border-radius: 10px; - } - - #contact .scroll-container .pill-container .pill a { - font-size: 1rem; - padding: 8px 12px; - } - - #contact .scroll-container .pill-container .pill a img { - width: 24px; - height: 24px; - } - #contact .table .table-l i { font-size: 2.5rem; padding-bottom: 1.2rem; @@ -244,7 +222,8 @@ } #contact .table .table-r .container { - padding: 2rem 0; + padding-top: 1.5rem; + padding-bottom: 2.5rem; } } @@ -315,12 +294,12 @@ } #contact .table .table-r .container .card { - width: 20rem; + width: 19rem; height: 30rem; } #contact .table .table-r .container .card > img { - left: 31.8px; + left: 15.8px; /*31.8 for 20rem width*/ } #contact .table .table-r .container .card .content .block-top { @@ -359,6 +338,7 @@ #contact .table .table-r .container .card .content .block-bottom p { font-size: 0.8rem; + padding-top: 1.5rem; } #contact .table .table-r .container .card .content .block-bottom .social-block { @@ -367,7 +347,7 @@ #contact .table .table-r .container .card .content .block-bottom .social-block a { font-size: 1.1rem; - padding: .5rem; + padding: .25rem .5rem; } } diff --git a/css/style.css b/css/style.css index 99d17f9..b56c147 100755 --- a/css/style.css +++ b/css/style.css @@ -363,7 +363,6 @@ nav .nav-r a { #portfolio .t-container { display: flex; justify-content: center; - margin-bottom: 2.5rem; } #portfolio .table { @@ -549,7 +548,6 @@ nav .nav-r a { /*----------------------------------------------------*/ -/* #contact { width: 100%; text-align: center; @@ -580,138 +578,10 @@ nav .nav-r a { letter-spacing: .025rem; } -#contact .scroll-container { - position: relative; -} - -#contact .scroll-container .fade-overlay { - display: none; - position: absolute; - top: 0; - bottom: 0; - width: 5%; -} - -#contact .scroll-container .left-fade { - left: 0; - background: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)); -} - -#contact .scroll-container .right-fade { - right: 0; - background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)); -} - -#contact .scroll-container .pill-container { - display: grid; - padding: 0 1rem; - grid-auto-flow: column; - justify-content: center; - grid-auto-columns: max-content; - scroll-behavior: auto; - gap: 1rem; - overflow-y: auto; - overscroll-behavior-x: contain; - scroll-snap-type: x mandatory; - scrollbar-width: none; - justify-content: 5px; -} - -#contact .scroll-container .pill-container::-webkit-scrollbar { - display: none; -} - -#contact .scroll-container .pill-container .pill { - background-color: black; - border: 1px solid rgba(255, 255, 255, .24); - border-radius: 12px; -} - -@keyframes bounce { - 0%, 20%, 50%, 80%, 100% { - transform: translateX(0); - } - 40% { - transform: translateX(-20px); - } - 60% { - transform: translateX(-10px); - } -} - -#contact .scroll-container .pill-container .pill a { - font-size: 1.25rem; - padding: 12px 16px; - text-decoration: none; - display: flex; - align-items: center; - gap: .75rem; -} - -#contact .scroll-container .pill-container .pill a img { - width: 28px; - height: 28px; -} - -#contact .scroll-container .pill-container .pill.email { - background-image: linear-gradient(to right, rgba(241, 232, 164, .24), rgba(177, 138, 82, .24)); -} - -#contact .scroll-container .pill-container .pill.email a { - color: #fae575; -} - -#contact .scroll-container .pill-container .pill.linkedin { - background-image: linear-gradient(to right, rgba(52, 98, 158, .24), rgba(134, 169, 214, .24)); -} - -#contact .scroll-container .pill-container .pill.linkedin a { - color: #3fcbf8; -} - -#contact .scroll-container .pill-container .pill.whatsapp { - background-image: linear-gradient(to right, rgba(164, 241, 199, .24), rgba(84, 177, 82, .24)); -} - -#contact .scroll-container .pill-container .pill.whatsapp a { - color: #87fa75; -} - -#contact .scroll-container .pill-container .pill.instagram { - background-image: linear-gradient(to right, rgba(177, 82, 150, .24), rgba(207, 164, 241, .24)); -} - -#contact .scroll-container .pill-container .pill.instagram a { - color: #e775fa; -} - -#contact .scroll-container .pill-container .pill.github { - background-image: linear-gradient(to right, rgba(128, 235, 235, .24), rgba(82, 131, 177, .24)); -} - -#contact .scroll-container .pill-container .pill.github a { - color: #75dafa; -} - -#contact .scroll-container .pill-container .pill.spotify { - background-image: linear-gradient(to right, rgba(78, 169, 76, .24), rgba(146, 238, 188, .24)); -} - -#contact .scroll-container .pill-container .pill.spotify a { - color: #7eee6d; -} - -#contact .scroll-container .pill-container .pill.anilist { - background-image: linear-gradient(to right, rgba(130, 168, 217, .24), rgba(0, 120, 203, .24)); -} - -#contact .scroll-container .pill-container .pill.anilist a { - color: #6fc4ff; -} - #contact .t-container { display: flex; justify-content: center; + padding: 2rem 0; } #contact .table { @@ -724,6 +594,7 @@ nav .nav-r a { width: 45%; text-align: left; padding-top: 1.5rem; + padding-left: 2rem; } #contact .table .table-l i { @@ -862,6 +733,7 @@ nav .nav-r a { font-weight: 300; line-height: 1.375; color: rgba(255, 255, 255, .8); + padding-top: 2rem; } #contact .table .table-r .container .card .content .block-bottom .social-block { @@ -876,4 +748,3 @@ nav .nav-r a { color: rgba(255, 255, 255, .8); padding: .75rem; } -*/ diff --git a/index.html b/index.html index 51494ef..2c1ab54 100644 --- a/index.html +++ b/index.html @@ -23,7 +23,7 @@
  • Home
  • Portfolio
    • - +
  • Contact
    • @@ -135,39 +135,11 @@

    Embark on My
    Professional Odyssey

    - diff --git a/js/script.js b/js/script.js index 41d5633..3fa6a60 100644 --- a/js/script.js +++ b/js/script.js @@ -74,32 +74,3 @@ function scrollToCard(index) { cardContainer.scrollTo({ left: index * (cardWidth + marginBetweenItems), behavior: 'smooth' }); } - -/* -// Transfer social link scroll-container under table-r if screen width < 800 -const scrollContainer = document.getElementById('contact-scroll-container'); -const tableR = document.getElementById('contact-table-r'); - -function moveScrollContainer() { - tableR.insertBefore(scrollContainer, tableR.firstChild); -} - -if (window.innerWidth < 800) { - moveScrollContainer(); -} - - -// Only activate bounce animation in social link scroll-container when scroll is on 0th position -const pills = document.querySelectorAll('.pill'); -document.getElementById('contact-pill-container').addEventListener('scroll', function() { - if (this.scrollLeft === 0) { - pills.forEach(function(pill) { - pill.style.animation = 'bounce 2s infinite'; - }); - } else { - pills.forEach(function(pill) { - pill.style.animation = 'none'; - }); - } -}); -*/