Move Tag cloud to the right of a Job details. Update printing styling.

src/PersonalData.ts

@@ -1,15 +1,18 @@
 import { PersonalData } from "./PersonalDataTypes";
 
+// Icons: https://icons.getbootstrap.com/
+
 export const personalData: PersonalData = {
-    updatedDate: '2023-06-01',
+    updatedDate: '2023-07-26',
 
     name: "David Hrdina Němeček",
-    brief: "Software developer. Engineering lead & manager.",
+    brief: "Software developer. Engineering lead.",
 
     contacts: [
         {icon: 'browser-firefox', text: 'www.dejvino.cz'},
         {icon: 'envelope-at', text: 'explosive@dejvino.cz'},
         {icon: 'git', text: 'https://git.dejvino.cz'},
+        {icon: 'github', text: 'https://github.com/Dejvino'},
         {icon: 'file-earmark-person', text: 'https://cv.dejvino.cz'},
         {icon: 'file-earmark-pdf', text: 'https://cv.dejvino.cz/pdf'},
         {icon: 'telephone', text: '+420 775 26 26 32'},
@@ -17,28 +20,28 @@ export const personalData: PersonalData = {
     ],
 
     jobs: {
-        current: {
+        current: [{
             position: 'Senior Software Development Manager (UI Platform)',
             company: 'Oracle|NetSuite',
             timerange: '2022 - present',
-            description: `Engineering lead for multiple UI Platform teams. Development of core UI frameworks, components and tools used by the rest of the organization.
+            description: `Engineering lead for multiple UI Platform teams who designed, developed and released a UI framework and tooling used by the rest of the organization.
-            Leading a UI testing architecture group, supplemental product owner for this group.`,
+            Leader of a UI testing architecture group responsible for defining a testing strategy across the UI Platform.`,
             tags: ['TypeScript', 'Preact', 'NodeJs', 'Oracle JET', 'Java', 'Git']
-        },
+        }],
         previous: [
             {
                 position: 'Software Development Manager (UI Platform)',
                 company: 'Oracle|NetSuite',
                 timerange: '2020 - 2022',
-                description: `Engineering lead for a UI Platform team. Development of UI components that formed a UI toolkit used by the rest of the organization.
+                description: `Engineering lead for a UI Platform team who developed components for a UI toolkit used by the rest of the organization.
-                Supplementing a product owner while bootstrapping a team.`,
+                Technical product owner while bootstrapping a team.`,
                 tags: ['TypeScript', 'Preact', 'NodeJs', 'Oracle JET', 'Java', 'Git']
             },
             {
                 position: 'Software Development Manager (ERP, Tax)',
                 company: 'Oracle|NetSuite',
                 timerange: '2017 - 2020',
-                description: 'Developer lead for ERP: Tax. Design and implementation of a pluggable Tax calculation engine. Coordination of multiple squads supporting both the legacy and the next-gen systems concurrently.',
+                description: 'Lead developer for ERP: Tax. Design and implementation of a pluggable Tax calculation engine. Coordination of multiple squads supporting both the legacy and the next-gen systems concurrently.',
                 tags: ['Java', 'Oracle SQL', 'JavaScript', 'Perforce', 'Git', 'Software Architecture']
             },
             {
@@ -53,7 +56,7 @@ export const personalData: PersonalData = {
                 position: 'Software Engineer',
                 company: 'Q2 Interactive',
                 timerange: '2009 - 2013',
-                description: `Development and project leadership of multiple web applications:
+                description: `Development and project leadership of multiple web applications and services:
                 - CRM system (PHP backend server, JavaScript frontend, Android client app),
                 - Accounting web app (PHP, JavaScript),
                 - e-commerce sites (Magento),
@@ -64,12 +67,22 @@ export const personalData: PersonalData = {
     },
 
     projects: {
-        current: {
+        current: [
-            position: `Personal projects`,
+            {
-            description: `Various hardware and software projects. Usually open sourced and published on [projects.dejvino.com](https://projects.dejvino.com) or [git.dejvino.cz](https://git.dejvino.cz).
+                position: `Open Source Contributor`,
-            These include video games, utilities, 3D models, retrofitting devices with embedded microcontrollers etc.`,
+                description: `Code contributor to open source projects, shared on [github.com/Dejvino](https://github.com/Dejvino) and [git.dejvino.cz](https://git.dejvino.cz/dejvino).
-            tags: ['Java', 'Python', 'C/C++', 'Embedded Software', 'OpenSCAD', 'TypeScript', 'Linux', 'Open Source', 'Git', 'Self-hosting']
+                E.g. SimpleMobileTools Android suite.`,
-        }
+                tags: ['Kotlin', 'Android', 'Python', 'Open Source', 'Git']
+            },
+        ],
+        previous: [
+            {
+                position: `Personal projects`,
+                description: `Various hardware and software projects. Usually open sourced and published on [projects.dejvino.com](https://projects.dejvino.com) and [git.dejvino.cz](https://git.dejvino.cz/dejvino).
+                These include video games, utilities, 3D models, retrofitting devices with embedded microcontrollers etc.`,
+                tags: ['Java', 'Python', 'TypeScript', 'Embedded', 'OpenSCAD', 'Linux', 'Open Source', 'Self-hosting']
+            },
+        ]
     },
 
     education: {
@@ -95,8 +108,8 @@ export const personalData: PersonalData = {
     },
 
     skills: {
-        primary: ['Java', 'TypeScript', 'JavaScript', 'Linux', 'Leadership'],
+        primary: ['Kotlin', 'Java', 'TypeScript', 'Linux'],
-        secondary: ['SQL', 'Kotlin', 'C/C++', 'NodeJs', 'Git', 'Preact', 'Embedded Software'],
+        secondary: ['Go', 'JavaScript', 'Oracle SQL', 'Git', 'React', 'Preact', 'Python'],
         languages: ['Czech (native)', 'English (proficient)', 'German (elementary)'],
         //others: ['Driver\'s license (B)']
     },

src/PersonalDataTypes.ts

@@ -12,13 +12,13 @@ export type Job = {
 }
 
 export type Jobs = {
-    current?: Job,
+    current?: Job[],
     previous?: Job[]
 }
 
 export type Education = Jobs;
 
-export type Projects = Jobs;
+export type Projects = Jobs
 
 export type Skills = {
     primary: string[],

src/app/components/Skills.tsx

@@ -13,9 +13,9 @@ export default function Skills() {
     <Container className='skills' fluid>
         <h2>Skills</h2>
         <Row>
-        <SkillsCol><TagCloud title='Primary' icon='bookmark-star' style='primary' tags={person.skills.primary} /></SkillsCol>
+        <SkillsCol><TagCloud title='Main' icon='bookmark-star' style='primary' tags={person.skills.primary} /></SkillsCol>
         {person.skills.secondary && (
-          <SkillsCol><TagCloud title='Secondary' icon='bookmark-plus' tags={person.skills.secondary} /></SkillsCol>
+          <SkillsCol><TagCloud title='Support' icon='bookmark-plus' tags={person.skills.secondary} /></SkillsCol>
           )}
         {person.skills.languages && (
           <SkillsCol><TagCloud title='Languages' icon='bookmarks' tags={person.skills.languages} /></SkillsCol>

src/app/components/job/JobCard.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Card from 'react-bootstrap/Card';
-import { Placeholder } from 'react-bootstrap';
+import { Col, Container, Placeholder, Row } from 'react-bootstrap';
 import JobTags from './JobTags';
 import { Job } from '@/PersonalDataTypes';
 import md from '../Markdown';
@@ -30,14 +30,22 @@ export default function JobCard(props: Props) {
                 <Card.Header>{props.heading}</Card.Header>
             )}
             <Card.Body>
-                <Card.Title>{props.position}</Card.Title>
+                <Container fluid>
-                <Card.Subtitle>
+                    <Row>
-                    {props.company && <span className='company-name'>{props.company}</span>}
+                        <Col>
-                    {props.company && props.timerange && <span>, </span>}
+                            <Card.Title>{props.position}</Card.Title>
-                    {props.timerange && <span className='timerange'>{props.timerange}</span>}
+                            <Card.Subtitle>
-                    </Card.Subtitle>
+                                {props.company && <span className='company-name'>{props.company}</span>}
-                <div className='multiline job-description'>{md(props.description)}</div>
+                                {props.company && props.timerange && <span>, </span>}
-                {props.tags && <JobTags tags={props.tags} />}
+                                {props.timerange && <span className='timerange'>{props.timerange}</span>}
+                            </Card.Subtitle>
+                            <div className='multiline job-description'>{md(props.description)}</div>
+                        </Col>
+                        <Col xs={3}>
+                            {props.tags && <JobTags tags={props.tags} />}
+                        </Col>
+                    </Row>
+                </Container>
             </Card.Body>
         </Card>
     );

src/app/components/job/JobsAccordion.tsx

@@ -43,8 +43,8 @@ export default function JobsAccordion(props: JobListProps) {
   const {jobs} = props
   const config = {...defaultProps, ...props}
   return (
-    <Accordion defaultActiveKey={jobs.current ? 'current' : 'previous-0'}>
+    <Accordion defaultActiveKey={jobs.current ? 'current-0' : 'previous-0'}>
-      {jobs.current && <AccordionJobItem  job={jobs.current} heading={config.currentHeading} eventKey={'current'}/>}
+      {jobs.current?.map((job, index) => <AccordionJobItem key={index} job={job} eventKey={`current-${index}`} heading={config.currentHeading} />)}
       {jobs.previous?.map((job, index) => <AccordionJobItem key={index} job={job} eventKey={`previous-${index}`} />)}
     </Accordion>
   )

src/app/components/job/JobsCards.tsx

@@ -29,9 +29,11 @@ export default function JobsCards(props: JobListProps) {
     <Container fluid>
       {jobs.current && (
       <Row>
-        <Col>
+        {jobs.current.map((job, index) => (
-          <JobCard heading={config.currentHeading} {...jobs.current} />
+        <Col key={index} xs={12} md={12} lg={6} xl={12}>
+          <JobCard heading={config.currentHeading} {...job} />
         </Col>
+        ))}
       </Row>
       )}
       <Row>

src/app/components/job/JobsHistory.tsx

@@ -13,8 +13,11 @@ export type Props = {
 export default function JobHistory(props: Props) {
   const {SizeWrapper, inRange} = useInWidthRange(600)
  
-  const jobsList = inRange === undefined ? <JobsCardsPlaceholder /> : (
+  const jobsList = inRange === undefined
-    inRange ? <JobsAccordion {...props} /> : <JobsCards {...props} />)
+    ? <JobsCardsPlaceholder />
+    : (inRange
+      ? <JobsAccordion {...props} />
+      : <JobsCards {...props} />)
 
   return (
     <Container fluid>

src/app/globals.css

@@ -82,6 +82,9 @@
 .main-container .job-card .card-subtitle {
     margin-bottom: 0.5rem;
 }
+.main-container .job-card .card-body p:last-child {
+    margin-bottom: 0;
+}
 .main-container .job-tags > span {
     margin: 0.2em;
 }
@@ -159,9 +162,12 @@
     }
     .main-container .job-card {
         margin-top: 0.2em;
+        margin-bottom: 0.2em;
     }
     .main-container .job-card .card-body {
         padding: 0.4rem;
+        padding-bottom: 0.1rem;
+        margin: 0;
     }
     .main-container .cloud-light .tag-badges  {
         filter: opacity(80%);
@@ -169,4 +175,9 @@
     .main-container .tag-badges > span {
         margin: 0.1em;
     }
+
+    /* Fiddle Hacks */
+    .main-container div.skills {
+        margin-top: 2rem;
+    }
 }