+ big verbiage update
This commit is contained in:
Cayden Schwechten
parent
fe3021f0c2
commit
81c290ea87
10 changed files with 140 additions and 114 deletions
|
|
@ -1,4 +1,4 @@
|
|||
import {site} from '@/lib/site';
|
||||
import { site } from '@/lib/site';
|
||||
|
||||
const Contact = () => (
|
||||
<section id="contact" className="container-page pt-12 pb-24">
|
||||
|
|
|
|||
|
|
@ -1,31 +1,49 @@
|
|||
import Reveal from '@/components/ui/reveal';
|
||||
import SectionHeading from '@/components/ui/section-heading';
|
||||
import {feats} from '@/lib/site';
|
||||
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>
|
||||
const Feats = () => {
|
||||
const isOddTotal = feats.length % 2 === 1;
|
||||
|
||||
<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-normal text-ink">
|
||||
{feat.title}
|
||||
</h3>
|
||||
<p className="mt-1.5 text-sm leading-relaxed text-ink/70">
|
||||
{feat.detail}
|
||||
</p>
|
||||
</Reveal>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
);
|
||||
return (
|
||||
<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) => {
|
||||
const isLast = i === feats.length - 1;
|
||||
const isLastRow = isOddTotal
|
||||
? isLast
|
||||
: i >= feats.length - 2;
|
||||
const isLeftCol = i % 2 === 0;
|
||||
const colSpan = isOddTotal && isLast ? 'sm:col-span-2' : '';
|
||||
const rightBorder =
|
||||
isLeftCol && !(isOddTotal && isLast)
|
||||
? 'sm:border-r'
|
||||
: '';
|
||||
const bottomBorder = isLastRow ? 'sm:border-b-0' : '';
|
||||
|
||||
return (
|
||||
<li
|
||||
key={feat.title}
|
||||
className={`border-white/12 p-6 transition-colors not-last:border-b hover:bg-white/[0.04] md:p-7 ${colSpan} ${rightBorder} ${bottomBorder}`}
|
||||
>
|
||||
<Reveal delay={i * 60}>
|
||||
<h3 className="font-display text-base font-normal 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;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import Image from 'next/image';
|
||||
import {about, site, stack} from '@/lib/site';
|
||||
import { about, site, stack } from '@/lib/site';
|
||||
|
||||
const Hero = () => (
|
||||
<section id="about" className="container-page py-20 md:pt-28 md:pb-24">
|
||||
|
|
|
|||
|
|
@ -1,79 +1,79 @@
|
|||
import Reveal from '@/components/ui/reveal';
|
||||
import SectionHeading from '@/components/ui/section-heading';
|
||||
import {projects} from '@/lib/site';
|
||||
import { projects } from '@/lib/site';
|
||||
|
||||
const Projects = () => {
|
||||
const rem = projects.length % 3;
|
||||
const lastRowStart = projects.length - (rem || 3);
|
||||
const rem = projects.length % 3;
|
||||
const lastRowStart = projects.length - (rem || 3);
|
||||
|
||||
return (
|
||||
<section id="work" className="container-page py-16">
|
||||
<SectionHeading title="Selected Work">
|
||||
Instant-Response Web Applications
|
||||
</SectionHeading>
|
||||
return (
|
||||
<section id="work" className="container-page py-16">
|
||||
<SectionHeading title="Selected Work">
|
||||
Instant-Response Web Applications
|
||||
</SectionHeading>
|
||||
|
||||
<div className="grid panel md:grid-cols-6">
|
||||
{projects.map((project, i) => {
|
||||
const inLastRow = i >= lastRowStart;
|
||||
const colSpan =
|
||||
inLastRow && rem === 1
|
||||
? 'md:col-span-6'
|
||||
: inLastRow && rem === 2
|
||||
? 'md:col-span-3'
|
||||
: 'md:col-span-2';
|
||||
const rightRule =
|
||||
i !== projects.length - 1 && i % 3 !== 2
|
||||
? 'md:border-r'
|
||||
: '';
|
||||
const bottomRule = inLastRow ? 'md:border-b-0' : '';
|
||||
const className = `group grid border-white/12 p-6 transition-colors not-last:border-b hover:bg-white/4 md:p-7 ${colSpan} ${rightRule} ${bottomRule}`;
|
||||
<div className="grid panel md:grid-cols-6">
|
||||
{projects.map((project, i) => {
|
||||
const inLastRow = i >= lastRowStart;
|
||||
const colSpan =
|
||||
inLastRow && rem === 1
|
||||
? 'md:col-span-6'
|
||||
: inLastRow && rem === 2
|
||||
? 'md:col-span-3'
|
||||
: 'md:col-span-2';
|
||||
const rightRule =
|
||||
i !== projects.length - 1 && i % 3 !== 2
|
||||
? 'md:border-r'
|
||||
: '';
|
||||
const bottomRule = inLastRow ? 'md:border-b-0' : '';
|
||||
const className = `group grid border-white/12 p-6 transition-colors not-last:border-b hover:bg-white/4 md:p-7 ${colSpan} ${rightRule} ${bottomRule}`;
|
||||
|
||||
const content = (
|
||||
<Reveal delay={i * 60}>
|
||||
<div className="flex h-full flex-col justify-between">
|
||||
<div>
|
||||
<h3 className="flex items-baseline justify-between gap-2 font-display text-lg font-normal tracking-tight text-ink group-hover:text-crest">
|
||||
<span>{project.title}</span>
|
||||
{project.href && (
|
||||
<span
|
||||
aria-hidden
|
||||
className="text-sm text-aurora transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5"
|
||||
>
|
||||
const content = (
|
||||
<Reveal delay={i * 60}>
|
||||
<div className="flex h-full flex-col justify-between">
|
||||
<div>
|
||||
<h3 className="flex items-baseline justify-between gap-2 font-display text-lg font-normal tracking-tight text-ink group-hover:text-crest">
|
||||
<span>{project.title}</span>
|
||||
{project.href && (
|
||||
<span
|
||||
aria-hidden
|
||||
className="text-sm text-aurora transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5"
|
||||
>
|
||||
↗
|
||||
</span>
|
||||
)}
|
||||
</h3>
|
||||
<p className="mt-2.5 text-sm leading-relaxed text-ink/70">
|
||||
{project.blurb}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</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>
|
||||
</div>
|
||||
</Reveal>
|
||||
);
|
||||
<p className="mt-8 border-t border-white/10 pt-3 font-mono text-xs text-aurora/90">
|
||||
{project.stack}
|
||||
</p>
|
||||
</div>
|
||||
</Reveal>
|
||||
);
|
||||
|
||||
return project.href ? (
|
||||
<a
|
||||
key={project.title}
|
||||
href={project.href}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className={className}
|
||||
>
|
||||
{content}
|
||||
</a>
|
||||
) : (
|
||||
<article key={project.title} className={className}>
|
||||
{content}
|
||||
</article>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
return project.href ? (
|
||||
<a
|
||||
key={project.title}
|
||||
href={project.href}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className={className}
|
||||
>
|
||||
{content}
|
||||
</a>
|
||||
) : (
|
||||
<article key={project.title} className={className}>
|
||||
{content}
|
||||
</article>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Projects;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import type {ReactNode} from 'react';
|
||||
import type { ReactNode } from 'react';
|
||||
|
||||
type Props = {
|
||||
title: string;
|
||||
|
|
@ -9,7 +9,7 @@ const SectionHeading = ({ title, children }: Props) => (
|
|||
<div className="mb-6 flex flex-col justify-between gap-2 border-b border-white/15 pb-4 sm:flex-row sm:items-end">
|
||||
<div className="flex items-center gap-3">
|
||||
<span aria-hidden className="h-px w-5 bg-aurora" />
|
||||
<h2 className="font-display text-2xl font-normal tracking-tight text-ink md:text-3xl">
|
||||
<h2 className="font-display text-2xl font-normal tracking-tight text-ink md:text-3xl">
|
||||
{title}
|
||||
</h2>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue