Facial Recognition Interactive Timeline

Author: kevincoj

website/src/caseStudies/FacialRecognition.js

@@ -3,9 +3,9 @@ import "../main.css";
 import teachLogo from "../assets/teachla-logo.svg";
 import PostsList from "../components/mainContent/PostsList";
 import CounterFrame from "../components/posts/FacialRecognition/CounterFrame";
+import Timeline from "../components/posts/FacialRecognition/Timeline";
 import { VisibilityProvider } from "../components/mainContent/commonLogic";
 
-
 export default function FacialRecognition() {
   return (
     <VisibilityProvider>
@@ -45,7 +45,7 @@ const FacialRecognitionInfo = [
       subheader: "Understanding Bias Through Categorization",
       bodyText: [
         {
-          body: <CounterFrame />
+          body: <CounterFrame />,
         },
       ],
     },
@@ -89,6 +89,20 @@ const FacialRecognitionInfo = [
     },
   },
 
+  {
+    post: {
+      profilePic: teachLogo,
+      profilePicName: "Profile Picture - Frame 3",
+      header: "Facial Recognition Timeline",
+      subheader: "Interactive Timeline",
+      bodyText: [
+        {
+          body: <Timeline />,
+        },
+      ],
+    },
+  },
+
   {
     post: {
       profilePic: teachLogo,

website/src/components/posts/FacialRecognition/Timeline.css

@@ -0,0 +1,194 @@
+.timeline-content {
+  background: white;
+  padding: 48px 32px 60px;
+}
+
+.timeline-main-title {
+  text-align: center;
+  font-size: 36px;
+  color: #000;
+  margin: 0 0 48px;
+  font-weight: 700;
+}
+
+.timeline-wrapper-inner {
+  position: relative;
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.timeline-lines {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 1;
+  overflow: visible;
+}
+
+.line-unvisited {
+  stroke: #d0d0d0;
+  stroke-width: 2;
+  transition: all 0.3s ease;
+}
+
+.line-visited {
+  stroke: #677ee6;
+  stroke-width: 4;
+  transition: all 0.3s ease;
+}
+
+.timeline-container {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 48px 60px;
+  position: relative;
+  z-index: 2;
+}
+
+.timeline-event {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
+}
+
+.event-circle {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  background: #e0e0e0;
+  box-shadow: 0 3px 10px rgb(0 0 0 / 10%), 0 0 0 1px #d0d0d0;
+  transition: all 0.3s ease;
+  border: 4px solid white;
+}
+
+.timeline-event:hover .event-circle {
+  box-shadow: 0 5px 18px rgb(91 107 192 / 50%), 0 0 0 1px #6B7FDB;
+  transform: scale(1.1);
+}
+
+.event-circle.visited {
+  background: linear-gradient(135deg, #6B7FDB 0%, #5C6BC0 100%);
+  box-shadow: 0 3px 10px rgb(91 107 192 / 30%), 0 0 0 1px #6B7FDB;
+}
+
+.event-info {
+  margin-top: 12px;
+  text-align: center;
+  position: relative;
+  z-index: 3;
+}
+
+.event-label {
+  background: white;
+  padding: 8px 12px;
+  border-radius: 8px;
+  display: inline-block;
+  box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
+}
+
+.event-title {
+  font-size: 14px;
+  font-weight: 700;
+  color: #000;
+  margin-bottom: 2px;
+}
+
+.event-date {
+  font-size: 12px;
+  font-weight: 600;
+  color: #6B7FDB;
+}
+
+
+/* Modal Styles */
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background-color: rgb(0 0 0 / 60%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  animation: fade-in 0.25s ease;
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+.modal-content {
+  background: white;
+  border-radius: 24px;
+  padding: 40px;
+  max-width: 480px;
+  width: 90%;
+  position: relative;
+  box-shadow: 0 20px 60px rgb(0 0 0 / 30%);
+  animation: slide-up 0.3s ease;
+}
+
+@keyframes slide-up {
+  from {
+    transform: translateY(40px);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.modal-close {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  background: none;
+  border: none;
+  font-size: 32px;
+  cursor: pointer;
+  color: #95a5a6;
+  transition: color 0.2s;
+  line-height: 1;
+  padding: 0;
+  width: 32px;
+  height: 32px;
+  font-family: Arial, sans-serif;
+}
+
+.modal-close:hover {
+  color: #2c3e50;
+}
+
+.modal-content h2 {
+  margin: 0 0 8px;
+  color: #000;
+  font-size: 28px;
+  text-align: center;
+  font-weight: 700;
+}
+
+.modal-year {
+  text-align: center;
+  color: #6B7FDB;
+  font-weight: 600;
+  font-size: 17px;
+  margin: 0 0 24px;
+}
+
+.modal-description {
+  color: #000;
+  line-height: 1.6;
+  font-size: 16px;
+  text-align: center;
+}