diff --git a/public/assets/images/skills/C++.svg b/public/assets/images/skills/C++.svg new file mode 100644 index 0000000..70ff7eb --- /dev/null +++ b/public/assets/images/skills/C++.svg @@ -0,0 +1,38 @@ + + + + + + + + + + diff --git a/public/assets/images/skills/CSS.svg b/public/assets/images/skills/CSS.svg new file mode 100644 index 0000000..87fba58 --- /dev/null +++ b/public/assets/images/skills/CSS.svg @@ -0,0 +1,38 @@ + + + + + + + + + + diff --git a/public/assets/images/skills/Git.svg b/public/assets/images/skills/Git.svg new file mode 100644 index 0000000..21481e6 --- /dev/null +++ b/public/assets/images/skills/Git.svg @@ -0,0 +1,38 @@ + + + + + + + + + + diff --git a/public/assets/images/skills/HTML.png b/public/assets/images/skills/HTML.png new file mode 100644 index 0000000..657e869 Binary files /dev/null and b/public/assets/images/skills/HTML.png differ diff --git a/public/assets/images/skills/HTML.svg b/public/assets/images/skills/HTML.svg new file mode 100644 index 0000000..5be43dd --- /dev/null +++ b/public/assets/images/skills/HTML.svg @@ -0,0 +1,38 @@ + + + + + + + + + + diff --git a/public/assets/images/skills/Java.svg b/public/assets/images/skills/Java.svg new file mode 100644 index 0000000..3150345 --- /dev/null +++ b/public/assets/images/skills/Java.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/images/skills/JavaScript.svg b/public/assets/images/skills/JavaScript.svg new file mode 100644 index 0000000..f0b62a5 --- /dev/null +++ b/public/assets/images/skills/JavaScript.svg @@ -0,0 +1,38 @@ + + + + + + + + + + diff --git a/public/assets/images/skills/PHP.png b/public/assets/images/skills/PHP.png new file mode 100644 index 0000000..ca6d599 Binary files /dev/null and b/public/assets/images/skills/PHP.png differ diff --git a/public/assets/images/skills/PHP.svg b/public/assets/images/skills/PHP.svg new file mode 100644 index 0000000..fc1ecb3 --- /dev/null +++ b/public/assets/images/skills/PHP.svg @@ -0,0 +1,38 @@ + + + + + + + + + + diff --git a/public/assets/images/skills/Python.svg b/public/assets/images/skills/Python.svg new file mode 100644 index 0000000..b083d11 --- /dev/null +++ b/public/assets/images/skills/Python.svg @@ -0,0 +1,38 @@ + + + + + + + + + + diff --git a/src/assets/react.svg b/public/assets/images/skills/React.svg similarity index 100% rename from src/assets/react.svg rename to public/assets/images/skills/React.svg diff --git a/public/assets/images/skills/SQL.svg b/public/assets/images/skills/SQL.svg new file mode 100644 index 0000000..a08ccff --- /dev/null +++ b/public/assets/images/skills/SQL.svg @@ -0,0 +1,38 @@ + + + + + + + + + + diff --git a/public/vite.svg b/public/vite.svg deleted file mode 100644 index e7b8dfb..0000000 --- a/public/vite.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/components/SkillCard.jsx b/src/components/SkillCard.jsx new file mode 100644 index 0000000..8f24eb7 --- /dev/null +++ b/src/components/SkillCard.jsx @@ -0,0 +1,12 @@ +import "../styles/SkillCard.css"; + +function SkillCard({ text }) { + return ( +
+ {text} +

{text}

+
+ ); +} + +export default SkillCard; diff --git a/src/components/Skills.jsx b/src/components/Skills.jsx index a1e5cf1..d82b41a 100644 --- a/src/components/Skills.jsx +++ b/src/components/Skills.jsx @@ -1,8 +1,36 @@ +import SkillCard from "./SkillCard.jsx"; +import "../styles/Skills.css"; + function Skills() { return ( -
-

Skills

-
+
+

Skills

+
+

Languages

+
+ + + + + + + + +
+
+
+

Librairies

+
+ +
+
+
+

Tools

+
+ +
+
+
) } diff --git a/src/styles/SkillCard.css b/src/styles/SkillCard.css new file mode 100644 index 0000000..7e04fba --- /dev/null +++ b/src/styles/SkillCard.css @@ -0,0 +1,24 @@ +.skill-card { + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 0.5rem; + padding: 0.25rem 0.75rem; + font-size: 0.875rem; + width: fit-content; + white-space: nowrap; + flex-shrink: 0; + gap: 0.5rem; + background-color: #171717; + color: white; + border: solid rgba(100,100,100) 0.001rem; + height: 1.5rem; + margin: 0.5% 2%; +} + +.skill-card img { + width: 1rem; + height: 1.125rem; + pointer-events: none; +} + diff --git a/src/styles/Skills.css b/src/styles/Skills.css new file mode 100644 index 0000000..508dbcd --- /dev/null +++ b/src/styles/Skills.css @@ -0,0 +1,18 @@ +.skills-span{ + width: 100%; +} + +.skill-category{ + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + margin-bottom: 2%; +} + +.skills{ + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; +} \ No newline at end of file