Git: Updated animations and added tooltips. Hub: Now showing real projects.

src/lib/components/git.svelte

@@ -1,5 +1,6 @@
 <script>
     import "$lib/css/base.css";
+    import "$lib/css/overlay.css";
     import "$lib/css/git.css";
 
     import { mdiBookmark, mdiHistory, mdiDatabase } from "@mdi/js";
@@ -8,6 +9,7 @@
     import { get_size } from "$lib/ts/size.ts";
     import { onMount } from "svelte";
     import map from "language-map";
+    import anime from "animejs";
 
     export let repo = "Etheryo/blog";
     let loading = true;
@@ -16,6 +18,34 @@
     let repoSize = 0;
     let repoTopics = [];
     let repoColors = [];
+    let display = {
+        commitNum: 0,
+        repoSize: 0,
+    };
+
+    let overlay_div;
+	let cursorX = 0;
+	let cursorY = 0;
+	let updateX = true;
+    function update_gradient(event, div) {
+        const rect = div.getBoundingClientRect();
+        if (updateX) {
+            cursorX = event.clientX - rect.left;
+        }
+        cursorY = event.clientY - rect.top;
+        overlay_div.style.backgroundImage = `radial-gradient(circle farthest-corner at ${Math.floor(cursorX)}px ${Math.floor(cursorY)}px, var(--color-background) 0%, #958a98 100%)`;
+    }
+
+    function animateForeground(isEntering, div_back) {
+        const targetOpacity = isEntering ? 1 : 0;
+
+        anime({
+            targets: div_back,
+            opacity: [1 - targetOpacity, targetOpacity],
+            duration: 400,
+            easing: "easeInOutQuad",
+        });
+    }
 
     onMount(async () => {
         // Gathering commit number
@@ -49,16 +79,50 @@
                         (repoColors[i].lang_percentage / lang_total) * 1000,
                     ) / 10;
             }
-            console.log(repoColors);
             loading = false;
         }
+
+        // Animation for counters
+        anime({
+            targets: { num: 0 },
+            num: [0, commitNum],
+            delay: 500,
+            duration: 1500,
+            easing: "easeOutQuint",
+            update: function (anim) {
+                display["commitNum"] = Math.floor(
+                    anim.animations[0].currentValue,
+                );
+            },
+        });
+        anime({
+            targets: { num: 0 },
+            num: [0, repoSize],
+            delay: 500,
+            duration: 2500,
+            easing: "easeOutQuint",
+            update: function (anim) {
+                display["repoSize"] = Math.floor(
+                    anim.animations[0].currentValue,
+                );
+            },
+        });
     });
 </script>
 
 <div
-    class="git-container flex-col"
+    class="overlay-container"
     role="button"
     tabindex="0"
+    on:mousemove={(event) => {
+        update_gradient(event, overlay_div);
+    }}
+    on:mouseenter={() => {
+        animateForeground(true, overlay_div);
+    }}
+    on:mouseleave={() => {
+        animateForeground(false, overlay_div);
+    }}
     on:click={() => {
         window.location.href = `https://git.etheryo.fr/${repo}`;
     }}
@@ -66,30 +130,35 @@
         window.location.href = `https://git.etheryo.fr/${repo}`;
     }}
 >
-    {#if !loading}
+    <div class="git-container overlay">
-        <div class="flex-row">
+        {#if !loading}
-            <SvgIcon type="mdi" path={mdiBookmark}></SvgIcon>
+            <div class="flex-row">
-            <div class="git-commit flex-row">
+                <SvgIcon type="mdi" path={mdiBookmark}></SvgIcon>
-                <p>{get_size(repoSize)}</p>
+                <div class="git-commit flex-row">
-                <SvgIcon type="mdi" path={mdiDatabase}></SvgIcon>
+                    <p>{get_size(display["repoSize"])}</p>
-                <p>{commitNum}</p>
+                    <SvgIcon type="mdi" path={mdiDatabase}></SvgIcon>
-                <SvgIcon type="mdi" path={mdiHistory}></SvgIcon>
+                    <p>{display["commitNum"]}</p>
+                    <SvgIcon type="mdi" path={mdiHistory}></SvgIcon>
+                </div>
             </div>
-        </div>
+            <h1>{title}</h1>
-        <h1>{title}</h1>
+            <div class="git-tag margin-bot-force flex-row">
-        <div class="git-tag margin-bot-force flex-row">
+                {#each repoTopics as topic}
-            {#each repoTopics as topic}
+                    <span>{topic}</span>
-                <span>{topic}</span>
+                {/each}
-            {/each}
+            </div>
-        </div>
+            <div class="git-color flex-row">
-        <div class="git-color flex-row">
+                {#each repoColors as cl}
-            {#each repoColors as cl}
+                    <div
-                <div
+                        data-tooltip={`${cl.lang} (${cl.lang_percentage}%)`}
-                    style={`width:${cl.lang_percentage}%; background-color: ${map[cl.lang].color};`}
+                        style={`width:${cl.lang_percentage}%; background-color: ${map[cl.lang].color};`}
-                ></div>
+                    ></div>
-            {/each}
+                {/each}
-        </div>
+            </div>
-    {:else}
+        {:else}
-        <p>Loading...</p>
+            <p>Loading...</p>
-    {/if}
+        {/if}
+    </div>
+    <div class="overlay-front"></div>
+    <div class="overlay-back" bind:this={overlay_div}></div>
 </div>

src/lib/components/project.svelte

@@ -31,7 +31,7 @@
 			cursorY = event.clientY - rect.top;
 		}
 		cursorX = event.clientX - rect.left;
-		post_div.style.backgroundImage = `radial-gradient(circle farthest-corner at ${Math.floor(cursorX)}px ${Math.floor(cursorY)}px, var(--color-background) 0%, #958a98 100%)`;
+		div.style.backgroundImage = `radial-gradient(circle farthest-corner at ${Math.floor(cursorX)}px ${Math.floor(cursorY)}px, var(--color-background) 0%, #958a98 100%)`;
 	}
 
 	function animateForeground(isEntering, div_back) {

src/lib/css/git.css

@@ -1,8 +1,7 @@
 .git-container {
-    background-image: var(--background-light);
+    background-color: #00000000;
-    box-shadow: rgba(79, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
     border-radius: 1rem;
-    width: calc(var(--content-width)/3);
+    width: calc(var(--content-width)/3 - 2rem);
     height: 10rem;
     cursor: pointer;
     overflow: hidden;
@@ -11,8 +10,8 @@
 .git-container svg {
     width: 3rem;
     height: auto;
-    transform: translate(-2px, -8px);
     color: var(--color-subtext);
+    transform: translate(-10px, -8px) !important;
     margin-bottom: 0;
     padding-bottom: 0;
 }
@@ -20,7 +19,7 @@
 .git-container h1 {
     font-family: "JetBrains Mono";
     font-weight: 800;
-    font-size: 1.4rem;
+    font-size: 1.2rem;
     margin: 1rem;
     margin-top: 0;
 }
@@ -37,7 +36,7 @@
 }
 
 .git-commit svg {
-    transform: translate(0);
+    transform: translate(0) !important;
     width: 2rem;
     margin-left: 0.3rem;
     margin-right: 0.3rem;
@@ -46,6 +45,7 @@
 .git-commit p {
     color: var(--color-subtext);
     font-family: "JetBrains Mono";
+    font-size: 1rem;
     margin: 0;
     margin-left: 0.6rem;
     user-select: none;
@@ -56,7 +56,7 @@
     background-color: var(--color-pill);
     font-family: "JetBrains Mono";
     font-weight: 500;
-    font-size: 0.8rem;
+    font-size: 0.7rem;
     margin-bottom: 1rem;
     margin-left: 0.8rem;
     padding: 0.4rem;
@@ -71,5 +71,24 @@
 
 .git-color > div {
     height: 100%;   
-    
+    transition: var(--transition);
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
+
+[data-tooltip]:hover::after {
+    display: block;
+    position: absolute;
+    content: attr(data-tooltip);
+    font-family: "JetBrains Mono";
+    font-weight: 500;
+    font-size: 0.8rem;
+    background-color: var(--color-text);
+    color: var(--color-background);
+    transform: translateY(1rem);
+    padding: 0.8rem;
+    border-radius: 1rem;
+    box-shadow: rgba(79, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
+    opacity: 0.8;
 }

src/lib/css/overlay.css

@@ -0,0 +1,29 @@
+.overlay-container {
+    display: grid;
+    grid-template-areas:
+        "overlay-back"
+        "overlay-front"
+        "overlay";
+    margin-left: 1rem;
+    margin-right: 1rem;
+}
+
+.overlay {
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    grid-area: overlay;
+    z-index: var(--z-index-front);
+}
+
+.overlay-front {
+    grid-area: overlay;
+    background-image: var(--background-light);
+    box-shadow: rgba(79, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
+    border-radius: 1rem;
+}
+
+.overlay-back {
+    grid-area: overlay;
+    border-radius: 1rem;
+}

src/lib/json/hub.json

@@ -32,5 +32,10 @@
             "topic": "videogame"
         }
     ],
-    "lab": "Le laboratoire"
+    "lab": "Le laboratoire",
+    "repos": [
+        "Training/yoyo_card",
+        "INSA/reoc",
+        "Training/rust_training"
+    ]
 }

src/routes/+page.svelte

@@ -58,7 +58,9 @@
 	<div class="section">
 		<h1>{hubjson.lab}</h1>
 	</div>
-	<Git repo="Etheryo/blog"/>
+	<div class="flex w-100 justify-center">
-	<Git repo="INSA/assembly_project"/>
+		{#each hubjson.repos as repo}
-	<Git repo="Etheryo/curriculum-vitae"/>
+			<Git {repo} />
+		{/each}
+	</div>
 </div>