41 add timeline page for workshops

src/components/NavBar.vue

@@ -5,6 +5,7 @@ import { Disclosure, DisclosureButton, DisclosurePanel } from "@headlessui/vue";
 
 const navItems = ref([
   { name: "Home", href: "/", current: true },
+  { name: "Timeline", href: "/timeline", current: false },
   { name: "About Us", href: "/about", current: false },
 ]);
 

src/router/index.js

@@ -12,11 +12,13 @@ const router = createRouter({
     {
       path: "/about",
       name: "About",
-      // route level code-splitting
-      // this generates a separate chunk (About.[hash].js) for this route
-      // which is lazy-loaded when the route is visited.
       component: () => import("../views/AboutView.vue"),
     },
+    {
+      path: "/timeline",
+      name: "Timeline",
+      component: () => import("../views/Timeline/Timeline.vue"),
+    },
     {
       path: "/:catchAll(.*)*",
       name: "PageNotFound",

src/views/Home/EventCard.vue

@@ -0,0 +1,39 @@
+<script setup>
+defineProps({
+  title: String,
+  info: String,
+  img: String,
+  time: String,
+  month: String,
+  day: String,
+})
+</script>
+
+<template>
+  <div class="py-4">
+    <div class="mx-auto h-fit flex items-center justify-center px-8">
+      <div class="flex flex-col w-full bg-white rounded shadow-lg sm:w-3/4 md:w-1/2 lg:w-3/5">
+        <div class="w-full h-64 bg-top bg-cover rounded-t add-img">
+        </div>
+        <div class="flex flex-col w-full md:flex-row">
+          <div
+            class="flex flex-row justify-around p-4 font-bold leading-none text-gray-800 uppercase bg-gray-400 rounded md:flex-col md:items-center md:justify-center md:w-1/4">
+            <div class="md:text-3xl">{{ month }}</div>
+            <div class="md:text-6xl">{{ day }}</div>
+            <div class="md:text-xl">{{ time }}</div>
+          </div>
+          <div class="p-4 font-normal text-gray-800 md:w-3/4">
+            <h1 class="mb-4 text-4xl font-bold leading-none tracking-tight text-gray-800">{{ title }}</h1>
+            <p class="leading-normal">{{ info }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.add-img {
+  background-image: v-bind(img);
+}
+</style>

src/views/Home/SessionInfo.vue

@@ -1,7 +1,29 @@
-<script setup></script>
+<script setup>
+/*
+import EventCard from './EventCard.vue';
+
+const events = [
+{
+  title: "Git Workshop",
+  info: "Touched on the history of git and its relevance. Had hands-on session for students to practice basic git commands such as add, push, pull and commit.",
+  month: "Sept",
+  day: "09",
+  time: "2 pm",
+  img: "url(https://www.si.com/.image/t_share/MTY4MTkyMjczODM4OTc0ODQ5/cfp-trophy-deitschjpg.jpg)"
+}
+]
+*/
+</script>
+
 <template>
   <div class="text-center">
     <div class="text-3xl my-6">Upcoming Workshops</div>
-    <div class="text-gray-600">No scheduled workshops yet...</div>
+    <div class="text-gray-600 pb-6">No scheduled workshops yet...</div>
+
+    <!-- div v-for="event in events">
+      <EventCard :title="event.title" :month="event.month" :day="event.day" :img="event.img" :info="event.info"
+        :time="event.time" />
+    </div-->
+
   </div>
 </template>

src/views/Timeline/Timeline.vue

@@ -0,0 +1,34 @@
+<script setup>
+/*
+import TimelineItem from './TimelineItem.vue';
+
+const sessions = [
+{
+  org: "Google Developers' Student Club",
+  title: "Git Workshop",
+  date: "Sept 9, 2023",
+  desc: "Touched on the history of git and its relevance. Had hands-on session for students to practice basic git commands such as add, push, pull and commit."
+},
+]
+*/
+</script>
+
+<template>
+  <div class="relative font-inter antialiased mt-6">
+    <div class="text-center text-4xl">Workshop Sessions Timeline</div>
+    <div class="text-center py-3 text-slate-500">Data not available yet...</div>
+    <!-- main class="relative min-h-fit flex flex-col justify-center overflow-hidden">
+      <div class="w-full max-w-6xl mx-auto px-4 md:px-6 py-24">
+        <div class="flex flex-col justify-center divide-y divide-slate-200 [&>*]:py-16">
+          <div class="w-full max-w-3xl mx-auto">
+            <div class="-my-24">
+              <div class="relative pl-8 sm:pl-32 py-6 group" v-for="session in sessions">
+                <TimelineItem :org="session.org" :title="session.title" :date="session.date" :desc="session.desc" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main -->
+  </div>
+</template>

src/views/Timeline/TimelineItem.vue

@@ -0,0 +1,37 @@
+<script setup>
+defineProps({
+  org: String, // organisation
+  title: String, // workshop title
+  date: String, // date workshop took place
+  desc: String, // description
+});
+</script>
+
+<template>
+  <!-- Organisation label :: purple -->
+  <div class="font-caveat font-medium text-2xl text-indigo-500 mb-1 sm:mb-0">
+    {{ org }}
+  </div>
+
+  <!-- Vertical line (::before) ~ Date ~ Title ~ Circle marker (::after) -->
+  <div class="flex flex-col sm:flex-row items-start mb-1 group-last:before:hidden 
+      before:absolute before:left-2 sm:before:left-0 before:h-full before:px-px 
+      before:bg-slate-300 sm:before:ml-[6.5rem] before:self-start before:-translate-x-1/2 
+      before:translate-y-3 after:absolute after:left-2 sm:after:left-0 after:w-2 after:h-2 
+      after:bg-indigo-600 after:border-4 after:box-content after:border-slate-50 after:rounded-full 
+      sm:after:ml-[6.5rem] after:-translate-x-1/2 after:translate-y-1.5">
+    <time class="sm:absolute left-0 translate-y-0.5 inline-flex items-center justify-center 
+        text-xs font-semibold uppercase w-20 h-6 mb-3 sm:mb-0 text-emerald-600 bg-emerald-100 
+        rounded-full">
+      {{ date }}
+    </time>
+    <div class="text-xl font-bold text-slate-900">
+      {{ title }}
+    </div>
+  </div>
+
+  <!-- Content -->
+  <div class="text-slate-500">
+    {{ desc }}
+  </div>
+</template>

tailwind.config.js

@@ -7,6 +7,8 @@ export default {
     extend: {
       fontFamily: {
         sans: [...defaultTheme.fontFamily.sans],
+        inter: ['Inter', 'sans-serif'],
+        caveat: ['Caveat', 'cursive'],
       },
     },
     container: {