Added basic 'Person' component.

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";
 

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>

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;

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;

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);

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;
+}

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"
+    }
 }

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>