Styling and responsive layout

This commit is contained in:
Dejvino 2023-05-26 20:44:44 +02:00
parent afff716c09
commit e9a63461fb
8 changed files with 62 additions and 16 deletions

View File

@ -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.",

View File

@ -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[],

View File

@ -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'> <Container className='about-brief' fluid>
<Image alt='Photograph of the person' rounded={true} src='photo.png'></Image> <Row>
<h1>{person.name}</h1> <Col><Image alt='Photograph of the person' rounded fluid src='photo.png'></Image></Col>
<p className='brief'>{person.brief}</p> <Col xs={7} sm={'auto'} lg={8}>
<h1>{person.name}</h1>
<p className='brief'>{person.brief}</p>
</Col>
</Row>
</Container> </Container>
) )
} }

View File

@ -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>
) )
} }

View File

@ -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'
/> />
) ) : <></>
} }

View File

@ -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>
)
}

View File

@ -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;
} }

View File

@ -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'> <Container className='main-container' fluid='xxl'>
<AboutBrief /> <Row>
<Contacts /> <Col md={12} lg={8}><AboutBrief /></Col>
<WorkExperience /> <Col md={12} lg={4}><Contacts /></Col>
<Education /> </Row>
<Skills /> <Row><WorkExperience /></Row>
<Row><Education /></Row>
<Row><Skills /></Row>
<Row><Footer /></Row>
</Container> </Container>
) )
} }