diff --git a/src/components/MyLife.vue b/src/components/MyLife.vue
index a88a6f5..4a4ddc2 100644
--- a/src/components/MyLife.vue
+++ b/src/components/MyLife.vue
@@ -1,71 +1,162 @@
 <script setup>
-import MyLifeCard from './MyLifeCard.vue';
-
-const cards = [
-{
-    Title: 'University of Ottawa',
-    SubTitle: 'Software Engineering',
-    Description: 'I am currently a student at the University of Ottawa in the Software Engineering program. I am currently in my second year of the program.',
-    Date: '2023 - 2028',
-  },
-  {
-    Title: 'College Nouvelles-Frontières',
-    SubTitle: 'High School Diploma',
-    Description: 'I graduated from College Nouvelles-Frontières in 2023 with a high school diploma.',
-    Date: '2018 - 2023',
-  },
-  {
-    Title: 'University of Ottawa',
-    SubTitle: 'Software Engineering',
-    Description: 'I am currently a student at the University of Ottawa in the Software Engineering program. I am currently in my second year of the program.',
-    Date: '2023 - 2028',
-  }
-]
+defineProps({
+    cards: Object
+})
 </script>
 
 <template>
-    <div class="lifePath">
-        <div class="left">
-            <div class="itemcards" v-for="(card, index) in cards" :key="index">
-                <MyLifeCard v-if="index % 2 == 0" :card="card" />
-                <div class="empty" v-if="index % 2 != 0"></div>
-            </div>
-        </div>
-        <div class="middle">
-            <div class="dot" v-for="card in cards"></div>
-        </div>
-        <div class="right">
-            <div class="itemcards" v-for="(card, index) in cards" :key="index">
-                <MyLifeCard v-if="index % 2 != 0" :card="card" />
-                <div class="empty" v-if="index % 2 == 0"></div>
-            </div>
-        </div>
-    </div>
+    <ul class="lifePath">
+        <li class="itemcards" v-for="(card, index) in cards" :key="index" :style="{ '--accent-color': card.color }">
+            <div class="date">{{ card.Date }}</div>
+            <div class="title">{{ card.Title }} - {{ card.SubTitle }}</div>
+            <div class="descr">{{ card.Description }}</div>
+        </li>
+    </ul>
 </template>
 
 <style scoped>
 .lifePath {
-    display: grid;
-    grid-template-columns: 5fr 1fr 5fr;
+  --col-gap: 2rem;
+  --row-gap: 2rem;
+  --path-width: 0.25rem;
+  display: grid;
+  grid-template-columns: var(--path-width) 1fr;
+  grid-auto-columns: max-content;
+  column-gap: var(--col-gap);
+  list-style: none;
+  width: min(60rem, 90%);
+  margin-inline: auto;
+}
+
+/* line */
+.lifePath::before {
+  content: "";
+  grid-column: 1;
+  grid-row: 1 / span 20;
+  background: rgb(225, 225, 225);
+  border-radius: calc(var(--path-width) / 2);
+}
+
+/* row gaps */
+.lifePath .itemcards:not(:last-child) {
+  margin-bottom: var(--row-gap);
+}
+
+/* card */
+.lifePath .itemcards {
+  grid-column: 2;
+  --inlineP: 1.5rem;
+  margin-inline: var(--inlineP);
+  grid-row: span 2;
+  display: grid;
+  grid-template-rows: min-content min-content min-content;
+}
+
+/* date */
+.lifePath .itemcards .date {
+  --date-height: 3rem;
+  height: var(--date-height);
+  margin-inline: calc(var(--inlineP) * -1);
+
+  text-align: center;
+  background-color: var(--accent-color);
+
+  color: white;
+  font-size: 1.25rem;
+  font-weight: 700;
+
+  display: grid;
+  place-content: center;
+  position: relative;
+
+  border-radius: calc(var(--date-height) / 2) 0 0 calc(var(--date-height) / 2);
+}
+
+/* circle */
+.lifePath .itemcards .date::after {
+  content: "";
+  position: absolute;
+  width: 2rem;
+  aspect-ratio: 1;
+  background: var(--color-background);
+  border: 0.3rem solid var(--accent-color);
+  border-radius: 50%;
+  top: 50%;
+
+  transform: translate(50%, -50%);
+  right: calc(100% + var(--col-gap) + var(--path-width) / 2);
+}
+
+/* title descr */
+.lifePath .itemcards .title,
+.lifePath .itemcards .descr {
+  background: var(--color-background);
+  position: relative;
+  padding-inline: 1.5rem;
 }
-/* make a vertical line with dote evenly distributed on it in the middle div */
-.middle {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-evenly;
-    align-items: center;
-    height: 100%;
-    content: '';
-    width: 1px;
-    background-color: var(--color-text);
+.lifePath .itemcards .title {
+  overflow: hidden;
+  padding-block-start: 1.5rem;
+  padding-block-end: 1rem;
+  font-weight: 500;
 }
-.dot {
-    width: 20px;
-    height: 20px;
-    border-radius: 50%;
-    background-color: var(--color-text);
+.lifePath .itemcards .descr {
+  padding-block-end: 1.5rem;
+  font-weight: 300;
 }
-.empty {
-    height: 250px;
+
+/* shadows */
+.lifePath .itemcards .title::before,
+.lifePath .itemcards .descr::before {
+  content: "";
+  position: absolute;
+  width: 90%;
+  height: 0.5rem;
+  background: rgba(0, 0, 0, 0.5);
+  left: 50%;
+  border-radius: 50%;
+  filter: blur(4px);
+  transform: translate(-50%, 50%);
+}
+.lifePath .itemcards .title::before {
+  bottom: calc(100% + 0.125rem);
+}
+
+.lifePath .itemcards .descr::before {
+  z-index: -1;
+  bottom: 0.25rem;
+}
+
+@media (min-width: 40rem) {
+  .lifePath {
+    grid-template-columns: 1fr var(--path-width) 1fr;
+  }
+  .lifePath::before {
+    grid-column: 2;
+  }
+  .lifePath .itemcards:nth-child(odd) {
+    grid-column: 1;
+  }
+  .lifePath .itemcards:nth-child(even) {
+    grid-column: 3;
+  }
+
+  /* start second card */
+  .lifePath .itemcards:nth-child(2) {
+    grid-row: 2/4;
+  }
+
+  .lifePath .itemcards:nth-child(odd) .date::before {
+    clip-path: polygon(0 0, 100% 0, 100% 100%);
+    left: 0;
+  }
+
+  .lifePath .itemcards:nth-child(odd) .date::after {
+    transform: translate(-50%, -50%);
+    left: calc(100% + var(--col-gap) + var(--path-width) / 2);
+  }
+  .lifePath .itemcards:nth-child(odd) .date {
+    border-radius: 0 calc(var(--date-height) / 2) calc(var(--date-height) / 2) 0;
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/components/MyLifeCard.vue b/src/components/MyLifeCard.vue
deleted file mode 100644
index e732077..0000000
--- a/src/components/MyLifeCard.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<script setup>
-defineProps({
-  card: Object,
-})
-</script>
-
-<template>
-    <div class="card">
-        <div class="cardTitle">
-            <h2>{{ card.Title }}</h2>
-            <h3>{{ card.SubTitle }}</h3>
-        </div>
-        <div class="cardDescription">
-            <p>{{ card.Description }}</p>
-        </div>
-        <div class="cardDate">
-            <p>{{ card.Date }}</p>
-        </div>
-    </div>
-</template>
-
-<style scoped>
-.card {
-    background-color: var(--color-background-soft);
-    border-radius: 10px;
-    padding: 1rem;
-    margin: 1rem;
-    width: 100%;
-    height: 250px;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-}
-</style>
\ No newline at end of file
diff --git a/src/components/sections/Life.vue b/src/components/sections/Life.vue
index 8fc1377..8e41c3f 100644
--- a/src/components/sections/Life.vue
+++ b/src/components/sections/Life.vue
@@ -1,21 +1,47 @@
 <script setup>
 import MyLife from '@/components/MyLife.vue';
-import { ref } from 'vue';
 
-const op = ref(false);
-const ps = ref(false);
-
-setTimeout(() => {
-  op.value = true;
-}, 1);
-setTimeout(() => {
-  ps.value = true;
-}, 200);
-
-import PageSwitcher from '@/components/PageSwitcher.vue';
 defineProps({
   inView: Boolean
 })
+
+const cards = [
+{
+    Title: 'University of Ottawa',
+    SubTitle: 'Software Engineering COOP Student',
+    Description: 'I am currently a student at the University of Ottawa in the Software Engineering program. I am currently in my second year of the program.',
+    Date: '2023 - 2028',
+    color: '#3ecd5e'
+  },
+  {
+    Title: 'UOttawa SuperMilage',
+    SubTitle: 'Engineering Team',
+    Description: 'I am currently a member of the UOttawa SuperMilage Team. I\'m working on the software for the car a car that will be competing in the Shell Eco-Marathon Americas in 2023.',
+    Date: '2023 - Present',
+    color: 'red'
+  },
+  {
+    Title: 'Waterloo Canadian Computing Competition',
+    SubTitle: 'Programming Competition',
+    Description: 'I participated in the Waterloo Canadian Computing Competition in 2021, 2022 and 2023. In 2020 I was just practicing and did not participate in the competition. I placed 2st in my school in 2021 and 2022. In 2023, I placed 1st in my school and I was on the Waterloo Honour Roll.',
+    Date: '2020 - 2023',
+    color: 'orange'
+  },
+  {
+    Title: 'Odyssé de l’Objet',
+    SubTitle: 'Competition in Industrial Design',
+    Description: 'I participated in the Odyssé de l’Objet competition three times. My team and I won third place in 2019 and 2021. In 2023, we won best presentation.',
+    Date: '2019, 2021, 2023',
+    color: 'orange'
+  },
+  {
+    Title: 'College Nouvelles-Frontières',
+    SubTitle: 'High School Diploma',
+    Description: 'I graduated from College Nouvelles-Frontières in 2023 with a high school diploma.',
+    Date: '2018 - 2023',
+    color: '#3ecd5e'
+  }
+]
 </script>
 
 <template>
@@ -23,16 +49,34 @@ defineProps({
         <Transition name="slide-fade">
         <div class="life-inside" v-if="inView">
             <h1>My Life</h1>
-            <MyLife />
+            <MyLife :cards="cards" />
         </div>
         </Transition>
   </div>
 </template>
 
 <style scoped>
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
 .life {
-    height: 100vh;
-    width: 80vw;
-    /* background-color: yellow; */
+  min-height: 190vh;
+}
+.life-inside {
+  display: grid;
+  align-content: center;
+  gap: 2rem;
+  padding: 2rem;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3rem;
+  color: var(--color-heading);
+  text-align: center;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/sections/Projects.vue b/src/components/sections/Projects.vue
index 087db6c..282cb3e 100644
--- a/src/components/sections/Projects.vue
+++ b/src/components/sections/Projects.vue
@@ -36,17 +36,6 @@ const projects = [
         color: "#3ecd5e"
     }
 ]
-import { ref } from 'vue';
-
-const op = ref(false);
-const ps = ref(false);
-
-setTimeout(() => {
-  op.value = true;
-}, 1);
-setTimeout(() => {
-  ps.value = true;
-}, 200);
 defineProps({
   inView: Boolean
 })