Cayden Website 2.0: Rewrite with t3code & hand
This commit is contained in:
Cayden Schwechten
parent
75a0e8f5fc
commit
243527af9f
34 changed files with 1652 additions and 1001 deletions
32
components/sections/contact.tsx
Normal file
32
components/sections/contact.tsx
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
import { site } from '@/lib/site';
|
||||
|
||||
const Contact = () => (
|
||||
<section id="contact" className="container-page pt-12 pb-24">
|
||||
<div className="flex flex-col items-start justify-between gap-6 panel p-6 sm:flex-row sm:items-center md:p-9">
|
||||
<div>
|
||||
<h2 className="font-display text-2xl font-medium tracking-tight text-ink md:text-3xl">
|
||||
Get in touch
|
||||
</h2>
|
||||
<p className="mt-1.5 text-sm text-ink/70">
|
||||
Have a project, role, or panel in mind? Let's talk.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-3 text-sm font-medium">
|
||||
<a href={`mailto:${site.email}`} className="btn-primary">
|
||||
{site.email} →
|
||||
</a>
|
||||
<a
|
||||
href={site.gitlab}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="btn-ghost"
|
||||
>
|
||||
GitLab ↗
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
export default Contact;
|
||||
31
components/sections/feats.tsx
Normal file
31
components/sections/feats.tsx
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
import Reveal from '@/components/ui/reveal';
|
||||
import SectionHeading from '@/components/ui/section-heading';
|
||||
import { feats } from '@/lib/site';
|
||||
|
||||
const Feats = () => (
|
||||
<section id="feats" className="container-page py-16">
|
||||
<SectionHeading title="Leadership">
|
||||
Operations and community work outside of code.
|
||||
</SectionHeading>
|
||||
|
||||
<ul className="grid panel sm:grid-cols-2">
|
||||
{feats.map((feat, i) => (
|
||||
<li
|
||||
key={feat.title}
|
||||
className="border-white/12 p-6 transition-colors not-last:border-b hover:bg-white/[0.04] sm:odd:border-r sm:odd:nth-last-2:border-b-0 md:p-7"
|
||||
>
|
||||
<Reveal delay={i * 60}>
|
||||
<h3 className="font-display text-base font-medium text-ink">
|
||||
{feat.title}
|
||||
</h3>
|
||||
<p className="mt-1.5 text-sm leading-relaxed text-ink/70">
|
||||
{feat.detail}
|
||||
</p>
|
||||
</Reveal>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
);
|
||||
|
||||
export default Feats;
|
||||
69
components/sections/hero.tsx
Normal file
69
components/sections/hero.tsx
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
import Image from 'next/image';
|
||||
import { about, site, stack } from '@/lib/site';
|
||||
|
||||
const Hero = () => (
|
||||
<section id="about" className="container-page py-20 md:pt-28 md:pb-24">
|
||||
<div className="max-w-2xl">
|
||||
<p className="mb-4 flex items-center gap-3 font-mono text-xs tracking-[0.2em] text-aurora uppercase">
|
||||
<span aria-hidden className="h-px w-6 bg-aurora" />
|
||||
<span>{site.role}</span>
|
||||
</p>
|
||||
<h1 className="font-display text-5xl font-semibold tracking-[-0.035em] text-ink sm:text-6xl md:text-7xl">
|
||||
Howdy, I'm {site.name}.
|
||||
</h1>
|
||||
<p className="mt-4 max-w-xl text-lg leading-relaxed text-ink/85 md:text-xl">
|
||||
{site.tagline}
|
||||
</p>
|
||||
|
||||
<div className="mt-8 flex flex-wrap gap-3 text-sm font-medium">
|
||||
<a href="#work" className="btn-primary">
|
||||
Selected work ↓
|
||||
</a>
|
||||
<a
|
||||
href={site.gitlab}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="btn-ghost"
|
||||
>
|
||||
GitLab ↗
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-16 grid panel md:mt-20 md:grid-cols-[14rem_1fr]">
|
||||
<div className="border-b border-white/12 p-5 md:border-r md:border-b-0 md:p-6">
|
||||
<div className="relative aspect-[8/7] overflow-hidden border border-white/12 bg-obsidian/60">
|
||||
<Image
|
||||
src="/cayden-portrait.png"
|
||||
alt="Cayden"
|
||||
fill
|
||||
loading="eager"
|
||||
sizes="(min-width: 768px) 13rem, 90vw"
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col justify-between">
|
||||
<div className="space-y-4 p-6 text-[15.5px] leading-relaxed text-ink/85 md:p-8">
|
||||
{about.map((paragraph) => (
|
||||
<p key={paragraph}>{paragraph}</p>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<ul className="flex flex-wrap gap-x-6 gap-y-2 border-t border-white/12 px-6 py-3.5 font-mono text-xs text-crest/80 md:px-8">
|
||||
{stack.map((tech) => (
|
||||
<li
|
||||
key={tech}
|
||||
className="transition-colors hover:text-aurora"
|
||||
>
|
||||
{tech}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
export default Hero;
|
||||
34
components/sections/projects.tsx
Normal file
34
components/sections/projects.tsx
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
import Reveal from '@/components/ui/reveal';
|
||||
import SectionHeading from '@/components/ui/section-heading';
|
||||
import { projects } from '@/lib/site';
|
||||
|
||||
const Projects = () => (
|
||||
<section id="work" className="container-page py-16">
|
||||
<SectionHeading title="Selected Work">
|
||||
Instant-Response Web Applications
|
||||
</SectionHeading>
|
||||
|
||||
<div className="grid divide-y divide-white/12 panel md:grid-cols-3 md:divide-x md:divide-y-0">
|
||||
{projects.map((project, i) => (
|
||||
<Reveal key={project.title} delay={i * 60}>
|
||||
<article className="flex h-full flex-col justify-between p-6 transition-colors hover:bg-white/4 md:p-7">
|
||||
<div>
|
||||
<h3 className="font-display text-lg font-medium tracking-tight text-ink">
|
||||
{project.title}
|
||||
</h3>
|
||||
<p className="mt-2.5 text-sm leading-relaxed text-ink/70">
|
||||
{project.blurb}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p className="mt-8 border-t border-white/10 pt-3 font-mono text-xs text-aurora/90">
|
||||
{project.stack}
|
||||
</p>
|
||||
</article>
|
||||
</Reveal>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
export default Projects;
|
||||
Loading…
Add table
Add a link
Reference in a new issue