fix: move getType outside component, use useId for modal, render all link occurrences

Co-authored-by: digitalnomad91 <2067771+digitalnomad91@users.noreply.github.com>

Author: Copilot

src/components/portfolio/PortfolioModal.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useId, useRef, useState } from 'react'
 import Image from 'next/image'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faCheck, faTimes } from '@fortawesome/free-solid-svg-icons'
@@ -38,7 +38,8 @@ const PortfolioModal: React.FC<PortfolioModalProps> = ({
 }) => {
   const [openAccordion, setOpenAccordion] = useState<number | null>(null)
   const backdropRef = useRef<HTMLDivElement>(null)
-  const titleId = useRef(`portfolio-modal-title-${Math.random().toString(36).slice(2)}`)
+  const generatedId = useId()
+  const titleId = `portfolio-modal-title-${generatedId}`
 
   useEffect(() => {
     if (isOpen) {
@@ -65,24 +66,29 @@ const PortfolioModal: React.FC<PortfolioModalProps> = ({
     if (e.target === backdropRef.current) onClose()
   }
 
-  // Safely render description with an optional inline link
+  // Safely render description with optional inline links for all occurrences of link.label
   const renderDescription = () => {
     if (!link || !description.includes(link.label)) {
       return description
     }
     const parts = description.split(link.label)
     return (
       <>
-        {parts[0]}
-        <a
-          href={link.href}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="text-[#09afdf] hover:underline"
-        >
-          {link.label}
-        </a>
-        {parts.slice(1).join(link.label)}
+        {parts.map((part, i) => (
+          <React.Fragment key={i}>
+            {part}
+            {i < parts.length - 1 && (
+              <a
+                href={link.href}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-[#09afdf] hover:underline"
+              >
+                {link.label}
+              </a>
+            )}
+          </React.Fragment>
+        ))}
       </>
     )
   }
@@ -92,7 +98,7 @@ const PortfolioModal: React.FC<PortfolioModalProps> = ({
       ref={backdropRef}
       role="dialog"
       aria-modal="true"
-      aria-labelledby={titleId.current}
+      aria-labelledby={titleId}
       className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 animate-fadeIn"
       onClick={handleBackdropClick}
     >
@@ -101,7 +107,7 @@ const PortfolioModal: React.FC<PortfolioModalProps> = ({
       >
         {/* Modal Header */}
         <div className="flex items-center justify-between px-5 py-3 border-b border-gray-200">
-          <h4 id={titleId.current} className="text-lg font-semibold text-[#333]">{title}</h4>
+          <h4 id={titleId} className="text-lg font-semibold text-[#333]">{title}</h4>
           <button
             onClick={onClose}
             className="text-gray-400 hover:text-gray-700 transition-colors text-xl leading-none p-1"

src/components/video-player.tsx

@@ -7,6 +7,13 @@ interface VideoPlayerProps {
   posterSrc: string
 }
 
+function getType(src: string): string | undefined {
+  if (src.endsWith('.webm')) return 'video/webm'
+  if (src.endsWith('.mp4')) return 'video/mp4'
+  if (src.endsWith('.ogg') || src.endsWith('.ogv')) return 'video/ogg'
+  return undefined
+}
+
 const VideoPlayer: React.FC<VideoPlayerProps> = ({ mp4Src, webmSrc, posterSrc }) => {
   const videoRef = useRef<HTMLVideoElement>(null)
   const [isPlaying, setIsPlaying] = useState(false)
@@ -65,13 +72,6 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({ mp4Src, webmSrc, posterSrc })
     }
   }, [attemptPlay])
 
-  const getType = (src: string) => {
-    if (src.endsWith('.webm')) return 'video/webm'
-    if (src.endsWith('.mp4')) return 'video/mp4'
-    if (src.endsWith('.ogg') || src.endsWith('.ogv')) return 'video/ogg'
-    return undefined
-  }
-
   return (
     <div className="relative w-full h-full">
       {/* Poster/still image — always rendered underneath, visible until video plays */}