Rudimentary implementation of Mentions

src/assets/styles/themes.scss

@@ -2,6 +2,7 @@
 	--bg-color: #{$grey-80};
 	--page-color: #{$grey-100};
 	--card-color: #{$grey-90};
+	--mention-bg-color: #{$grey-90};
 
 	--text-color: #{$grey-20};
 }

src/lib/components/Mention.svelte

@@ -0,0 +1,75 @@
+<script>
+	export let href = ''
+	export let title = ''
+	export let sourceType = ''
+	export let date = ''
+	export let source = ''
+</script>
+
+<li class="mention">
+	<a {href} target="_blank">
+		<h4>{title}</h4>
+		<footer>
+			{#if source}
+				<span class="source">{source}</span>
+			{/if}
+			<span class="source-type">{sourceType}</span>
+			<time>{date}</time>
+		</footer>
+	</a>
+</li>
+
+<style lang="scss">
+	$card-color: #f7f7f7;
+	$page-horz-padding: 20px;
+	$card-height: 200px;
+	$mention-padding: 15px;
+	$font-size: 16px;
+	$line-height: 1.5;
+	$font-weight-med: 500;
+
+	.mention {
+		background: $card-color;
+		border-radius: $corner-radius;
+		cursor: pointer;
+		transition: background 0.2s ease-in-out;
+
+		&:hover {
+			background: darken($card-color, 2%);
+		}
+
+		a {
+			display: flex;
+			flex-direction: column;
+			font-size: $font-size;
+			line-height: $line-height;
+			padding: $unit-3x;
+			text-decoration: none;
+			color: inherit;
+		}
+
+		h4 {
+			display: block;
+			font-weight: 400;
+			font-size: $font-size;
+			flex-grow: 2;
+			margin: 0;
+
+			cite {
+				font-style: normal;
+			}
+		}
+
+		footer {
+			color: $grey-50;
+			flex-grow: 0;
+			font-weight: $font-weight-med;
+			font-size: 0.8em;
+		}
+
+		.source,
+		.source-type {
+			margin-right: 0.5em;
+		}
+	}
+</style>

src/lib/components/MentionList.svelte

@@ -0,0 +1,65 @@
+<script>
+	import Mention from './Mention.svelte'
+
+	const mentions = [
+		{
+			href: 'https://medium.com/figma-design/pinterests-first-design-hire-built-a-habit-formation-app-a6aee9103610',
+			title: "Pinterest's first design hire built an app for passion projects",
+			sourceType: 'Blog',
+			date: 'Apr 2018'
+		},
+		{
+			href: 'http://revisionpath.com/justin-edmund/',
+			title: 'Revision Path #113',
+			sourceType: 'Podcast',
+			date: 'Dec 2015'
+		},
+		{
+			href: 'http://spec.fm/podcasts/design-details/19703',
+			title: 'Design Details #76',
+			sourceType: 'Podcast',
+			date: 'Nov 2015'
+		},
+		{
+			href: 'http://www.usatoday.com/story/tech/2014/10/30/justin-edmund-pinterest-diversity-silicon-valley-ferguson-african-americans-hispanics-technology/17832781/',
+			title: "Pinterest's seventh employee on being black in Silicon Valley",
+			source: 'USA Today',
+			sourceType: 'Article',
+			date: 'Oct 2014'
+		},
+		{
+			href: 'http://www.cmu.edu/homepage/creativity/2012/spring/hopes-pinned-on-success.shtml',
+			title: 'Hopes Pinned on Success',
+			source: 'Carnegie Mellon Today',
+			sourceType: 'Article',
+			date: 'May 2012'
+		},
+		{
+			href: 'http://www.reuters.com/article/us-designers-startup-idUSBRE83C0QG20120416',
+			title: 'In Silicon Valley, designers emerge as rock stars',
+			source: 'Reuters',
+			sourceType: 'Article',
+			date: 'Apr 2012'
+		}
+	]
+</script>
+
+<section class="links">
+	<ul>
+		{#each mentions as mention (mention.href)}
+			<Mention {...mention} />
+		{/each}
+	</ul>
+</section>
+
+<style lang="scss">
+	.links {
+		ul {
+			display: grid;
+			grid-template-columns: 1fr 1fr;
+			gap: $unit-2x;
+			list-style: none;
+			padding: 0;
+		}
+	}
+</style>

src/routes/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import Avatar from '$components/Avatar.svelte'
+	import MentionList from '$components/MentionList.svelte'
 	import Page from '$components/Page.svelte'
 	import ProjectList from '$components/ProjectList.svelte'
 	import Squiggly from '$components/Squiggly.svelte'
@@ -15,3 +16,50 @@
 
 	<ProjectList />
 </Page>
+
+<Page>
+	<svelte:fragment slot="header">
+		<Squiggly text="A little about me" />
+	</svelte:fragment>
+
+	<section class="bio">
+		<p>
+			Hello! My name is <em>Justin Edmund</em>. I'm a software designer and developer living in San
+			Francisco.
+		</p>
+		<p>
+			Right now, I'm spending my free time building a hobby journaling app called <a
+				href="https://maitsu.co">Maitsu</a
+			>. I've spent time at several companies over the last 11 years, but you might know as the
+			first designer hired at
+			<a href="https://www.pinterest.com/" target="_blank">Pinterest</a>.
+		</p>
+		<p>
+			I was born and raised in New York City and spend a lot of time in Tokyo. I graduated from <a
+				href="http://design.cmu.edu/"
+				target="_blank">Carnegie Mellon University</a
+			> in 2011 with a Bachelors of Arts in Communication Design.
+		</p>
+	</section>
+
+	<MentionList />
+</Page>
+
+<footer>
+	<p>&copy; 2024 Justin Edmund</p>
+</footer>
+
+<style lang="scss">
+	a,
+	em {
+		color: $red-60;
+		font-weight: 500;
+		font-style: normal;
+	}
+
+	ul {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+	}
+</style>