Added basic 'Person' component.
This commit is contained in:
parent
c9df8196f0
commit
7e1a2d9f72
8 changed files with 137 additions and 4 deletions
|
|
@ -1,4 +1,4 @@
|
|||
<script lang="ts">
|
||||
<script>
|
||||
import "$lib/css/base.css";
|
||||
import "$lib/css/cover-img.css";
|
||||
|
||||
|
|
|
|||
32
src/lib/components/person.svelte
Normal file
32
src/lib/components/person.svelte
Normal file
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
56
src/lib/css/person.css
Normal file
56
src/lib/css/person.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue