add experience links

apps/frontend/src/pages/Home/components/SingleExperience/SingleExperience.css

@@ -24,7 +24,16 @@
 
 .experience-card-left {
     width: 25%;
+    display: flex;
+    justify-content: end;
+}
+
+.experience-card-left-container{
     text-align: end;
+    display: flex;
+    flex-direction: column;
+    align-items: end;
+    width: fit-content;
 }
 
 .experience-card-right {
@@ -52,6 +61,57 @@
     white-space: nowrap;
 }
 
+.experience-links {
+    list-style: none;
+    margin-top: 16px;
+    padding: 16px 0 0 0;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 12px;
+    width: 100%;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.experience-links li {
+    list-style: none;
+}
+
+.experience-links li a {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+    gap: 8px;
+    background-color: #161616;
+    border: 1px solid #2e2e2e;
+    color: #a1a1aa;
+    padding: 5px 10px;
+    border-radius: 6px;
+    text-decoration: none;
+    font-size: 0.85rem;
+    font-weight: 400;
+    transition: all 0.2s ease;
+}
+
+
+.experience-links li a:hover {
+    border-color: #444;
+    color: #ffffff;
+    background-color: #222222;
+}
+
+.icon-mask {
+    width: 16px;
+    height: 16px;
+    background-color: var(--important-color);
+    -webkit-mask-image: var(--icon-url);
+    mask-image: var(--icon-url);
+    -webkit-mask-size: contain;
+    mask-size: contain;
+    -webkit-mask-position: center;
+    mask-position: center;
+}
+
 .experience-tasks {
     list-style: none;
     padding: 0;

apps/frontend/src/pages/Home/components/SingleExperience/SingleExperience.jsx

@@ -5,9 +5,27 @@ function SingleExperience({ experience }) {
     return (
         <div className="experience-card">
             <div className="experience-card-left">
-                <h3 className="experience-company">{experience.company}</h3>
+                <div className="experience-card-left-container">
-                <p className="experience-location">{experience.location}</p>
+                    <h3 className="experience-company">{experience.company}</h3>
-                <p className="experience-duration">{experience.duration}</p>
+                    <p className="experience-location">{experience.location}</p>
+                    <p className="experience-duration">{experience.duration}</p>
+                    {experience.links && experience.links.length > 0 && (
+                        <ul className="experience-links">
+                            {experience.links.map((link) => (
+                                <li>
+                                    <a href={link.link} target="_blank" rel="noopener noreferrer">
+                                        <span
+                                            className="icon-mask"
+                                            style={{ '--icon-url': `url(/images/icons/${link.icon_path})` }}
+                                        />
+                                        <span>{link.label}</span>
+
+                                    </a>
+                                </li>
+                            ))}
+                        </ul>
+                    )}
+                </div>
             </div>
             <div className="experience-card-right">
                 <h3 className="experience-role">{experience.role}</h3>