Merge pull request #2 from AmanTahiliani/contact-me-addition-jan25

Added Contact ME

package.json

@@ -19,6 +19,7 @@
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "react-slick": "^0.29.0",
+    "react-transition-group": "^4.4.5",
     "slick-carousel": "^1.8.1",
     "web-vitals": "^2.1.0"
   },

public/index.html

@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

src/App.js

@@ -1,13 +1,22 @@
+import React, { useState, useEffect } from "react";
+import {
+  BrowserRouter as Router,
+  Route,
+  Routes,
+  useLocation,
+} from "react-router-dom";
+import { CSSTransition, TransitionGroup } from "react-transition-group";
 import "./App.css";
+import "./css/home.css";
 import Header from "./components/Header";
 import About from "./components/About";
-import { getByTitle } from "@testing-library/react";
 import SimpleSlider from "./components/publicationSlider";
 import Experience from "./components/Experience";
 import Contact from "./components/contact";
 import DevToolsComponent from "./components/devtools";
+import SocialMedia from "./components/SocialMedia";
 
-function App() {
+function Portfolio() {
   return (
     <div className="App">
       <meta name="Aman Tahiliani's Portfolio"></meta>
@@ -27,12 +36,23 @@ function App() {
         </h2>
         <Experience />
       </div>
-      <div className="DevTools" id="DevTools">
+      <div className="DevTools" id="DevTools" style={{ marginBottom: "100px" }}>
         <h2 style={{ color: "salmon", fontSize: "50px" }}>
           <b>Dev Tools</b>
         </h2>
         <DevToolsComponent />
       </div>
+      <hr />
+      <div className="Contact" id="Contact" style={{ marginTop: "100px" }}>
+        <h2 style={{ color: "cyan", fontSize: "50px" }}>
+          <b>Contact Me!</b>
+        </h2>
+        <SocialMedia
+          style={{ color: "white" }}
+          useColorIcons={false}
+          whiteIcons={true}
+        />
+      </div>
       {/* <div className="Contact" id="Contact">
       <h2 style={{color:"salmon", fontSize:"50px", marginTop:"60px"}}><b>Contact Me!</b></h2>
         <Contact/>
@@ -41,4 +61,63 @@ function App() {
   );
 }
 
+function Books() {
+  return (
+    <div>
+      <h2>Books Page</h2>
+      {/* Add your books content here */}
+    </div>
+  );
+}
+
+function Home() {
+  return (
+    <div className="home">
+      <div className="content">
+        <div className="intro">
+          <h1>Welcome to Aman Tahiliani's Space</h1>
+          <p>Software Developer | Tech Enthusiast</p>
+          <nav>
+            <ul>
+              <li>
+                <a href="/portfolio">Developer Portfolio</a>
+              </li>
+              <li>
+                <a href="/reviews">Book, TV and Movie Reviews</a>
+              </li>
+            </ul>
+          </nav>
+        </div>
+      </div>
+      <div className="footer">
+        <SocialMedia />
+      </div>
+    </div>
+  );
+}
+
+function AnimatedRoutes() {
+  const location = useLocation();
+  return (
+    <TransitionGroup>
+      <CSSTransition key={location.key} classNames="fade" timeout={300}>
+        <Routes location={location}>
+          <Route path="/portfolio" element={<Portfolio />} />
+          <Route path="/" element={<Portfolio />} />
+          <Route path="/books" element={<Books />} />
+          {/* <Route path="/" element={<Home />} /> */}
+        </Routes>
+      </CSSTransition>
+    </TransitionGroup>
+  );
+}
+
+function App() {
+  return (
+    <Router>
+      <AnimatedRoutes />
+    </Router>
+  );
+}
+
 export default App;

src/components/About.js

@@ -4,7 +4,7 @@ import { Grid, Row, Col } from "react-bootstrap";
 import "../css/about.css";
 import AmanTahilianiPortfolio from "../media/AmanTahilianiPortfolio.png";
 import { Button } from "bootstrap";
-import resume from "../media/Aman_Tahiliani_Resume_June24.pdf";
+import resume from "../media/Aman_Tahiliani_Resume.pdf";
 // const img = '../media/AmanTahilianiPortfolio.png'
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faFileDownload } from "@fortawesome/free-solid-svg-icons";
@@ -58,15 +58,18 @@ class About extends Component {
                 fontSize: "larger",
                 backgroundColor: "rgb(5, 255, 180)",
               }}
+              onClick={() => {
+                const link = document.createElement("a");
+                link.href = resume;
+                link.download = "Aman_Tahiliani_Resume.pdf";
+                link.click();
+                window.open(resume, "_blank");
+              }}
             >
-              <FontAwesomeIcon icon="file-download" />{" "}
-              <a
-                href={resume}
-                style={{ color: "black", textDecoration: "none" }}
-                download="Aman_Tahiliani_Resume.pdf"
-              >
+              <FontAwesomeIcon icon="file-download" style={{color: "black", marginRight: "4px"}} />{" "}
+              <span style={{ color: "black", textDecoration: "none" }}>
                 Resume
-              </a>
+              </span>
             </button>
           </Col>{" "}
         </Row>{" "}

src/components/Header.js

@@ -36,9 +36,7 @@ class Header extends Component {
                   </Col>
                   <Col>
                     <a
-                      href="https://www.linkedin.com/in/amantahiliani/"
-                      target="_blank"
-                      rel="noopener noreferrer"
+                      href="#Contact"
                     >
                       Contact Me!
                     </a>

src/components/SocialMedia.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import '../css/socialmedia.css';
+
+const socialIcons = {
+  instagram: {
+    flat: 'https://cdn.jsdelivr.net/npm/simple-icons@v5/icons/instagram.svg',
+    color: 'https://upload.wikimedia.org/wikipedia/commons/a/a5/Instagram_icon.png',
+    link: 'https://instagram.com/amantahiliani'
+  },
+  linkedin: {
+    flat: 'https://cdn.jsdelivr.net/npm/simple-icons@v5/icons/linkedin.svg',
+    color: 'https://upload.wikimedia.org/wikipedia/commons/c/ca/LinkedIn_logo_initials.png',
+    link: 'https://www.linkedin.com/in/amantahiliani/'
+  },
+  github: {
+    flat: 'https://cdn.jsdelivr.net/npm/simple-icons@v5/icons/github.svg',
+    color: 'https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg',
+    link: 'https://github.com/AmanTahiliani'
+  },
+  goodreads: {
+    flat: 'https://cdn.jsdelivr.net/npm/simple-icons@v5/icons/goodreads.svg',
+    color: 'https://upload.wikimedia.org/wikipedia/commons/4/4e/Goodreads_%27g%27_logo.svg',
+    link: 'https://www.goodreads.com/amantahiliani'
+  }
+};
+
+function SocialMedia({ useColorIcons = false, whiteIcons = false }) {
+  const iconType = useColorIcons ? 'color' : 'flat';
+  const iconClass = whiteIcons ? 'social-icon white' : 'social-icon';
+
+  return (
+    <div className="social-media">
+      {/* <h2>Contact Me!</h2> */}
+      <ul>
+        {Object.entries(socialIcons).map(([platform, obj]) => (
+          <li key={platform}>
+            <a href={obj['link']} target="_blank" rel="noopener noreferrer">
+              <img src={obj[iconType]} alt={platform} className={iconClass} />
+            </a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+SocialMedia.propTypes = {
+  useColorIcons: PropTypes.bool,
+  whiteIcons: PropTypes.bool
+};
+
+export default SocialMedia;

src/components/devtools.js

@@ -1,28 +1,22 @@
 import React, { Component } from "react";
-import PythonLogo from "../media/logos/languages/python-logo.png";
-import JavaLogo from "../media/logos/languages/java-logo.png";
-import CplusLogo from "../media/logos/languages/c++.png";
-import JavaScriptLogo from "../media/logos/languages/JavaScript.webp";
 import "../css/devtools.css";
 import Languages from "../data/programmingLaguages.json";
 
 const logos = {
-  Python: PythonLogo,
-  Java: JavaLogo,
-  "C++": CplusLogo,
-  JavaScript: JavaScriptLogo,
+  Python: "https://upload.wikimedia.org/wikipedia/commons/c/c3/Python-logo-notext.svg",
+  Java: "https://upload.wikimedia.org/wikipedia/en/3/30/Java_programming_language_logo.svg",
+  "C++": "https://upload.wikimedia.org/wikipedia/commons/1/18/ISO_C%2B%2B_Logo.svg",
+  JavaScript: "https://upload.wikimedia.org/wikipedia/commons/6/6a/JavaScript-logo.png",
 };
 
 class DevToolsComponent extends Component {
   render() {
     return (
       <div>
-        {/* <h2>Programming Languages</h2> */}
         <div className="dev-tools-container">
           {Languages.map(({ name }) => (
-            <div className="dev-tool">
+            <div className="dev-tool" key={name}>
               <img src={logos[name]} alt={name} className="dev-tool-logo" />
-              <h3>{name}</h3>
             </div>
           ))}
         </div>
@@ -31,4 +25,4 @@ class DevToolsComponent extends Component {
   }
 }
 
-export default DevToolsComponent;
+export default DevToolsComponent;

src/css/devtools.css

@@ -3,33 +3,29 @@
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
+  gap: 20px;
+  padding: 20px;
 }
 
 .dev-tool {
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin-bottom: 20px;
-  margin-top: 20px;
-  animation: toolAnimation 0.5s ease-in-out;
-  width: 200px;
-  max-width: 100%;
   text-align: center;
+  padding-left: 3%;
+  padding-right: 3%;
 }
 
 .dev-tool-logo {
-  width: 100px;
-  height: 100px;
-  border-radius: 50%;
-  object-fit: cover;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  transition: transform 0.3s ease-in-out;
+  width: 80px;
+  height: 80px;
+  object-fit: contain;
+  transition: transform 0.3s ease;
 }
 
 .dev-tool-logo:hover {
   transform: scale(1.1);
 }
-
 @keyframes toolAnimation {
   from {
     opacity: 0;

src/css/home.css

@@ -0,0 +1,103 @@
+.home {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    min-height: 100vh;
+    background-color: #f0f0f0;
+  }
+  
+  .content {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+  
+  .intro {
+    text-align: center;
+    animation: fadeIn 1s ease-in-out;
+  }
+  
+  
+  .intro h1 {
+    font-size: 3em;
+    color: #333;
+    animation: slideIn 1s ease-in-out;
+  }
+  
+  .intro p {
+    font-size: 1.5em;
+    color: #666;
+    animation: slideIn 1s ease-in-out;
+  }
+  
+  .intro nav ul {
+    list-style-type: none;
+    padding: 0;
+  }
+  
+  .intro nav ul li {
+    display: inline;
+    margin: 0 15px;
+    animation: fadeIn 1s ease-in-out;
+  }
+  
+  .intro nav ul li a {
+    text-decoration: none;
+    color: #3498db;
+    font-size: 1.2em;
+  }
+  
+  .intro nav ul li a:hover {
+    text-decoration: underline;
+  }
+  
+  /* Transition animations */
+  .fade-enter {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  
+  .fade-enter-active {
+    opacity: 1;
+    transform: scale(1);
+    transition: opacity 300ms, transform 300ms;
+  }
+  
+  .fade-exit {
+    opacity: 1;
+    transform: scale(1);
+  }
+  
+  .fade-exit-active {
+    opacity: 0;
+    transform: scale(0.9);
+    transition: opacity 300ms, transform 300ms;
+  }
+  
+  /* Keyframes for animations */
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+  
+  @keyframes slideIn {
+    from {
+      transform: translateY(-20px);
+    }
+    to {
+      transform: translateY(0);
+    }
+  }
+  .footer {
+    width: 100%;
+    padding: 20px 0;
+    background-color: #f0f0f0;
+    text-align: center;
+    
+  }

src/css/socialmedia.css

@@ -0,0 +1,47 @@
+.social-media {
+    margin-top: 50px;
+    margin-bottom: 100px;
+    text-align: center;
+  }
+  
+  .social-media h2 {
+    font-size: 1.5em;
+    color: #333;
+  }
+  
+  .social-media ul {
+    list-style-type: none;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  
+  .social-media ul li {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 0 10px;
+    padding-left: 3%;
+    padding-right: 3%;
+  }
+  
+  .social-media ul li a {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  
+  .social-icon {
+    width: 50px;
+    height: 50px;
+    transition: fill 0.3s ease;
+  }
+  
+  .social-icon.white {
+    filter: invert(1);
+  }
+  
+  .social-media ul li a:hover .social-icon {
+    fill: salmon;
+  }

src/media/logos/social_media/github.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg height="512px" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" width="512px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="_x31_42-github"><g><path d="M179.858,392.884c0,1.855-2.133,3.339-4.822,3.339c-3.062,0.277-5.193-1.205-5.193-3.339c0-1.854,2.132-3.34,4.823-3.34    C177.448,389.267,179.858,390.75,179.858,392.884z M151.017,388.709c-0.649,1.857,1.205,3.988,3.987,4.544    c2.411,0.928,5.194,0,5.75-1.853c0.558-1.856-1.205-3.988-3.987-4.824C154.355,385.929,151.666,386.855,151.017,388.709    L151.017,388.709z M192.008,387.133c-2.689,0.65-4.544,2.411-4.267,4.544c0.279,1.854,2.69,3.063,5.473,2.413    c2.69-0.65,4.544-2.413,4.266-4.267C197.201,388.06,194.698,386.855,192.008,387.133z M253.032,31.747    c-128.634,0-227.031,97.656-227.031,226.291c0,102.851,64.732,190.862,157.197,221.839c11.871,2.133,16.044-5.194,16.044-11.223    c0-5.75-0.277-37.469-0.277-56.942c0,0-64.921,13.911-78.554-27.639c0,0-10.572-26.988-25.782-33.944    c0,0-21.238-14.56,1.484-14.281c0,0,23.094,1.856,35.799,23.928c20.31,35.799,54.346,25.505,67.607,19.383    c2.134-14.839,8.162-25.133,14.84-31.254c-51.843-5.75-104.149-13.263-104.149-102.479c0-25.504,7.048-38.302,21.888-54.625    c-2.411-6.028-10.295-30.882,2.411-62.972c19.383-6.028,63.99,25.041,63.99,25.041c18.55-5.194,38.489-7.883,58.242-7.883    c19.755,0,39.694,2.689,58.241,7.883c0,0,44.611-31.161,63.993-25.041c12.705,32.181,4.822,56.944,2.412,62.972    c14.84,16.415,23.926,29.212,23.926,54.625c0,89.496-54.625,96.636-106.466,102.479c8.532,7.325,15.765,21.238,15.765,43.032    c0,31.253-0.277,69.928-0.277,77.531c0,6.028,4.266,13.355,16.044,11.223c92.742-30.79,155.62-118.802,155.62-221.652    C485.999,129.403,381.665,31.747,253.032,31.747z M116.146,351.614c-1.206,0.927-0.928,3.061,0.647,4.82    c1.484,1.485,3.617,2.133,4.823,0.93c1.205-0.93,0.927-3.061-0.649-4.823C119.484,351.057,117.352,350.408,116.146,351.614z     M106.129,344.102c-0.648,1.205,0.278,2.688,2.134,3.616c1.483,0.929,3.339,0.649,3.988-0.649    c0.648-1.205-0.278-2.688-2.133-3.617C108.263,342.895,106.777,343.174,106.129,344.102z M136.178,377.116    c-1.483,1.206-0.927,3.989,1.205,5.75c2.133,2.134,4.822,2.413,6.028,0.927c1.205-1.204,0.649-3.987-1.206-5.748    C140.165,375.912,137.383,375.633,136.178,377.116z M125.605,363.485c-1.484,0.926-1.484,3.337,0,5.47    c1.484,2.134,3.988,3.061,5.193,2.134c1.483-1.206,1.483-3.617,0-5.75C129.5,363.207,127.09,362.278,125.605,363.485    L125.605,363.485z"/></g></g><g id="Layer_1"/></svg>

src/media/logos/social_media/goodreads.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg height="512px" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" width="512px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="_x31_49-goodreads"><g><path d="M121.789,388.382h2.515c11.413,0,22.914,0,34.324,0.094c1.439,0,2.786-0.361,3.236,1.886    c6.379,31.358,26.956,49.061,56.519,57.416c24.17,6.828,48.61,7.009,73.051,1.618c30.37-6.65,50.318-25.429,61.101-54.273    c7.188-19.319,9.613-39.354,9.884-59.753c0.09-5.21,0.27-42.231-0.18-47.441l-0.808-0.27c-0.72,1.348-1.53,2.605-2.248,3.953    c-19.856,38.729-55.081,60.562-94.707,62.09c-92.549,3.594-152.211-51.218-154.547-158.324    c-0.449-21.295,1.618-42.141,7.458-62.628c18.509-63.886,67.03-106.208,138.285-106.746c55.08-0.36,91.201,34.773,104.41,63.167    c0.45,0.987,1.167,2.066,2.156,1.707V35.529h39.806c0,251.86,0.089,298.495,0.089,298.495    c-0.089,70.534-23.989,129.121-92.55,145.742c-62.448,15.185-142.867,4.313-176.112-51.396    C126.282,416.239,122.867,402.941,121.789,388.382L121.789,388.382z M253.244,58.801c-47.173-0.45-97.491,36.57-103.332,120.223    c-3.684,53.014,13.298,109.802,64.245,133.525c24.801,11.59,66.763,13.477,97.312-7.819    c42.771-29.83,56.339-87.158,49.241-138.375C351.994,102.469,317.759,58.531,253.244,58.801z" style="fill:#7D5024;"/></g></g><g id="Layer_1"/></svg>

src/media/logos/social_media/instagram.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg height="512px" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" width="512px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="_x31_73-instagram"><g><linearGradient gradientUnits="userSpaceOnUse" id="SVGID_1_" x1="74.3496" x2="393.8339" y1="83.7275" y2="386.7129"><stop offset="0" style="stop-color:#FEC053"/><stop offset="0.3273" style="stop-color:#F2203E"/><stop offset="0.6485" style="stop-color:#B729A8"/><stop offset="1" style="stop-color:#5342D6"/></linearGradient><path d="M256.052,138.088c-65.268,0-117.913,52.646-117.913,117.912    c0,65.267,52.645,117.91,117.913,117.91c65.267,0,117.911-52.644,117.911-117.91C373.963,190.734,321.318,138.088,256.052,138.088    z M256.052,332.659c-42.177,0-76.659-34.38-76.659-76.659c0-42.279,34.378-76.657,76.659-76.657    c42.277,0,76.657,34.378,76.657,76.657C332.709,298.279,298.229,332.659,256.052,332.659L256.052,332.659z M406.288,133.266    c0,15.291-12.315,27.502-27.502,27.502c-15.292,0-27.502-12.314-27.502-27.502c0-15.188,12.313-27.503,27.502-27.503    C393.973,105.763,406.288,118.077,406.288,133.266z M484.382,161.177c-1.743-36.839-10.158-69.474-37.148-96.36    c-26.886-26.887-59.52-35.302-96.36-37.148c-37.971-2.155-151.777-2.155-189.747,0c-36.739,1.743-69.372,10.159-96.361,37.046    c-26.99,26.887-35.302,59.52-37.149,96.36c-2.155,37.969-2.155,151.777,0,189.747c1.745,36.842,10.159,69.473,37.149,96.361    c26.989,26.887,59.521,35.301,96.361,37.148c37.969,2.154,151.776,2.154,189.747,0c36.841-1.744,69.475-10.161,96.36-37.148    c26.887-26.889,35.302-59.52,37.148-96.361C486.538,312.853,486.538,199.147,484.382,161.177z M435.329,391.563    c-8.004,20.112-23.5,35.61-43.716,43.716c-30.273,12.009-102.108,9.236-135.562,9.236c-33.456,0-105.393,2.669-135.563-9.236    c-20.114-8.005-35.611-23.498-43.717-43.716C64.766,361.29,67.538,289.455,67.538,256s-2.669-105.391,9.234-135.562    c8.006-20.114,23.5-35.61,43.717-43.716c30.273-12.007,102.107-9.236,135.563-9.236c33.453,0,105.391-2.668,135.562,9.236    c20.113,8.002,35.609,23.5,43.716,43.716c12.007,30.272,9.237,102.107,9.237,135.562S447.336,361.392,435.329,391.563z" style="fill:url(#SVGID_1_);"/></g></g><g id="Layer_1"/></svg>

src/media/logos/social_media/linkedin.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg height="512px" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" width="512px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="_x32_01-linkedin"><g><rect height="316.249" style="fill:#0274B3;" width="102.59" x="26.623" y="169.75"/><path d="M408.65,173.458c-1.092-0.341-2.123-0.715-3.268-1.037c-1.381-0.313-2.754-0.577-4.16-0.8    c-5.443-1.095-11.414-1.871-18.408-1.871c-59.805,0-97.746,43.617-110.238,60.461V169.75h-102.59v316.249h102.588V313.501    c0,0,77.525-108.273,110.24-28.754v201.252h102.563V272.588C485.377,224.804,452.717,184.986,408.65,173.458z" style="fill:#0274B3;"/><path d="M76.802,126.626c27.708,0,50.176-22.522,50.176-50.313c0-27.785-22.469-50.312-50.176-50.312    c-27.71,0-50.179,22.526-50.179,50.312C26.623,104.103,49.092,126.626,76.802,126.626z" style="fill:#0274B3;"/></g></g><g id="Layer_1"/></svg>