From f9ee9601e26e09ed37161ede07ef5a759961ef29 Mon Sep 17 00:00:00 2001
From: jancabala <66017111+jancabala@users.noreply.github.com>
Date: Wed, 26 Mar 2025 13:09:10 +0000
Subject: [PATCH] Update personal information and add social icon animations

---
 src/App.jsx    | 17 +++++++++--------
 src/styles.css | 23 +++++++++++++++++++++++
 2 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 4fbc89d..35eac27 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -24,15 +24,16 @@ import "./styles.css";
  * If you don't have one of the social sites listed, leave it as an empty string.
  */
 const siteProps = {
-  name: "Alexandrie Grenier",
-  title: "Web Designer & Content Creator",
-  email: "alex@example.com",
-  gitHub: "microsoft",
-  instagram: "microsoft",
-  linkedIn: "satyanadella",
+  name: "Jan Carlo Viray",
+  title: "data scientist",
+  email: "carlo@viray.com",
+  gitHub: "karlhans",
+  instagram: "karlhans",
+  linkedIn: "karlhans",
   medium: "",
-  twitter: "microsoft",
-  youTube: "Code",
+  twitter: "softmicrokarlhans",
+  youTube: "edocnirp",
+  website: "https://viray.com"
 };
 
 const primaryColor = "#4E567E";
diff --git a/src/styles.css b/src/styles.css
index 999a174..9b4590a 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -123,3 +123,26 @@ img.socialIcon {
   height: 30px;
   width: 30px;
 }
+
+/* Add animation for social icons */
+@keyframes bounce {
+  0%, 20%, 50%, 80%, 100% {
+    transform: translateY(0);
+  }
+  40% {
+    transform: translateY(-10px);
+  }
+  60% {
+    transform: translateY(-5px);
+  }
+}
+
+img.socialIcon {
+  height: 30px;
+  width: 30px;
+  transition: transform 0.3s ease-in-out;
+}
+
+img.socialIcon:hover {
+  animation: bounce 0.6s;
+}