diff --git a/src/PersonalData.ts b/src/PersonalData.ts index cffc1c2..3610517 100644 --- a/src/PersonalData.ts +++ b/src/PersonalData.ts @@ -37,7 +37,11 @@ export const personalData: PersonalData = { position: 'Software Engineer', company: 'Q2 Interactive', timerange: '2009 - 2013', - description: '', + description: `Development and project lead of multiple web applications: + - CRM system (PHP backend with Android frontend), + - Accounting web app, + - e-commerce sites.`, + tags: ['PHP', 'Java', 'Server hosting', 'Linux', 'Android'] } ] }, diff --git a/src/app/components/job/JobCard.tsx b/src/app/components/job/JobCard.tsx index 34d040e..c83d9f1 100644 --- a/src/app/components/job/JobCard.tsx +++ b/src/app/components/job/JobCard.tsx @@ -1,6 +1,7 @@ import React from 'react'; import Card from 'react-bootstrap/Card'; -import { useAutoFocus, useFocusedElement } from '../../hooks/FocusedElement'; +import { useAutoFocus } from '../../hooks/FocusedElement'; +import { Placeholder } from 'react-bootstrap'; export type Props = { heading?: string, @@ -10,6 +11,20 @@ export type Props = { description: string }; +export function JobCardPlaceholder() { + return + + + + + + {' '} + + + + +} + export default function JobCard(props: Props) { const focusRef = useAutoFocus([props.position, props.company, props.timerange].join(' - ')) return ( @@ -22,7 +37,7 @@ export default function JobCard(props: Props) { {props.company}, {props.timerange} - {props.description} + {props.description} ); diff --git a/src/app/components/job/JobsAccordion.tsx b/src/app/components/job/JobsAccordion.tsx index b196cc0..7b8530a 100644 --- a/src/app/components/job/JobsAccordion.tsx +++ b/src/app/components/job/JobsAccordion.tsx @@ -40,7 +40,7 @@ export default function JobsAccordion(props: JobListProps) { {jobs.previous?.map((job, index) => ( - + {job.description} diff --git a/src/app/components/job/JobsCards.tsx b/src/app/components/job/JobsCards.tsx index d4d1a40..addf361 100644 --- a/src/app/components/job/JobsCards.tsx +++ b/src/app/components/job/JobsCards.tsx @@ -3,7 +3,7 @@ import React from 'react'; import Container from 'react-bootstrap/Container'; import Col from 'react-bootstrap/Col'; import Row from 'react-bootstrap/Row'; -import JobCard from './JobCard'; +import JobCard, { JobCardPlaceholder } from './JobCard'; import { partition } from '../../utils'; import { JobListProps } from './types'; @@ -16,6 +16,13 @@ const defaultProps = { currentHeading: 'Currently', } +export function JobsCardsPlaceholder() { + return + + + +} + export default function JobsCards(props: JobListProps) { const {jobs} = props const config = {...defaultProps, ...props} diff --git a/src/app/components/job/JobsHistory.tsx b/src/app/components/job/JobsHistory.tsx index 70bf469..e2878f3 100644 --- a/src/app/components/job/JobsHistory.tsx +++ b/src/app/components/job/JobsHistory.tsx @@ -4,7 +4,7 @@ import Container from 'react-bootstrap/Container'; import useSize from '../../hooks/Size'; import { JobListProps } from './types'; import JobsAccordion from './JobsAccordion'; -import JobsCards from './JobsCards'; +import JobsCards, { JobsCardsPlaceholder } from './JobsCards'; export type Props = { heading: string, @@ -18,7 +18,8 @@ const defaultProps = { export default function JobHistory(props: Props) { const {SizeWrapper, size} = useSize() - const jobsList = size.width < 600 ? : + const jobsList = size.width === 0 ? : ( + size.width < 600 ? : ) return ( diff --git a/src/app/globals.css b/src/app/globals.css index df30714..4b0e015 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -61,3 +61,9 @@ body { .accordion-button.collapsed { background-color: lavender; } +.accordion { + margin: 1rem; +} +.multiline { + white-space: pre-line; +}