summaryrefslogtreecommitdiffstats
path: root/src/components/Branding
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/Branding')
-rw-r--r--src/components/Branding/Branding.module.scss169
-rw-r--r--src/components/Branding/Branding.tsx107
-rw-r--r--src/components/Branding/Logo/Logo.module.scss23
-rw-r--r--src/components/Branding/Logo/Logo.tsx32
4 files changed, 0 insertions, 331 deletions
diff --git a/src/components/Branding/Branding.module.scss b/src/components/Branding/Branding.module.scss
deleted file mode 100644
index 2cd3b15..0000000
--- a/src/components/Branding/Branding.module.scss
+++ /dev/null
@@ -1,169 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/mixins" as mix;
-
-.wrapper {
- --logo-size: clamp(#{fun.convert-px(68)}, 18vw, #{fun.convert-px(100)});
-
- display: grid;
- grid-template-columns:
- var(--logo-size)
- minmax(0, 1fr);
- grid-template-rows: repeat(2, max-content);
- align-items: center;
- column-gap: var(--spacing-sm);
- padding: var(--spacing-sm) 0;
- text-shadow: fun.convert-px(2) fun.convert-px(2) 0 var(--color-fg-inverted);
-}
-
-.logo {
- --branding-logo-animation: none;
-
- grid-column: 1;
- grid-row: 1 / -1;
- justify-self: center;
- display: flex;
- place-content: center;
- width: var(--logo-size);
- height: var(--logo-size);
- position: relative;
- border-radius: 50%;
- transition: all 0.6s linear 0s;
- transform-style: preserve-3d;
- animation: var(--branding-logo-animation);
-
- &__front,
- &__back {
- width: 100%;
- height: 100%;
- padding: fun.convert-px(2);
- position: absolute;
- top: 0;
- left: 0;
- backface-visibility: hidden;
- background: var(--color-bg);
- border: fun.convert-px(2) solid var(--color-primary-dark);
- border-radius: 50%;
- transition: all 0.6s linear 0s;
- }
-
- &__front {
- box-shadow: fun.convert-px(1) fun.convert-px(2) fun.convert-px(1) 0
- var(--color-shadow-light),
- fun.convert-px(2) fun.convert-px(3) fun.convert-px(3) 0
- var(--color-shadow-light);
- }
-
- &__back {
- transform: rotateY(180deg);
- }
-
- img,
- svg {
- border-radius: 50%;
- }
-
- &:hover {
- transform: rotateY(180deg);
- }
-
- &:hover & {
- &__front {
- box-shadow: none;
- }
-
- &__back {
- box-shadow: fun.convert-px(1) fun.convert-px(2) fun.convert-px(1) 0
- var(--color-shadow-light),
- fun.convert-px(2) fun.convert-px(3) fun.convert-px(3) 0
- var(--color-shadow-light);
- }
- }
-}
-
-.name {
- --branding-name-animation: none;
-
- grid-column: 2;
- grid-row: 1;
- margin: 0;
- font-family: var(--font-family-secondary);
- font-size: clamp(var(--font-size-xl), 6vw, var(--font-size-2xl));
- font-weight: 500;
- letter-spacing: 0.01ex;
- position: relative;
- overflow: hidden;
-
- &::after {
- content: "|";
- display: block;
- width: 100%;
- height: 100%;
- position: absolute;
- top: 0;
- right: 0;
- background: var(--color-bg);
- color: var(--color-primary-darker);
- font-weight: 400;
- visibility: hidden;
- transform: translateX(100%);
- transform-origin: right;
- animation: var(--branding-name-animation);
- }
-}
-
-.job {
- --branding-job-animation: none;
-
- grid-column: 2;
- grid-row: 2;
- width: max-content;
- margin: 0;
- color: var(--color-fg-light);
- font-family: var(--font-family-secondary);
- font-size: var(--font-size-lg);
- font-weight: 500;
- position: relative;
- overflow: hidden;
-
- &::after {
- content: "|";
- display: block;
- width: 100%;
- height: 100%;
- position: absolute;
- top: 0;
- right: 0;
- background: var(--color-bg);
- color: var(--color-primary-darker);
- font-weight: 400;
- visibility: hidden;
- transform: translateX(100%);
- transform-origin: right;
- animation: var(--branding-job-animation);
- }
-}
-
-.link {
- background: linear-gradient(
- to top,
- var(--color-primary-light) fun.convert-px(5),
- transparent fun.convert-px(5)
- )
- left / 0 100% no-repeat;
- text-decoration: none;
- transition: all 0.6s ease-out 0s;
-
- &:hover,
- &:focus {
- background-size: 100% 100%;
- }
-
- &:focus {
- color: var(--color-primary-light);
- }
-
- &:active {
- background-size: 0 100%;
- color: var(--color-primary-dark);
- }
-}
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;
diff --git a/src/components/Branding/Logo/Logo.module.scss b/src/components/Branding/Logo/Logo.module.scss
deleted file mode 100644
index 3d62bf9..0000000
--- a/src/components/Branding/Logo/Logo.module.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-.wrapper {
- position: relative;
-}
-
-.bg-left {
- fill: var(--color-primary-light);
-}
-
-.bg-right {
- fill: var(--color-primary-dark);
-}
-
-.letter {
- fill: var(--color-fg-inverted);
- stroke: var(--color-primary-darker);
- stroke-width: 5;
-}
-
-.letter-shadow {
- fill: var(--color-shadow-darker);
- stroke: var(--color-shadow-darker);
- stroke-width: 5;
-}
diff --git a/src/components/Branding/Logo/Logo.tsx b/src/components/Branding/Logo/Logo.tsx
deleted file mode 100644
index 0623042..0000000
--- a/src/components/Branding/Logo/Logo.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import styles from './Logo.module.scss';
-
-const Logo = () => {
- return (
- <svg
- viewBox="0 0 512 512"
- xmlns="http://www.w3.org/2000/svg"
- className={styles.wrapper}
- >
- <path className={styles['bg-left']} d="M 0,0 H 506 L 0,506 Z" />
- <path className={styles['bg-right']} d="M 512,512 H 6 L 512,6 Z" />
- <path
- className={styles['letter-shadow']}
- d="m 66.049088,353.26557 h 57.233082 l 15.4763,-40.00476 h 56.64908 l 15.76831,40.00476 h 57.2331 L 196.28357,165.21398 h -58.10911 z m 80.009522,-79.42552 21.02441,-55.18904 21.02439,55.18904 z"
- />
- <path
- className={styles['letter']}
- d="m 59.569539,346.78602 h 57.233081 l 15.4763,-40.00476 H 188.928 l 15.76831,40.00476 h 57.2331 L 189.80402,158.73443 h -58.10911 z m 80.009521,-79.42552 21.02441,-55.18904 21.02439,55.18904 z"
- />
- <path
- className={styles['letter-shadow']}
- d="m 288.84935,353.26557 h 54.89704 v -50.51696 h 40.88078 c 42.04881,0 68.91332,-28.61654 68.91332,-68.32931 0,-38.5447 -21.60841,-69.20532 -67.74528,-69.20532 h -96.94586 z m 54.89704,-92.56578 v -53.437 h 29.78458 c 16.35231,0 23.94446,10.51221 23.94446,27.15651 0,15.47629 -8.46817,26.28049 -25.40449,26.28049 z"
- />
- <path
- className={styles['letter']}
- d="m 282.3698,346.78602 h 54.89704 v -50.51696 h 40.88078 c 42.04881,0 68.91332,-28.61654 68.91332,-68.3293 0,-38.54471 -21.60841,-69.20533 -67.74528,-69.20533 H 282.3698 Z m 54.89704,-92.56578 v -53.437 h 29.78458 c 16.35231,0 23.94446,10.51221 23.94446,27.15652 0,15.47628 -8.46817,26.28048 -25.40449,26.28048 z"
- />
- </svg>
- );
-};
-
-export default Logo;
generated by cgit v1.2.3 (git 2.39.1) at 2025-10-31 16:41:29 +0000