gh contributions & main page

src/lib/types/contributions.d.ts

@@ -1,10 +1,6 @@
-type Day = {
-	count: number;
-	day: number;
+type Contribution = {
+	date: string;
 	level: number;
-	month: string;
-	name: string;
-	year: number;
 };
 
-export type Contributions = Array<Day | null>;
+export type Contributions = Array<Contribution | null>;

src/routes/(home)/+page.svelte

@@ -20,11 +20,6 @@
 				Look at my blog
 			</a>
 		</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
 			src="/animations/infinity-loop-icon.svg"
 			alt="Icon"
@@ -33,7 +28,7 @@
 		<h2 class="h2">My github contributions</h2>
 	</div>
 
-	<div class="scene">
+	<div class="scene w-full">
 		<Canvas>
 			<Scene />
 		</Canvas>
@@ -53,7 +48,7 @@
 		animation: pulse 5s cubic-bezier(0, 0, 0, 0.5) infinite, glow 5s linear infinite;
 	}
 	.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 {
 		0% {

src/routes/(home)/Scene.svelte

@@ -17,7 +17,7 @@
 	const colorMap = ['#0e0e0e', '#00442a', '#006d35', '#00a648', '#00d35c'];
 
 	// 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) {
 			case count === 0:
 				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 });
 
 	onMount(() => {
@@ -37,7 +37,7 @@
 </script>
 
 <T.PerspectiveCamera makeDefault position={[10, 100, 600]} fov={50}>
-	<OrbitControls enableDamping />
+	<OrbitControls enableDamping autoRotate />
 </T.PerspectiveCamera>
 
 <T.AmbientLight color="#fff" intensity={0.4} />
@@ -48,13 +48,13 @@
 	<Grid infiniteGrid sectionColor="#4a4b4a" sectionSize={40} cellSize={40} fadeDistance={800} />
 	{#if Array.isArray(contributions) && contributions.length > 0}
 		{#each contributions as row, i}
-			{#each row as day, j}
-				{#if day !== null}
-					{@const y = normalize(day.level)}
-					<T.Group position={[0, 0, 12 * i]} scale.y={$scaleZ}>
-						<T.Mesh position={[12 * j, y / 2, 0]}>
-							<T.BoxGeometry args={[10, y, 10]} />
-							<T.MeshStandardMaterial color={colorMap[day.level]} />
+			{#each row as contribution, j}
+				{#if contribution !== null}
+					{@const z = normalize(contribution.level)}
+					<T.Group position={[0, 0, 12 * i]} scale.z={$scaleZ}>
+						<T.Mesh position={[12 * j, z / 2, 0]}>
+							<T.BoxGeometry args={[10, z, 10]} />
+							<T.MeshStandardMaterial color={colorMap[contribution.level]} />
 						</T.Mesh>
 					</T.Group>
 				{/if}