initial commit

src/routes/+layout.svelte

@@ -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>

src/routes/+page.svelte

@@ -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>

src/routes/croa/+page.svelte

@@ -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>