Extracted icons and moved components

components/Resume.tsx

@@ -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>
+    )
+}

components/icons/ArrowDownIcon.tsx

@@ -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>
+    )
+}

components/icons/BriefcaseIcon.tsx

@@ -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>
+    )
+}

pages/about.tsx

@@ -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'

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 (
         <>

pages/projects.tsx

@@ -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'