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

finished navbar and continued home

Browse Source
This commit is contained in:
Yannik
2024-01-30 23:16:05 +01:00
parent 82e1635a16
commit 2f94f4854a
16 changed files with 1415 additions and 2546 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
astro.config.mjs
View File

@@ -1,4 +1,9 @@
import { defineConfig } from 'astro/config';
import minify from 'astro-min';
import metaTags from "astro-meta-tags";
// https://astro.build/config
export default defineConfig({});
export default defineConfig({
integrations: [minify(), metaTags()]
});

3732
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
package.json
View File

@@ -11,7 +11,9 @@
},
"dependencies": {
"astro": "^4.2.6",
"astro-meta-tags": "^0.2.1",
"astro-min": "^1.1.0-dev.4",
"npx": "^3.0.0",
"sass": "^1.70.0"
}
}
}

BIN
public/diagonal_lines_home.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 42 KiB

27
public/favicon.svg
View File

@@ -1,16 +1,13 @@
<?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 width="60" height="50" viewBox="0 0 60 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_3_6)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M28.3628 41.6225C29.2928 40.9493 30.5585 40.9493 31.4886 41.6225C32.7691 42.5492 34.6734 43.9275 36.5691 45.2995C37.4893 45.9655 37.8711 47.1388 37.5153 48.2078C37.1599 49.277 36.1478 50 35.0064 50C31.7804 50 28.0713 50 24.8453 50C23.7036 50 22.6914 49.277 22.336 48.2078C21.9806 47.1388 22.3624 45.9655 23.2822 45.2995C25.1783 43.9275 27.0823 42.5492 28.3628 41.6225Z" fill="#7ECA9C"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M26.8991 37.8913C27.6045 39.0357 27.3201 40.517 26.2409 41.3193C25.1167 42.155 23.6842 43.2199 22.4926 44.1057C21.8979 44.5478 21.1405 44.7196 20.4072 44.5791C19.6742 44.4385 19.034 43.9985 18.6454 43.368L3.10939 18.163C2.40327 17.0174 2.68797 15.5345 3.76841 14.7313C4.89164 13.8963 6.32231 12.8328 7.51274 11.9478C8.10785 11.5055 8.86608 11.3332 9.59957 11.4741C10.3333 11.6147 10.974 12.055 11.3629 12.686L26.8991 37.8913Z" fill="#7ECA9C"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M32.9522 37.8913C32.2468 39.0357 32.5312 40.517 33.6105 41.3193C34.7346 42.155 36.1671 43.2199 37.3587 44.1057C37.9534 44.5478 38.7109 44.7196 39.4441 44.5791C40.1771 44.4385 40.8173 43.9985 41.2059 43.368L56.7419 18.163C57.4481 17.0174 57.1634 15.5345 56.0829 14.7313C54.9597 13.8963 53.529 12.8328 52.3386 11.9478C51.7435 11.5055 50.9852 11.3332 50.2517 11.4741C49.518 11.6147 48.8773 12.055 48.4884 12.686L32.9522 37.8913Z" fill="#7ECA9C"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M57.2073 0C58.6674 0 59.8512 1.16672 59.8512 2.60592C59.8512 4.04367 59.8512 5.82325 59.8512 7.26072C59.8512 8.7002 58.6672 9.86721 57.2069 9.86721C47.3135 9.86721 12.5441 9.86721 2.64684 9.86721C1.18496 9.86721 0 8.69934 0 7.25841C0 5.8221 0 4.04483 0 2.60851C0 1.91653 0.278848 1.25304 0.775069 0.763907C1.27129 0.274776 1.94442 0 2.64626 0L57.2073 0Z" fill="#7ECA9C"/>
</g>
<defs>
<clipPath id="clip0_3_6">
<rect width="60" height="50" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB

3
public/nav_highlight.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="29" height="5" viewBox="0 0 29 5" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="29" height="5" rx="2.5" fill="#7ECA9C"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 155 B

29
public/using_engines.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 70 KiB

72
src/components/Navbar.astro
View File

@@ -0,0 +1,72 @@
---
const routes = {
Home: "/",
Projects: "/projects",
Tutorials: "/tutorials",
Docs: "/docs",
Blog: "/blog",
};
---
<header>
<img class="logo" src="/favicon.svg" alt="Logo Icon" />
<nav>
{
Object.entries(routes).map(([pageName, path]) => {
const isActive =
(Astro.url.pathname.startsWith(path) && path !== "/") ||
Astro.url.pathname === path;
return (
<div class="navbar-entry">
<a href={path} class={isActive ? "active" : ""}>
{pageName}
</a>
{isActive ? (
<div class="highlighter">
<img src="/nav_highlight.svg" />
</div>
) : null}
</div>
);
})
}
</nav>
</header>
<style lang="scss">
nav {
margin-left: 2.5vw;
display: flex;
justify-content: center;
}
.navbar-entry {
display: flex;
flex-direction: column;
align-items: center;
}
.highlighter {
margin-top: -2vh;
}
header {
padding-top: 2.5vh;
padding-bottom: 2.5vh;
display: inline-flex;
align-items: center;
}
.logo {
margin-left: 2.3vw;
width: 40px;
}
a {
color: white;
text-decoration: none;
text-align: center;
margin-inline: 0.9vw;
}
.active {
font-family: "Satoshi-Bold";
color: #7eca9c;
}
</style>

6
src/layouts/Layout.astro
View File

@@ -7,6 +7,10 @@ interface Props {
const { title } = Astro.props;
const { description } = Astro.props;
import "../styles/main.scss";
import Navbar from "../components/Navbar.astro";
import { ViewTransitions } from "astro:transitions";
---
<!doctype html>
@@ -18,8 +22,10 @@ import "../styles/main.scss";
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
<title>vaporvee's Website | {title}</title>
<ViewTransitions />
</head>
<body>
<Navbar />
<slot />
</body>
</html>

10
src/pages/blog.astro Normal file
View File

@@ -0,0 +1,10 @@
---
import Layout from "../layouts/Layout.astro";
---
<Layout
title="Blog"
description="This is my personal website with my projects, docs and other useful stuff."
>
<main>Blog</main>
</Layout>

10
src/pages/docs.astro Normal file
View File

@@ -0,0 +1,10 @@
---
import Layout from "../layouts/Layout.astro";
---
<Layout
title="Docs"
description="This is my personal website with my projects, docs and other useful stuff."
>
<main>Docs</main>
</Layout>

22
src/pages/index.astro
View File

@@ -7,10 +7,20 @@ import "../styles/home.scss";
title="Home"
description="This is my personal website with my projects, docs and other useful stuff."
>
<div class="home-title-box">
<h1 class="home-title" style="font-size: 6.5vw;">vaporvee</h1>
<h2 class="home-title" style="font-size: 2vw; margin-top: -25px;">
Making video games
</h2>
</div>
<main>
<div class="home-title-box">
<h1 class="home-title" style="font-size: 6vw;">vaporvee</h1>
<h2
class="home-title"
style="font-size: 2vw; margin-top: -10px; margin-bottom: 12vh;"
>
Making video games
</h2>
<img
src="/using_engines.svg"
alt="engines I'm using"
width="275px"
/>
</div>
</main>
</Layout>

10
src/pages/projects.astro Normal file
View File

@@ -0,0 +1,10 @@
---
import Layout from "../layouts/Layout.astro";
---
<Layout
title="Projects"
description="This is my personal website with my projects, docs and other useful stuff."
>
<main>Projects</main>
</Layout>

10
src/pages/tutorials.astro Normal file
View File

@@ -0,0 +1,10 @@
---
import Layout from "../layouts/Layout.astro";
---
<Layout
title="Tutorials"
description="This is my personal website with my projects, docs and other useful stuff."
>
<main>Tutorials</main>
</Layout>

18
src/styles/home.scss
View File

@@ -1,11 +1,23 @@
.home-title-box {
margin-top: 16.6vh;
margin-left: 11.3vw;
padding-top: 10vh;
margin-left: 10vw;
}
.home-title {
margin: 0;
color: #FFF;
font-family: "Tanker-Regular";
font-size: 128px;
}
main {
background-image: url("/diagonal_lines_home.png");
height: 75vh;
margin-left: -1vw;
margin-bottom: 13vh;
width: 100.4vw;
flex-shrink: 0;
}
.using-engines {
display: inline-flex;
}

1
src/styles/main.scss
View File

@@ -7,6 +7,7 @@
body {
background-color: $primary;
font-family: "Satoshi-Regular", "Arial";
font-size: 16px;
}
h1 {