Add timeline

src/App.tsx

@@ -1,20 +1,18 @@
 import './App.css'
 import TopComponent from "./components/TopComponent";
 import ShortDescription from "./components/ShortDescription";
-import Project from "./components/Project";
+import Timeline from "./components/timeline/Timeline";
+import TimelineElement from "./components/timeline/TimelineElement";
+import {PROJECTS} from "./data/Project";
 
 function App() {
     return (
         <>
             <TopComponent></TopComponent>
             <ShortDescription></ShortDescription>
-            {
-                [
-                    { title: 'Site web limouzik', description: 'Le site web de limouzik', organization: 'Limouzik', tags: ['Symfony']},
-                    { title: 'Application V3', description: 'V3', organization: 'Limouzik', tags: ['React', 'MIDI', 'Webpack', 'Cordova', 'Electron', 'SteamAPI']},
-                    { title: 'Application V4', description: 'V4', organization: 'Limouzik', tags: ['Unity 3D (2019)', 'MPTK', 'C#', 'WASM', 'SteamAPI']},
-                ].map((props) => (<Project {...props}/>))
-            }
+            <Timeline>
+                { PROJECTS.map(p => <TimelineElement project={p} />) }
+            </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

src/data/Project.ts

@@ -21,6 +21,8 @@ interface Project {
     tools: Tool[]
 }
 
+export default Project
+
 // LIMOUZIK
 
 export const SiteWebLimouzik: Project = {