Create file with technology (skills) tag configs (#145)

2023-01-14 12:59:13 +01:00 · 2023-01-14 12:59:13 +01:00 · cca185e075
commit cca185e075
parent edfb3ed8d0
4 changed files with 237 additions and 301 deletions
--- a/src/data/sections/experience.ts
+++ b/src/data/sections/experience.ts
@ -1,5 +1,18 @@
 import type { ExperienceSection } from '@/types/experience-section';

+import {
+  chakraUi,
+  eslint,
+  firebase,
+  nextJs,
+  nx,
+  pnpm,
+  react,
+  reactQuery,
+  tailwindCss,
+  typescript,
+  vue,
+} from '../skills';
 import { facebook, github, instagram, linkedin, twitter, website } from '../socials';

 const experienceData: ExperienceSection = {
@ -21,38 +34,7 @@ const experienceData: ExperienceSection = {
        'Nunc malesuada leo et est iaculis facilisis.',
        'Fusce eu urna ut magna malesuada fringilla.',
      ],
-      tags: [
-        {
-          icon: 'simple-icons:react',
-          iconColor: '#61DAFB',
-          name: 'React.js',
-          url: 'https://reactjs.org/',
-        },
-        {
-          icon: 'simple-icons:nextdotjs',
-          iconColor: '#000000',
-          name: 'Next.js',
-          url: 'https://nextjs.org/',
-        },
-        {
-          icon: 'simple-icons:typescript',
-          iconColor: '#3178C6',
-          name: 'TypeScript',
-          url: 'https://www.typescriptlang.org/',
-        },
-        {
-          icon: 'simple-icons:nx',
-          iconColor: '#143055',
-          name: 'Nx',
-          url: 'https://nx.dev/',
-        },
-        {
-          icon: 'simple-icons:firebase',
-          iconColor: '#FFCA28',
-          name: 'Firebase',
-          url: 'https://firebase.google.com/',
-        },
-      ],
+      tags: [react(), nextJs(), typescript(), nx(), firebase()],
      socials: [facebook('#'), linkedin('#')],
    },
    {
@ -66,32 +48,7 @@ const experienceData: ExperienceSection = {
        'Sed sed sollicitudin eros, id ultricies mi. Aliquam sodales elit vel ante tempor, non vehicula nibh facilisis.',
        'Cras feugiat ultricies maximus. Aliquam tristique ex odio, ac semper urna accumsan a.',
      ],
-      tags: [
-        {
-          icon: 'simple-icons:react',
-          iconColor: '#61DAFB',
-          name: 'React.js',
-          url: 'https://reactjs.org/',
-        },
-        {
-          icon: 'simple-icons:reactquery',
-          iconColor: '#FF4154',
-          name: 'TanStack Query',
-          url: 'https://tanstack.com/query',
-        },
-        {
-          icon: 'simple-icons:chakraui',
-          iconColor: '#319795',
-          name: 'Chakra UI',
-          url: 'https://chakra-ui.com/',
-        },
-        {
-          icon: 'simple-icons:eslint',
-          iconColor: '#4B32C3',
-          name: 'ESLint',
-          url: 'https://eslint.org/',
-        },
-      ],
+      tags: [react(), reactQuery(), chakraUi(), eslint()],
      socials: [website('#'), instagram('#')],
    },
    {
@ -105,26 +62,7 @@ const experienceData: ExperienceSection = {
        'Maecenas ut elit sit amet nibh maximus condimentum in nec lorem. Pellentesque tincidunt odio vel leo suscipit, in interdum mi gravida.',
        'Donec non vulputate augue.',
      ],
-      tags: [
-        {
-          icon: 'simple-icons:vuedotjs',
-          iconColor: '#4FC08D',
-          name: 'Vue.js',
-          url: 'https://vuejs.org/',
-        },
-        {
-          icon: 'simple-icons:tailwindcss',
-          iconColor: '#06B6D4',
-          name: 'Tailwind CSS',
-          url: 'https://tailwindcss.com/',
-        },
-        {
-          icon: 'simple-icons:pnpm',
-          iconColor: '#F69220',
-          name: 'pnpm',
-          url: 'https://pnpm.io/',
-        },
-      ],
+      tags: [vue(), tailwindCss(), pnpm()],
      socials: [twitter('#'), github('#')],
    },
  ],
--- a/src/data/sections/portfolio.ts
+++ b/src/data/sections/portfolio.ts
@ -1,5 +1,21 @@
 import type { PortfolioSection } from '@/types/portfolio-section';

+import {
+  chakraUi,
+  eslint,
+  firebase,
+  jest,
+  nestJs,
+  nextJs,
+  nx,
+  pnpm,
+  postgreSql,
+  prettier,
+  react,
+  sass,
+  tailwindCss,
+  typescript,
+} from '../skills';
 import { demo, github, mockups, website } from '../socials';

 const portfolioData: PortfolioSection = {
@ -22,38 +38,7 @@ const portfolioData: PortfolioSection = {
      ],
      description:
        'In tristique vulputate augue vel egestas. Quisque ac imperdiet tortor, at lacinia ex. Duis vel ex hendrerit, commodo odio sed, aliquam enim. Ut arcu nulla, tincidunt eget arcu eget, molestie vulputate nisi. Nunc malesuada leo et est iaculis facilisis.',
-      tags: [
-        {
-          icon: 'simple-icons:nextdotjs',
-          iconColor: '#000000',
-          name: 'Next.js',
-          url: 'https://nextjs.org/',
-        },
-        {
-          icon: 'simple-icons:sass',
-          iconColor: '#CC6699',
-          name: 'SASS',
-          url: 'https://sass-lang.com/',
-        },
-        {
-          icon: 'simple-icons:pnpm',
-          iconColor: '#F69220',
-          name: 'pnpm',
-          url: 'https://pnpm.io/',
-        },
-        {
-          icon: 'simple-icons:eslint',
-          iconColor: '#4B32C3',
-          name: 'ESLint',
-          url: 'https://eslint.org/',
-        },
-        {
-          icon: 'simple-icons:prettier',
-          iconColor: '#F7B93E',
-          name: 'Prettier',
-          url: 'https://prettier.io/',
-        },
-      ],
+      tags: [nextJs(), sass(), pnpm(), eslint(), prettier()],
      socials: [mockups('#'), demo('#')],
    },
    {
@ -69,32 +54,7 @@ const portfolioData: PortfolioSection = {
      ],
      description:
        'Ut ultricies tortor at sodales aliquam. Vivamus metus ante, fringilla nec ligula in, suscipit rhoncus mauris. Praesent hendrerit velit odio, at accumsan urna faucibus convallis. Nunc at massa eget ligula volutpat dictum a sit amet libero. Vestibulum iaculis molestie maximus. In hac habitasse platea dictumst.',
-      tags: [
-        {
-          icon: 'simple-icons:react',
-          iconColor: '#61DAFB',
-          name: 'React.js',
-          url: 'https://reactjs.org/',
-        },
-        {
-          icon: 'simple-icons:tailwindcss',
-          iconColor: '#06B6D4',
-          name: 'Tailwind CSS',
-          url: 'https://tailwindcss.com/',
-        },
-        {
-          icon: 'simple-icons:nestjs',
-          iconColor: '#E0234E',
-          name: 'NestJS',
-          url: 'https://nestjs.com/',
-        },
-        {
-          icon: 'simple-icons:postgresql',
-          iconColor: '#4169E1',
-          name: 'PostgreSQL',
-          url: 'https://www.postgresql.org/',
-        },
-      ],
+      tags: [react(), tailwindCss(), nestJs(), postgreSql()],
      socials: [mockups('#'), demo('#')],
    },
    {
@ -110,38 +70,7 @@ const portfolioData: PortfolioSection = {
      ],
      description:
        'Quisque id consectetur eros. In hac habitasse platea dictumst. Sed eu pulvinar orci. Mauris consequat, est in dignissim varius, neque nisl commodo mauris, id blandit risus justo eu nulla.',
-      tags: [
-        {
-          icon: 'simple-icons:react',
-          iconColor: '#61DAFB',
-          name: 'React.js',
-          url: 'https://reactjs.org/',
-        },
-        {
-          icon: 'simple-icons:chakraui',
-          iconColor: '#319795',
-          name: 'Chakra UI',
-          url: 'https://chakra-ui.com/',
-        },
-        {
-          icon: 'simple-icons:typescript',
-          iconColor: '#3178C6',
-          name: 'TypeScript',
-          url: 'https://www.typescriptlang.org/',
-        },
-        {
-          icon: 'simple-icons:nx',
-          iconColor: '#143055',
-          name: 'Nx',
-          url: 'https://nx.dev/',
-        },
-        {
-          icon: 'simple-icons:pnpm',
-          iconColor: '#F69220',
-          name: 'pnpm',
-          url: 'https://pnpm.io/',
-        },
-      ],
+      tags: [react(), chakraUi(), typescript(), nx(), pnpm()],
      socials: [website('#'), github('#')],
    },
    {
@ -157,26 +86,7 @@ const portfolioData: PortfolioSection = {
      ],
      description:
        'Praesent eu neque tortor. Vestibulum ac magna nisl. Vivamus massa sem, feugiat in pharetra non, convallis egestas purus. Ut consequat ullamcorper sem, in euismod nibh posuere ut. ',
-      tags: [
-        {
-          icon: 'simple-icons:typescript',
-          iconColor: '#3178C6',
-          name: 'TypeScript',
-          url: 'https://www.typescriptlang.org/',
-        },
-        {
-          icon: 'simple-icons:jest',
-          iconColor: '#C21325',
-          name: 'Jest',
-          url: 'https://jestjs.io/',
-        },
-        {
-          icon: 'simple-icons:firebase',
-          iconColor: '#FFCA28',
-          name: 'Firebase',
-          url: 'https://firebase.google.com/',
-        },
-      ],
+      tags: [typescript(), jest(), firebase()],
      socials: [mockups('#'), github('#')],
    },
  ],
--- a/src/data/sections/skills.ts
+++ b/src/data/sections/skills.ts
@ -1,5 +1,24 @@
 import type { SkillsSection } from '@/types/skills-section';

+import {
+  apolloGraphql,
+  astro,
+  chakraUi,
+  cypress,
+  eslint,
+  firebase,
+  mongoDb,
+  nestJs,
+  pnpm,
+  postgreSql,
+  prettier,
+  react,
+  sass,
+  supabase,
+  tailwindCss,
+  typescript,
+} from '../skills';
+
 const skillsData: SkillsSection = {
  config: {
    title: 'Skills',
@ -9,140 +28,48 @@ const skillsData: SkillsSection = {
    {
      title: 'I already know',
      skills: [
-        {
-          icon: 'simple-icons:react',
-          iconColor: '#61DAFB',
-          name: 'React.js',
+        react({
          level: 5,
-          url: 'https://reactjs.org/',
          description:
            'Proin ut erat sed massa tempus suscipit. Mauris efficitur nunc sem, nec scelerisque ligula bibendum ut.',
-        },
-        {
-          icon: 'simple-icons:typescript',
-          iconColor: '#3178C6',
-          name: 'TypeScript',
+        }),
+        typescript({
          level: 4,
-          url: 'https://www.typescriptlang.org/',
          description: 'Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.',
-        },
-        {
-          icon: 'simple-icons:sass',
-          iconColor: '#CC6699',
-          name: 'SASS',
+        }),
+        sass({
          level: 4,
-          url: 'https://sass-lang.com/',
          description: 'Nulla interdum pellentesque ultricies. Ut id eros commodo, ultrices ligula eu, elementum ante.',
-        },
-        {
-          icon: 'simple-icons:chakraui',
-          iconColor: '#319795',
-          name: 'Chakra UI',
-          level: 5,
-          url: 'https://chakra-ui.com/',
-        },
-        {
-          icon: 'simple-icons:tailwindcss',
-          iconColor: '#06B6D4',
-          name: 'Tailwind CSS',
-          level: 2,
-          url: 'https://tailwindcss.com/',
-        },
-        {
-          icon: 'simple-icons:prettier',
-          iconColor: '#F7B93E',
-          name: 'Prettier',
-          level: 5,
-          url: 'https://prettier.io/',
-        },
-        {
-          icon: 'simple-icons:eslint',
-          iconColor: '#4B32C3',
-          name: 'ESLint',
+        }),
+        chakraUi({ level: 5 }),
+        tailwindCss({ level: 2 }),
+        prettier({ level: 5 }),
+        eslint({
          level: 4,
-          url: 'https://eslint.org/',
          description:
            'Nulla tempor turpis at vehicula pharetra. Vestibulum tellus tortor, commodo et suscipit id, lobortis id nunc.',
-        },
-        {
-          icon: 'simple-icons:nestjs',
-          iconColor: '#E0234E',
-          name: 'NestJS',
+        }),
+        nestJs({
          level: 2,
-          url: 'https://nestjs.com/',
          description:
            'Praesent feugiat ultricies iaculis. In posuere vehicula odio, sed consequat velit porta viverra.',
-        },
-        {
-          icon: 'simple-icons:postgresql',
-          iconColor: '#4169E1',
-          name: 'PostgreSQL',
-          level: 2,
-          url: 'https://www.postgresql.org/',
-        },
-        {
-          icon: 'simple-icons:mongodb',
-          iconColor: '#47A248',
-          name: 'MongoDB',
-          level: 1,
-          url: 'https://www.mongodb.com/',
-        },
-        {
-          icon: 'simple-icons:firebase',
-          iconColor: '#FFCA28',
-          name: 'Firebase',
-          level: 1,
-          url: 'https://firebase.google.com/',
-        },
-        {
-          icon: 'simple-icons:pnpm',
-          iconColor: '#F69220',
-          name: 'pnpm',
-          level: 3,
-          url: 'https://pnpm.io/',
-        },
+        }),
+        postgreSql({ level: 2 }),
+        mongoDb({ level: 1 }),
+        firebase({ level: 1 }),
+        pnpm({ level: 3 }),
      ],
    },
    {
      title: 'I want to learn',
-      skills: [
-        {
-          icon: 'simple-icons:apollographql',
-          iconColor: '#311C87',
-          name: 'Apollo GraphQL',
-        },
-        {
-          icon: 'simple-icons:astro',
-          iconColor: '#FF5D01',
-          name: 'Astro',
-        },
-        {
-          icon: 'simple-icons:supabase',
-          iconColor: '#3ECF8E',
-          name: 'Supabase',
-        },
-        {
-          icon: 'simple-icons:cypress',
-          iconColor: '#17202C',
-          name: 'Cypress',
-        },
-      ],
+      skills: [apolloGraphql(), astro(), supabase(), cypress()],
    },
    {
      title: 'I speak',
      skills: [
-        {
-          icon: 'circle-flags:pl',
-          name: 'Polish - native',
-        },
-        {
-          icon: 'circle-flags:us',
-          name: 'English - C1',
-        },
-        {
-          icon: 'circle-flags:es-variant',
-          name: 'Spanish - B1',
-        },
+        { icon: 'circle-flags:pl', name: 'Polish - native' },
+        { icon: 'circle-flags:us', name: 'English - C1' },
+        { icon: 'circle-flags:es-variant', name: 'Spanish - B1' },
      ],
    },
  ],
--- a/src/data/skills.ts
+++ b/src/data/skills.ts
@ -0,0 +1,161 @@
+import type { LevelledSkill } from '@/types/skills-section';
+
+import type { Tag } from '../types/common';
+
+interface SkillFactory {
+  (data: Partial<Tag> & { level: LevelledSkill['level'] }): LevelledSkill;
+  (data?: Partial<Tag>): Tag;
+}
+
+const createSkill = (defaultData: Omit<Tag, 'description'>) =>
+  ((data?: Partial<Tag> & { level?: LevelledSkill['level'] }): Tag | LevelledSkill => ({
+    ...defaultData,
+    ...data,
+  })) as SkillFactory;
+
+export const apolloGraphql = createSkill({
+  name: 'Apollo GraphQL',
+  icon: 'simple-icons:apollographql',
+  iconColor: '#311C87',
+  url: 'https://www.apollographql.com/',
+});
+
+export const astro = createSkill({
+  name: 'Astro',
+  icon: 'simple-icons:astro',
+  iconColor: '#FF5D01',
+  url: 'https://astro.build/',
+});
+
+export const chakraUi = createSkill({
+  name: 'Chakra UI',
+  icon: 'simple-icons:chakraui',
+  iconColor: '#319795',
+  url: 'https://chakra-ui.com/',
+});
+
+export const cypress = createSkill({
+  name: 'Cypress',
+  icon: 'simple-icons:cypress',
+  iconColor: '#17202C',
+  url: 'https://www.cypress.io/',
+});
+
+export const eslint = createSkill({
+  name: 'ESLint',
+  icon: 'simple-icons:eslint',
+  iconColor: '#4B32C3',
+  url: 'https://eslint.org/',
+});
+
+export const firebase = createSkill({
+  name: 'Firebase',
+  icon: 'simple-icons:firebase',
+  iconColor: '#FFCA28',
+  url: 'https://firebase.google.com/',
+});
+
+export const jest = createSkill({
+  name: 'Jest',
+  icon: 'simple-icons:jest',
+  iconColor: '#C21325',
+  url: 'https://jestjs.io/',
+});
+
+export const mongoDb = createSkill({
+  name: 'MongoDB',
+  icon: 'simple-icons:mongodb',
+  iconColor: '#47A248',
+  url: 'https://www.mongodb.com/',
+});
+
+export const nestJs = createSkill({
+  name: 'NestJS',
+  icon: 'simple-icons:nestjs',
+  iconColor: '#E0234E',
+  url: 'https://nestjs.com/',
+});
+
+export const nextJs = createSkill({
+  name: 'Next.js',
+  icon: 'simple-icons:nextdotjs',
+  iconColor: '#000000',
+  url: 'https://nextjs.org/',
+});
+
+export const nx = createSkill({
+  name: 'Nx',
+  icon: 'simple-icons:nx',
+  iconColor: '#143055',
+  url: 'https://nx.dev/',
+});
+
+export const pnpm = createSkill({
+  name: 'pnpm',
+  icon: 'simple-icons:pnpm',
+  iconColor: '#F69220',
+  url: 'https://pnpm.io/',
+});
+
+export const postgreSql = createSkill({
+  name: 'PostgreSQL',
+  icon: 'simple-icons:postgresql',
+  iconColor: '#4169E1',
+  url: 'https://www.postgresql.org/',
+});
+
+export const prettier = createSkill({
+  name: 'Prettier',
+  icon: 'simple-icons:prettier',
+  iconColor: '#F7B93E',
+  url: 'https://prettier.io/',
+});
+
+export const react = createSkill({
+  name: 'React.js',
+  icon: 'simple-icons:react',
+  iconColor: '#61DAFB',
+  url: 'https://reactjs.org/',
+});
+
+export const reactQuery = createSkill({
+  name: 'React Query',
+  icon: 'simple-icons:reactquery',
+  iconColor: '#FF4154',
+  url: 'https://tanstack.com/query',
+});
+
+export const sass = createSkill({
+  name: 'SASS',
+  icon: 'simple-icons:sass',
+  iconColor: '#CC6699',
+  url: 'https://sass-lang.com/',
+});
+
+export const supabase = createSkill({
+  name: 'Supabase',
+  icon: 'simple-icons:supabase',
+  iconColor: '#3ECF8E',
+  url: 'https://supabase.io/',
+});
+
+export const tailwindCss = createSkill({
+  name: 'Tailwind CSS',
+  icon: 'simple-icons:tailwindcss',
+  iconColor: '#06B6D4',
+  url: 'https://tailwindcss.com/',
+});
+
+export const typescript = createSkill({
+  name: 'TypeScript',
+  icon: 'simple-icons:typescript',
+  iconColor: '#3178C6',
+  url: 'https://www.typescriptlang.org/',
+});
+
+export const vue = createSkill({
+  name: 'Vue.js',
+  icon: 'simple-icons:vuedotjs',
+  iconColor: '#4FC08D',
+  url: 'https://vuejs.org/',
+});