feat: polling init

src/lib/components/atoms/Button.svelte

@@ -9,7 +9,9 @@
 
 <a {href} {target}>
 	<div class={type} style="width: {maxWidth ? '100%' : 'max-content'}">
-		<img src="../icons/{icon}.svg" alt={icon} />
+		{#if icon}
+			<img src="../icons/{icon}.svg" alt={icon} />
+		{/if}
 		<slot />
 	</div>
 </a>
@@ -46,8 +48,6 @@
 		filter: brightness(85%);
 	}
 
-
-
 	div,
 	.button-secondary {
 		display: flex;

src/lib/components/atoms/ContributorPerson.svelte

@@ -2,10 +2,13 @@
 	export let name: string;
 	export let pfp: string;
 	export let url: string;
-	let alt = `${name}'s profile picture`;
+	let alt = `h`;
+
+	let clicked = false;
+	
 </script>
 
-<a href={url} rel="noreferrer" target="_blank">
+<a href={url} rel="noreferrer" target="_blank" on:click={() => (clicked = !clicked)} class:clicked>
 	<img src={pfp} {alt} />
 	<h2>{name}</h2>
 </a>
@@ -14,24 +17,20 @@
 	a {
 		color: var(--white);
 		text-decoration: none;
-		padding: 0.5rem;
+		padding: 1rem;
 		width: 100%;
 		transition: all 0.3s var(--bezier-one);
-		border-radius: 4px;
+		border-radius: 8px;
 		display: flex;
 		gap: 1rem;
 		align-items: center;
 		background-color: var(--grey-six);
 		border: 1px solid var(--grey-three);
+		cursor: pointer;
 	}
 
-
 	a:hover {
-		background-color: var(--accent-color);
-	}
-
-	a:hover > h2 {
-		color: var(--grey-four);
+		background-color: var(--grey-one);
 	}
 
 	h2 {
@@ -41,12 +40,30 @@
 		text-overflow: ellipsis;
 	}
 
+	.clicked {
+		background-color: var(--accent-color);
+	}
+
+	.clicked h2 {
+		color: var(--grey-four);
+	}
+
+	.clicked:hover {
+		background-color: var(--accent-color);
+	}
+
 	img {
-		border-radius: 50%;
-		height: 30px;
-		width: 30px;
+		border-radius: 8px;
+		height: 150px;
+		width: 150px;
 		background-color: var(--grey-two);
 		transition: transform 0.4s var(--bezier-one);
 		user-select: none;
 	}
+
+	@media screen and (max-width: 768px) {
+		a {
+			flex-direction: column;
+		}
+	}
 </style>