Add GithubCalendar component with dark/light theme

src/components/GithubCalendar/GithubCalendar.js

@@ -0,0 +1,37 @@
+import React from "react";
+import GitHubCalendar from "react-github-calendar";
+import "./GithubCalendar.scss";
+
+const GithubCalendar = ({isDark}) => {
+  const purpleTheme = {
+    level0: "#2c2c3d",
+    level1: "#7737c4",
+    level2: "#6a1bb9",
+    level3: "#5a1aa3",
+    level4: "#55198b"
+  };
+
+  return (
+    <div
+      className={`github-activity-container ${
+        isDark ? "dark-github" : "light-github"
+      }`}
+    >
+      <h2
+        className="github-activity-heading"
+        aria-label="GitHub Activity Section"
+      >
+        GitHub Activity
+      </h2>
+      <GitHubCalendar
+        username="your-github-username"
+        theme={purpleTheme}
+        blockSize={15}
+        blockMargin={5}
+        fontSize={16}
+      />
+    </div>
+  );
+};
+
+export default GithubCalendar;

src/components/GithubCalendar/GithubCalendar.scss

@@ -0,0 +1,34 @@
+@import "../../_globalColor";
+
+.github-activity-container {
+  padding: 2rem;
+  margin: 2rem 1rem;
+  border-radius: 12px;
+  text-align: center;
+  box-shadow: 0 4px 12px $lightBoxShadowDark;
+  transition: background-color 0.3s ease, color 0.3s ease;
+
+  &.dark-github {
+    background-color: $darkBackground;
+    color: $textColorDark;
+
+    .github-activity-heading {
+      color: $buttonColor; // #55198b
+    }
+  }
+
+  &.light-github {
+    background-color: $lightBackground1;
+    color: $textColor;
+
+    .github-activity-heading {
+      color: $buttonColor;
+    }
+  }
+}
+
+.github-activity-heading {
+  font-size: 2rem;
+  margin-bottom: 1.5rem;
+  font-weight: bold;
+}