Rudimentary implementation of Mentions
This commit is contained in:
Justin Edmund
parent
91d5118337
commit
141f196b7f
4 changed files with 189 additions and 0 deletions
|
|
@ -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};
|
||||
}
|
||||
|
|
|
|||
75
src/lib/components/Mention.svelte
Normal file
75
src/lib/components/Mention.svelte
Normal file
|
|
@ -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>
|
||||
65
src/lib/components/MentionList.svelte
Normal file
65
src/lib/components/MentionList.svelte
Normal file
|
|
@ -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>
|
||||
|
|
@ -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>© 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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue