chore: add Branding component

4 files changed, 93 insertions, 0 deletions

diff --git a/src/assets/images/armand-philippot.jpg b/src/assets/images/armand-philippot.jpg
new file mode 100644
index 0000000..2c8ef50
--- /dev/null
+++ b/src/assets/images/armand-philippot.jpg
diff --git a/src/components/Branding/Branding.module.scss b/src/components/Branding/Branding.module.scss
new file mode 100644
index 0000000..ca1ba17
--- /dev/null
+++ b/src/components/Branding/Branding.module.scss
@@ -0,0 +1,52 @@
+@use "@styles/abstracts/functions" as fun;
+@use "@styles/abstracts/mixins" as mix;
+
+.wrapper {
+  display: grid;
+  grid-template-columns:
+    clamp(#{fun.convert-px(55)}, 15vw, #{fun.convert-px(90)})
+    minmax(0, 1fr);
+  grid-template-rows: repeat(2, max-content);
+  align-items: center;
+  column-gap: var(--spacing-md);
+  padding: var(--spacing-sm) 0;
+  text-shadow: fun.convert-px(2) fun.convert-px(2) 0 var(--color-fg-inverted);
+}
+
+.logo {
+  grid-column: 1;
+  grid-row: 1 / -1;
+  display: flex;
+  place-content: center;
+  border: fun.convert-px(1) solid var(--color-border);
+  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);
+
+  img {
+    border-radius: 50%;
+  }
+}
+
+.name {
+  grid-column: 2;
+  grid-row: 1;
+  margin: 0;
+  font-family: var(--font-family-secondary);
+  font-size: var(--font-size-xl);
+  font-weight: 500;
+
+  @include mix.media("screen") {
+    @include mix.dimensions("xs") {
+      font-size: var(--font-size-2xl);
+    }
+  }
+}
+
+.job {
+  grid-column: 2;
+  grid-row: 2;
+  margin: 0;
+  font-family: var(--font-family-secondary);
+  font-size: var(--font-size-lg);
+}
diff --git a/src/components/Branding/Branding.tsx b/src/components/Branding/Branding.tsx
new file mode 100644
index 0000000..e5565a4
--- /dev/null
+++ b/src/components/Branding/Branding.tsx
@@ -0,0 +1,35 @@
+import Image from 'next/image';
+import Link from 'next/link';
+import { ReactElement } from 'react';
+import { t } from '@lingui/macro';
+import photo from '@assets/images/armand-philippot.jpg';
+import { config } from '@config/website';
+import styles from './Branding.module.scss';
+
+type BrandingReturn = ({ isHome }: { isHome?: boolean }) => ReactElement;
+
+const Branding: BrandingReturn = ({ isHome = false }) => {
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.logo}>
+        <Image src={photo} alt={t`${config.name} picture`} layout="intrinsic" />
+      </div>
+      {isHome ? (
+        <h1 className={styles.name}>
+          <Link href="/">
+            <a>{config.name}</a>
+          </Link>
+        </h1>
+      ) : (
+        <p className={styles.name}>
+          <Link href="/">
+            <a>{config.name}</a>
+          </Link>
+        </p>
+      )}
+      <p className={styles.job}>{config.baseline}</p>
+    </div>
+  );
+};
+
+export default Branding;
diff --git a/src/config/website.ts b/src/config/website.ts
new file mode 100644
index 0000000..6122635
--- /dev/null
+++ b/src/config/website.ts
@@ -0,0 +1,6 @@
+import { t } from '@lingui/macro';
+
+export const config = {
+  name: 'Armand Philippot',
+  baseline: t`Front-end developer`,
+};