Reflowed for better printing support
This commit is contained in:
parent
d1ec9bf17d
commit
6cb23717e6
@ -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)']
|
||||||
|
@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user