Add skills cloud

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

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