exclusive content

Bruception · Oct 29, 2023 · 58e76d8 · 58e76d8
1 parent 1a65f0d
commit 58e76d8
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 2 deletions.
diff --git a/src/index.html b/src/index.html
@@ -10,6 +10,7 @@
         <!-- Custom Styles -->
         <link href="./static/css/styles.css" rel="stylesheet" />
     </head>
+
     <body>
         <section id="intro">
             <div id="intro-info">
@@ -56,6 +57,16 @@ <h2 class="bio">
                     >
                         <i class="link-icon fa-lg fa-solid fa-envelope"></i>
                     </a>
+                    <a
+                        aria-label="Exclusive Content"
+                        class="link tippyme bounce2"
+                        target="_blank"
+                        href="./static/content/exclusive.jpeg"
+                        tooltip-text="Exclusive Content 👀"
+                        tooltip-type="exclusive"
+                    >
+                        <i class="link-icon fa-lg fa-solid fa-lock"></i>
+                    </a>
                 </div>
             </div>
         </section>

diff --git a/src/static/content/exclusive.jpeg b/src/static/content/exclusive.jpeg
diff --git a/src/static/css/styles.css b/src/static/css/styles.css
@@ -84,3 +84,23 @@ body {
     color: #eee;
     transition: 0.2s;
 }
+
+.bounce2 {
+    animation: bounce2 2s ease infinite;
+}
+
+@keyframes bounce2 {
+    0%,
+    20%,
+    50%,
+    80%,
+    100% {
+        transform: translateY(0);
+    }
+    40% {
+        transform: translateY(-30px);
+    }
+    60% {
+        transform: translateY(-15px);
+    }
+}
diff --git a/src/ts/index.ts b/src/ts/index.ts
@@ -1,11 +1,21 @@
-import tippy from 'tippy.js';
+import tippy, { Props } from 'tippy.js';
+
+const tooltipProfiles: Record<string, Partial<Props>> = {
+    default: {},
+    exclusive: {
+        showOnCreate: true,
+        placement: 'bottom',
+    },
+};
 
 const init = () => {
     const elementsThatNeedTooltip = document.querySelectorAll('.tippyme');
 
     elementsThatNeedTooltip.forEach((element) => {
         const content = element.getAttribute('tooltip-text') ?? 'I forgot ¯_(ツ)_/¯';
-        tippy(element, { content });
+        const type = element.getAttribute('tooltip-type') ?? 'default';
+
+        tippy(element, { content, ...tooltipProfiles[type] });
 
         element.toggleAttribute('tooltip-text');
         element.classList.toggle('tippyme');