added project used react icons

mabubakr1113 · May 6, 2021 · 3944e1a · 3944e1a
1 parent e56cf5f
commit 3944e1a
Show file tree

Hide file tree

Showing 23 changed files with 190 additions and 125 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "react-bootstrap": "^1.4.0",
     "react-dom": "^17.0.1",
     "react-github-calendar": "^2.0.2",
+    "react-icons": "^4.2.0",
     "react-parallax-tilt": "^1.4.68",
     "react-particles-js": "^3.4.1",
     "react-router-dom": "^5.2.0",

diff --git a/public/index.html b/public/index.html
@@ -31,9 +31,6 @@
   <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">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@master/devicon.min.css">
-  <link rel="stylesheet" href="https://unpkg.com/@coreui/[email protected]/css/all.min.css">
 </head>
 
 <body>

diff --git a/src/App.js b/src/App.js
@@ -1,4 +1,3 @@
-import "./App.css";
 import React, { useState, useEffect } from "react";
 import Preloader from "../src/components/Pre";
 import Navbar from "./components/Navbar";
@@ -9,15 +8,19 @@ import Footer from "./components/Footer";
 import Resume from "./components/Resume/Resume";
 import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
 import "./style.css";
+import "./App.css";
 import "bootstrap/dist/css/bootstrap.min.css";
+
 import ScrollToTop from "./components/ScrollToTop";
+
 function App() {
   const [load, upadateLoad] = useState(true);
   useEffect(() => {
     setTimeout(() => {
       upadateLoad(false);
     }, 1200);
   }, []);
+
   return (
     <Router>
       <Preloader load={load} />

diff --git a/src/Assets/Projects/chatify.png b/src/Assets/Projects/chatify.png
diff --git a/src/Assets/Projects/eeg.gif b/src/Assets/Projects/eeg.gif
diff --git a/src/Assets/Soumyajit-Behera.pdf b/src/Assets/Soumyajit-Behera.pdf
diff --git a/src/components/About/About.js b/src/components/About/About.js
@@ -1,12 +1,11 @@
 import React from "react";
 import { Container, Row, Col } from "react-bootstrap";
 import Particle from "../Particle";
-import "../../style.css";
-import "bootstrap/dist/css/bootstrap.min.css";
 import Github from "./Github";
 import Techstack from "./Techstack";
 import Aboutcard from "./AboutCard";
 import laptopImg from "../../Assets/about.png";
+import Toolstack from "./Toolstack";
 
 function About() {
   return (
@@ -38,30 +37,14 @@ function About() {
         <h1 className="project-heading">
           Professional <strong className="purple">Skillset </strong>
         </h1>
-        <Row style={{ justifyContent: "center", paddingBottom: "50px" }}>
-          <Techstack iconName="devicon-cplusplus-line" />
-          <Techstack iconName="devicon-python-plain-wordmark " />
-          <Techstack iconName="cib-pytorch" />
-          <Techstack iconName="cib-tensorflow" />
-          <Techstack iconName="devicon-javascript-plain " />
-          <Techstack iconName="devicon-nodejs-plain-wordmark " />
-          <Techstack iconName="devicon-express-original-wordmark" />
-          <Techstack iconName="devicon-react-original-wordmark" />
-          <Techstack iconName="devicon-mongodb-plain-wordmark" />
-          <Techstack iconName="devicon-git-plain-wordmark" />
-          <Techstack iconName="devicon-bootstrap-plain-wordmark" />
-        </Row>
+
+        <Techstack />
+
         <h1 className="project-heading">
           <strong className="purple">Tools</strong> I use
         </h1>
-        <Row style={{ justifyContent: "center", paddingBottom: "50px" }}>
-          <Techstack iconName="devicon-linux-plain" />
-          <Techstack iconName="cib-visual-studio-code" />
-          <Techstack iconName="cib-anaconda" />
-          <Techstack iconName="cib-postman" />
-          <Techstack iconName="cib-zeit" />
-          <Techstack iconName="cib-heroku" />
-        </Row>
+        <Toolstack />
+
         <Github />
       </Container>
     </Container>

diff --git a/src/components/About/AboutCard.js b/src/components/About/AboutCard.js
@@ -1,7 +1,6 @@
 import React from "react";
 import Card from "react-bootstrap/Card";
-import "../../style.css";
-import "bootstrap/dist/css/bootstrap.min.css";
+import { ImPointRight } from "react-icons/im";
 
 function AboutCard() {
   return (
@@ -19,13 +18,13 @@ function AboutCard() {
           </p>
           <ul>
             <li className="about-activity">
-              <i className="far fa-hand-point-right"></i> Playing Games
+              <ImPointRight /> Playing Games
             </li>
             <li className="about-activity">
-              <i className="far fa-hand-point-right"></i> Writting Tech Blogs
+              <ImPointRight /> Writting Tech Blogs
             </li>
             <li className="about-activity">
-              <i className="far fa-hand-point-right"></i> Travelling
+              <ImPointRight /> Travelling
             </li>
           </ul>
 

diff --git a/src/components/About/Github.js b/src/components/About/Github.js
@@ -1,8 +1,6 @@
 import React from "react";
 import GitHubCalendar from "react-github-calendar";
 import { Row } from "react-bootstrap";
-import "../../style.css";
-import "bootstrap/dist/css/bootstrap.min.css";
 
 function Github() {
   const colourTheme = {

diff --git a/src/components/About/Techstack.js b/src/components/About/Techstack.js
@@ -1,15 +1,50 @@
 import React from "react";
-import { Col } from "react-bootstrap";
-import "../../style.css";
-import "bootstrap/dist/css/bootstrap.min.css";
+import { Col, Row } from "react-bootstrap";
+import { CgCPlusPlus } from "react-icons/cg";
+import {
+  DiJavascript1,
+  DiReact,
+  DiNodejs,
+  DiMongodb,
+  DiPython,
+  DiGit,
+} from "react-icons/di";
+import { SiPytorch, SiTensorflow, SiFirebase } from "react-icons/si";
 
-function Techstack(prop) {
+function Techstack() {
   return (
-    <div>
+    <Row style={{ justifyContent: "center", paddingBottom: "50px" }}>
       <Col xs={4} md={2} className="tech-icons">
-        <i className={`${prop.iconName} tech-icon-images`}></i>
+        <CgCPlusPlus />
       </Col>
-    </div>
+      <Col xs={4} md={2} className="tech-icons">
+        <DiJavascript1 />
+      </Col>
+      <Col xs={4} md={2} className="tech-icons">
+        <DiNodejs />
+      </Col>
+      <Col xs={4} md={2} className="tech-icons">
+        <DiReact />
+      </Col>
+      <Col xs={4} md={2} className="tech-icons">
+        <DiMongodb />
+      </Col>
+      <Col xs={4} md={2} className="tech-icons">
+        <DiPython />
+      </Col>
+      <Col xs={4} md={2} className="tech-icons">
+        <SiPytorch />
+      </Col>
+      <Col xs={4} md={2} className="tech-icons">
+        <SiTensorflow />
+      </Col>
+      <Col xs={4} md={2} className="tech-icons">
+        <DiGit />
+      </Col>
+      <Col xs={4} md={2} className="tech-icons">
+        <SiFirebase />
+      </Col>
+    </Row>
   );
 }
 

diff --git a/src/components/About/Toolstack.js b/src/components/About/Toolstack.js
@@ -0,0 +1,33 @@
+import React from "react";
+import { Col, Row } from "react-bootstrap";
+import {
+  SiLinux,
+  SiVisualstudiocode,
+  SiJupyter,
+  SiPostman,
+  SiHeroku,
+} from "react-icons/si";
+
+function Toolstack() {
+  return (
+    <Row style={{ justifyContent: "center", paddingBottom: "50px" }}>
+      <Col xs={4} md={2} className="tech-icons">
+        <SiLinux />
+      </Col>
+      <Col xs={4} md={2} className="tech-icons">
+        <SiVisualstudiocode />
+      </Col>
+      <Col xs={4} md={2} className="tech-icons">
+        <SiJupyter />
+      </Col>
+      <Col xs={4} md={2} className="tech-icons">
+        <SiPostman />
+      </Col>
+      <Col xs={4} md={2} className="tech-icons">
+        <SiHeroku />
+      </Col>
+    </Row>
+  );
+}
+
+export default Toolstack;
diff --git a/src/components/Footer.js b/src/components/Footer.js
@@ -1,7 +1,11 @@
 import React from "react";
-import "../style.css";
-import "bootstrap/dist/css/bootstrap.min.css";
 import { Container, Row, Col } from "react-bootstrap";
+import {
+  AiFillGithub,
+  AiOutlineTwitter,
+  AiFillInstagram,
+} from "react-icons/ai";
+import { FaLinkedinIn } from "react-icons/fa";
 
 function Footer() {
   let date = new Date();
@@ -22,31 +26,31 @@ function Footer() {
                 href="https://github.com/soumyajit4419"
                 style={{ color: "white" }}
               >
-                <i className="fab fa-github"></i>
+                <AiFillGithub />
               </a>
             </li>
             <li className="social-icons">
               <a
                 href="https://twitter.com/Soumyajit4419"
                 style={{ color: "white" }}
               >
-                <i className="fab fa-twitter"></i>
+                <AiOutlineTwitter />
               </a>
             </li>
             <li className="social-icons">
               <a
                 href="https://www.linkedin.com/in/soumyajit4419/"
                 style={{ color: "white" }}
               >
-                <i className="fab fa-linkedin-in"></i>
+                <FaLinkedinIn />
               </a>
             </li>
             <li className="social-icons">
               <a
                 href="https://www.instagram.com/s.o.u.m.y.a_j.i.t/"
                 style={{ color: "white" }}
               >
-                <i className="fab fa-instagram"></i>
+                <AiFillInstagram />
               </a>
             </li>
           </ul>