Add contacts
This commit is contained in:
parent
ecefefb757
commit
d6501936a7
@ -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',
|
||||||
|
@ -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[]
|
||||||
|
@ -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
|
||||||
}
|
}
|
||||||
|
42
src/app/components/Contacts.tsx
Normal file
42
src/app/components/Contacts.tsx
Normal 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>
|
||||||
|
)
|
||||||
|
}
|
@ -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;
|
||||||
}
|
}
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user