feat: add new skills

README.md

@@ -31,9 +31,9 @@ export interface Divlo {
     'Open-Source enthusiast'
   ]
   skills: {
-    languages: ['JavaScript', 'TypeScript', 'Python', 'Dart']
+    languages: ['JavaScript', 'TypeScript', 'Python', 'C/C++']
-    frontEnd: ['HTML', 'CSS', 'SASS', 'React.js (+ Next.js)', 'Flutter']
+    frontEnd: ['HTML', 'CSS', 'Tailwind CSS', 'React.js (+ Next.js)']
-    backEnd: ['Node.js', 'Strapi', 'MySQL']
+    backEnd: ['Node.js', 'Fastify', 'Prisma', 'PostgreSQL', 'MySQL']
     tools: ['Ubuntu', 'Hyper Terminal', 'VSCode', 'Git', 'Docker']
   }
 }

components/Skills/Skill.tsx

@@ -1,14 +1,24 @@
+import { useTheme } from 'next-themes'
 import Image from 'next/image'
+import { useMemo } from 'react'
 
 import { skills } from './skills'
 
-export interface SkillProps {
+export interface SkillComponentProps {
-  skill: keyof typeof skills
+  skill: string
 }
 
-export const Skill: React.FC<SkillProps> = (props) => {
+export const SkillComponent: React.FC<SkillComponentProps> = (props) => {
   const { skill } = props
   const skillProperties = skills[skill]
+  const { theme } = useTheme()
+
+  const image = useMemo(() => {
+    if (typeof skillProperties.image !== 'string') {
+      return skillProperties.image[theme ?? 'light']
+    }
+    return skillProperties.image
+  }, [skillProperties, theme])
 
   return (
     <a
@@ -18,7 +28,7 @@ export const Skill: React.FC<SkillProps> = (props) => {
       rel='noopener noreferrer'
     >
       <div className='text-center'>
-        <Image width={60} height={60} alt={skill} src={skillProperties.image} />
+        <Image width={60} height={60} alt={skill} src={image} />
         <p className='mt-1'>{skill}</p>
       </div>
     </a>

components/Skills/index.tsx

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

components/Skills/skills.ts

@@ -1,4 +1,13 @@
-export const skills = {
+export interface Skill {
+  link: string
+  image: string | { [key: string]: string }
+}
+
+export interface Skills {
+  [key: string]: Skill
+}
+
+export const skills: Skills = {
   JavaScript: {
     link: 'https://developer.mozilla.org/docs/Web/JavaScript',
     image: '/images/skills/JavaScript.png'
@@ -11,6 +20,10 @@ export const skills = {
     link: 'https://www.python.org/',
     image: '/images/skills/Python.png'
   },
+  'C/C++': {
+    link: 'https://isocpp.org/',
+    image: '/images/skills/C-Cpp.png'
+  },
   Dart: {
     link: 'https://dart.dev/',
     image: '/images/skills/Dart.png'
@@ -27,6 +40,10 @@ export const skills = {
     link: 'https://developer.mozilla.org/docs/Web/CSS',
     image: '/images/skills/CSS.png'
   },
+  'Tailwind CSS': {
+    link: 'https://tailwindcss.com/',
+    image: '/images/skills/TailwindCSS.png'
+  },
   SASS: {
     link: 'https://sass-lang.com/',
     image: '/images/skills/SASS.svg'
@@ -39,6 +56,24 @@ export const skills = {
     link: 'https://nodejs.org/',
     image: '/images/skills/NodeJS.png'
   },
+  Fastify: {
+    link: 'https://www.fastify.io/',
+    image: {
+      light: '/images/skills/Fastify-light.png',
+      dark: '/images/skills/Fastify-dark.png'
+    }
+  },
+  Prisma: {
+    link: 'https://www.prisma.io/',
+    image: {
+      light: '/images/skills/Prisma-light.png',
+      dark: '/images/skills/Prisma-dark.png'
+    }
+  },
+  PostgreSQL: {
+    link: 'https://www.postgresql.org/',
+    image: '/images/skills/PostgreSQL.png'
+  },
   MySQL: {
     link: 'https://www.mysql.com/',
     image: '/images/skills/MySQL.png'