From 6865476298a07c1ebeb1d91b40559fc77ea64ebb Mon Sep 17 00:00:00 2001
From: Victor Frye <victorfrye@outlook.com>
Date: Thu, 11 Jan 2024 09:37:19 -0500
Subject: [PATCH] feat: update social buttons with animation effects (#17)

---
 src/Client/Components/Content/Connect.razor   | 18 ++---
 .../Components/Content/Connect.razor.css      | 66 +++++++++++++++++++
 src/Client/wwwroot/images/envelope.svg        |  1 +
 src/Client/wwwroot/images/github.svg          |  3 +-
 src/Client/wwwroot/images/linkedin.svg        |  3 +-
 src/Client/wwwroot/images/threads.svg         |  1 +
 src/Client/wwwroot/styles/app.css             | 37 ++---------
 7 files changed, 85 insertions(+), 44 deletions(-)
 create mode 100644 src/Client/Components/Content/Connect.razor.css

diff --git a/src/Client/Components/Content/Connect.razor b/src/Client/Components/Content/Connect.razor
index e2724d6..0100444 100644
--- a/src/Client/Components/Content/Connect.razor
+++ b/src/Client/Components/Content/Connect.razor
@@ -2,18 +2,18 @@
     <div class="d-flex flex-column flex-wrap">
         <h5 class="text-primary pt-3 pb-2">_Connect</h5>
 
-        <div class="d-flex flex-row">
-            <a href="https://threads.net/@@thevictorfryeadventure" target="_blank" class="btn-link">
-                <img src="/images/threads.svg" alt="Threads" class="social-icon m-1">
+        <div class="d-socials d-flex flex-row flex-wrap">
+            <a href="https://threads.net/@@thevictorfryeadventure" target="_blank" class="btn-social px-2">
+                <img src="/images/threads.svg" alt="Threads" class="img-social" />
             </a>
-            <a href="https://linkedin.com/in/victorfrye" target="_blank" class="btn-link">
-                <img src="/images/linkedin.svg" alt="LinkedIn" class="social-icon m-1">
+            <a href="https://linkedin.com/in/victorfrye" target="_blank" class="btn-social px-2">
+                <img src="/images/linkedin.svg" alt="LinkedIn" class="img-social" />
             </a>
-            <a href="https://github.com/victorfrye" target="_blank" class="btn-link">
-                <img src="/images/github.svg" alt="GitHub" class="social-icon m-1">
+            <a href="https://github.com/victorfrye" target="_blank" class="btn-social px-2">
+                <img src="/images/github.svg" alt="GitHub" class="img-social" />
             </a>
-            <a href="mailto:victorfrye@outlook.com" target="_blank" class="btn-link">
-                <img src="/images/envelope.svg" alt="Email Me" class="social-icon m-1">
+            <a href="mailto:victorfrye@outlook.com" target="_blank" class="btn-social px-2">
+                <img src="/images/envelope.svg" alt="Email Me" class="img-social" />
             </a>
         </div>
     </div>
diff --git a/src/Client/Components/Content/Connect.razor.css b/src/Client/Components/Content/Connect.razor.css
new file mode 100644
index 0000000..5130686
--- /dev/null
+++ b/src/Client/Components/Content/Connect.razor.css
@@ -0,0 +1,66 @@
+:root {
+
+    --threads: radial-gradient(circle farthest-corner at 35% 90%, #ffd600 0%, #ffd600 5%, #ff7a00 45%, #ff0069 60%, #d300c5 80%, #7638fa 95%);
+    --linkedin: #0077B5;
+    --github: #333;
+    --email: var(--gradient);
+}
+
+.d-socials {
+    gap: 1rem;
+}
+
+.btn-link {
+    fill: var(--primary);
+    border-bottom: none;
+}
+
+.img-social {
+    height: 20px;
+    width: 20px;
+}
+
+.btn-social {
+    width: 2.5rem;
+    height: 2.5rem;
+    border: none;
+    background-color: transparent;
+    border-radius: 50%;
+    outline: 2px solid var(--secondary);
+    cursor: pointer;
+    transition: all 0.3s;
+    display: grid;
+    place-items: center;
+
+    fill: var(--primary);
+    border-bottom: none;
+}
+
+.btn-social:hover {
+    outline-offset: 3px;
+    transition: all 0.3s;
+}
+
+.btn-social img {
+    transition: all 0.3s;
+}
+
+.btn-social:hover img {
+    transform: scale(1.15);
+}
+
+.btn-social:hover:nth-child(1) {
+    background: radial-gradient(circle at 30% 107%, #ffd600 0%, #ffd600 10%, #ff7a00 20%, #ff0069 50%, #d300c5 75%, #7638fa 90%);
+}
+
+.btn-social:hover:nth-child(2) {
+    background: #0077B5;
+}
+
+.btn-social:hover:nth-child(3) {
+    background: #333;
+}
+
+.btn-social:hover:nth-child(4) {
+    background: var(--gradient);
+}
\ No newline at end of file
diff --git a/src/Client/wwwroot/images/envelope.svg b/src/Client/wwwroot/images/envelope.svg
index 44b16a1..74bb2fa 100644
--- a/src/Client/wwwroot/images/envelope.svg
+++ b/src/Client/wwwroot/images/envelope.svg
@@ -1,4 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+    <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
     <path fill="#f8f8ff"
         d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z" />
 </svg>
\ No newline at end of file
diff --git a/src/Client/wwwroot/images/github.svg b/src/Client/wwwroot/images/github.svg
index 5edeb78..298edfb 100644
--- a/src/Client/wwwroot/images/github.svg
+++ b/src/Client/wwwroot/images/github.svg
@@ -1,4 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
+    <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
     <path fill="#f8f8ff"
-        d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" />
+        d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" />
 </svg>
\ No newline at end of file
diff --git a/src/Client/wwwroot/images/linkedin.svg b/src/Client/wwwroot/images/linkedin.svg
index afb328a..7468275 100644
--- a/src/Client/wwwroot/images/linkedin.svg
+++ b/src/Client/wwwroot/images/linkedin.svg
@@ -1,4 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+    <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
     <path fill="#f8f8ff"
-        d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z" />
+        d="M100.3 448H7.4V148.9h92.9zM53.8 108.1C24.1 108.1 0 83.5 0 53.8a53.8 53.8 0 0 1 107.6 0c0 29.7-24.1 54.3-53.8 54.3zM447.9 448h-92.7V302.4c0-34.7-.7-79.2-48.3-79.2-48.3 0-55.7 37.7-55.7 76.7V448h-92.8V148.9h89.1v40.8h1.3c12.4-23.5 42.7-48.3 87.9-48.3 94 0 111.3 61.9 111.3 142.3V448z" />
 </svg>
\ No newline at end of file
diff --git a/src/Client/wwwroot/images/threads.svg b/src/Client/wwwroot/images/threads.svg
index bbab3bf..d6e3453 100644
--- a/src/Client/wwwroot/images/threads.svg
+++ b/src/Client/wwwroot/images/threads.svg
@@ -1,4 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+    <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
     <path fill="#f8f8ff"
         d="M331.5 235.7c2.2 .9 4.2 1.9 6.3 2.8c29.2 14.1 50.6 35.2 61.8 61.4c15.7 36.5 17.2 95.8-30.3 143.2c-36.2 36.2-80.3 52.5-142.6 53h-.3c-70.2-.5-124.1-24.1-160.4-70.2c-32.3-41-48.9-98.1-49.5-169.6V256v-.2C17 184.3 33.6 127.2 65.9 86.2C102.2 40.1 156.2 16.5 226.4 16h.3c70.3 .5 124.9 24 162.3 69.9c18.4 22.7 32 50 40.6 81.7l-40.4 10.8c-7.1-25.8-17.8-47.8-32.2-65.4c-29.2-35.8-73-54.2-130.5-54.6c-57 .5-100.1 18.8-128.2 54.4C72.1 146.1 58.5 194.3 58 256c.5 61.7 14.1 109.9 40.3 143.3c28 35.6 71.2 53.9 128.2 54.4c51.4-.4 85.4-12.6 113.7-40.9c32.3-32.2 31.7-71.8 21.4-95.9c-6.1-14.2-17.1-26-31.9-34.9c-3.7 26.9-11.8 48.3-24.7 64.8c-17.1 21.8-41.4 33.6-72.7 35.3c-23.6 1.3-46.3-4.4-63.9-16c-20.8-13.8-33-34.8-34.3-59.3c-2.5-48.3 35.7-83 95.2-86.4c21.1-1.2 40.9-.3 59.2 2.8c-2.4-14.8-7.3-26.6-14.6-35.2c-10-11.7-25.6-17.7-46.2-17.8H227c-16.6 0-39 4.6-53.3 26.3l-34.4-23.6c19.2-29.1 50.3-45.1 87.8-45.1h.8c62.6 .4 99.9 39.5 103.7 107.7l-.2 .2zm-156 68.8c1.3 25.1 28.4 36.8 54.6 35.3c25.6-1.4 54.6-11.4 59.5-73.2c-13.2-2.9-27.8-4.4-43.4-4.4c-4.8 0-9.6 .1-14.4 .4c-42.9 2.4-57.2 23.2-56.2 41.8l-.1 .1z" />
 </svg>
\ No newline at end of file
diff --git a/src/Client/wwwroot/styles/app.css b/src/Client/wwwroot/styles/app.css
index f9bfa9a..b7f7061 100644
--- a/src/Client/wwwroot/styles/app.css
+++ b/src/Client/wwwroot/styles/app.css
@@ -10,7 +10,7 @@ body {
     --tertiary: #36454f;
     --bg: #1d1d20;
 
-    --gradient: linear-gradient(0deg, var(--secondary) 0%, black 70%);
+    --gradient: radial-gradient(circle at 30% 107%, var(--primary) 0%, var(--secondary) 15%, black 70%);
     --gradient-tl: linear-gradient(135deg, var(--secondary) 0%, black 50%, var(--secondary) 100%);
     --gradient-br: linear-gradient(135deg, black 0%, var(--secondary) 50%, black 100%);
 }
@@ -65,21 +65,14 @@ body {
     background: var(--gradient) !important;
 }
 
-.social-icon {
-    height: 24px;
-    width: 24px;
-}
-
-
-a,
-.btn-link {
+a {
     color: var(--primary);
     text-decoration: none !important;
     border-bottom: 1px dotted var(--primary);
 }
 
-.btn-link {
-    fill: var(--primary);
+a:hover {
+    color: var(--secondary);
     border-bottom: none;
 }
 
@@ -89,28 +82,6 @@ a,
     border-color: var(--primary);
 }
 
-.btn:focus,
-.btn:active:focus,
-.btn-link.nav-link:focus,
-.form-control:focus,
-.form-check-input:focus {
-    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--tertiary);
-}
-
-.content {
-    padding-top: 1.1rem;
-}
-
-h1:focus {
-    outline: none;
-}
-
-.accent-bar {
-    margin-left: 30px;
-    position: relative;
-    display: block;
-}
-
 .valid.modified:not([type=checkbox]) {
     outline: 1px solid #26b050;
 }