From 4540760868e3cf8fc44a359aa9787c2a4c2bbe44 Mon Sep 17 00:00:00 2001
From: Justin Edmund <383021+jedmund@users.noreply.github.com>
Date: Fri, 12 Jul 2024 08:44:37 -0400
Subject: [PATCH] Add ProjectList and ProjectItem

Rendering projects on the home page
---
 src/lib/components/ProjectItem.svelte | 50 ++++++++++++++++++
 src/lib/components/ProjectList.svelte | 76 +++++++++++++++++++++++++++
 2 files changed, 126 insertions(+)
 create mode 100644 src/lib/components/ProjectItem.svelte
 create mode 100644 src/lib/components/ProjectList.svelte

diff --git a/src/lib/components/ProjectItem.svelte b/src/lib/components/ProjectItem.svelte
new file mode 100644
index 0000000..8b420af
--- /dev/null
+++ b/src/lib/components/ProjectItem.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+	import SVGHoverEffect from '$components/SVGHoverEffect.svelte'
+	import type { SvelteComponent } from 'svelte'
+
+	export let SVGComponent: typeof SvelteComponent
+	export let backgroundColor: string
+	export let name: string
+	export let description: string
+</script>
+
+<div class="project-item">
+	<SVGHoverEffect
+		{SVGComponent}
+		{backgroundColor}
+		maxMovement={10}
+		smoothness={0.1}
+		containerHeight="220px"
+		bounceStiffness={0.1}
+		bounceDamping={0.2}
+	/>
+	<h3 class="project-name">{name}</h3>
+	<p class="project-description">{description}</p>
+</div>
+
+<style lang="scss">
+	.project-item {
+		display: flex;
+		flex-direction: column;
+		gap: $unit;
+	}
+
+	.project-name {
+		margin: $unit 0 $unit-half;
+		font-size: 18px;
+		font-weight: bold;
+		color: $red-60;
+	}
+
+	.project-description {
+		margin: 0;
+		font-size: 14px;
+		line-height: 1.4;
+		max-height: 2.8em;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		-webkit-box-orient: vertical;
+	}
+</style>
diff --git a/src/lib/components/ProjectList.svelte b/src/lib/components/ProjectList.svelte
new file mode 100644
index 0000000..b7ee33b
--- /dev/null
+++ b/src/lib/components/ProjectList.svelte
@@ -0,0 +1,76 @@
+<script lang="ts">
+	import ProjectItem from '$components/ProjectItem.svelte'
+
+	import MaitsuLogo from '$illos/logo-maitsu.svg?component'
+	import SlackLogo from '$illos/logo-slack.svg?component'
+	import FigmaLogo from '$illos/logo-figma.svg?component'
+	import PinterestLogo from '$illos/logo-pinterest.svg?component'
+	import SVGHoverEffect from '$components/SVGHoverEffect.svelte'
+
+	interface Project {
+		SVGComponent: typeof SvelteComponent
+		backgroundColor: string
+		name: string
+		description: string
+	}
+
+	const projects: Project[] = [
+		{
+			SVGComponent: MaitsuLogo,
+			backgroundColor: '#FFF7EA',
+			name: 'Maitsu',
+			description:
+				"As a personal project, I'm building a hobby journal that helps people make something new every week."
+		},
+		{
+			SVGComponent: SlackLogo,
+			backgroundColor: '#4a154b',
+			name: 'Slack',
+			description: 'I led design for end-user facing automation features at Slack.'
+		},
+		{
+			SVGComponent: FigmaLogo,
+			backgroundColor: '#2c2c2c',
+			name: 'Figma',
+			description: 'I helped lead and set the direction for the early prototyping team at Figma.'
+		},
+		{
+			SVGComponent: PinterestLogo,
+			backgroundColor: '#f7f7f7',
+			name: 'Pinterest',
+			description:
+				'As the first design hire at Pinterest, I helped define product direction and grow the design team.'
+		}
+	]
+</script>
+
+<section class="projects">
+	<ul>
+		{#each projects as project}
+			<li>
+				<ProjectItem {...project} />
+			</li>
+		{/each}
+	</ul>
+</section>
+
+<style lang="scss">
+	.projects ul {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		list-style: none;
+		padding: 0;
+		width: 100%;
+		gap: $unit-4x;
+		margin: 0;
+
+		@include breakpoint('phone') {
+			grid-template-columns: 1fr;
+		}
+
+		li {
+			flex: 0 0 calc(50% - #{$unit-2x}); /* 50% width minus gap */
+			box-sizing: border-box;
+		}
+	}
+</style>