@@ -1,4 +1,6 @@ | |||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. | |||||
node_modules/ | |||||
dist/ | |||||
.next | |||||
# dependencies | # dependencies | ||||
/node_modules | /node_modules | ||||
@@ -13,6 +13,7 @@ | |||||
"@types/react-dom": "18.2.4", | "@types/react-dom": "18.2.4", | ||||
"autoprefixer": "10.4.14", | "autoprefixer": "10.4.14", | ||||
"bootstrap": "^5.2.3", | "bootstrap": "^5.2.3", | ||||
"bootstrap-icons": "^1.10.5", | |||||
"eslint": "8.41.0", | "eslint": "8.41.0", | ||||
"eslint-config-next": "13.4.3", | "eslint-config-next": "13.4.3", | ||||
"next": "13.4.3", | "next": "13.4.3", | ||||
@@ -790,6 +791,21 @@ | |||||
"@popperjs/core": "^2.11.6" | "@popperjs/core": "^2.11.6" | ||||
} | } | ||||
}, | }, | ||||
"node_modules/bootstrap-icons": { | |||||
"version": "1.10.5", | |||||
"resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.10.5.tgz", | |||||
"integrity": "sha512-oSX26F37V7QV7NCE53PPEL45d7EGXmBgHG3pDpZvcRaKVzWMqIRL9wcqJUyEha1esFtM3NJzvmxFXDxjJYD0jQ==", | |||||
"funding": [ | |||||
{ | |||||
"type": "github", | |||||
"url": "https://github.com/sponsors/twbs" | |||||
}, | |||||
{ | |||||
"type": "opencollective", | |||||
"url": "https://opencollective.com/bootstrap" | |||||
} | |||||
] | |||||
}, | |||||
"node_modules/bplist-parser": { | "node_modules/bplist-parser": { | ||||
"version": "0.2.0", | "version": "0.2.0", | ||||
"resolved": "https://registry.npmjs.org/bplist-parser/-/bplist-parser-0.2.0.tgz", | "resolved": "https://registry.npmjs.org/bplist-parser/-/bplist-parser-0.2.0.tgz", | ||||
@@ -14,6 +14,7 @@ | |||||
"@types/react-dom": "18.2.4", | "@types/react-dom": "18.2.4", | ||||
"autoprefixer": "10.4.14", | "autoprefixer": "10.4.14", | ||||
"bootstrap": "^5.2.3", | "bootstrap": "^5.2.3", | ||||
"bootstrap-icons": "^1.10.5", | |||||
"eslint": "8.41.0", | "eslint": "8.41.0", | ||||
"eslint-config-next": "13.4.3", | "eslint-config-next": "13.4.3", | ||||
"next": "13.4.3", | "next": "13.4.3", | ||||
@@ -1,4 +1,11 @@ | |||||
export const Person = { | export const Person = { | ||||
name: "David Hrdina Němeček", | name: "David Hrdina Němeček", | ||||
brief: "Software developer, people manager." | |||||
brief: "Software developer, people manager.", | |||||
skills: { | |||||
primary: ['Java', 'TypeScript', 'JavaScript'], | |||||
secondary: ['Kotlin', 'Go'], | |||||
others: ['Driver\'s license (B)'] | |||||
}, | |||||
interests: ['Guitars and Heavy Metal', 'Mazda MX-5', 'DIY electronics'], | |||||
}; | }; |
@@ -8,6 +8,7 @@ import JobCard from './JobCard'; | |||||
export default function JobsHistory() { | export default function JobsHistory() { | ||||
return ( | return ( | ||||
<Container> | <Container> | ||||
<h2>Experience</h2> | |||||
<Row> | <Row> | ||||
<Col > | <Col > | ||||
<JobCard | <JobCard | ||||
@@ -0,0 +1,17 @@ | |||||
import React, { useContext } from 'react'; | |||||
import Container from 'react-bootstrap/Container'; | |||||
import { PersonContext } from './PersonContext'; | |||||
import TagCloud from './TagCloud'; | |||||
export default function Skills() { | |||||
const person = useContext(PersonContext) | |||||
return ( | |||||
<Container className='skills'> | |||||
<h2>Skills</h2> | |||||
<TagCloud title='Primary' icon='bookmark-star' style='primary' tags={person.skills.primary} /> | |||||
<TagCloud title='Secondary' icon='bookmark-plus' tags={person.skills.secondary} /> | |||||
<TagCloud title='Others' icon='bookmark' tags={person.skills.others} /> | |||||
<TagCloud title='Interests' icon='bookmark-heart' style='light' tags={person.interests} /> | |||||
</Container> | |||||
) | |||||
} |
@@ -0,0 +1,27 @@ | |||||
import React from 'react'; | |||||
import Container from 'react-bootstrap/Container'; | |||||
export type Props = { | |||||
title: string, | |||||
icon?: string, | |||||
tags: string[], | |||||
style?: 'primary' | 'light' | |||||
} | |||||
function Tag(props: {text: string}) { | |||||
return ( | |||||
<span className='badge text-bg-light'>{props.text}</span> | |||||
) | |||||
} | |||||
export default function TagCloud(props: Props) { | |||||
const containerClasses = ['tag-cloud', 'cloud-' + (props.style || 'standard')] | |||||
return ( | |||||
<Container className={containerClasses.join(' ')}> | |||||
<h4>{props.icon && (<i className={'bi-' + props.icon}> </i>)}{props.title}</h4> | |||||
<Container className='tag-badges'> | |||||
{props.tags.map((tag: string) => (<Tag key={tag} text={tag} />) )} | |||||
</Container> | |||||
</Container> | |||||
) | |||||
} |
@@ -1,5 +1,6 @@ | |||||
@import 'bootstrap/dist/css/bootstrap.min.css'; | @import 'bootstrap/dist/css/bootstrap.min.css'; | ||||
@import 'bootstrap-icons/font/bootstrap-icons.min.css'; | |||||
.job-card { | .job-card { | ||||
margin-top: 1em; | margin-top: 1em; | ||||
@@ -7,4 +8,24 @@ | |||||
.job-card .timerange { | .job-card .timerange { | ||||
font-style: italic; | font-style: italic; | ||||
} | |||||
.cloud-primary .tag-badges { | |||||
font-size: 180%; | |||||
} | |||||
.cloud-standard .tag-badges { | |||||
font-size: 140%; | |||||
} | |||||
.cloud-light .tag-badges { | |||||
font-size: 130%; | |||||
filter: opacity(60%); | |||||
} | |||||
.tag-badges > span { | |||||
margin: 0.4em; | |||||
} | |||||
.tag-badges > span { | |||||
transition: all 0.3s; | |||||
} | |||||
.tag-badges > span:hover { | |||||
filter: brightness(95%); | |||||
} | } |
@@ -3,13 +3,15 @@ import React from 'react'; | |||||
import Container from 'react-bootstrap/Container'; | import Container from 'react-bootstrap/Container'; | ||||
import JobsHistory from './components/JobsHistory'; | import JobsHistory from './components/JobsHistory'; | ||||
import AboutBrief from './components/AboutBrief'; | import AboutBrief from './components/AboutBrief'; | ||||
import Skills from './components/Skills'; | |||||
export default function Home() { | export default function Home() { | ||||
return ( | return ( | ||||
<Container fluid='xxl'> | <Container fluid='xxl'> | ||||
<AboutBrief></AboutBrief> | |||||
<JobsHistory></JobsHistory> | |||||
<AboutBrief /> | |||||
<JobsHistory /> | |||||
<Skills /> | |||||
</Container> | </Container> | ||||
) | ) | ||||
} | } |