feat: add divlo.fr

components/Skills/Skill.tsx

@@ -0,0 +1,44 @@
+import Image from 'next/image'
+
+import { skills } from './skills'
+
+export interface SkillProps {
+  skill: keyof typeof skills
+}
+
+export const Skill: React.FC<SkillProps> = props => {
+  const { skill } = props
+  const skillProperties = skills[skill]
+
+  return (
+    <>
+      <a
+        href={skillProperties.link}
+        className='skills-link'
+        target='_blank'
+        rel='noopener noreferrer'
+      >
+        <div className='skills-content text-center'>
+          <Image
+            width={60}
+            height={60}
+            alt={skill}
+            src={skillProperties.image}
+          />
+          <p className='skills-text'>{skill}</p>
+        </div>
+      </a>
+
+      <style jsx>{`
+        .skills-link {
+          max-width: 120px;
+          margin: 0px 10px 0 10px;
+        }
+        .skills-text {
+          margin-top: 5px;
+        }
+      `}
+      </style>
+    </>
+  )
+}