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

refactor to use existing animated components

Browse Source
This commit is contained in:
Gregor Lohaus
2026-06-16 18:56:02 +02:00
parent dcc4f47ccf
commit 1e0f033d07
3 changed files with 39 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
src/app/cv/page.tsx
View File

@@ -1,92 +1,51 @@
'use client'
import { useGSAP } from "@gsap/react";
import { useGsapContext,useTimeLine } from "../_providers/GsapProvicer";
import { useTimeLine } from "../_providers/GsapProvicer";
import { trpc } from "../_trpc/Client";
import { useRef } from "react";
import { SidebarContent, SidebarProvider, Sidebar } from "~/components/ui/sidebar";
import SidebarTriggerDisappearsOnMobile from "./_components/SidebarTriggerDisappearsOnMobile";
import CvCategory from "./_components/CvCategory";
import gsap from 'gsap'
export default function CvPage() {
const sidebarCategories = trpc.categoryv2.listByLayoutPosition.useQuery("sidebar");
const col1Categories = trpc.categoryv2.listByLayoutPosition.useQuery("col1");
const headerCategories = trpc.categoryv2.listByLayoutPosition.useQuery("header");
const col2Categories = trpc.categoryv2.listByLayoutPosition.useQuery("col2");
const gsapContext = useGsapContext()
const container = useRef<HTMLDivElement>(null)
enum Direction {
Left = 1,
Up,
Right,
Down
}
const nextGsapConf = (direction: Direction) => {
switch (direction) {
case Direction.Left:
return { x: -100, opacity: 0, duration: 0.5 }
case Direction.Up:
return { y: -100, opacity: 0, duration: 0.5 }
case Direction.Right:
return { x: 100, opacity: 0, duration: 0.5 }
case Direction.Down:
return { y: 100, opacity: 0, duration: 0.5 }
}
}
useTimeLine(col2Categories.data)
useGSAP(() => {
const items = gsap?.utils.toArray<GSAPTweenTarget>('.gsapan');
let dir = Direction.Left;
items?.forEach(item => {
gsapContext?.addAnimation(gsap.from(item, nextGsapConf(dir)),0)
if (dir == Direction.Down) {
dir = Direction.Left
} else {
dir = dir + 1
}
})
}, { scope: container, dependencies: [headerCategories.data, sidebarCategories.data, col1Categories.data, col2Categories.data], revertOnUpdate: true })
return (
<>
<SidebarProvider ref={container}>
<SidebarProvider>
{sidebarCategories.data &&
<>
<SidebarTriggerDisappearsOnMobile />
<Sidebar className="gsapan ">
<Sidebar>
<SidebarContent className="p-2 lg:pt-[3.2rem]">
{sidebarCategories.data?.map((cat) => {
{sidebarCategories.data?.map((cat, i) => {
if (cat !== undefined) {
return (
<CvCategory layout="col" initialData={cat} key={cat.id} />
<CvCategory layout="col" position={i} initialData={cat} key={cat.id} />
)
}
})}
</SidebarContent>
</Sidebar>
</>
</>
}
<div className="h-full w-full flex flex-wrap flex-row p-4 pt-8 ">
<div id="mainwrap" className="flex w-full flex-col gap-4 lg:px-[15vw]">
<div id="header" className="flex w-full h-fit flex-row gap-4 flex-wrap">
{headerCategories.data?.map((cat) => {
return (
<CvCategory layout="row" initialData={cat} key={cat.id} />
)
})}
{headerCategories.data?.map((cat, i) => (
<CvCategory layout="row" position={i} initialData={cat} key={cat.id} />
))}
</div>
<div id="colwrapper" className="flex flex-col lg:flex-row w-full h-3/4 gap-4">
<div id="col1" className={`flex flex-col w-full ${col1Categories.data?.length ? col1Categories.data?.length : 0 > 0 ? "lg:w-1/2" : ""} h-full gap-4`}>
{col1Categories.data?.map((cat) => {
return (
<CvCategory layout="col" initialData={cat} key={cat.id} />
)
})}
{col1Categories.data?.map((cat, i) => (
<CvCategory layout="col" position={i} initialData={cat} key={cat.id} />
))}
</div>
<div id="col2" className={`flex flex-col w-full ${col2Categories.data?.length ? col2Categories.data?.length : 0 > 0 ? "lg:w-1/2" : ""} h-full gap-4`}>
{col2Categories.data?.map((cat) => {
return (
<CvCategory layout="col" initialData={cat} key={cat.id} />
)
})}
{col2Categories.data?.map((cat, i) => (
<CvCategory layout="col" position={i} initialData={cat} key={cat.id} />
))}
</div>
</div>
</div>