aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/Branding/Branding.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/Branding/Branding.tsx')
-rw-r--r--src/components/Branding/Branding.tsx107
1 files changed, 0 insertions, 107 deletions
diff --git a/src/components/Branding/Branding.tsx b/src/components/Branding/Branding.tsx
deleted file mode 100644
index b19116d..0000000
--- a/src/components/Branding/Branding.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import photo from '@assets/images/armand-philippot.jpg';
-import { settings } from '@utils/config';
-import Image from 'next/image';
-import Link from 'next/link';
-import { useRouter } from 'next/router';
-import Script from 'next/script';
-import { ReactElement, useEffect, useRef } from 'react';
-import { useIntl } from 'react-intl';
-import { Person, WithContext } from 'schema-dts';
-import styles from './Branding.module.scss';
-import Logo from './Logo/Logo';
-
-type BrandingReturn = ({ isHome }: { isHome: boolean }) => ReactElement;
-
-const Branding: BrandingReturn = ({ isHome = false }) => {
- const intl = useIntl();
- const { locale } = useRouter();
- const TitleTag = isHome ? 'h1' : 'p';
- const logoRef = useRef<HTMLDivElement>(null);
- const titleRef = useRef<HTMLHeadingElement | HTMLParagraphElement>(null);
- const jobRef = useRef<HTMLParagraphElement>(null);
-
- useEffect(() => {
- if (logoRef.current) {
- logoRef.current.style.setProperty(
- '--branding-logo-animation',
- 'flip-logo 9s ease-in 0s 1'
- );
- }
- }, []);
-
- useEffect(() => {
- if (titleRef.current) {
- titleRef.current.style.setProperty(
- '--branding-name-animation',
- 'blink 0.8s ease-in-out 0s 2, typing 4.3s linear 0s 1'
- );
- }
- }, []);
-
- useEffect(() => {
- if (jobRef.current) {
- jobRef.current.style.setProperty(
- '--branding-job-animation',
- 'hide-text 4.25s linear 0s 1, blink 0.8s ease-in-out 4.25s 2, typing 3.8s linear 4.25s 1'
- );
- }
- }, []);
-
- const schemaJsonLd: WithContext<Person> = {
- '@context': 'https://schema.org',
- '@type': 'Person',
- '@id': `${settings.url}/#branding`,
- name: settings.name,
- url: settings.url,
- jobTitle: locale?.startsWith('en')
- ? settings.baseline.en
- : settings.baseline.fr,
- image: photo.src,
- subjectOf: { '@id': `${settings.url}` },
- };
-
- return (
- <>
- <Script
- id="schema-branding"
- type="application/ld+json"
- dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
- />
- <div id="branding" className={styles.wrapper}>
- <div className={styles.logo} ref={logoRef}>
- <div className={styles.logo__front}>
- <Image
- src={photo}
- alt={intl.formatMessage(
- {
- defaultMessage: '{brandingName} picture',
- description: 'Branding: branding name picture.',
- id: 'ILRLTq',
- },
- {
- brandingName: settings.name,
- }
- )}
- layout="responsive"
- />
- </div>
- <div className={styles.logo__back}>
- <Logo />
- </div>
- </div>
- <TitleTag ref={titleRef} className={styles.name}>
- <Link href="/">
- <a className={styles.link}>{settings.name}</a>
- </Link>
- </TitleTag>
- <p ref={jobRef} className={styles.job}>
- {locale?.startsWith('en')
- ? settings.baseline.en
- : settings.baseline.fr}
- </p>
- </div>
- </>
- );
-};
-
-export default Branding;