portfolio/pages/index.tsx

155 lines
6.3 KiB
TypeScript
Raw Normal View History

2022-12-06 12:54:34 +00:00
import Head from 'next/head'
2023-01-14 19:31:05 +00:00
import {GetStaticProps} from 'next'
2022-12-06 12:54:34 +00:00
import {Card} from '@/components/Card'
2023-02-01 20:53:47 +00:00
import {Resume} from '@/components/Resume'
2022-12-06 12:54:34 +00:00
import {Container} from '@/components/Container'
import {
GitHubIcon,
LinkedInIcon,
TwitterIcon
2023-02-01 20:53:47 +00:00
} from '@/components/icons/SocialIcons'
2023-01-21 22:59:27 +00:00
import {SocialLink} from '@/components/SocialLink'
2023-01-26 23:29:39 +00:00
import {Views} from '@/components/Views'
2023-01-14 19:31:05 +00:00
import {formatDate} from '@/lib/formatDate'
2022-12-06 12:54:34 +00:00
import {generateRssFeed} from '@/lib/generateRssFeed'
2023-01-14 19:31:05 +00:00
import {generateSitemap} from '@/lib/generateSitemap'
2022-12-06 12:54:34 +00:00
import {getAllArticles} from '@/lib/getAllArticles'
2023-01-14 19:31:05 +00:00
import {Article} from 'types'
2022-12-06 12:54:34 +00:00
2023-01-14 19:31:05 +00:00
function Article(article: Article) {
2022-12-06 12:54:34 +00:00
return (
<Card as="article">
<Card.Title href={`/writing/${article.slug}`}>
{article.title}
</Card.Title>
2023-01-26 23:50:07 +00:00
<p className="flex order-first space-x-1 z-10 mb-3">
2023-02-01 21:01:06 +00:00
<Card.Eyebrow as="time" dateTime={article.date} decorate={false}>
2023-01-26 23:29:39 +00:00
{formatDate(article.date)}
</Card.Eyebrow>
<Views slug={article.slug} shouldUpdateViews={false} className="text-sm text-zinc-500 dark:text-zinc-400"/>
</p>
2022-12-06 12:54:34 +00:00
<Card.Description>{article.description}</Card.Description>
<Card.Cta>Read more</Card.Cta>
</Card>
)
}
2023-01-14 19:31:05 +00:00
export default function Home({articles}: { articles: Article[] }) {
2022-12-06 12:54:34 +00:00
return (
<>
<Head>
<title>
Ryan Freeman - Full-stack software engineer from Dublin, Ireland.
</title>
<meta
name="description"
content="Full-stack software engineer who enjoys building cloud-native applications."
/>
<meta
property="og:url"
content={`${process.env.NEXT_PUBLIC_SITE_URL}`}
/>
<meta
property="og:type"
content="website"
/>
<meta
property="og:title"
content="Ryan Freeman - Full-stack software engineer from Dublin, Ireland."
/>
<meta
property="og:description"
content="Full-stack software engineer who enjoys building cloud-native applications."
/>
<meta
property="og:image"
2023-01-19 21:53:37 +00:00
content="/static/images/photo-of-me-og.jpg"
2022-12-06 12:54:34 +00:00
/>
<meta
name="twitter:card"
content="summary_large_image"/>
<meta
property="twitter:domain"
content="ryanfreeman.dev"/>
<meta
property="twitter:url"
content={`${process.env.NEXT_PUBLIC_SITE_URL}`}
/>
<meta
name="twitter:title"
content="Ryan Freeman - Full-stack software engineer from Dublin, Ireland."/>
<meta
name="twitter:description"
content="Full-stack software engineer who enjoys building cloud-native applications."/>
<meta
name="twitter:image"
2023-01-19 21:53:37 +00:00
content="/static/images/photo-of-me-og.jpg"
2022-12-06 12:54:34 +00:00
/>
</Head>
<Container className="mt-9">
<div className="max-w-2xl">
<h1 className="text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl bg-clip-text dark:text-transparent bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500">
Full-stack software engineer who enjoys building cloud-native applications.
</h1>
<p className="mt-6 text-base text-zinc-600 dark:text-zinc-400">
Hi. I&apos;m Ryan, a software engineer based in Dublin, Ireland. I&apos;m currently working in the
aviation industry for Aer Lingus. I am passionate about personal growth and progressing in my career. This
2023-01-16 20:37:22 +00:00
is my personal website where you can learn more about me, read articles I&apos;ve written and see projects
I&apos;ve worked on.
2022-12-06 12:54:34 +00:00
</p>
<div className="mt-6 flex gap-6">
<SocialLink
href="https://github.com/r-freeman"
2023-01-22 00:12:13 +00:00
ariaLabel="Follow on GitHub"
2022-12-06 12:54:34 +00:00
icon={GitHubIcon}
/>
<SocialLink
href="https://linkedin.com/in/r-freeman/"
2023-01-22 00:12:13 +00:00
ariaLabel="Follow on LinkedIn"
2022-12-06 12:54:34 +00:00
icon={LinkedInIcon}
/>
<SocialLink
href="https://twitter.com/freemry"
2023-01-22 00:12:13 +00:00
ariaLabel="Follow on Twitter"
2022-12-06 12:54:34 +00:00
icon={TwitterIcon}
/>
</div>
</div>
</Container>
<Container className="mt-24 md:mt-28">
<div className="mx-auto grid max-w-xl grid-cols-1 gap-y-20 lg:max-w-none lg:grid-cols-2">
<div className="flex flex-col gap-16">
2023-01-14 19:31:05 +00:00
{articles.map(({slug, title, description, date}) => (
<Article
key={slug}
title={title}
description={description}
slug={slug}
date={date}
/>
2022-12-06 12:54:34 +00:00
))}
</div>
<div className="space-y-10 lg:pl-16 xl:pl-24">
<Resume/>
</div>
</div>
</Container>
</>
)
}
2023-01-14 19:31:05 +00:00
export const getStaticProps: GetStaticProps = async () => {
2022-12-06 12:54:34 +00:00
if (process.env.NODE_ENV === 'production') {
await generateRssFeed()
2023-01-14 19:31:05 +00:00
await generateSitemap()
2022-12-06 12:54:34 +00:00
}
return {
props: {
articles: (await getAllArticles())
2023-01-05 20:03:09 +00:00
.slice(0, 1)
2022-12-06 12:54:34 +00:00
.map(({component, ...meta}) => meta),
2023-01-14 19:31:05 +00:00
}
2022-12-06 12:54:34 +00:00
}
}