mirror of
https://github.com/prdlk/website.git
synced 2026-08-02 17:31:41 +00:00
329 lines
11 KiB
TypeScript
329 lines
11 KiB
TypeScript
import Image, { type ImageProps } from 'next/image'
|
|
import Link from 'next/link'
|
|
import clsx from 'clsx'
|
|
|
|
import { Button } from '@/components/Button'
|
|
import { Card } from '@/components/Card'
|
|
import { Container } from '@/components/Container'
|
|
import {
|
|
GitHubIcon,
|
|
InstagramIcon,
|
|
LinkedInIcon,
|
|
MediumIcon,
|
|
TwitterIcon,
|
|
} from '@/components/SocialIcons'
|
|
import logoAirbnb from '@/images/logos/spacebolt.svg'
|
|
import logoFacebook from '@/images/logos/voluntree.svg'
|
|
import logoPlanetaria from '@/images/logos/sonr.svg'
|
|
import logoStarbucks from '@/images/logos/superball.svg'
|
|
import image1 from '@/images/photos/image-1.jpg'
|
|
import image2 from '@/images/photos/image-2.jpg'
|
|
import image3 from '@/images/photos/image-3.jpg'
|
|
import image4 from '@/images/photos/image-4.jpg'
|
|
import image5 from '@/images/photos/image-5.jpg'
|
|
import { type ArticleWithSlug, getAllArticles } from '@/lib/articles'
|
|
import { formatDate } from '@/lib/formatDate'
|
|
|
|
function MailIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
|
|
return (
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
strokeWidth="1.5"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
aria-hidden="true"
|
|
{...props}
|
|
>
|
|
<path
|
|
d="M2.75 7.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="m4 6 6.024 5.479a2.915 2.915 0 0 0 3.952 0L20 6"
|
|
className="stroke-zinc-400 dark:stroke-zinc-500"
|
|
/>
|
|
</svg>
|
|
)
|
|
}
|
|
|
|
function BriefcaseIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
|
|
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: React.ComponentPropsWithoutRef<'svg'>) {
|
|
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: ArticleWithSlug }) {
|
|
return (
|
|
<Card as="article">
|
|
<Card.Title href={`/articles/${article.slug}`}>
|
|
{article.title}
|
|
</Card.Title>
|
|
<Card.Eyebrow as="time" dateTime={article.date} decorate>
|
|
{formatDate(article.date)}
|
|
</Card.Eyebrow>
|
|
<Card.Description>{article.description}</Card.Description>
|
|
<Card.Cta>Read article</Card.Cta>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
function SocialLink({
|
|
icon: Icon,
|
|
...props
|
|
}: React.ComponentPropsWithoutRef<typeof Link> & {
|
|
icon: React.ComponentType<{ className?: string }>
|
|
}) {
|
|
return (
|
|
<Link className="group -m-1 p-1" {...props}>
|
|
<Icon className="h-6 w-6 fill-zinc-500 transition group-hover:fill-zinc-600 dark:fill-zinc-400 dark:group-hover:fill-zinc-300" />
|
|
</Link>
|
|
)
|
|
}
|
|
|
|
function Newsletter() {
|
|
return (
|
|
<form
|
|
action="/thank-you"
|
|
className="rounded-2xl border border-zinc-100 p-6 dark:border-zinc-700/40"
|
|
>
|
|
<h2 className="flex text-sm font-semibold text-zinc-900 dark:text-zinc-100">
|
|
<MailIcon className="h-6 w-6 flex-none" />
|
|
<span className="ml-3">Stay up to date</span>
|
|
</h2>
|
|
<p className="mt-2 text-sm text-zinc-600 dark:text-zinc-400">
|
|
Get notified about updates on Sonr, blockchain technology insights, and decentralized identity developments.
|
|
</p>
|
|
<div className="mt-6 flex">
|
|
<input
|
|
type="email"
|
|
placeholder="Email address"
|
|
aria-label="Email address"
|
|
required
|
|
className="min-w-0 flex-auto appearance-none rounded-md border border-zinc-900/10 bg-white px-3 py-[calc(theme(spacing.2)-1px)] shadow-md shadow-zinc-800/5 placeholder:text-zinc-400 focus:border-teal-500 focus:outline-none focus:ring-4 focus:ring-teal-500/10 dark:border-zinc-700 dark:bg-zinc-700/[0.15] dark:text-zinc-200 dark:placeholder:text-zinc-500 dark:focus:border-teal-400 dark:focus:ring-teal-400/10 sm:text-sm"
|
|
/>
|
|
<Button type="submit" className="ml-4 flex-none">
|
|
Join
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
)
|
|
}
|
|
|
|
interface Role {
|
|
company: string
|
|
title: string
|
|
logo: ImageProps['src']
|
|
start: string | { label: string; dateTime: string }
|
|
end: string | { label: string; dateTime: string }
|
|
}
|
|
|
|
function Role({ role }: { role: Role }) {
|
|
let startLabel =
|
|
typeof role.start === 'string' ? role.start : role.start.label
|
|
let startDate =
|
|
typeof role.start === 'string' ? role.start : role.start.dateTime
|
|
|
|
let endLabel = typeof role.end === 'string' ? role.end : role.end.label
|
|
let endDate = typeof role.end === 'string' ? role.end : role.end.dateTime
|
|
|
|
return (
|
|
<li className="flex gap-4">
|
|
<div className="relative mt-1 flex h-10 w-10 flex-none items-center justify-center rounded-full shadow-md shadow-zinc-800/5 ring-1 ring-zinc-900/5 dark:border dark:border-zinc-700/50 dark:bg-zinc-800 dark:ring-0">
|
|
<Image src={role.logo} alt="" className="h-7 w-7 rounded-full" unoptimized />
|
|
</div>
|
|
<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-400 dark:text-zinc-500"
|
|
aria-label={`${startLabel} until ${endLabel}`}
|
|
>
|
|
<time dateTime={startDate}>{startLabel}</time>{' '}
|
|
<span aria-hidden="true">—</span>{' '}
|
|
<time dateTime={endDate}>{endLabel}</time>
|
|
</dd>
|
|
</dl>
|
|
</li>
|
|
)
|
|
}
|
|
|
|
function Resume() {
|
|
let resume: Array<Role> = [
|
|
{
|
|
company: 'Sonr',
|
|
title: 'Founder & CEO',
|
|
logo: logoPlanetaria,
|
|
start: '2020',
|
|
end: {
|
|
label: 'Present',
|
|
dateTime: new Date().getFullYear().toString(),
|
|
},
|
|
},
|
|
{
|
|
company: 'W3C Working Group',
|
|
title: 'Member - DIDs, WebAuthn, WASM',
|
|
logo: logoAirbnb,
|
|
start: '2021',
|
|
end: {
|
|
label: 'Present',
|
|
dateTime: new Date().getFullYear().toString(),
|
|
},
|
|
},
|
|
{
|
|
company: 'Open Source',
|
|
title: '4th Most GitHub Contributions Worldwide',
|
|
logo: logoFacebook,
|
|
start: '2021',
|
|
end: '2023',
|
|
},
|
|
{
|
|
company: 'Early iOS Developer',
|
|
title: 'One of the first 5,000 App Store apps',
|
|
logo: logoStarbucks,
|
|
start: '2008',
|
|
end: '2012',
|
|
},
|
|
]
|
|
|
|
return (
|
|
<div className="rounded-2xl border border-zinc-100 p-6 dark:border-zinc-700/40">
|
|
<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">Experience</span>
|
|
</h2>
|
|
<ol className="mt-6 space-y-4">
|
|
{resume.map((role, roleIndex) => (
|
|
<Role key={roleIndex} role={role} />
|
|
))}
|
|
</ol>
|
|
<Button href="#" 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>
|
|
)
|
|
}
|
|
|
|
function Photos() {
|
|
let rotations = ['rotate-2', '-rotate-2', 'rotate-2', 'rotate-2', '-rotate-2']
|
|
|
|
return (
|
|
<div className="mt-16 sm:mt-20">
|
|
<div className="-my-4 flex justify-center gap-5 overflow-hidden py-4 sm:gap-8">
|
|
{[image1, image2, image3, image4, image5].map((image, imageIndex) => (
|
|
<div
|
|
key={image.src}
|
|
className={clsx(
|
|
'relative aspect-[9/10] w-44 flex-none overflow-hidden rounded-xl bg-zinc-100 dark:bg-zinc-800 sm:w-72 sm:rounded-2xl',
|
|
rotations[imageIndex % rotations.length],
|
|
)}
|
|
>
|
|
<Image
|
|
src={image}
|
|
alt=""
|
|
sizes="(min-width: 640px) 18rem, 11rem"
|
|
className="absolute inset-0 h-full w-full object-cover"
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default async function Home() {
|
|
let articles = (await getAllArticles()).slice(0, 4)
|
|
|
|
return (
|
|
<>
|
|
<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">
|
|
Blockchain pioneer, founder, and decentralized identity architect.
|
|
</h1>
|
|
<p className="mt-6 text-base text-zinc-600 dark:text-zinc-400">
|
|
I'm Prad Nukala, founder and CEO of Sonr, an IBC-enabled blockchain for decentralized identity.
|
|
As a W3C Working Group Member for DIDs, WebAuthn, and WASM, I'm building the future where users
|
|
control their digital identity and assets. With over 6000+ GitHub contributions, I'm passionate
|
|
about making blockchain technology accessible to everyone.
|
|
</p>
|
|
<div className="mt-6 flex gap-6">
|
|
<SocialLink
|
|
href="https://twitter.com/thisisprad"
|
|
aria-label="Follow on Twitter"
|
|
icon={TwitterIcon}
|
|
/>
|
|
<SocialLink
|
|
href="https://medium.com/@prnk28"
|
|
aria-label="Follow on Medium"
|
|
icon={MediumIcon}
|
|
/>
|
|
<SocialLink
|
|
href="https://github.com/prnk28"
|
|
aria-label="Follow on GitHub"
|
|
icon={GitHubIcon}
|
|
/>
|
|
<SocialLink
|
|
href="https://linkedin.com/in/pradn"
|
|
aria-label="Follow on LinkedIn"
|
|
icon={LinkedInIcon}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
<Photos />
|
|
<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">
|
|
{articles.map((article) => (
|
|
<Article key={article.slug} article={article} />
|
|
))}
|
|
</div>
|
|
<div className="space-y-10 lg:pl-16 xl:pl-24">
|
|
<Newsletter />
|
|
<Resume />
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
</>
|
|
)
|
|
}
|