began rewrite
This commit is contained in:
@@ -1,19 +0,0 @@
|
||||
---
|
||||
let { title } = Astro.props;
|
||||
import "../styles/global.scss"
|
||||
---
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>{title}</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<slot />
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
27
src/layouts/Layout.astro
Normal file
27
src/layouts/Layout.astro
Normal file
@@ -0,0 +1,27 @@
|
||||
---
|
||||
interface Props {
|
||||
title: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
const { title } = Astro.props;
|
||||
const { description } = Astro.props;
|
||||
import "../styles/main.scss";
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="description" content={description} />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>vaporvee's Website | {title}</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<slot />
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,18 +1,11 @@
|
||||
---
|
||||
import Base from "../layouts/Base.astro";
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
---
|
||||
|
||||
<Base title="Work in progress">
|
||||
<h1 class="wip-title">Work in <span class="text-gradient">progress</span></h1>
|
||||
<div class="card">
|
||||
<p>
|
||||
Hey <img width="32px" src="/hand_wave.webp"><br>
|
||||
<br>
|
||||
this is my personal website <br> wich gets a rewrite "right now".<br>
|
||||
My name is Yannik aka vaporvee and I'm 19 years old.<br>
|
||||
I'm a game developer and i code in C++, Godot Engine's GDScript and C#.<br>
|
||||
<br>
|
||||
If you want to see the progress on this website visit <a href="https://github.com/vaporvee/web">github.com/vaporvee/web</a>
|
||||
</p>
|
||||
</div>
|
||||
</Base>
|
||||
<Layout
|
||||
title="Home"
|
||||
description="This is my personal website with my projects, docs and other useful stuff."
|
||||
>
|
||||
<h1>Home</h1>
|
||||
<p>Under construction ;)</p>
|
||||
</Layout>
|
||||
|
||||
28
src/styles/_var.scss
Normal file
28
src/styles/_var.scss
Normal file
@@ -0,0 +1,28 @@
|
||||
@font-face {
|
||||
font-family: 'Tanker-Regular';
|
||||
src: url('/fonts/Tanker-Regular.ttf') format('truetype');
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Satoshi-Regular';
|
||||
src: url('/fonts/Satoshi-Regular.ttf') format('truetype');
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Satoshi-Bold';
|
||||
src: url('/fonts/Satoshi-Bold.ttf') format('truetype');
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
$primary: #1C1427;
|
||||
$accent: #7ECA9C;
|
||||
$link: #CCFFBD;
|
||||
$highlight-primary: #40394A;
|
||||
@@ -1,3 +0,0 @@
|
||||
$primary-color: #66D48E;
|
||||
$accent-color: #8400ff;
|
||||
$accent-gradient: linear-gradient(45deg, $primary-color, $accent-color 50%, white 60%);
|
||||
@@ -1,85 +0,0 @@
|
||||
@import "./_variables.scss";
|
||||
|
||||
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
accent-color: $accent-color;
|
||||
caret-color: $accent-color;
|
||||
}
|
||||
::selection{
|
||||
background-color: $accent-color;
|
||||
}
|
||||
::marker{
|
||||
color: $accent-color;
|
||||
}
|
||||
body {
|
||||
font-family: system-ui, sans-serif;
|
||||
background-color: #0a0a0a;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
margin: 0;
|
||||
}
|
||||
.page{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
box-shadow:
|
||||
inset 60px 0 120px rgba($primary-color, 0.2),
|
||||
inset -60px 0 120px rgba($accent-color, 0.07);
|
||||
}
|
||||
|
||||
.wip-title {
|
||||
font-size: 50px;
|
||||
text-align: center;
|
||||
color: white;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.text-gradient {
|
||||
background-image: $accent-gradient;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-size: 400%;
|
||||
background-position: 0%;
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: #1d1d1d;
|
||||
border-color: #2d2d2d;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-radius: 15px;
|
||||
padding: 35px;
|
||||
color: white;
|
||||
width: 35%;
|
||||
margin: auto;
|
||||
margin-top: 7%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
box-shadow: rgba($primary-color, 0.4) 5px 5px, rgba($primary-color, 0.3) 10px 10px, rgba($primary-color, 0.2) 15px 15px, rgba($primary-color, 0.1) 20px 20px, rgba($primary-color, 0.05) 25px 25px;
|
||||
a {
|
||||
color: #2525ca;
|
||||
text-decoration: underline 2px;
|
||||
margin: auto;
|
||||
max-width: 500px;
|
||||
}
|
||||
p{
|
||||
font-size: 20px;
|
||||
margin: auto;
|
||||
max-width: 500px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 800px) {
|
||||
.wip-title{
|
||||
margin-top: 50px;
|
||||
font-size: 30px;
|
||||
}
|
||||
.card {
|
||||
margin-top: 10%;
|
||||
width: 65%;
|
||||
}
|
||||
}
|
||||
23
src/styles/main.scss
Normal file
23
src/styles/main.scss
Normal file
@@ -0,0 +1,23 @@
|
||||
@import './_var.scss';
|
||||
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: $primary;
|
||||
font-family: "Satoshi-Regular", "Arial";
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: "Tanker-Regular", "Arial";
|
||||
font-size: 72px;
|
||||
}
|
||||
|
||||
.content {
|
||||
background-color: $highlight-primary;
|
||||
margin: 10vw;
|
||||
margin-right: 30vw;
|
||||
padding: 2vw;
|
||||
border-radius: 25px;
|
||||
}
|
||||
Reference in New Issue
Block a user