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

finished the homepage but not responsive yet

Browse Source
This commit is contained in:
Yannik
2024-02-01 08:48:33 +01:00
parent c6b0eb7654
commit 3af8228c2a
7 changed files with 52 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/Footer.astro Normal file
View File

@@ -0,0 +1,14 @@
---
const year = new Date().getFullYear();
---
<footer>&copy vaporvee 2021-{year}</footer>
<style lang="scss">
footer {
display: inline-flexbox;
align-items: center;
text-align: center;
margin-top: -7vh;
}
</style>

18
src/components/Navbar.astro
View File

@@ -9,8 +9,8 @@ const routes = {
---
<header>
<img class="logo" src="/favicon.svg" alt="Logo Icon" />
<nav>
<a href="/"><img class="logo" src="/favicon.svg" alt="Logo Icon" /></a>
{
Object.entries(routes).map(([pageName, path]) => {
const isActive =
@@ -33,13 +33,19 @@ const routes = {
})
}
</nav>
<a href="https://github.com/vaporvee"
><img
src="/github-mark.svg"
alt="My GitHub account"
class="github"
/></a
>
</header>
<style lang="scss">
nav {
margin-left: 2.5vw;
justify-self: flex-start;
display: flex;
justify-content: center;
}
.navbar-entry {
display: flex;
@@ -52,11 +58,13 @@ const routes = {
header {
padding-top: 2.5vh;
padding-bottom: 2.5vh;
display: inline-flex;
margin-inline: 2.5vw;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
margin-left: 2.3vw;
margin-right: 2.5vw;
width: 40px;
}
a {

2
src/layouts/Layout.astro
View File

@@ -9,6 +9,7 @@ const { description } = Astro.props;
import "../styles/main.scss";
import Navbar from "../components/Navbar.astro";
import Footer from "../components/Footer.astro";
import { ViewTransitions } from "astro:transitions";
---
@@ -27,5 +28,6 @@ import { ViewTransitions } from "astro:transitions";
<body>
<Navbar />
<slot />
<Footer />
</body>
</html>

12
src/pages/index.astro
View File

@@ -32,11 +32,13 @@ import "../styles/home.scss";
game developement.<br />
Currently i already work at a game studio and i also have my own
game side projects and tools.<br />
This website will mostly have docs, tutorials, and showcasing of
my projects.<br />
Maybe also some other stuff all around the creative process of game
developement or completely unrelated stuff like cooking recepies
;)
This website will mostly have <a href="/docs">docs</a>,
<a href="/tutorials">tutorials</a>, and showcasing of my
<a href="/projects">projects</a>. Maybe also some other stuff
all around the creative process of game developement or
completely unrelated stuff like cooking recepies in my <a
href="/blog">blog</a
> ;)
</p>
</div>
</main>

2
src/styles/home.scss
View File

@@ -11,7 +11,7 @@
main {
background-image: url("/diagonal_lines_home.png");
height: 75vh;
height: 73vh;
margin-left: -1vw;
margin-bottom: 13vh;
width: 90.4vw;

6
src/styles/main.scss
View File

@@ -24,10 +24,14 @@ h1 {
justify-content: center;
align-items: center;
flex-shrink: 0;
margin: 5vw;
margin: 4vw;
}
b {
font-family: "Satoshi-Bold";
color: $accent;
}
a {
color: $link;
}