changes done

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,15 +26,19 @@
     "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",
     "eslint-plugin-prettier": "^4.2.1",
     "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"
   }
 }

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: "",

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();
+  });
+});

src/setupTests.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

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);
+  }
 }

vitest.config.js

@@ -0,0 +1,9 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  test: {
+    environment: "jsdom",
+    setupFiles: "./src/setupTests.js",
+    globals: true,
+  },
+});