Add Tag, Project, ShortDescription, TopComponent

src/App.tsx

@@ -1,10 +1,22 @@
 import './App.css'
+import TopComponent from "./components/TopComponent";
+import ShortDescription from "./components/ShortDescription";
+import Project from "./components/Project";
 
 function App() {
-  return (
-      <h1 className="text-3xl font-bold underline">
-          Hello world!
-      </h1>
-  )
+    return (
+        <>
+            <TopComponent></TopComponent>
+            <ShortDescription></ShortDescription>
+            {
+                [
+                    { title: 'Site web limouzik', description: 'Le site web de limouzik', organization: 'Limouzik', tags: ['Symfony']},
+                    { title: 'Application V3', description: 'V3', organization: 'Limouzik', tags: ['React', 'MIDI', 'Webpack', 'Cordova', 'Electron', 'SteamAPI']},
+                    { title: 'Application V4', description: 'V4', organization: 'Limouzik', tags: ['Unity 3D (2019)', 'MPTK', 'C#', 'WASM', 'SteamAPI']},
+                ].map((props) => (<Project {...props}/>))
+            }
+        </>
+    )
 }
+
 export default App

src/components/Project.scss

@@ -0,0 +1,7 @@
+.project {
+  @apply rounded-md m-5 shadow-md p-5;
+
+  h1 {
+    @apply font-bold;
+  }
+}

src/components/Project.tsx

@@ -0,0 +1,23 @@
+import './Project.scss'
+import Tag from './Tag'
+
+interface ProjectProps {
+    title: string,
+    description: string,
+    tags: Array<string>,
+    organization: string,
+}
+
+function Project(props: ProjectProps) {
+    return (
+        <div className="project">
+            <h1>{props.title}</h1>
+            <p>{props.description}</p>
+            {
+                props.tags.map((t) => (<Tag name={t}></Tag>))
+            }
+        </div>
+    )
+}
+
+export default Project

src/components/ShortDescription.scss

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

src/components/ShortDescription.tsx

@@ -0,0 +1,15 @@
+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/Tag.scss

@@ -0,0 +1,2 @@
+.tag {
+}

src/components/Tag.tsx

@@ -0,0 +1,15 @@
+import './Tag.scss'
+
+interface TagProps {
+    name: string
+}
+
+function Tag(props: TagProps) {
+    return (
+        <span className="tag">
+            {props.name}
+        </span>
+    )
+}
+
+export default Tag

src/components/TopComponent.scss

@@ -0,0 +1,3 @@
+#top {
+    @apply bg-red-500 text-center;
+}

src/components/TopComponent.tsx

@@ -0,0 +1,12 @@
+import './TopComponent.scss'
+
+function TopComponent() {
+    return (
+        <div id="top">
+            <h1>Florian RICHER</h1>
+            <h4>Développeur d´application Web et Mobile</h4>
+            {/*Reseau sociaux*/}
+        </div>
+    )
+}
+export default TopComponent