Maj 1.4

- Modification des skills en components pour le responsive

TODO
- Styled-components
- Add brevo newsletter

package.json

@@ -14,7 +14,8 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.26.2",
-    "sass": "^1.78.0"
+    "sass": "^1.78.0",
+    "styled-components": "^6.1.13"
   },
   "devDependencies": {
     "@eslint/js": "^9.10.0",

src/components/Skill/index.jsx

@@ -0,0 +1,40 @@
+// import {} ==========================================//
+
+//import { React } from 'react';
+//import styled
+
+// Import skillBar styles ============================//
+import scssSkill from './skill.module.scss';
+
+//import data =========================================//
+import skillData from '../../data/skill.json';
+
+// skillBar component ================================//
+const skillBar = () => {
+  return (
+    <section
+      className={scssSkill.skills}
+      role="complementary"
+      aria-label="Résumé des compétences"
+    >
+      <h2>Développeuse Application React & Blockchain</h2>
+      <ul>
+        {skillData.map((skill) => (
+          <li key={skill.id} className={scssSkill.skilli} data-id={skill.id}>
+            <span>{skill.emoji}</span>
+            <span className={scssSkill.skilli__name}>{skill.name}</span>
+            <span className={scssSkill.skilliDetails}>
+              {skill.details
+                .map(
+                  (detail) => detail.charAt(0).toUpperCase() + detail.slice(1)
+                )
+                .join(', ')}
+            </span>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+};
+export default skillBar;
+// End of skillBar component ========================//

src/components/Skill/skill.module.css

@@ -0,0 +1,54 @@
+.skills {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin: 20px;
+  padding: auto;
+}
+@media screen and (min-height: 512px) {
+  .skills h2 {
+    text-align: center;
+  }
+}
+@media screen and (max-width: 512px) {
+  .skills ul {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    padding: none;
+    padding: 0;
+    justify-content: space-between;
+  }
+}
+.skills ul .skilli {
+  list-style: none;
+}
+.skills ul .skilli__name {
+  text-transform: uppercase;
+}
+.skills ul .skilli__name::before {
+  content: " ";
+}
+.skills ul .skilli__name::after {
+  content: " : ";
+}
+@media screen and (max-width: 512px) {
+  .skills ul .skilli {
+    width: clamp(45%, 1vw, 50%);
+    padding: 5px;
+    background-color: rgba(147, 172, 255, 0.2862745098);
+    border-radius: 10px;
+    min-height: 90px;
+    margin: 5px 0px;
+  }
+  .skills ul .skilli__name {
+    text-transform: uppercase;
+  }
+  .skills ul .skilli__name::before {
+    content: " ";
+  }
+  .skills ul .skilli__name::after {
+    content: " ";
+  }
+}/*# sourceMappingURL=skill.module.css.map */

src/components/Skill/skill.module.scss

@@ -0,0 +1,76 @@
+@use '../../scss/colors.module.scss' as colors;
+
+.skills {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin: 20px;
+    padding: auto;
+
+    @media screen and (min-height: 512px) {
+        h2 {
+            text-align: center;
+        }
+
+    }
+
+    ul {
+
+        @media screen and (max-width: 512px) {
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+            padding: none;
+            padding: 0;
+            justify-content: space-between;
+
+
+        }
+
+
+        .skilli {
+            list-style: none;
+
+            &__name {
+                text-transform: uppercase;
+
+                &::before {
+                    content: ' ';
+                }
+
+                &::after {
+                    content: ' : ';
+                }
+            }
+
+            @media screen and (max-width: 512px) {
+                width: clamp(45%, 1vw, 50%);
+                padding: 5px;
+                //border: 0.13rem dotted colors.$colorMain;
+                background-color: colors.$colorTernary;
+                border-radius: 10px;
+                min-height: 90px;
+                margin: 5px 0px;
+
+                // &:nth-child(odd) {
+                //     background-color: #f0f0f0;
+                //     margin-right: 3px;
+                // }
+                &__name {
+                    text-transform: uppercase;
+
+                    &::before {
+                        content: ' ';
+                    }
+
+                    &::after {
+                        content: ' ';
+                    }
+                }
+
+            }
+
+        }
+    }
+}

src/components/Version/index.jsx

@@ -3,7 +3,7 @@ import scssVersion from './version.module.scss';
 const version = () => {
   return (
     <div className={scssVersion.version}>
-      <sup>v 1.3.0</sup>
+      <sup>v 1.4.0</sup>
     </div>
   );
 };

src/data/skill.json

@@ -0,0 +1,44 @@
+[
+  {
+    "id": 1,
+    "name": "frontend",
+    "emoji": "👩🏼‍💼",
+    "details": ["react", "redux", "vanilla", "styled components"]
+  },
+  {
+    "id": 2,
+    "name": "backend",
+    "emoji": "👩🏼‍💻",
+    "details": ["next", "remix", "rest", "sql", "serverless"]
+  },
+  {
+    "id": 6,
+    "name": "runtime",
+    "emoji": "🧱",
+    "details": ["node", "bun", "deno"]
+  },
+  {
+    "id": 3,
+    "name": "web3",
+    "emoji": "🔗",
+    "details": ["solidity", "ethers", "hardhat", "foundry"]
+  },
+  {
+    "id": 4,
+    "name": "cms",
+    "emoji": "🤖",
+    "details": ["ghost creative design"]
+  },
+  {
+    "id": 5,
+    "name": "product",
+    "emoji": "👜",
+    "details": ["management", "storytelling", "agile scrum"]
+  },
+  {
+    "id": 7,
+    "name": "design",
+    "emoji": "🍀",
+    "details": ["figma","affinity designer","finalcut"]
+  }
+]

src/pages/Home/home.module.css

@@ -9,25 +9,4 @@ main .profil {
   width: 100%;
   margin-top: 30px;
   filter: drop-shadow(0px 0px 0.6rem rgba(255, 255, 255, 0.5));
-}
-main .skills {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  margin: 20px;
-  padding: auto;
-}
-@media screen and (min-height: 512px) {
-  main .skills h2 {
-    text-align: center;
-  }
-}
-@media screen and (min-height: 512px) {
-  main .skills ul {
-    padding: 0;
-  }
-}
-main .skills ul li {
-  list-style: none;
 }/*# sourceMappingURL=home.module.css.map */

src/pages/Home/home.module.scss

@@ -15,33 +15,6 @@ main {
 
     }
 
-    .skills {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        margin: 20px;
-        padding: auto;
-
-        @media screen and (min-height: 512px) {
-            h2 {
-                text-align: center;
-            }
-
-        }
-
-        ul {
-            @media screen and (min-height: 512px) {
-                padding: 0;
 
-            }
-
-
-            li {
-                list-style: none;
-
-            }
-        }
-    }
 
 }

src/pages/Home/index.jsx

@@ -5,25 +5,15 @@ import profil from './profil.png';
 
 // import components =========================================================//
 import SocialBar from '../../components/SocialBar';
-
+import Skill from '../../components/Skill';
 // Home component ============================================================//
 const Home = () => {
   return (
     <main>
       <div className={scssHome.profil}>
         <img src={profil} alt="Profil" />
       </div>
-      <div className={scssHome.skills}>
-        <h2>Développeuse Application React & Blockchain</h2>
-        <ul>
-          <li>👩🏼‍💼 FRONTEND : React, Remix, Vanilla, Pure Sass.</li>
-          <li>👩🏼‍💻 BACKEND : Next, Node, Deno, Bun, API Rest, Sql</li>
-          <li>🔗 WEB3 : Solidity, Evm Ethereum, DeFI, RPA</li>
-          <li>🤖 CMS : Ghost for créative code</li>
-          <li>👜 PRODUCT : Management, Storytelling, Agile Scrum</li>
-          <li>🍀 DESIGN : Figma, Affinity Designer, FinalCut</li>
-        </ul>
-      </div>
+      <Skill />
       <SocialBar />
     </main>
   );

src/scss/colors.module.scss

@@ -16,7 +16,8 @@ $colorGreyBackground : #FAFAFA;
 // Colors Components ------------------------------------------------//
 $colorMain : #FF0042;
 $colorSecondary : #FF007E;
-$colorTernary : #DB8876;
+//$colorTernary : #f6e59f46;
+$colorTernary : #93acff15;
 $colorWhite : #FFFFFF;
 $colorBlack : #000000;
 $colorGrey : #E3E3E3;