Extracted icons and moved components

This commit is contained in:
r-freeman 2023-02-01 20:53:47 +00:00
parent a75719ab8e
commit 816d73bd57
10 changed files with 134 additions and 131 deletions

91
components/Resume.tsx Normal file
View File

@ -0,0 +1,91 @@
import {BriefcaseIcon} from '@/components/icons/BriefcaseIcon'
import {ArrowDownIcon} from '@/components/icons/ArrowDownIcon'
import {Button} from '@/components/Button'
type Work = {
company: string
title: string
start: {
label: string
dateTime: string
}
end: {
label: string
dateTime: string
}
}
export function Resume() {
const work: Work[] = [
{
company: 'Aer Lingus',
title: 'Software engineer',
start: {
label: '2022',
dateTime: '2022'
},
end: {
label: 'present',
dateTime: new Date().getFullYear().toString(),
}
},
{
company: 'Apple',
title: 'At home advisor',
start: {
label: '2014',
dateTime: '2014'
},
end: {
label: '2018',
dateTime: '2018'
},
}
]
return (
<div className="rounded-2xl border border-zinc-100 p-6 dark:border-zinc-700/40 -mt-6">
<h2 className="flex text-sm font-semibold text-zinc-900 dark:text-zinc-100">
<BriefcaseIcon className="h-6 w-6 flex-none"/>
<span className="ml-3">Work</span>
</h2>
<ol className="mt-6 space-y-4">
{work.map((role, roleIndex) => (
<li key={roleIndex} className="flex gap-4">
<dl className="flex flex-auto flex-wrap gap-x-2">
<dt className="sr-only">Company</dt>
<dd className="w-full flex-none text-sm font-medium text-zinc-900 dark:text-zinc-100">
{role.company}
</dd>
<dt className="sr-only">Role</dt>
<dd className="text-xs text-zinc-500 dark:text-zinc-400">
{role.title}
</dd>
<dt className="sr-only">Date</dt>
<dd
className="ml-auto text-xs text-zinc-500 dark:text-zinc-400"
aria-label={`${role.start.label ?? role.start} until ${
role.end.label ?? role.end
}`}
>
<time dateTime={role.start.dateTime ?? role.start}>
{role.start.label ?? role.start}
</time>
<span aria-hidden="true"></span>
<time dateTime={role.end.dateTime ?? role.end}>
{role.end.label ?? role.end}
</time>
</dd>
</dl>
</li>
))}
</ol>
<Button href="/Ryan Freeman CV.pdf" variant="secondary" className="group mt-6 w-full">
Download CV
<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>
</div>
)
}

View File

@ -0,0 +1,14 @@
import {Props} from '@/types'
export function ArrowDownIcon(props: Props) {
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>
)
}

View File

@ -0,0 +1,24 @@
import {Props} from '@/types'
export function BriefcaseIcon(props: Props) {
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>
)
}

View File

@ -9,7 +9,7 @@ import {
GitHubIcon, GitHubIcon,
LinkedInIcon, LinkedInIcon,
TwitterIcon TwitterIcon
} from '@/components/SocialIcons' } from '@/components/icons/SocialIcons'
import {Props} from 'types' import {Props} from 'types'
import photoOfMe from '@/public/static/images/photo-of-me.jpg' import photoOfMe from '@/public/static/images/photo-of-me.jpg'
import awsCCPBadge from '@/public/static/images/aws-certified-cloud-practitioner-badge.png' import awsCCPBadge from '@/public/static/images/aws-certified-cloud-practitioner-badge.png'

View File

@ -1,14 +1,13 @@
import Head from 'next/head' import Head from 'next/head'
import {GetStaticProps} from 'next' import {GetStaticProps} from 'next'
import {Card} from '@/components/Card' import {Card} from '@/components/Card'
import {Button} from '@/components/Button' import {Resume} from '@/components/Resume'
import {Container} from '@/components/Container' import {Container} from '@/components/Container'
import { import {
GitHubIcon, GitHubIcon,
LinkedInIcon, LinkedInIcon,
TwitterIcon TwitterIcon
} from '@/components/SocialIcons' } from '@/components/icons/SocialIcons'
import {SocialLink} from '@/components/SocialLink' import {SocialLink} from '@/components/SocialLink'
import {Views} from '@/components/Views' import {Views} from '@/components/Views'
import {formatDate} from '@/lib/formatDate' import {formatDate} from '@/lib/formatDate'
@ -17,55 +16,6 @@ import {generateSitemap} from '@/lib/generateSitemap'
import {getAllArticles} from '@/lib/getAllArticles' import {getAllArticles} from '@/lib/getAllArticles'
import {Article} from 'types' import {Article} from 'types'
type Work = {
company: string
title: string
start: {
label: string
dateTime: string
}
end: {
label: string
dateTime: string
}
}
function BriefcaseIcon(props: { className: string }) {
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: { className: string }) {
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) { function Article(article: Article) {
return ( return (
<Card as="article"> <Card as="article">
@ -84,82 +34,6 @@ function Article(article: Article) {
) )
} }
function Resume() {
const work: Work[] = [
{
company: 'Aer Lingus',
title: 'Software engineer',
start: {
label: '2022',
dateTime: '2022'
},
end: {
label: 'present',
dateTime: new Date().getFullYear().toString(),
}
},
{
company: 'Apple',
title: 'At home advisor',
start: {
label: '2014',
dateTime: '2014'
},
end: {
label: '2018',
dateTime: '2018'
},
}
]
return (
<div className="rounded-2xl border border-zinc-100 p-6 dark:border-zinc-700/40 -mt-6">
<h2 className="flex text-sm font-semibold text-zinc-900 dark:text-zinc-100">
<BriefcaseIcon className="h-6 w-6 flex-none"/>
<span className="ml-3">Work</span>
</h2>
<ol className="mt-6 space-y-4">
{work.map((role, roleIndex) => (
<li key={roleIndex} className="flex gap-4">
<dl className="flex flex-auto flex-wrap gap-x-2">
<dt className="sr-only">Company</dt>
<dd className="w-full flex-none text-sm font-medium text-zinc-900 dark:text-zinc-100">
{role.company}
</dd>
<dt className="sr-only">Role</dt>
<dd className="text-xs text-zinc-500 dark:text-zinc-400">
{role.title}
</dd>
<dt className="sr-only">Date</dt>
<dd
className="ml-auto text-xs text-zinc-500 dark:text-zinc-400"
aria-label={`${role.start.label ?? role.start} until ${
role.end.label ?? role.end
}`}
>
<time dateTime={role.start.dateTime ?? role.start}>
{role.start.label ?? role.start}
</time>
<span aria-hidden="true"></span>
<time dateTime={role.end.dateTime ?? role.end}>
{role.end.label ?? role.end}
</time>
</dd>
</dl>
</li>
))}
</ol>
<Button href="/Ryan Freeman CV.pdf" variant="secondary" className="group mt-6 w-full">
Download CV
<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>
</div>
)
}
export default function Home({articles}: { articles: Article[] }) { export default function Home({articles}: { articles: Article[] }) {
return ( return (
<> <>

View File

@ -3,8 +3,8 @@ import Head from 'next/head'
import {Card} from '@/components/Card' import {Card} from '@/components/Card'
import {SimpleLayout} from '@/components/SimpleLayout' import {SimpleLayout} from '@/components/SimpleLayout'
import {SocialLink} from '@/components/SocialLink' import {SocialLink} from '@/components/SocialLink'
import {StarIcon} from '@/components/StarIcon' import {StarIcon} from '@/components/icons/StarIcon'
import {ForkIcon} from '@/components/ForkIcon' import {ForkIcon} from '@/components/icons/ForkIcon'
import {getPinnedRepos} from '@/lib/github' import {getPinnedRepos} from '@/lib/github'
import {numberFormat} from '@/lib/numberFormat' import {numberFormat} from '@/lib/numberFormat'
import type {Repo} from '@/types' import type {Repo} from '@/types'