project showcase

Author: MuhammadPen

src/components/projectShowcase.astro

@@ -2,37 +2,49 @@
 interface Props {
   title: string;
   link: string;
-  slides: { image: string; description: string }[];
+  slides: { image?: string; description?: string }[];
   color: string;
 }
 
 const { title, link, slides, color } = Astro.props;
 ---
 
 <div class="flex flex-col text-right gap-2">
-  <a
-    href={link}
-    target="_blank"
-    class="external-link hover:underline text-2xl md:text-3xl">{title}</a
-  >
+  <div>
+    <a
+      href={link}
+      target="_blank"
+      class="external-link hover:underline text-2xl md:text-3xl">{title}</a
+    >
+  </div>
   <div
-    class="flex md:flex-row flex-col overflow-x-auto border-t"
+    class="project-showcase-container flex md:flex-row flex-col border-t"
     style={`background-color: ${color}20`}
   >
     {
-      slides.map((slide) => {
+      slides.map((slide, index) => {
         return (
-          <div class="flex md:flex-row flex-col-reverse w-full md:mr-16 mb-16 gap-x-96 gap-y-10 border-b">
-            <div class="border-r p-5">
-              <img
-                class="md:min-w-[768px] md:min-h-[425px] rounded-sm"
-                src={slide.image}
-                alt={slide.description}
-              />
-            </div>
-            <div class="md:min-w-[568px] md:min-h-[425px] text-2xl text-right leading-10 md:leading-13">
-              {slide.description}
-            </div>
+          <div class="project-showcase-content flex md:flex-row flex-col-reverse md:mr-16 mb-16 gap-x-96 gap-y-10 border-b">
+            {slide.image && (
+              <div class="md:border-r p-5">
+                <img
+                  class="md:min-w-[768px] md:min-h-[425px] rounded-sm"
+                  src={slide.image}
+                  alt={slide.description}
+                />
+              </div>
+            )}
+            {slide.description && (
+              <div class="relative md:min-w-[568px] md:min-h-[425px] text-2xl text-right leading-10 md:leading-12 whitespace-pre-line">
+                {slide.description}
+
+                {slides.length > 1 && index < slides.length - 2 && (
+                  <div class="hidden md:flex text-4xl absolute bottom-10 right-0 animate-wiggle">
+                    →
+                  </div>
+                )}
+              </div>
+            )}
           </div>
         );
       })
@@ -46,4 +58,15 @@ const { title, link, slides, color } = Astro.props;
     font-size: 0.75em;
     margin-right: 0.25em;
   }
+
+  .project-showcase-container {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE/Edge */
+  }
+
+  .project-showcase-container::-webkit-scrollbar {
+    display: none; /* Chrome/Safari */
+  }
 </style>

src/pages/projects.astro

@@ -12,13 +12,30 @@ import ProjectShowcase from "../components/projectShowcase.astro";
       slides={[
         {
           image: "/1mindFirst.png",
-          description: `1mind is an AI agent company. They specialize in creating both realistic and unrealistic ai avatars which can be trained
-on your voice and mannerisms in few minutes. They can be used as sales representatives, information providers,
-customer support agents and pretty much anywhere you would want customer interaction. `,
+          description: `1mind is an AI agent company.
+They specialize in creating both realistic and unrealistic ai avatars which can be trained
+on your voice and mannerisms in few minutes.
+They can be used as sales representatives, information providers, customer support agents and pretty much anywhere you would want customer interaction. `,
         },
         {
           image: "/1mindSecond.png",
-          description: `I worked here as a fullstack engineer and cloud architect. helped create their zoom integration. built and managed parts of their aws and gcp cloud infrastructure. built and optimized apis. carried out migration from aws to gcp. worked on their admin dashboard and control panel.`,
+          description: `I worked here as a fullstack engineer and cloud architect.
+          helped create their zoom integration.
+          built and managed parts of their aws and gcp cloud infrastructure.
+          built and optimized apis.
+          carried out migration from aws to gcp.
+          worked on their admin dashboard and control panel.`,
+        },
+        {
+          description: `tech i used:`,
+        },
+        {
+          description: `typescript.bash.
+aws.gcp.pulumi.docker.
+nodejs.fastify.express.
+react.styled components.tailwind.mui.
+turborepo.git.workflows.
+openai.anthropic.`,
         },
       ]}
     />

src/styles/global.css

@@ -1,9 +1,22 @@
 @import "tailwindcss";
 
+@theme {
+  --animate-wiggle: wiggle 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+  @keyframes wiggle {
+    0%,
+    100% {
+      transform: translateX(3px);
+    }
+    50% {
+      transform: translateX(-3px);
+    }
+  }
+}
+
 body {
   /* background-color: #ffffff; */
   color: #000;
-
+  text-transform: lowercase;
   /* cursor: none; */
 }