Setup icons imports and add data for the skills section

package-lock.json

@@ -8,6 +8,10 @@
       "name": "devscard",
       "version": "0.0.1",
       "dependencies": {
+        "@iconify-icons/fa6-brands": "^1.2.5",
+        "@iconify-icons/fa6-solid": "^1.2.6",
+        "@iconify-icons/simple-icons": "^1.2.23",
+        "@iconify/react": "^3.2.2",
         "clsx": "^1.2.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
@@ -2498,6 +2502,46 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
       "dev": true
     },
+    "node_modules/@iconify-icons/fa6-brands": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/@iconify-icons/fa6-brands/-/fa6-brands-1.2.5.tgz",
+      "integrity": "sha512-hF9/tbS12HU3h97Dgx+ypSfkXy+P8iYjGa8FaESdG0EJ1/xmZ3KHOy45QDzsDaAr1t3ktb1VDhGV5hlSgLuyAA==",
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
+    "node_modules/@iconify-icons/fa6-solid": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@iconify-icons/fa6-solid/-/fa6-solid-1.2.6.tgz",
+      "integrity": "sha512-vXSGD24gEP2NSAKWolVQpU7BrYBljso/hdKvnVQZwzf0buf0dzzD9g7686dwE80unIQ3lengm5xOv31MHZhLPQ==",
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
+    "node_modules/@iconify-icons/simple-icons": {
+      "version": "1.2.23",
+      "resolved": "https://registry.npmjs.org/@iconify-icons/simple-icons/-/simple-icons-1.2.23.tgz",
+      "integrity": "sha512-QLZs0wYMgv1pDIKl3ZV9tAzJpvw3Ak3K+TkqOjJdfmHmVajmBix5dnOIawrPt3gOMtKNBetVYo9ZXwdZUcx0Mw==",
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
+    "node_modules/@iconify/react": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@iconify/react/-/react-3.2.2.tgz",
+      "integrity": "sha512-z3+Jno3VcJzgNHsN5mEvYMsgCkOZkydqdIwOxjXh45+i2Vs9RGH68Y52vt39izwFSfuYUXhaW+1u7m7+IhCn/g==",
+      "funding": {
+        "url": "http://github.com/sponsors/cyberalien"
+      },
+      "peerDependencies": {
+        "react": ">=16"
+      }
+    },
+    "node_modules/@iconify/types": {
+      "version": "2.0.0-beta.1",
+      "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0-beta.1.tgz",
+      "integrity": "sha512-M8I8ReRIEj4oIddjUjw3CoKv1wfSX2F3CIDjn3RwxQSOz2nG7/s5r5BJxRHwr+t7p0RPkbyiR640/FQPDZjeYg=="
+    },
     "node_modules/@istanbuljs/load-nyc-config": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
@@ -28481,6 +28525,41 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
       "dev": true
     },
+    "@iconify-icons/fa6-brands": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/@iconify-icons/fa6-brands/-/fa6-brands-1.2.5.tgz",
+      "integrity": "sha512-hF9/tbS12HU3h97Dgx+ypSfkXy+P8iYjGa8FaESdG0EJ1/xmZ3KHOy45QDzsDaAr1t3ktb1VDhGV5hlSgLuyAA==",
+      "requires": {
+        "@iconify/types": "*"
+      }
+    },
+    "@iconify-icons/fa6-solid": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@iconify-icons/fa6-solid/-/fa6-solid-1.2.6.tgz",
+      "integrity": "sha512-vXSGD24gEP2NSAKWolVQpU7BrYBljso/hdKvnVQZwzf0buf0dzzD9g7686dwE80unIQ3lengm5xOv31MHZhLPQ==",
+      "requires": {
+        "@iconify/types": "*"
+      }
+    },
+    "@iconify-icons/simple-icons": {
+      "version": "1.2.23",
+      "resolved": "https://registry.npmjs.org/@iconify-icons/simple-icons/-/simple-icons-1.2.23.tgz",
+      "integrity": "sha512-QLZs0wYMgv1pDIKl3ZV9tAzJpvw3Ak3K+TkqOjJdfmHmVajmBix5dnOIawrPt3gOMtKNBetVYo9ZXwdZUcx0Mw==",
+      "requires": {
+        "@iconify/types": "*"
+      }
+    },
+    "@iconify/react": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@iconify/react/-/react-3.2.2.tgz",
+      "integrity": "sha512-z3+Jno3VcJzgNHsN5mEvYMsgCkOZkydqdIwOxjXh45+i2Vs9RGH68Y52vt39izwFSfuYUXhaW+1u7m7+IhCn/g==",
+      "requires": {}
+    },
+    "@iconify/types": {
+      "version": "2.0.0-beta.1",
+      "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0-beta.1.tgz",
+      "integrity": "sha512-M8I8ReRIEj4oIddjUjw3CoKv1wfSX2F3CIDjn3RwxQSOz2nG7/s5r5BJxRHwr+t7p0RPkbyiR640/FQPDZjeYg=="
+    },
     "@istanbuljs/load-nyc-config": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",

package.json

@@ -14,6 +14,10 @@
     "build-storybook": "build-storybook"
   },
   "dependencies": {
+    "@iconify-icons/fa6-brands": "^1.2.5",
+    "@iconify-icons/fa6-solid": "^1.2.6",
+    "@iconify-icons/simple-icons": "^1.2.23",
+    "@iconify/react": "^3.2.2",
     "clsx": "^1.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

src/data.ts

@@ -1,3 +1,22 @@
+import facebookIcon from '@iconify-icons/fa6-brands/facebook-f';
+import githubIcon from '@iconify-icons/fa6-brands/github';
+import linkedinIcon from '@iconify-icons/fa6-brands/linkedin-in';
+import twitterIcon from '@iconify-icons/fa6-brands/twitter';
+import barsProgressIcon from '@iconify-icons/fa6-solid/bars-progress';
+import userIcon from '@iconify-icons/fa6-solid/user';
+import chakrauiIcon from '@iconify-icons/simple-icons/chakraui';
+import eslintIcon from '@iconify-icons/simple-icons/eslint';
+import firebaseIcon from '@iconify-icons/simple-icons/firebase';
+import mongodbIcon from '@iconify-icons/simple-icons/mongodb';
+import nestjsIcon from '@iconify-icons/simple-icons/nestjs';
+import pnpmIcon from '@iconify-icons/simple-icons/pnpm';
+import postgresqlIcon from '@iconify-icons/simple-icons/postgresql';
+import prettierIcon from '@iconify-icons/simple-icons/prettier';
+import reactIcon from '@iconify-icons/simple-icons/react';
+import sassIcon from '@iconify-icons/simple-icons/sass';
+import tailwindcssIcon from '@iconify-icons/simple-icons/tailwindcss';
+import typescriptIcon from '@iconify-icons/simple-icons/typescript';
+
 import myImage from '@/assets/my-image.jpeg';
 import type { Data } from '@/types/data';
 
@@ -9,7 +28,7 @@ export const data: Data = {
   },
   main: {
     config: {
-      icon: '',
+      icon: userIcon,
     },
     image: { src: myImage, alt: 'Mark Freeman picture' },
     fullName: 'Mark Freeman',
@@ -25,8 +44,120 @@ export const data: Data = {
     tags: [{ name: 'Open for freelance' }, { name: 'Available for mentoring' }, { name: 'Working on side project' }],
     action: {
       label: 'Download CV',
-      href: '#',
+      url: '#',
     },
-    socials: [],
+    socials: [
+      { name: 'Facebook', icon: facebookIcon, url: '#' },
+      { name: 'GitHub', icon: githubIcon, url: '#' },
+      { name: 'LinkedIn', icon: linkedinIcon, url: '#' },
+      { name: 'Twitter', icon: twitterIcon, url: '#' },
+    ],
+  },
+  skills: {
+    config: {
+      title: 'Skills',
+      icon: barsProgressIcon,
+    },
+    skillSets: [
+      {
+        title: 'I already know',
+        skills: [
+          {
+            icon: reactIcon,
+            iconColor: '#61DAFB',
+            name: 'React.js',
+            level: 5,
+            url: 'https://reactjs.org/',
+            description:
+              'Proin ut erat sed massa tempus suscipit. Mauris efficitur nunc sem, nec scelerisque ligula bibendum ut.',
+          },
+          {
+            icon: typescriptIcon,
+            iconColor: '#3178C6',
+            name: 'TypeScript',
+            level: 4,
+            url: 'https://www.typescriptlang.org/',
+            description:
+              'Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.',
+          },
+          {
+            icon: sassIcon,
+            iconColor: '#CC6699',
+            name: 'SASS',
+            level: 4,
+            url: 'https://sass-lang.com/',
+            description:
+              'Nulla interdum pellentesque ultricies. Ut id eros commodo, ultrices ligula eu, elementum ante.',
+          },
+          {
+            icon: chakrauiIcon,
+            iconColor: '#319795',
+            name: 'Chakra UI',
+            level: 5,
+            url: 'https://chakra-ui.com/',
+          },
+          {
+            icon: tailwindcssIcon,
+            iconColor: '#06B6D4',
+            name: 'Tailwind CSS',
+            level: 2,
+            url: 'https://tailwindcss.com/',
+          },
+          {
+            icon: prettierIcon,
+            iconColor: '#F7B93E',
+            name: 'Prettier',
+            level: 5,
+            url: 'https://prettier.io/',
+          },
+          {
+            icon: eslintIcon,
+            iconColor: '#4B32C3',
+            name: '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: nestjsIcon,
+            iconColor: '#E0234E',
+            name: 'NestJS',
+            level: 2,
+            url: 'https://nestjs.com/',
+            description:
+              'Praesent feugiat ultricies iaculis. In posuere vehicula odio, sed consequat velit porta viverra.',
+          },
+          {
+            icon: postgresqlIcon,
+            iconColor: '#4169E1',
+            name: 'PostgreSQL',
+            level: 2,
+            url: 'https://www.postgresql.org/',
+          },
+          {
+            icon: mongodbIcon,
+            iconColor: '#47A248',
+            name: 'MongoDB',
+            level: 1,
+            url: 'https://www.mongodb.com/',
+          },
+          {
+            icon: firebaseIcon,
+            iconColor: '#FFCA28',
+            name: 'Firebase',
+            level: 1,
+            url: 'https://firebase.google.com/',
+          },
+          {
+            icon: pnpmIcon,
+            iconColor: '#F69220',
+            name: 'pnpm',
+            level: 3,
+            url: 'https://pnpm.io/',
+          },
+        ],
+      },
+    ],
   },
 };

src/types/common.ts

@@ -1,4 +1,6 @@
-export type Icon = string;
+import type { IconifyIcon } from '@iconify/react';
+
+export type Icon = IconifyIcon;
 
 export type LocalImage = {
   src: string;
@@ -19,6 +21,7 @@ export interface Social {
 export interface Tag {
   name: string;
   icon?: Icon;
+  iconColor?: string;
   url?: string;
   description?: string;
 }

src/types/main-section.ts

@@ -9,7 +9,7 @@ export interface MainSection {
   tags: Tag[];
   action: {
     label: string;
-    href: string;
+    url: string;
   };
   socials: Social[];
   config: Omit<SectionConfig, 'title'>;

src/types/skills-section.ts

@@ -10,6 +10,6 @@ interface SkillSet<SkillType> {
 }
 
 export interface SkillsSection {
-  skillSets: SkillSet<Tag> | SkillSet<LevelledSkill>;
+  skillSets: SkillSet<Tag>[] | SkillSet<LevelledSkill>[];
   config: SectionConfig;
 }