@@ -1,6 +1,7 @@ | |||||
import { PersonalData } from "./PersonalDataTypes"; | import { PersonalData } from "./PersonalDataTypes"; | ||||
export const personalData: PersonalData = { | export const personalData: PersonalData = { | ||||
updatedDate: '2023-05-26', | |||||
name: "David Hrdina Němeček", | name: "David Hrdina Němeček", | ||||
brief: "Software developer, people manager.", | brief: "Software developer, people manager.", | ||||
@@ -25,6 +25,7 @@ export type Skills = { | |||||
} | } | ||||
export type PersonalData = { | export type PersonalData = { | ||||
updatedDate: string, | |||||
name: string, | name: string, | ||||
brief: string, | brief: string, | ||||
contacts: Contact[], | contacts: Contact[], | ||||
@@ -2,14 +2,19 @@ import React, { useContext } from 'react'; | |||||
import Container from 'react-bootstrap/Container'; | import Container from 'react-bootstrap/Container'; | ||||
import Image from 'react-bootstrap/Image' | import Image from 'react-bootstrap/Image' | ||||
import { usePersonContext } from './PersonContext'; | import { usePersonContext } from './PersonContext'; | ||||
import { Col, Row } from 'react-bootstrap'; | |||||
export default function AboutBrief() { | export default function AboutBrief() { | ||||
const person = usePersonContext() | const person = usePersonContext() | ||||
return ( | return ( | ||||
<Container className='about-brief'> | |||||
<Image alt='Photograph of the person' rounded={true} src='photo.png'></Image> | |||||
<h1>{person.name}</h1> | |||||
<p className='brief'>{person.brief}</p> | |||||
<Container className='about-brief' fluid> | |||||
<Row> | |||||
<Col><Image alt='Photograph of the person' rounded fluid src='photo.png'></Image></Col> | |||||
<Col xs={7} sm={'auto'} lg={8}> | |||||
<h1>{person.name}</h1> | |||||
<p className='brief'>{person.brief}</p> | |||||
</Col> | |||||
</Row> | |||||
</Container> | </Container> | ||||
) | ) | ||||
} | } |
@@ -2,6 +2,7 @@ import React, { ReactNode } from 'react' | |||||
import { usePersonContext } from './PersonContext' | import { usePersonContext } from './PersonContext' | ||||
import Container from 'react-bootstrap/esm/Container' | import Container from 'react-bootstrap/esm/Container' | ||||
import { useAutoFocus } from '../FocusedElement' | import { useAutoFocus } from '../FocusedElement' | ||||
import { Col, Row } from 'react-bootstrap' | |||||
export function Contact(props: {icon?: string, text: string}) { | export function Contact(props: {icon?: string, text: string}) { | ||||
let textElement: ReactNode = <span className='contact-text'>{props.text}</span> | let textElement: ReactNode = <span className='contact-text'>{props.text}</span> | ||||
@@ -21,10 +22,10 @@ export function Contact(props: {icon?: string, text: string}) { | |||||
textElement = <a href={url} className='contact-link' target='_blank'>{props.text}</a> | textElement = <a href={url} className='contact-link' target='_blank'>{props.text}</a> | ||||
} | } | ||||
return ( | return ( | ||||
<span className='contact'> | |||||
<Col className='contact'> | |||||
<i className={'bi-' + props.icon}> </i> | <i className={'bi-' + props.icon}> </i> | ||||
{textElement} | {textElement} | ||||
</span> | |||||
</Col> | |||||
) | ) | ||||
} | } | ||||
@@ -32,11 +33,13 @@ export function Contacts() { | |||||
const person = usePersonContext() | const person = usePersonContext() | ||||
const focus = useAutoFocus<HTMLDivElement>('contacts') | const focus = useAutoFocus<HTMLDivElement>('contacts') | ||||
return ( | return ( | ||||
<Container ref={focus} className='contacts'> | |||||
<Container ref={focus} className='contacts' fluid> | |||||
<h2>Contacts</h2> | <h2>Contacts</h2> | ||||
<Row> | |||||
{person.contacts.map((contact, index) => ( | {person.contacts.map((contact, index) => ( | ||||
<Contact key={index} {...contact} /> | <Contact key={index} {...contact} /> | ||||
))} | ))} | ||||
</Row> | |||||
</Container> | </Container> | ||||
) | ) | ||||
} | } |
@@ -6,11 +6,11 @@ import JobHistory from './JobHistory'; | |||||
export default function WorkExperience() { | export default function WorkExperience() { | ||||
const person = usePersonContext() | const person = usePersonContext() | ||||
return person.education && ( | |||||
return person.education ? ( | |||||
<JobHistory | <JobHistory | ||||
jobs={person.education} | jobs={person.education} | ||||
heading='Education' | heading='Education' | ||||
currentHeading='Currently studying' | currentHeading='Currently studying' | ||||
/> | /> | ||||
) | |||||
) : <></> | |||||
} | } |
@@ -0,0 +1,13 @@ | |||||
import React from 'react'; | |||||
import { Container } from 'react-bootstrap'; | |||||
import { usePersonContext } from './PersonContext'; | |||||
export default function Footer() { | |||||
const personalData = usePersonContext() | |||||
return ( | |||||
<Container fluid className="footer text-center"> | |||||
<p><small>Created by {personalData.name}, last updated on {personalData.updatedDate}</small></p> | |||||
<p><small className='tiny'>CV engineered by <a href={'https://www.dejvino.cz/'} target={'_blank'}>Dejvino</a></small></p> | |||||
</Container> | |||||
) | |||||
} |
@@ -2,6 +2,25 @@ | |||||
@import 'bootstrap/dist/css/bootstrap.min.css'; | @import 'bootstrap/dist/css/bootstrap.min.css'; | ||||
@import 'bootstrap-icons/font/bootstrap-icons.min.css'; | @import 'bootstrap-icons/font/bootstrap-icons.min.css'; | ||||
body { | |||||
background-color: lightgrey; | |||||
} | |||||
.main-container { | |||||
background-color: white; | |||||
padding-top: 1rem; | |||||
padding-bottom: 0.2rem; | |||||
} | |||||
.footer { | |||||
margin-top: 2rem; | |||||
} | |||||
.tiny { | |||||
font-size: 75%; | |||||
} | |||||
h2, h3, h4 { | |||||
margin-top: 1em; | |||||
} | |||||
.job-card { | .job-card { | ||||
margin-top: 1em; | margin-top: 1em; | ||||
} | } | ||||
@@ -1,22 +1,26 @@ | |||||
'use client' | 'use client' | ||||
import React from 'react'; | import React from 'react'; | ||||
import Container from 'react-bootstrap/Container'; | import Container from 'react-bootstrap/Container'; | ||||
import JobsHistory from './components/WorkExperience'; | |||||
import AboutBrief from './components/AboutBrief'; | import AboutBrief from './components/AboutBrief'; | ||||
import Skills from './components/Skills'; | 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 Footer from './components/Footer'; | |||||
export default function Home() { | export default function Home() { | ||||
return ( | return ( | ||||
<Container fluid='xxl'> | |||||
<AboutBrief /> | |||||
<Contacts /> | |||||
<WorkExperience /> | |||||
<Education /> | |||||
<Skills /> | |||||
<Container className='main-container' fluid='xxl'> | |||||
<Row> | |||||
<Col md={12} lg={8}><AboutBrief /></Col> | |||||
<Col md={12} lg={4}><Contacts /></Col> | |||||
</Row> | |||||
<Row><WorkExperience /></Row> | |||||
<Row><Education /></Row> | |||||
<Row><Skills /></Row> | |||||
<Row><Footer /></Row> | |||||
</Container> | </Container> | ||||
) | ) | ||||
} | } |