Etheryo/etheryo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Yohan Boujon 2025-04-05 14:52:11 +02:00
parent b2e94296dd
commit 7dcbf90ed0
6 changed files with 165 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

77
src/lib/components/git.svelte
View file

@ -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,13 +130,14 @@
window.location.href = `https://git.etheryo.fr/${repo}`;
}}
>
<div class="git-container overlay">
{#if !loading}
<div class="flex-row">
<SvgIcon type="mdi" path={mdiBookmark}></SvgIcon>
<div class="git-commit flex-row">
<p>{get_size(repoSize)}</p>
<p>{get_size(display["repoSize"])}</p>
<SvgIcon type="mdi" path={mdiDatabase}></SvgIcon>
<p>{commitNum}</p>
<p>{display["commitNum"]}</p>
<SvgIcon type="mdi" path={mdiHistory}></SvgIcon>
</div>
</div>
@ -85,6 +150,7 @@
<div class="git-color flex-row">
{#each repoColors as cl}
<div
data-tooltip={`${cl.lang} (${cl.lang_percentage}%)`}
style={`width:${cl.lang_percentage}%; background-color: ${map[cl.lang].color};`}
></div>
{/each}
@ -93,3 +159,6 @@
<p>Loading...</p>
{/if}
</div>
<div class="overlay-front"></div>
<div class="overlay-back" bind:this={overlay_div}></div>
</div>

2
src/lib/components/project.svelte
View file

@ -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) {

35
src/lib/css/git.css
View file

@ -1,8 +1,7 @@
.git-container {
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;
background-color: #00000000;
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;
}

29
src/lib/css/overlay.css Normal file
View file

@ -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;
}

7
src/lib/json/hub.json
View file

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

8
src/routes/+page.svelte
View file

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