Convert resume into events calendar
This commit is contained in:
parent
982a376264
commit
879a56d98e
224
src/app/page.tsx
224
src/app/page.tsx
@ -1,20 +1,10 @@
|
|||||||
import Image, { type ImageProps } from 'next/image'
|
import Image, { type ImageProps } from 'next/image'
|
||||||
import Link from 'next/link'
|
|
||||||
import clsx from 'clsx'
|
import clsx from 'clsx'
|
||||||
|
|
||||||
import { Button } from '@/components/Button'
|
import { Button } from '@/components/Button'
|
||||||
import { Card } from '@/components/Card'
|
import { Card } from '@/components/Card'
|
||||||
import { Container } from '@/components/Container'
|
import { Container } from '@/components/Container'
|
||||||
import {
|
import { CalendarDaysIcon, EnvelopeIcon } from '@heroicons/react/24/solid'
|
||||||
GitHubIcon,
|
|
||||||
InstagramIcon,
|
|
||||||
LinkedInIcon,
|
|
||||||
TwitterIcon,
|
|
||||||
} from '@/components/SocialIcons'
|
|
||||||
import logoAirbnb from '@/images/logos/airbnb.svg'
|
|
||||||
import logoFacebook from '@/images/logos/facebook.svg'
|
|
||||||
import logoPlanetaria from '@/images/logos/planetaria.svg'
|
|
||||||
import logoStarbucks from '@/images/logos/starbucks.svg'
|
|
||||||
import image1 from '@/images/photos/image-1.jpg'
|
import image1 from '@/images/photos/image-1.jpg'
|
||||||
import image2 from '@/images/photos/image-2.jpg'
|
import image2 from '@/images/photos/image-2.jpg'
|
||||||
import image3 from '@/images/photos/image-3.jpg'
|
import image3 from '@/images/photos/image-3.jpg'
|
||||||
@ -23,65 +13,6 @@ import image5 from '@/images/photos/image-5.jpg'
|
|||||||
import { type BlogPostWithSlug, getAllBlogPosts } from '@/lib/articles'
|
import { type BlogPostWithSlug, getAllBlogPosts } from '@/lib/articles'
|
||||||
import { formatDate } from '@/lib/formatDate'
|
import { formatDate } from '@/lib/formatDate'
|
||||||
|
|
||||||
function MailIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
|
|
||||||
return (
|
|
||||||
<svg
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
strokeWidth="1.5"
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
aria-hidden="true"
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M2.75 7.75a3 3 0 0 1 3-3h12.5a3 3 0 0 1 3 3v8.5a3 3 0 0 1-3 3H5.75a3 3 0 0 1-3-3v-8.5Z"
|
|
||||||
className="fill-zinc-100 stroke-zinc-400 dark:fill-zinc-100/10 dark:stroke-zinc-500"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="m4 6 6.024 5.479a2.915 2.915 0 0 0 3.952 0L20 6"
|
|
||||||
className="stroke-zinc-400 dark:stroke-zinc-500"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function BriefcaseIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
|
|
||||||
return (
|
|
||||||
<svg
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
strokeWidth="1.5"
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
aria-hidden="true"
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M2.75 9.75a3 3 0 0 1 3-3h12.5a3 3 0 0 1 3 3v8.5a3 3 0 0 1-3 3H5.75a3 3 0 0 1-3-3v-8.5Z"
|
|
||||||
className="fill-zinc-100 stroke-zinc-400 dark:fill-zinc-100/10 dark:stroke-zinc-500"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M3 14.25h6.249c.484 0 .952-.002 1.316.319l.777.682a.996.996 0 0 0 1.316 0l.777-.682c.364-.32.832-.319 1.316-.319H21M8.75 6.5V4.75a2 2 0 0 1 2-2h2.5a2 2 0 0 1 2 2V6.5"
|
|
||||||
className="stroke-zinc-400 dark:stroke-zinc-500"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function ArrowDownIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
|
|
||||||
return (
|
|
||||||
<svg viewBox="0 0 16 16" fill="none" aria-hidden="true" {...props}>
|
|
||||||
<path
|
|
||||||
d="M4.75 8.75 8 12.25m0 0 3.25-3.5M8 12.25v-8.5"
|
|
||||||
strokeWidth="1.5"
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function Article({ article }: { article: BlogPostWithSlug }) {
|
function Article({ article }: { article: BlogPostWithSlug }) {
|
||||||
return (
|
return (
|
||||||
<Card as="article">
|
<Card as="article">
|
||||||
@ -97,19 +28,6 @@ function Article({ article }: { article: BlogPostWithSlug }) {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
function SocialLink({
|
|
||||||
icon: Icon,
|
|
||||||
...props
|
|
||||||
}: React.ComponentPropsWithoutRef<typeof Link> & {
|
|
||||||
icon: React.ComponentType<{ className?: string }>
|
|
||||||
}) {
|
|
||||||
return (
|
|
||||||
<Link className="group -m-1 p-1" {...props}>
|
|
||||||
<Icon className="h-6 w-6 fill-zinc-500 transition group-hover:fill-zinc-600 dark:fill-zinc-400 dark:group-hover:fill-zinc-300" />
|
|
||||||
</Link>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function Newsletter() {
|
function Newsletter() {
|
||||||
return (
|
return (
|
||||||
<form
|
<form
|
||||||
@ -117,11 +35,11 @@ function Newsletter() {
|
|||||||
className="rounded-2xl border border-zinc-100 p-6 dark:border-zinc-700/40"
|
className="rounded-2xl border border-zinc-100 p-6 dark:border-zinc-700/40"
|
||||||
>
|
>
|
||||||
<h2 className="flex text-sm font-semibold text-zinc-900 dark:text-zinc-100">
|
<h2 className="flex text-sm font-semibold text-zinc-900 dark:text-zinc-100">
|
||||||
<MailIcon className="h-6 w-6 flex-none" />
|
<EnvelopeIcon className="h-6 w-6 flex-none fill-zinc-100 stroke-zinc-400 dark:fill-zinc-100/10 dark:stroke-zinc-500" />
|
||||||
<span className="ml-3">Stay up to date</span>
|
<span className="ml-3">Stay up to date</span>
|
||||||
</h2>
|
</h2>
|
||||||
<p className="mt-2 text-sm text-zinc-600 dark:text-zinc-400">
|
<p className="mt-2 text-sm text-zinc-600 dark:text-zinc-400">
|
||||||
Get notified when I publish something new, and unsubscribe at any time.
|
Get notified about upcoming events and stay in touch with the community.
|
||||||
</p>
|
</p>
|
||||||
<div className="mt-6 flex">
|
<div className="mt-6 flex">
|
||||||
<input
|
<input
|
||||||
@ -139,100 +57,77 @@ function Newsletter() {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
interface Role {
|
interface Meeting {
|
||||||
company: string
|
|
||||||
title: string
|
title: string
|
||||||
logo: ImageProps['src']
|
date: string
|
||||||
start: string | { label: string; dateTime: string }
|
startTime: string
|
||||||
end: string | { label: string; dateTime: string }
|
endTime?: string
|
||||||
|
notes?: string
|
||||||
}
|
}
|
||||||
|
|
||||||
function Role({ role }: { role: Role }) {
|
function MeetingListItem({ meeting }: { meeting: Meeting }) {
|
||||||
let startLabel =
|
|
||||||
typeof role.start === 'string' ? role.start : role.start.label
|
|
||||||
let startDate =
|
|
||||||
typeof role.start === 'string' ? role.start : role.start.dateTime
|
|
||||||
|
|
||||||
let endLabel = typeof role.end === 'string' ? role.end : role.end.label
|
|
||||||
let endDate = typeof role.end === 'string' ? role.end : role.end.dateTime
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<li className="flex gap-4">
|
<li className="flex gap-4">
|
||||||
<div className="relative mt-1 flex h-10 w-10 flex-none items-center justify-center rounded-full shadow-md shadow-zinc-800/5 ring-1 ring-zinc-900/5 dark:border dark:border-zinc-700/50 dark:bg-zinc-800 dark:ring-0">
|
|
||||||
<Image src={role.logo} alt="" className="h-7 w-7" unoptimized />
|
|
||||||
</div>
|
|
||||||
<dl className="flex flex-auto flex-wrap gap-x-2">
|
<dl className="flex flex-auto flex-wrap gap-x-2">
|
||||||
<dt className="sr-only">Company</dt>
|
<dt className="sr-only">Title</dt>
|
||||||
<dd className="w-full flex-none text-sm font-medium text-zinc-900 dark:text-zinc-100">
|
<dd className="w-full flex-none text-sm font-medium text-zinc-900 dark:text-zinc-100">
|
||||||
{role.company}
|
{meeting.title}
|
||||||
</dd>
|
|
||||||
<dt className="sr-only">Role</dt>
|
|
||||||
<dd className="text-xs text-zinc-500 dark:text-zinc-400">
|
|
||||||
{role.title}
|
|
||||||
</dd>
|
</dd>
|
||||||
<dt className="sr-only">Date</dt>
|
<dt className="sr-only">Date</dt>
|
||||||
<dd
|
<dd className="text-xs text-zinc-500 dark:text-zinc-400">
|
||||||
className="ml-auto text-xs text-zinc-400 dark:text-zinc-500"
|
{meeting.date}
|
||||||
aria-label={`${startLabel} until ${endLabel}`}
|
|
||||||
>
|
|
||||||
<time dateTime={startDate}>{startLabel}</time>{' '}
|
|
||||||
<span aria-hidden="true">—</span>{' '}
|
|
||||||
<time dateTime={endDate}>{endLabel}</time>
|
|
||||||
</dd>
|
</dd>
|
||||||
|
<dt className="sr-only">Time</dt>
|
||||||
|
{meeting.endTime
|
||||||
|
? <dd
|
||||||
|
className="ml-auto text-xs text-zinc-400 dark:text-zinc-500"
|
||||||
|
aria-label={`${meeting.startTime} until ${meeting.endTime}`}
|
||||||
|
>
|
||||||
|
<time dateTime={meeting.date + ' ' + meeting.startTime}>{meeting.startTime}</time>{' '}
|
||||||
|
<span aria-hidden="true">—</span>{' '}
|
||||||
|
<time dateTime={meeting.date + ' ' + meeting.endTime}>{meeting.endTime}</time>{' '}
|
||||||
|
</dd>
|
||||||
|
: <dd
|
||||||
|
className="ml-auto text-xs text-zinc-400 dark:text-zinc-500"
|
||||||
|
aria-label={`${meeting.startTime}`}
|
||||||
|
>
|
||||||
|
<time dateTime={meeting.date + ' ' + meeting.startTime}>{meeting.startTime}</time>{' '}
|
||||||
|
</dd>
|
||||||
|
}
|
||||||
</dl>
|
</dl>
|
||||||
</li>
|
</li>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
function Resume() {
|
function Events() {
|
||||||
let resume: Array<Role> = [
|
let events: Array<Meeting> = [
|
||||||
{
|
{
|
||||||
company: 'Planetaria',
|
title: 'Christmas Potluck',
|
||||||
title: 'CEO',
|
date: '2023-12-16',
|
||||||
logo: logoPlanetaria,
|
startTime: '6:00pm',
|
||||||
start: '2019',
|
|
||||||
end: {
|
|
||||||
label: 'Present',
|
|
||||||
dateTime: new Date().getFullYear().toString(),
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
company: 'Airbnb',
|
title: 'Member Meeting',
|
||||||
title: 'Product Designer',
|
date: '2023-12-20',
|
||||||
logo: logoAirbnb,
|
startTime: '6:00pm',
|
||||||
start: '2014',
|
endTime: '8:00pm',
|
||||||
end: '2019',
|
notes: 'Bring your own chair.'
|
||||||
},
|
|
||||||
{
|
|
||||||
company: 'Facebook',
|
|
||||||
title: 'iOS Software Engineer',
|
|
||||||
logo: logoFacebook,
|
|
||||||
start: '2011',
|
|
||||||
end: '2014',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
company: 'Starbucks',
|
|
||||||
title: 'Shift Supervisor',
|
|
||||||
logo: logoStarbucks,
|
|
||||||
start: '2008',
|
|
||||||
end: '2011',
|
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="rounded-2xl border border-zinc-100 p-6 dark:border-zinc-700/40">
|
<div className="rounded-2xl border border-zinc-100 p-6 dark:border-zinc-700/40">
|
||||||
<h2 className="flex text-sm font-semibold text-zinc-900 dark:text-zinc-100">
|
<h2 className="flex text-sm font-semibold text-zinc-900 dark:text-zinc-100">
|
||||||
<BriefcaseIcon className="h-6 w-6 flex-none" />
|
<CalendarDaysIcon className="h-6 w-6 flex-none fill-zinc-100 stroke-zinc-400 dark:fill-zinc-100/10 dark:stroke-zinc-500" />
|
||||||
<span className="ml-3">Work</span>
|
<span className="ml-3">Upcoming Events</span>
|
||||||
</h2>
|
</h2>
|
||||||
<ol className="mt-6 space-y-4">
|
<ol className="mt-6 space-y-4">
|
||||||
{resume.map((role, roleIndex) => (
|
{events.map((meeting, idx) => (
|
||||||
<Role key={roleIndex} role={role} />
|
<MeetingListItem key={idx} meeting={meeting} />
|
||||||
))}
|
))}
|
||||||
</ol>
|
</ol>
|
||||||
<Button href="#" variant="secondary" className="group mt-6 w-full">
|
<Button href="#" variant="secondary" className="group mt-6 w-full">
|
||||||
Download CV
|
Full Calendar
|
||||||
<ArrowDownIcon className="h-4 w-4 stroke-zinc-400 transition group-active:stroke-zinc-600 dark:group-hover:stroke-zinc-50 dark:group-active:stroke-zinc-50" />
|
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
@ -276,33 +171,14 @@ export default async function Home() {
|
|||||||
West Sound Community Hall
|
West Sound Community Hall
|
||||||
</h1>
|
</h1>
|
||||||
<p className="mt-6 text-base text-zinc-600 dark:text-zinc-400">
|
<p className="mt-6 text-base text-zinc-600 dark:text-zinc-400">
|
||||||
WestSound Community Hall, located at 884 Deer Harbor Road in the hamlet of West Sound, has served as a public assembly hall since it was built by volunteers in 1902.
|
The West Sound Community Hall is located in the hamlet of West Sound
|
||||||
|
on Orcas Island, about 10 minutes from the ferry landing and
|
||||||
|
Eastsound. It has served as a public assembly hall since it was
|
||||||
|
built by volunteers in 1902.
|
||||||
</p>
|
</p>
|
||||||
<p className="mt-6 text-base text-zinc-600 dark:text-zinc-400">
|
<p className="mt-6 text-base text-zinc-600 dark:text-zinc-400">
|
||||||
Facing West Sound, the Hall is at the heart of the WestSound community.
|
Facing West Sound, the Hall is at the heart of the WestSound community.
|
||||||
</p>
|
</p>
|
||||||
<div className="mt-6 flex gap-6">
|
|
||||||
<SocialLink
|
|
||||||
href="https://twitter.com"
|
|
||||||
aria-label="Follow on Twitter"
|
|
||||||
icon={TwitterIcon}
|
|
||||||
/>
|
|
||||||
<SocialLink
|
|
||||||
href="https://instagram.com"
|
|
||||||
aria-label="Follow on Instagram"
|
|
||||||
icon={InstagramIcon}
|
|
||||||
/>
|
|
||||||
<SocialLink
|
|
||||||
href="https://github.com"
|
|
||||||
aria-label="Follow on GitHub"
|
|
||||||
icon={GitHubIcon}
|
|
||||||
/>
|
|
||||||
<SocialLink
|
|
||||||
href="https://linkedin.com"
|
|
||||||
aria-label="Follow on LinkedIn"
|
|
||||||
icon={LinkedInIcon}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</Container>
|
</Container>
|
||||||
<Photos />
|
<Photos />
|
||||||
@ -315,7 +191,7 @@ export default async function Home() {
|
|||||||
</div>
|
</div>
|
||||||
<div className="space-y-10 lg:pl-16 xl:pl-24">
|
<div className="space-y-10 lg:pl-16 xl:pl-24">
|
||||||
<Newsletter />
|
<Newsletter />
|
||||||
<Resume />
|
<Events />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Container>
|
</Container>
|
||||||
|
Loading…
Reference in New Issue
Block a user