Add contacts

This commit is contained in:
Dejvino 2023-05-25 21:01:22 +02:00
parent ecefefb757
commit d6501936a7
6 changed files with 64 additions and 5 deletions

View File

@ -4,6 +4,11 @@ export const personalData: PersonalData = {
name: "David Hrdina Němeček", name: "David Hrdina Němeček",
brief: "Software developer, people manager.", brief: "Software developer, people manager.",
contacts: [
{icon: 'browser-firefox', text: 'www.dejvino.cz'},
{icon: 'envelope-at', text: 'explosive@dejvino.cz'},
{icon: 'git', text: 'https://git.dejvino.cz'}
],
jobs: { jobs: {
current: { current: {
position: 'Janitor', position: 'Janitor',

View File

@ -1,3 +1,8 @@
export type Contact = {
icon?: string,
text: string
}
export type Job = { export type Job = {
position: string, position: string,
company: string, company: string,
@ -19,6 +24,7 @@ export type Skills = {
export type PersonalData = { export type PersonalData = {
name: string, name: string,
brief: string, brief: string,
contacts: Contact[],
jobs: Jobs, jobs: Jobs,
skills: Skills, skills: Skills,
interests: string[] interests: string[]

View File

@ -57,7 +57,7 @@ export function useAutoFocus<ElementType extends HTMLElement>(elementKey: string
focusElement() focusElement()
} }
const classNameBackup = elem.className const classNameBackup = elem.className
elem.className += ' ' + focusedClass elem.className += ' focusable ' + focusedClass
cleanup = () => { cleanup = () => {
elem.className = classNameBackup elem.className = classNameBackup
} }

View File

@ -0,0 +1,42 @@
import React, { ReactNode } from 'react'
import { usePersonContext } from './PersonContext'
import Container from 'react-bootstrap/esm/Container'
import { useAutoFocus } from '../FocusedElement'
export function Contact(props: {icon?: string, text: string}) {
let textElement: ReactNode = <span className='contact-text'>{props.text}</span>
if (props.text.match(/^(www|http)/)) {
let text = props.text
let url = text
const urlMatch = text.match(/^https?:\/\/(.+)\/?$/)
if (urlMatch) {
text = urlMatch[1]
} else {
url = `https://${props.text}`
}
textElement = <a href={url} className='contact-link' target='_blank'>{text}</a>
}
if (props.text.match(/.+@.+\..+/)) {
const url = `mailto:${props.text}`
textElement = <a href={url} className='contact-link' target='_blank'>{props.text}</a>
}
return (
<span className='contact'>
<i className={'bi-' + props.icon}> </i>
{textElement}
</span>
)
}
export function Contacts() {
const person = usePersonContext()
const focus = useAutoFocus<HTMLDivElement>('contacts')
return (
<Container ref={focus} className='contacts'>
<h2>Contacts</h2>
{person.contacts.map((contact, index) => (
<Contact key={index} {...contact} />
))}
</Container>
)
}

View File

@ -23,12 +23,16 @@
.tag-badges > span { .tag-badges > span {
margin: 0.4em; margin: 0.4em;
} }
.tag-badges > span { .focusable {
transition: all 0.3s; transition: all 0.3s;
} }
.tag-badges > span:hover { .focusable:hover {
filter: brightness(95%); background-color: rgba(236, 241, 245, 0.3);
filter: brightness(96%);
} }
.focused-element { .focused-element {
border: 2px solid red; border: 2px dashed red;
}
.contacts .contact {
margin: 0.75em;
} }

View File

@ -4,12 +4,14 @@ import Container from 'react-bootstrap/Container';
import JobsHistory from './components/JobsHistory'; import JobsHistory from './components/JobsHistory';
import AboutBrief from './components/AboutBrief'; import AboutBrief from './components/AboutBrief';
import Skills from './components/Skills'; import Skills from './components/Skills';
import { Contacts } from './components/Contacts';
export default function Home() { export default function Home() {
return ( return (
<Container fluid='xxl'> <Container fluid='xxl'>
<AboutBrief /> <AboutBrief />
<Contacts />
<JobsHistory /> <JobsHistory />
<Skills /> <Skills />
</Container> </Container>