Add timeline

src/components/timeline/Timeline.scss

@@ -0,0 +1,52 @@
+.timeline {
+    @apply w-full max-w-5xl flex justify-center;
+
+    & > ul {
+        @apply list-none py-5 px-0 relative w-full;
+
+        & > li {
+            @apply mb-12 relative flex;
+
+            & > details {
+                @apply w-2/5 rounded-xl overflow-hidden relative bg-[#f5f5f5];
+                box-shadow: 3px 3px 12px #dee1e4, -3px -3px 12px #fff;
+
+                & > summary {
+                    @apply block select-none cursor-pointer outline-none p-5 mb-0 font-semibold;
+                    transition: all 600ms cubic-bezier(0.2, 1, 0.3, 1);
+
+                    &:hover {
+                        @apply bg-[#f8f8f8];
+                    }
+                }
+
+                & > p {
+                    @apply py-5 pl-0 pr-2;
+                }
+
+                &[open] {
+                    & > summary {
+                        @apply mb-5 pb-5;
+                        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+                    }
+                }
+            }
+
+            // Place point in center line
+            &:before {
+                @apply content-[""] w-6 h-6 rounded-[50%] absolute top-5 left-1/2 bg-[#f8f8f8] -ml-2 z-50;
+                box-shadow: 2px 2px 5px #dee1e4, -2px -2px 5px #fff;
+            }
+
+            &:nth-child(even) {
+                justify-content: flex-end;
+            }
+        }
+
+        // Draw center line
+        &:before {
+            @apply top-0 bottom-0 left-1/2 absolute content-[""] w-2 bg-[#f5f5f5];
+            box-shadow: 1px 1px 5px #dee1e4, -1px -1px 5px #fff;
+        }
+    }
+}

src/components/timeline/Timeline.tsx

@@ -0,0 +1,19 @@
+import './Timeline.scss'
+import react, { ReactNode } from 'react'
+
+type TimelapseProps = {
+  children: ReactNode
+}
+
+function Timeline({ children } : TimelapseProps) {
+
+  return (
+    <div className='timeline'>
+      <ul>
+        { children }
+      </ul>
+    </div>
+  )
+}
+
+export default Timeline

src/components/timeline/TimelineElement.tsx

@@ -0,0 +1,20 @@
+import react, {Children} from 'react'
+import Project from '../../data/Project'
+
+type TimelineElementProps = {
+    project: Project
+}
+
+function TimelineElement({ project } : TimelineElementProps) {
+
+  return (
+    <li>
+      <details>
+        <summary>{ project.name }</summary>
+        <p>{ project.description }</p>
+      </details>
+    </li>
+  )
+}
+
+export default TimelineElement