Skip to content

Commit

Permalink
refactor: ♻️ update people to meet
Browse files Browse the repository at this point in the history 
remove unused info stuff
  • Loading branch information
@spences10
spences10 committed Mar 3, 2024
1 parent 8160a80 commit 23fd96f
Show file tree
Hide file tree
Showing 2 changed files with 50 additions and 99 deletions.
67 changes: 50 additions & 17 deletions src/lib/components/people-to-meet.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,35 +3,53 @@
import PeopleToMeetCheck from './people-to-meet-check.svelte'
import ShareWithTweet from './share-with-tweet.svelte'
// const peopleSorted = PEOPLE.sort((a, b) => {
// return a.met - b.met
// })
type SortFunctionKeys = 'all' | 'met' | 'not_met'
const peopleShuffled = PEOPLE.sort(() => {
return 0.5 - Math.random()
})
interface Person {
name: string
link: string
met: boolean
}
let sort_mode = $state('random')
const shuffle_array = (array: Person[]) => {
return array.sort(() => 0.5 - Math.random())
}
const sort_functions: Record<SortFunctionKeys, () => Person[]> = {
all: () => shuffle_array(PEOPLE),
met: () => PEOPLE.filter(p => p.met),
not_met: () => PEOPLE.filter(p => !p.met),
}
let sorted_people: Person[] = $derived(
sort_functions[sort_mode as SortFunctionKeys]
? sort_functions[sort_mode as SortFunctionKeys]()
: PEOPLE,
)
</script>

<div class="flex flex-col w-full my-10">
<div class="my-10 flex w-full flex-col">
<div class="divider divider-secondary" />
</div>

<article class="m-0 mb-20 sm:-mx-30 lg:-mx-40">
<article class="sm:-mx-30 m-0 mb-20 lg:-mx-40">
<a
href="#people-id-like-to-meet"
id="people-id-like-to-meet"
class="font-bold text-2xl link-primary hover:primary-accent transition"
class="hover:primary-accent link-primary text-2xl font-bold transition"
>
People I'd like to meet in real life (aka the meatspace).
</a>
<p class="mb-1 -mt-1 all-prose">
<p class="all-prose -mt-1 mb-1">
These are all people I'd like to share a firm handshake with.
</p>

<p class="text-sm text-secondary mb-9">
<p class="mb-9 text-sm text-secondary">
Idea totally stolen from
<a
class="transition link hover:text-primary"
class="link transition hover:text-primary"
rel="noreferrer noopener"
target="_blank"
href="https://rafa.design/"
Expand All @@ -40,14 +58,29 @@
</a>
</p>

<div class="mb-5">
<button onclick={() => (sort_mode = 'all')} class="btn btn-xs">
All
</button>
<button onclick={() => (sort_mode = 'met')} class="btn btn-xs">
Met
</button>
<button
onclick={() => (sort_mode = 'not_met')}
class="btn btn-xs"
>
Not Met
</button>
</div>

<ul
class="mb-10 grid gap-4 grid-cols-1 xs:grid-cols-2 md:grid-cols-3 lg:grid-cols-4"
class="mb-10 grid grid-cols-1 gap-4 xs:grid-cols-2 md:grid-cols-3 lg:grid-cols-4"
>
{#each peopleShuffled as { name, link, met }}
{#each sorted_people as { name, link, met }}
<li class="">
<div class="flex text-left items-center">
<div class="flex items-center text-left">
<PeopleToMeetCheck {met} />
<span class="hover:text-primary transition">
<span class="transition hover:text-primary">
<a
class="text-xl"
href={link}
Expand All @@ -63,7 +96,7 @@
</ul>

<div class="md:flex md:items-center">
<p class="mb-3 all-prose md:mr-5 md:mb-0">
<p class="all-prose mb-3 md:mb-0 md:mr-5">
Not on the list? Want to meet up?
</p>
<ShareWithTweet
Expand Down
82 changes: 0 additions & 82 deletions src/lib/info.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,88 +4,6 @@ export const website = `https://scottspence.com`

export const description = `My own little space on the internet, where I write about what I've learned as a web developer mainly Svelte and SvelteKit.`

export const PORTFOLIO_PROJECTS = [
{
title: 'MDX Embed',
repo: 'https://github.com/PaulieScanlon/mdx-embed/',
demo: 'https://www.mdx-embed.com/',
tags: ['gatsby', 'mdx', 'typescript'],
image: '/mdx-embed.png',
copy: ['Embed popular 3rd party media content into your .mdx'],
},
{
title: 'GitHub Charts',
repo: 'https://github.com/spences10/github-user-information/',
demo: 'https://github-user-information.vercel.app/heat.png?username=spences10&year=2020&interactive=true',
tags: ['typescript', 'serverless', 'vercel'],
image: '/gh-charts.jpg',
copy: [
'Serverless function to display GitHub user information as images',
],
},
{
title: 'City 2 Sea',
repo: '',
demo: 'https://beagoodasshole.com/',
tags: ['gatsby', 'styled-components', 'lottie'],
image: '/city-to-sea.png',
copy: [
'A playful landing page featuring the voice of Andy Serkis',
],
},
{
title: 'Cheat Sheets',
repo: 'https://github.com/spences10/cheat-sheets/',
demo: 'https://cheatsheets.xyz/',
tags: ['gatsby', 'chakra', 'mdx'],
image: '/cheat-sheets.jpg',
copy: ['A collection of hints and tips for web development'],
},
]

export const POPULAR_POSTS = [
{
path: `/posts/use-chrome-in-ubuntu-wsl`,
title: `Use Google Chrome in Ubuntu on Windows Subsystem Linux`,
},
{
path: `/posts/change-scrollbar-color-tailwind-css`,
title: `Change Browser Scrollbar Colour with Tailwind CSS`,
},
{
path: `/posts/stylelint-configuration-for-tailwindcss`,
title: `Stylelint Configuration for use with Tailwind CSS`,
},
{
path: `/posts/email-form-submission-with-sveltekit`,
title: `Make an Email Form Submission with SvelteKit`,
},
{
path: `/posts/get-graphql-data-with-axios`,
title: `Get GraphQL Data Using Axios`,
},
{
path: `/posts/make-a-sitemap-with-sveltekit`,
title: `Make a Sitemap with SvelteKit`,
},
{
path: `/posts/sveltekit-environment-variables-with-the-sveltekit-env-module`,
title: `SvelteKit Environment Variables with the SvelteKit $env Module`,
},
{
path: `/posts/change-text-highlight-colour-with-tailwind-css`,
title: `Change Text Highlight Color with Tailwind CSS`,
},
{
path: `/posts/why-fastmail-over-proton-mail`,
title: `Why Fastmail over ProtonMail`,
},
{
path: `/posts/my-zsh-config`,
title: `My Zsh Config`,
},
]

export const SOCIAL_LINKS = [
{
title: `YouTube`,
Expand Down

0 comments on commit 23fd96f

Please sign in to comment.