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>
+    </>
+  )
+}

components/Skills/SkillsSection.tsx

@@ -0,0 +1,44 @@
+import { ShadowContainer } from 'components/design/ShadowContainer'
+
+export interface SkillsSectionProps {
+  title: string
+  children: React.ReactNode
+}
+
+export const SkillsSection: React.FC<SkillsSectionProps> = props => {
+  const { title, children } = props
+
+  return (
+    <>
+      <ShadowContainer>
+        <div className='container-fluid'>
+          <div className='row row-padding'>
+            <div className='col-24'>
+              <div className='skills-header'>
+                <h3 className='important'>{title}</h3>
+              </div>
+              <div className='skills-body'>{children}</div>
+            </div>
+          </div>
+        </div>
+      </ShadowContainer>
+
+      <style jsx>{`
+        .skills-header {
+          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+          margin-bottom: 15px;
+        }
+        .skills-header > h3 {
+          margin-bottom: 15px;
+        }
+        .skills-body {
+          display: flex;
+          justify-content: space-around;
+          flex-flow: row wrap;
+          padding-top: 1.5rem;
+        }
+      `}
+      </style>
+    </>
+  )
+}

components/Skills/index.tsx

@@ -0,0 +1,41 @@
+import useTranslation from 'next-translate/useTranslation'
+
+import { Skill } from './Skill'
+import { SkillsSection } from './SkillsSection'
+
+export const Skills: React.FC = () => {
+  const { t } = useTranslation()
+
+  return (
+    <>
+      <SkillsSection title={t('home:skills.languages')}>
+        <Skill skill='JavaScript' />
+        <Skill skill='TypeScript' />
+        <Skill skill='Python' />
+        <Skill skill='Dart' />
+      </SkillsSection>
+
+      <SkillsSection title='Front-end'>
+        <Skill skill='HTML' />
+        <Skill skill='CSS' />
+        <Skill skill='SASS' />
+        <Skill skill='React.js (+ Next.js)' />
+        <Skill skill='Flutter' />
+      </SkillsSection>
+
+      <SkillsSection title='Back-end'>
+        <Skill skill='Node.js' />
+        <Skill skill='Strapi' />
+        <Skill skill='MySQL' />
+      </SkillsSection>
+
+      <SkillsSection title={t('home:skills.softwareTools')}>
+        <Skill skill='Ubuntu' />
+        <Skill skill='Hyper' />
+        <Skill skill='Visual Studio Code' />
+        <Skill skill='Git' />
+        <Skill skill='Docker' />
+      </SkillsSection>
+    </>
+  )
+}

components/Skills/skills.ts

@@ -0,0 +1,70 @@
+export const skills = {
+  JavaScript: {
+    link: 'https://developer.mozilla.org/docs/Web/JavaScript',
+    image: '/images/skills/JavaScript.png'
+  },
+  TypeScript: {
+    link: 'https://www.typescriptlang.org/',
+    image: '/images/skills/TypeScript.png'
+  },
+  Python: {
+    link: 'https://www.python.org/',
+    image: '/images/skills/Python.png'
+  },
+  Dart: {
+    link: 'https://dart.dev/',
+    image: '/images/skills/Dart.png'
+  },
+  Flutter: {
+    link: 'https://flutter.dev/',
+    image: '/images/skills/Flutter.webp'
+  },
+  HTML: {
+    link: 'https://developer.mozilla.org/docs/Web/HTML',
+    image: '/images/skills/HTML.png'
+  },
+  CSS: {
+    link: 'https://developer.mozilla.org/docs/Web/CSS',
+    image: '/images/skills/CSS.png'
+  },
+  SASS: {
+    link: 'https://sass-lang.com/',
+    image: '/images/skills/SASS.svg'
+  },
+  'React.js (+ Next.js)': {
+    link: 'https://reactjs.org/',
+    image: '/images/skills/ReactJS.png'
+  },
+  'Node.js': {
+    link: 'https://nodejs.org/',
+    image: '/images/skills/NodeJS.png'
+  },
+  MySQL: {
+    link: 'https://www.mysql.com/',
+    image: '/images/skills/MySQL.png'
+  },
+  Strapi: {
+    link: 'https://strapi.io/',
+    image: '/images/skills/Strapi.png'
+  },
+  'Visual Studio Code': {
+    link: 'https://code.visualstudio.com/',
+    image: '/images/skills/Visual_Studio_Code.png'
+  },
+  Git: {
+    link: 'https://git-scm.com/',
+    image: '/images/skills/Git.png'
+  },
+  Hyper: {
+    link: 'https://hyper.is/',
+    image: '/images/skills/Hyper.svg'
+  },
+  Ubuntu: {
+    link: 'https://ubuntu.com/',
+    image: '/images/skills/Ubuntu.png'
+  },
+  Docker: {
+    link: 'https://www.docker.com/',
+    image: '/images/skills/Docker.png'
+  }
+} as const