From 7e1a2d9f723e465b9ec74d0070d0a3806e903cec Mon Sep 17 00:00:00 2001
From: Yohan Boujon <yo.boujon@gmail.com>
Date: Tue, 1 Apr 2025 00:28:41 +0200
Subject: [PATCH] Added basic 'Person' component.

---
 src/lib/components/cover-img.svelte |  2 +-
 src/lib/components/person.svelte    | 32 +++++++++++++++++
 src/lib/css/base.css                | 20 +++++++++++
 src/lib/css/cover-img.css           |  4 +--
 src/lib/css/main.css                |  6 ++++
 src/lib/css/person.css              | 56 +++++++++++++++++++++++++++++
 src/lib/json/hub.json               |  8 ++++-
 src/routes/+page.svelte             | 13 +++++++
 8 files changed, 137 insertions(+), 4 deletions(-)
 create mode 100644 src/lib/components/person.svelte
 create mode 100644 src/lib/css/person.css

diff --git a/src/lib/components/cover-img.svelte b/src/lib/components/cover-img.svelte
index 6be21b8..a744d12 100644
--- a/src/lib/components/cover-img.svelte
+++ b/src/lib/components/cover-img.svelte
@@ -1,4 +1,4 @@
-<script lang="ts">
+<script>
     import "$lib/css/base.css";
     import "$lib/css/cover-img.css";
 
diff --git a/src/lib/components/person.svelte b/src/lib/components/person.svelte
new file mode 100644
index 0000000..97878dc
--- /dev/null
+++ b/src/lib/components/person.svelte
@@ -0,0 +1,32 @@
+<script>
+    import "$lib/css/person.css";
+
+    export let picture;
+    export let name = "John Doe";
+    export let pronouns = "";
+    export let description = "Normal human being I swear";
+</script>
+
+<div class="flex center">
+    <div class="person-container flex-row">
+        <div class="person-picture">
+            <img alt="person" src={picture} />
+        </div>
+        <div class="person-content flex-col">
+            <div class="flex-row">
+                <h1>{name}</h1>
+                {#if pronouns != ""}
+                    <span>{pronouns}</span>
+                {/if}
+            </div>
+            <p>{description}</p>
+            <div class="flex-row flex-end">
+                <div class="person-button">
+                    <button>
+                        <p>Me connaître</p>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/src/lib/css/base.css b/src/lib/css/base.css
index 99a19b9..5e2fdda 100644
--- a/src/lib/css/base.css
+++ b/src/lib/css/base.css
@@ -82,6 +82,26 @@ h2 {
     margin: 0;
 }
 
+.section::after {
+    width: 50%;
+    height: 2px;
+    left: 2rem;
+    bottom: 0.75rem;
+    content: "";
+    position: relative;
+    display: block;
+    background-color: #41354320;
+    margin-bottom: 1.2rem;
+}
+
+.section h1 {
+    color: var(--color-text);
+    font-family: Gabarito;
+    font-weight: 700;
+    font-size: 2.5rem;
+    margin: 2rem;
+}
+
 .flex-row {
     display: flex;
     align-items: center;
diff --git a/src/lib/css/cover-img.css b/src/lib/css/cover-img.css
index 02511ed..bdddcbf 100644
--- a/src/lib/css/cover-img.css
+++ b/src/lib/css/cover-img.css
@@ -38,7 +38,7 @@
 .cover-img-image {
     grid-area: overlay;
     width: 100dvw;
-    height: 100dvh;
+    height: 105dvh;
 }
 
 .cover-img-darken {
@@ -51,7 +51,7 @@
 
 .cover-img-image img {
     width: 100dvw;
-    height: 100dvh;
+    height: 105dvh;
     object-fit: cover;
     border-bottom-left-radius: 2rem;
     border-bottom-right-radius: 2rem;
diff --git a/src/lib/css/main.css b/src/lib/css/main.css
index 5ba71f1..e0b812e 100644
--- a/src/lib/css/main.css
+++ b/src/lib/css/main.css
@@ -15,6 +15,12 @@
     height: calc(var(--navbar-height)*2);
 }
 
+.main-content {
+    margin-left: 2rem;
+    margin-right: 2rem;
+}
+
+/* To be removed */
 .main-banner-content {
     grid-area: overlay;
     margin-top: var(--navbar-height);
diff --git a/src/lib/css/person.css b/src/lib/css/person.css
new file mode 100644
index 0000000..01bb668
--- /dev/null
+++ b/src/lib/css/person.css
@@ -0,0 +1,56 @@
+:root {
+    --picture-width: 15rem;
+}
+
+.person-container {
+    width: 50rem;
+    padding: 1rem;
+}
+
+.person-picture img {
+    width: var(--picture-width);
+    height: var(--picture-width);
+    border-radius: 100%;
+    color: var(--color-background);
+}
+
+.person-picture {
+    margin-right: 3rem;
+}
+
+.person-content {
+    font-family: 'JetBrains Mono';
+    color: var(--color-text);
+    width: 100%;
+}
+
+.person-content span {
+    background-color: var(--color-pill);
+    margin-left: 1rem;
+    margin-right: 1rem;
+    padding: 0.5rem;
+    border-radius: var(--border-min);
+    font-size: var(--1-2-rem);
+}
+
+.person-content h1 {
+    font-weight: 800;
+    padding: 0;
+    margin: 1rem;
+    margin-left: 0;
+    font-size: var(--2-rem);
+}
+
+.person-button button {
+    border-radius: 3rem;
+    border: none;
+    cursor: pointer;
+    background-image: linear-gradient(to right, var(--navbar-dark) 0%, var(--navbar-light) 100%);
+    box-shadow: 0px 8px 18px -1px #33283760;
+}
+
+.person-button p {
+    color: var(--color-background);
+    font-family: 'JetBrains Mono';
+    margin: 1rem;
+}
diff --git a/src/lib/json/hub.json b/src/lib/json/hub.json
index e71dcd5..0c98650 100644
--- a/src/lib/json/hub.json
+++ b/src/lib/json/hub.json
@@ -1,4 +1,10 @@
 {
     "welcomeTitle": "Bienvenue sur Etheryo",
-    "welcomeSubtitle": "'Etheryo' provient du mot 'Éther'/'Æther' dans la mythologie grec ainsi que de mon propre prénom. Le but de ce site web est de montrer mes créations. Qu'elles soient artistiques, philosophiques ou scientifiques, elles reflettent tout ce que je veux apporter au monde."
+    "welcomeSubtitle": "'Etheryo' provient du mot 'Éther'/'Æther' dans la mythologie grec ainsi que de mon propre prénom. Le but de ce site web est de montrer mes créations. Qu'elles soient artistiques, philosophiques ou scientifiques, elles reflettent tout ce que je veux apporter au monde.",
+    "who": "Qui suis-je ?",
+    "person": {
+        "name": "Yohan Boujon",
+        "pronouns": "il/lui",
+        "description": "Informatics and electronics engineer"
+    }
 }
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 73ed7e5..f3fe808 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -3,10 +3,12 @@
 	import "$lib/css/main.css";
 
 	import CoverImg from "$lib/components/cover-img.svelte";
+	import Person from "$lib/components/person.svelte";
 	import hubjson from "$lib/json/hub.json";
 
 	let hub_cover =
 		"https://share.etheryo.fr/rando/2024.07.28/IMG20240728141949_min.jpg";
+	let profile_pic = "https://share.etheryo.fr/personal/yohan/pfp.jpg";
 </script>
 
 <div class="main-banner">
@@ -17,3 +19,14 @@
 		subtitle={hubjson.welcomeSubtitle}
 	/>
 </div>
+<div class="main-content">
+	<div class="section">
+		<h1>{hubjson.who}</h1>
+	</div>
+	<Person
+		picture={profile_pic}
+		name={hubjson.person.name}
+		pronouns={hubjson.person.pronouns}
+		description={hubjson.person.description}
+	/>
+</div>