Add markdown support into descriptions for adding links
This commit is contained in:
parent
0d1e962999
commit
be6d74d24a
894
package-lock.json
generated
894
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -22,6 +22,7 @@
|
||||
"react": "18.2.0",
|
||||
"react-bootstrap": "^2.7.4",
|
||||
"react-dom": "18.2.0",
|
||||
"react-markdown": "^8.0.7",
|
||||
"typescript": "5.0.4"
|
||||
}
|
||||
}
|
||||
|
@ -12,6 +12,7 @@ export const personalData: PersonalData = {
|
||||
{icon: 'telephone', text: '+420 111 222 333'},
|
||||
{icon: 'geo-alt', text: 'Brno, Czechia'}
|
||||
],
|
||||
|
||||
jobs: {
|
||||
current: {
|
||||
position: 'Senior Software Development Manager (UI Platform)',
|
||||
@ -57,6 +58,16 @@ export const personalData: PersonalData = {
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
projects: {
|
||||
current: {
|
||||
position: `Personal projects`,
|
||||
description: `Various hardware and software projects. Usually open sourced and published on [projects.dejvino.com](https://projects.dejvino.com) .
|
||||
These include video games, utilities, 3D models, devices with embedded microcontrollers etc.`,
|
||||
tags: ['Java', 'Python', 'C/C++', 'Embedded devices', 'OpenSCAD', 'TypeScript', 'Linux', 'Git', 'Self-hosting']
|
||||
}
|
||||
},
|
||||
|
||||
education: {
|
||||
previous: [
|
||||
{
|
||||
@ -73,11 +84,12 @@ export const personalData: PersonalData = {
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
skills: {
|
||||
primary: ['Java', 'TypeScript', 'JavaScript'],
|
||||
secondary: ['Kotlin', 'Go'],
|
||||
primary: ['Java', 'TypeScript', 'JavaScript', 'Engineering leadership', 'Linux'],
|
||||
secondary: ['SQL', 'Kotlin', 'Go', 'C/C++', 'NodeJs', 'Git', 'Preact', 'Embedded devices'],
|
||||
languages: ['Czech (native)', 'English (proficient)', 'German (elementary)'],
|
||||
others: ['Driver\'s license (B)']
|
||||
},
|
||||
interests: ['Guitars and Heavy Metal', 'Mazda MX-5', 'DIY electronics'],
|
||||
interests: ['Guitars', 'Heavy Metal', 'Mazda MX-5', 'DIY electronics', 'Linux', 'Open source'],
|
||||
};
|
||||
|
@ -5,8 +5,8 @@ export type Contact = {
|
||||
|
||||
export type Job = {
|
||||
position: string,
|
||||
company: string,
|
||||
timerange: string,
|
||||
company?: string,
|
||||
timerange?: string,
|
||||
description: string,
|
||||
tags?: string[],
|
||||
}
|
||||
@ -18,6 +18,8 @@ export type Jobs = {
|
||||
|
||||
export type Education = Jobs;
|
||||
|
||||
export type Projects = Jobs;
|
||||
|
||||
export type Skills = {
|
||||
primary: string[],
|
||||
secondary?: string[],
|
||||
@ -31,6 +33,7 @@ export type PersonalData = {
|
||||
brief: string,
|
||||
contacts: Contact[],
|
||||
jobs: Jobs,
|
||||
projects?: Projects,
|
||||
education?: Education,
|
||||
skills: Skills,
|
||||
interests: string[]
|
||||
|
@ -1,15 +1,14 @@
|
||||
import React, { useContext } from 'react';
|
||||
import Container from 'react-bootstrap/Container';
|
||||
import Image from 'react-bootstrap/Image'
|
||||
import { usePersonContext } from '../hooks/PersonContext';
|
||||
import { Col, Row } from 'react-bootstrap';
|
||||
import md from './Markdown';
|
||||
|
||||
export default function AboutBrief() {
|
||||
const person = usePersonContext()
|
||||
return (
|
||||
<Container className='about-brief' fluid>
|
||||
<h1>{person.name}</h1>
|
||||
<p className='brief'>{person.brief}</p>
|
||||
<p className='brief'>{md(person.brief)}</p>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
@ -3,7 +3,7 @@ import React from 'react';
|
||||
import { usePersonContext } from '../hooks/PersonContext';
|
||||
import JobHistory from './job/JobsHistory';
|
||||
|
||||
export default function WorkExperience() {
|
||||
export default function Education() {
|
||||
const person = usePersonContext()
|
||||
|
||||
return person.education ? (
|
||||
|
5
src/app/components/Markdown.tsx
Normal file
5
src/app/components/Markdown.tsx
Normal file
@ -0,0 +1,5 @@
|
||||
import ReactMarkdown from "react-markdown";
|
||||
|
||||
export default function md(text: string) {
|
||||
return <ReactMarkdown>{text}</ReactMarkdown>
|
||||
}
|
16
src/app/components/Projects.tsx
Normal file
16
src/app/components/Projects.tsx
Normal file
@ -0,0 +1,16 @@
|
||||
|
||||
import React from 'react';
|
||||
import { usePersonContext } from '../hooks/PersonContext';
|
||||
import JobHistory from './job/JobsHistory';
|
||||
|
||||
export default function Projects() {
|
||||
const person = usePersonContext()
|
||||
|
||||
return person.projects ? (
|
||||
<JobHistory
|
||||
jobs={person.projects}
|
||||
heading='Projects'
|
||||
currentHeading='Currently active'
|
||||
/>
|
||||
) : <></>
|
||||
}
|
@ -3,14 +3,11 @@ import Card from 'react-bootstrap/Card';
|
||||
import { useAutoFocus } from '../../hooks/FocusedElement';
|
||||
import { Placeholder } from 'react-bootstrap';
|
||||
import JobTags from './JobTags';
|
||||
import { Job } from '@/PersonalDataTypes';
|
||||
import md from '../Markdown';
|
||||
|
||||
export type Props = {
|
||||
heading?: string,
|
||||
position: string,
|
||||
timerange: string,
|
||||
company: string,
|
||||
description: string,
|
||||
tags?: string[]
|
||||
export type Props = Job & {
|
||||
heading?: string
|
||||
};
|
||||
|
||||
export function JobCardPlaceholder() {
|
||||
@ -37,9 +34,11 @@ export default function JobCard(props: Props) {
|
||||
<Card.Body>
|
||||
<Card.Title>{props.position}</Card.Title>
|
||||
<Card.Subtitle>
|
||||
<span className='company-name'>{props.company}</span>, <span className='timerange'>{props.timerange}</span>
|
||||
{props.company && <span className='company-name'>{props.company}</span>}
|
||||
{props.company && props.timerange && <span>, </span>}
|
||||
{props.timerange && <span className='timerange'>{props.timerange}</span>}
|
||||
</Card.Subtitle>
|
||||
<Card.Text className='multiline'>{props.description}</Card.Text>
|
||||
<Card.Text className='multiline'>{md(props.description)}</Card.Text>
|
||||
{props.tags && <JobTags tags={props.tags} />}
|
||||
</Card.Body>
|
||||
</Card>
|
||||
|
@ -4,6 +4,7 @@ import { Job } from '@/PersonalDataTypes';
|
||||
import { Accordion, Row } from 'react-bootstrap';
|
||||
import { JobListProps } from './types';
|
||||
import JobTags from './JobTags';
|
||||
import md from '../Markdown';
|
||||
|
||||
|
||||
export type Props = {
|
||||
@ -23,7 +24,7 @@ export default function JobsAccordion(props: JobListProps) {
|
||||
return (
|
||||
<div>
|
||||
<div><strong>{job.position}</strong></div>
|
||||
<div>{job.company}, {job.timerange}</div>
|
||||
<div>{[job.company, job.timerange].filter(x => x).join(', ')}</div>
|
||||
{heading && (<div>({heading})</div>)}
|
||||
</div>
|
||||
)
|
||||
@ -34,7 +35,7 @@ export default function JobsAccordion(props: JobListProps) {
|
||||
<Accordion.Item eventKey="current">
|
||||
<Accordion.Header><JobTitle heading={config.currentHeading} job={jobs.current} /> </Accordion.Header>
|
||||
<Accordion.Body>
|
||||
{jobs.current.description}
|
||||
{md(jobs.current.description)}
|
||||
{jobs.current.tags && <JobTags tags={jobs.current.tags} />}
|
||||
</Accordion.Body>
|
||||
</Accordion.Item>
|
||||
@ -43,7 +44,7 @@ export default function JobsAccordion(props: JobListProps) {
|
||||
<Accordion.Item eventKey={`previous-${index}`} key={index}>
|
||||
<Accordion.Header><JobTitle job={job} /></Accordion.Header>
|
||||
<Accordion.Body className='multiline'>
|
||||
{job.description}
|
||||
{md(job.description)}
|
||||
{job.tags && <JobTags tags={job.tags} />}
|
||||
</Accordion.Body>
|
||||
</Accordion.Item>
|
||||
|
@ -65,7 +65,7 @@ body {
|
||||
margin: 0.75em;
|
||||
}
|
||||
.accordion-button.collapsed {
|
||||
background-color: lavender;
|
||||
background-color: #eff2ff;
|
||||
}
|
||||
.accordion {
|
||||
margin: 1rem;
|
||||
|
@ -9,7 +9,7 @@ import Education from './components/Education';
|
||||
import { Col, Row } from 'react-bootstrap';
|
||||
import Footer from './components/Footer';
|
||||
import Photo from './components/Photo';
|
||||
import useSize from './hooks/Size';
|
||||
import Projects from './components/Projects';
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
@ -27,6 +27,7 @@ export default function Home() {
|
||||
<Row>
|
||||
<Col xs={12} xl={7}>
|
||||
<Row><WorkExperience /></Row>
|
||||
<Row><Projects /></Row>
|
||||
<Row><Education /></Row>
|
||||
</Col>
|
||||
<Col>
|
||||
|
Loading…
Reference in New Issue
Block a user