mirror of
https://github.com/r-freeman/portfolio.git
synced 2024-11-22 18:15:41 +00:00
Extracted icons and moved components
This commit is contained in:
parent
a75719ab8e
commit
816d73bd57
91
components/Resume.tsx
Normal file
91
components/Resume.tsx
Normal 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>
|
||||
)
|
||||
}
|
||||
14
components/icons/ArrowDownIcon.tsx
Normal file
14
components/icons/ArrowDownIcon.tsx
Normal 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>
|
||||
)
|
||||
}
|
||||
24
components/icons/BriefcaseIcon.tsx
Normal file
24
components/icons/BriefcaseIcon.tsx
Normal 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>
|
||||
)
|
||||
}
|
||||
@ -9,7 +9,7 @@ import {
|
||||
GitHubIcon,
|
||||
LinkedInIcon,
|
||||
TwitterIcon
|
||||
} from '@/components/SocialIcons'
|
||||
} from '@/components/icons/SocialIcons'
|
||||
import {Props} from 'types'
|
||||
import photoOfMe from '@/public/static/images/photo-of-me.jpg'
|
||||
import awsCCPBadge from '@/public/static/images/aws-certified-cloud-practitioner-badge.png'
|
||||
|
||||
130
pages/index.tsx
130
pages/index.tsx
@ -1,14 +1,13 @@
|
||||
import Head from 'next/head'
|
||||
import {GetStaticProps} from 'next'
|
||||
|
||||
import {Card} from '@/components/Card'
|
||||
import {Button} from '@/components/Button'
|
||||
import {Resume} from '@/components/Resume'
|
||||
import {Container} from '@/components/Container'
|
||||
import {
|
||||
GitHubIcon,
|
||||
LinkedInIcon,
|
||||
TwitterIcon
|
||||
} from '@/components/SocialIcons'
|
||||
} from '@/components/icons/SocialIcons'
|
||||
import {SocialLink} from '@/components/SocialLink'
|
||||
import {Views} from '@/components/Views'
|
||||
import {formatDate} from '@/lib/formatDate'
|
||||
@ -17,55 +16,6 @@ import {generateSitemap} from '@/lib/generateSitemap'
|
||||
import {getAllArticles} from '@/lib/getAllArticles'
|
||||
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) {
|
||||
return (
|
||||
<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[] }) {
|
||||
return (
|
||||
<>
|
||||
|
||||
@ -3,8 +3,8 @@ import Head from 'next/head'
|
||||
import {Card} from '@/components/Card'
|
||||
import {SimpleLayout} from '@/components/SimpleLayout'
|
||||
import {SocialLink} from '@/components/SocialLink'
|
||||
import {StarIcon} from '@/components/StarIcon'
|
||||
import {ForkIcon} from '@/components/ForkIcon'
|
||||
import {StarIcon} from '@/components/icons/StarIcon'
|
||||
import {ForkIcon} from '@/components/icons/ForkIcon'
|
||||
import {getPinnedRepos} from '@/lib/github'
|
||||
import {numberFormat} from '@/lib/numberFormat'
|
||||
import type {Repo} from '@/types'
|
||||
|
||||
Loading…
Reference in New Issue
Block a user