poyrazavsever/poyraz-portfolio
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): add staggered entry animations using framer-motion and fix typography nesting

Browse Source
This commit is contained in:
Poyraz Avsever
2026-03-30 11:30:12 +03:00
parent a23665ee9e
commit 87f6585a78
5 changed files with 170 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/about-content.tsx
+32 -27
View File
@@ -1,9 +1,10 @@
"use client";
"use client";
import Image from "next/image";
import Link from "next/link";
import { Badge, Card, Typography } from "poyraz-ui/atoms";
import { Sheet, SheetContent, SheetTitle, SheetTrigger } from "poyraz-ui/molecules";
import { StaggerContainer, StaggerItem } from "@/components/motion-wrapper";
import { BOOKMARKS } from "@/data/bookmarks";
import { certificates } from "@/data/certificates";
import { EDUCATION } from "@/data/education";
@@ -25,21 +26,23 @@ export function AboutContent() {
</Card>
<div>
<div className="grid gap-2">
<StaggerContainer className="grid gap-2">
{EDUCATION.map((item) => (
<Card key={item.id} className="rounded-sm border-border p-3">
<Typography variant="large" className="text-base leading-tight">
{item.title}
</Typography>
<Typography variant="small" className="mt-0.5 text-muted-foreground">
{item.institution}
</Typography>
<Typography variant="small" className="mt-1 text-red-600">
{item.period}
</Typography>
</Card>
<StaggerItem key={item.id}>
<Card className="rounded-sm border-border p-3">
<Typography variant="large" className="text-base leading-tight">
{item.title}
</Typography>
<Typography variant="small" className="mt-0.5 text-muted-foreground">
{item.institution}
</Typography>
<Typography variant="small" className="mt-1 text-red-600">
{item.period}
</Typography>
</Card>
</StaggerItem>
))}
</div>
</StaggerContainer>
</div>
</div>
@@ -106,21 +109,23 @@ export function AboutContent() {
</Sheet>
<div className="h-full">
<div className="grid gap-2">
<StaggerContainer className="grid gap-2">
{EXPERIENCE.map((item) => (
<Card key={item.id} className="rounded-sm border-border p-3">
<Typography variant="large" className="text-base leading-tight">
{item.role}
</Typography>
<Typography variant="small" className="mt-0.5 text-muted-foreground">
{item.company}
</Typography>
<Typography variant="small" className="mt-1 text-red-600">
{item.period}
</Typography>
</Card>
<StaggerItem key={item.id}>
<Card className="rounded-sm border-border p-3">
<Typography variant="large" className="text-base leading-tight">
{item.role}
</Typography>
<Typography variant="small" className="mt-0.5 text-muted-foreground">
{item.company}
</Typography>
<Typography variant="small" className="mt-1 text-red-600">
{item.period}
</Typography>
</Card>
</StaggerItem>
))}
</div>
</StaggerContainer>
</div>
</div>