Restructure header to make it more responsive
This commit is contained in:
parent
e9a63461fb
commit
59677e3d7f
@ -8,13 +8,8 @@ export default function AboutBrief() {
|
||||
const person = usePersonContext()
|
||||
return (
|
||||
<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>
|
||||
)
|
||||
}
|
||||
|
@ -22,9 +22,8 @@ export function Contact(props: {icon?: string, text: string}) {
|
||||
textElement = <a href={url} className='contact-link' target='_blank'>{props.text}</a>
|
||||
}
|
||||
return (
|
||||
<Col className='contact'>
|
||||
<i className={'bi-' + props.icon}> </i>
|
||||
{textElement}
|
||||
<Col className='contact' xs={'auto'}>
|
||||
<i className={'bi-' + props.icon}></i> {textElement}
|
||||
</Col>
|
||||
)
|
||||
}
|
||||
@ -34,7 +33,9 @@ export function Contacts() {
|
||||
const focus = useAutoFocus<HTMLDivElement>('contacts')
|
||||
return (
|
||||
<Container ref={focus} className='contacts' fluid>
|
||||
<Row>
|
||||
<h2>Contacts</h2>
|
||||
</Row>
|
||||
<Row>
|
||||
{person.contacts.map((contact, index) => (
|
||||
<Contact key={index} {...contact} />
|
||||
|
8
src/app/components/Photo.tsx
Normal file
8
src/app/components/Photo.tsx
Normal 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>
|
||||
)
|
||||
}
|
@ -8,14 +8,20 @@ import WorkExperience from './components/WorkExperience';
|
||||
import Education from './components/Education';
|
||||
import { Col, Row } from 'react-bootstrap';
|
||||
import Footer from './components/Footer';
|
||||
import Photo from './components/Photo';
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
|
||||
<Container className='main-container' fluid='xxl'>
|
||||
<Row>
|
||||
<Col md={12} lg={8}><AboutBrief /></Col>
|
||||
<Col md={12} lg={4}><Contacts /></Col>
|
||||
<Col xs={'auto'} sm={4} lg={2}><Photo /></Col>
|
||||
<Col>
|
||||
<Row>
|
||||
<Col xs={'auto'} lg={6}><AboutBrief /></Col>
|
||||
<Col xs={'auto'} lg={6}><Contacts /></Col>
|
||||
</Row>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row><WorkExperience /></Row>
|
||||
<Row><Education /></Row>
|
||||
|
Loading…
Reference in New Issue
Block a user