Reflowed for better printing support

src/PersonalData.ts

@@ -94,7 +94,7 @@ export const personalData: PersonalData = {
     },
 
     skills: {
-        primary: ['Java', 'TypeScript', 'JavaScript', 'Linux', 'Engineering Leadership'],
+        primary: ['Java', 'TypeScript', 'JavaScript', 'Linux', 'Leadership'],
         secondary: ['SQL', 'Kotlin', 'C/C++', 'NodeJs', 'Git', 'Preact', 'Embedded Software'],
         languages: ['Czech (native)', 'English (proficient)', 'German (elementary)'],
         //others: ['Driver\'s license (B)']

src/app/components/Skills.tsx

@@ -2,25 +2,31 @@ import React, { useContext } from 'react';
 import Container from 'react-bootstrap/Container';
 import { PersonContext } from '../hooks/PersonContext';
 import TagCloud from './TagCloud';
+import { Col, Row } from 'react-bootstrap';
 
+function SkillsCol(props: { children: ReactNode }) {
+  return <Col xs={12} sm={6} lg={12}>{props.children}</Col>
+}
 export default function Skills() {
     const person = useContext(PersonContext)
     return (
     <Container className='skills' fluid>
         <h2>Skills</h2>
-        <TagCloud title='Primary' icon='bookmark-star' style='primary' tags={person.skills.primary} />
+        <Row>
+        <SkillsCol><TagCloud title='Primary' icon='bookmark-star' style='primary' tags={person.skills.primary} /></SkillsCol>
         {person.skills.secondary && (
-          <TagCloud title='Secondary' icon='bookmark-plus' tags={person.skills.secondary} />
+          <SkillsCol><TagCloud title='Secondary' icon='bookmark-plus' tags={person.skills.secondary} /></SkillsCol>
           )}
         {person.skills.languages && (
-          <TagCloud title='Languages' icon='bookmarks' tags={person.skills.languages} />
+          <SkillsCol><TagCloud title='Languages' icon='bookmarks' tags={person.skills.languages} /></SkillsCol>
           )}
         {person.skills.others && (
-          <TagCloud title='Others' icon='bookmark' tags={person.skills.others} />
+          <SkillsCol><TagCloud title='Others' icon='bookmark' tags={person.skills.others} /></SkillsCol>
           )}
         {person.interests && (
-          <TagCloud title='Interests' icon='bookmark-heart' style='light' tags={person.interests} />
+          <SkillsCol><TagCloud title='Interests' icon='bookmark-heart' style='light' tags={person.interests} /></SkillsCol>
           )}
+        </Row>
       </Container>
     )
 }

src/app/globals.css

@@ -91,3 +91,60 @@ body {
 .main-container .multiline {
     white-space: pre-line;
 }
+
+@media print {
+    html {
+        font-size: small;
+    }
+    body {
+        background-color: white;
+    }
+    .main-container, .main-container .container-fluid {
+        padding-top: 0.1rem;
+        padding-bottom: 0.1rem;
+        padding-left: 0.1rem;
+        padding-right: 0.1rem;
+    }
+    .main-container .contacts {
+        margin-top: 0.2rem;
+    }
+    .contacts .contact {
+        margin: 0.3em;
+    }
+    .main-container .footer {
+        margin-top: 0.5rem;
+    }
+    .main-container .footer .tiny {
+        display: none;
+    }
+    .main-container .container > h2,
+    .main-container .container-fluid > h2 {
+        margin-top: 0.3em;
+        margin-bottom: 0;
+    }
+    .main-container h3, .main-container  h4 {
+        margin-top: 0.2em;
+    }
+    .main-container .job-card {
+        margin-top: 0.2em;
+    }
+    .main-container .job-card .card-body {
+        padding: 0.4rem;
+    }
+    .main-container .cloud-primary .tag-badges  {
+        font-size: 120%;
+    }
+    .main-container .cloud-standard .tag-badges {
+        font-size: 100%;
+    }
+    .main-container .cloud-light .tag-badges  {
+        font-size: 110%;
+    }
+    .main-container .cloud-light .tag-badges  {
+        font-size: 130%;
+        filter: opacity(80%);
+    }
+    .main-container .tag-badges > span {
+        margin: 0.1em;
+    }
+}

src/app/page.tsx

@@ -6,7 +6,7 @@ import Skills from './components/Skills';
 import { Contacts } from './components/Contacts';
 import WorkExperience from './components/WorkExperience';
 import Education from './components/Education';
-import { Col, Row } from 'react-bootstrap';
+import { Col, Row, Stack } from 'react-bootstrap';
 import Footer from './components/Footer';
 import Photo from './components/Photo';
 import Projects from './components/Projects';
@@ -16,19 +16,15 @@ export default function Home() {
 
     <Container className='main-container' fluid='xxl'>
       <Row>
-        <Col xs={3} sm={3} lg={2}><Photo /></Col>
+        <Col xs={4} sm={3} lg={2} className='d-flex align-items-center'><Photo /></Col>
-        <Col xs={9} sm={9} lg={5}><AboutBrief /></Col>
+        <Col xs={8} sm={9} lg={5}><AboutBrief /></Col>
         <Col xs={12} lg={5}><Contacts /></Col>
       </Row>
       <Row>
-        <Col xs={12} xl={7}>
+        <Col xs={12} lg={8}><WorkExperience /></Col>
-          <Row><WorkExperience /></Row>
+        <Col xs={12} lg={4}><Skills /></Col>
-          <Row><Projects /></Row>
+        <Col xs={12} lg={6}><Education /></Col>
-          <Row><Education /></Row>
+        <Col xs={12} lg={6}><Projects /></Col>
-        </Col>
-        <Col>
-          <Skills />
-        </Col>
       </Row>
       <Row><Footer /></Row>
     </Container>