cade/web-portfolio
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add Wayfarer & PlanMyMeal; WebStorm refactor

Browse source
This commit is contained in:
Cayden Schwechten 2026-11-01 14:39:54 -06:00
parent 243527af9f
commit fe3021f0c2
11 changed files with 119 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

99
components/sections/projects.tsx
View file

@ -1,34 +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 = () => (
<section id="work" className="container-page py-16">
<SectionHeading title="Selected Work">
Instant-Response Web Applications
</SectionHeading>
const Projects = () => {
const rem = projects.length % 3;
const lastRowStart = projects.length - (rem || 3);
<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>
return (
<section id="work" className="container-page py-16">
<SectionHeading title="Selected Work">
Instant-Response Web Applications
</SectionHeading>
<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>
);
<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"
>
↗
</span>
)}
</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>
);
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;