mirror of
https://github.com/r-freeman/portfolio.git
synced 2024-11-11 18:45: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,
|
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'
|
||||||
|
130
pages/index.tsx
130
pages/index.tsx
@ -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 (
|
||||||
<>
|
<>
|
||||||
|
@ -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'
|
||||||
|
Loading…
Reference in New Issue
Block a user