Restructure header to make it more responsive

This commit is contained in:
Dejvino 2023-05-26 21:31:38 +02:00
parent e9a63461fb
commit 59677e3d7f
4 changed files with 24 additions and 14 deletions

View File

@ -8,13 +8,8 @@ export default function AboutBrief() {
const person = usePersonContext() const person = usePersonContext()
return ( return (
<Container className='about-brief' fluid> <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> <h1>{person.name}</h1>
<p className='brief'>{person.brief}</p> <p className='brief'>{person.brief}</p>
</Col>
</Row>
</Container> </Container>
) )
} }

View File

@ -22,9 +22,8 @@ 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 (
<Col className='contact'> <Col className='contact' xs={'auto'}>
<i className={'bi-' + props.icon}> </i> <i className={'bi-' + props.icon}></i>&nbsp;{textElement}
{textElement}
</Col> </Col>
) )
} }
@ -34,7 +33,9 @@ export function Contacts() {
const focus = useAutoFocus<HTMLDivElement>('contacts') const focus = useAutoFocus<HTMLDivElement>('contacts')
return ( return (
<Container ref={focus} className='contacts' fluid> <Container ref={focus} className='contacts' fluid>
<Row>
<h2>Contacts</h2> <h2>Contacts</h2>
</Row>
<Row> <Row>
{person.contacts.map((contact, index) => ( {person.contacts.map((contact, index) => (
<Contact key={index} {...contact} /> <Contact key={index} {...contact} />

View File

@ -0,0 +1,8 @@
import React from 'react';
import Image from 'react-bootstrap/Image'
export default function Photo() {
return (
<Image alt='Photograph of the person' rounded fluid src='photo.png'></Image>
)
}

View File

@ -8,14 +8,20 @@ import WorkExperience from './components/WorkExperience';
import Education from './components/Education'; import Education from './components/Education';
import { Col, Row } from 'react-bootstrap'; import { Col, Row } from 'react-bootstrap';
import Footer from './components/Footer'; import Footer from './components/Footer';
import Photo from './components/Photo';
export default function Home() { export default function Home() {
return ( return (
<Container className='main-container' fluid='xxl'> <Container className='main-container' fluid='xxl'>
<Row> <Row>
<Col md={12} lg={8}><AboutBrief /></Col> <Col xs={'auto'} sm={4} lg={2}><Photo /></Col>
<Col md={12} lg={4}><Contacts /></Col> <Col>
<Row>
<Col xs={'auto'} lg={6}><AboutBrief /></Col>
<Col xs={'auto'} lg={6}><Contacts /></Col>
</Row>
</Col>
</Row> </Row>
<Row><WorkExperience /></Row> <Row><WorkExperience /></Row>
<Row><Education /></Row> <Row><Education /></Row>