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/home-hero.tsx
+43 -43
View File
@@ -4,6 +4,7 @@ import Image from "next/image";
import { useRef, useState } from "react";
import { Card, Typography } from "poyraz-ui/atoms";
import { NewsCard } from "poyraz-ui/molecules";
import { StaggerContainer, StaggerItem, FadeIn } from "@/components/motion-wrapper";
type HomeHeroProps = {
news: {
@@ -38,52 +39,51 @@ export function HomeHero({ news }: HomeHeroProps) {
return (
<section className="grid gap-3 md:h-65 md:grid-cols-2">
<div className="grid gap-2 md:grid-rows-3">
<StaggerContainer className="grid gap-2 md:grid-rows-3">
{news.map((item) => (
<NewsCard
key={item.id}
className="rounded-sm border-border md:h-full"
category={item.category}
title={item.title}
date={item.date}
image={item.image}
href={item.href}
/>
))}
</div>
<Card className="grid grid-cols-[112px_1fr] items-stretch gap-2 rounded-sm border-border sm:grid-cols-[168px_1fr] md:h-full">
<div className="flex flex-col justify-center gap-1 px-3 py-2">
<div className="flex items-center gap-1">
<Typography variant="h2" className="leading-tight">
Poyraz
</Typography>
<Typography variant="h2" secondaryFont className="leading-tight text-red-600">
{" "}
Avsever
</Typography>
</div>
<Typography variant="small" className="text-muted-foreground">
Teknolojiyi merak eden bir genç. Yazılım geliştirme, yapay zeka ve teknoloji dünyasındaki gelişmeleri takip ediyor.
</Typography>
</div>
<div className="relative h-full overflow-hidden">
<div
className="relative h-full w-full"
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
>
<Image
src={frame === 1 ? "/images/hero1.png" : "/images/hero2.png"}
alt="Poyraz Avsever"
width={240}
height={240}
className="absolute right-0 bottom-0 h-auto w-20 object-contain md:w-48"
<StaggerItem key={item.id}>
<NewsCard
className="rounded-sm border-border md:h-full"
category={item.category}
title={item.title}
date={item.date}
image={item.image}
href={item.href}
/>
</StaggerItem>
))}
</StaggerContainer>
<FadeIn delay={0.15}>
<Card className="grid grid-cols-[112px_1fr] items-stretch gap-2 rounded-sm border-border sm:grid-cols-[168px_1fr] md:h-full">
<div className="flex flex-col justify-center gap-1 px-3 py-2">
<div className="flex items-center gap-1">
<Typography variant="h2" className="leading-tight">
Poyraz <span className="font-secondary text-red-600">Avsever</span>
</Typography>
</div>
<Typography variant="small" className="text-muted-foreground">
Teknolojiyi merak eden bir genç. Yazılım geliştirme, yapay zeka ve teknoloji dünyasındaki gelişmeleri takip ediyor.
</Typography>
</div>
</div>
</Card>
<div className="relative h-full overflow-hidden">
<div
className="relative h-full w-full"
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
>
<Image
src={frame === 1 ? "/images/hero1.png" : "/images/hero2.png"}
alt="Poyraz Avsever"
width={240}
height={240}
className="absolute right-0 bottom-0 h-auto w-20 object-contain md:w-48"
/>
</div>
</div>
</Card>
</FadeIn>
</section>
);
}