feat: added companyLink to be featured in props for ExperienceTile

Author: steadyfall

src/components/Tiles/ExperienceTile.tsx

@@ -1,18 +1,19 @@
-import { Briefcase } from 'lucide-react'
+import { ArrowUpRight, Briefcase } from 'lucide-react'
 import { useMediaQuery } from '@/hooks/useMediaQuery'
 import Image from 'next/image'
 
 export type ExperienceTileProps = {
   companyLogo: string
   companyName: string
+  companyLink: string
   position: string
   period: string
   responsibilities: string[]
 }
 
 
 
-export function ExperienceTile({ companyLogo, companyName, position, period, responsibilities }: ExperienceTileProps) {
+export function ExperienceTile({ companyLogo, companyName, companyLink, position, period, responsibilities }: ExperienceTileProps) {
   const isDesktop = useMediaQuery('(min-width: 768px)')
   return (
     <div className="mb-8 flex items-center">
@@ -35,18 +36,18 @@ export function ExperienceTile({ companyLogo, companyName, position, period, res
             )}
             <div className="pl-8 md:pl-16 py-3"> 
                 <div className="flex flex-col md:items-start justify-between sm:flex-row mb-4">
-                    {!isDesktop ? (
-                      <div>
+                    <div>
                         <h2 className="text-xl font-bold">{position}</h2>
-                        <h3 className="text-lg font-semibold">{companyName}</h3>
-                        <h3 className="text-gray-600 font-typewriter dark:text-gray-400">{period}</h3>
-                      </div>
-                    ) : (
-                      <div>
-                        <h2 className="text-xl font-bold">{position}</h2>
-                        <h3 className="text-lg font-semibold">{companyName}</h3>
-                      </div>
-                    )}
+                        <a 
+                          href={companyLink} target="_blank"
+                          rel="noopener noreferrer" aria-label={`Link to ${companyName}`}
+                        >
+                          <h3 className="text-lg font-semibold inline-flex items-center">
+                            {companyName} <ArrowUpRight className="w-4 h-4 md:w-5 md:h-5"/>
+                          </h3>
+                        </a>
+                        {(!isDesktop) && <h3 className="text-gray-600 font-typewriter dark:text-gray-400">{period}</h3>}
+                    </div>
                     {isDesktop && (<h3 className="text-gray-600 font-typewriter dark:text-gray-400">{period}</h3>)}
                 </div>
                 <div className="mt-4">