Add social links

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