diff --git a/apps/frontend/src/pages/Home/components/SingleExperience/SingleExperience.css b/apps/frontend/src/pages/Home/components/SingleExperience/SingleExperience.css index b305c86..fb4e227 100644 --- a/apps/frontend/src/pages/Home/components/SingleExperience/SingleExperience.css +++ b/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; diff --git a/apps/frontend/src/pages/Home/components/SingleExperience/SingleExperience.jsx b/apps/frontend/src/pages/Home/components/SingleExperience/SingleExperience.jsx index c69fe1f..6f38c51 100644 --- a/apps/frontend/src/pages/Home/components/SingleExperience/SingleExperience.jsx +++ b/apps/frontend/src/pages/Home/components/SingleExperience/SingleExperience.jsx @@ -5,9 +5,27 @@ function SingleExperience({ experience }) { return (
{experience.location}
-{experience.duration}
+{experience.location}
+{experience.duration}
+ {experience.links && experience.links.length > 0 && ( +