creating time line component

src/components/Card.astro

@@ -4,7 +4,7 @@ const { title, img, desc, url, badge } = Astro.props;
 
 <div class="md:w-1/3 w-full">
   <a href={url} target="_blank">
-    <div class="card bg-base-100 transition ease-in-out hover:shadow-xl m-6 hover:scale-105">
+    <div class="card bg-base-100 transition ease-in-out hover:shadow-xl mx-6 my-2 hover:scale-105">
       <figure><img src={img} alt="Shoes" /></figure>
       <div class="card-body">
         <h2 class="card-title">

src/components/Header.astro

@@ -1,11 +1,3 @@
----
-import HeaderLink from "./HeaderLink.astro";
-import { SITE_TITLE } from "../config";
----
-
-<!-- <h2>
-		{SITE_TITLE}
-	</h2> -->
 <div
   class="sticky lg:hidden top-0 z-30 flex h-16 w-full justify-center bg-opacity-90 backdrop-blur transition-all duration-100 bg-base-100 text-base-content shadow-sm"
 >

src/components/SideBar.astro

@@ -10,10 +10,10 @@
     </div>
     <ul>
       <!-- Sidebar content here -->
-      <li><a href="/">About</a></li>
+      <li><a href="/">Home</a></li>
-      <li><a>Projects</a></li>
+      <li><a href="/projects">Projects</a></li>
       <li><a href="/blog">Blog</a></li>
-      <li><a>CV</a></li>
+      <li><a href="/cv">CV</a></li>
       <li><a>Comunity</a></li>
       <li><a>Support my Work</a></li>
       <li><a>Contact</a></li>

src/components/cv/TimeLine.astro

@@ -0,0 +1,17 @@
+---
+const { title, subtitle, desc } = Astro.props;
+---
+
+<div class="flex">
+  <div class="education__time">
+    <span class="w-4 h-4 bg-primary block rounded-full mt-1"></span>
+    <span class="education__line bg-primary block h-full w-[2px] translate-x-[7px]"></span>
+  </div>
+  <div class="experience__data bd-grid px-5">
+    <h3 class="font-semibold mb-1">{title}</h3>
+    <span class="font-light text-sm">{subtitle}</span>
+    <p class="my-2">
+      {desc}
+    </p>
+  </div>
+</div>

src/pages/cv.astro

@@ -0,0 +1,19 @@
+---
+import PageLayout from "../layouts/Page.astro";
+import TimeLineElement from "../components/cv/TimeLine.astro";
+---
+
+<PageLayout>
+  <div class="time-line-container grid gap-4">
+    <TimeLineElement
+      title="Web Developer at Integral Oil Drilling System 2.0"
+      subtitle="From 2015 to 2016 at CEDIN, UCI, Habana, Cuba"
+      desc="System of steps of process of perforation of oil wells. Outspread in the direction of Intervención of Wells and various wells of drilling of the Occident of the country. Generate reports and graphs of process of perforation making use of data mining. Technologies: Php,Symfony 2.7 , Subversión, PostgreSQL, HigthChart, Ireport, Boostrap 2, JQuery, HTML,CSS, JavaScript"
+    />
+    <TimeLineElement
+      title="Full Stack Dev, Software Architect and Project Leader at Integral Oil Drilling System 3.0"
+      subtitle="From 2016 to 2017 at CEDIN, UCI, Habana, Cuba"
+      desc="System of steps of process of perforation of oil wells. Outspread in the direction of Intervención of Wells and various wells of drilling of the Occident of the country. Generate reports and graphs of process of perforation making use of data mining. Technologies: Php,Symfony 2.8 , Gitlab, PostgreSQL, HigthChart, Boostrap 2, JQuery, HTML,CSS, JavaScript"
+    />
+  </div>
+</PageLayout>

src/pages/projects.astro

@@ -0,0 +1,35 @@
+---
+import PageLayout from "../layouts/Page.astro";
+import Card from "../components/Card.astro";
+---
+
+<PageLayout>
+  <div class="flex flex-wrap mb-5 mt-3">
+    <Card
+      title="WeekTodo"
+      img="https://weektodo.me/assets/images/weektodo-opengraph-1200x630.png"
+      desc="Free minimalist weektly planner focused in privacy."
+      url="https://weektodo.me/"
+      badge="NEW"
+    />
+    <Card
+      title="Productiveness"
+      img="https://softr-prod.imgix.net/applications/f988aa05-d312-4aa6-812e-832bdc75388d/assets/d2c87a17-4fc7-455f-a656-5e4cdbe7aa71.png"
+      desc="Discover the best productivity apps in the market."
+      url="https://www.productiveness.net/"
+    />
+    <Card
+      title="Zen Twitter"
+      img="https://lh3.googleusercontent.com/NGt846Flv6wyBSlYzfJkFHAJ8mcG1pf4M-InYeZnp4VsIk6JKk8nZ2ZKskDlvHDAEYr_biSO8jtXIWI83OXD5RNXWg=w640-h400-e365-rj-sc0x00ffffff"
+      desc="Disable Twitter vanity metrics, notifications and distractions."
+      url="https://chrome.google.com/webstore/detail/zen-twitter/nlkendkabgopehmlmohfbkgkjjdjepnb"
+      badge="FOSS"
+    />
+    <Card
+    title="Qvalive"
+    img="https://qvalive.com/assets/images/qvalive-splash.jpg"
+    desc="El espacio de transmisiones cubanas en vivo por internet."
+    url="https://qvalive.com/"
+  />
+  </div>
+</PageLayout>

src/styles/global.css

@@ -0,0 +1,3 @@
+.time-line-container > div:last-child .education__time > .education__line{
+display: none;
+}