diff --git a/README.md b/README.md index 5edad17..19ab8c2 100644 --- a/README.md +++ b/README.md @@ -31,9 +31,9 @@ export interface Divlo { 'Open-Source enthusiast' ] skills: { - languages: ['JavaScript', 'TypeScript', 'Python', 'Dart'] - frontEnd: ['HTML', 'CSS', 'SASS', 'React.js (+ Next.js)', 'Flutter'] - backEnd: ['Node.js', 'Strapi', 'MySQL'] + languages: ['JavaScript', 'TypeScript', 'Python', 'C/C++'] + frontEnd: ['HTML', 'CSS', 'Tailwind CSS', 'React.js (+ Next.js)'] + backEnd: ['Node.js', 'Fastify', 'Prisma', 'PostgreSQL', 'MySQL'] tools: ['Ubuntu', 'Hyper Terminal', 'VSCode', 'Git', 'Docker'] } } diff --git a/components/Skills/Skill.tsx b/components/Skills/Skill.tsx index 176e9c6..32a53b2 100644 --- a/components/Skills/Skill.tsx +++ b/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 { - skill: keyof typeof skills +export interface SkillComponentProps { + skill: string } -export const Skill: React.FC = (props) => { +export const SkillComponent: React.FC = (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 ( = (props) => { rel='noopener noreferrer' >
- {skill} + {skill}

{skill}

diff --git a/components/Skills/index.tsx b/components/Skills/index.tsx index 78d35f9..c3f8ed2 100644 --- a/components/Skills/index.tsx +++ b/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 ( <> - - - - + + + + - - - - - + + + + - - - + + + + + - - - - - + + + + + ) diff --git a/components/Skills/skills.ts b/components/Skills/skills.ts index 2e51885..d6ad219 100644 --- a/components/Skills/skills.ts +++ b/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' diff --git a/public/images/skills/C-Cpp.png b/public/images/skills/C-Cpp.png new file mode 100644 index 0000000..ef8e0c4 Binary files /dev/null and b/public/images/skills/C-Cpp.png differ diff --git a/public/images/skills/Fastify-dark.png b/public/images/skills/Fastify-dark.png new file mode 100644 index 0000000..47907d8 Binary files /dev/null and b/public/images/skills/Fastify-dark.png differ diff --git a/public/images/skills/Fastify-light.png b/public/images/skills/Fastify-light.png new file mode 100644 index 0000000..543c1c4 Binary files /dev/null and b/public/images/skills/Fastify-light.png differ diff --git a/public/images/skills/PostgreSQL.png b/public/images/skills/PostgreSQL.png new file mode 100644 index 0000000..e958818 Binary files /dev/null and b/public/images/skills/PostgreSQL.png differ diff --git a/public/images/skills/Prisma-dark.png b/public/images/skills/Prisma-dark.png new file mode 100644 index 0000000..4ca1e8d Binary files /dev/null and b/public/images/skills/Prisma-dark.png differ diff --git a/public/images/skills/Prisma-light.png b/public/images/skills/Prisma-light.png new file mode 100644 index 0000000..9770162 Binary files /dev/null and b/public/images/skills/Prisma-light.png differ diff --git a/public/images/skills/TailwindCSS.png b/public/images/skills/TailwindCSS.png new file mode 100644 index 0000000..0e6e54e Binary files /dev/null and b/public/images/skills/TailwindCSS.png differ