Styling and responsive layout
This commit is contained in:
parent
afff716c09
commit
e9a63461fb
@ -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.",
|
||||
|
||||
|
@ -25,6 +25,7 @@ export type Skills = {
|
||||
}
|
||||
|
||||
export type PersonalData = {
|
||||
updatedDate: string,
|
||||
name: string,
|
||||
brief: string,
|
||||
contacts: Contact[],
|
||||
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
@ -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>
|
||||
)
|
||||
}
|
@ -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'
|
||||
/>
|
||||
)
|
||||
) : <></>
|
||||
}
|
||||
|
13
src/app/components/Footer.tsx
Normal file
13
src/app/components/Footer.tsx
Normal 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>
|
||||
)
|
||||
}
|
@ -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;
|
||||
}
|
||||
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user