juyung/devscard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Setup icons imports and add data for the skills section

Browse source
This commit is contained in:
Konrad Szwarc 2022-08-28 00:39:29 +02:00
parent 0c8e1d4c18
commit 4b95c529df
6 changed files with 223 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

79
package-lock.json generated
View file

@ -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",

4
package.json
View file

@ -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"

137
src/data.ts
View file

@ -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/',
},
],
},
],
},
};

5
src/types/common.ts
View file

@ -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;
}

2
src/types/main-section.ts
View file

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

2
src/types/skills-section.ts
View file

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