From cec16cb5fbbf8a5faa61d719c5b173c80e4ee87b Mon Sep 17 00:00:00 2001
From: John Haupenthal <johnhaup@gmail.com>
Date: Thu, 16 Jan 2025 19:35:56 -0800
Subject: [PATCH] chore: animate icon links in demo site

---
 docs/src/App.tsx                  |  6 +--
 docs/src/components/GHIcon.tsx    |  7 ----
 docs/src/components/IconLinks.tsx | 69 +++++++++++++++++++++++++++++++
 3 files changed, 72 insertions(+), 10 deletions(-)
 delete mode 100644 docs/src/components/GHIcon.tsx
 create mode 100644 docs/src/components/IconLinks.tsx

diff --git a/docs/src/App.tsx b/docs/src/App.tsx
index 53e8212..ff5f26e 100644
--- a/docs/src/App.tsx
+++ b/docs/src/App.tsx
@@ -2,11 +2,11 @@ import { ToastContainer } from "react-toastify";
 import styled from "styled-components";
 import { DopeHeader } from "./components/DopeHeader";
 import { DopeMascot } from "./components/DopeMascot";
-import { GHIcon } from "./components/GHIcon";
 import { InfoModal } from "./components/InfoModal";
 import KeyValueForm from "./components/KeyValueForm";
 import MapVisualizer from "./components/MapVisualizer";
 import { useWindowSize } from "@uidotdev/usehooks";
+import { IconLinks } from "./components/IconLinks";
 
 const AppWrapper = styled.div`
   max-width: 1200px;
@@ -62,12 +62,12 @@ function App() {
             )}
             <DopeHeader />
           </div>
-          {windowSize.width > 768 && <GHIcon />}
+          {windowSize.width > 768 && <IconLinks />}
         </HeaderRow>
       </HeaderWrapperContainer>
       <KeyValueForm />
       <MapVisualizer />
-      {windowSize.width <= 768 && <GHIcon />}
+      {windowSize.width <= 768 && <IconLinks />}
       <ToastContainer
         aria-label={"toast"}
         position="bottom-right"
diff --git a/docs/src/components/GHIcon.tsx b/docs/src/components/GHIcon.tsx
deleted file mode 100644
index 8898c3c..0000000
--- a/docs/src/components/GHIcon.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-export function GHIcon() {
-  return (
-    <a href="https://github.com/johnhaup/dope-map" target="_blank">
-      <i className="fab fa-github header-icon" />
-    </a>
-  );
-}
diff --git a/docs/src/components/IconLinks.tsx b/docs/src/components/IconLinks.tsx
new file mode 100644
index 0000000..f55325b
--- /dev/null
+++ b/docs/src/components/IconLinks.tsx
@@ -0,0 +1,69 @@
+import styled from "styled-components";
+import { DopeColors } from "../constants";
+
+const Container = styled.div`
+  display: flex;
+  flexdirection: row;
+`;
+
+const GH = styled.i`
+  @keyframes colorPulse {
+    0% {
+      color: ${DopeColors.pink};
+    }
+    50% {
+      color: ${DopeColors.green};
+    }
+    100% {
+      color: ${DopeColors.pink};
+    }
+  }
+
+  color: ${DopeColors.black};
+  transition: transform 0.3s ease, color 1.2s ease;
+
+  &:hover {
+    transform: scale(1.2) rotate(8deg);
+    animation: colorPulse 1.2s infinite;
+  }
+`;
+
+const LI = styled.i`
+  @keyframes colorPulse {
+    0% {
+      color: ${DopeColors.pink};
+    }
+    50% {
+      color: ${DopeColors.blue};
+    }
+    100% {
+      color: ${DopeColors.pink};
+    }
+  }
+
+  color: ${DopeColors.black};
+  transition: transform 0.3s ease, color 1.2s ease;
+
+  &:hover {
+    transform: scale(1.2) rotate(8deg);
+    animation: colorPulse 1.2s infinite;
+  }
+`;
+
+const Separator = styled.div`
+  width: 16px;
+`;
+
+export function IconLinks() {
+  return (
+    <Container>
+      <a href="https://www.linkedin.com/in/johnhaup" target="_blank">
+        <LI className="fab fa-linkedin header-icon" />
+      </a>
+      <Separator />
+      <a href="https://github.com/johnhaup/dope-map" target="_blank">
+        <GH className="fab fa-github header-icon" />
+      </a>
+    </Container>
+  );
+}