From 864ed24dab90920182541b951c4afff53f07b757 Mon Sep 17 00:00:00 2001
From: Rishika Kherniwal <rishikakherniwal0809@gmail.com>
Date: Mon, 30 Jun 2025 13:36:47 +0530
Subject: [PATCH 1/2] Add GithubCalendar component with dark/light theme

---
 .../GithubCalendar/GithubCalendar.js          | 32 +++++++++++++++++
 .../GithubCalendar/GithubCalendar.scss        | 34 +++++++++++++++++++
 2 files changed, 66 insertions(+)
 create mode 100644 src/components/GithubCalendar/GithubCalendar.js
 create mode 100644 src/components/GithubCalendar/GithubCalendar.scss

diff --git a/src/components/GithubCalendar/GithubCalendar.js b/src/components/GithubCalendar/GithubCalendar.js
new file mode 100644
index 0000000000..ca14668265
--- /dev/null
+++ b/src/components/GithubCalendar/GithubCalendar.js
@@ -0,0 +1,32 @@
+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;
diff --git a/src/components/GithubCalendar/GithubCalendar.scss b/src/components/GithubCalendar/GithubCalendar.scss
new file mode 100644
index 0000000000..6e0fa6919f
--- /dev/null
+++ b/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;
+}

From c03c54e05abd2b18375b6d037d46aedc8c9c660a Mon Sep 17 00:00:00 2001
From: "pre-commit-ci[bot]"
 <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Date: Mon, 30 Jun 2025 08:17:51 +0000
Subject: [PATCH 2/2] [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci
---
 src/components/GithubCalendar/GithubCalendar.js   | 15 ++++++++++-----
 src/components/GithubCalendar/GithubCalendar.scss |  2 +-
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/components/GithubCalendar/GithubCalendar.js b/src/components/GithubCalendar/GithubCalendar.js
index ca14668265..f6d58ef323 100644
--- a/src/components/GithubCalendar/GithubCalendar.js
+++ b/src/components/GithubCalendar/GithubCalendar.js
@@ -1,8 +1,8 @@
-import React from 'react';
-import GitHubCalendar from 'react-github-calendar';
-import './GithubCalendar.scss';
+import React from "react";
+import GitHubCalendar from "react-github-calendar";
+import "./GithubCalendar.scss";
 
-const GithubCalendar = ({ isDark }) => {
+const GithubCalendar = ({isDark}) => {
   const purpleTheme = {
     level0: "#2c2c3d",
     level1: "#7737c4",
@@ -17,7 +17,12 @@ const GithubCalendar = ({ isDark }) => {
         isDark ? "dark-github" : "light-github"
       }`}
     >
-      <h2 className="github-activity-heading" aria-label="GitHub Activity Section">GitHub Activity</h2>
+      <h2
+        className="github-activity-heading"
+        aria-label="GitHub Activity Section"
+      >
+        GitHub Activity
+      </h2>
       <GitHubCalendar
         username="your-github-username"
         theme={purpleTheme}
diff --git a/src/components/GithubCalendar/GithubCalendar.scss b/src/components/GithubCalendar/GithubCalendar.scss
index 6e0fa6919f..d796cfb1bd 100644
--- a/src/components/GithubCalendar/GithubCalendar.scss
+++ b/src/components/GithubCalendar/GithubCalendar.scss
@@ -22,7 +22,7 @@
     color: $textColor;
 
     .github-activity-heading {
-      color: $buttonColor; 
+      color: $buttonColor;
     }
   }
 }