Add languages

src/PersonalData.ts

@@ -40,6 +40,7 @@ export const personalData: PersonalData = {
     skills: {
         primary: ['Java', 'TypeScript', 'JavaScript'],
         secondary: ['Kotlin', 'Go'],
+        languages: ['Czech (native)', 'English (proficient)', 'German (elementary)'],
         others: ['Driver\'s license (B)']
     },
     interests: ['Guitars and Heavy Metal', 'Mazda MX-5', 'DIY electronics'],

src/PersonalDataTypes.ts

@@ -20,6 +20,7 @@ export type Education = Jobs;
 export type Skills = {
     primary: string[],
     secondary?: string[],
+    languages?: string[],
     others?: string[]
 }
 

src/app/components/Skills.tsx

@@ -12,6 +12,9 @@ export default function Skills() {
         {person.skills.secondary && (
           <TagCloud title='Secondary' icon='bookmark-plus' tags={person.skills.secondary} />
           )}
+        {person.skills.languages && (
+          <TagCloud title='Languages' icon='bookmarks' tags={person.skills.languages} />
+          )}
         {person.skills.others && (
           <TagCloud title='Others' icon='bookmark' tags={person.skills.others} />
           )}

src/app/components/TagCloud.tsx

@@ -10,7 +10,7 @@ export type Props = {
 }
 
 function Tag(props: {text: string}) {
-    const tagKey = 'tag_' + props.text;
+    const tagKey = 'tag ' + props.text;
     const elementRef = useAutoFocus(tagKey)
     return (
         <span ref={elementRef} className='badge text-bg-light'>{props.text}</span>