add projects tab

dronavallipranav · Jan 21, 2024 · 2495bbf · 2495bbf
1 parent 82d2e94
commit 2495bbf
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 1 deletion.
diff --git a/src/components/About.astro b/src/components/About.astro
@@ -82,7 +82,7 @@ import projects from '../data/projects.js';
 
 
 <div>
-  {projects.map(project => (
+  {projects.slice(0,2).map(project => (
       <a href={project.link} target="_blank" rel="noopener noreferrer" class="block mb-6 shadow-lg hover:shadow-xl transition-transform duration-300 ease-in-out transform hover:scale-105">
           <div class="parallax flex dark:bg-containerGray bg-gray-50 px-2 py-4 rounded-xl overflow-hidden">
               <div class="w-1/3 border-r rounded-lg border-black border-2">

diff --git a/src/components/navbar.astro b/src/components/navbar.astro
@@ -14,6 +14,7 @@ import DarkToggle from './darkToggle.astro';
       <a href="/" class="text-gray-800 hover:text-black p-2 dark:text-titlePurple transition-all duration-300 hover:bg-gray-200 rounded-lg">Home</a>
       <a href="/resume.pdf" target="_blank" class="text-gray-800 dark:text-titlePurple hover:text-black p-2 transition-all duration-300 hover:bg-gray-200 rounded-lg">Resume</a>
       <a href="/blog" class="text-gray-800 hover:text-black p-2 dark:text-titlePurple transition-all duration-300 hover:bg-gray-200 rounded-lg">Blog</a>
+      <a href="/projects" class="text-gray-800 hover:text-black p-2 dark:text-titlePurple transition-all duration-300 hover:bg-gray-200 rounded-lg">Projects</a>
     </nav>
 
     <div class="flex space-x-4 mt-auto justify-center items-center"> 

diff --git a/src/pages/projects.astro b/src/pages/projects.astro
@@ -0,0 +1,32 @@
+---
+import { getCollection } from "astro:content";
+import projects from "../data/projects.js";
+import Layout from '../layouts/Layout.astro';
+---
+<Layout>
+    <section id="blogs" class="flex overflow-x-hidden pt-5">
+        <div class="container mx-auto flex justify-center pb-20 text-lg leading-relaxed md:w-[80%] lg:w-[60%] flex-col items-start pt-3 space-y-3">
+          <div class="flex flex-col items-start pt-3 pb-3 space-y-3">
+            <h2 class="title-font dark:text-gray-100 dark:text-opacity-80 sm:text-4xl text-3xl mb-4 font-medium text-black py-2">
+              Projects
+            </h2>
+    <div>
+        {projects.map(project => (
+            <a href={project.link} target="_blank" rel="noopener noreferrer" class="block mb-6 shadow-lg hover:shadow-xl transition-transform duration-300 ease-in-out transform hover:scale-105">
+                <div class="parallax flex dark:bg-containerGray bg-gray-50 px-2 py-4 rounded-xl overflow-hidden">
+                    <div class="w-1/3 border-r rounded-lg border-black border-2">
+                        <img src={project.image} alt={project.title} class="w-full rounded-md h-full object-cover"/>
+                    </div>
+                    <div class="w-2/3 p-6">
+                        <h3 class="text-xl dark:text-titlePurple dark:text-opacity-80 font-semibold mb-2">{project.title} <b class="dark:text-opacity-80 dark:text-gray-100">{project.status}</b></h3>
+                        <p class="dark:text-gray-400 dark:text-opacity:70 text-gray-600 hidden lg:block">{project.description}</p>
+                    <p class="dark:text-gray-400 dark:text-opacity:70 text-gray-600 hidden md:block lg:hidden">{project.description.substring(0, 100)}...</p>
+                    <p class="dark:text-gray-400 dark:text-opacity:70 text-gray-600 hidden sm:block lg:hidden md:hidden">{project.description.substring(0, 40)}...</p>
+                    </div>
+                </div>
+            </a>
+        ))}
+    </div>
+</div>
+</section>
+</Layout>