improved design and made responsive
This commit is contained in:
@@ -1,7 +1,6 @@
|
||||
import { defineConfig } from "astro/config";
|
||||
import minify from "astro-min";
|
||||
import metaTags from "astro-meta-tags";
|
||||
import codeTheme from "./src/styles/moonlight-ii.json";
|
||||
import mdx from "@astrojs/mdx";
|
||||
import lighthouse from "astro-lighthouse";
|
||||
import icon from "astro-icon";
|
||||
|
||||
10579
package-lock.json
generated
10579
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -13,6 +13,7 @@
|
||||
"@astrojs/markdown-remark": "^4.2.1",
|
||||
"@astrojs/mdx": "^2.1.1",
|
||||
"@expressive-code/plugin-shiki": "^0.32.4",
|
||||
"@iconify-json/typcn": "^1.1.9",
|
||||
"@microflash/remark-callout-directives": "^2.0.0",
|
||||
"astro": "^4.2.6",
|
||||
"astro-expressive-code": "^0.32.4",
|
||||
@@ -32,7 +33,7 @@
|
||||
"unist-util-visit": "^5.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@iconify-json/mdi": "^1.1.64"
|
||||
"@iconify-json/mdi": "^1.1.67"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@esbuild/linux-x64": "^0.20.0",
|
||||
|
||||
@@ -1,10 +0,0 @@
|
||||
<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>
|
||||
|
Before Width: | Height: | Size: 1.4 KiB |
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 512 512"><path fill="#fff" d="M474.919 0H38.592C17.72 0 0 16.504 0 36.841V475.14C0 495.496 11.629 512 32.492 512h436.327C489.718 512 512 495.496 512 475.14V36.841C512 16.504 495.809 0 474.919 0zM195.043 195.043h68.928v35.136h.755c10.505-18.945 41.541-38.177 79.921-38.177 73.655 0 94.214 39.108 94.214 111.538v135.321h-73.148V316.883c0-32.427-12.947-60.883-43.227-60.883-36.768 0-54.295 24.889-54.295 65.758v117.103h-73.148V195.043zM73.139 438.861h73.148V195.043H73.139v243.818zm82.289-329.148c0 25.258-20.457 45.715-45.715 45.715-25.258 0-45.715-20.457-45.715-45.715 0-25.258 20.457-45.715 45.715-45.715 25.258 0 45.715 20.457 45.715 45.715z"/></svg>
|
||||
|
Before Width: | Height: | Size: 851 B |
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
import Redirect from "../../layouts/Redirect.astro";
|
||||
---
|
||||
|
||||
<Redirect href="https://docs.vaporvee.com/discord-rpc-godot" />
|
||||
@@ -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>
|
||||
|
||||
@@ -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
15
src/pages/skills.astro
Normal 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>
|
||||
@@ -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>
|
||||
@@ -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;
|
||||
@@ -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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user