improved design and made responsive

src/pages/blog.astro

@@ -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>

src/pages/docs/discord-rpc-godot copy.astro

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

src/pages/index.astro

@@ -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>

src/pages/projects.astro

@@ -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>

src/pages/skills.astro

@@ -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>

src/pages/tutorials.astro

@@ -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>