61 lines
1.8 KiB
Svelte
61 lines
1.8 KiB
Svelte
<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>
|