vaporvee/web-old
Archived
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

completed sidebar base

Browse Source
This commit is contained in:
Yannik
2024-02-05 23:54:52 +01:00
parent 82e3bad3df
commit 9d0762794f
9 changed files with 102 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/layouts/DocsLayout.astro
View File

@@ -2,6 +2,10 @@
const { frontmatter } = Astro.props; const { frontmatter } = Astro.props;
import Layout from "../layouts/Layout.astro"; import Layout from "../layouts/Layout.astro";
const title = frontmatter.title + "| Docs"; const title = frontmatter.title + "| Docs";
const unsortedDocs = await Astro.glob("../pages/docs/*/*.mdx");
const docs = unsortedDocs
.sort((a, b) => +new Date(b.frontmatter.date) - +new Date(a.frontmatter.date))
.filter((doc) => doc.frontmatter.repo === frontmatter.repo);
--- ---
<Layout <Layout
@@ -20,8 +24,16 @@ const title = frontmatter.title + "| Docs";
<hr /> <hr />
<br /> <br />
<slot /> <slot />
<div class="sidebar"> </div>
<a href={"/docs/" + frontmatter.repo}>{frontmatter.repo}</a> <div class="sidebar">
</div> <a href={"/docs/" + frontmatter.repo}>Home</a><br />
{
docs.map((page) => (
<>
<a href={page.url}>{page.frontmatter.title}</a>
<br />
</>
))
}
</div> </div>
</Layout> </Layout>

38
src/layouts/Layout.astro
View File

@@ -1,7 +1,7 @@
--- ---
interface Props { interface Props {
title: string; title: string;
description: string; description: string;
} }
const { title } = Astro.props; const { title } = Astro.props;
@@ -17,20 +17,22 @@ import { ViewTransitions } from "astro:transitions";
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="darkreader-lock" /> <meta name="darkreader-lock" />
<meta name="description" content={description} /> <meta name="description" content={description} />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} /> <meta name="generator" content={Astro.generator} />
<title>{title} | vaporvee's Website</title> <title>{title} | vaporvee's Website</title>
<ViewTransitions /> <ViewTransitions />
</head> </head>
<body> <body>
<Navbar /> <Navbar />
<slot /> <main>
<br /> <slot />
<Footer /> </main>
</body> <br />
<Footer />
</body>
</html> </html>

5
src/pages/docs.astro
View File

@@ -1,6 +1,5 @@
--- ---
import Layout from "../layouts/Layout.astro"; import Layout from "../layouts/Layout.astro";
import "../styles/docs.scss";
const unsortedDocs = await Astro.glob("./docs/*/index.mdx"); const unsortedDocs = await Astro.glob("./docs/*/index.mdx");
const docs = unsortedDocs.sort( const docs = unsortedDocs.sort(
(a, b) => +new Date(b.frontmatter.date) - +new Date(a.frontmatter.date) (a, b) => +new Date(b.frontmatter.date) - +new Date(a.frontmatter.date)
@@ -13,7 +12,7 @@ const docs = unsortedDocs.sort(
> >
<main> <main>
<div class="content"> <div class="content">
<h1>Docs</h1> <h1 style="text-align: center;">Docs</h1>
{ {
docs.map((doc) => ( docs.map((doc) => (
<div class="second-content"> <div class="second-content">
@@ -31,7 +30,7 @@ const docs = unsortedDocs.sort(
{doc.frontmatter.has_thumbnail ? ( {doc.frontmatter.has_thumbnail ? (
<a href={doc.url}> <a href={doc.url}>
<img <img
width="800vh" width="100%"
src={"/img/docs/thumbnails/" + doc.frontmatter.repo + ".webp"} src={"/img/docs/thumbnails/" + doc.frontmatter.repo + ".webp"}
/> />
</a> </a>

2
src/pages/docs/discord-sdk-godot/index.mdx
View File

@@ -74,7 +74,7 @@ func _ready():
**Then it will look similar to this:** **Then it will look similar to this:**
<img src="https://raw.githubusercontent.com/vaporvee/discord-sdk-godot/main/project/assets/ActivityPreview.svg" /> <img width="30%" src="https://raw.githubusercontent.com/vaporvee/discord-sdk-godot/main/project/assets/ActivityPreview.svg" />
[**Try a built demo**](https://github.com/vaporvee/discord-sdk-godot/releases/latest/download/Demo-Export.zip)<br /><br /> [**Try a built demo**](https://github.com/vaporvee/discord-sdk-godot/releases/latest/download/Demo-Export.zip)<br /><br />

87
src/pages/index.astro
View File

@@ -6,48 +6,49 @@ const yannikAge = new Date().getFullYear() - 2004; // 31/12/2003
--- ---
<Layout <Layout
title="Home" title="Home"
description="This is my personal website with my projects, docs and other useful stuff." description="This is my personal website with my projects, docs and other useful stuff."
> >
<main> <div class="lines">
<div class="home-main-box"> <div class="home-main-box">
<div class="home-title-box"> <div class="home-title-box">
<h1 class="home-title" style="font-size: 6vw;">vaporvee</h1> <h1 class="home-title" style="font-size: 6vw;">vaporvee</h1>
<h2 <h2
class="home-title" class="home-title"
style="font-size: 2vw; margin-top: -10px; margin-bottom: 12vh;" style="font-size: 2vw; margin-top: -10px; margin-bottom: 12vh;"
> >
Making video games Making video games
</h2> </h2>
<img <img
class="using-engines" class="using-engines"
src="/using_engines.svg" src="/using_engines.svg"
alt="engines I'm using" alt="engines I'm using"
/> />
</div> </div>
<div class="content"> <div class="content">
<p> <p>
Hello my name is <b>Yannik</b>!<br /> Hello my name is <b>Yannik</b>!<br />
I’m a {yannikAge} year old <b>Game Developer</b> living <b I’m a {yannikAge} year old <b>Game Developer</b> living <b
>in Germany</b >in Germany</b
>.<br /> >.<br />
I mostly code in C++, Godot Engine's GDScript and C#.<br /> I mostly code in C++, Godot Engine's GDScript and C#.<br />
I am mostly self taught but i cant really say when i began to I am mostly self taught but i cant really say when i began to learn game
learn game developement.<br /> developement.<br />
Currently i already work at a game studio and i also have my Currently i already work at a game studio and i also have my own game side
own game side projects and tools.<br /> projects and tools.<br />
This website will mostly have <a href="/docs">docs</a>, <a This website will mostly have <a href="/docs">docs</a>, <a
href="/tutorials">tutorials</a href="/tutorials">tutorials</a
>, and showcasing of my <a href="/projects">projects</a>. >, and showcasing of my <a href="/projects">projects</a>. Maybe also
Maybe also some other stuff all around the creative process some other stuff all around the creative process of game developement
of game developement or completely unrelated stuff like or completely unrelated stuff like cooking recepies in my <a
cooking recepies in my <a href="/blog">blog</a> ;)<br /> href="/blog">blog</a
<i style="font-size: 8px;" > ;)<br />
>(this website is getting rewritten and is not looking <i style="font-size: 8px;"
good on mobile devices yet)</i >(this website is getting rewritten and is not looking good on
> mobile devices yet)</i
</p> >
</div> </p>
</div> </div>
</main> </div>
</div>
</Layout> </Layout>

1
src/styles/callout.scss
View File

@@ -8,6 +8,7 @@
border: var(--callout-border); border: var(--callout-border);
border-radius: var(--callout-radius); border-radius: var(--callout-radius);
background: var(--callout-background); background: var(--callout-background);
margin: 1vh;
} }
.callout code, .callout code,

5
src/styles/docs.scss
View File

@@ -1,5 +0,0 @@
.content{
display: flex;
flex-direction: column;
align-items: center;
}

8
src/styles/home.scss
View File

@@ -1,4 +1,10 @@
main { main{
display: unset;
flex-direction: unset;
align-items: unset;
}
.lines {
background-image: url("/diagonal_lines_home.png"); background-image: url("/diagonal_lines_home.png");
background-size: cover; background-size: cover;
background-repeat: repeat; background-repeat: repeat;

17
src/styles/main.scss
View File

@@ -16,32 +16,39 @@ h1 {
font-family: "Tanker-Regular", "Arial"; font-family: "Tanker-Regular", "Arial";
} }
main{
display: flex;
justify-content: space-evenly;
}
.content { .content {
display: flex;
flex-direction: column;
align-self: center;
background-color: $highlight-primary; background-color: $highlight-primary;
border-radius: 25px; border-radius: 25px;
border: 1px solid lighten($highlight-primary, 16%); border: 1px solid lighten($highlight-primary, 16%);
box-shadow: 0px 4px 4px 0px #00000040; box-shadow: 0px 4px 4px 0px #00000040;
padding: 2vw; padding: 2vw;
margin-inline: 10vw; width: 60vw;
margin-bottom: 11vh; margin-bottom: 11vh;
} }
.second-content { .second-content {
align-self: center;
text-align: center; text-align: center;
$second-content-clr: #6e6e6e40; $second-content-clr: #6e6e6e40;
background-color: $second-content-clr; background-color: $second-content-clr;
border-radius: 25px; border-radius: 25px;
border: 1px solid lighten($second-content-clr, 16%); border: 1px solid lighten($second-content-clr, 16%);
width: 80vh; width: 42vw;
padding: 1vh; padding: 2vh;
margin-inline: 10vw; margin-inline: 10vw;
margin-bottom: 11vh; margin-bottom: 11vh;
} }
.sidebar{ .sidebar{
position: absolute;
right: 0; right: 0;
top: 0; top: 0;
margin-top: 10.5vh;
} }