152 lines
2.9 KiB
Svelte
152 lines
2.9 KiB
Svelte
<script lang="ts">
|
|
import Album from '$components/Album.svelte'
|
|
import Avatar from '$components/Avatar.svelte'
|
|
import Game from '$components/Game.svelte'
|
|
import MentionList from '$components/MentionList.svelte'
|
|
import Page from '$components/Page.svelte'
|
|
import ProjectList from '$components/ProjectList.svelte'
|
|
import RecentAlbums from '$components/RecentAlbums.svelte'
|
|
|
|
import type { PageData } from './$types'
|
|
|
|
export let data: PageData
|
|
|
|
$: ({ albums, games, error } = data)
|
|
</script>
|
|
|
|
<Page>
|
|
<svelte:fragment slot="header">
|
|
<h1 aria-label="@jedmund">
|
|
<Avatar />
|
|
</h1>
|
|
<h2 class="subheader">@jedmund is a software designer</h2>
|
|
</svelte:fragment>
|
|
|
|
<ProjectList />
|
|
</Page>
|
|
|
|
<Page>
|
|
<svelte:fragment slot="header">
|
|
<h2>A little about me</h2>
|
|
</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 me from
|
|
<a href="https://www.pinterest.com/" target="_blank">Pinterest</a>, where I was the first
|
|
design hire.
|
|
</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>
|
|
</Page>
|
|
<Page>
|
|
<svelte:fragment slot="header">
|
|
<h2>Notable mentions</h2>
|
|
</svelte:fragment>
|
|
|
|
<MentionList />
|
|
</Page>
|
|
<Page noHorizontalPadding={true}>
|
|
<svelte:fragment slot="header">
|
|
<h2>Now playing</h2>
|
|
</svelte:fragment>
|
|
|
|
<RecentAlbums {albums} />
|
|
|
|
<!-- <section class="latest-games">
|
|
{#if games && games.length > 0}
|
|
<ul>
|
|
{#each games.slice(0, 3) as game}
|
|
<Game {game} />
|
|
{/each}
|
|
</ul>
|
|
{:else}
|
|
<p>Loading games...</p>
|
|
{/if}
|
|
</section> -->
|
|
</Page>
|
|
|
|
<footer>
|
|
<p>© 2024 Justin Edmund</p>
|
|
</footer>
|
|
|
|
<style lang="scss">
|
|
a,
|
|
em {
|
|
color: $red-60;
|
|
font-weight: 500;
|
|
font-style: normal;
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover {
|
|
cursor: pointer;
|
|
text-decoration: underline;
|
|
text-decoration-style: wavy;
|
|
}
|
|
|
|
header {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-bottom: $unit-2x;
|
|
}
|
|
|
|
h1,
|
|
h2 {
|
|
margin: 0;
|
|
}
|
|
|
|
h2 {
|
|
color: $accent-color;
|
|
font-size: 1.2rem;
|
|
font-weight: 500;
|
|
|
|
&.subheader {
|
|
margin-bottom: $unit-2x;
|
|
}
|
|
}
|
|
|
|
.bio {
|
|
font-size: 1rem;
|
|
line-height: 1.3;
|
|
|
|
p:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.latest-games ul {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: $unit-4x;
|
|
width: 100%;
|
|
}
|
|
|
|
footer {
|
|
font-size: 0.85rem;
|
|
color: $grey-40;
|
|
text-align: center;
|
|
}
|
|
</style>
|