updated ui images

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@react-pdf/renderer": "^2.2.0",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",

src/components/Projects/ProjectCards.js

@@ -1,7 +1,8 @@
 import React from "react";
 import Card from "react-bootstrap/Card";
 import Button from "react-bootstrap/Button";
-import { BiLinkExternal } from "react-icons/bi";
+import { CgWebsite } from "react-icons/cg";
+import { BsGithub } from "react-icons/bs";
 
 function ProjectCards(props) {
   return (
@@ -12,22 +13,26 @@ function ProjectCards(props) {
         <Card.Text style={{ textAlign: "justify" }}>
           {props.description}
         </Card.Text>
-          <Button variant="primary" href={props.ghLink} target="_blank">
-            <BiLinkExternal /> &nbsp;
-            {props.isBlog ? "View Blog" : "View GitHub"}
-          </Button>
-          {'\n'}
-          {'\n'}
+        <Button variant="primary" href={props.ghLink} target="_blank">
+          <BsGithub /> &nbsp;
+          {props.isBlog ? "Blog" : "GitHub"}
+        </Button>
+        {"\n"}
+        {"\n"}
 
-          {/* If the component contains Demo link and if it's not a Blog then, it will render the below component  */}
+        {/* If the component contains Demo link and if it's not a Blog then, it will render the below component  */}
 
-          {!props.isBlog && props.demoLink &&
-              <Button variant="primary" href={props.demoLink} target="_blank">
-                <BiLinkExternal /> &nbsp;
-                {"View Demo"}
-              </Button>  
-            }
-
+        {!props.isBlog && props.demoLink && (
+          <Button
+            variant="primary"
+            href={props.demoLink}
+            target="_blank"
+            style={{ marginLeft: "10px" }}
+          >
+            <CgWebsite /> &nbsp;
+            {"Demo"}
+          </Button>
+        )}
       </Card.Body>
     </Card>
   );

src/components/Projects/Projects.js

@@ -3,7 +3,7 @@ import { Container, Row, Col } from "react-bootstrap";
 import ProjectCard from "./ProjectCards";
 import Particle from "../Particle";
 import leaf from "../../Assets/Projects/leaf.png";
-import emotion from "../../Assets/Projects/emotion.jpeg";
+import emotion from "../../Assets/Projects/emotion.png";
 import editor from "../../Assets/Projects/codeEditor.png";
 import chatify from "../../Assets/Projects/chatify.png";
 import suicide from "../../Assets/Projects/suicide.png";