finished navbar and continued home
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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
10
src/pages/blog.astro
Normal 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
10
src/pages/docs.astro
Normal 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>
|
||||
@@ -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
10
src/pages/projects.astro
Normal 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
10
src/pages/tutorials.astro
Normal 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>
|
||||
@@ -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;
|
||||
}
|
||||
@@ -7,6 +7,7 @@
|
||||
body {
|
||||
background-color: $primary;
|
||||
font-family: "Satoshi-Regular", "Arial";
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
||||
Reference in New Issue
Block a user