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

nice category list, markdown

Browse Source
This commit is contained in:
Gregor Lohaus
2025-06-12 23:37:05 +02:00
parent 4f24ef7db0
commit 128269de1f
21 changed files with 664 additions and 509 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,10 +2,8 @@
import { useGSAP } from "@gsap/react";
import { useGsapContext } from "../_providers/GsapProvicer";
import { trpc } from "../_trpc/Client";
import { useRef, useState } from "react";
import type { Element } from "~/lib/utils";
import { Card } from "~/components/ui/card";
import { SidebarContent, SidebarProvider, Sidebar, SidebarTrigger } from "~/components/ui/sidebar";
import { useRef } from "react";
import { SidebarContent, SidebarProvider, Sidebar } from "~/components/ui/sidebar";
import SidebarTriggerDisappearsOnMobile from "./_components/SidebarTriggerDisappearsOnMobile";
import CvCategory from "./_components/CvCategory";
export default function CvPage() {
@@ -30,8 +28,6 @@ export default function CvPage() {
return { y: 100, opacity: 0, duration: 0.5 }
}
}
type DataElement = Element<typeof categories.data>
useGSAP(() => {
const items = gsap?.utils.toArray<GSAPTweenTarget>('.gsapan');
const tl = gsap?.timeline();
@@ -56,7 +52,7 @@ export default function CvPage() {
<SidebarContent className="p-2">
{categories.data.filter((cat) => cat.layoutPosition == 'sidebar').map((cat) => {
return (
<CvCategory layout="col" initialData={cat} />
<CvCategory layout="col" initialData={cat} key={cat.id} />
)
})}
</SidebarContent>
@@ -65,29 +61,32 @@ export default function CvPage() {
<></>
}
<div className="h-full w-full flex flex-wrap flex-row p-2 ">
<div id="mainwrap" className="flex flex-wrap w-full flex-col">
<div id="header" className="flex flex-wrap w-full h-1/4 flex-row">
<div id="mainwrap" className="flex w-full flex-col gap-[1rem]">
<div id="header" className="flex w-full h-fit flex-row">
{categories.data.filter((cat) => cat.layoutPosition == 'header').map((cat) => {
return (
<CvCategory layout="row" initialData={cat} />
<CvCategory layout="row" initialData={cat} key={cat.id} />
)
})}
</div>
<div id="colwrapper" className="flex flex-wrap flex-row w-full h-3/4">
<div id="col1" className="flex flex-col w-full lg:w-1/2 h-full">
<div id="colwrapper" className="flex flex-col md:flex-row w-full h-3/4 gap-[1rem]">
<div id="col1" className="flex flex-col w-full h-full">
{categories.data.filter((cat) => cat.layoutPosition == 'col1').map((cat) => {
return (
<CvCategory layout="col" initialData={cat} />
)
})}
</div>
<div id="col2" className="flex flex-wrap flex-col w-full lg:w-1/2 h-full">
{categories.data.filter((cat) => cat.layoutPosition == 'col2').map((cat) => {
return (
<CvCategory layout="col" initialData={cat} />
<CvCategory layout="col" initialData={cat} key={cat.id} />
)
})}
</div>
{categories.data.filter((cat) => cat.layoutPosition == 'col2').length > 0 ?
<div id="col2" className="flex flex-wrap flex-col w-full lg:w-1/2 h-full">
{categories.data.filter((cat) => cat.layoutPosition == 'col2').map((cat) => {
return (
<CvCategory layout="col" initialData={cat} key={cat.id} />
)
})}
</div> :
<></>
}
</div>
</div>
</div>