From 2260b08c30d1a0a08364ea41076b4552862a4508 Mon Sep 17 00:00:00 2001 From: Dejvino Date: Wed, 24 May 2023 21:15:53 +0200 Subject: [PATCH] Add skills cloud --- .gitignore | 4 +++- package-lock.json | 16 ++++++++++++++++ package.json | 1 + src/Person.ts | 9 ++++++++- src/app/components/JobsHistory.tsx | 1 + src/app/components/Skills.tsx | 17 +++++++++++++++++ src/app/components/TagCloud.tsx | 27 +++++++++++++++++++++++++++ src/app/globals.css | 21 +++++++++++++++++++++ src/app/page.tsx | 6 ++++-- 9 files changed, 98 insertions(+), 4 deletions(-) create mode 100644 src/app/components/Skills.tsx create mode 100644 src/app/components/TagCloud.tsx diff --git a/.gitignore b/.gitignore index 8f322f0..7c8e27e 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,6 @@ -# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. +node_modules/ +dist/ +.next # dependencies /node_modules diff --git a/package-lock.json b/package-lock.json index 9958ac0..f55116a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "@types/react-dom": "18.2.4", "autoprefixer": "10.4.14", "bootstrap": "^5.2.3", + "bootstrap-icons": "^1.10.5", "eslint": "8.41.0", "eslint-config-next": "13.4.3", "next": "13.4.3", @@ -790,6 +791,21 @@ "@popperjs/core": "^2.11.6" } }, + "node_modules/bootstrap-icons": { + "version": "1.10.5", + "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.10.5.tgz", + "integrity": "sha512-oSX26F37V7QV7NCE53PPEL45d7EGXmBgHG3pDpZvcRaKVzWMqIRL9wcqJUyEha1esFtM3NJzvmxFXDxjJYD0jQ==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/twbs" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/bootstrap" + } + ] + }, "node_modules/bplist-parser": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/bplist-parser/-/bplist-parser-0.2.0.tgz", diff --git a/package.json b/package.json index 15dc2d6..6354f10 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "@types/react-dom": "18.2.4", "autoprefixer": "10.4.14", "bootstrap": "^5.2.3", + "bootstrap-icons": "^1.10.5", "eslint": "8.41.0", "eslint-config-next": "13.4.3", "next": "13.4.3", diff --git a/src/Person.ts b/src/Person.ts index 2a8ef8f..4347f9a 100644 --- a/src/Person.ts +++ b/src/Person.ts @@ -1,4 +1,11 @@ export const Person = { name: "David Hrdina Němeček", - brief: "Software developer, people manager." + brief: "Software developer, people manager.", + + skills: { + primary: ['Java', 'TypeScript', 'JavaScript'], + secondary: ['Kotlin', 'Go'], + others: ['Driver\'s license (B)'] + }, + interests: ['Guitars and Heavy Metal', 'Mazda MX-5', 'DIY electronics'], }; diff --git a/src/app/components/JobsHistory.tsx b/src/app/components/JobsHistory.tsx index c5f99c7..aee6327 100644 --- a/src/app/components/JobsHistory.tsx +++ b/src/app/components/JobsHistory.tsx @@ -8,6 +8,7 @@ import JobCard from './JobCard'; export default function JobsHistory() { return ( +

Experience

+

Skills

+ + + + +
+ ) +} diff --git a/src/app/components/TagCloud.tsx b/src/app/components/TagCloud.tsx new file mode 100644 index 0000000..9b05ca1 --- /dev/null +++ b/src/app/components/TagCloud.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import Container from 'react-bootstrap/Container'; + +export type Props = { + title: string, + icon?: string, + tags: string[], + style?: 'primary' | 'light' +} + +function Tag(props: {text: string}) { + return ( + {props.text} + ) +} + +export default function TagCloud(props: Props) { + const containerClasses = ['tag-cloud', 'cloud-' + (props.style || 'standard')] + return ( + +

{props.icon && ( )}{props.title}

+ + {props.tags.map((tag: string) => () )} + +
+ ) +} diff --git a/src/app/globals.css b/src/app/globals.css index d145aef..a5e9c46 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -1,5 +1,6 @@ @import 'bootstrap/dist/css/bootstrap.min.css'; +@import 'bootstrap-icons/font/bootstrap-icons.min.css'; .job-card { margin-top: 1em; @@ -7,4 +8,24 @@ .job-card .timerange { font-style: italic; +} + +.cloud-primary .tag-badges { + font-size: 180%; +} +.cloud-standard .tag-badges { + font-size: 140%; +} +.cloud-light .tag-badges { + font-size: 130%; + filter: opacity(60%); +} +.tag-badges > span { + margin: 0.4em; +} +.tag-badges > span { + transition: all 0.3s; +} +.tag-badges > span:hover { + filter: brightness(95%); } \ No newline at end of file diff --git a/src/app/page.tsx b/src/app/page.tsx index 5f855ea..683037d 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -3,13 +3,15 @@ import React from 'react'; import Container from 'react-bootstrap/Container'; import JobsHistory from './components/JobsHistory'; import AboutBrief from './components/AboutBrief'; +import Skills from './components/Skills'; export default function Home() { return ( - - + + + ) }