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: { skills: {
primary: ['Java', 'TypeScript', 'JavaScript', 'Linux', 'Engineering Leadership'], primary: ['Java', 'TypeScript', 'JavaScript', 'Linux', 'Leadership'],
secondary: ['SQL', 'Kotlin', 'C/C++', 'NodeJs', 'Git', 'Preact', 'Embedded Software'], secondary: ['SQL', 'Kotlin', 'C/C++', 'NodeJs', 'Git', 'Preact', 'Embedded Software'],
languages: ['Czech (native)', 'English (proficient)', 'German (elementary)'], languages: ['Czech (native)', 'English (proficient)', 'German (elementary)'],
//others: ['Driver\'s license (B)'] //others: ['Driver\'s license (B)']

View File

@ -2,25 +2,31 @@ import React, { useContext } from 'react';
import Container from 'react-bootstrap/Container'; import Container from 'react-bootstrap/Container';
import { PersonContext } from '../hooks/PersonContext'; import { PersonContext } from '../hooks/PersonContext';
import TagCloud from './TagCloud'; 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() { export default function Skills() {
const person = useContext(PersonContext) const person = useContext(PersonContext)
return ( return (
<Container className='skills' fluid> <Container className='skills' fluid>
<h2>Skills</h2> <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 && ( {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 && ( {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 && ( {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 && ( {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> </Container>
) )
} }

View File

@ -93,30 +93,44 @@ body {
} }
@media print { @media print {
body { html {
background-color: white;
font-size: small; font-size: small;
} }
.main-container { body {
padding-top: 0; background-color: white;
padding-bottom: 0; }
.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 { .main-container .contacts {
margin-top: 0.2rem; margin-top: 0.2rem;
} }
.contacts .contact { .contacts .contact {
margin: 0.2em; margin: 0.3em;
} }
.main-container .footer { .main-container .footer {
margin-top: 0.5rem; margin-top: 0.5rem;
} }
.main-container .footer .tiny {
display: none;
}
.main-container .container > h2, .main-container .container > h2,
.main-container .container-fluid > h2 { .main-container .container-fluid > h2 {
margin-top: 1em; margin-top: 0.3em;
margin-bottom: 0;
} }
.main-container h3, .main-container h4 { .main-container h3, .main-container h4 {
margin-top: 0.2em; 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 { .main-container .cloud-primary .tag-badges {
font-size: 120%; font-size: 120%;
} }
@ -126,8 +140,11 @@ body {
.main-container .cloud-light .tag-badges { .main-container .cloud-light .tag-badges {
font-size: 110%; font-size: 110%;
} }
.main-container .cloud-light .tag-badges {
font-size: 130%;
filter: opacity(80%);
}
.main-container .tag-badges > span { .main-container .tag-badges > span {
margin: 0.1em; margin: 0.1em;
} }
} }

View File

@ -6,7 +6,7 @@ import Skills from './components/Skills';
import { Contacts } from './components/Contacts'; import { Contacts } from './components/Contacts';
import WorkExperience from './components/WorkExperience'; import WorkExperience from './components/WorkExperience';
import Education from './components/Education'; import Education from './components/Education';
import { Col, Row } from 'react-bootstrap'; import { Col, Row, Stack } from 'react-bootstrap';
import Footer from './components/Footer'; import Footer from './components/Footer';
import Photo from './components/Photo'; import Photo from './components/Photo';
import Projects from './components/Projects'; import Projects from './components/Projects';
@ -16,19 +16,15 @@ export default function Home() {
<Container className='main-container' fluid='xxl'> <Container className='main-container' fluid='xxl'>
<Row> <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> <Col xs={12} lg={5}><Contacts /></Col>
</Row> </Row>
<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>
<Row><Footer /></Row> <Row><Footer /></Row>
</Container> </Container>