added the profile page

backend/package.json

@@ -11,6 +11,7 @@
   "license": "ISC",
   "description": "",
   "dependencies": {
+    "backend": "file:",
     "bcryptjs": "^2.4.3",
     "body-parser": "^1.20.3",
     "dotenv": "^16.4.5",

package.json

@@ -16,12 +16,14 @@
     "@mui/material": "^5.15.6",
     "@vitejs/plugin-react": "^4.3.3",
     "axios": "^1.7.7",
+    "my-react-tailwind-app": "file:",
     "octokit": "^4.0.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hot-toast": "^2.4.1",
     "react-icons": "^5.3.0",
-    "react-router-dom": "^6.28.0"
+    "react-router-dom": "^6.28.0",
+    "recharts": "^2.13.3"
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",

src/Routes/Router.tsx

@@ -5,6 +5,7 @@ import Home from "../pages/Home/Home"; // Import the Home (Dashboard) component
 import About from "../pages/About/About"; // Import the About component
 import Contact from "../pages/Contact/Contact"; // Import the Contact component
 import Contributors from "../pages/Contributors/Contributors";
+import Profile from "../pages/Profile/Profile";
 
 const Router = () => {
   return (
@@ -15,6 +16,7 @@ const Router = () => {
       <Route path="/contact" element={<Contact />} />
       <Route path="/dashboard" element={<Home />} />
       <Route path="/contributors" element={<Contributors />} />
+      <Route path="/profile" element={<Profile/>}/>
     </Routes>
   );
 };

src/components/ChartComponent.tsx

@@ -0,0 +1,57 @@
+import {
+  AreaChart,
+  Area,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+} from "recharts";
+
+const contributionData = [
+  { month: "Jan", contributions: 1 },
+  { month: "Feb", contributions: 2 },
+  { month: "Mar", contributions: 5 },
+  { month: "Apr", contributions: 7 },
+  { month: "May", contributions: 10 },
+  { month: "Jun", contributions: 8 },
+  { month: "Jul", contributions: 9 },
+  { month: "Aug", contributions: 1 },
+  { month: "Sep", contributions: 13 },
+  { month: "Oct", contributions: 15 },
+  { month: "Nov", contributions: 17 },
+  { month: "Dec", contributions: 2 },
+];
+
+const ChartComponent = () => {
+  return (
+    <div>
+      <h3 className="text-center text-gray-500 font-semibold mb-4">
+        Total Contributions
+      </h3>
+      <ResponsiveContainer width="100%" height={300}>
+        <AreaChart data={contributionData}>
+          <defs>
+            <linearGradient id="colorContributions" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="5%" stopColor="#FFB74D" stopOpacity={0.8} />
+              <stop offset="95%" stopColor="#FFB74D" stopOpacity={0} />
+            </linearGradient>
+          </defs>
+          <CartesianGrid strokeDasharray="3 3" />
+          {/* <XAxis dataKey="month" tick={{ fill: "#888" }} />
+          <YAxis tick={{ fill: "#888" }} /> */}
+          <Tooltip />
+          <Area
+            type="monotone"
+            dataKey="contributions"
+            stroke="#FF9800"
+            fillOpacity={1}
+            fill="url(#colorContributions)"
+          />
+        </AreaChart>
+      </ResponsiveContainer>
+    </div>
+  );
+};
+
+export default ChartComponent;

src/components/ContributionGrid.tsx

@@ -0,0 +1,77 @@
+const ContributionGrid = () => {
+  // Contribution data with varying intensity values
+  const months = [
+    {
+      name: "Jan",
+      contributions: [
+        0, 1, 2, 3, 1, 0, 2, 3, 0, 1, 2, 3, 1, 0, 2, 0, 1, 3, 2, 1, 0, 1, 3, 0,
+        2, 1, 3, 0, 1, 2, 3,
+      ],
+    },
+    {
+      name: "Feb",
+      contributions: [
+        1, 2, 0, 3, 0, 1, 2, 3, 0, 1, 2, 0, 1, 2, 3, 1, 0, 3, 2, 1, 0, 3, 1, 0,
+        2, 1, 3, 2,
+      ],
+    },
+    {
+      name: "Mar",
+      contributions: [
+        0, 2, 3, 1, 0, 2, 3, 0, 1, 2, 3, 1, 0, 2, 0, 1, 3, 2, 1, 0, 1, 3, 0, 2,
+        1, 3, 0, 1, 2, 3, 1,
+      ],
+    },
+    {
+      name: "Apr",
+      contributions: [
+        0, 1, 3, 0, 2, 1, 3, 0, 2, 1, 3, 0, 1, 2, 3, 1, 0, 2, 3, 0, 1, 2, 3, 0,
+        2, 1, 3, 1, 0, 2,
+      ],
+    },
+    {
+      name: "May",
+      contributions: [
+        3, 1, 0, 2, 1, 3, 0, 2, 3, 1, 0, 3, 2, 1, 3, 0, 2, 3, 0, 1, 2, 3, 1, 0,
+        3, 2, 1, 0, 3, 1, 2,
+      ],
+    },
+  ];
+
+  // Map contribution count to intensity classes
+  const getIntensityClass = (count) => {
+    if (count === 0) return "bg-gray-200"; // No contributions
+    if (count === 1) return "bg-gray-400"; // Low contributions
+    if (count === 2) return "bg-gray-600"; // Medium contributions
+    if (count >= 3) return "bg-gray-800"; // High contributions
+    return "bg-gray-200"; // Default
+  };
+
+  return (
+    <div className="flex flex-col items-center">
+      {/* Container for all months */}
+      <div className="flex gap-6">
+        {months.map((month, index) => (
+          <div key={index} className="flex flex-col items-center">
+            {/* Render grid of contributions */}
+            <div
+              className="grid grid-cols-7 gap-x-1 gap-y-[]"
+              style={{ height: "84px" }} // Set uniform height for the grid
+            >
+              {month.contributions.map((count, idx) => (
+                <div
+                  key={idx}
+                  className={`w-3 h-3 rounded-sm ${getIntensityClass(count)}`}
+                ></div>
+              ))}
+            </div>
+            {/* Month name */}
+            <span className="text-sm text-gray-500 mt-2">{month.name}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default ContributionGrid;

src/pages/Profile/Profile.tsx

@@ -0,0 +1,36 @@
+import ChartComponent from "../../components/ChartComponent";
+import ContributionGrid from "../../components/ContributionGrid";
+
+const Profile = () => {
+  return (
+    <div className="bg-gray-100 p-7 w-full h-screen flex flex-row gap-2">
+      <div className="bg-white rounded-lg h-full w-1/2 border border-gray-200">
+        <div className="p-4 flex flex-row space-x-10">
+          <div className="flex flex-col">
+            <div className="w-32 h-32 rounded-full overflow-hidden border border-gray-300">
+              <img
+                src="/crl.png"
+                alt="Profile"
+                className="w-full h-full object-cover"
+              />
+            </div>
+            <div>
+              <h1 className="text-xl font-bold mt-4">Jatin Shimpi</h1>
+            </div>
+          </div>
+          <div className="mt-5">
+            <ContributionGrid />
+          </div>
+        </div>
+        <div className="mx-10">
+          <ChartComponent />
+        </div>
+      </div>
+      <div className="bg-white rounded-lg h-full w-1/2 border border-gray-200">
+        other content
+      </div>
+    </div>
+  );
+};
+
+export default Profile;