chore: fix some designs on portfolio

app/page.tsx

@@ -3,6 +3,7 @@ import Link from "next/link";
 
 import { mySocial } from "data/social";
 import { Social } from "types/index";
+import { Badge } from "components/badge";
 
 const about = [
   "Experienced full-stack engineer specializing in frontend development, with a track record of over 5 years. Possessing a strong passion for design, I excel at delivering pixel-perfect UIs with impeccable attention to detail and creating awe-inspiring UX. I am committed to providing exceptional value for your investment and thrive on leveraging technology to fulfill business requirements.",
@@ -25,23 +26,18 @@ export default function Page() {
               Chidi Orji
             </p>
             <p className="text-2xl">Software Engineer</p>
-            <div className="">
+            <div className="flex items-center">
               {[
                 "React/Next.js (TypeScript)",
                 "Node.js/Express",
                 "Django/Python",
               ].map((t, idx) => {
                 return (
-                  <span
+                  <Badge
                     key={t}
-                    className={clsx(
-                      { "ml-1": idx > 0 },
-                      "mr-1 my-1",
-                      "inline-flex items-center rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20"
-                    )}
-                  >
-                    {t}
-                  </span>
+                    text={t}
+                    containerClassNames={clsx({ "ml-1": idx > 0 })}
+                  />
                 );
               })}
             </div>
@@ -51,11 +47,11 @@ export default function Page() {
             <p className="text-lg leading-8 text-gray-600">{about[0]}</p>
 
             <div className="mt-10 flex items-center gap-x-6">
-              {mySocial.map((social: Social, idx: number) => {
+              {mySocial.map((social: Social) => {
                 const src = `${social.badgeUrl}&link=${social.socialUrl}`;
 
                 return (
-                  <span key={idx}>
+                  <span key={social.title}>
                     <Link
                       passHref
                       href={social.socialUrl}
@@ -83,7 +79,6 @@ export default function Page() {
           />
         </div>
       </div>
-      {/* <div className="absolute inset-x-0 bottom-0 -z-10 h-24 bg-gradient-to-t from-white sm:h-32" /> */}
     </div>
   );
 }

app/portfolio/page.tsx

@@ -43,9 +43,5 @@ async function getPhotos() {
 }
 
 export default async function ProjectsPage() {
-  return (
-    <>
-      <ProjectList projectImages={await getPhotos()} />
-    </>
-  );
+  return <ProjectList projectImages={await getPhotos()} />;
 }

components/app-header.tsx

@@ -27,7 +27,7 @@ export function AppHeader() {
           <Link href={"/"} passHref className="-m-1.5 p-1.5">
             <span className="sr-only">Chidi Orji</span>
             <img
-              className="h-8 w-auto rounded full"
+              className="h-8 w-auto rounded-md"
               src="/images/headshot.JPG"
               alt=""
             />
@@ -96,7 +96,7 @@ export function AppHeader() {
                   <a
                     key={item.name}
                     href={item.href}
-                    className="-mx-3 flex items-center rounded-lg px-3 py-2 text-base font-semibold leading-7 text-white hover:bg-gray-800"
+                    className="-mx-3 flex items-center rounded-md px-3 py-2 text-base font-semibold leading-7 text-white hover:bg-gray-800"
                   >
                     {pathName?.includes(item.href) && (
                       <div className="bg-white w-1.5 h-1.5 mr-3 rounded"></div>

components/badge.tsx

@@ -0,0 +1,24 @@
+import clsx from "clsx";
+
+type Props = {
+  text: string;
+  onBadgeClick?: () => void;
+  containerClassNames?: string;
+};
+
+export const Badge = (props: Props) => {
+  const { onBadgeClick, text, containerClassNames = "" } = props;
+  return (
+    <p
+      onClick={onBadgeClick}
+      className={clsx(
+        { "cursor-pointer": onBadgeClick },
+        "text-center mt-1 w-fit",
+        "inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-sm font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10",
+        containerClassNames,
+      )}
+    >
+      {text}
+    </p>
+  );
+};

components/project-list.tsx

@@ -6,6 +6,7 @@ import { portfolio_projects, techStacks } from "data/portfolio";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import type { ProjectNameAndImage, Project as ProjectType } from "types/index";
+import { Badge } from "./badge";
 
 const intro = [
   "Below is a list of my projects. I have worked with quite a number of technologies before settling for a full-stack developer role. You can filter by the technologies shown on the right.",
@@ -85,9 +86,14 @@ export const ProjectList = ({ projectImages }: Props) => {
         <div className="bg-white px-1 flex flex-col h-40 md:h-full overflow-y-auto md:overflow-y-visible">
           {techStacks.map((stack) => {
             return (
-              <p
+              <Badge
                 key={stack}
-                onClick={() => {
+                text={stack}
+                containerClassNames={clsx(
+                  { "text-md font-bold": stack === tch },
+                  { "text-xs font-medium": stack !== tch }
+                )}
+                onBadgeClick={() => {
                   if (stack === tch) {
                     router.push(pathname as unknown as string);
                   } else {
@@ -96,15 +102,7 @@ export const ProjectList = ({ projectImages }: Props) => {
                     );
                   }
                 }}
-                className={clsx(
-                  "cursor-pointer text-center my-1",
-                  "rounded-md bg-green-50 px-2 py-1 text-green-700 ring-1 ring-inset ring-green-600/20",
-                  { "text-md font-bold": stack === tch },
-                  { "text-xs font-medium": stack !== tch }
-                )}
-              >
-                {stack}
-              </p>
+              />
             );
           })}
         </div>

components/project.tsx

@@ -3,11 +3,12 @@
 import clsx from "clsx";
 import { useState } from "react";
 import Link from "next/link";
+import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/outline";
 
 import type { Project as ProjectType, Screenshot } from "types/index";
 import { SectionHeader } from "./section-header";
 import Modal from "./Modal";
-import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/outline";
+import { Badge } from "./badge";
 
 type Props = {
   images: Screenshot[];
@@ -37,16 +38,11 @@ export const Project = (props: Props) => {
           <div className="mt-5">
             {projectItem.stack.map((st, idx) => {
               return (
-                <p
+                <Badge
                   key={st}
-                  className={clsx(
-                    { "ml-1": idx !== 0 },
-                    "my-1 mr-1",
-                    "inline-flex items-center rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20"
-                  )}
-                >
-                  {st}
-                </p>
+                  text={st}
+                  containerClassNames={clsx({ "mx-1 my-1": idx !== 0 })}
+                />
               );
             })}
           </div>
@@ -75,9 +71,14 @@ export const Project = (props: Props) => {
               </h2>
               <p className="mb-2">{selectedProject.description}</p>
 
-              <p className="mb-2">
-                Built with {selectedProject.stack?.join(", ")}
-              </p>
+              <div className="mb-2 flex flex-wrap items-center">
+                Made with{" "}
+                {selectedProject.stack?.map((st) => {
+                  return (
+                    <Badge key={st} text={st} containerClassNames={"ml-1"} />
+                  );
+                })}
+              </div>
 
               <h3 className="text-l font-semibold leading-6 text-gray-700">
                 Project links

components/section-header.tsx

@@ -14,7 +14,7 @@ export const SectionHeader = (props: Props) => {
   return (
     <div className="flex gap-x-4">
       <img
-        className="h-12 w-12 flex-none rounded-full bg-gray-50"
+        className="h-12 w-12 flex-none rounded-md bg-gray-50"
         src={imageURl}
         alt=""
       />

data/portfolio.tsx

@@ -42,7 +42,7 @@ const portfolio_projects: Project[] = [
   },
   {
     name: "Identify",
-    stack: ["React", "Redux"],
+    stack: ["React", "Redux", "TypeScript"],
     links: [
       {
         name: "Home page",