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",
|
||||
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',
|
||||
|
@ -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[]
|
||||
|
@ -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
|
||||
}
|
||||
|
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 {
|
||||
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;
|
||||
}
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user