gh contributions & main page
This commit is contained in:
parent
434c214908
commit
05f6b7fd39
|
@ -1,10 +1,6 @@
|
||||||
type Day = {
|
type Contribution = {
|
||||||
count: number;
|
date: string;
|
||||||
day: number;
|
|
||||||
level: number;
|
level: number;
|
||||||
month: string;
|
|
||||||
name: string;
|
|
||||||
year: number;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export type Contributions = Array<Day | null>;
|
export type Contributions = Array<Contribution | null>;
|
||||||
|
|
|
@ -20,11 +20,6 @@
|
||||||
Look at my blog
|
Look at my blog
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="space-y-2">
|
|
||||||
<p>Try editing the following:</p>
|
|
||||||
<p><code class="code">foo:bar</code></p>
|
|
||||||
<p><code class="code">ligma:ass</code></p>
|
|
||||||
</div>
|
|
||||||
<img
|
<img
|
||||||
src="/animations/infinity-loop-icon.svg"
|
src="/animations/infinity-loop-icon.svg"
|
||||||
alt="Icon"
|
alt="Icon"
|
||||||
|
@ -33,7 +28,7 @@
|
||||||
<h2 class="h2">My github contributions</h2>
|
<h2 class="h2">My github contributions</h2>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="scene">
|
<div class="scene w-full">
|
||||||
<Canvas>
|
<Canvas>
|
||||||
<Scene />
|
<Scene />
|
||||||
</Canvas>
|
</Canvas>
|
||||||
|
@ -53,7 +48,7 @@
|
||||||
animation: pulse 5s cubic-bezier(0, 0, 0, 0.5) infinite, glow 5s linear infinite;
|
animation: pulse 5s cubic-bezier(0, 0, 0, 0.5) infinite, glow 5s linear infinite;
|
||||||
}
|
}
|
||||||
.scene {
|
.scene {
|
||||||
@apply relative inset-1 w-[100%vw] h-[150px] md:h-[600px] lg:h-[800px];
|
@apply relative inset-1 w-[100%vw] h-[150px] md:h-[400px] lg:h-[600px];
|
||||||
}
|
}
|
||||||
@keyframes glow {
|
@keyframes glow {
|
||||||
0% {
|
0% {
|
||||||
|
|
|
@ -17,7 +17,7 @@
|
||||||
const colorMap = ['#0e0e0e', '#00442a', '#006d35', '#00a648', '#00d35c'];
|
const colorMap = ['#0e0e0e', '#00442a', '#006d35', '#00a648', '#00d35c'];
|
||||||
|
|
||||||
// function to normalize the height of the cubes
|
// function to normalize the height of the cubes
|
||||||
function normalize(count: number, base = 4, offset = 2) {
|
function normalize(count: number, base = 4, offset = 6) {
|
||||||
switch (true) {
|
switch (true) {
|
||||||
case count === 0:
|
case count === 0:
|
||||||
return base;
|
return base;
|
||||||
|
@ -28,7 +28,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// tweened value to animate the scaleY of the cubes, this should actually be Z, but
|
// tweened value to animate the Z scale of the cubes
|
||||||
const scaleZ = tweened(0, { duration: 2000, easing: quadInOut });
|
const scaleZ = tweened(0, { duration: 2000, easing: quadInOut });
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
|
@ -37,7 +37,7 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<T.PerspectiveCamera makeDefault position={[10, 100, 600]} fov={50}>
|
<T.PerspectiveCamera makeDefault position={[10, 100, 600]} fov={50}>
|
||||||
<OrbitControls enableDamping />
|
<OrbitControls enableDamping autoRotate />
|
||||||
</T.PerspectiveCamera>
|
</T.PerspectiveCamera>
|
||||||
|
|
||||||
<T.AmbientLight color="#fff" intensity={0.4} />
|
<T.AmbientLight color="#fff" intensity={0.4} />
|
||||||
|
@ -48,13 +48,13 @@
|
||||||
<Grid infiniteGrid sectionColor="#4a4b4a" sectionSize={40} cellSize={40} fadeDistance={800} />
|
<Grid infiniteGrid sectionColor="#4a4b4a" sectionSize={40} cellSize={40} fadeDistance={800} />
|
||||||
{#if Array.isArray(contributions) && contributions.length > 0}
|
{#if Array.isArray(contributions) && contributions.length > 0}
|
||||||
{#each contributions as row, i}
|
{#each contributions as row, i}
|
||||||
{#each row as day, j}
|
{#each row as contribution, j}
|
||||||
{#if day !== null}
|
{#if contribution !== null}
|
||||||
{@const y = normalize(day.level)}
|
{@const z = normalize(contribution.level)}
|
||||||
<T.Group position={[0, 0, 12 * i]} scale.y={$scaleZ}>
|
<T.Group position={[0, 0, 12 * i]} scale.z={$scaleZ}>
|
||||||
<T.Mesh position={[12 * j, y / 2, 0]}>
|
<T.Mesh position={[12 * j, z / 2, 0]}>
|
||||||
<T.BoxGeometry args={[10, y, 10]} />
|
<T.BoxGeometry args={[10, z, 10]} />
|
||||||
<T.MeshStandardMaterial color={colorMap[day.level]} />
|
<T.MeshStandardMaterial color={colorMap[contribution.level]} />
|
||||||
</T.Mesh>
|
</T.Mesh>
|
||||||
</T.Group>
|
</T.Group>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
Loading…
Reference in New Issue