added small improvements and new hover animation to the experience ch…

…apters
YanivWein24 · Mar 24, 2024 · 9d92b94 · 9d92b94
1 parent 3ffab3a
commit 9d92b94
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 7 deletions.
diff --git a/src/components/Timeline/Timeline.css b/src/components/Timeline/Timeline.css
@@ -65,15 +65,36 @@
   color: var(--color-primary-light);
 }
 
-.disableNavigation {
-  pointer-events: none;
+.imageContainer {
+  overflow: hidden;
 }
 
 .timeLineImage {
   width: 100%;
   box-shadow: rgb(167 167 167 / 50%) 0px 4px 6px;
 }
 
+.timeLineImage {
+  transition: 0.3s ease-in-out;
+}
+
+.timeLineImage:hover {
+  transform: scale(1.05);
+}
+
+.fa-link {
+  color: #d1d1d1;
+  transition: 0.15s ease-in-out;
+}
+
+.fa-link.current {
+  color: #f2f2f2;
+}
+
+.fa-link:hover {
+  color: #b5b5b5;
+}
+
 @media screen and (max-width: 940px) {
   .timeline-container {
     padding: 2rem 0 4rem;

diff --git a/src/components/Timeline/Timeline.tsx b/src/components/Timeline/Timeline.tsx
@@ -93,7 +93,11 @@ export default function Timeline() {
                   rel="noreferrer"
                   className="timeLineLinkIcon"
                 >
-                  <i className="fa-solid fa-link" />
+                  <i
+                    className={`fa-solid fa-link ${
+                      isCurrentChapter && "current"
+                    }`}
+                  />
                 </a>
               )}
               {scores && (
@@ -115,10 +119,11 @@ export default function Timeline() {
               </div>
               {image && (
                 <a
-                  href={link ?? ""}
-                  target="_blank"
-                  rel="noreferrer"
-                  className={!link ? "disableNavigation" : ""}
+                  href={link ?? "javascript:void(0)"} // eslint-disable-line
+                  aria-disabled={!link}
+                  target={link && "_blank"}
+                  rel={link && "noreferrer"}
+                  className={`imageContainer ${!link && "disableNavigation"}`}
                 >
                   <img
                     src={image}