@@ -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 { | |||
html { | |||
font-size: small; | |||
} | |||
body { | |||
background-color: white; | |||
font-size: small; | |||
} | |||
.main-container { | |||
padding-top: 0; | |||
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 { | |||
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> | |||