Refactor TopComponent + Add style

src/components/ShortDescription.scss

@@ -1,3 +0,0 @@
-#short_description {
-    @apply text-center;
-}

src/components/ShortDescription.tsx

@@ -1,15 +0,0 @@
-import './ShortDescription.scss'
-
-function ShortDescription() {
-    return (
-        <p id="short_description">
-            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,
-            notamment le développement Web avec React, Ruby on Rails, Symfony, Tailwindcss et Bootstrap, la réalisation
-            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>
-    )
-}
-
-export default ShortDescription

src/components/TopComponent.scss

@@ -1,3 +1,32 @@
 #top {
-    @apply min-h-screen w-full;
+    @apply min-h-screen w-full flex flex-col md:flex-row items-center gap-5 relative;
+
+    & > div {
+        @apply flex-1 p-10;
+    }
+
+    & > .top__image {
+        @apply flex justify-center items-center;
+        
+        & > img {
+            @apply mx-auto rounded-lg;
+        }
+    }
+
+    & > .top__presentation {
+        @apply flex flex-col gap-3;
+
+        & > h1 {
+            @apply font-bold text-2xl;
+        }
+
+        & > h4 {
+            @apply font-semibold text-base;
+        }
+
+        & > p {
+            @apply font-normal text-sm;
+        }
+    }
+
 }

src/components/TopComponent.tsx

@@ -1,13 +1,23 @@
-import ShortDescription from './ShortDescription'
 import './TopComponent.scss'
 
 function TopComponent() {
     return (
         <div id="top">
+            <div className='top__image'>
+                <img src="https://devemyhg.lycee-darchicourt.net/wp-content/uploads/2018/01/No-picture.png" alt="Ma photo" />
+            </div>
+            <div className='top__presentation'>
                 <h1>Florian RICHER</h1>
                 <h4>Développeur d´application Web et Mobile</h4>
-            <ShortDescription></ShortDescription>
                 {/*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,
+                    notamment le développement Web avec React, Ruby on Rails, Symfony, Tailwindcss et Bootstrap, la réalisation
+                    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>
+            </div>
         </div>
     )
 }