Git: Updated animations and added tooltips. Hub: Now showing real projects.
This commit is contained in:
parent
b2e94296dd
commit
7dcbf90ed0
6 changed files with 165 additions and 41 deletions
|
|
@ -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="flex-row">
|
||||
<SvgIcon type="mdi" path={mdiBookmark}></SvgIcon>
|
||||
<div class="git-commit flex-row">
|
||||
<p>{get_size(repoSize)}</p>
|
||||
<SvgIcon type="mdi" path={mdiDatabase}></SvgIcon>
|
||||
<p>{commitNum}</p>
|
||||
<SvgIcon type="mdi" path={mdiHistory}></SvgIcon>
|
||||
<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(display["repoSize"])}</p>
|
||||
<SvgIcon type="mdi" path={mdiDatabase}></SvgIcon>
|
||||
<p>{display["commitNum"]}</p>
|
||||
<SvgIcon type="mdi" path={mdiHistory}></SvgIcon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h1>{title}</h1>
|
||||
<div class="git-tag margin-bot-force flex-row">
|
||||
{#each repoTopics as topic}
|
||||
<span>{topic}</span>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="git-color flex-row">
|
||||
{#each repoColors as cl}
|
||||
<div
|
||||
style={`width:${cl.lang_percentage}%; background-color: ${map[cl.lang].color};`}
|
||||
></div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<p>Loading...</p>
|
||||
{/if}
|
||||
<h1>{title}</h1>
|
||||
<div class="git-tag margin-bot-force flex-row">
|
||||
{#each repoTopics as topic}
|
||||
<span>{topic}</span>
|
||||
{/each}
|
||||
</div>
|
||||
<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}
|
||||
</div>
|
||||
{:else}
|
||||
<p>Loading...</p>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="overlay-front"></div>
|
||||
<div class="overlay-back" bind:this={overlay_div}></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -70,6 +70,25 @@
|
|||
}
|
||||
|
||||
.git-color > div {
|
||||
height: 100%;
|
||||
|
||||
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
29
src/lib/css/overlay.css
Normal 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;
|
||||
}
|
||||
|
|
@ -32,5 +32,10 @@
|
|||
"topic": "videogame"
|
||||
}
|
||||
],
|
||||
"lab": "Le laboratoire"
|
||||
"lab": "Le laboratoire",
|
||||
"repos": [
|
||||
"Training/yoyo_card",
|
||||
"INSA/reoc",
|
||||
"Training/rust_training"
|
||||
]
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue