From 2260b08c30d1a0a08364ea41076b4552862a4508 Mon Sep 17 00:00:00 2001
From: Dejvino <git.dejvino.cz@dejvino.cz>
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 (
     <Container>
+        <h2>Experience</h2>
         <Row>
           <Col >
           <JobCard 
diff --git a/src/app/components/Skills.tsx b/src/app/components/Skills.tsx
new file mode 100644
index 0000000..442101b
--- /dev/null
+++ b/src/app/components/Skills.tsx
@@ -0,0 +1,17 @@
+import React, { useContext } from 'react';
+import Container from 'react-bootstrap/Container';
+import { PersonContext } from './PersonContext';
+import TagCloud from './TagCloud';
+
+export default function Skills() {
+    const person = useContext(PersonContext)
+    return (
+    <Container className='skills'>
+        <h2>Skills</h2>
+        <TagCloud title='Primary' icon='bookmark-star' style='primary' tags={person.skills.primary} />
+        <TagCloud title='Secondary' icon='bookmark-plus' tags={person.skills.secondary} />
+        <TagCloud title='Others' icon='bookmark' tags={person.skills.others} />
+        <TagCloud title='Interests' icon='bookmark-heart' style='light' tags={person.interests} />
+      </Container>
+    )
+}
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 (
+        <span className='badge text-bg-light'>{props.text}</span>
+    )
+}
+
+export default function TagCloud(props: Props) {
+    const containerClasses = ['tag-cloud', 'cloud-' + (props.style || 'standard')]
+    return (
+        <Container className={containerClasses.join(' ')}>
+            <h4>{props.icon && (<i className={'bi-' + props.icon}> </i>)}{props.title}</h4>
+            <Container className='tag-badges'>
+                {props.tags.map((tag: string) => (<Tag key={tag} text={tag} />) )}
+            </Container>
+        </Container>
+    )
+}
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 (
 
     <Container fluid='xxl'>
-      <AboutBrief></AboutBrief>
-      <JobsHistory></JobsHistory>
+      <AboutBrief />
+      <JobsHistory />
+      <Skills />
     </Container>
   )
 }