Creating horizontal Card and Project Page

src/components/Card.astro

@@ -4,7 +4,7 @@ const { title, img, desc, url, badge, tags } = 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 mx-6 my-2 hover:scale-105">
+    <div class="card bg-base-100 transition ease-in-out hover:shadow-xl mx-6 my-2 hover:scale-[102%]">
       <figure><img src={img} alt="Shoes" /></figure>
       <div class="card-body">
         <h2 class="card-title">

src/components/Footer.astro

@@ -2,7 +2,7 @@
 const today = new Date();
 ---
 
-<footer class="footer footer-center block mb-5">
+<footer class="footer footer-center block mb-5 pt-10">
   <div class="pb-2">
     &copy; {today.getFullYear()} Manuel Ernesto
   </div>

src/components/HorizontalCard.astro

@@ -4,8 +4,8 @@ const { title, img, desc, url, badge, tags } = Astro.props;
 
 <div class="rounded-lg bg-base-100 hover:shadow-xl transition ease-in-out hover:scale-[102%]">
   <a href={url} target="_blank">
-    <div class="hero-content flex-col lg:flex-row">
+    <div class="hero-content flex-col md:flex-row">
-      <img src={img} class="max-w-xs md:max-w-[12rem] rounded-lg" />
+      <img src={img} class="max-w-full md:max-w-[12rem] rounded-lg" />
       <div class="grow">
         <h1 class="text-1xl font-bold">
           {title}

src/components/SideBar.astro

@@ -14,7 +14,6 @@
       <li><a href="/projects">Projects</a></li>
       <li><a href="/blog">Blog</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>
     </ul>

src/pages/index.astro

@@ -1,6 +1,6 @@
 ---
 import PageLayout from "../layouts/Page.astro";
-import Card from "../components/Card.astro";
+import HorizontalCard from "../components/HorizontalCard.astro";
 
 import { SITE_TITLE, SITE_DESCRIPTION } from "../config";
 ---
@@ -15,37 +15,36 @@ import { SITE_TITLE, SITE_DESCRIPTION } from "../config";
     </div>
     <div class="py-2">
       <text>
-        I am a cuban Software Engineer and entrepreneurship. I work creating software solutions that solve problems in a simple way and sharing what I learn along the way. I like
+        I am a cuban Software Engineer and entrepreneurship. I work creating software solutions that solve problems in a
-        minimalism, Open-Source, good music and masareales.</text
+        simple way and sharing what I learn along the way. I like minimalism, Open-Source, good music and masareales.</text
       >
     </div>
   </div>
 
   <div>
-    <div class="text-3xl w-full font-bold  mb-5">My last projects {"</>"}</div>
+    <div class="text-3xl w-full font-bold mb-5">My last projects {"</>"}</div>
-  </div>
-
-  <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"
-    />
   </div>
 
+  <HorizontalCard
+    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"
+  />
+  <div class="divider my-0"></div>
+  <HorizontalCard
+    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/"
+  />
+  <div class="divider my-0"></div>
+  <HorizontalCard
+    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"
+  />
 </PageLayout>

src/pages/projects.astro

@@ -5,7 +5,7 @@ import HorizontalCard from "../components/HorizontalCard.astro";
 
 <PageLayout>
   <div>
-    <div class="text-3xl w-full font-bold mb-5">My last projects {"</>"}</div>
+    <div class="text-3xl w-full font-bold mb-5">Applications</div>
   </div>
 
   <HorizontalCard
@@ -22,13 +22,24 @@ import HorizontalCard from "../components/HorizontalCard.astro";
     desc="Discover the best productivity apps in the market."
     url="https://www.productiveness.net/"
   />
+
   <div class="divider my-0"></div>
+  <HorizontalCard
+    title="Qvalive"
+    img="https://qvalive.com/assets/images/qvalive-splash.jpg"
+    desc="QvaLive es el espacio de las transmisiones cuabanas en vivo por internet."
+    url="https://qvalive.com/"
+  />
+
+  <div>
+    <div class="text-3xl w-full font-bold mb-5 mt-10">Chrome Extensions</div>
+  </div>
+
   <HorizontalCard
     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"
-    tags={["Chrome Extension", "Free"]}
   />
 </PageLayout>