Reflowed for better printing support

This commit is contained in:
Dejvino 2023-06-03 07:09:55 +02:00
parent d1ec9bf17d
commit 6cb23717e6
4 changed files with 44 additions and 25 deletions

View File

@ -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)']

View File

@ -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>
)
}

View File

@ -93,30 +93,44 @@ body {
}
@media print {
body {
background-color: white;
html {
font-size: small;
}
.main-container {
padding-top: 0;
padding-bottom: 0;
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.2em;
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: 1em;
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%;
}
@ -126,8 +140,11 @@ body {
.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;
}
}

View File

@ -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={9} sm={9} lg={5}><AboutBrief /></Col>
<Col xs={4} sm={3} lg={2} className='d-flex align-items-center'><Photo /></Col>
<Col xs={8} sm={9} lg={5}><AboutBrief /></Col>
<Col xs={12} lg={5}><Contacts /></Col>
</Row>
<Row>
<Col xs={12} xl={7}>
<Row><WorkExperience /></Row>
<Row><Projects /></Row>
<Row><Education /></Row>
</Col>
<Col>
<Skills />
</Col>
<Col xs={12} lg={8}><WorkExperience /></Col>
<Col xs={12} lg={4}><Skills /></Col>
<Col xs={12} lg={6}><Education /></Col>
<Col xs={12} lg={6}><Projects /></Col>
</Row>
<Row><Footer /></Row>
</Container>