finished the homepage but not responsive yet
This commit is contained in:
10
public/github-mark.svg
Normal file
10
public/github-mark.svg
Normal file
@@ -0,0 +1,10 @@
|
||||
<svg width="34" height="33" viewBox="0 0 34 33" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_7_111)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.9493 0C7.5768 0 0 7.5625 0 16.9183C0 24.397 4.85471 30.7275 11.5895 32.968C12.4315 33.1365 12.7399 32.604 12.7399 32.1561C12.7399 31.7639 12.7122 30.4195 12.7122 29.0187C7.99728 30.0273 7.01545 27.0019 7.01545 27.0019C6.25773 25.0412 5.13504 24.5372 5.13504 24.5372C3.59186 23.5008 5.24745 23.5008 5.24745 23.5008C6.95924 23.6129 7.85747 25.2374 7.85747 25.2374C9.37255 27.8142 11.814 27.0861 12.7961 26.6379C12.9363 25.5454 13.3856 24.7892 13.8626 24.3691C10.1022 23.9769 6.14567 22.5204 6.14567 16.0218C6.14567 14.1732 6.81873 12.6607 7.88522 11.4843C7.71696 11.0643 7.12751 9.32731 8.05384 7.00253C8.05384 7.00253 9.48496 6.55428 12.7118 8.73916C14.0934 8.36882 15.5181 8.18043 16.9493 8.17884C18.3805 8.17884 19.8393 8.37512 21.1865 8.73916C24.4137 6.55428 25.8449 7.00253 25.8449 7.00253C26.7712 9.32731 26.1814 11.0643 26.0131 11.4843C27.1077 12.6607 27.753 14.1732 27.753 16.0218C27.753 22.5204 23.7965 23.9487 20.008 24.3691C20.6255 24.9012 21.1584 25.9095 21.1584 27.5062C21.1584 29.7749 21.1307 31.5958 21.1307 32.1558C21.1307 32.604 21.4394 33.1365 22.2811 32.9684C29.0159 30.7271 33.8706 24.397 33.8706 16.9183C33.8983 7.5625 26.2938 0 16.9493 0Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_7_111">
|
||||
<rect width="34" height="33" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
14
src/components/Footer.astro
Normal file
14
src/components/Footer.astro
Normal file
@@ -0,0 +1,14 @@
|
||||
---
|
||||
const year = new Date().getFullYear();
|
||||
---
|
||||
|
||||
<footer>© vaporvee 2021-{year}</footer>
|
||||
|
||||
<style lang="scss">
|
||||
footer {
|
||||
display: inline-flexbox;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
margin-top: -7vh;
|
||||
}
|
||||
</style>
|
||||
@@ -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 {
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user