Add skills cloud
This commit is contained in:
parent
f6eadb0df7
commit
2260b08c30
4
.gitignore
vendored
4
.gitignore
vendored
@ -1,4 +1,6 @@
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
node_modules/
|
||||
dist/
|
||||
.next
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
|
16
package-lock.json
generated
16
package-lock.json
generated
@ -13,6 +13,7 @@
|
||||
"@types/react-dom": "18.2.4",
|
||||
"autoprefixer": "10.4.14",
|
||||
"bootstrap": "^5.2.3",
|
||||
"bootstrap-icons": "^1.10.5",
|
||||
"eslint": "8.41.0",
|
||||
"eslint-config-next": "13.4.3",
|
||||
"next": "13.4.3",
|
||||
@ -790,6 +791,21 @@
|
||||
"@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": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/bplist-parser/-/bplist-parser-0.2.0.tgz",
|
||||
|
@ -14,6 +14,7 @@
|
||||
"@types/react-dom": "18.2.4",
|
||||
"autoprefixer": "10.4.14",
|
||||
"bootstrap": "^5.2.3",
|
||||
"bootstrap-icons": "^1.10.5",
|
||||
"eslint": "8.41.0",
|
||||
"eslint-config-next": "13.4.3",
|
||||
"next": "13.4.3",
|
||||
|
@ -1,4 +1,11 @@
|
||||
export const Person = {
|
||||
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() {
|
||||
return (
|
||||
<Container>
|
||||
<h2>Experience</h2>
|
||||
<Row>
|
||||
<Col >
|
||||
<JobCard
|
||||
|
17
src/app/components/Skills.tsx
Normal file
17
src/app/components/Skills.tsx
Normal file
@ -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>
|
||||
)
|
||||
}
|
27
src/app/components/TagCloud.tsx
Normal file
27
src/app/components/TagCloud.tsx
Normal file
@ -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-icons/font/bootstrap-icons.min.css';
|
||||
|
||||
.job-card {
|
||||
margin-top: 1em;
|
||||
@ -8,3 +9,23 @@
|
||||
.job-card .timerange {
|
||||
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 JobsHistory from './components/JobsHistory';
|
||||
import AboutBrief from './components/AboutBrief';
|
||||
import Skills from './components/Skills';
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
|
||||
<Container fluid='xxl'>
|
||||
<AboutBrief></AboutBrief>
|
||||
<JobsHistory></JobsHistory>
|
||||
<AboutBrief />
|
||||
<JobsHistory />
|
||||
<Skills />
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user