From f39e6b79f5a4aa52c3ecf2a93ed21ea7516d9753 Mon Sep 17 00:00:00 2001
From: shafikhanbabu <45664712+shafikhanbabu@users.noreply.github.com>
Date: Thu, 6 Aug 2026 06:04:39 +0000
Subject: [PATCH] changes done

---
 package.json                      |  9 +++++++--
 src/App.jsx                       |  8 ++++----
 src/Components/Portfolio.test.jsx | 16 ++++++++++++++++
 src/setupTests.js                 |  1 +
 src/styles.css                    | 25 +++++++++++++++++++++++++
 vitest.config.js                  |  9 +++++++++
 6 files changed, 62 insertions(+), 6 deletions(-)
 create mode 100644 src/Components/Portfolio.test.jsx
 create mode 100644 src/setupTests.js
 create mode 100644 vitest.config.js

diff --git a/package.json b/package.json
index 2828711..da62086 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,8 @@
     "build": "parcel build",
     "build-gh": "parcel build --public-url 'https://{github-username}.github.io/{repo-name}'",
     "predeploy": "npm run build-gh",
-    "deploy": "gh-pages -d dist"
+    "deploy": "gh-pages -d dist",
+    "test": "vitest run"
   },
   "repository": {
     "type": "git",
@@ -25,6 +26,8 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.0",
+    "@testing-library/react": "^16.3.0",
     "eslint": "^8.23.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-jsx-a11y": "^6.6.1",
@@ -32,8 +35,10 @@
     "eslint-plugin-react": "^7.31.7",
     "gh-pages": "^4.0.0",
     "html-webpack-plugin": "^5.5.0",
+    "jsdom": "^26.1.0",
     "parcel": "^2.7.0",
     "prettier": "^2.7.1",
-    "process": "^0.11.10"
+    "process": "^0.11.10",
+    "vitest": "^3.2.4"
   }
 }
diff --git a/src/App.jsx b/src/App.jsx
index 4fbc89d..e941aa4 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -24,10 +24,10 @@ 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",
+  name: "Shafikhan Babu",
+  title: "React - Front End Developer",
+  email: "shafikhanb@mail.com",
+  gitHub: "shafikhanbabu",
   instagram: "microsoft",
   linkedIn: "satyanadella",
   medium: "",
diff --git a/src/Components/Portfolio.test.jsx b/src/Components/Portfolio.test.jsx
new file mode 100644
index 0000000..f91c097
--- /dev/null
+++ b/src/Components/Portfolio.test.jsx
@@ -0,0 +1,16 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import Portfolio from "./Portfolio";
+
+describe("Portfolio", () => {
+  it("renders the portfolio heading and project cards", () => {
+    render(<Portfolio />);
+
+    expect(screen.getByRole("heading", { name: /portfolio/i })).toBeInTheDocument();
+    expect(screen.getByAltText(/desktop with books and laptop/i)).toBeInTheDocument();
+    expect(screen.getByText(/10 things to know about azure static web apps/i)).toBeInTheDocument();
+    expect(screen.getByText(/web development for beginners/i)).toBeInTheDocument();
+  });
+});
diff --git a/src/setupTests.js b/src/setupTests.js
new file mode 100644
index 0000000..7b0828b
--- /dev/null
+++ b/src/setupTests.js
@@ -0,0 +1 @@
+import '@testing-library/jest-dom';
diff --git a/src/styles.css b/src/styles.css
index 999a174..99336f4 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -122,4 +122,29 @@ a:hover {
 img.socialIcon {
   height: 30px;
   width: 30px;
+  transition: transform 0.3s ease, filter 0.3s ease, drop-shadow 0.3s ease;
+  filter: grayscale(0.2);
+}
+
+img.socialIcon:hover,
+img.socialIcon:focus-visible {
+  animation: socialIconBounce 0.6s ease-in-out;
+  filter: grayscale(0) drop-shadow(0 8px 16px rgba(78, 86, 126, 0.25));
+  transform: translateY(-4px) scale(1.08);
+}
+
+@keyframes socialIconBounce {
+  0%,
+  100% {
+    transform: translateY(0) scale(1);
+  }
+  25% {
+    transform: translateY(-6px) scale(1.05);
+  }
+  50% {
+    transform: translateY(-2px) scale(1.08);
+  }
+  75% {
+    transform: translateY(-4px) scale(1.06);
+  }
 }
diff --git a/vitest.config.js b/vitest.config.js
new file mode 100644
index 0000000..e13b738
--- /dev/null
+++ b/vitest.config.js
@@ -0,0 +1,9 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  test: {
+    environment: "jsdom",
+    setupFiles: "./src/setupTests.js",
+    globals: true,
+  },
+});