From 2af114ac9b99fc229d0001351858976dd270beaf Mon Sep 17 00:00:00 2001
From: Sean O'Connor <sean@soconnor.dev>
Date: Fri, 1 Aug 2025 03:33:53 -0400
Subject: [PATCH] Add button hover animation effects

---
 src/app/cv/page.tsx                     | 21 ++++++++++++++++++---
 src/app/page.tsx                        |  4 ++--
 src/app/projects/accessibility/page.tsx |  2 +-
 src/app/projects/latex-intro/page.tsx   |  2 +-
 src/app/projects/page.tsx               | 18 +++++++++++++++---
 src/styles/globals.css                  | 10 ++++++++++
 6 files changed, 47 insertions(+), 10 deletions(-)

diff --git a/src/app/cv/page.tsx b/src/app/cv/page.tsx
index 4fba041..fa96421 100644
--- a/src/app/cv/page.tsx
+++ b/src/app/cv/page.tsx
@@ -292,7 +292,12 @@ function PDFViewer({ url, title, type }: PDFViewerProps) {
               <Download className="h-4 w-4" />
               <span className="hidden sm:inline">Download</span>
             </Button>
-            <Button variant="outline" size="sm" asChild className="gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              asChild
+              className="button-hover gap-2"
+            >
               <Link
                 href={`/api/pdf-proxy?url=${encodeURIComponent(url)}`}
                 target="_blank"
@@ -325,7 +330,12 @@ function PDFViewer({ url, title, type }: PDFViewerProps) {
                 <Download className="h-4 w-4" />
                 <span className="hidden sm:inline">Download {title}</span>
               </Button>
-              <Button variant="outline" size="sm" asChild className="gap-2">
+              <Button
+                variant="outline"
+                size="sm"
+                asChild
+                className="button-hover gap-2"
+              >
                 <Link
                   href={`/api/pdf-proxy?url=${encodeURIComponent(url)}`}
                   target="_blank"
@@ -367,7 +377,12 @@ function PDFViewer({ url, title, type }: PDFViewerProps) {
             <Download className="h-4 w-4" />
             <span className="hidden sm:inline">Download</span>
           </Button>
-          <Button variant="outline" size="sm" asChild className="gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            asChild
+            className="button-hover gap-2"
+          >
             <Link
               href={`/api/pdf-proxy?url=${encodeURIComponent(url)}`}
               target="_blank"
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 60c17ab..fccfc84 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -50,13 +50,13 @@ export default function HomePage() {
             </div>
           </div>
           <div className="animate-fade-in-up-delay-4 flex gap-3">
-            <Button variant="outline" asChild>
+            <Button variant="outline" asChild className="button-hover">
               <Link href="/cv">
                 <ExternalLink className="mr-2 h-4 w-4" />
                 View CV
               </Link>
             </Button>
-            <Button variant="outline" asChild>
+            <Button variant="outline" asChild className="button-hover">
               <Link href="/publications">
                 <BookOpen className="mr-2 h-4 w-4" />
                 Publications
diff --git a/src/app/projects/accessibility/page.tsx b/src/app/projects/accessibility/page.tsx
index 1e58932..2e9ca51 100644
--- a/src/app/projects/accessibility/page.tsx
+++ b/src/app/projects/accessibility/page.tsx
@@ -418,7 +418,7 @@ export default function AccessibilityPage() {
               </div>
 
               <div className="pt-4">
-                <Button asChild variant="outline">
+                <Button asChild variant="outline" className="button-hover">
                   <Link href="/projects">
                     <Eye className="mr-2 h-4 w-4" />
                     View All Projects
diff --git a/src/app/projects/latex-intro/page.tsx b/src/app/projects/latex-intro/page.tsx
index 2af3456..66f9757 100644
--- a/src/app/projects/latex-intro/page.tsx
+++ b/src/app/projects/latex-intro/page.tsx
@@ -274,7 +274,7 @@ export default function LatexTutorialPage() {
               </div>
 
               <div className="pt-4">
-                <Button variant="outline" asChild>
+                <Button variant="outline" asChild className="button-hover">
                   <Link
                     href="https://www.overleaf.com"
                     target="_blank"
diff --git a/src/app/projects/page.tsx b/src/app/projects/page.tsx
index 215d78f..66b6b25 100644
--- a/src/app/projects/page.tsx
+++ b/src/app/projects/page.tsx
@@ -103,7 +103,11 @@ export default function ProjectsPage() {
 
                         <div className="flex gap-2">
                           {project.link && project.link.startsWith("/") && (
-                            <Button variant="outline" asChild>
+                            <Button
+                              variant="outline"
+                              asChild
+                              className="button-hover"
+                            >
                               <Link href={project.link}>
                                 {project.title ===
                                 "LaTeX Introduction Tutorial" ? (
@@ -122,7 +126,11 @@ export default function ProjectsPage() {
                           )}
 
                           {project.link && !project.link.startsWith("/") && (
-                            <Button variant="outline" asChild>
+                            <Button
+                              variant="outline"
+                              asChild
+                              className="button-hover"
+                            >
                               <Link
                                 href={project.link}
                                 target="_blank"
@@ -202,7 +210,11 @@ export default function ProjectsPage() {
                           </div>
 
                           {project.link && (
-                            <Button variant="outline" asChild>
+                            <Button
+                              variant="outline"
+                              asChild
+                              className="button-hover"
+                            >
                               <Link
                                 href={project.link}
                                 {...(!project.link.startsWith("/") && {
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 9869d19..d7deb3f 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -241,6 +241,16 @@ body {
     box-shadow: 0 4px 8px hsl(var(--foreground) / 0.1);
   }
 
+  /* Button hover effects to match card interactions */
+  .button-hover {
+    transition: all 0.2s ease-in-out;
+  }
+
+  .button-hover:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 2px 4px hsl(var(--foreground) / 0.1);
+  }
+
   /* Equal height cards in grid layouts */
   .grid-equal-height > * {
     height: 100%;