added icons

osharper · Mar 21, 2024 · fc05ffd · fc05ffd
1 parent bdd5d7a
commit fc05ffd
Show file tree

Hide file tree

Showing 5 changed files with 98 additions and 5 deletions.
diff --git a/src/AboutMe.tsx b/src/AboutMe.tsx
@@ -1,4 +1,9 @@
 import styles from './App.module.css';
+import FacebookIcon from './svg/FacebookIcon';
+import Telegramicon from './svg/Telegramicon';
+import LinkedinIcon from './svg/linkedin-svgrepo-com.svg'
+import Soundcloudicon from './svg/soundcloudicon';
+import StackoverflowIcon from './svg/stackicon';
 
 const AboutMe = () => {
   const containerClasses = 'container mx-auto px-4 my-8 flex flex-col items-center max-w-7xl';
@@ -9,12 +14,22 @@ const AboutMe = () => {
       <div class={`flex flex-col mb-4 bg-white-600 w-full px-4 py-2 backdrop-blur-sm ${borderClasses}`}>
         <h2 class="text-2xl">Social networks:</h2>
         <ul class="text-xl list-image-none flex">
-          <li><a href="https://www.linkedin.com/in/oleg-dolotov-96a053aa">LinkedIn</a></li>
+          <li><a href="https://www.linkedin.com/in/oleg-dolotov-96a053aa">
+            LinkedinIcon
+          </a></li>
           <li><a href="https://github.com/osharper">GitHub</a></li>
-          <li><a href="https://www.stackoverflow.com/users/1048482/osharper">StackOverflow</a></li>
-          <li><a href="https://www.facebook.com/osharper">Facebook</a></li>
-          <li><a href="https://t.me/osharper">Telegram</a></li>
-          <li><a href="https://soundcloud.com/osharper">SoundCloud</a></li>
+          <li><a href="https://www.stackoverflow.com/users/1048482/osharper">
+            <StackoverflowIcon />
+            </a></li>
+          <li><a href="https://www.facebook.com/osharper">
+            <FacebookIcon />
+          </a></li>
+          <li><a href="https://t.me/osharper">
+            <Telegramicon />
+          </a></li>
+          <li><a href="https://soundcloud.com/osharper">
+            <Soundcloudicon />
+          </a></li>
         </ul>
       </div>
 

diff --git a/src/svg/FacebookIcon.tsx b/src/svg/FacebookIcon.tsx
@@ -0,0 +1,11 @@
+export default () => <div>
+    <svg fill="#000000" height="50" width="70px" viewBox="0 0 310 310">
+        <g id="XMLID_834_">
+            <path id="XMLID_835_" d="M81.703,165.106h33.981V305c0,2.762,2.238,5,5,5h57.616c2.762,0,5-2.238,5-5V165.765h39.064
+                c2.54,0,4.677-1.906,4.967-4.429l5.933-51.502c0.163-1.417-0.286-2.836-1.234-3.899c-0.949-1.064-2.307-1.673-3.732-1.673h-44.996
+                V71.978c0-9.732,5.24-14.667,15.576-14.667c1.473,0,29.42,0,29.42,0c2.762,0,5-2.239,5-5V5.037c0-2.762-2.238-5-5-5h-40.545
+                C187.467,0.023,186.832,0,185.896,0c-7.035,0-31.488,1.381-50.804,19.151c-21.402,19.692-18.427,43.27-17.716,47.358v37.752H81.703
+                c-2.762,0-5,2.238-5,5v50.844C76.703,162.867,78.941,165.106,81.703,165.106z"/>
+        </g>
+    </svg>
+</div>
diff --git a/src/svg/Telegramicon.tsx b/src/svg/Telegramicon.tsx
@@ -0,0 +1,12 @@
+
+export default () => <div>
+    <svg fill="#000000" height="50px" width="70px" viewBox="0 0 300 300">
+        <g id="XMLID_496_">
+            <path id="XMLID_497_" d="M5.299,144.645l69.126,25.8l26.756,86.047c1.712,5.511,8.451,7.548,12.924,3.891l38.532-31.412
+                c4.039-3.291,9.792-3.455,14.013-0.391l69.498,50.457c4.785,3.478,11.564,0.856,12.764-4.926L299.823,29.22
+                c1.31-6.316-4.896-11.585-10.91-9.259L5.218,129.402C-1.783,132.102-1.722,142.014,5.299,144.645z M96.869,156.711l135.098-83.207
+                c2.428-1.491,4.926,1.792,2.841,3.726L123.313,180.87c-3.919,3.648-6.447,8.53-7.163,13.829l-3.798,28.146
+                c-0.503,3.758-5.782,4.131-6.819,0.494l-14.607-51.325C89.253,166.16,91.691,159.907,96.869,156.711z"/>
+        </g>
+    </svg>
+</div>;
diff --git a/src/svg/soundcloudicon.tsx b/src/svg/soundcloudicon.tsx
@@ -0,0 +1,47 @@
+export default () => <div>
+    <svg fill="#000000" height="50px" width="70px" viewBox="0 0 300 300">
+        <g id="XMLID_496_"></g>
+    <g id="XMLID_526_">
+        <path id="XMLID_527_" d="M14.492,208.896c0.619,0,1.143-0.509,1.232-1.226l3.365-26.671l-3.355-27.278
+            c-0.1-0.717-0.623-1.23-1.242-1.23c-0.635,0-1.176,0.524-1.26,1.23l-2.941,27.278l2.941,26.662
+            C13.316,208.377,13.857,208.896,14.492,208.896z"/>
+        <path id="XMLID_530_" d="M3.397,198.752c0.608,0,1.101-0.473,1.19-1.18l2.608-16.574l-2.608-16.884
+            c-0.09-0.685-0.582-1.18-1.19-1.18c-0.635,0-1.127,0.495-1.217,1.19L0,180.999l2.18,16.569
+            C2.27,198.269,2.762,198.752,3.397,198.752z"/>
+        <path id="XMLID_531_" d="M27.762,148.644c-0.08-0.867-0.715-1.5-1.503-1.5c-0.782,0-1.418,0.633-1.491,1.5l-2.811,32.355
+            l2.811,31.174c0.073,0.862,0.709,1.487,1.491,1.487c0.788,0,1.423-0.625,1.503-1.487l3.18-31.174L27.762,148.644z"/>
+        <path id="XMLID_532_" d="M38.152,214.916c0.922,0,1.668-0.759,1.758-1.751l3.005-32.156l-3.005-33.258
+            c-0.09-0.999-0.836-1.749-1.758-1.749c-0.935,0-1.692,0.751-1.756,1.754l-2.656,33.253l2.656,32.156
+            C36.46,214.158,37.217,214.916,38.152,214.916z"/>
+        <path id="XMLID_533_" d="M50.127,215.438c1.074,0,1.936-0.86,2.025-2.011l-0.01,0.008l2.83-32.426l-2.83-30.857
+            c-0.08-1.132-0.941-2.005-2.016-2.005c-1.09,0-1.947,0.873-2.012,2.014l-2.502,30.849l2.502,32.418
+            C48.18,214.578,49.037,215.438,50.127,215.438z"/>
+        <path id="XMLID_534_" d="M67.132,181.017l-2.655-50.172c-0.074-1.272-1.065-2.286-2.281-2.286c-1.207,0-2.195,1.013-2.269,2.286
+            l-2.35,50.172l2.35,32.418c0.074,1.278,1.063,2.278,2.269,2.278c1.217,0,2.207-1,2.281-2.278v0.009L67.132,181.017z"/>
+        <path id="XMLID_535_" d="M74.386,215.766c1.339,0,2.45-1.111,2.513-2.529v0.021l2.482-32.233l-2.482-61.656
+            c-0.063-1.418-1.174-2.529-2.513-2.529c-1.37,0-2.471,1.111-2.545,2.529l-2.185,61.656l2.195,32.222
+            C71.915,214.655,73.016,215.766,74.386,215.766z"/>
+        <path id="XMLID_536_" d="M86.645,111.435c-1.508,0-2.725,1.238-2.787,2.799l-2.033,66.801l2.033,31.884
+            c0.063,1.553,1.279,2.783,2.787,2.783c1.504,0,2.73-1.22,2.783-2.788v0.016l2.307-31.895l-2.307-66.801
+            C89.375,112.663,88.148,111.435,86.645,111.435z"/>
+        <path id="XMLID_782_" d="M99.01,215.766c1.656,0,2.975-1.336,3.037-3.056v0.019l2.133-31.693l-2.133-69.045
+            c-0.063-1.714-1.381-3.056-3.037-3.056c-1.666,0-3.005,1.342-3.031,3.056l-1.916,69.045l1.916,31.693
+            C96.005,214.43,97.344,215.766,99.01,215.766z"/>
+        <path id="XMLID_783_" d="M111.477,215.734c1.787,0,3.237-1.463,3.291-3.318v0.029l1.963-31.404l-1.963-67.289
+            c-0.054-1.854-1.504-3.311-3.291-3.311c-1.8,0-3.25,1.456-3.303,3.311l-1.725,67.289l1.736,31.389
+            C108.227,214.271,109.677,215.734,111.477,215.734z"/>
+        <path id="XMLID_784_" d="M129.359,181.041l-1.777-64.836c-0.043-2-1.609-3.571-3.551-3.571c-1.947,0-3.514,1.571-3.555,3.584
+            l-1.594,64.823l1.594,31.198c0.041,1.984,1.607,3.556,3.555,3.556c1.941,0,3.508-1.572,3.551-3.585v0.029L129.359,181.041z"/>
+        <path id="XMLID_785_" d="M136.682,215.853c2.064,0,3.773-1.717,3.805-3.828v0.017l1.613-30.984l-1.613-77.153
+            c-0.031-2.119-1.74-3.833-3.805-3.833c-2.063,0-3.767,1.722-3.809,3.844l-1.434,77.111l1.434,31.016
+            C132.915,214.136,134.619,215.853,136.682,215.853z"/>
+        <path id="XMLID_786_" d="M149.291,92.814c-2.229,0-4.037,1.849-4.074,4.103l-1.667,84.151l1.677,30.526
+            c0.027,2.225,1.836,4.068,4.064,4.068c2.195,0,4.037-1.844,4.047-4.105v0.037l1.82-30.526l-1.82-84.151
+            C153.328,94.655,151.486,92.814,149.291,92.814z"/>
+        <path id="XMLID_787_" d="M160.82,215.882c0.09,0.008,101.623,0.056,102.275,0.056c20.385,0,36.904-16.722,36.904-37.357
+            c0-20.624-16.52-37.349-36.904-37.349c-5.059,0-9.879,1.034-14.275,2.907c-2.922-33.671-30.815-60.077-64.842-60.077
+            c-8.318,0-16.429,1.662-23.593,4.469c-2.788,1.09-3.534,2.214-3.556,4.392v118.539C156.861,213.752,158.607,215.655,160.82,215.882
+            z"/>
+    </g>
+    </svg>
+    </div>
diff --git a/src/svg/stackicon.tsx b/src/svg/stackicon.tsx
@@ -0,0 +1,8 @@
+export default () => <div>
+    <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="-8 0 124 124">
+      <g fill="none" fill-rule="evenodd">
+        <polygon fill="#999999" points="88 80 99 80 99 124 0 124 0 80 11 80 11 113 88 113"/>
+        <path fill="#333333" fill-rule="nonzero" d="M22.9878906,76.73 L77.0128906,88.085 L79.2838906,77.285 L25.2588906,65.925 L22.9878906,76.73 Z M30.1368906,50.861 L80.1828906,74.169 L84.8448906,64.16 L34.7978906,40.852 L30.1368906,50.861 Z M43.9848906,26.308 L86.4128906,61.639 L93.4788906,53.154 L51.0508906,17.824 L43.9848906,26.308 Z M71.3718906,0.192 L62.5118906,6.782 L95.4598906,51.082 L104.319891,44.493 L71.3718906,0.192 Z M22,102 L77,102 L77,91 L22,91 L22,102 Z"/>
+      </g>
+    </svg>
+</div>