51 lines
2.1 KiB
JavaScript
51 lines
2.1 KiB
JavaScript
import { MDXRemote } from 'next-mdx-remote'
|
|
import MDXComponents from '@/components/MDXComponents'
|
|
import siteMetadata from '@/data/siteMetadata'
|
|
import SocialIcon from '@/components/social-icons'
|
|
import { PageSeo } from '@/components/SEO'
|
|
import { getFileBySlug } from '@/lib/mdx'
|
|
|
|
export async function getStaticProps() {
|
|
const authorDetails = await getFileBySlug('authors', ['default'])
|
|
return { props: { authorDetails } }
|
|
}
|
|
|
|
export default function About({ authorDetails }) {
|
|
const { mdxSource, frontMatter } = authorDetails
|
|
const { name, avatar, email, twitter, linkedin, github } = frontMatter
|
|
|
|
return (
|
|
<>
|
|
<PageSeo
|
|
title={`About - ${name}`}
|
|
description={`About me - ${name}`}
|
|
url={`${siteMetadata.siteUrl}/about`}
|
|
/>
|
|
<div className="divide-y">
|
|
<div className="pt-6 pb-8 space-y-2 md:space-y-5">
|
|
<h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14">
|
|
About
|
|
</h1>
|
|
</div>
|
|
<div className="items-start space-y-2 xl:grid xl:grid-cols-3 xl:gap-x-8 xl:space-y-0">
|
|
<div className="flex flex-col items-center pt-8 space-x-2">
|
|
<img src={avatar} alt="avatar" className="w-48 h-48 rounded-full" />
|
|
<h3 className="pt-4 pb-2 text-2xl font-bold leading-8 tracking-tight">{name}</h3>
|
|
<div className="text-gray-500 dark:text-gray-400">Professor of Atmospheric Science</div>
|
|
<div className="text-gray-500 dark:text-gray-400">Stanford University</div>
|
|
<div className="flex pt-6 space-x-3">
|
|
<SocialIcon kind="mail" href={`mailto:${email}`} />
|
|
<SocialIcon kind="github" href={github} />
|
|
<SocialIcon kind="linkedin" href={linkedin} />
|
|
<SocialIcon kind="twitter" href={twitter} />
|
|
</div>
|
|
</div>
|
|
<div className="pt-8 pb-8 prose dark:prose-dark max-w-none xl:col-span-2">
|
|
<MDXRemote {...mdxSource} components={MDXComponents} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|