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

improved design and made responsive

Browse Source
This commit is contained in:
Yannik
2024-07-12 19:34:22 +02:00
parent 3271920179
commit e25e4b5740
18 changed files with 236 additions and 17050 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/Navbar.astro
View File

@@ -1,15 +1,18 @@
---
const routes = {
Home: "/",
//Projects: "/projects",
//Skills: "/skills",
Blog: "/blog",
Docs: "https://docs.vaporvee.com/",
};
import "../styles/navbar.scss";
import Logo from "../../public/favicon.svg?raw";
import { Icon } from "astro-icon/components";
---
<header>
<nav>
<a href="/"><img class="logo" src="/favicon.svg" alt="Logo Icon" /></a>
<a class="logo" href="/"><Fragment set:html={Logo} /></a>
{
Object.entries(routes).map(([pageName, path]) => {
const isActive =
@@ -31,23 +34,18 @@ import "../styles/navbar.scss";
})
}
</nav>
<div>
<a href="https://github.com/vaporvee" class="social" target="_blank"
><img src="/github-mark.svg" alt="My GitHub account" class="social" /></a
<div class="social">
<a href="https://github.com/vaporvee" target="_blank"
><Icon class="icon" size={25} name="mdi:github" /></a
>
<a href="https://www.linkedin.com/in/yannik-ain/" target="_blank"
><Icon class="icon" size={25} name="mdi:linkedin" /></a
>
<span>|</span>
<a
href="https://www.linkedin.com/in/yannik-ain/"
class="social"
style="font-weight: 700; margin-left: 5px; text-decoration: none; color: white"
target="_blank"
><img
src="/linkedin-icon.svg"
alt="My Linkedin account"
class="social"
/></a
href="https://docs.vaporvee.com/#">Docs</a
>
</div>
</header>
<div class="not-responsive-warning">
This website might not be optimized for your device yet and could look
unexpected. Consider opening this website on a bigger display.
</div>

11
src/pages/blog.astro
View File

@@ -3,8 +3,13 @@ import Layout from "../layouts/Layout.astro";
---
<Layout
title="Blog"
description="This is my personal website with my projects, docs and other useful stuff."
title="Blog"
description="This is my personal website with my projects, docs and other useful stuff."
>
<main><div class="content">Blog (not finished yet)</div></main>
<main>
<div class="content">
<h1>Blog</h1>
<p style="font-size: 20px;">Coming soon! 🚧</p>
</div>
</main>
</Layout>

5
src/pages/docs/discord-rpc-godot copy.astro
View File

@@ -1,5 +0,0 @@
---
import Redirect from "../../layouts/Redirect.astro";
---
<Redirect href="https://docs.vaporvee.com/discord-rpc-godot" />

51
src/pages/index.astro
View File

@@ -1,8 +1,7 @@
---
import Layout from "../layouts/Layout.astro";
import "../styles/home.scss";
const yannikAge = new Date().getFullYear() - 2004; // 31/12/2003
import { Icon } from "astro-icon/components";
---
<Layout
@@ -12,38 +11,32 @@ const yannikAge = new Date().getFullYear() - 2004; // 31/12/2003
<div class="lines">
<div class="home-main-box">
<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
class="using-engines"
src="/using_engines.svg"
alt="engines I'm using"
/>
<h1 class="home-title">vaporvee</h1>
<h2 class="home-title home-subtitle">web & game developer</h2>
<a href="/projects">
<button class="continue"
>To my Projects<Icon
size={35}
class="icon"
name="typcn:arrow-right-outline"
/>
</button>
</a>
</div>
<div class="content">
<div class="avatar portrait"><div class="avatar"></div></div>
<p>
Hello my name is <b>Yannik</b>!<br />
I’m a {yannikAge} year old <b>Game Developer</b> living <b
>in Germany</b
>.<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 learn 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 <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
> ;)
I’m a <b> web and game developer</b> living <b>in Germany</b>.<br />
<br /><br />
My primary tools: React, Vue, TypeScript, Godot Engine's GDScript, Golang.
<br />
While I have some preferred tools, I always choose the best one for the
job, even if it's not on my usual list. My goal is to find the right solution
for each project.
<br />
Beyond coding I'm passionate about design, making games / stories, music
and cooking.
</p>
</div>
</div>

29
src/pages/projects.astro
View File

@@ -2,9 +2,32 @@
import Layout from "../layouts/Layout.astro";
---
<style lang="scss">
@import "../styles/_var.scss";
.content {
padding: 20px;
margin: 20px;
max-width: 40vw;
transition: border-color 0.3s;
&:hover {
border-color: $link;
}
}
h1 {
margin-bottom: 40px;
}
</style>
<Layout
title="Projects"
description="This is my personal website with my projects, docs and other useful stuff."
title="Projects"
description="This is my personal website with my projects, docs and other useful stuff."
>
<main><div class="content">Projects (not finished yet)</div></main>
<main>
<div>
<h1 style="text-align: center;">Projects</h1>
<div class="content"><h2>voicenext</h2></div>
<div class="content"><h2>SmartCustomerAI</h2></div>
<div class="content"><h2>DiscordRPC Godot Plugin</h2></div>
<div class="content"><h2>acecore</h2></div>
</div>
</main>
</Layout>

15
src/pages/skills.astro Normal file
View File

@@ -0,0 +1,15 @@
---
import Layout from "../layouts/Layout.astro";
---
<Layout
title="Skills"
description="This is my personal website with my projects, docs and other useful stuff."
>
<main>
<div class="content">
<h1>Skills</h1>
<p style="font-size: 20px;">Coming soon! 🚧</p>
</div>
</main>
</Layout>

10
src/pages/tutorials.astro
View File

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

8
src/styles/_var.scss
View File

@@ -22,7 +22,11 @@
font-style: normal;
}
$primary: #1c1427;
$primary: #1C1B20;
$secondary: #5f5d630f;
$highlight: #332f3c;
$accent: #7eca9c;
$link: #ccffbd;
$highlight-primary: #40394a;
$responsive-width: 1226px;
$responsive-width-secondary: 750px;

125
src/styles/home.scss
View File

@@ -1,21 +1,24 @@
@import "./_var.scss";
main {
display: unset;
flex-direction: unset;
align-items: unset;
max-width: 100%;
}
.lines {
background-color: #1c1427;
background-color: $secondary;
background-image:
repeating-linear-gradient(
-45deg,
transparent,
transparent 2rem,
#1e162a 2rem,
#1e162a 4rem
$primary 2rem,
$primary 4rem
);
background-size: 100vw 99.3vh;
animation: barberpole 8s linear infinite;
animation: barberpole 11s linear infinite;
background-repeat: repeat;
min-height: 75vh;
padding-inline: 10vw;
@@ -24,7 +27,6 @@ main {
justify-content: space-evenly;
.home-main-box {
padding-block: 7vh;
display: flex;
justify-content: space-between;
align-items: center;
@@ -33,9 +35,8 @@ main {
.home-title-box {
justify-self: flex-start;
margin-right: 5vw;
h1 {
font-size: 72px;
font-size: 110px;
color: #e6e6e6;
background: linear-gradient(to right, #e6e6e6 0, white 8%, #e6e6e6 16%);
background-position: 0;
@@ -48,15 +49,34 @@ main {
animation-fill-mode: forwards;
text-size-adjust: none;
}
h2{
font-size: 35px;
}
.home-title {
margin: 0;
color: #fff;
font-family: "Tanker-Regular", "Arial";
}
.using-engines {
width: 21vw;
.continue {
margin-top: 100px;
padding: 15px 50px;
font-size: 22px;
&:hover{
svg{
transition: margin-left 0.2s;
margin-left: 30px !important;
}
&{
transition: padding-right 0.2s;
padding-right: 38px;
cursor: pointer;
}
}
.icon{
margin-left:18px;
margin-bottom:-9px;
}
}
}
}
@@ -65,24 +85,25 @@ main {
justify-self: flex-end;
margin: 0;
margin-top: 2vh;
max-width: 500px;
max-width: 528px;
&p {
z-index: 2;
}
.avatar {
position: absolute;
box-shadow: 0px 4px 4px 0px #00000040;
top: 0%;
right: 0%;
width: 4vw;
height: 4vw;
border-radius: 2.5vw;
width: 80px;
height: 80px;
border-radius: 40px;
background-size: cover;
transition: opacity 0.5s linear;
background-image: url("/img/avatar.webp");
z-index: 1;
&.portrait {
top: 5%;
right: 5%;
top: 11%;
right: 10%;
background-image: url("/img/portrait.webp");
&:hover {
opacity: 100;
@@ -90,11 +111,81 @@ main {
}
&:hover {
opacity: 0;
box-shadow: none;
}
}
}
}
@media (max-width: $responsive-width) {
.icon{
margin-left:18px;
margin-bottom:-11px;
}
.lines {
flex-direction: column;
.home-main-box {
flex-direction: column;
align-items: center;
.home-title-box {
margin-right: 0;
margin-bottom: 2vh;
text-align: center;
h1 {
font-size: 75px;
}
h2 {
font-size: 25px;
}
.continue {
margin-top: 20px;
padding: 10px 30px;
padding-bottom: 15px;
font-size: 18px;
&:hover{
svg{
transition: margin-left 0.2s;
margin-left: 30px !important;
}
&{
transition: padding-right 0.2s;
padding-right: 18px;
cursor: pointer;
}
}
}
}
.content {
margin-top: 10px;
margin-bottom: 20px;
justify-self: center;
}
}
}
.lines{
margin-bottom: 50px;
}
}
@media (max-width: $responsive-width-secondary){
.avatar {
&.portrait {
left: 50%;
transform: translate(-50%, 0);
right: 0 !important;
top: 5% !important;
}
}
.content {
p{
margin-top: 120px;
}
}
}
@keyframes shine {
0% {
background-position: -200px;
@@ -108,4 +199,4 @@ main {
100% {
background-position: 100% 100%;
}
}
}

33
src/styles/main.scss
View File

@@ -34,9 +34,9 @@ main {
flex-direction: column;
position: relative;
align-self: center;
background-color: $highlight-primary;
background-color: $highlight;
border-radius: 25px;
border: 1px solid lighten($highlight-primary, 12%);
border: 1px solid lighten($highlight, 12%);
box-shadow: 0px 4px 4px 0px #00000040;
padding: 2vw;
width: 65vw;
@@ -84,10 +84,6 @@ a {
mask: $external_svg no-repeat center;
background-color: $link; // This will color the SVG
}
&.social::after {
content: none;
display: unset;
}
}
figure {
@@ -120,13 +116,15 @@ figure {
}
}
}
position: relative;
overflow: scroll;
display: grid;
margin: 0;
max-width: 50vw;
background-color: #282a36;
border-radius: 20px;
& {
position: relative;
overflow: scroll;
display: grid;
margin: 0;
max-width: 50vw;
background-color: #282a36;
border-radius: 20px;
}
.frame.is-terminal .header::before {
background-color: gray !important;
}
@@ -161,8 +159,7 @@ button {
$button-color: #42b971;
padding-block: 10px;
padding-inline: 20px;
margin: 10px;
border-radius: 25px;
border-radius: 50px;
font-family: "Satoshi-Bold";
background-color: $button-color;
border: 1px solid lighten($button-color, 12%);
@@ -179,4 +176,10 @@ button {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@media (max-width: $responsive-width) {
.content{
min-width: 65vw !important;
}
}

32
src/styles/navbar.scss
View File

@@ -28,7 +28,7 @@ header {
color: lighten($accent,30);
text-decoration: none;
text-align: center;
margin-inline: .9vw;
margin-inline: 8px;
transition: color 0.5s;
font-family: "Satoshi-Bold";
&:hover{
@@ -48,19 +48,21 @@ header {
}
.social {
width: 22px;
margin-inline: .2vw;
}
}
.not-responsive-warning{
display: none;
}
@media (max-width: 1000px){
.not-responsive-warning{
display: flex;
font-family: "Satoshi-Bold";
padding-bottom: 10px;
margin-top: -15px;
a{
color: white;
transition: color 0.5s;
.icon{
margin: 0;
margin-bottom: -5px;
}
&:hover{
color: $accent !important;
}
&[target="_blank"]::after {
content: none;
display: unset;
}
}
}
}