gregor/gregorlohaus.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'fix-cv-animations'

Browse Source
This commit is contained in:
Gregor Lohaus
2026-06-16 19:10:33 +02:00
parent 303ac83fe2 fd5063d1c4
commit 1b3f30cc90
2 changed files with 17 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/cv/_components/CvCategory.tsx
View File

@@ -29,7 +29,7 @@ export default function CvCategory(props:CvCategoryProps) {
<ScrollArea> <ScrollArea>
{entries.data?.map((entry,i) => ( {entries.data?.map((entry,i) => (
<AnimatePopUp position={position + 0.4 + i * 0.2} key={entry.id}> <AnimatePopUp position={position + 0.4 + i * 0.2} key={entry.id}>
<CvEntry className={props.layout == "row" ? "w-full lg:w-fit" : undefined} initialData={entry}/> <CvEntry position={position + 0.4 + i * 0.2} className={props.layout == "row" ? "w-full lg:w-fit" : undefined} initialData={entry}/>
</AnimatePopUp> </AnimatePopUp>
))} ))}
</ScrollArea> </ScrollArea>

22
src/app/cv/_components/CvEntry.tsx
View File

@@ -8,12 +8,16 @@ import rehypeHighlight from 'rehype-highlight'
import rehypeRaw from 'rehype-raw' import rehypeRaw from 'rehype-raw'
import type { RouterOutputs } from "~/server/routers/_app" import type { RouterOutputs } from "~/server/routers/_app"
import type { ArrayElement } from "type-fest" import type { ArrayElement } from "type-fest"
import AnimateTextIn from "~/app/_components/Animated/AnimateIn"
import AnimatePopUp from "~/app/_components/Animated/AnimatePopUp"
export default function CvEntry(params: { export default function CvEntry(params: {
initialData: ArrayElement<Defined<RouterOutputs['categoryv2']['getById']>['cvEntry']>, initialData: ArrayElement<Defined<RouterOutputs['categoryv2']['getById']>['cvEntry']>,
className?: string className?: string,
position?: number
}) { }) {
const query = trpc.entryv2.getById.useQuery(params.initialData.id); const query = trpc.entryv2.getById.useQuery(params.initialData.id);
const { data, isError, error } = query const { data, isError, error } = query
const position = params.position ?? 0
return ( return (
<> <>
{ {
@@ -23,23 +27,29 @@ export default function CvEntry(params: {
{ {
data.title ? data.title ?
<CardHeader> <CardHeader>
<CardTitle> {data.title} </CardTitle> <AnimateTextIn position={position} animation="slide">
<CardTitle> {data.title} </CardTitle>
</AnimateTextIn>
</CardHeader> : </CardHeader> :
<></> <></>
} }
{ {
data.description ? data.description ?
<CardContent className="text-sm lg:text-base"> <CardContent className="text-sm lg:text-base">
<article className="prose prose-zinc dark:prose-invert max-w-none"> <AnimatePopUp position={position + 0.2}>
<Markdown rehypePlugins={[rehypeHighlight, rehypeRaw]}>{data.description}</Markdown> <article className="prose prose-zinc dark:prose-invert max-w-none">
</article> <Markdown rehypePlugins={[rehypeHighlight, rehypeRaw]}>{data.description}</Markdown>
</article>
</AnimatePopUp>
</CardContent> : </CardContent> :
<></> <></>
} }
{ {
!data.hideDates ? !data.hideDates ?
<CardFooter className="text-sm"> <CardFooter className="text-sm">
{`von ${format((new Date()).setTime(Date.parse(data.fromTime)), 'M. yyyy')} bis zum ${format((new Date()).setTime(Date.parse(data.toTime)), 'M. yyyy')}`} <AnimateTextIn position={position + 0.4}>
{`von ${format((new Date()).setTime(Date.parse(data.fromTime)), 'M. yyyy')} bis zum ${format((new Date()).setTime(Date.parse(data.toTime)), 'M. yyyy')}`}
</AnimateTextIn>
</CardFooter> : </CardFooter> :
<></> <></>
} }