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";
export const personalData: PersonalData = {
updatedDate: '2023-05-26',
name: "David Hrdina Němeček",
brief: "Software developer, people manager.",

View File

@ -25,6 +25,7 @@ export type Skills = {
}
export type PersonalData = {
updatedDate: string,
name: string,
brief: string,
contacts: Contact[],

View File

@ -2,14 +2,19 @@ import React, { useContext } from 'react';
import Container from 'react-bootstrap/Container';
import Image from 'react-bootstrap/Image'
import { usePersonContext } from './PersonContext';
import { Col, Row } from 'react-bootstrap';
export default function AboutBrief() {
const person = usePersonContext()
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>
)
}

View File

@ -2,6 +2,7 @@ import React, { ReactNode } from 'react'
import { usePersonContext } from './PersonContext'
import Container from 'react-bootstrap/esm/Container'
import { useAutoFocus } from '../FocusedElement'
import { Col, Row } from 'react-bootstrap'
export function Contact(props: {icon?: string, text: string}) {
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>
}
return (
<span className='contact'>
<Col className='contact'>
<i className={'bi-' + props.icon}> </i>
{textElement}
</span>
</Col>
)
}
@ -32,11 +33,13 @@ export function Contacts() {
const person = usePersonContext()
const focus = useAutoFocus<HTMLDivElement>('contacts')
return (
<Container ref={focus} className='contacts'>
<Container ref={focus} className='contacts' fluid>
<h2>Contacts</h2>
<Row>
{person.contacts.map((contact, index) => (
<Contact key={index} {...contact} />
))}
</Row>
</Container>
)
}

View File

@ -6,11 +6,11 @@ import JobHistory from './JobHistory';
export default function WorkExperience() {
const person = usePersonContext()
return person.education && (
return person.education ? (
<JobHistory
jobs={person.education}
heading='Education'
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-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 {
margin-top: 1em;
}

View File

@ -1,22 +1,26 @@
'use client'
import React from 'react';
import Container from 'react-bootstrap/Container';
import JobsHistory from './components/WorkExperience';
import AboutBrief from './components/AboutBrief';
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 Footer from './components/Footer';
export default function Home() {
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>
)
}