Unify portfolio card layout and action button placement

src/components/project.tsx

@@ -11,7 +11,7 @@ import {
   FaPersonChalkboard,
 } from "react-icons/fa6";
 
-import { Card } from "@heroui/react";
+import { Card, Separator } from "@heroui/react";
 
 import { IconLink } from "@/components/icon-link";
 import { Areas, Tools } from "@/components/skills";
@@ -67,13 +67,10 @@ const ProjectView = React.memo(({ project }: { project: Project }) => {
   return (
     <Card className="card-container h-full">
       <Card.Header className="flex justify-between items-start p-0 bg-transparent">
-        <div className="flex flex-row items-center gap-2">
+        <div className="flex justify-between w-full">
           <h3 className="card-title text-xl">{project.name}</h3>
-          <div className="flex flex-row gap-1">
-            <Tools tools={project.tools} compact />
-          </div>
+          <Links links={project.links} />
         </div>
-        <Links links={project.links} />
       </Card.Header>
 
       <Card.Content className="p-0 mt-2 bg-transparent flex-grow">
@@ -83,13 +80,16 @@ const ProjectView = React.memo(({ project }: { project: Project }) => {
       </Card.Content>
 
       <Card.Footer className="flex flex-row justify-between items-center mt-6 p-0 bg-transparent">
-        <div className="flex flex-row items-center gap-4">
-          <Areas areas={project.tags} />
-          <ul className="flex flex-row gap-2 text-zinc-400 text-sm">
+        {/* <ul className="flex flex-row gap-2 text-zinc-400 text-sm">
             {project.roles.map((role) => (
               <li key={role}>{role}</li>
             ))}
-          </ul>
+          </ul> */}
+
+        <div className="flex flex-row items-center gap-2">
+          <Areas areas={project.tags} />
+          <Separator orientation="vertical" />
+          <Tools tools={project.tools} compact />
         </div>
         <span className="text-zinc-400 text-sm">
           {new Date(project.date).getFullYear()}

src/components/publication.tsx

@@ -6,10 +6,11 @@
   FaPersonChalkboard,
   FaQuoteLeft,
   FaLink,
+  FaCopy,
+  FaCheck,
 } from "react-icons/fa6";
-import { SiScopus } from "react-icons/si";
 
-import { Popover, Button, Card } from "@heroui/react";
+import { Popover, Button, Card, Separator, Tooltip } from "@heroui/react";
 
 import { IconLink } from "@/components/icon-link";
 import { Areas, Tools } from "@/components/skills";
@@ -30,6 +31,7 @@
   year = {${publication.year}}
 }`;
 
+  const [copied, setCopied] = React.useState(false);
   return (
     <Popover>
       <Popover.Trigger>
@@ -45,82 +47,98 @@
         placement="top"
         className="dark:bg-slate-800 rounded-3xl"
       >
-        <Popover.Dialog className="p-4 max-w-md bg-white dark:bg-slate-900 rounded-lg border border-slate-200 dark:border-slate-800 shadow-xl">
-          <pre className="text-xs font-mono whitespace-pre-wrap overflow-x-auto text-slate-800 dark:text-slate-200 bg-slate-50 dark:bg-slate-950 p-3 rounded border border-slate-100 dark:border-slate-900">
-            {bibtex}
-          </pre>
-          <div className="mt-3 flex justify-end">
+        <div className="flex flex-row justify-end text-muted-foreground p-2">
+          {copied && <span className="flex flex-row text-sm font-medium p-2 gap-1"><FaCheck className="size-4 text-green-500" /> Copied</span>}
+          <Tooltip>
             <Button
               size="sm"
-              variant="primary"
+              variant="ghost"
               onPress={() => {
                 navigator.clipboard.writeText(bibtex);
+                setCopied(true);
+                setTimeout(() => setCopied(false), 2000);
               }}
+              aria-label="Copy BibTeX to clipboard"
+              isIconOnly
+              className="text-muted-foreground hover:text-primary transition-colors"
             >
-              Copy to Clipboard
+              <FaCopy className="size-4" />
             </Button>
-          </div>
-        </Popover.Dialog>
+            <Tooltip.Content>
+              <Tooltip.Arrow />
+              Copy to clipboard
+            </Tooltip.Content>
+          </Tooltip>
+        </div>
+        <pre className="text-sm font-mono whitespace-pre-wrap overflow-x-auto text-slate-800 dark:text-slate-200 bg-slate-50 dark:bg-slate-950 p-3 rounded border border-slate-100 dark:border-slate-900">
+          {bibtex}
+        </pre>
       </Popover.Content>
-    </Popover>
+    </Popover >
   );
 };
 
-const Links = ({ links }: { links: PublicationLinks }) => {
+const Links = ({
+  links,
+  compact = false,
+}: {
+  links: PublicationLinks;
+  compact?: boolean;
+}) => {
   return (
-    <div className="flex flex-row flex-wrap gap-x-4 gap-y-2 items-center justify-end">
+    <div
+      className={`flex flex-row flex-wrap gap-x-4 gap-y-2 items-center ${compact ? "" : "justify-end"}`}
+    >
       {links.fulltext && (
         <IconLink href={links.fulltext} title="Read">
           <FaFileLines className="size-4" />
-          <span className="text-sm font-medium">Read</span>
+          {!compact && <span className="text-sm font-medium">Read</span>}
         </IconLink>
       )}
       {links.presentation && (
         <IconLink href={links.presentation} title="Presentation">
           <FaPersonChalkboard className="size-4" />
-          <span className="text-sm font-medium">Presentation</span>
+          {!compact && (
+            <span className="text-sm font-medium">Slides</span>
+          )}
         </IconLink>
       )}
       {links.doi && (
         <IconLink href={`https://dx.doi.org/${links.doi}`} title="DOI">
           <FaLink className="size-4" />
-          <span className="text-sm font-medium">DOI</span>
+          {!compact && <span className="text-sm font-medium">DOI</span>}
         </IconLink>
       )}
-      {links.scopus && (
+      {/* {links.scopus && (
         <IconLink href={links.scopus} title="Scopus">
           <SiScopus className="size-4" />
-          <span className="text-sm font-medium">Scopus</span>
+          {!compact && <span className="text-sm font-medium">Scopus</span>}
         </IconLink>
-      )}
+      )} */}
     </div>
   );
 };
 
 const PublicationView = React.memo(
   ({
     publication,
-    featured = false,
   }: {
     publication: Publication;
-    featured?: boolean;
   }) => {
+    const isFeatured = publication.featured;
     return (
       <Card
-        className={`card-container h-full ${featured ? "md:col-span-2 xl:col-span-2 2xl:col-span-3" : ""}`}
+        className={`card-container h-full ${isFeatured ? "md:col-span-2 xl:col-span-2 2xl:col-span-3" : ""}`}
       >
         <Card.Header className="flex justify-between items-start gap-4 p-0 bg-transparent">
           <div className="flex flex-col gap-1">
-            <h3 className={`card-title ${featured ? "text-2xl" : "text-xl"}`}>
+            <h3 className={`card-title ${isFeatured ? "text-2xl" : "text-xl"}`}>
               {publication.title}
             </h3>
             <p className="text-slate-700 dark:text-slate-300 font-medium">
               {publication.authors.join(", ")}
             </p>
           </div>
-          <div className="flex flex-row gap-1 shrink-0">
-            <Tools tools={publication.skills} compact />
-          </div>
         </Card.Header>
 
         <Card.Content className="p-0 mt-1 bg-transparent overflow-visible">
@@ -130,15 +148,15 @@
           <div className="flex-grow"></div>
         </Card.Content>
 
-        <Card.Footer className="flex flex-col gap-4 mt-6 p-0 bg-transparent overflow-visible">
-          <div className="flex flex-row flex-wrap justify-between items-center gap-4 w-full">
-            <div className="flex flex-row items-center gap-4">
-              <Areas areas={publication.tags} />
-              <CiteButton publication={publication} />
-            </div>
-            <div className="flex-grow flex justify-end">
-              <Links links={publication.links} />
-            </div>
+        <Card.Footer className="flex flex-col md:flex-row justify-between items-start md:items-center gap-2 bg-transparent overflow-visible">
+          <div className="flex flex-row items-center gap-2">
+            <Areas areas={publication.tags} />
+            <Separator orientation="vertical" />
+            <Tools tools={publication.skills} compact />
+          </div>
+          <div className="flex flex-row items-center gap-4">
+            <CiteButton publication={publication} />
+            <Links links={publication.links} />
           </div>
         </Card.Footer>
       </Card>

src/components/section-item-card.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import Image from "next/image";
+
 import React from "react";
 
 interface SectionItemCardProps {
@@ -25,12 +26,7 @@ export const SectionItemCard = ({
     <div className="transition-all duration-700">
       <a href={href} target="_blank" rel="noopener noreferrer">
         <div className="section-item p-3">
-          <Image
-            src={image.src}
-            alt={image.alt}
-            width={150}
-            height={150}
-          />
+          <Image src={image.src} alt={image.alt} width={150} height={150} />
           <p className="text-xl md:text-2xl text-foreground">{title}</p>
           <p className="dark:text-primary-dark text-primary">{subtitle}</p>
           <p className="text-secondary">{footer}</p>

src/components/sections/certifications.tsx

@@ -2,8 +2,8 @@
 
 import certificationsData from "@/data/certifications";
 
-import { SectionItemCard } from "../section-item-card";
 import { FilterableSection } from "../filterable-section";
+import { SectionItemCard } from "../section-item-card";
 
 export const CertificationsSection = () => {
   return (
@@ -15,7 +15,10 @@ export const CertificationsSection = () => {
         <SectionItemCard
           key={certificate.title}
           href={certificate.link}
-          image={{ src: certificate.badge, alt: `Badge for ${certificate.title}` }}
+          image={{
+            src: certificate.badge,
+            alt: `Badge for ${certificate.title}`,
+          }}
           title={certificate.title}
           subtitle={certificate.organization.name}
           footer={certificate.date}

src/components/sections/publications.tsx

@@ -27,7 +27,6 @@ export const PublicationsSection = () => {
                   <PublicationView
                     key={publication.id}
                     publication={publication}
-                    featured
                   />
                 ))}
               </div>

src/components/timeline.tsx

@@ -15,9 +15,8 @@ const PositionView = memo(({ position }: { position: Position }) => (
         </p>
       </div>
     </Card.Header>
-    <Separator className="bg-slate-500/30" />
     <Card.Content>
-      <ul>
+      <ul className="flex flex-col gap-1">
         {position.tasks.map((task) => (
           <li
             key={task}
@@ -28,17 +27,20 @@ const PositionView = memo(({ position }: { position: Position }) => (
         ))}
       </ul>
     </Card.Content>
-    <Separator className="bg-slate-500/30" />
     <Card.Footer className="justify-between">
       <div className="flex flex-row items-center gap-4">
-        <Areas areas={position.tags} />
-        <Tools tools={position.skills} compact />
+        <div className="flex flex-row items-center gap-2">
+          <Areas areas={position.tags} />
+          <Separator orientation="vertical" />
+          <Tools tools={position.skills} compact />
+          <Separator orientation="vertical" />
+          <ul className="flex flex-row gap-2 text-zinc-400 text-sm">
+            {position.roles.map((role) => (
+              <li key={role}>{role}</li>
+            ))}
+          </ul>
+        </div>
       </div>
-      <ul className="flex flex-row gap-2 text-zinc-400 text-sm">
-        {position.roles.map((role) => (
-          <li key={role}>{role}</li>
-        ))}
-      </ul>
     </Card.Footer>
   </Card>
 ));
@@ -61,7 +63,7 @@ const Timeline = memo(({ positions }: { positions: Position[] }) => (
           </div>
           <div className="flex relative">
             <div className="bg-gray-800 dark:bg-gray-600 group-hover:bg-primary z-10 rounded-full border-1 border-slate-500 group-hover:border-primary h-5 w-5 transition-colors duration-300">
-              <div className="bg-slate-500 group-hover:bg-primary h-px w-7 items-center ml-4 mt-[9px] transition-colors duration-300"></div>
+              <div className="bg-slate-500 group-hover:bg-primary h-px w-7 items-center ml-5 mt-[9px] transition-colors duration-300"></div>
             </div>
             <PositionView position={position} />
           </div>

src/data/publications.tsx

@@ -7,7 +7,7 @@ const publications: Publication[] = [
       "Securing Cloud Containers through Intrusion Detection and Remediation",
     authors: ["Amr S. Abed"],
     featured: true,
-    venue: "Virginia Tech",
+    venue: "PhD Dissertation, Virginia Tech",
     year: "2017",
     type: "phdthesis",
     links: {