amiirkhl/my-protfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(motion): add scroll reveals and micro-interactions

Browse Source
This commit is contained in:
Amirhossein Khalili
2026-09-07 00:19:07 +03:30
parent fa98f70b51
commit b0c9ad1296
20 changed files with 420 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/ProjectsSection.tsx
View File

@@ -203,7 +203,7 @@ export const ProjectsSection: React.FC = () => {
aria-labelledby="projects-title"
>
<div className="content-container">
<div className={styles.headerRow}>
<div className={styles.headerRow} data-reveal="soft">
<div className="section-header" style={{ marginBottom: 0 }}>
<span className="section-eyebrow">PROJECTS</span>
<div className="section-title-wrap">
@@ -251,10 +251,10 @@ export const ProjectsSection: React.FC = () => {
aria-label="Scrollable project cards"
aria-roledescription="carousel"
>
<div className={styles.carouselTrack}>
<div className={styles.carouselTrack} data-reveal-group>
{projects.map((project) => (
<article key={project.id} className={styles.card} aria-label={project.title}>
<div className={styles.mediaContainer}>
<div className={styles.mediaContainer} data-reveal="image">
<ProjectThumbnail
image={project.image}
title={project.title}
@@ -263,7 +263,7 @@ export const ProjectsSection: React.FC = () => {
/>
</div>
<div className={styles.cardBody}>
<div className={styles.cardBody} data-reveal="soft">
<div className={styles.cardTitleRow}>
<h3 className={styles.cardTitle}>{project.title}</h3>
{project.link && (
@@ -299,7 +299,7 @@ export const ProjectsSection: React.FC = () => {
</div>
</div>
<div className={styles.scrollbarWrapper}>
<div className={styles.scrollbarWrapper} data-reveal="soft">
<div
className={styles.progressTrack}
role="progressbar"