Add bluesky link

ryanseddon · Nov 29, 2024 · 99bb160 · 99bb160
1 parent 944cd8f
commit 99bb160
Show file tree

Hide file tree

Showing 2 changed files with 92 additions and 3 deletions.
diff --git a/index.html b/index.html
@@ -14,13 +14,37 @@
         <img src="/logo.svg" width="22" />
         <h1>FFprompt</h1>
 
-        <div class="ml-auto">
+        <div class="ml-auto flex gap-2 items-baseline">
+          <a
+            href="https://bsky.app/profile/ryanseddon.com"
+            class="bluesky-flutter"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <svg
+              id="flutterby"
+              class="bluesky-flutter"
+              viewBox="0 0 566 500"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <defs>
+                <path
+                  id="wing"
+                  fill="currentColor"
+                  d="M 123.244 35.008 C 188.248 83.809 283.836 176.879 283.836 235.857 C 283.836 316.899 283.879 235.845 283.836 376.038 C 283.889 375.995 282.67 376.544 280.212 383.758 C 266.806 423.111 214.487 576.685 94.841 453.913 C 31.843 389.269 61.013 324.625 175.682 305.108 C 110.08 316.274 36.332 297.827 16.093 225.504 C 10.271 204.699 0.343 76.56 0.343 59.246 C 0.343 -27.451 76.342 -0.206 123.244 35.008 Z"
+                />
+              </defs>
+              <use xlink:href="#wing" class="left" />
+              <use xlink:href="#wing" class="right" />
+            </svg>
+            @ryanseddon.com
+          </a>
           <a
             href="https://github.com/ryanseddon/FFprompt"
             target="_blank"
             rel="noopener noreferrer"
             class="flex items-baseline gap-1"
-            >GitHub<svg
+            ><svg
               width="13.5"
               height="13.5"
               aria-hidden="true"
@@ -31,7 +55,7 @@ <h1>FFprompt</h1>
                 fill="currentColor"
                 d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"
               ></path></svg
-          ></a>
+          >GitHub</a>
         </div>
       </div>
     </header>

diff --git a/src/App.css b/src/App.css
@@ -66,6 +66,71 @@ html, body, #root {
   max-width: 1280px;
   margin: 0 auto;
 }
+/*! https://flutterby.philhawksworth.dev/ */
+.bluesky-flutter {
+  display: inline-flex;
+  gap: 3px;
+  align-items: center;
+}
+
+.bluesky-flutter svg {
+  width: 13.5px;
+  height:13.5px;
+  transition: 200ms;
+}
+
+.bluesky-flutter .left {
+  transform-origin: center;
+}
+.bluesky-flutter .right {
+  transform-origin: center;
+  transform: scale(-1, 1);
+}
+.bluesky-flutter:hover .left,
+.bluesky-flutter:focus .left {
+   animation: flutter 430ms ease-in-out;
+   --flip: 1;
+}
+.bluesky-flutter:hover .right,
+.bluesky-flutter:focus .right {
+   animation: flutter 500ms ease-in-out;
+  --flip: -1;
+}
+.bluesky-flutter:hover svg,
+.bluesky-flutter:focus svg{
+  transform: rotate(-5deg);
+  transition: 500ms;
+}
+
+@media (prefers-reduced-motion) {
+  .bluesky-flutter:hover .left,
+  .bluesky-flutter:focus .left,
+  .bluesky-flutter:hover .right,
+  .bluesky-flutter:focus .right {
+    animation: none;
+  }
+}
+
+@keyframes flutter {
+  10% {
+    transform: scale(calc(var(--flip)*1), 0.9);
+  }
+  20% {
+    transform: scale(calc(var(--flip)*0.5), 1)
+  }
+  40% {
+    transform: scale(calc(var(--flip)*0.9), 0.95);
+  }
+  60% {
+    transform: scale(calc(var(--flip)*0.3), 1);
+  }
+  80% {
+    transform: scale(calc(var(--flip)*0.9), 0.95);
+  }
+  100% {
+    transform: scale(calc(var(--flip)*1), 1);
+  }
+}
 
 @layer base {
   * {