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",
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: {
current: {
position: 'Janitor',

View File

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

View File

@ -57,7 +57,7 @@ export function useAutoFocus<ElementType extends HTMLElement>(elementKey: string
focusElement()
}
const classNameBackup = elem.className
elem.className += ' ' + focusedClass
elem.className += ' focusable ' + focusedClass
cleanup = () => {
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 {
margin: 0.4em;
}
.tag-badges > span {
.focusable {
transition: all 0.3s;
}
.tag-badges > span:hover {
filter: brightness(95%);
.focusable:hover {
background-color: rgba(236, 241, 245, 0.3);
filter: brightness(96%);
}
.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 AboutBrief from './components/AboutBrief';
import Skills from './components/Skills';
import { Contacts } from './components/Contacts';
export default function Home() {
return (
<Container fluid='xxl'>
<AboutBrief />
<Contacts />
<JobsHistory />
<Skills />
</Container>