Add Tag, Project, ShortDescription, TopComponent

package-lock.json

@@ -17,6 +17,7 @@
         "@vitejs/plugin-react-swc": "^3.0.0",
         "autoprefixer": "^10.4.14",
         "postcss": "^8.4.21",
+        "sass": "^1.60.0",
         "tailwindcss": "^3.3.1",
         "typescript": "^4.9.3",
         "vite": "^4.2.0"
@@ -1065,6 +1066,12 @@
         "node": ">= 0.4.0"
       }
     },
+    "node_modules/immutable": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.0.tgz",
+      "integrity": "sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg==",
+      "dev": true
+    },
     "node_modules/inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -1609,6 +1616,23 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/sass": {
+      "version": "1.60.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.60.0.tgz",
+      "integrity": "sha512-updbwW6fNb5gGm8qMXzVO7V4sWf7LMXnMly/JEyfbfERbVH46Fn6q02BX7/eHTdKpE7d+oTkMMQpFWNUMfFbgQ==",
+      "dev": true,
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/scheduler": {
       "version": "0.23.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",

package.json

@@ -18,6 +18,7 @@
     "@vitejs/plugin-react-swc": "^3.0.0",
     "autoprefixer": "^10.4.14",
     "postcss": "^8.4.21",
+    "sass": "^1.60.0",
     "tailwindcss": "^3.3.1",
     "typescript": "^4.9.3",
     "vite": "^4.2.0"

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