Add popups for picture frames

kubgus · Sep 5, 2024 · d840313 · d840313
1 parent ecd038a
commit d840313
Show file tree

Hide file tree

Showing 5 changed files with 161 additions and 59 deletions.
diff --git a/src/components/content/about-me.astro b/src/components/content/about-me.astro
@@ -23,7 +23,7 @@ import PictureFrame from "../picture-frame.astro";
 
     <h1>Education</h1>
     <figure class="accented">
-        <PictureFrame src="/images/skyro.png" alt="Skyro" />
+        <PictureFrame data={{ title: "Skyro", src: "/images/skyro.png" }} />
         <div>
             <h2>Skyro</h2>
             <p>Information Technology & AI Education</p>
@@ -38,15 +38,15 @@ import PictureFrame from "../picture-frame.astro";
 
     <h1>Volunteering</h1>
     <figure class="accented">
-        <PictureFrame src="/images/slsk.png" alt="Slovenský skauting" />
+        <PictureFrame data={{ title: "Scouting Slovakia", src: "/images/slsk.png" }} />
         <div>
             <h2>Scouting Slovakia (SLSK)</h2>
             <p>Volunteer Staff Member & Leader</p>
             <p class="faded">Dec 2022 - Present</p>
         </div>
     </figure>
     <figure class="accented">
-        <PictureFrame src="/images/coderdojo.png" alt="CoderDojo Bratislava" />
+        <PictureFrame data={{ title: "CoderDojo Bratislava", src: "/images/coderdojo.png" }} />
         <div>
             <h2>CoderDojo Bratislava</h2>
             <p>Educator & Speaker</p>
@@ -63,15 +63,15 @@ import PictureFrame from "../picture-frame.astro";
 
     <h1>Attended Conferences</h1>
     <figure class="accented">
-        <PictureFrame src="/images/codecon.png" alt="Codecon Bratislava" />
+        <PictureFrame data={{ title: "CODECON #Bratislava 2024", src: "/images/codecon.png" }} />
         <div>
             <h2>CODECON #Bratislava 2024</h2>
             <p>Attendee</p>
             <p class="faded">Jun 2024</p>
         </div>
     </figure>
     <figure class="accented">
-        <PictureFrame src="/images/pycon.png" alt="PyCon Bratislava" />
+        <PictureFrame data={{ title: "PyCon SK 2024", src: "/images/pycon.png" }} />
         <div>
             <h2>PyCon SK 2024</h2>
             <p>Speaker for CoderDojo Bratislava</p>

diff --git a/src/components/picture-frame.astro b/src/components/picture-frame.astro
@@ -1,13 +1,19 @@
 ---
-const { src, alt } = Astro.props;
+const { data } = Astro.props;
 ---
 
-<figure title={alt}>
-    <img src={src} alt={alt} width="128" height="128"/>
-</figure>
+<button title={data?.title ?? "Frame"} popovertarget={data?.title ?? ""}>
+    <img src={data?.src ?? "/favicon.png"} alt={data?.title ?? "Frame"} width="128" height="128" class="base" />
+    <div class="popover" id={data?.title ?? ""} popover>
+        <img src={data?.src ?? "/favicon.png"} alt={data?.title ?? "Frame"} width="256" height="256"/>
+        <h2>{data?.title ?? "Frame"}</h2>
+    </div>
+</button>
 
 <style>
-    figure {
+    button {
+        all: unset;
+
         display: flex;
         justify-content: center;
         align-items: center;
@@ -17,34 +23,65 @@ const { src, alt } = Astro.props;
 
         background-color: var(--secondary-background-dark);
         border-radius: 12px;
+
+        cursor: pointer;
+
+        transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     }
 
-    img {
+    img.base {
         max-width: 75%;
         max-height: 75%;
     }
 
     @media (max-width: 1000px) {
-        figure {
+        button {
             box-shadow: none;
         }
     }
 
-    figure:hover, figure:active {
-        animation: shake 0.5s;
+    button:hover, figure:active {
+        transform: scale(0.9) rotate(3deg);
     }
 
-    @keyframes shake {
-        0% { transform: translate(1px, 1px) rotate(0deg); }
-        10% { transform: translate(-1px, -2px) rotate(-4deg); }
-        20% { transform: translate(-3px, 0px) rotate(3deg); }
-        30% { transform: translate(3px, 2px) rotate(0deg); }
-        40% { transform: translate(1px, -1px) rotate(3deg); }
-        50% { transform: translate(-1px, 2px) rotate(-2deg); }
-        60% { transform: translate(-3px, 1px) rotate(0deg); }
-        70% { transform: translate(3px, 1px) rotate(-4deg); }
-        80% { transform: translate(-1px, -1px) rotate(2deg); }
-        90% { transform: translate(1px, 2px) rotate(0deg); }
-        100% { transform: translate(1px, -2px) rotate(-3deg); }
+    .popover:popover-open {
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 1rem;
+
+        padding: 2rem 5rem;
+
+        background: var(--background-dark);
+        color: inherit;
+
+        border: 2px solid var(--secondary-background-dark);
+        border-radius: 12px;
+    }
+
+    .popover:popover-open > img {
+        width: 90px !important;
+        height: 90px !important;
+
+        padding: 12px;
+
+        background: var(--secondary-background-dark);
+        border-radius: 12px;
+
+        animation: fadeIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    }
+
+    @keyframes fadeIn {
+        from {
+            scale: 0.5;
+        }
+        to {
+            scale: 1;
+        }
     }
 </style>
diff --git a/src/components/tech-marquee.astro b/src/components/tech-marquee.astro
@@ -1,44 +1,21 @@
 ---
 import PictureFrame from "./picture-frame.astro";
 
-let pictures = [
-    "astro",
-    "aws",
-    "cpp",
-    "cs",
-    "css",
-    "firebase",
-    "git",
-    "github",
-    "html",
-    "javascript",
-    "linux",
-    "mongo",
-    "neovim",
-    "node",
-    "nuxt",
-    "postgres",
-    "python",
-    "supabase",
-    "tailwind",
-    "typescript",
-    "unity",
-    "vue",
-];
+import frameData from "../data/frame-data.js";
 
-pictures = pictures.sort(() => Math.random() - 0.5);
+const sortedData = frameData.sort(() => Math.random() - 0.5);
 ---
 
 <figure>
     <div>
         {
-            pictures.map((picture) => (
-                <PictureFrame src={`/images/tech-logos/${picture}.png`} alt={picture} />
+            sortedData.map((data) => (
+                <PictureFrame data={data} />
             ))
         }
         {
-            pictures.map((picture) => (
-                <PictureFrame src={`/images/tech-logos/${picture}.png`} alt={picture} />
+            sortedData.map((data) => (
+                <PictureFrame data={data} />
             ))
         }
     </div>

diff --git a/src/data/frame-data.js b/src/data/frame-data.js
@@ -0,0 +1,92 @@
+const techLogoPath = "images/tech-logos/";
+
+export default [
+    {
+        title: "Astro",
+        src: techLogoPath + "astro.png",
+    },
+    {
+        title: "AWS",
+        src: techLogoPath + "aws.png",
+    },
+    {
+        title: "C++",
+        src: techLogoPath + "cpp.png",
+    },
+    {
+        title: "C#",
+        src: techLogoPath + "cs.png",
+    },
+    {
+        title: "CSS",
+        src: techLogoPath + "css.png",
+    },
+    {
+        title: "Firebase",
+        src: techLogoPath + "firebase.png",
+    },
+    {
+        title: "Git",
+        src: techLogoPath + "git.png",
+    },
+    {
+        title: "GitHub",
+        src: techLogoPath + "github.png",
+    },
+    {
+        title: "HTML",
+        src: techLogoPath + "html.png",
+    },
+    {
+        title: "JavaScript",
+        src: techLogoPath + "javascript.png",
+    },
+    {
+        title: "Linux",
+        src: techLogoPath + "linux.png",
+    },
+    {
+        title: "MongoDB",
+        src: techLogoPath + "mongo.png",
+    },
+    {
+        title: "NeoVim",
+        src: techLogoPath + "neovim.png",
+    },
+    {
+        title: "Node.js",
+        src: techLogoPath + "node.png",
+    },
+    {
+        title: "Nuxt.js",
+        src: techLogoPath + "nuxt.png",
+    },
+    {
+        title: "Postgres",
+        src: techLogoPath + "postgres.png",
+    },
+    {
+        title: "Python",
+        src: techLogoPath + "python.png",
+    },
+    {
+        title: "Supabase",
+        src: techLogoPath + "supabase.png",
+    },
+    {
+        title: "TailwindCSS",
+        src: techLogoPath + "tailwind.png",
+    },
+    {
+        title: "TypeScript",
+        src: techLogoPath + "typescript.png",
+    },
+    {
+        title: "Unity",
+        src: techLogoPath + "unity.png",
+    },
+    {
+        title: "Vue.js",
+        src: techLogoPath + "vue.png",
+    },
+];
diff --git a/src/styles/article.css b/src/styles/article.css
@@ -1,7 +1,3 @@
-img {
-    max-width: 100%;
-}
-
 ul > li, ol > li{
     margin-left: 1rem;
 }