feat(skills): add soft skills & featured ones

louisgrasset · Jul 13, 2024 · 86a83e5 · 86a83e5
1 parent 681531f
commit 86a83e5
Show file tree

Hide file tree

Showing 9 changed files with 289 additions and 242 deletions.
diff --git a/public/images/skills/communication.webp b/public/images/skills/communication.webp
diff --git a/public/images/skills/featured.webp b/public/images/skills/featured.webp
diff --git a/public/images/skills/glpi.webp b/public/images/skills/glpi.webp
diff --git a/public/images/skills/management.webp b/public/images/skills/management.webp
diff --git a/public/images/skills/training.webp b/public/images/skills/training.webp
diff --git a/src/data/skills.ts b/src/data/skills.ts
diff --git a/src/sections/Skills/Skills.scss b/src/sections/Skills/Skills.scss
@@ -100,6 +100,7 @@
 
   .skill {
     &-item {
+      position: relative;
       border-radius: 1.5rem;
       box-shadow: 0 0.2rem 1rem rgba(colors.$primary, 10%);
       box-sizing: border-box;
@@ -111,6 +112,14 @@
       width: 100%;
       align-items: center;
 
+      &__featured {
+        height: 12px;
+        width: 12px;
+        position: absolute;
+        left: 48px;
+        top: 0;
+      }
+
       &__logo {
         display: flex;
         justify-content: center;

diff --git a/src/sections/Skills/Skills.tsx b/src/sections/Skills/Skills.tsx
@@ -43,7 +43,14 @@ export function Skills () {
                     {
                         filteredSkills.map(skill => (
                             <div key={skill.id} className="skill-item">
-                                <div  className="skill-item__logo">
+                                {
+                                    skill.featured ?
+                                        <div className="skill-item__featured">
+                                            <img width="12" height="12" src='/images/skills/featured.webp' alt="Outil mis en place par moi-même" title="Outil mis en place par moi-même"/>
+                                        </div>
+                                        : null
+                                }
+                                <div className="skill-item__logo">
                                     <img width="60" height="60" src={`/images/skills/${skill.id}.webp`} alt={skill.name} />
                                 </div>
                                 <div>

diff --git a/src/types/Skill.ts b/src/types/Skill.ts
@@ -2,5 +2,6 @@ export type Skill = {
     name: string,
     id: string,
     detail: string,
-    tags: string[]
+    tags: string[],
+    featured?: boolean
 }