From 6d01c4a5b20a50c22fd16e762222042a30669642 Mon Sep 17 00:00:00 2001
From: Yuva Sri Sai <nanithota18102004@gmail.com>
Date: Sat, 7 Sep 2024 15:19:20 +0530
Subject: [PATCH] reduced code

---
 .firebase/hosting.ZGlzdA.cache          | 30 +++++------
 src/components/About/CodingStats.jsx    | 24 +++++++++
 src/components/About/InterestCard.jsx   | 35 +++++++++++++
 src/components/About/InterestsAbout.jsx | 36 ++++++++++++++
 src/pages/About/About.jsx               | 66 ++++---------------------
 5 files changed, 120 insertions(+), 71 deletions(-)
 create mode 100644 src/components/About/CodingStats.jsx
 create mode 100644 src/components/About/InterestCard.jsx
 create mode 100644 src/components/About/InterestsAbout.jsx

diff --git a/.firebase/hosting.ZGlzdA.cache b/.firebase/hosting.ZGlzdA.cache
index 76d7716..759e03d 100644
--- a/.firebase/hosting.ZGlzdA.cache
+++ b/.firebase/hosting.ZGlzdA.cache
@@ -1,16 +1,16 @@
 vite.svg,1720368316596,699a02e0e68a579f687d364bbbe7633161244f35af068220aee37b1b33dfb3c7
-index.html,1725554977782,b70a46e40dd8695a37a10f0b45580c11a845fa372ba32ec132b4d4faed1acf0d
-assets/index-Cx-KFXY7.css,1725554977782,b1ab0da8d2e5c9d7f96932293c9eb00152e6242078c367f3005038badc71d0a0
-assets/code_1-Y36OpMg5.png,1725554977781,71831d3d6d158234bc4b814af79f74dbd0a2a5a3446e7a9c48cc8b6a0f81beef
-assets/code_9-tBLN2Q8g.png,1725554977782,c413628baa1eb321dfeb2f878340f26e82a726be76e69e21e4292d6bf4498dc5
-assets/code_8-BdlLJaIQ.png,1725554977782,e5bb4a3635077283ad5433ac2e10ac283dc14c652ed7c1657090c8cad1b56d68
-assets/code_6-C5XpltJg.png,1725554977782,9d19bfaf0fbf0dc19a4ee5759fe68cd826828ab83915485b5aa9a3b65b7d7e07
-assets/avatar1-CWf9T1Xo.png,1725554977779,eff5575d814ddaef6c88fe28dc0c6bb8d4d1325377d34d17b78d4a7a6bf742cc
-assets/code_3-DMUIIc6E.png,1725554977781,500d10de1820c3811f722ea2aff154ba4fd1f851298398c0de1f499927b0b738
-assets/code_10-BhG9fqmd.png,1725554977782,394e04d80030242b0b4f5499401af9bc9275eb418e1a182560a7695ed2271a1a
-assets/avatar-Dxoygd82.png,1725554977781,4e0b88739ed2f6b3797335fc24f7d7e8820354200dcd4295e67fceb4e58dfbbe
-assets/code_7-2zFcUsqF.png,1725554977782,5fe6108c793af34426bcacf3fa7630688ebc1730f9a10eb984568e260dd5acf6
-assets/code_4-Bjc-p2bd.png,1725554977782,ce2d4e63432a74974357e706615761beb4117e69247966a02a41d37e3bab36ff
-assets/code_5-DeKG03-i.png,1725554977782,c39add9b581927cf372fc11b54d811b1851484d99b20617c6e1b5e5fe87e5d7e
-assets/code_2-CBNqrzvR.png,1725554977782,a351eca4a6165c1b9f034156ea0f3d0bc270f201c261d2237e94d3964c26966a
-assets/index-BzTA2Rfq.js,1725554977782,27a871dfbe0f95e75006dc1dc6260fa812ce9016ea9d2b3db9f642e00a17f386
+index.html,1725602514846,451532a672038e47b751ebc97faabd7b02cb117ea62fa74d27609e9a85285388
+assets/index-Cx-KFXY7.css,1725602514847,b1ab0da8d2e5c9d7f96932293c9eb00152e6242078c367f3005038badc71d0a0
+assets/code_1-Y36OpMg5.png,1725602514846,71831d3d6d158234bc4b814af79f74dbd0a2a5a3446e7a9c48cc8b6a0f81beef
+assets/code_9-tBLN2Q8g.png,1725602514847,c413628baa1eb321dfeb2f878340f26e82a726be76e69e21e4292d6bf4498dc5
+assets/code_8-BdlLJaIQ.png,1725602514846,e5bb4a3635077283ad5433ac2e10ac283dc14c652ed7c1657090c8cad1b56d68
+assets/code_6-C5XpltJg.png,1725602514846,9d19bfaf0fbf0dc19a4ee5759fe68cd826828ab83915485b5aa9a3b65b7d7e07
+assets/avatar1-CWf9T1Xo.png,1725602514840,eff5575d814ddaef6c88fe28dc0c6bb8d4d1325377d34d17b78d4a7a6bf742cc
+assets/code_3-DMUIIc6E.png,1725602514846,500d10de1820c3811f722ea2aff154ba4fd1f851298398c0de1f499927b0b738
+assets/avatar-Dxoygd82.png,1725602514846,4e0b88739ed2f6b3797335fc24f7d7e8820354200dcd4295e67fceb4e58dfbbe
+assets/code_10-BhG9fqmd.png,1725602514847,394e04d80030242b0b4f5499401af9bc9275eb418e1a182560a7695ed2271a1a
+assets/code_7-2zFcUsqF.png,1725602514847,5fe6108c793af34426bcacf3fa7630688ebc1730f9a10eb984568e260dd5acf6
+assets/code_4-Bjc-p2bd.png,1725602514846,ce2d4e63432a74974357e706615761beb4117e69247966a02a41d37e3bab36ff
+assets/code_2-CBNqrzvR.png,1725602514846,a351eca4a6165c1b9f034156ea0f3d0bc270f201c261d2237e94d3964c26966a
+assets/code_5-DeKG03-i.png,1725602514847,c39add9b581927cf372fc11b54d811b1851484d99b20617c6e1b5e5fe87e5d7e
+assets/index-6dzuCRoa.js,1725602514847,ef6fd5efc5220d288534c04b16f3a08a74d8cddd136296c61a66d29ac24edf00
diff --git a/src/components/About/CodingStats.jsx b/src/components/About/CodingStats.jsx
new file mode 100644
index 0000000..4a48cac
--- /dev/null
+++ b/src/components/About/CodingStats.jsx
@@ -0,0 +1,24 @@
+import { Box } from "@mui/material";
+import React from "react";
+
+export default function CodingStats() {
+  return (
+    <Box sx={{ width: '100%', height: { xs: '400px', sm: '600px', md: '800px' }, overflow: 'hidden' }}>
+      <Box sx={{
+        position: 'relative',
+        width: '100%',
+        height: '100%',
+        clipPath: 'inset(3 5 0 0)' // Adjust the inset values to show only the part you want
+      }}>
+        <iframe
+          src="https://codolio.com/profile/yuvasrisai18"
+          width="100%"
+          height="100%"
+          frameBorder="0"
+          title="Coding Stats"
+          style={{ border: 'none' }}
+        ></iframe>
+      </Box>
+    </Box>
+  );
+}
diff --git a/src/components/About/InterestCard.jsx b/src/components/About/InterestCard.jsx
new file mode 100644
index 0000000..195d4d0
--- /dev/null
+++ b/src/components/About/InterestCard.jsx
@@ -0,0 +1,35 @@
+import React from "react";
+import { Box, Typography } from "@mui/material";
+export default function InterestCard({ obj }) {
+  return (
+    <>
+      <Box
+        border="2px solid #000"
+        borderRadius={8}
+        width={{ xs: "120px", sm: "180px" }}
+        display="flex"
+        flexDirection="column"
+        justifyContent={{ xs: "space-around" }}
+        alignItems="center"
+        p={2}
+      >
+        <Box
+          component={"img"}
+          src={obj.img}
+          alt={obj.name}
+          width="60%"
+          mb={1}
+          display={"70%"}
+        />
+        <Typography
+          textAlign="center"
+          display={"30%"}
+          fontWeight={500}
+          m={{ xs: 0.1, sm: 0 }}
+        >
+          {obj.name}
+        </Typography>
+      </Box>
+    </>
+  );
+}
diff --git a/src/components/About/InterestsAbout.jsx b/src/components/About/InterestsAbout.jsx
new file mode 100644
index 0000000..918257d
--- /dev/null
+++ b/src/components/About/InterestsAbout.jsx
@@ -0,0 +1,36 @@
+import React from "react";
+import { Box, Typography, Divider } from "@mui/material";
+import InterestCard from "./InterestCard";
+import { Interests } from "../../Constants/Interests";
+export default function InterestsAbout() {
+  return (
+    <>
+      <Box mt={3}>
+        <Box display="flex" alignItems="center">
+          <Typography variant="h5" fontWeight={600} marginRight={2} ml={1}>
+            Interests
+          </Typography>
+          <Divider
+            sx={{
+              width: { xs: "130px", sm: "400px" },
+              height: "3.5px",
+              borderRadius: "12px",
+              backgroundColor: "#484545",
+            }}
+          />
+        </Box>
+        <Box
+          mt={3}
+          ml={{ xs: 2, sm: 3 }}
+          display="flex"
+          flexWrap="wrap"
+          gap={2}
+        >
+          {Interests.map((item, index) => (
+            <InterestCard obj={item} key={index} />
+          ))}
+        </Box>
+      </Box>
+    </>
+  );
+}
diff --git a/src/pages/About/About.jsx b/src/pages/About/About.jsx
index fb48b76..a8f5c89 100644
--- a/src/pages/About/About.jsx
+++ b/src/pages/About/About.jsx
@@ -1,6 +1,7 @@
 import { Box, Typography, Divider } from "@mui/material";
 import React from "react";
-import { Interests } from "../../Constants/Interests";
+import InterestsAbout from "../../components/About/InterestsAbout";
+import CodingStats from "../../components/About/CodingStats";
 
 export default function About() {
   return (
@@ -61,7 +62,7 @@ export default function About() {
           of <span style={{ fontWeight: 600 }}>Web Sockets</span> has further
           broadened my understanding of real-time communication and dynamic web
           applications.
-        </Typography> 
+        </Typography>
         <Typography
           component={"p"}
           ml={{ xs: 0, sm: 3 }}
@@ -70,7 +71,11 @@ export default function About() {
           mt={0.5}
           mb={1}
         >
-          In addition to coding, I am well-versed in low-code tools like <span style={{ fontWeight: 600 }}>FlutterFlow</span> and <span style={{ fontWeight: 600 }}>Wix</span>, which I've used to build several applications, enabling rapid development and deployment without sacrificing functionality.
+          In addition to coding, I am well-versed in low-code tools like{" "}
+          <span style={{ fontWeight: 600 }}>FlutterFlow</span> and{" "}
+          <span style={{ fontWeight: 600 }}>Wix</span>, which I've used to build
+          several applications, enabling rapid development and deployment
+          without sacrificing functionality.
         </Typography>
         <Typography
           component={"p"}
@@ -124,59 +129,8 @@ export default function About() {
           </Typography>
         </Box>
       </Box>
-      <Box mt={3}>
-        <Box display="flex" alignItems="center">
-          <Typography variant="h5" fontWeight={600} marginRight={2} ml={1}>
-            Interests
-          </Typography>
-          <Divider
-            sx={{
-              width: { xs: "130px", sm: "400px" },
-              height: "3.5px",
-              borderRadius: "12px",
-              backgroundColor: "#484545",
-            }}
-          />
-        </Box>
-        <Box
-          mt={3}
-          ml={{ xs: 2, sm: 3 }}
-          display="flex"
-          flexWrap="wrap"
-          gap={2}
-        >
-          {Interests.map((item, index) => (
-            <Box
-              key={index}
-              border="2px solid #000"
-              borderRadius={8}
-              width={{ xs: "120px", sm: "180px" }}
-              display="flex"
-              flexDirection="column"
-              justifyContent={{ xs: "space-around" }}
-              alignItems="center"
-              p={2}
-            >
-              <Box
-                component={"img"}
-                src={item.img}
-                alt={item.name}
-                width="60%"
-                mb={1}
-                display={"70%"}
-              />
-              <Typography
-                textAlign="center"
-                display={"30%"}
-                fontWeight={500}
-                m={{ xs: 0.1, sm: 0 }}
-              >
-                {item.name}
-              </Typography>
-            </Box>
-          ))}
-        </Box>
-      </Box>
+      <InterestsAbout />
+      {/* <CodingStats/> */}
     </>
   );
 }