Add social links

package-lock.json

@@ -9,7 +9,8 @@
       "version": "0.0.0",
       "dependencies": {
         "react": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "react-dom": "^18.2.0",
+        "react-icons": "^4.9.0"
       },
       "devDependencies": {
         "@types/node": "^20.2.5",
@@ -1536,6 +1537,14 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-icons": {
+      "version": "4.9.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.9.0.tgz",
+      "integrity": "sha512-ijUnFr//ycebOqujtqtV9PFS7JjhWg0QU6ykURVHuL4cbofvRCf3f6GMn9+fBktEFQOIVZnuAYLZdiyadRQRFg==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",

package.json

@@ -10,7 +10,8 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-icons": "^4.9.0"
   },
   "devDependencies": {
     "@types/node": "^20.2.5",

src/components/TopComponent.tsx

@@ -1,4 +1,7 @@
+import SocialLink from './social_link/SocialLink'
+import SocialLinks from './social_link/SocialLinks'
 import './TopComponent.scss'
+import { FaEnvelope, FaGithub, FaLinkedin } from 'react-icons/fa'
 
 function TopComponent() {
     return (
@@ -9,7 +12,6 @@ function TopComponent() {
             <div className='top__presentation'>
                 <h1>Florian RICHER</h1>
                 <h4>Développeur d´application Web et Mobile</h4>
-                {/*Reseau sociaux*/}
                 <p>
                     Découvrez mon parcours en développement, où ma passion précoce pour la programmation a débuté avec la
                     création d'applications 3D utilisant OpenGL et s'est étendue à la maîtrise de diverses technologies,
@@ -17,6 +19,23 @@ function TopComponent() {
                     d'applications mobiles avec Flutter et le développement système en Rust, toujours animé par mon désir
                     inépuisable d'apprendre et ma curiosité sans bornes.
                 </p>
+                <SocialLinks>
+                <SocialLink
+                        icon={<FaGithub />}
+                        name="Github"
+                        url="https://github.com/mrdev023"
+                    />
+                    <SocialLink
+                        icon={<FaLinkedin />}
+                        name="Linkedin"
+                        url="https://www.linkedin.com/in/florian-richer-80960b129/"
+                    />
+                    <SocialLink
+                        icon={<FaEnvelope />}
+                        name="Mail"
+                        url="mailto:florian.richer@protonmail.com"
+                    />
+                </SocialLinks>
             </div>
         </div>
     )

src/components/social_link/SocialLink.tsx

@@ -0,0 +1,18 @@
+import react, { ReactNode } from 'react'
+
+type SocialLinkProps = {
+    icon: ReactNode,
+    url: string,
+    name: string
+}
+
+function SocialLink({ icon, url, name }: SocialLinkProps) {
+    return (
+        <a className="social_link" href={url} target="_blank">
+            {icon}
+            <span>{name}</span>
+        </a>
+    )
+}
+
+export default SocialLink

src/components/social_link/SocialLinks.scss

@@ -0,0 +1,13 @@
+.social_links {
+    @apply flex gap-5 justify-center flex-wrap my-5;
+
+    & > .social_link {
+        & > svg {
+            @apply mx-auto scale-150 mb-1;
+        }
+
+        & > span {
+            @apply text-sm;
+        }
+    }
+}

src/components/social_link/SocialLinks.tsx

@@ -0,0 +1,16 @@
+import './SocialLinks.scss'
+import react, { ReactNode } from 'react'
+
+type SocialLinksProps = {
+    children: ReactNode
+}
+
+function SocialLinks({ children }: SocialLinksProps) {
+    return (
+        <div className='social_links'>
+            {children}
+        </div>
+    )
+}
+
+export default SocialLinks