Add skills cloud

.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

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

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

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

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 

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>
+    )
+}

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>
+    )
+}

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;
@@ -8,3 +9,23 @@
 .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%);
+}

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>
+      <AboutBrief />
-      <JobsHistory></JobsHistory>
+      <JobsHistory />
+      <Skills />
     </Container>
   )
 }