began rewrite

.gitignore

@@ -1,5 +1,6 @@
 # build output
 dist/
+
 # generated types
 .astro/
 
@@ -12,7 +13,6 @@ yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 
-
 # environment variables
 .env
 .env.production

.vscode/settings.json

@@ -1,3 +0,0 @@
-{
-    "editor.formatOnSave": false
-}

README.md

@@ -1,4 +1,54 @@
-# My personal website
+# Astro Starter Kit: Basics
-currently in wip mode because it gets rewritten<br>
+
-Its made with astro and gets built and hosted by netlify<br>
+```sh
-and yeah i spelled init wrong
+npm create astro@latest -- --template basics
+```
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)
+[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/basics)
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/basics/devcontainer.json)
+
+> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+
+![just-the-basics](https://github.com/withastro/astro/assets/2244813/a0a5533c-a856-4198-8470-2d67b1d7c554)
+
+## 🚀 Project Structure
+
+Inside of your Astro project, you'll see the following folders and files:
+
+```text
+/
+├── public/
+│   └── favicon.svg
+├── src/
+│   ├── components/
+│   │   └── Card.astro
+│   ├── layouts/
+│   │   └── Layout.astro
+│   └── pages/
+│       └── index.astro
+└── package.json
+```
+
+Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
+
+There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
+
+Any static assets, like images, can be placed in the `public/` directory.
+
+## 🧞 Commands
+
+All commands are run from the root of the project, from a terminal:
+
+| Command                   | Action                                           |
+| :------------------------ | :----------------------------------------------- |
+| `npm install`             | Installs dependencies                            |
+| `npm run dev`             | Starts local dev server at `localhost:4321`      |
+| `npm run build`           | Build your production site to `./dist/`          |
+| `npm run preview`         | Preview your build locally, before deploying     |
+| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
+| `npm run astro -- --help` | Get help using the Astro CLI                     |
+
+## 👀 Want to learn more?
+
+Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "",
+  "name": "vaporvees-website",
   "type": "module",
   "version": "0.0.1",
   "scripts": {
@@ -10,7 +10,7 @@
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "^2.4.1",
+    "astro": "^4.2.6",
-    "sass": "^1.62.1"
+    "sass": "^1.70.0"
   }
 }

public/favicon.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="512px" height="512px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g id="V_Bottom" transform="matrix(1.87289,0,0,1.11233,-284.183,-116.775)">
+        <path d="M283.682,421.257C286.503,417.769 290.342,417.769 293.163,421.257C297.047,426.059 302.823,433.2 308.573,440.309C311.364,443.76 312.522,449.839 311.443,455.378C310.365,460.918 307.295,464.664 303.833,464.664C294.048,464.664 282.798,464.664 273.013,464.664C269.55,464.664 266.48,460.918 265.402,455.378C264.324,449.839 265.482,443.76 268.272,440.309C274.023,433.2 279.798,426.059 283.682,421.257Z" style="fill:rgb(126,202,156);"/>
+    </g>
+    <g id="V_Left" transform="matrix(0.334183,0.550453,-1.32597,1.00077,234.616,81.7138)">
+        <path d="M313.469,75.834C325.441,75.834 334.551,79.365 334.551,84.006C334.551,88.84 334.551,95 334.551,100.124C334.551,102.681 331.744,105.227 326.826,107.134C321.908,109.04 315.338,110.128 308.742,110.128L45.074,110.128C33.09,110.128 23.97,106.593 23.97,101.947C23.97,97.117 23.97,90.965 23.97,85.846C23.97,83.287 26.778,80.738 31.7,78.831C36.622,76.923 43.197,75.834 49.798,75.834L313.469,75.834Z" style="fill:rgb(126,202,156);"/>
+    </g>
+    <g id="V_Left1" serif:id="V_Left" transform="matrix(-0.334183,0.550453,1.32597,1.00077,277.384,81.7138)">
+        <path d="M313.469,75.834C325.441,75.834 334.551,79.365 334.551,84.006C334.551,88.84 334.551,95 334.551,100.124C334.551,102.681 331.744,105.227 326.826,107.134C321.908,109.04 315.338,110.128 308.742,110.128L45.074,110.128C33.09,110.128 23.97,106.593 23.97,101.947C23.97,97.117 23.97,90.965 23.97,85.846C23.97,83.287 26.778,80.738 31.7,78.831C36.622,76.923 43.197,75.834 49.798,75.834L313.469,75.834Z" style="fill:rgb(126,202,156);"/>
+    </g>
+    <g id="V_Top" transform="matrix(1.09472,-8.84709e-17,7.45674e-16,1.65826,59.7597,-13.8362)">
+        <path d="M320.831,75.834C328.408,75.834 334.551,79.889 334.551,84.891C334.551,89.888 334.551,96.073 334.551,101.069C334.551,106.072 328.407,110.128 320.829,110.128C269.49,110.128 89.064,110.128 37.705,110.128C30.119,110.128 23.97,106.069 23.97,101.061C23.97,96.069 23.97,89.892 23.97,84.9C23.97,82.495 25.417,80.189 27.992,78.489C30.567,76.789 34.06,75.834 37.702,75.834L320.831,75.834Z" style="fill:rgb(126,202,156);"/>
+    </g>
+</svg>

src/layouts/Base.astro

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

src/layouts/Layout.astro

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

src/pages/index.astro

@@ -1,18 +1,11 @@
 ---
-import Base from "../layouts/Base.astro";
+import Layout from "../layouts/Layout.astro";
 ---
 
-<Base title="Work in progress">
+<Layout
-	<h1 class="wip-title">Work in <span class="text-gradient">progress</span></h1>
+	title="Home"
-	<div class="card">
+	description="This is my personal website with my projects, docs and other useful stuff."
-		<p>
+>
-			Hey &nbsp;<img width="32px" src="/hand_wave.webp"><br>
+	<h1>Home</h1>
-			<br>
+	<p>Under construction ;)</p>
-			this is my personal website <br> wich gets a rewrite "right now".<br>
+</Layout>
-			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>

src/styles/_var.scss

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

src/styles/_variables.scss

@@ -1,3 +0,0 @@
-$primary-color: #66D48E;
-$accent-color: #8400ff;
-$accent-gradient: linear-gradient(45deg, $primary-color, $accent-color 50%, white 60%);

src/styles/global.scss

@@ -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%;
-	}
-}

src/styles/main.scss

@@ -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;
+}