fix(projects): improve carousel controls and case study actions

src/components/ProjectsSection.tsx

@@ -39,8 +39,12 @@ export const ProjectsSection: React.FC = () => {
 
   useEffect(() => {
     syncScrollState();
-    window.addEventListener('resize', syncScrollState);
-    return () => window.removeEventListener('resize', syncScrollState);
+    const viewport = viewportRef.current;
+    if (!viewport) return;
+
+    const resizeObserver = new ResizeObserver(syncScrollState);
+    resizeObserver.observe(viewport);
+    return () => resizeObserver.disconnect();
   }, []);
 
   const scrollByCard = (direction: -1 | 1) => {
@@ -182,14 +186,6 @@ export const ProjectsSection: React.FC = () => {
     dragState.current.moved = false;
   };
 
-  const handleScrollbarChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const viewport = viewportRef.current;
-    if (!viewport) return;
-
-    const maxScroll = Math.max(0, viewport.scrollWidth - viewport.clientWidth);
-    viewport.scrollLeft = (Number(event.target.value) / 100) * maxScroll;
-  };
-
   const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
     if (event.key === 'ArrowLeft') {
       event.preventDefault();
@@ -253,67 +249,71 @@ export const ProjectsSection: React.FC = () => {
           onKeyDown={handleKeyDown}
           tabIndex={0}
           aria-label="Scrollable project cards"
+          aria-roledescription="carousel"
         >
           <div className={styles.carouselTrack}>
             {projects.map((project) => (
-              <article key={project.id} className={styles.card}>
-                <div className={styles.mediaContainer}>
-                  <Image
-                    src={project.image}
-                    alt={project.title}
-                    fill
-                    sizes="(max-width: 650px) 100vw, (max-width: 1100px) 100vw, 360px"
-                    priority={project.id === 'qlockify'}
-                    draggable={false}
-                    className={styles.projectImage}
-                  />
-                </div>
-
-                <div className={styles.cardBody}>
-                  <div className={styles.cardTitleRow}>
-                    <h3 className={styles.cardTitle}>{project.title}</h3>
-                    <ArrowUpRight
-                      size={19}
-                      strokeWidth={2.5}
-                      className={styles.titleLinkIcon}
-                      aria-hidden="true"
+                <article key={project.id} className={styles.card} aria-label={project.title}>
+                  <div className={styles.mediaContainer}>
+                    <Image
+                      src={project.image}
+                      alt={project.title}
+                      fill
+                      sizes="(max-width: 650px) 100vw, (max-width: 1100px) 100vw, 360px"
+                      priority={project.id === 'qlockify'}
+                      draggable={false}
+                      className={styles.projectImage}
                     />
                   </div>
 
-                  <div className={styles.cardDate}>{project.date}</div>
-                  <p className={styles.cardDesc}>{project.description}</p>
+                  <div className={styles.cardBody}>
+                    <div className={styles.cardTitleRow}>
+                      <h3 className={styles.cardTitle}>{project.title}</h3>
+                      <ArrowUpRight
+                        size={19}
+                        strokeWidth={2.5}
+                        className={styles.titleLinkIcon}
+                        aria-hidden="true"
+                      />
+                    </div>
 
-                  <div className={styles.tagList}>
-                    {project.tags.map((tag) => (
-                      <span key={tag} className={styles.tagBadge}>
-                        {tag}
-                      </span>
-                    ))}
-                  </div>
+                    <div className={styles.cardDate}>{project.date}</div>
+                    <p className={styles.cardDesc}>{project.description}</p>
 
-                  <div className={styles.cardFooter}>
-                    <a href={project.link || '#'} className={styles.caseStudyLink}>
-                      <span>View case study</span>
-                      <ArrowRight size={18} strokeWidth={2.25} aria-hidden="true" />
-                    </a>
+                    <div className={styles.tagList}>
+                      {project.tags.map((tag) => (
+                        <span key={tag} className={styles.tagBadge}>
+                          {tag}
+                        </span>
+                      ))}
+                    </div>
+
+                    <div className={styles.cardFooter}>
+                      <a href={project.link || '#'} className={styles.caseStudyLink}>
+                        <span>View case study</span>
+                        <ArrowRight size={18} strokeWidth={2.25} aria-hidden="true" />
+                      </a>
+                    </div>
                   </div>
-                </div>
-              </article>
+                </article>
             ))}
           </div>
         </div>
 
         <div className={styles.scrollbarWrapper}>
-          <input
-            type="range"
-            min="0"
-            max="100"
-            step="0.1"
-            value={scrollProgress}
-            onChange={handleScrollbarChange}
-            className={styles.scrollbar}
+          <div
+            className={styles.progressTrack}
+            role="progressbar"
             aria-label="Project carousel position"
-          />
+            aria-valuemin={0}
+            aria-valuemax={100}
+            aria-valuenow={Math.round(scrollProgress)}
+          >
+            <span
+              className={styles.progressValue}
+              style={{ width: `${12.5 + scrollProgress * 0.875}%` }}
+            />
+          </div>
         </div>
       </div>
     </section>