generalize the layout

package.json

@@ -12,11 +12,13 @@
     "react": "^17.0.2",
     "react-bootstrap": "^2.2.1",
     "react-dom": "^17.0.2",
+    "react-github-activity-feed": "file:../react-github-activity-feed",
     "react-github-calendar": "^3.2.2",
     "react-icons": "^4.8.0",
     "react-parallax-tilt": "^1.7.42",
     "react-pdf": "^5.7.1",
     "react-router-dom": "^6.2.2",
+    "react-router-hash-link": "^2.4.3",
     "react-scripts": "5.0.0",
     "react-tsparticles": "^1.42.2",
     "typewriter-effect": "^2.18.2",

public/index.html

@@ -8,26 +8,26 @@
   <meta name="theme-color" content="#000000" />
   <meta name="description" content="Web site created using create-react-app" />
   <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-  <title>S0umyajit | Portfolio</title>
+  <title>AndroiableDroid | Mohd Faraz</title>
   <meta name="description" content="Self Developed personal website build with React.js">
 
   <!-- Google / Search Engine Tags -->
-  <meta itemprop="name" content="S0umyajit | Portfolio">
+  <meta itemprop="name" content="AndroiableDroid | Mohd Faraz | Portfolio">
   <meta itemprop="description" content="Self Developed personal website build with React.js">
   <meta itemprop="image"
     content="https://raw.githubusercontent.com/soumyajit4419/Portfolio/master/Images/readme-img.png?token=AK7VCIF5RYEUZZAURELPTAC76U6AK">
 
   <!-- Facebook Meta Tags -->
-  <meta property="og:url" content="https://soumyajit.vercel.app">
+  <meta property="og:url" content="https://androiabledroid.github.io/Portfolio">
   <meta property="og:type" content="website">
-  <meta property="og:title" content="S0umyajit | Portfolio">
+  <meta property="og:title" content="AndroiableDroid | Mohd Faraz | Portfolio">
   <meta property="og:description" content="Self Developed personal website build with React.js">
   <meta property="og:image"
     content="https://raw.githubusercontent.com/soumyajit4419/Portfolio/master/Images/readme-img.png?token=AK7VCIF5RYEUZZAURELPTAC76U6AK">
 
   <!-- Twitter Meta Tags -->
   <meta name="twitter:card" content="summary_large_image">
-  <meta name="twitter:title" content="S0umyajit | Portfolio">
+  <meta name="twitter:title" content="AndroiableDroid | Mohd Faraz | Portfolio">
   <meta name="twitter:description" content="Self Developed personal website build with React.js">
   <meta name="twitter:image"
     content="https://raw.githubusercontent.com/soumyajit4419/Portfolio/master/Images/readme-img.png?token=AK7VCIF5RYEUZZAURELPTAC76U6AK">

src/components/About/About.js

@@ -6,22 +6,25 @@ import Techstack from "./Techstack";
 import Aboutcard from "./AboutCard";
 import laptopImg from "../../Assets/about.png";
 import Toolstack from "./Toolstack";
+import SubDown from "../SubDown";
 
 function About() {
   return (
     <Container fluid className="about-section">
+      <SubDown id="#skills"/>
       <Particle />
       <Container>
-        <Row style={{ justifyContent: "center", padding: "10px" }}>
+        <Row className="about-section-main">
+          <Row>
           <Col
             md={7}
             style={{
               justifyContent: "center",
               paddingTop: "30px",
-              paddingBottom: "50px",
+              // paddingBottom: "50px",
             }}
-          >
-            <h1 style={{ fontSize: "2.1em", paddingBottom: "20px" }}>
+            >
+            <h1 style={{ fontSize: "2.1em" }}>
               Know Who <strong className="purple">I'M</strong>
             </h1>
             <Aboutcard />
@@ -30,11 +33,12 @@ function About() {
             md={5}
             style={{ paddingTop: "120px", paddingBottom: "50px" }}
             className="about-img"
-          >
+            >
             <img src={laptopImg} alt="about" className="img-fluid" />
           </Col>
+          </Row>
         </Row>
-        <h1 className="project-heading">
+        <h1 className="project-heading" id="skills">
           Professional <strong className="purple">Skillset </strong>
         </h1>
 

src/components/About/AboutCard.js

@@ -1,40 +1,32 @@
 import React from "react";
 import Card from "react-bootstrap/Card";
 import { ImPointRight } from "react-icons/im";
+import { data } from "../../Constants";
 
 function AboutCard() {
   return (
     <Card className="quote-card-view">
       <Card.Body>
         <blockquote className="blockquote mb-0">
           <p style={{ textAlign: "justify" }}>
-            Hi Everyone, I am <span className="purple">Soumyajit Behera </span>
-            from <span className="purple"> Bhubaneswar, India.</span>
-            <br /> I am a final year student pursuing an Integrated MSc (IMSc)
-            in Maths and Computing at BIT Mesra.
-            <br />
-            Additionally, I am currently employed as a software developer at
-            Juspay.
-            <br />
-            <br />
-            Apart from coding, some other activities that I love to do!
+            {data.about}
           </p>
           <ul>
-            <li className="about-activity">
-              <ImPointRight /> Playing Games
-            </li>
-            <li className="about-activity">
-              <ImPointRight /> Writing Tech Blogs
-            </li>
-            <li className="about-activity">
-              <ImPointRight /> Travelling
-            </li>
+            {
+              data.activities.map((activity, index) => {
+                return (
+                  <li className="about-activity" key={index}>
+                    <ImPointRight/> {activity}
+                  </li>
+                );
+              })
+            }
           </ul>
 
-          <p style={{ color: "rgb(155 126 172)" }}>
-            "Strive to build things that make a difference!"{" "}
+          <p className="quote">
+            {data.quote}{" "}
           </p>
-          <footer className="blockquote-footer">Soumyajit</footer>
+          <footer className="blockquote-footer">{data.name}</footer>
         </blockquote>
       </Card.Body>
     </Card>

src/components/About/Github.js

@@ -1,6 +1,7 @@
 import React from "react";
 import GitHubCalendar from "react-github-calendar";
 import { Row } from "react-bootstrap";
+import { data } from "../../Constants";
 
 function Github() {
   return (
@@ -9,7 +10,7 @@ function Github() {
         Days I <strong className="purple">Code</strong>
       </h1>
       <GitHubCalendar
-        username="soumyajit4419"
+        username={data.githubUsername}
         blockSize={15}
         blockMargin={5}
         color="#c084f5"