applied contact card on footer

src/assets/icons/icons.js

@@ -9,7 +9,8 @@ import {
   FaTrashAlt,
   FaMicrophone,
   FaFileAudio,
-  FaLinkedin
+  FaLinkedin,
+  FaStackOverflow
 } from "react-icons/fa";
 import { MdFace } from "react-icons/md";
 import { SiFlask } from "react-icons/si";
@@ -33,3 +34,4 @@ export const OpenCVSVG = openCV
 export const FlaskIcon = SiFlask
 export const LinkedInIcon = FaLinkedin
 export const SparklesIcon = HiSparkles
+export const StackOverflowIcon = FaStackOverflow

src/assets/styles/ContactCard.css

@@ -0,0 +1,81 @@
+.team-boxed {
+  color:#313437;
+  background-color:#eef4f7;
+}
+
+.team-boxed p {
+  color:#7d8285;
+}
+
+.team-boxed h2 {
+  font-weight:bold;
+  margin-bottom:40px;
+  padding-top:40px;
+  color:inherit;
+}
+
+@media (max-width:767px) {
+  .team-boxed h2 {
+    margin-bottom:25px;
+    padding-top:25px;
+    font-size:24px;
+  }
+}
+
+.team-boxed .people {
+  padding:50px 0;
+}
+
+.team-boxed .item {
+  text-align:center;
+}
+
+.team-boxed .item .box {
+  text-align:center;
+  padding:30px;
+  background-color:#fff;
+  margin-bottom:30px;
+}
+
+.team-boxed .item .name {
+  font-weight:bold;
+  margin-top:28px;
+  margin-bottom:8px;
+  color:inherit;
+  font-size: 1.75rem !important;
+}
+
+.team-boxed .item .title {
+  text-transform:uppercase;
+  font-weight:bold;
+  color:#d0d0d0;
+  letter-spacing:2px;
+  font-size:13px;
+}
+
+.team-boxed .item .description {
+  font-size:15px;
+  margin-top:15px;
+  margin-bottom:20px;
+}
+
+.team-boxed .item img {
+  max-width:160px;
+}
+
+.team-boxed .social {
+  font-size:18px;
+  color:#a2a8ae;
+}
+
+.team-boxed .social a {
+  color:inherit;
+  margin:0 10px;
+  display:inline-block;
+  opacity:0.7;
+}
+
+.team-boxed .social a:hover {
+  opacity:1;
+}
+

src/components/ContactCard.js

@@ -0,0 +1,59 @@
+import React from "react";
+import {
+  GithubIcon,
+  LinkedInIcon,
+  StackOverflowIcon,
+} from "../assets/icons/icons";
+import "../assets/styles/ContactCard.css";
+import phaniImg from "../assets/images/phani-img.jpeg";
+
+function ContactCard() {
+  return (
+    <div className="team-boxed">
+      <div className="row people">
+        <div className="col-md-6 col-lg-4 item">
+          <div className="box">
+            <img className="rounded-circle" src={phaniImg} alt="Phaneendra Kosanam" />
+            <h3 className="name">Phaneendra Kosanam</h3>
+            <p className="title">Software engineer</p>
+            <p className="description">
+              I am a full stack developer who is always willing to learn new
+              technologies and use them to build projects and to support teams
+              in building projects.
+              <br />
+              You can contact me through the below links
+            </p>
+            <div className="social">
+              <a
+                href="https://www.linkedin.com/in/phaneendra-kosanam-3b4756aa/"
+                target="_blank"
+                rel="noopener noreferrer"
+                title="LinkedIn - Phaneendra Kosanam"
+              >
+                <LinkedInIcon fill="" />
+              </a>
+              <a
+                href="https://stackoverflow.com/users/12098643/phani"
+                target="_blank"
+                rel="noopener noreferrer"
+                title="Stack overflow - Phaneendra Kosanam"
+              >
+                <StackOverflowIcon fill="" />
+              </a>
+              <a
+                href="https://github.com/K-Phaneendra"
+                target="_blank"
+                rel="noopener noreferrer"
+                title="GitHub - Phaneendra Kosanam"
+              >
+                <GithubIcon fill="" />
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ContactCard;

src/components/Footer.js

@@ -2,13 +2,13 @@ import React from "react";
 import {
   FlaskIcon,
   GithubIcon,
-  LinkedInIcon,
   NodeJsIcon,
   OpenCVSVG,
   PythonIcon,
   ReactJsIcon,
 } from "../assets/icons/icons";
 import "../assets/styles/Footer.css";
+import ContactCard from "./ContactCard";
 
 function Footer() {
   return (
@@ -24,6 +24,10 @@ function Footer() {
         </a>
       </div>
 
+      <section className="d-flex">
+        <ContactCard />
+      </section>
+
       <section>
         <h5>
           Built using React, Redux, Bootstrap and many more node modules with
@@ -91,19 +95,6 @@ function Footer() {
           </a>
         </div>
       </section>
-      <section className="d-flex">
-        <h3 className="l-h-2">Contact me</h3>
-        <div className="links">
-          <a
-            href="https://www.linkedin.com/in/phaneendra-kosanam-3b4756aa/"
-            target="_blank"
-            rel="noopener noreferrer"
-            title="LinkedIn - Phaneendra Kosanam"
-          >
-            <LinkedInIcon fill="" />
-          </a>
-        </div>
-      </section>
     </footer>
   );
 }

src/components/Header.js

@@ -30,7 +30,7 @@ const Header = () => {
             className="d-inline-block align-top"
             title={process.env.REACT_APP_NAME}
           />
-          Phani's app collage
+          {process.env.REACT_APP_NAME}
         </Navbar.Brand>
       </Navbar>
       <Sidemenu