feat(skills): add PHP and Laravel

README.md

@@ -31,9 +31,15 @@
     "Open-Source enthusiast"
   ],
   "skills": {
-    "programmingLanguages": ["JavaScript", "TypeScript", "Python", "C/C++"],
+    "programmingLanguages": [
+      "JavaScript",
+      "TypeScript",
+      "Python",
+      "C/C++",
+      "PHP"
+    ],
     "frontEnd": ["HTML", "CSS", "Tailwind CSS", "React.js (+ Next.js)"],
-    "backEnd": ["Node.js", "Fastify", "Prisma", "PostgreSQL", "MySQL"],
+    "backEnd": ["Laravel", "Node.js", "Fastify", "Prisma", "PostgreSQL"],
     "tools": ["GNU/Linux", "Ubuntu", "Visual Studio Code", "Git", "Docker"]
   }
 }

components/Skills/Skill.tsx

@@ -2,10 +2,11 @@ import { useTheme } from 'next-themes'
 import Image from 'next/image'
 import { useMemo } from 'react'
 
+import type { SkillName } from './skills'
 import { skills } from './skills'
 
 export interface SkillComponentProps {
-  skill: string
+  skill: SkillName
 }
 
 export const SkillComponent: React.FC<SkillComponentProps> = (props) => {
@@ -14,10 +15,13 @@ export const SkillComponent: React.FC<SkillComponentProps> = (props) => {
   const { theme } = useTheme()
 
   const image = useMemo(() => {
-    if (typeof skillProperties.image !== 'string') {
+    if (typeof skillProperties.image === 'string') {
-      return skillProperties.image[theme ?? 'light']
+      return skillProperties.image
     }
-    return skillProperties.image
+    if (theme === 'light') {
+      return skillProperties.image.light
+    }
+    return skillProperties.image.dark
   }, [skillProperties, theme])
 
   return (

components/Skills/index.tsx

@@ -13,6 +13,7 @@ export const Skills: React.FC = () => {
         <SkillComponent skill='TypeScript' />
         <SkillComponent skill='Python' />
         <SkillComponent skill='C/C++' />
+        <SkillComponent skill='PHP' />
       </SkillsSection>
 
       <SkillsSection title='Front-end'>
@@ -23,11 +24,11 @@ export const Skills: React.FC = () => {
       </SkillsSection>
 
       <SkillsSection title='Back-end'>
+        <SkillComponent skill='Laravel' />
         <SkillComponent skill='Node.js' />
         <SkillComponent skill='Fastify' />
         <SkillComponent skill='Prisma' />
         <SkillComponent skill='PostgreSQL' />
-        <SkillComponent skill='MySQL' />
       </SkillsSection>
 
       <SkillsSection title={t('home:skills.software-tools')}>

components/Skills/skills.ts

@@ -3,11 +3,7 @@ export interface Skill {
   image: string | { [key: string]: string }
 }
 
-export interface Skills {
+export const skills = {
-  [key: string]: Skill
-}
-
-export const skills: Skills = {
   JavaScript: {
     link: 'https://developer.mozilla.org/docs/Web/JavaScript',
     image: '/images/skills/JavaScript.png'
@@ -24,6 +20,14 @@ export const skills: Skills = {
     link: 'https://isocpp.org/',
     image: '/images/skills/C-Cpp.png'
   },
+  PHP: {
+    link: 'https://www.php.net/',
+    image: '/images/skills/PHP.png'
+  },
+  Laravel: {
+    link: 'https://laravel.com/',
+    image: '/images/skills/Laravel.png'
+  },
   Dart: {
     link: 'https://dart.dev/',
     image: '/images/skills/Dart.png'
@@ -107,3 +111,5 @@ export const skills: Skills = {
     image: '/images/skills/Docker.png'
   }
 } as const
+
+export type SkillName = keyof typeof skills

pages/blog/[slug].tsx

@@ -41,12 +41,10 @@ const BlogPostPage: NextPage<BlogPostPageProps> = (props) => {
               img: (properties) => {
                 const { src, alt, ...props } = properties
                 let source = src
-                if (src?.startsWith('../public/') ?? false) {
+                source = src?.replace('../public/', '/')
-                  source = src?.replace('../public/', '/')
-                }
                 return <img src={source} alt={alt} {...props} />
               },
-              a: (props: React.ComponentPropsWithoutRef<'a'>) => {
+              a: (props) => {
                 if (props.href?.startsWith('#') ?? false) {
                   return <a {...props} />
                 }

resume.json

@@ -93,7 +93,7 @@
   ],
   "skills": [
     {
-      "keywords": ["JavaScript", "TypeScript", "Python", "C/C++"],
+      "keywords": ["JavaScript", "TypeScript", "Python", "C/C++", "PHP"],
       "name": "Langages de programmation"
     },
     {
@@ -101,7 +101,7 @@
       "name": "Front-end"
     },
     {
-      "keywords": ["Node.js", "Fastify", "PostgreSQL", "MySQL"],
+      "keywords": ["Laravel", "Node.js", "Fastify", "PostgreSQL"],
       "name": "Back-end"
     },
     {