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

src/PersonalData.ts

@@ -25,7 +25,7 @@ export const personalData: PersonalData = {
             company: 'Oracle|NetSuite',
             timerange: '2022 - present',
             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.
-            Leader of a UI testing architecture group responsible for advising on a testing strategy across the UI Platform.`,
+            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: [
@@ -80,7 +80,7 @@ export const personalData: PersonalData = {
                 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', 'C/C++', 'Embedded Software', 'OpenSCAD', 'TypeScript', 'Linux', 'Open Source', 'Git', 'Self-hosting']
+                tags: ['Java', 'Python', 'TypeScript', 'Embedded', 'OpenSCAD', 'Linux', 'Open Source', 'Self-hosting']
             },
         ]
     },

src/PersonalDataTypes.ts

@@ -18,8 +18,7 @@ export type Jobs = {
 
 export type Education = Jobs;
 
-export type Project = Job
+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/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;
+    }
 }