summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/assets/images/armand-philippot-logo.svg170
-rw-r--r--src/components/Branding/Branding.module.scss94
-rw-r--r--src/components/Branding/Branding.tsx24
3 files changed, 266 insertions, 22 deletions
diff --git a/src/assets/images/armand-philippot-logo.svg b/src/assets/images/armand-philippot-logo.svg
new file mode 100644
index 0000000..17a245e
--- /dev/null
+++ b/src/assets/images/armand-philippot-logo.svg
@@ -0,0 +1,170 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ width="92.604164mm"
+ height="92.604164mm"
+ viewBox="0 0 92.604164 92.604164"
+ version="1.1"
+ id="svg8"
+ inkscape:version="1.0.2 (e86c870879, 2021-01-15)"
+ sodipodi:docname="armand-philippot-logo.svg">
+ <defs
+ id="defs2">
+ <rect
+ x="50.243404"
+ y="24.854818"
+ width="80.992653"
+ height="65.698357"
+ id="rect1471-2" />
+ <rect
+ x="50.243404"
+ y="24.854818"
+ width="80.992653"
+ height="65.698357"
+ id="rect1666" />
+ <rect
+ x="50.243404"
+ y="24.854818"
+ width="80.992653"
+ height="65.698357"
+ id="rect1471-2-3" />
+ <rect
+ x="50.243404"
+ y="24.854818"
+ width="80.992653"
+ height="65.698357"
+ id="rect869" />
+ <rect
+ x="50.243404"
+ y="24.854818"
+ width="80.992653"
+ height="65.698357"
+ id="rect1471-2-3-6" />
+ <rect
+ x="50.243404"
+ y="24.854818"
+ width="80.992653"
+ height="65.698357"
+ id="rect928" />
+ </defs>
+ <sodipodi:namedview
+ id="base"
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1.0"
+ inkscape:pageopacity="0.0"
+ inkscape:pageshadow="2"
+ inkscape:zoom="1.979899"
+ inkscape:cx="62.374309"
+ inkscape:cy="220.65882"
+ inkscape:document-units="mm"
+ inkscape:current-layer="layer6"
+ inkscape:document-rotation="0"
+ showgrid="false"
+ fit-margin-top="0"
+ fit-margin-left="0"
+ fit-margin-right="0"
+ fit-margin-bottom="0"
+ inkscape:window-width="1920"
+ inkscape:window-height="1019"
+ inkscape:window-x="0"
+ inkscape:window-y="33"
+ inkscape:window-maximized="1" />
+ <metadata
+ id="metadata5">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title />
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <g
+ inkscape:groupmode="layer"
+ id="layer6"
+ inkscape:label="BG"
+ style="display:inline"
+ transform="translate(-38.78392,-94.321098)">
+ <rect
+ style="fill:#386394;fill-opacity:1;stroke-width:0.767807"
+ id="rect1078"
+ width="92.604164"
+ height="92.604164"
+ x="38.78392"
+ y="94.321098" />
+ </g>
+ <g
+ inkscape:label="PrimaryColor"
+ inkscape:groupmode="layer"
+ id="layer1"
+ style="display:inline"
+ transform="translate(-38.78392,-94.321098)">
+ <path
+ id="rect1424-4-2"
+ style="fill:#194776;fill-opacity:1;stroke:none;stroke-width:2.28419;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ d="M 131.38808,95.225357 39.688622,186.92526 h 91.699458 z"
+ sodipodi:nodetypes="cccc" />
+ </g>
+ <g
+ inkscape:groupmode="layer"
+ id="layer3"
+ inkscape:label="PrimaryColor-Dark"
+ style="display:inline"
+ transform="translate(-38.78392,-94.321098)">
+ <path
+ id="rect1424-0"
+ style="display:inline;fill:#113d69;fill-opacity:1;stroke:none;stroke-width:2.2842;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ d="m 38.78392,94.321098 h 92.60403 L 38.78392,186.92514 Z"
+ sodipodi:nodetypes="cccc" />
+ </g>
+ <g
+ inkscape:groupmode="layer"
+ id="layer7"
+ inkscape:label="Shadow"
+ transform="translate(-38.78392,-94.321098)">
+ <g
+ aria-label="AP"
+ transform="matrix(1.0764391,0,0,1.0764391,-5.5904334,83.891018)"
+ id="text1469-5-2"
+ style="font-style:normal;font-weight:normal;font-size:50.8px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;white-space:pre;shape-inside:url(#rect1471-2-3);display:inline;fill:#1a2f47;fill-opacity:1;stroke:none">
+ <path
+ d="m 51.514141,69.801562 12.547599,-32.7152 h 10.1092 l 12.5476,32.7152 h -9.9568 l -2.7432,-6.9596 h -9.8552 l -2.6924,6.9596 z m 13.919199,-13.8176 h 7.3152 l -3.6576,-9.6012 z"
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:50.8px;font-family:Kanit;-inkscape-font-specification:'Kanit Bold';fill:#1a2f47;fill-opacity:1"
+ id="path957-9" />
+ <path
+ d="m 90.274445,69.801562 v -32.7152 h 16.865595 q 4.0132,0 6.604,1.6256 2.6416,1.5748 3.9116,4.318 1.27,2.7432 1.27,6.096 0,3.4544 -1.4732,6.1468 -1.4732,2.6924 -4.1656,4.2164 -2.6924,1.524 -6.35,1.524 h -7.111995 v 8.7884 z m 9.5504,-16.1036 h 4.927605 q 2.23519,0 3.30199,-1.27 1.1176,-1.27 1.1176,-3.302 0,-2.1844 -1.016,-3.4544 -1.016,-1.27 -3.14959,-1.27 h -5.181605 z"
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:50.8px;font-family:Kanit;-inkscape-font-specification:'Kanit Bold';fill:#1a2f47;fill-opacity:1"
+ id="path959-1" />
+ </g>
+ </g>
+ <g
+ inkscape:groupmode="layer"
+ id="layer2"
+ inkscape:label="AP"
+ style="display:inline"
+ transform="translate(-38.78392,-94.321098)">
+ <g
+ aria-label="AP"
+ transform="matrix(1.0764391,0,0,1.0764391,-7.7056069,82.297001)"
+ id="text1469-5"
+ style="font-style:normal;font-weight:normal;font-size:50.8px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;white-space:pre;shape-inside:url(#rect1471-2-3);fill:#f3f7fc;fill-opacity:1;stroke:none">
+ <path
+ d="m 51.514141,69.801562 12.547599,-32.7152 h 10.1092 l 12.5476,32.7152 h -9.9568 l -2.7432,-6.9596 h -9.8552 l -2.6924,6.9596 z m 13.919199,-13.8176 h 7.3152 l -3.6576,-9.6012 z"
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:50.8px;font-family:Kanit;-inkscape-font-specification:'Kanit Bold';fill:#f3f7fc;fill-opacity:1"
+ id="path957" />
+ <path
+ d="m 90.274445,69.801562 v -32.7152 h 16.865595 q 4.0132,0 6.604,1.6256 2.6416,1.5748 3.9116,4.318 1.27,2.7432 1.27,6.096 0,3.4544 -1.4732,6.1468 -1.4732,2.6924 -4.1656,4.2164 -2.6924,1.524 -6.35,1.524 h -7.111995 v 8.7884 z m 9.5504,-16.1036 h 4.927605 q 2.23519,0 3.30199,-1.27 1.1176,-1.27 1.1176,-3.302 0,-2.1844 -1.016,-3.4544 -1.016,-1.27 -3.14959,-1.27 h -5.181605 z"
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:50.8px;font-family:Kanit;-inkscape-font-specification:'Kanit Bold';fill:#f3f7fc;fill-opacity:1"
+ id="path959" />
+ </g>
+ </g>
+</svg>
diff --git a/src/components/Branding/Branding.module.scss b/src/components/Branding/Branding.module.scss
index ca1ba17..9babe6f 100644
--- a/src/components/Branding/Branding.module.scss
+++ b/src/components/Branding/Branding.module.scss
@@ -2,13 +2,15 @@
@use "@styles/abstracts/mixins" as mix;
.wrapper {
+ --logo-size: clamp(#{fun.convert-px(68)}, 18vw, #{fun.convert-px(100)});
+
display: grid;
grid-template-columns:
- clamp(#{fun.convert-px(55)}, 15vw, #{fun.convert-px(90)})
+ var(--logo-size)
minmax(0, 1fr);
grid-template-rows: repeat(2, max-content);
align-items: center;
- column-gap: var(--spacing-md);
+ 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);
}
@@ -16,15 +18,62 @@
.logo {
grid-column: 1;
grid-row: 1 / -1;
+ justify-self: center;
display: flex;
place-content: center;
- border: fun.convert-px(1) solid var(--color-border);
+ width: var(--logo-size);
+ height: var(--logo-size);
+ position: relative;
border-radius: 50%;
- box-shadow: 0 0 0 fun.convert-px(4) var(--color-bg),
- 0 0 fun.convert-px(3) fun.convert-px(5) var(--color-shadow);
+ transition: all 0.6s linear 0s;
+ transform-style: preserve-3d;
- img {
+ &__front,
+ &__back {
+ width: 100%;
+ height: 100%;
+ padding: clamp(fun.convert-px(2), 0.8vw, fun.convert-px(5));
+ position: absolute;
+ top: 0;
+ left: 0;
+ backface-visibility: hidden;
+ background: var(--color-bg);
+ border: fun.convert-px(1) 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-lighter);
+ }
+
+ &__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-lighter);
+ }
}
}
@@ -33,14 +82,8 @@
grid-row: 1;
margin: 0;
font-family: var(--font-family-secondary);
- font-size: var(--font-size-xl);
+ font-size: clamp(var(--font-size-xl), 6vw, var(--font-size-2xl));
font-weight: 500;
-
- @include mix.media("screen") {
- @include mix.dimensions("xs") {
- font-size: var(--font-size-2xl);
- }
- }
}
.job {
@@ -50,3 +93,28 @@
font-family: var(--font-family-secondary);
font-size: var(--font-size-lg);
}
+
+.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
index d1f1ad7..e14ffdf 100644
--- a/src/components/Branding/Branding.tsx
+++ b/src/components/Branding/Branding.tsx
@@ -3,6 +3,7 @@ import Link from 'next/link';
import { ReactElement } from 'react';
import { t } from '@lingui/macro';
import photo from '@assets/images/armand-philippot.jpg';
+import Logo from '@assets/images/armand-philippot-logo.svg';
import { config } from '@config/website';
import styles from './Branding.module.scss';
@@ -14,18 +15,23 @@ const Branding: BrandingReturn = ({ isHome = false }) => {
return (
<div className={styles.wrapper}>
<div className={styles.logo}>
- <Image
- src={photo}
- alt={t({
- message: `${config.name} picture`,
- comment: 'Branding logo.',
- })}
- layout="intrinsic"
- />
+ <div className={styles.logo__front}>
+ <Image
+ src={photo}
+ alt={t({
+ message: `${config.name} picture`,
+ comment: 'Branding logo.',
+ })}
+ layout="intrinsic"
+ />
+ </div>
+ <div className={styles.logo__back}>
+ <Logo />
+ </div>
</div>
<TitleTag className={styles.name}>
<Link href="/">
- <a>{config.name}</a>
+ <a className={styles.link}>{config.name}</a>
</Link>
</TitleTag>
<p className={styles.job}>{config.baseline}</p>
generated by cgit v1.2.3 (git 2.39.1) at 2025-10-27 01:44:31 +0000