diff --git a/package-lock.json b/package-lock.json index c36b5ea..a10e74b 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index bb94f53..8b7495b 100644 --- a/package.json +++ b/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" diff --git a/src/data.ts b/src/data.ts index b838937..23d8b5e 100644 --- a/src/data.ts +++ b/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/', + }, + ], + }, + ], }, }; diff --git a/src/types/common.ts b/src/types/common.ts index 97139e1..9aa0639 100644 --- a/src/types/common.ts +++ b/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; } diff --git a/src/types/main-section.ts b/src/types/main-section.ts index f4c031a..c00573d 100644 --- a/src/types/main-section.ts +++ b/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; diff --git a/src/types/skills-section.ts b/src/types/skills-section.ts index 1fe6adc..57e7f4f 100644 --- a/src/types/skills-section.ts +++ b/src/types/skills-section.ts @@ -10,6 +10,6 @@ interface SkillSet { } export interface SkillsSection { - skillSets: SkillSet | SkillSet; + skillSets: SkillSet[] | SkillSet[]; config: SectionConfig; }