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

feat: adapt portfolio sections for smaller screens

Browse Source
This commit is contained in:
Amirhossein Khalili
2026-09-05 17:26:06 +08:00
parent f6228f8507
commit 3d12f48f32
9 changed files with 440 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/ProjectsSection.tsx
View File

@@ -6,8 +6,6 @@ import { ArrowLeft, ArrowRight, ArrowUpRight } from 'lucide-react';
import { projects } from '@/data/projects';
import styles from './ProjectsSection.module.css';
const CARD_STEP = 384;
export const ProjectsSection: React.FC = () => {
const viewportRef = useRef<HTMLDivElement>(null);
const dragState = useRef({
@@ -40,8 +38,14 @@ export const ProjectsSection: React.FC = () => {
}, []);
const scrollByCard = (direction: -1 | 1) => {
viewportRef.current?.scrollBy({
left: direction * CARD_STEP,
const viewport = viewportRef.current;
const track = viewport?.firstElementChild as HTMLElement | null;
const card = track?.firstElementChild as HTMLElement | null;
if (!viewport || !track || !card) return;
const gap = Number.parseFloat(window.getComputedStyle(track).columnGap) || 0;
viewport.scrollBy({
left: direction * (card.getBoundingClientRect().width + gap),
behavior: 'smooth',
});
};