initial commit
This commit is contained in:
celeste
13
src/app.d.ts
vendored
Normal file
13
src/app.d.ts
vendored
Normal file
@@ -0,0 +1,13 @@
|
||||
// See https://svelte.dev/docs/kit/types#app.d.ts
|
||||
// for information about these interfaces
|
||||
declare global {
|
||||
namespace App {
|
||||
// interface Error {}
|
||||
// interface Locals {}
|
||||
// interface PageData {}
|
||||
// interface PageState {}
|
||||
// interface Platform {}
|
||||
}
|
||||
}
|
||||
|
||||
export {};
|
||||
12
src/app.html
Normal file
12
src/app.html
Normal file
@@ -0,0 +1,12 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
<link rel="stylesheet" href="/shared.css" />
|
||||
</html>
|
||||
60
src/lib/Button.svelte
Normal file
60
src/lib/Button.svelte
Normal file
@@ -0,0 +1,60 @@
|
||||
<script>
|
||||
let {label="button", action
|
||||
} = $props()
|
||||
</script>
|
||||
|
||||
<button class="hover-underline" onclick={() => action()}>
|
||||
<p>
|
||||
{label}
|
||||
</p>
|
||||
</button>
|
||||
|
||||
<style>
|
||||
|
||||
p {
|
||||
margin:10px
|
||||
}
|
||||
|
||||
button {
|
||||
color:var(--text);
|
||||
background-color: var(--button-color);
|
||||
border-color: var(--text);
|
||||
border-style:solid;
|
||||
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hover-underline {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hover-underline {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hover-underline::after,
|
||||
.hover-underline::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background: var(--text);
|
||||
bottom: -4px;
|
||||
left: 0;
|
||||
|
||||
transform: scaleX(0);
|
||||
transform-origin: left;
|
||||
transition: transform 0.4s ease-out;
|
||||
}
|
||||
|
||||
.hover-underline:hover::after,
|
||||
.hover-underline:hover::before {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
97
src/lib/Card.svelte
Normal file
97
src/lib/Card.svelte
Normal file
@@ -0,0 +1,97 @@
|
||||
<script>
|
||||
import Button from "$lib/Button.svelte";
|
||||
|
||||
let {
|
||||
children,
|
||||
title = "Titre",
|
||||
action = () => console.log("Default action"),
|
||||
action_title = "Click me"
|
||||
} = $props();
|
||||
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<div class="triangle-pattern">
|
||||
|
||||
<div class="content-wrapper">
|
||||
<h4>{title}</h4>
|
||||
<div class="child">
|
||||
{@render children?.()}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if action}
|
||||
<div class="button-div">
|
||||
<Button
|
||||
action={action}
|
||||
label={action_title}
|
||||
--button-color="var(--secondary)"
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
main {
|
||||
border-color: var(--text, #000);
|
||||
border-style: solid;
|
||||
border-width: 0.2em;
|
||||
margin: 1em;
|
||||
background-color: var(--primary-soft, #f4f4f4);
|
||||
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.triangle-pattern {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
min-height: inherit;
|
||||
|
||||
background-image:
|
||||
linear-gradient(135deg, var(--primary-dark, #333) 10px, transparent 11px),
|
||||
linear-gradient(45deg, var(--primary-dark, #333) 10px, transparent 11px),
|
||||
linear-gradient(to right, var(--primary-dark, #333) 50px, transparent 50px);
|
||||
background-size:
|
||||
30px 30px,
|
||||
30px 30px,
|
||||
100% 100%;
|
||||
background-position:
|
||||
50px 50px,
|
||||
50px 50px,
|
||||
0 0;
|
||||
background-repeat:
|
||||
repeat-y,
|
||||
repeat-y,
|
||||
no-repeat;
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
margin: 1em;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin: 20px 0;
|
||||
margin-left: 60px;
|
||||
}
|
||||
|
||||
.child {
|
||||
margin-left: 60px;
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.button-div {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin: 1em;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
26
src/lib/Col.svelte
Normal file
26
src/lib/Col.svelte
Normal file
@@ -0,0 +1,26 @@
|
||||
<script lang="ts">
|
||||
let {
|
||||
children,
|
||||
gap = '1rem',
|
||||
justify = 'flex-start',
|
||||
align = 'stretch',
|
||||
flex = '1'
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="col"
|
||||
style:gap
|
||||
style:justify-content={justify}
|
||||
style:align-items={align}
|
||||
style:flex
|
||||
>
|
||||
{@render children()}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
27
src/lib/Row.svelte
Normal file
27
src/lib/Row.svelte
Normal file
@@ -0,0 +1,27 @@
|
||||
<script lang="ts">
|
||||
let {
|
||||
children,
|
||||
gap = '1rem',
|
||||
justify = 'flex-start',
|
||||
align = 'stretch',
|
||||
wrap = false
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="row"
|
||||
style:gap
|
||||
style:justify-content={justify}
|
||||
style:align-items={align}
|
||||
style:flex-wrap={wrap ? 'wrap' : 'nowrap'}
|
||||
>
|
||||
{@render children()}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
1
src/lib/assets/favicon.svg
Normal file
1
src/lib/assets/favicon.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.157 22.819c-10.4-14.885-30.94-19.297-45.792-9.835L22.282 29.608A29.92 29.92 0 0 0 8.764 49.65a31.5 31.5 0 0 0 3.108 20.231 30 30 0 0 0-4.477 11.183 31.9 31.9 0 0 0 5.448 24.116c10.402 14.887 30.942 19.297 45.791 9.835l26.083-16.624A29.92 29.92 0 0 0 98.235 78.35a31.53 31.53 0 0 0-3.105-20.232 30 30 0 0 0 4.474-11.182 31.88 31.88 0 0 0-5.447-24.116" style="fill:#ff3e00"/><path d="M45.817 106.582a20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.503 18 18 0 0 1 .624-2.435l.49-1.498 1.337.981a33.6 33.6 0 0 0 10.203 5.098l.97.294-.09.968a5.85 5.85 0 0 0 1.052 3.878 6.24 6.24 0 0 0 6.695 2.485 5.8 5.8 0 0 0 1.603-.704L69.27 76.28a5.43 5.43 0 0 0 2.45-3.631 5.8 5.8 0 0 0-.987-4.371 6.24 6.24 0 0 0-6.698-2.487 5.7 5.7 0 0 0-1.6.704l-9.953 6.345a19 19 0 0 1-5.296 2.326 20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.502 17.99 17.99 0 0 1 8.13-12.052l26.081-16.623a19 19 0 0 1 5.3-2.329 20.72 20.72 0 0 1 22.237 8.243 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-.624 2.435l-.49 1.498-1.337-.98a33.6 33.6 0 0 0-10.203-5.1l-.97-.294.09-.968a5.86 5.86 0 0 0-1.052-3.878 6.24 6.24 0 0 0-6.696-2.485 5.8 5.8 0 0 0-1.602.704L37.73 51.72a5.42 5.42 0 0 0-2.449 3.63 5.79 5.79 0 0 0 .986 4.372 6.24 6.24 0 0 0 6.698 2.486 5.8 5.8 0 0 0 1.602-.704l9.952-6.342a19 19 0 0 1 5.295-2.328 20.72 20.72 0 0 1 22.237 8.242 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-8.13 12.053l-26.081 16.622a19 19 0 0 1-5.3 2.328" style="fill:#fff"/></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
1
src/lib/index.ts
Normal file
1
src/lib/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
// place files you want to import through the `$lib` alias in this folder.
|
||||
110
src/routes/+layout.svelte
Normal file
110
src/routes/+layout.svelte
Normal file
@@ -0,0 +1,110 @@
|
||||
<script lang="ts">
|
||||
import favicon from '$lib/assets/favicon.svg';
|
||||
let { children } = $props();
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<link rel="icon" href={favicon} />
|
||||
</svelte:head>
|
||||
|
||||
<main>
|
||||
|
||||
<div class="left-panel">
|
||||
<div class="pp">
|
||||
<p>
|
||||
pp
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="menu">
|
||||
|
||||
<p>
|
||||
qdskjn
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
{@render children()}
|
||||
</div>
|
||||
|
||||
|
||||
</main>
|
||||
|
||||
<style>
|
||||
:global(body) {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.pp {
|
||||
border: 2px solid black;
|
||||
border-top: none;
|
||||
width:100%;
|
||||
padding: 2em;
|
||||
|
||||
margin-bottom: 2em;
|
||||
|
||||
height: 20%;
|
||||
background-color: var(--background-alpha);
|
||||
|
||||
|
||||
}
|
||||
|
||||
.left-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 15%;
|
||||
margin-left: 3%;
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
|
||||
.menu {
|
||||
height: 60%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
|
||||
padding: 2em;
|
||||
|
||||
background-color: var(--background-alpha);
|
||||
|
||||
|
||||
border-bottom: none;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 63%;
|
||||
margin: 0 auto;
|
||||
|
||||
padding: 2rem;
|
||||
background-color: var(--background-alpha);
|
||||
|
||||
border-left: 4px solid var(--accent);
|
||||
border-right: 4px solid var(--accent);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.content {
|
||||
padding: 1rem;
|
||||
border-left-width: 2px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
60
src/routes/+page.svelte
Normal file
60
src/routes/+page.svelte
Normal file
@@ -0,0 +1,60 @@
|
||||
<script>
|
||||
import Row from "$lib/Row.svelte"
|
||||
import Col from "$lib/Col.svelte"
|
||||
import Button from "$lib/Button.svelte"
|
||||
|
||||
function openCroa () {
|
||||
window.open("croa/");
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<div class="hero">
|
||||
<Col gap="2rem" align="center" justify="center">
|
||||
<div class="hero-content">
|
||||
<h1 class="title">Welcome to Goupiliot</h1>
|
||||
<p class="subtitle">
|
||||
Here you can find Celeste's personal website, as well as Ysa's,
|
||||
and SweetCheeseCrepes, where Celeste goes nuts...
|
||||
</p>
|
||||
<Row gap="1rem" justify="center" wrap={true}>
|
||||
<Button action={openCroa} label="Celeste's Portfolio" --button-color=var(--secondary)></Button>
|
||||
<Button action={() => console.log("don't exist yet")} label="Ysa's Portfolio" --button-color=var(--secondary)></Button>
|
||||
<Button action= {() => console.log("don't exist yet")} label="SweetCheeseCrepes"--button-color=var(--secondary)></Button>
|
||||
</Row>
|
||||
</div>
|
||||
</Col>
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.hero {
|
||||
min-height: 70vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
max-width: 800px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: clamp(2rem, 5vw, 3.5rem);
|
||||
font-weight: 700;
|
||||
margin-bottom: 1rem;
|
||||
background: linear-gradient(135deg, var(--accent), var(--accent-light, var(--primary)));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: clamp(1rem, 2vw, 1.25rem);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 2rem;
|
||||
color: var(--text);
|
||||
}
|
||||
</style>
|
||||
7
src/routes/croa/+page.svelte
Normal file
7
src/routes/croa/+page.svelte
Normal file
@@ -0,0 +1,7 @@
|
||||
<script>
|
||||
import Card from "$lib/Card.svelte"
|
||||
</script>
|
||||
|
||||
<Card> lorem ipsum, et bah je connais pas la suite, donc je vais broder, heeuuu bon bah jsp si vous saviez mais le sujet de ma thèse c'est genre la soustraction de psf par deep learning en prennant en compte des composantes propres au téléscope james webb telescope, et ensuite l'appliquer au Roman telescope qui vas être lancé en 2027, fin seulement si trump veut bien, parce qu'il CLC CE MEC bref abah c'est assez long bye! </Card>
|
||||
|
||||
<Card> hihi j'adore manger des enfants</Card>
|
||||
Reference in New Issue
Block a user