[
  {
    "path": ".gitignore",
    "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# production\n/build\n\n# misc\n.DS_Store\n.env\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n.eslintcache\n\nServer/node_modules\nServer/config.js"
  },
  {
    "path": "README.md",
    "content": "<h2 align=\"center\">\n  Portfolio Website - v2.0<br/>\n  <a href=\"https://soumyajit.vercel.app/\" target=\"_blank\">soumyajit.tech</a>\n</h2>\n<div align=\"center\">\n  <img alt=\"Demo\" src=\"./Images/readme-img1.png\" />\n</div>\n\n<br/>\n\n<center>\n\n[![forthebadge](https://forthebadge.com/images/badges/built-with-love.svg)](https://forthebadge.com) &nbsp;\n[![forthebadge](https://forthebadge.com/images/badges/made-with-javascript.svg)](https://forthebadge.com) &nbsp;\n[![forthebadge](https://forthebadge.com/images/badges/open-source.svg)](https://forthebadge.com) &nbsp;\n![GitHub Repo stars](https://img.shields.io/github/stars/soumyajit4419/Portfolio?color=red&logo=github&style=for-the-badge) &nbsp;\n![GitHub forks](https://img.shields.io/github/forks/soumyajit4419/Portfolio?color=red&logo=github&style=for-the-badge)\n\n</center>\n\n<h3 align=\"center\">\n    🔹\n    <a href=\"https://github.com/soumyajit4419/Portfolio/issues\">Report Bug</a> &nbsp; &nbsp;\n    🔹\n    <a href=\"https://github.com/soumyajit4419/Portfolio/issues\">Request Feature</a>\n</h3>\n\n## TL;DR\n\nYou can fork this repo to modify and make changes of your own. Please give me proper credit by linking back to [Soumyajit4419](https://github.com/soumyajit4419/Portfolio). Thanks!\n\n## Built With\n\nMy personal portfolio <a href=\"https://soumyajit.vercel.app/\" target=\"_blank\">soumyajit.tech</a> which features some of my github projects as well as my resume and technical skills.<br/>\n\nThis project was built using these technologies.\n\n- React.js\n- Node.js\n- Express.js\n- CSS3\n- VsCode\n- Vercel\n\n## Features\n\n**📖 Multi-Page Layout**\n\n**🎨 Styled with React-Bootstrap and Css with easy to customize colors**\n\n**📱 Fully Responsive**\n\n## Getting Started\n\nClone down this repository. You will need `node.js` and `git` installed globally on your machine.\n\n## 🛠 Installation and Setup Instructions\n\n1. Installation: `npm install`\n\n2. In the project directory, you can run: `npm start`\n\nRuns the app in the development mode.\\\nOpen [http://localhost:3000](http://localhost:3000) to view it in the browser.\nThe page will reload if you make edits.\n\n## Usage Instructions\n\nOpen the project folder and Navigate to `/src/components/`. <br/>\nYou will find all the components used and you can edit your information accordingly.\n\n### Show your support\n\nGive a ⭐ if you like this website!\n\n<a href=\"https://www.buymeacoffee.com/soumyajit4419\" target=\"_blank\"><img src=\"https://cdn.buymeacoffee.com/buttons/v2/default-violet.png\" alt=\"Buy Me A Coffee\" height= \"60px\" width= \"217px\" ></a>\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"portfolio\",\n  \"version\": \"0.1.0\",\n  \"private\": true,\n  \"dependencies\": {\n    \"@react-pdf/renderer\": \"^2.2.0\",\n    \"@testing-library/jest-dom\": \"^5.16.2\",\n    \"@testing-library/react\": \"^12.1.4\",\n    \"@testing-library/user-event\": \"^13.5.0\",\n    \"axios\": \"^0.26.1\",\n    \"bootstrap\": \"^5.1.3\",\n    \"react\": \"^17.0.2\",\n    \"react-bootstrap\": \"^2.2.1\",\n    \"react-dom\": \"^17.0.2\",\n    \"react-github-calendar\": \"^3.2.2\",\n    \"react-icons\": \"^4.8.0\",\n    \"react-parallax-tilt\": \"^1.7.42\",\n    \"react-pdf\": \"^5.7.1\",\n    \"react-router-dom\": \"^6.2.2\",\n    \"react-scripts\": \"5.0.0\",\n    \"react-tsparticles\": \"^1.42.2\",\n    \"typewriter-effect\": \"^2.18.2\",\n    \"video-react\": \"^0.16.0\",\n    \"web-vitals\": \"^2.1.4\"\n  },\n  \"scripts\": {\n    \"start\": \"react-scripts start\",\n    \"build\": \"react-scripts build\",\n    \"test\": \"react-scripts test\",\n    \"eject\": \"react-scripts eject\"\n  },\n  \"eslintConfig\": {\n    \"extends\": [\n      \"react-app\",\n      \"react-app/jest\"\n    ]\n  },\n  \"browserslist\": {\n    \"production\": [\n      \">0.2%\",\n      \"not dead\",\n      \"not op_mini all\"\n    ],\n    \"development\": [\n      \"last 1 chrome version\",\n      \"last 1 firefox version\",\n      \"last 1 safari version\"\n    ]\n  }\n}\n"
  },
  {
    "path": "public/index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n  <meta charset=\"utf-8\" />\n  <link rel=\"icon\" href=\"%PUBLIC_URL%/favicon.png\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n  <meta name=\"theme-color\" content=\"#000000\" />\n  <meta name=\"description\" content=\"Web site created using create-react-app\" />\n  <link rel=\"manifest\" href=\"%PUBLIC_URL%/manifest.json\" />\n  <title>S0umyajit | Portfolio</title>\n  <meta name=\"description\" content=\"Self Developed personal website build with React.js\">\n\n  <!-- Google / Search Engine Tags -->\n  <meta itemprop=\"name\" content=\"S0umyajit | Portfolio\">\n  <meta itemprop=\"description\" content=\"Self Developed personal website build with React.js\">\n  <meta itemprop=\"image\"\n    content=\"https://raw.githubusercontent.com/soumyajit4419/Portfolio/master/Images/readme-img.png?token=AK7VCIF5RYEUZZAURELPTAC76U6AK\">\n\n  <!-- Facebook Meta Tags -->\n  <meta property=\"og:url\" content=\"https://soumyajit.vercel.app\">\n  <meta property=\"og:type\" content=\"website\">\n  <meta property=\"og:title\" content=\"S0umyajit | Portfolio\">\n  <meta property=\"og:description\" content=\"Self Developed personal website build with React.js\">\n  <meta property=\"og:image\"\n    content=\"https://raw.githubusercontent.com/soumyajit4419/Portfolio/master/Images/readme-img.png?token=AK7VCIF5RYEUZZAURELPTAC76U6AK\">\n\n  <!-- Twitter Meta Tags -->\n  <meta name=\"twitter:card\" content=\"summary_large_image\">\n  <meta name=\"twitter:title\" content=\"S0umyajit | Portfolio\">\n  <meta name=\"twitter:description\" content=\"Self Developed personal website build with React.js\">\n  <meta name=\"twitter:image\"\n    content=\"https://raw.githubusercontent.com/soumyajit4419/Portfolio/master/Images/readme-img.png?token=AK7VCIF5RYEUZZAURELPTAC76U6AK\">\n</head>\n\n<body>\n  <noscript>You need to enable JavaScript to run this app.</noscript>\n  <div id=\"root\"></div>\n</body>\n\n</html>"
  },
  {
    "path": "public/manifest.json",
    "content": "{\n  \"short_name\": \"React App\",\n  \"name\": \"Create React App Sample\",\n  \"icons\": [\n    {\n      \"src\": \"favicon.ico\",\n      \"sizes\": \"64x64 32x32 24x24 16x16\",\n      \"type\": \"image/x-icon\"\n    }\n  ],\n  \"start_url\": \".\",\n  \"display\": \"standalone\",\n  \"theme_color\": \"#000000\",\n  \"background_color\": \"#ffffff\"\n}\n"
  },
  {
    "path": "public/robots.txt",
    "content": "# https://www.robotstxt.org/robotstxt.html\nUser-agent: *\nDisallow:\n"
  },
  {
    "path": "src/App.css",
    "content": ".App {\n  text-align: center;\n}\n\n.App-logo {\n  height: 40vmin;\n  pointer-events: none;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n  .App-logo {\n    animation: App-logo-spin infinite 20s linear;\n  }\n}\n\n.App-header {\n  background-color: #282c34;\n  min-height: 100vh;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  font-size: calc(10px + 2vmin);\n  color: white;\n}\n\n.App-link {\n  color: #61dafb;\n}\n\n@keyframes App-logo-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n"
  },
  {
    "path": "src/App.js",
    "content": "import React, { useState, useEffect } from \"react\";\nimport Preloader from \"../src/components/Pre\";\nimport Navbar from \"./components/Navbar\";\nimport Home from \"./components/Home/Home\";\nimport About from \"./components/About/About\";\nimport Projects from \"./components/Projects/Projects\";\nimport Footer from \"./components/Footer\";\nimport Resume from \"./components/Resume/ResumeNew\";\nimport {\n  BrowserRouter as Router,\n  Route,\n  Routes,\n  Navigate\n} from \"react-router-dom\";\nimport ScrollToTop from \"./components/ScrollToTop\";\nimport \"./style.css\";\nimport \"./App.css\";\nimport \"bootstrap/dist/css/bootstrap.min.css\";\n\nfunction App() {\n  const [load, upadateLoad] = useState(true);\n\n  useEffect(() => {\n    const timer = setTimeout(() => {\n      upadateLoad(false);\n    }, 1200);\n\n    return () => clearTimeout(timer);\n  }, []);\n\n  return (\n    <Router>\n      <Preloader load={load} />\n      <div className=\"App\" id={load ? \"no-scroll\" : \"scroll\"}>\n        <Navbar />\n        <ScrollToTop />\n        <Routes>\n          <Route path=\"/\" element={<Home />} />\n          <Route path=\"/project\" element={<Projects />} />\n          <Route path=\"/about\" element={<About />} />\n          <Route path=\"/resume\" element={<Resume />} />\n          <Route path=\"*\" element={<Navigate to=\"/\"/>} />\n        </Routes>\n        <Footer />\n      </div>\n    </Router>\n  );\n}\n\nexport default App;\n"
  },
  {
    "path": "src/App.test.js",
    "content": "import { render, screen } from '@testing-library/react';\nimport App from './App';\n\ntest('renders learn react link', () => {\n  render(<App />);\n  const linkElement = screen.getByText(/learn react/i);\n  expect(linkElement).toBeInTheDocument();\n});\n"
  },
  {
    "path": "src/components/About/About.js",
    "content": "import React from \"react\";\nimport { Container, Row, Col } from \"react-bootstrap\";\nimport Particle from \"../Particle\";\nimport Github from \"./Github\";\nimport Techstack from \"./Techstack\";\nimport Aboutcard from \"./AboutCard\";\nimport laptopImg from \"../../Assets/about.png\";\nimport Toolstack from \"./Toolstack\";\n\nfunction About() {\n  return (\n    <>\n      {\" \"}\n      <Particle />\n      <Container fluid className=\"about-section\">\n        <Container>\n          <Row style={{ justifyContent: \"center\", padding: \"10px\" }}>\n            <Col\n              md={7}\n              style={{\n                justifyContent: \"center\",\n                paddingTop: \"30px\",\n                paddingBottom: \"50px\",\n              }}\n            >\n              <h1 style={{ fontSize: \"2.1em\", paddingBottom: \"20px\" }}>\n                Know Who <strong className=\"purple\">I'M</strong>\n              </h1>\n              <Aboutcard />\n            </Col>\n            <Col\n              md={5}\n              style={{ paddingTop: \"120px\", paddingBottom: \"50px\" }}\n              className=\"about-img\"\n            >\n              <img src={laptopImg} alt=\"about\" className=\"img-fluid\" />\n            </Col>\n          </Row>\n          <h1 className=\"project-heading\">\n            Professional <strong className=\"purple\">Skillset </strong>\n          </h1>\n\n          <Techstack />\n\n          <h1 className=\"project-heading\">\n            <strong className=\"purple\">Tools</strong> I use\n          </h1>\n          <Toolstack />\n\n          <Github />\n        </Container>\n      </Container>\n    </>\n  );\n}\n\nexport default About;\n"
  },
  {
    "path": "src/components/About/AboutCard.js",
    "content": "import React from \"react\";\nimport Card from \"react-bootstrap/Card\";\nimport { ImPointRight } from \"react-icons/im\";\n\nfunction AboutCard() {\n  return (\n    <Card className=\"quote-card-view\">\n      <Card.Body>\n        <blockquote className=\"blockquote mb-0\">\n          <p style={{ textAlign: \"justify\" }}>\n            Hi everyone! I’m <span className=\"purple\">Soumyajit Behera</span>{\" \"}\n            from <span className=\"purple\">Bhubaneswar, India</span>.\n            <br />\n            I’m currently working as a{\" \"}\n            <span className=\"purple\">Software Developer</span> at{\" \"}\n            <span className=\"purple\">Juspay</span>.\n            <br />I hold an Integrated M.Sc. (IMSc) in{\" \"}\n            <span className=\"purple\">Mathematics and Computing</span> from{\" \"}\n            <span className=\"purple\">BIT Mesra</span>.\n            <br />\n            <br />\n            Outside of coding, I love engaging in activities that keep me\n            creative and inspired:\n          </p>\n\n          <ul>\n            <li className=\"about-activity\">\n              <ImPointRight /> Playing Games 🎮\n            </li>\n            <li className=\"about-activity\">\n              <ImPointRight /> Writing Tech Blogs ✍️\n            </li>\n            <li className=\"about-activity\">\n              <ImPointRight /> Traveling and Exploring New Places 🌍\n            </li>\n          </ul>\n\n          <p style={{ color: \"rgb(155 126 172)\" }}>\n            \"Strive to build things that make a difference!\"{\" \"}\n          </p>\n          <footer className=\"blockquote-footer\">Soumyajit</footer>\n        </blockquote>\n      </Card.Body>\n    </Card>\n  );\n}\n\nexport default AboutCard;\n"
  },
  {
    "path": "src/components/About/Github.js",
    "content": "import React from \"react\";\nimport GitHubCalendar from \"react-github-calendar\";\nimport { Row } from \"react-bootstrap\";\n\nfunction Github() {\n  return (\n    <Row\n      style={{\n        justifyContent: \"center\",\n        paddingBottom: \"10px\",\n        color: \"white\",\n      }}\n    >\n      <h1 className=\"project-heading pb-4\" style={{ paddingBottom: \"20px\" }}>\n        Days I <strong className=\"purple\">Code</strong>\n      </h1>\n      <GitHubCalendar\n        username=\"soumyajit4419\"\n        blockSize={30}\n        blockMargin={10}\n        color=\"#c084f5\"\n        fontSize={20}\n      />\n    </Row>\n  );\n}\n\nexport default Github;\n"
  },
  {
    "path": "src/components/About/Techstack.js",
    "content": "import React from \"react\";\nimport { Col, Row } from \"react-bootstrap\";\nimport { SiNextdotjs, SiSolidity } from \"react-icons/si\";\nimport { FaRust } from \"react-icons/fa\";\nimport Go from \"../../Assets/TechIcons/go.svg\";\nimport C from \"../../Assets/TechIcons/C++.svg\";\nimport Javascript from \"../../Assets/TechIcons/Javascript.svg\";\nimport Node from \"../../Assets/TechIcons/Node.svg\";\nimport ReactIcon from \"../../Assets/TechIcons/React.svg\";\nimport HaskellIcon from \"../../Assets/TechIcons/Haskell.svg\";\nimport Java from \"../../Assets/TechIcons/Java.svg\";\nimport Python from \"../../Assets/TechIcons/Python.svg\";\nimport Typescript from \"../../Assets/TechIcons/Typescript.svg\";\nimport Git from \"../../Assets/TechIcons/Git.svg\";\nimport Firebase from \"../../Assets/TechIcons/Firebase.svg\";\nimport Redis from \"../../Assets/TechIcons/Redis.svg\";\nimport Docker from \"../../Assets/TechIcons/Docker.svg\";\nimport Mongo from \"../../Assets/TechIcons/Mongo.svg\";\nimport SQL from \"../../Assets/TechIcons/SQL.svg\";\nimport Kubernates from \"../../Assets/TechIcons/Kubernates.svg\";\nimport Redux from \"../../Assets/TechIcons/Redux.svg\";\nimport Tailwind from \"../../Assets/TechIcons/Tailwind.svg\";\nimport MUI from \"../../Assets/TechIcons/MUI.svg\";\nimport Postman from \"../../Assets/TechIcons/Postman.svg\";\nimport AWS from \"../../Assets/TechIcons/AWS.svg\";\nimport Kafka from \"../../Assets/TechIcons/Kafka.svg\";\n\nfunction Techstack() {\n  return (\n    <Row style={{ justifyContent: \"center\", paddingBottom: \"50px\" }}>\n      <Col xs={4} md={2} className=\"tech-icons\">\n        <img src={C} alt=\"C++\" />\n        <div className=\"tech-icons-text\">C++</div>\n      </Col>\n      <Col xs={4} md={2} className=\"tech-icons\">\n        <img src={Javascript} alt=\"javascript\" />\n        <div className=\"tech-icons-text\">Javascript</div>\n      </Col>\n      <Col xs={4} md={2} className=\"tech-icons\">\n        <img src={Typescript} alt=\"typescript\" />\n        <div className=\"tech-icons-text\">Javascript</div>\n      </Col>\n      <Col xs={4} md={2} className=\"tech-icons\">\n        <img src={Go} alt=\"go\" />\n        <div className=\"tech-icons-text\">Go</div>\n      </Col>\n      <Col xs={4} md={2} className=\"tech-icons\">\n        <img src={Node} alt=\"node\" />\n        <div className=\"tech-icons-text\">Node.Js</div>\n      </Col>\n      <Col xs={4} md={2} className=\"tech-icons\">\n        <img src={ReactIcon} alt=\"react\" />\n        <div className=\"tech-icons-text\">React.Js</div>\n      </Col>\n      <Col xs={4} md={2} className=\"tech-icons\">\n        <SiSolidity fontSize={\"24px\"} />\n        <div className=\"tech-icons-text\">Solidity</div>\n      </Col>\n      <Col xs={4} md={2} className=\"tech-icons\">\n        <img src={Mongo} alt=\"mongoDb\" />\n        <div className=\"tech-icons-text\">Mongo DB</div>\n      </Col>\n      <Col xs={4} md={2} className=\"tech-icons\">\n        <img src={Redux} alt=\"redux\" />\n        <div className=\"tech-icons-text\">Redux</div>\n      </Col>\n\n      <Col xs={4} md={2} className=\"tech-icons\">\n        <SiNextdotjs fontSize={\"24px\"} />\n        <div className=\"tech-icons-text\">Next.js</div>\n      </Col>\n      <Col xs={4} md={2} className=\"tech-icons\">\n        <img src={Git} alt=\"git\" />\n        <div className=\"tech-icons-text\">Git</div>\n      </Col>\n      <Col xs={4} md={2} className=\"tech-icons\">\n        <img src={Firebase} alt=\"firebase\" />\n        <div className=\"tech-icons-text\">Firebase</div>\n      </Col>\n      <Col xs={4} md={2} className=\"tech-icons\">\n        <img src={Redis} alt=\"redis\" />\n        <div className=\"tech-icons-text\">Redis</div>\n      </Col>\n      <Col xs={4} md={2} className=\"tech-icons\">\n        <img src={Docker} alt=\"docker\" />\n        <div className=\"tech-icons-text\">Docker</div>\n      </Col>\n      <Col xs={4} md={2} className=\"tech-icons\">\n        <img src={Kubernates} alt=\"kubernetes\" />\n        <div className=\"tech-icons-text\">Kubernetes</div>\n      </Col>\n\n      <Col xs={4} md={2} className=\"tech-icons\">\n        <img src={SQL} alt=\"SQL\" />\n        <div className=\"tech-icons-text\">Postgresql</div>\n      </Col>\n\n      <Col xs={4} md={2} className=\"tech-icons\">\n        <img src={Python} alt=\"Python\" />\n        <div className=\"tech-icons-text\">Python</div>\n      </Col>\n      <Col xs={4} md={2} className=\"tech-icons\">\n        <img src={Java} alt=\"haskell\" />\n        <div className=\"tech-icons-text\">Java</div>\n      </Col>\n      <Col xs={4} md={2} className=\"tech-icons\">\n        <img src={HaskellIcon} alt=\"haskell\" />\n        <div className=\"tech-icons-text\">Haskell</div>\n      </Col>\n\n      <Col xs={4} md={2} className=\"tech-icons\">\n        <img src={Tailwind} alt=\"tailwind\" />\n        <div className=\"tech-icons-text\">Tailwind CSS</div>\n      </Col>\n\n      <Col xs={4} md={2} className=\"tech-icons\">\n        <img src={MUI} alt=\"mui\" />\n        <div className=\"tech-icons-text\">Material UI</div>\n      </Col>\n\n      <Col xs={4} md={2} className=\"tech-icons\">\n        <img src={Postman} alt=\"Postman\" />\n        <div className=\"tech-icons-text\">Postman</div>\n      </Col>\n\n      <Col xs={4} md={2} className=\"tech-icons\">\n        <FaRust fontSize={\"24px\"} />\n        <div className=\"tech-icons-text\">Rust</div>\n      </Col>\n\n      <Col xs={4} md={2} className=\"tech-icons\">\n        <img src={AWS} alt=\"Postman\" className=\"tech-icon-images\" />\n        <div className=\"tech-icons-text\">AWS</div>\n      </Col>\n\n      <Col xs={4} md={2} className=\"tech-icons\">\n        <img src={Kafka} alt=\"Kafka\" className=\"tech-icon-images\" />\n        <div className=\"tech-icons-text\">Kafka</div>\n      </Col>\n    </Row>\n  );\n}\n\nexport default Techstack;\n"
  },
  {
    "path": "src/components/About/Toolstack.js",
    "content": "import React from \"react\";\nimport { Col, Row } from \"react-bootstrap\";\nimport macOs from \"../../Assets/TechIcons/Apple MacOSX.svg\";\nimport chrome from \"../../Assets/TechIcons/Google Chrome.svg\";\nimport vsCode from \"../../Assets/TechIcons/vscode.svg\";\nimport intelliJ from \"../../Assets/TechIcons/intellij-idea.svg\";\n\nfunction Toolstack() {\n  return (\n    <Row style={{ justifyContent: \"center\", paddingBottom: \"50px\" }}>\n      <Col xs={4} md={2} className=\"tech-icons\">\n        <img src={macOs} alt=\"macOs\" className=\"tech-icon-images\" />\n        <div className=\"tech-icons-text\">Mac Os</div>\n      </Col>\n      <Col xs={4} md={2} className=\"tech-icons \">\n        <img src={chrome} alt=\"Chrome\" className=\"tech-icon-images\" />\n        <div className=\"tech-icons-text\">Google Chrome</div>\n      </Col>\n      <Col xs={4} md={2} className=\"tech-icons \">\n        <img src={vsCode} alt=\"vsCode\" className=\"tech-icon-images\" />\n        <div className=\"tech-icons-text\">Vs Code</div>\n      </Col>\n\n      <Col xs={4} md={2} className=\"tech-icons \">\n        <img src={intelliJ} alt=\"go\" className=\"tech-icon-images\" />\n        <div className=\"tech-icons-text\">IntelliJ</div>\n      </Col>\n    </Row>\n  );\n}\n\nexport default Toolstack;\n"
  },
  {
    "path": "src/components/Footer.js",
    "content": "import React from \"react\";\nimport { Container, Row, Col } from \"react-bootstrap\";\nimport {\n  AiFillGithub,\n  AiOutlineTwitter,\n  AiFillInstagram,\n} from \"react-icons/ai\";\nimport { FaLinkedinIn } from \"react-icons/fa\";\n\nfunction Footer() {\n  let date = new Date();\n  let year = date.getFullYear();\n  return (\n    <Container fluid className=\"footer\">\n      <Row>\n        <Col md=\"4\" className=\"footer-copywright\">\n          <h3>Designed and Developed by Soumyajit Behera</h3>\n        </Col>\n        <Col md=\"4\" className=\"footer-copywright\">\n          <h3>Copyright © {year} SB</h3>\n        </Col>\n        <Col md=\"4\" className=\"footer-body\">\n          <ul className=\"footer-icons\">\n            <li className=\"social-icons\">\n              <a\n                href=\"https://github.com/soumyajit4419\"\n                style={{ color: \"white\" }}\n                target=\"_blank\" \n                rel=\"noopener noreferrer\"\n              >\n                <AiFillGithub />\n              </a>\n            </li>\n            <li className=\"social-icons\">\n              <a\n                href=\"https://twitter.com/Soumyajit4419\"\n                style={{ color: \"white\" }}\n                target=\"_blank\" \n                rel=\"noopener noreferrer\"\n              >\n                <AiOutlineTwitter />\n              </a>\n            </li>\n            <li className=\"social-icons\">\n              <a\n                href=\"https://www.linkedin.com/in/soumyajit4419/\"\n                style={{ color: \"white\" }}\n                target=\"_blank\" \n                rel=\"noopener noreferrer\"\n              >\n                <FaLinkedinIn />\n              </a>\n            </li>\n            <li className=\"social-icons\">\n              <a\n                href=\"https://www.instagram.com/soumyajit4419\"\n                style={{ color: \"white\" }}\n                target=\"_blank\" \n                rel=\"noopener noreferrer\"\n              >\n                <AiFillInstagram />\n              </a>\n            </li>\n          </ul>\n        </Col>\n      </Row>\n    </Container>\n  );\n}\n\nexport default Footer;\n"
  },
  {
    "path": "src/components/Home/Home.js",
    "content": "import React from \"react\";\nimport { Container, Row, Col } from \"react-bootstrap\";\nimport homeLogo from \"../../Assets/home-main.svg\";\nimport Particle from \"../Particle\";\nimport Home2 from \"./Home2\";\nimport Type from \"./Type\";\nimport Techstack from \"../About/Techstack\";\nimport Github from \"../About/Github\";\nimport {\n  AiFillGithub,\n  AiOutlineTwitter,\n  AiFillInstagram,\n} from \"react-icons/ai\";\nimport { FaLinkedinIn } from \"react-icons/fa\";\n\nfunction Home() {\n  return (\n    <section>\n      <Container fluid className=\"home-section\" id=\"home\">\n        <Particle />\n        <Container className=\"home-content\">\n          <Row>\n            <Col md={7} className=\"home-header\">\n              <h1 style={{ paddingBottom: 15 }} className=\"heading\">\n                Hi There!{\" \"}\n                <span className=\"wave\" role=\"img\" aria-labelledby=\"wave\">\n                  👋🏻\n                </span>\n              </h1>\n\n              <h1 className=\"heading-name\">\n                I'M\n                <strong className=\"main-name\"> SOUMYAJIT BEHERA</strong>\n              </h1>\n\n              <div style={{ padding: 50, textAlign: \"left\" }}>\n                <Type />\n              </div>\n            </Col>\n\n            <Col md={5} style={{ paddingBottom: 20 }}>\n              <img\n                src={homeLogo}\n                alt=\"home pic\"\n                className=\"img-fluid\"\n                style={{ maxHeight: \"450px\" }}\n              />\n            </Col>\n          </Row>\n        </Container>\n      </Container>\n      <Home2 />\n\n      <Container>\n        <Row style={{ paddingTop: \"50px\", paddingBottom: \"80px\" }}>\n          <Col md={12} className=\"home-about-social\">\n            <h1>Find Me On</h1>\n            <p>\n              Feel free to <span className=\"purple\">connect </span>with me\n            </p>\n            <ul className=\"home-about-social-links\">\n              <li className=\"social-icons\">\n                <a\n                  href=\"https://github.com/soumyajit4419\"\n                  target=\"_blank\"\n                  rel=\"noreferrer\"\n                  className=\"icon-colour  home-social-icons\"\n                >\n                  <AiFillGithub />\n                </a>\n              </li>\n              <li className=\"social-icons\">\n                <a\n                  href=\"https://twitter.com/Soumyajit4419\"\n                  target=\"_blank\"\n                  rel=\"noreferrer\"\n                  className=\"icon-colour  home-social-icons\"\n                >\n                  <AiOutlineTwitter />\n                </a>\n              </li>\n              <li className=\"social-icons\">\n                <a\n                  href=\"https://www.linkedin.com/in/soumyajit4419/\"\n                  target=\"_blank\"\n                  rel=\"noreferrer\"\n                  className=\"icon-colour  home-social-icons\"\n                >\n                  <FaLinkedinIn />\n                </a>\n              </li>\n              <li className=\"social-icons\">\n                <a\n                  href=\"https://www.instagram.com/soumyajit4419\"\n                  target=\"_blank\"\n                  rel=\"noreferrer\"\n                  className=\"icon-colour home-social-icons\"\n                >\n                  <AiFillInstagram />\n                </a>\n              </li>\n            </ul>\n          </Col>\n        </Row>\n      </Container>\n    </section>\n  );\n}\n\nexport default Home;\n"
  },
  {
    "path": "src/components/Home/Home2.js",
    "content": "import React from \"react\";\nimport { Container, Row, Col } from \"react-bootstrap\";\nimport myImg from \"../../Assets/avatar.svg\";\nimport Tilt from \"react-parallax-tilt\";\n\nfunction Home2() {\n  return (\n    <Container fluid className=\"home-about-section\" id=\"about\">\n      <Container>\n        <Row>\n          <Col md={8} className=\"home-about-description\">\n            <h1 style={{ fontSize: \"2.6em\" }}>\n              LET ME <span className=\"purple\"> INTRODUCE </span> MYSELF\n            </h1>\n            <p className=\"home-about-body\">\n              I’m a Software Engineer who loves transforming ideas into\n              reliable, scalable products. Over time, I’ve explored several\n              technologies and found my passion in building high-performance\n              systems and intuitive user experiences.\n              <br />\n              <br />\n              I’m proficient in\n              <i>\n                <b className=\"purple\">\n                  {\" \"}\n                  JavaScript, C++, Rust, Node.js, and Java{\" \"}\n                </b>\n              </i>\n              — and I enjoy working across both backend and frontend stacks.\n              <br />\n              <br />\n              My key areas of interest include developing\n              <i>\n                <b className=\"purple\">\n                  {\" \"}\n                  Web Applications, Blockchain Solutions,{\" \"}\n                </b>\n              </i>\n              and exploring new ways to bridge on-chain and off-chain systems.\n              <br />\n              <br />\n              Whenever possible, I love building projects with\n              <b className=\"purple\"> Node.js </b> and modern frameworks like{\" \"}\n              <i>\n                <b className=\"purple\">React.js</b> and{\" \"}\n                <b className=\"purple\">Next.js</b>.\n              </i>\n            </p>\n          </Col>\n          <Col md={4} className=\"myAvtar\">\n            <Tilt>\n              <img src={myImg} className=\"img-fluid\" alt=\"avatar\" />\n            </Tilt>\n          </Col>\n        </Row>\n      </Container>\n    </Container>\n  );\n}\nexport default Home2;\n"
  },
  {
    "path": "src/components/Home/Type.js",
    "content": "import React from \"react\";\nimport Typewriter from \"typewriter-effect\";\n\nfunction Type() {\n  return (\n    <Typewriter\n      options={{\n        strings: [\n          \"Software Developer\",\n          \"Freelancer\",\n          \"MERN Stack Developer\",\n          \"Open Source Contributor\",\n        ],\n        autoStart: true,\n        loop: true,\n        deleteSpeed: 50,\n      }}\n    />\n  );\n}\n\nexport default Type;\n"
  },
  {
    "path": "src/components/Navbar.js",
    "content": "import React, { useState } from \"react\";\nimport Navbar from \"react-bootstrap/Navbar\";\nimport Nav from \"react-bootstrap/Nav\";\nimport Container from \"react-bootstrap/Container\";\nimport logo from \"../Assets/logo.png\";\nimport Button from \"react-bootstrap/Button\";\nimport { Link } from \"react-router-dom\";\nimport { CgGitFork } from \"react-icons/cg\";\nimport { ImBlog } from \"react-icons/im\";\nimport {\n  AiFillStar,\n  AiOutlineHome,\n  AiOutlineFundProjectionScreen,\n  AiOutlineUser,\n} from \"react-icons/ai\";\n\nimport { CgFileDocument } from \"react-icons/cg\";\n\nfunction NavBar() {\n  const [expand, updateExpanded] = useState(false);\n  const [navColour, updateNavbar] = useState(false);\n\n  function scrollHandler() {\n    if (window.scrollY >= 20) {\n      updateNavbar(true);\n    } else {\n      updateNavbar(false);\n    }\n  }\n\n  window.addEventListener(\"scroll\", scrollHandler);\n\n  return (\n    <Navbar\n      expanded={expand}\n      fixed=\"top\"\n      expand=\"md\"\n      className={navColour ? \"sticky\" : \"navbar\"}\n    >\n      <Container>\n        <Navbar.Brand href=\"/\" className=\"d-flex\">\n          <img src={logo} className=\"img-fluid logo\" alt=\"brand\" />\n        </Navbar.Brand>\n        <Navbar.Toggle\n          aria-controls=\"responsive-navbar-nav\"\n          onClick={() => {\n            updateExpanded(expand ? false : \"expanded\");\n          }}\n        >\n          <span></span>\n          <span></span>\n          <span></span>\n        </Navbar.Toggle>\n        <Navbar.Collapse id=\"responsive-navbar-nav\">\n          <Nav className=\"ms-auto\" defaultActiveKey=\"#home\">\n            <Nav.Item>\n              <Nav.Link as={Link} to=\"/\" onClick={() => updateExpanded(false)}>\n                <AiOutlineHome style={{ marginBottom: \"2px\" }} /> Home\n              </Nav.Link>\n            </Nav.Item>\n\n            <Nav.Item>\n              <Nav.Link\n                as={Link}\n                to=\"/about\"\n                onClick={() => updateExpanded(false)}\n              >\n                <AiOutlineUser style={{ marginBottom: \"2px\" }} /> About\n              </Nav.Link>\n            </Nav.Item>\n\n            <Nav.Item>\n              <Nav.Link\n                as={Link}\n                to=\"/project\"\n                onClick={() => updateExpanded(false)}\n              >\n                <AiOutlineFundProjectionScreen\n                  style={{ marginBottom: \"2px\" }}\n                />{\" \"}\n                Projects\n              </Nav.Link>\n            </Nav.Item>\n\n            <Nav.Item>\n              <Nav.Link\n                as={Link}\n                to=\"/resume\"\n                onClick={() => updateExpanded(false)}\n              >\n                <CgFileDocument style={{ marginBottom: \"2px\" }} /> Resume\n              </Nav.Link>\n            </Nav.Item>\n\n            <Nav.Item>\n              <Nav.Link\n                href=\"https://soumyajitblogs.vercel.app/\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                <ImBlog style={{ marginBottom: \"2px\" }} /> Blogs\n              </Nav.Link>\n            </Nav.Item>\n\n            <Nav.Item className=\"fork-btn\">\n              <Button\n                href=\"https://github.com/soumyajit4419/Portfolio\"\n                target=\"_blank\"\n                className=\"fork-btn-inner\"\n              >\n                <CgGitFork style={{ fontSize: \"1.2em\" }} />{\" \"}\n                <AiFillStar style={{ fontSize: \"1.1em\" }} />\n              </Button>\n            </Nav.Item>\n          </Nav>\n        </Navbar.Collapse>\n      </Container>\n    </Navbar>\n  );\n}\n\nexport default NavBar;\n"
  },
  {
    "path": "src/components/Particle.js",
    "content": "import React from \"react\";\nimport Particles from \"react-tsparticles\";\n\nfunction Particle() {\n  return (\n    <Particles\n      id=\"tsparticles\"\n      params={{\n        particles: {\n          number: {\n            value: 160,\n            density: {\n              enable: true,\n              value_area: 1500,\n            },\n          },\n          line_linked: {\n            enable: false,\n            opacity: 0.03,\n          },\n          move: {\n            direction: \"right\",\n            speed: 0.05,\n          },\n          size: {\n            value: 1,\n          },\n          opacity: {\n            anim: {\n              enable: true,\n              speed: 1,\n              opacity_min: 0.05,\n            },\n          },\n        },\n        interactivity: {\n          events: {\n            onclick: {\n              enable: true,\n              mode: \"push\",\n            },\n          },\n          modes: {\n            push: {\n              particles_nb: 1,\n            },\n          },\n        },\n        retina_detect: true,\n      }}\n    />\n  );\n}\n\nexport default Particle;\n"
  },
  {
    "path": "src/components/Pre.js",
    "content": "import React from \"react\";\nfunction Pre(props) {\n  return <div id={props.load ? \"preloader\" : \"preloader-none\"}></div>;\n}\n\nexport default Pre;\n"
  },
  {
    "path": "src/components/Projects/ProjectCards.js",
    "content": "import React from \"react\";\nimport Card from \"react-bootstrap/Card\";\nimport Button from \"react-bootstrap/Button\";\nimport { CgWebsite } from \"react-icons/cg\";\nimport { BsGithub } from \"react-icons/bs\";\n\nfunction ProjectCards(props) {\n  return (\n    <Card className=\"project-card-view\">\n      <Card.Img variant=\"top\" src={props.imgPath} alt=\"card-img\" />\n      <Card.Body>\n        <Card.Title>{props.title}</Card.Title>\n        <Card.Text style={{ textAlign: \"justify\" }}>\n          {props.description}\n        </Card.Text>\n        <Button variant=\"primary\" href={props.ghLink} target=\"_blank\">\n          <BsGithub /> &nbsp;\n          {props.isBlog ? \"Blog\" : \"GitHub\"}\n        </Button>\n        {\"\\n\"}\n        {\"\\n\"}\n\n        {/* If the component contains Demo link and if it's not a Blog then, it will render the below component  */}\n\n        {!props.isBlog && props.demoLink && (\n          <Button\n            variant=\"primary\"\n            href={props.demoLink}\n            target=\"_blank\"\n            style={{ marginLeft: \"10px\" }}\n          >\n            <CgWebsite /> &nbsp;\n            {\"Demo\"}\n          </Button>\n        )}\n      </Card.Body>\n    </Card>\n  );\n}\nexport default ProjectCards;\n"
  },
  {
    "path": "src/components/Projects/Projects.js",
    "content": "import React from \"react\";\nimport { Container, Row, Col } from \"react-bootstrap\";\nimport ProjectCard from \"./ProjectCards\";\nimport Particle from \"../Particle\";\nimport leaf from \"../../Assets/Projects/leaf.png\";\nimport emotion from \"../../Assets/Projects/emotion.png\";\nimport editor from \"../../Assets/Projects/codeEditor.png\";\nimport chatify from \"../../Assets/Projects/chatify.png\";\nimport suicide from \"../../Assets/Projects/suicide.png\";\nimport bitsOfCode from \"../../Assets/Projects/blog.png\";\n\nfunction Projects() {\n  return (\n    <Container fluid className=\"project-section\">\n      <Particle />\n      <Container>\n        <h1 className=\"project-heading\">\n          My Recent <strong className=\"purple\">Works </strong>\n        </h1>\n        <p style={{ color: \"white\" }}>\n          Here are a few projects I've worked on recently.\n        </p>\n        <Row style={{ justifyContent: \"center\", paddingBottom: \"10px\" }}>\n          <Col md={4} className=\"project-card\">\n            <ProjectCard\n              imgPath={chatify}\n              isBlog={false}\n              title=\"Chatify\"\n              description=\"Personal Chat Room or Workspace to share resources and hangout with friends build with react.js, Material-UI, and Firebase. Have features which allows user for realtime messaging, image sharing as well as supports reactions on messages.\"\n              ghLink=\"https://github.com/soumyajit4419/Chatify\"\n              demoLink=\"https://chatify-49.web.app/\"\n            />\n          </Col>\n\n          <Col md={4} className=\"project-card\">\n            <ProjectCard\n              imgPath={bitsOfCode}\n              isBlog={false}\n              title=\"Bits-0f-C0de\"\n              description=\"My personal blog page build with Next.js and Tailwind Css which takes the content from makdown files and renders it using Next.js. Supports dark mode and easy to write blogs using markdown.\"\n              ghLink=\"https://github.com/soumyajit4419/Bits-0f-C0de\"\n              demoLink=\"https://blogs.soumya-jit.tech/\"\n            />\n          </Col>\n\n          <Col md={4} className=\"project-card\">\n            <ProjectCard\n              imgPath={editor}\n              isBlog={false}\n              title=\"Editor.io\"\n              description=\"Online code and markdown editor build with react.js. Online Editor which supports html, css, and js code with instant view of website. Online markdown editor for building README file which supports GFM, Custom Html tags with toolbar and instant preview.Both the editor supports auto save of work using Local Storage\"\n              ghLink=\"https://github.com/soumyajit4419/Editor.io\"\n              demoLink=\"https://editor.soumya-jit.tech/\"              \n            />\n          </Col>\n\n          <Col md={4} className=\"project-card\">\n            <ProjectCard\n              imgPath={leaf}\n              isBlog={false}\n              title=\"Plant AI\"\n              description=\"Used the plant disease dataset from Kaggle and trained a image classifer model using 'PyTorch' framework using CNN and Transfer Learning with 38 classes of various plant leaves. The model was successfully able to detect diseased and healthy leaves of 14 unique plants. I was able to achieve an accuracy of 98% by using Resnet34 pretrained model.\"\n              ghLink=\"https://github.com/soumyajit4419/Plant_AI\"\n              demoLink=\"https://plant49-ai.herokuapp.com/\"\n            />\n          </Col>\n\n          <Col md={4} className=\"project-card\">\n            <ProjectCard\n              imgPath={suicide}\n              isBlog={false}\n              title=\"Ai For Social Good\"\n              description=\"Using 'Natural Launguage Processing' for the detection of suicide-related posts and user's suicide ideation in cyberspace  and thus helping in sucide prevention.\"\n              ghLink=\"https://github.com/soumyajit4419/AI_For_Social_Good\"\n              // demoLink=\"https://www.youtube.com/watch?v=dQw4w9WgXcQ&ab_channel=RickAstley\" <--------Please include a demo link here\n            />\n          </Col>\n\n          <Col md={4} className=\"project-card\">\n            <ProjectCard\n              imgPath={emotion}\n              isBlog={false}\n              title=\"Face Recognition and Emotion Detection\"\n              description=\"Trained a CNN classifier using 'FER-2013 dataset' with Keras and tensorflow backened. The classifier sucessfully predicted the various types of emotions of human. And the highest accuracy obtained with the model was 60.1%.\n              Then used Open-CV to detect the face in an image and then pass the face to the classifer to predict the emotion of a person.\"\n              ghLink=\"https://github.com/soumyajit4419/Face_And_Emotion_Detection\"\n              // demoLink=\"https://blogs.soumya-jit.tech/\"      <--------Please include a demo link here \n            />\n          </Col>\n        </Row>\n      </Container>\n    </Container>\n  );\n}\n\nexport default Projects;\n"
  },
  {
    "path": "src/components/Resume/ResumeNew.js",
    "content": "import React, { useState, useEffect } from \"react\";\nimport { Container, Row } from \"react-bootstrap\";\nimport Button from \"react-bootstrap/Button\";\nimport Particle from \"../Particle\";\nimport pdf from \"../../Assets/../Assets/Soumyajit_Behera.pdf\";\nimport { AiOutlineDownload } from \"react-icons/ai\";\nimport { Document, Page, pdfjs } from \"react-pdf\";\nimport \"react-pdf/dist/esm/Page/AnnotationLayer.css\";\npdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`;\n\nfunction ResumeNew() {\n  const [width, setWidth] = useState(1200);\n\n  useEffect(() => {\n    setWidth(window.innerWidth);\n  }, []);\n\n  return (\n    <div>\n      <Container fluid className=\"resume-section\">\n        <Particle />\n        <Row style={{ justifyContent: \"center\", position: \"relative\" }}>\n          <Button\n            variant=\"primary\"\n            href={pdf}\n            target=\"_blank\"\n            style={{ maxWidth: \"250px\" }}\n          >\n            <AiOutlineDownload />\n            &nbsp;Download CV\n          </Button>\n        </Row>\n\n        <Row className=\"resume\">\n          <Document file={pdf} className=\"d-flex justify-content-center\">\n            <Page pageNumber={1} scale={width > 786 ? 1.7 : 0.6} />\n          </Document>\n        </Row>\n\n        <Row style={{ justifyContent: \"center\", position: \"relative\" }}>\n          <Button\n            variant=\"primary\"\n            href={pdf}\n            target=\"_blank\"\n            style={{ maxWidth: \"250px\" }}\n          >\n            <AiOutlineDownload />\n            &nbsp;Download CV\n          </Button>\n        </Row>\n      </Container>\n    </div>\n  );\n}\n\nexport default ResumeNew;\n"
  },
  {
    "path": "src/components/ScrollToTop.js",
    "content": "import { useEffect } from \"react\";\nimport { useLocation } from \"react-router-dom\";\n\nfunction ScrollToTop() {\n  const { pathname } = useLocation();\n  useEffect(() => {\n    window.scrollTo(0, 0);\n  }, [pathname]);\n  return null;\n}\n\nexport default ScrollToTop;\n"
  },
  {
    "path": "src/index.css",
    "content": "/* @import url('https://fonts.googleapis.com/css2?family=Outfit&display=swap'); */\n\n@import url(\"https://fonts.googleapis.com/css2?family=Outfit&family=PT+Mono&display=swap\");\n\nbody {\n  margin: 0;\n  font-family: \"PT Mono\", monospace !important;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  background-image: linear-gradient(to left, rgb(27 20 41), rgb(20 15 35));\n}\n"
  },
  {
    "path": "src/index.js",
    "content": "import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport \"./index.css\";\nimport App from \"./App\";\nimport reportWebVitals from \"./reportWebVitals\";\n\nReactDOM.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>,\n  document.getElementById(\"root\")\n);\n\n// If you want to start measuring performance in your app, pass a function\n// to log results (for example: reportWebVitals(console.log))\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\nreportWebVitals();\n"
  },
  {
    "path": "src/reportWebVitals.js",
    "content": "const reportWebVitals = onPerfEntry => {\n  if (onPerfEntry && onPerfEntry instanceof Function) {\n    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\n      getCLS(onPerfEntry);\n      getFID(onPerfEntry);\n      getFCP(onPerfEntry);\n      getLCP(onPerfEntry);\n      getTTFB(onPerfEntry);\n    });\n  }\n};\n\nexport default reportWebVitals;\n"
  },
  {
    "path": "src/setupTests.js",
    "content": "// jest-dom adds custom jest matchers for asserting on DOM nodes.\n// allows you to do things like:\n// expect(element).toHaveTextContent(/react/i)\n// learn more: https://github.com/testing-library/jest-dom\nimport '@testing-library/jest-dom';\n"
  },
  {
    "path": "src/style.css",
    "content": "html {\n  --section-background-color: linear-gradient(\n    to bottom left,\n    rgba(17, 16, 16, 0.582),\n    rgba(12, 8, 24, 0.904)\n  );\n\n  --image-gradient: linear-gradient(\n    to bottom left,\n    rgba(17, 16, 16, 0.678),\n    rgba(12, 10, 22, 0.863)\n  );\n\n  --imp-text-color: #c770f0;\n}\n\n.purple {\n  color: var(--imp-text-color) !important;\n}\n\nbutton:focus {\n  box-shadow: none !important;\n}\n\n/* --------- */\n/*  Preloader */\n/* --------- */\n#preloader {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 999999;\n  background-color: #0c0513;\n  background-image: url(./Assets/pre.svg);\n  background-repeat: no-repeat;\n  background-position: center;\n}\n\n#preloader-none {\n  opacity: 0;\n}\n\n/* #preloader-none {\n  opacity: 0;\n  display: none;\n} */\n\n#no-scroll {\n  overflow: hidden;\n  height: 100vh;\n}\n\n/* --------- */\n/*Scrollbar   */\n/* --------- */\n\n::-webkit-scrollbar {\n  width: 7px;\n}\n\n/* Track */\n::-webkit-scrollbar-track {\n  background: #2d1950;\n}\n\n/* Handle */\n::-webkit-scrollbar-thumb {\n  background: rgba(178, 121, 216, 0.959);\n  border-radius: 12px;\n}\n\n/* Handle on hover */\n::-webkit-scrollbar-thumb:hover {\n  background: rgba(222, 130, 235, 0.911);\n  border-radius: 12px;\n}\n\n/* --------- */\n/* Navbar Section  */\n/* --------- */\n.sticky {\n  background-color: #1b1a2ea9 !important;\n  transition: all 0.3s ease-out 0s !important;\n  box-shadow: 0px 10px 10px 0px rgba(9, 5, 29, 0.171) !important;\n  backdrop-filter: blur(15px) !important;\n}\n\n.navbar {\n  position: fixed !important;\n  transition: all 0.3s ease-out 0s !important;\n  padding: 0.3rem 2rem !important;\n  font-size: 1.2rem !important;\n}\n\n.navbar-toggler {\n  position: relative !important;\n  background-color: transparent !important;\n  border-color: transparent !important;\n}\n\n.navbar-toggler span {\n  display: block !important;\n  background-color: #be50f4 !important;\n  height: 4px !important;\n  width: 27px !important;\n  margin-top: 5px !important;\n  margin-bottom: 5px !important;\n  transform: rotate(0deg) !important;\n  left: 0 !important;\n  opacity: 1 !important;\n}\n\n.navbar-toggler:focus,\n.navbar-toggler:active {\n  outline: 0 !important;\n}\n\n.navbar-toggler span:nth-child(1),\n.navbar-toggler span:nth-child(3) {\n  transition: transform 0.35s ease-in-out !important;\n  transition: transform 0.35s ease-in-out !important;\n}\n\n.navbar-toggler:not(.collapsed) span:nth-child(1) {\n  position: absolute !important;\n  left: 12px !important;\n  top: 10px !important;\n  transform: rotate(135deg) !important;\n  opacity: 0.9 !important;\n}\n\n.navbar-toggler:not(.collapsed) span:nth-child(2) {\n  height: 12px !important;\n  visibility: hidden !important;\n  background-color: transparent !important;\n}\n\n.navbar-toggler:not(.collapsed) span:nth-child(3) {\n  position: absolute !important;\n  left: 12px !important;\n  top: 10px !important;\n  transform: rotate(-135deg) !important;\n  opacity: 0.9 !important;\n}\n\n@media (max-width: 767px) {\n  .navbar {\n    padding: 1rem 2rem !important;\n    font-size: 1.4rem !important;\n    background-color: #181a27 !important;\n  }\n  .navbar-nav .nav-item a::after {\n    display: none !important;\n  }\n}\n.navbar-brand {\n  color: rgb(250, 250, 250) !important;\n}\n\n.logo {\n  height: 1.4em !important;\n  width: 2.5em !important;\n}\n\n.navbar-nav .nav-link {\n  color: white !important;\n  padding-right: 1rem !important;\n  padding-left: 1rem !important;\n}\n\n.nav-link {\n  padding: 0.8rem 1rem !important;\n}\n\n@media (max-width: 767px) {\n  .nav-link {\n    padding: 0.7rem 1rem !important;\n  }\n}\n\n.navbar-nav .nav-item {\n  position: relative;\n  margin-left: 20px;\n}\n\n.navbar-nav .nav-item a {\n  font-weight: 400;\n  transition: all 0.3s ease-out 0s;\n  position: relative;\n  z-index: 1;\n}\n\n.navbar-nav .nav-item a::after {\n  content: \"\";\n  position: relative;\n  display: block;\n  height: 5px;\n  width: 0;\n  border-radius: 16px;\n  background: #c95bf5;\n  bottom: 1px;\n  left: 0;\n  z-index: -1;\n  transition: all 0.3s ease-out 0s;\n}\n\n.navbar-nav .nav-item a:hover::after {\n  width: 100%;\n}\n\n/* --------- */\n/* Home section */\n/* --------- */\n.wave {\n  animation-name: wave-animation; /* Refers to the name of your @keyframes element below */\n  animation-duration: 2.1s; /* Change to speed up or slow down */\n  animation-iteration-count: infinite; /* Never stop waving :) */\n  transform-origin: 70% 70%; /* Pivot around the bottom-left palm */\n  display: inline-block;\n}\n\n@keyframes wave-animation {\n  0% {\n    transform: rotate(0deg);\n  }\n  10% {\n    transform: rotate(14deg);\n  } /* The following five values can be played with to make the waving more or less extreme */\n  20% {\n    transform: rotate(-8deg);\n  }\n  30% {\n    transform: rotate(14deg);\n  }\n  40% {\n    transform: rotate(-4deg);\n  }\n  50% {\n    transform: rotate(10deg);\n  }\n  60% {\n    transform: rotate(0deg);\n  } /* Reset for the last half to pause */\n  100% {\n    transform: rotate(0deg);\n  }\n}\n#tsparticles {\n  position: fixed !important;\n  background-repeat: no-repeat !important;\n  background-size: cover !important;\n  width: 100%;\n  height: 100%;\n}\n\n.home-header {\n  padding-top: 80px !important;\n}\n\n.home-section {\n  position: relative;\n  z-index: -1;\n  /* background-image: var(--image-gradient), url(./Assets/home-bg.jpg); */\n  background-position: top center;\n  background-repeat: no-repeat;\n  padding-bottom: 30px !important;\n  padding-top: 30px !important;\n}\n\n.home-content {\n  padding: 9rem 0 2rem !important;\n  color: whitesmoke;\n  text-align: left;\n}\n\n.heading {\n  font-size: 2.4em !important;\n  padding-left: 50px !important;\n}\n\n.heading-name {\n  font-size: 2.5em !important;\n  padding-left: 45px !important;\n}\n\n.main-name {\n  color: #cd5ff8;\n}\n\n.Typewriter__wrapper {\n  font-size: 2.2em !important;\n  color: #be6adf !important;\n  font-weight: 600 !important;\n}\n.Typewriter__cursor {\n  font-size: 2.4em !important;\n  color: #b562d6 !important;\n}\n\n@media (max-width: 767px) {\n  .Typewriter__wrapper {\n    font-size: 1.4em !important;\n    font-weight: 500 !important;\n    position: absolute !important;\n  }\n  .Typewriter__cursor {\n    display: none !important;\n  }\n}\n\n.myAvtar {\n  justify-content: center !important;\n  padding-top: 9em !important;\n}\n\n@media (max-width: 767px) {\n  .myAvtar {\n    padding-top: 2em !important;\n    padding-bottom: 2em !important;\n  }\n}\n\n.home-about-section {\n  position: relative;\n  padding-bottom: 70px !important;\n  padding-top: 70px !important;\n}\n\n.home-about-description {\n  color: white !important;\n  padding-top: 100px !important;\n  padding-bottom: 20px !important;\n  text-align: center;\n}\n\n.home-about-body {\n  padding-top: 50px;\n  font-size: 1.2em !important;\n  text-align: left;\n}\n\n.home-about-social {\n  text-align: center !important;\n  padding-top: 25px;\n  color: white !important;\n}\n\n.home-about-social-links {\n  justify-content: center !important;\n  padding-top: 15px !important;\n  display: inline-block !important;\n  position: relative !important;\n  padding-inline-start: 0 !important;\n}\n\n.home-social-icons {\n  position: relative !important;\n  display: inline-block !important;\n  width: 40px !important;\n  height: 40px !important;\n  text-align: center !important;\n  font-size: 1.2em !important;\n  line-height: 2em !important;\n  background: rgba(255, 255, 255, 0.972) !important;\n  border-radius: 50% !important;\n  transition: 0.5s !important;\n}\n\n.home-social-icons::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  background: #68187a;\n  transition: 0.5s;\n  transform: scale(0.9);\n  z-index: -1;\n}\n\n.home-social-icons:hover::before {\n  transform: scale(1.1);\n  box-shadow: 0 0 15px #801f95;\n}\n\n.home-social-icons:hover {\n  color: #87209e;\n  box-shadow: 0 0 5px #87209e;\n  text-shadow: 0 0 2px #87209e;\n}\n\n.social-icons {\n  display: inline-block !important;\n  padding-right: 15px;\n  padding-left: 15px;\n}\n\n.icon-colour {\n  color: #700c86 !important;\n}\n\n/* --------- */\n/* Footer */\n/* --------- */\n.footer {\n  background-color: rgb(10, 4, 22);\n  bottom: 0 !important;\n  padding-top: 10px !important;\n  padding-bottom: 8px !important ;\n}\n.footer-copywright {\n  text-align: center !important;\n}\n\n.footer-body {\n  z-index: 1;\n  text-align: center !important;\n}\n\n@media (max-width: 767px) {\n  .footer-copywright {\n    text-align: center !important;\n  }\n\n  .footer-body {\n    text-align: center !important;\n  }\n}\n\n.footer h3 {\n  font-size: 1em;\n  color: white !important;\n  margin-top: 0.5em !important;\n  margin-bottom: 0.5em !important;\n}\n.footer-icons {\n  margin-top: 0.5em !important;\n  margin-bottom: 0.5em !important;\n  padding: 0 !important;\n}\n\n.blockquote-footer {\n  color: #a588c0 !important;\n}\n/* --------- */\n/* Projects */\n/* --------- */\n.project-section {\n  position: relative !important;\n  padding-top: 150px !important;\n  padding-bottom: 30px !important;\n  background-image: var(--section-background-color) !important;\n}\n\n.project-card {\n  padding-top: 50px !important;\n  padding-bottom: 50px !important;\n  padding-left: 25px !important;\n  padding-right: 25px !important;\n  height: auto !important;\n}\n\n.project-card-view {\n  box-shadow: 0 4px 5px 3px rgba(119, 53, 136, 0.459) !important;\n  color: white !important;\n  background-color: transparent !important;\n  opacity: 0.9 !important;\n  transition: all 0.5s ease 0s !important;\n  height: 100% !important;\n}\n.project-card-view:hover {\n  transform: scale(1.02) !important;\n  overflow: hidden !important;\n  box-shadow: 0 4px 4px 5px rgba(129, 72, 144, 0.561) !important;\n}\n\n.blog-card {\n  padding-top: 50px !important;\n  padding-bottom: 50px !important;\n  padding-left: 25px !important;\n  padding-right: 25px !important;\n  height: auto !important;\n}\n\n.blog-card-view {\n  background-color: transparent !important;\n  box-shadow: 0 3px 3px 2px rgba(145, 77, 161, 0.459) !important;\n  color: white !important;\n  transition: all 0.5s ease 0s !important;\n  height: 100% !important;\n}\n\n.blog-link {\n  color: white !important;\n  text-decoration: none !important;\n}\n\n.blog-link:hover {\n  cursor: pointer !important;\n}\n\n.blog-card-view:hover {\n  transform: scale(1.02) !important;\n  overflow: hidden !important;\n  box-shadow: 0 3px 3px 5px rgba(155, 88, 173, 0.65) !important;\n}\n\n.card-img-top {\n  padding: 20px !important;\n  opacity: 0.8 !important;\n  border-radius: 10px !important;\n}\n\n.blog-img {\n  padding: 0px !important;\n  opacity: 0.8 !important;\n  border-radius: 0px !important;\n}\n\n.btn-primary {\n  color: #fff !important;\n  background-color: #623686 !important;\n  border-color: #623686 !important;\n}\n\n.btn-primary:hover {\n  color: #fff !important;\n  background-color: #6d20c5d7 !important;\n  border-color: #6d20c5d7 !important;\n}\n.btn:focus {\n  outline: none !important;\n  box-shadow: none !important;\n}\n.project-heading {\n  color: white !important;\n  font-size: 2.3em !important;\n  font-weight: 500 !important;\n  padding-top: 10px !important;\n}\n\n/* --------- */\n/* About */\n/* --------- */\n\n.about-section {\n  position: relative !important;\n  padding-top: 150px !important;\n  padding-bottom: 30px !important;\n  /* background-image: var(--section-background-color) !important; */\n  color: white !important;\n}\n\n.tech-icons {\n  display: flex !important;\n  align-self: center !important;\n  justify-content: center !important;\n  font-size: 1rem !important;\n  margin: 15px !important;\n  padding: 10px 20px !important;\n  opacity: 0.93 !important;\n  outline: 1.7px solid rgba(200, 137, 230, 0.637) !important;\n  vertical-align: middle !important;\n  text-align: center !important;\n  border-radius: 24px !important;\n  box-shadow: 4px 5px 4px 3px rgba(89, 4, 168, 0.137) !important;\n  overflow: hidden !important;\n  transition: all 0.4s ease 0s !important;\n  width: fit-content !important;\n  cursor: pointer !important;\n  transition: outline-color 0.3s, outline-width 0.3s, transform 0.3s;\n  color: white;\n}\n\n.tech-icons-text {\n  display: flex;\n  align-items: center;\n  margin-left: 10px;\n  color: white;\n}\n\n@media (max-width: 767px) {\n  .tech-icons {\n    margin: 10px !important;\n  }\n}\n\n.tech-icons:hover {\n  transform: scale(1.05) !important;\n  overflow: hidden !important;\n  outline: 2.2px solid rgba(197, 115, 230, 0.883) !important;\n}\n.tech-icon-images {\n  height: 1.6rem;\n  line-height: 1.6 !important;\n}\n\n.quote-card-view {\n  border: none !important;\n  color: white !important;\n  background-color: transparent !important;\n}\n\n.about-activity {\n  list-style: none !important;\n  text-align: left !important;\n  padding-left: 1px !important;\n}\n\n@media (max-width: 767px) {\n  .about-img {\n    padding-top: 0 !important;\n  }\n}\n/* --------- */\n/* Resume */\n/* --------- */\n\n.resume-section {\n  position: relative !important;\n  padding-top: 110px !important;\n  padding-bottom: 30px !important;\n  background-image: var(--section-background-color) !important;\n  color: white !important;\n}\n\n.resume {\n  padding-top: 50px;\n  padding-bottom: 50px;\n  justify-content: center;\n}\n\n.resume-left {\n  padding-right: 80px !important;\n}\n\n.resume-right {\n  padding-left: 80px !important;\n}\n\n@media (max-width: 767px) {\n  .resume-left {\n    padding-right: 15px !important;\n    padding-left: 15px !important;\n  }\n\n  .resume-right {\n    padding-right: 15px !important;\n    padding-left: 15px !important;\n  }\n}\n.resume .resume-title {\n  font-size: 2em;\n  font-weight: 700;\n  padding-top: 30px;\n  padding-bottom: 30px;\n}\n\n.resume .resume-item {\n  padding: 0 0 10px 25px;\n  margin-top: -2px;\n  border-left: 2px solid #8a49a8;\n  position: relative;\n}\n\n.resume .resume-item .resume-title {\n  line-height: 18px;\n  font-size: 0.9em;\n  background: #5234795d;\n  padding: 8px 15px;\n  display: inline-block;\n  font-weight: 600;\n  margin-bottom: 10px;\n}\n\n.resume .resume-item ul {\n  padding-left: 20px;\n  text-align: justify;\n}\n\n.resume .resume-item ul li {\n  padding-bottom: 10px;\n  list-style: none;\n}\n\n.resume .resume-item:last-child {\n  padding-bottom: 0;\n}\n\n.resume .resume-item::before {\n  content: \"\";\n  position: absolute;\n  width: 16px;\n  height: 16px;\n  border-radius: 50px;\n  left: -9px;\n  top: 0;\n  background: #fff;\n  border: 2px solid #8a49a8;\n}\n\n.like-item {\n  padding-top: 10px !important;\n  font-size: 1.1em !important;\n  font-family: sans-serif !important;\n}\n\n.like-btn {\n  background-color: #934cce5e !important;\n  border-color: #934cce5e !important;\n  padding: 0.25rem 0.98rem !important;\n  border-radius: 5px !important;\n  line-height: 1.4 !important;\n  transition: 0.3s ease !important;\n}\n\n.like-btn:hover {\n  transform: translateY(-2px) !important;\n  background-color: #a24dd386 !important;\n  border-color: #a24dd386 !important;\n}\n\n.animate-like {\n  animation-name: likeAnimation;\n  animation-fill-mode: forwards;\n  animation-duration: 0.85s;\n}\n@keyframes likeAnimation {\n  0% {\n    transform: scale(1.5);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n\n.fork-btn {\n  font-size: 1.1em !important;\n  padding-top: 10px !important;\n}\n\n.fork-btn-inner {\n  line-height: 1.4em !important;\n  background-color: #934cce5e !important;\n  padding: 0.25rem 1.1rem !important;\n  vertical-align: middle !important;\n  text-align: center !important;\n}\n\n.fork-btn-inner:hover {\n  transform: translateY(-2px) !important;\n  background-color: #a24dd386 !important;\n  border-color: #a24dd386 !important;\n}\n.fork-btn-inner::after {\n  display: none !important;\n}\n"
  }
]