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