src/PersonalData.ts

@@ -94,7 +94,7 @@ export const personalData: PersonalData = {
     },
 
     skills: {
-        primary: ['Java', 'TypeScript', 'JavaScript', 'Linux', 'Leadership'],
+        primary: ['Java', 'TypeScript', 'JavaScript', 'Linux', 'Engineering 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,31 +2,25 @@ 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>
-        <Row>
+        <TagCloud title='Primary' icon='bookmark-star' style='primary' tags={person.skills.primary} />
-        <SkillsCol><TagCloud title='Primary' 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>
+          <TagCloud title='Secondary' icon='bookmark-plus' tags={person.skills.secondary} />
           )}
         {person.skills.languages && (
-          <SkillsCol><TagCloud title='Languages' icon='bookmarks' tags={person.skills.languages} /></SkillsCol>
+          <TagCloud title='Languages' icon='bookmarks' tags={person.skills.languages} />
           )}
         {person.skills.others && (
-          <SkillsCol><TagCloud title='Others' icon='bookmark' tags={person.skills.others} /></SkillsCol>
+          <TagCloud title='Others' icon='bookmark' tags={person.skills.others} />
           )}
         {person.interests && (
-          <SkillsCol><TagCloud title='Interests' icon='bookmark-heart' style='light' tags={person.interests} /></SkillsCol>
+          <TagCloud title='Interests' icon='bookmark-heart' style='light' tags={person.interests} />
           )}
-        </Row>
       </Container>
     )
 }

src/app/globals.css

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