diff --git a/src/components/hero.astro b/src/components/hero.astro
deleted file mode 100644
index 2db02da..0000000
--- a/src/components/hero.astro
+++ /dev/null
@@ -1,59 +0,0 @@
----
-import ContactBar from "./contact-bar.astro";
-import PortraitContainer from "./portrait-container.astro";
----
-
-<figure id="hero" class="container">
-    <PortraitContainer />
-    <div id="hero-text-container">
-        <h1>Jakub Gustafik</h1>
-        <span class="faded">Student & software developer based in Slovakia</span>
-        <ContactBar />
-    </div>
-</figure>
-
-<style>
-#hero {
-    display: flex;
-    align-items: center;
-    flex-direction: row;
-    gap: 3rem;
-    padding: 2rem 3rem;
-}
-
-#hero-text-container {
-    display: flex;
-    flex-direction: column;
-}
-
-@media (max-width: 1000px) {
-    #hero {
-        gap: 2rem;
-        padding: 1rem 1.5rem;
-    }
-}
-
-@media (max-width: 500px) {
-    #hero {
-        flex-direction: column;
-        border: none;
-    }
-
-    #hero-text-container {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: 1rem;
-    }
-}
-
-#hero h1 {
-    font-size: 2.25rem;
-    font-weight: 600;
-}
-
-#hero span {
-    font-size: 1.25rem;
-    margin-bottom: 0.6rem;
-}
-</style>
diff --git a/src/components/picker.astro b/src/components/picker.astro
deleted file mode 100644
index 572e87d..0000000
--- a/src/components/picker.astro
+++ /dev/null
@@ -1,61 +0,0 @@
----
----
-
-<figure class="container">
-    <div class="content-selector-container">
-        <button class="content-selector active" id="tab-1">About me</button>
-        <button class="content-selector" id="tab-2">Projects</button>
-        <button class="content-selector" id="tab-3">Blog</button>
-    </div>
-    <div class="select-indicator">
-</figure>
-
-<script>
-    const buttons = document.getElementsByClassName("content-selector");
-    // I hate Typescript
-    const selector = Array.from(document.getElementsByClassName("select-indicator") as HTMLCollectionOf<HTMLElement>)[0];
-
-    for (let i = 0; i < buttons.length; i++) {
-        const button = buttons[i];
-        button.addEventListener("click", () => {
-            selector.style.transform = `translateX(${i * 100}%`;
-            for (let j = 0; j < buttons.length; j++) {
-                buttons[j].classList.remove("active");
-            }
-            button.classList.add("active");
-        });
-    }
-</script>
-
-<style>
-    figure {
-        position: relative;
-    }
-
-    .content-selector-container {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-evenly;
-    }
-
-    button.content-selector {
-        background-color: transparent;
-        padding: 0.6rem;
-        font-weight: 700;
-        width: 100%;
-        border-radius: 12px;
-        z-index: 1;
-    }
-
-    .select-indicator {
-        position: absolute;
-        width: 33.333%;
-        height: 100%;
-        background-color: var(--secondary-background-dark);
-        border-radius: 12px;
-        transition: all 0.15s ease-out;
-        top: 0;
-        left: 0;
-        z-index: 0;
-    }
-</style>
diff --git a/src/components/portrait-container.astro b/src/components/portrait-container.astro
deleted file mode 100644
index 361425d..0000000
--- a/src/components/portrait-container.astro
+++ /dev/null
@@ -1,14 +0,0 @@
-<div id="portrait-container">
-    <img src="/images/linkedin-portrait.jpg" alt="" id="portrait"/>
-</div>
-
-<style>
-#portrait {
-    width: clamp(120px, 15vw, 140px);
-    height: clamp(120px, 15vw, 140px);
-    background-color: var(--secondary-background-dark);
-
-    border: 4px solid var(--primary-accent-dark);
-    border-radius: 50%;
-}
-</style>
diff --git a/src/data/projects.js b/src/data/projects.js
index 600ce13..cd6c2bd 100644
--- a/src/data/projects.js
+++ b/src/data/projects.js
@@ -81,7 +81,7 @@ export default [
         github: "https://github.com/kubgus/stratus-cli",
     },
     {
-        title: "untitled-game-engine",
+        title: "untitled game engine",
         description: "SDL2 game engine made with C++.",
         github: "https://github.com/kubgus/untitled-game-engine",
     },
diff --git a/src/layouts/blog-navbar.astro b/src/layouts/blog-navbar.astro
index 3b83ae5..eb45c19 100644
--- a/src/layouts/blog-navbar.astro
+++ b/src/layouts/blog-navbar.astro
@@ -1,5 +1,5 @@
 ---
-import FixedNavbarLayout from "./fixed-navbar.astro";
+import NavbarLayout from "./navbar.astro";
 
 import "../styles/default-padding.css";
 import "../styles/article.css";
@@ -10,9 +10,8 @@ const title = `${frontmatter.title} | ${frontmatter.author}` || "Jakub Gustafik"
 const dateString = new Date(frontmatter.date).toLocaleString("en-US", { month: "long", day: "numeric", year: "numeric" });
 ---
 
-<FixedNavbarLayout title={title}>
-<main>
-    <section class="article-header">
+<NavbarLayout title={title} meta={[]} fixed={true}>
+    <header>
         <h1>{frontmatter.title}</h1>
         <p id="article-description">{frontmatter.description}</p>
         <div id="article-info" class="faded">
@@ -20,10 +19,9 @@ const dateString = new Date(frontmatter.date).toLocaleString("en-US", { month: "
             <p>|</p>
             <p>{frontmatter.author}</p>
         </div>
-    </section>
+    </header>
     <slot />
-</main>
-</FixedNavbarLayout>
+</NavbarLayout>
 
 <style>
     main {
@@ -42,13 +40,13 @@ const dateString = new Date(frontmatter.date).toLocaleString("en-US", { month: "
         }
     }
 
-    .article-header {
+   header {
         border-bottom: 1px solid var(--secondary-background-dark);
 
         padding-bottom: 2.5rem;
     }
 
-    .article-header h1 {
+    header h1 {
         font-size: 3rem;
         font-weight: 600;
     }
diff --git a/src/layouts/core.astro b/src/layouts/core.astro
index 609aae8..4e99c17 100644
--- a/src/layouts/core.astro
+++ b/src/layouts/core.astro
@@ -38,11 +38,11 @@ const { title, meta } = Astro.props || {
         --complementary-accent-dark-3: #54bc70
     }
 
-* {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-}
+    * {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+    }
 
     ::selection {
         background-color: var(--primary-accent-dark);
diff --git a/src/layouts/fixed-navbar.astro b/src/layouts/fixed-navbar.astro
deleted file mode 100644
index 7d9a6f0..0000000
--- a/src/layouts/fixed-navbar.astro
+++ /dev/null
@@ -1,12 +0,0 @@
----
-import NavbarLayout from "./navbar.astro";
-
-const { title, meta } = Astro.props || {
-    title: "Jakub Gustafik",
-    meta: [],
-}
----
-
-<NavbarLayout title={title} meta={meta} fixed={true}>
-    <slot />
-</NavbarLayout>
diff --git a/src/layouts/navbar.astro b/src/layouts/navbar.astro
index 03afb72..f8b5456 100644
--- a/src/layouts/navbar.astro
+++ b/src/layouts/navbar.astro
@@ -1,5 +1,6 @@
 ---
 import CoreLayout from "../layouts/core.astro";
+
 import ContactBar from "../components/contact-bar.astro";
 
 const { title, meta } = Astro.props || {
@@ -10,6 +11,32 @@ const { title, meta } = Astro.props || {
 const { fixed } = Astro.props;
 ---
 
+<CoreLayout title={title} meta={meta}>
+<header class={fixed ? "scrolled" : ""}>
+    <figure><a href="/" class="implied">Jakub Gustafik</a></figure>
+    <ContactBar />
+</header>
+
+<slot />
+</CoreLayout>
+
+<script define:vars={{ fixed }} is:inline>
+    if (!fixed) {
+        const header = document.querySelector("header");
+
+        const updateHeader = () => {
+            if (window.scrollY > 200) {
+                header?.classList.add("scrolled");
+            } else {
+                header?.classList.remove("scrolled");
+            }
+        }
+
+        updateHeader();
+        document.addEventListener("scroll", updateHeader);
+    }
+</script>
+
 <style>
     header {
         position: fixed;
@@ -62,13 +89,3 @@ const { fixed } = Astro.props;
         font-size: 1rem;
     }
 </style>
-
-<CoreLayout title={title} meta={meta}>
-    <header class={fixed ? "scrolled" : ""}>
-        <figure><a href="/" class="implied">Jakub Gustafik</a></figure>
-        <nav>
-            <ContactBar />
-        </nav>
-    </header>
-    <slot />
-</CoreLayout>
diff --git a/src/layouts/retracting-navbar.astro b/src/layouts/retracting-navbar.astro
deleted file mode 100644
index fea5f65..0000000
--- a/src/layouts/retracting-navbar.astro
+++ /dev/null
@@ -1,27 +0,0 @@
----
-import NavbarLayout from "../layouts/navbar.astro";
-
-const { title, meta } = Astro.props || {
-    title: "Jakub Gustafik",
-    meta: [],
-}
----
-
-<NavbarLayout title={title} meta={meta}>
-    <slot />
-</NavbarLayout>
-
-<script>
-    const header = document.querySelector("header");
-
-    const updateHeader = () => {
-        if (window.scrollY > 200) {
-            header?.classList.add("scrolled");
-        } else {
-            header?.classList.remove("scrolled");
-        }
-    }
-
-    updateHeader();
-    document.addEventListener("scroll", updateHeader);
-</script>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index ceb08ec..36ba09a 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,7 +1,7 @@
 ---
-import RetractingNavbarLayout from "../layouts/retracting-navbar.astro";
-import Hero from "../components/hero.astro";
-import Picker from "../components/picker.astro";
+import NavbarLayout from "../layouts/navbar.astro";
+
+import ContactBar from "../components/contact-bar.astro";
 
 import AboutMe from "../components/content/about-me.astro";
 import Projects from "../components/content/projects.vue";
@@ -14,64 +14,182 @@ import projects from "../data/projects.js";
 const title = "Jakub Gustafik";
 ---
 
-<RetractingNavbarLayout title={title}>
-    <main>
-        <Hero />
-        <Picker />
+<NavbarLayout title={title} meta={[]}>
+    <header class="container">
+        <img src="/images/linkedin-portrait.jpg" alt="" id="portrait"/>
+        <figure>
+            <h1>Jakub Gustafik</h1>
+            <span class="faded">Student & software developer based in Slovakia</span>
+            <ContactBar />
+        </figure>
+    </header>
+
+    <section id="picker" class="container">
+        <div class="content-selector-container">
+            <button class="content-selector active" id="tab-1">About me</button>
+            <button class="content-selector" id="tab-2">Projects</button>
+            <button class="content-selector" id="tab-3">Blog</button>
+        </div>
+        <div class="select-indicator">
+    </section>
+
+    <main class="container">
+        <article class="content" id="content-1">
+            <AboutMe />
+        </article>
+
+        <article class="content" id="content-2">
+            <Projects client:only="vue" projects={projects} />
+        </article>
+
+        <article class="content" id="content-3">
+            <Blog />
+        </article>
+    </main>
+
+    <footer>
+        <span id="license">©2024 Jakub Gustafik</span>
+    </footer>
+</NavbarLayout>
+
+<script>
+    const buttons = document.getElementsByClassName("content-selector");
+    // I hate Typescript
+    const selector = Array.from(document.getElementsByClassName("select-indicator") as HTMLCollectionOf<HTMLElement>)[0];
+
+    for (let i = 0; i < buttons.length; i++) {
+        const button = buttons[i];
+        button.addEventListener("click", () => {
+            selector.style.transform = `translateX(${i * 100}%`;
+            for (let j = 0; j < buttons.length; j++) {
+                buttons[j].classList.remove("active");
+            }
+            button.classList.add("active");
+        });
+    }
+</script>
+
+<style>
+    header {
+        display: flex;
+        align-items: center;
+        flex-direction: row;
+        gap: 3rem;
 
-        <section class="container">
-            <article class="content" id="content-1">
-                <AboutMe />
-            </article>
+        padding: 2rem 3rem;
+    }
 
-            <article class="content" id="content-2">
-                <Projects client:only="vue" projects={projects} />
-            </article>
+    header > img {
+        width: clamp(120px, 15vw, 140px);
+        height: clamp(120px, 15vw, 140px);
 
-            <article class="content" id="content-3">
-                <Blog />
-            </article>
-        </section>
+        background-color: var(--secondary-background-dark);
 
-        <span id="license">©2024 Jakub Gustafik</span>
-    </main>
-</RetractingNavbarLayout>
+        border: 4px solid var(--primary-accent-dark);
+        border-radius: 50%;
+    }
+
+    header > figure {
+        display: flex;
+        flex-direction: column;
+    }
+
+    header > figure h1 {
+        font-size: 2.25rem;
+        font-weight: 600;
+    }
+
+    header > figure span {
+        font-size: 1.25rem;
+        margin-bottom: 0.6rem;
+    }
+
+    @media (max-width: 1000px) {
+        header {
+            gap: 2rem;
+            padding: 1rem 1.5rem;
+        }
+    }
 
-<style>
     @media (max-width: 500px) {
-        main {
-            text-align: center;
+        header {
+            flex-direction: column;
+            border: none;
         }
+
+        header figure {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 1rem;
+        }
+    }
+
+    #picker {
+        position: relative;
+    }
+
+    #picker .content-selector-container {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-evenly;
+    }
+
+    #picker button.content-selector {
+        background-color: transparent;
+        padding: 0.6rem;
+        font-weight: 700;
+        width: 100%;
+        border-radius: 12px;
+        z-index: 1;
+    }
+
+    #picker .select-indicator {
+        position: absolute;
+        width: 33.333%;
+        height: 100%;
+        background-color: var(--secondary-background-dark);
+        border-radius: 12px;
+        transition: all 0.15s ease-out;
+        top: 0;
+        left: 0;
+        z-index: 0;
     }
 
-    .container {
+    article {
         padding: 2.3rem 3rem;
         text-align: left !important;
     }
 
     @media (max-width: 1000px) {
-        .container {
+        article {
             padding: 1rem 1.5rem;
         }
     }
 
-    .content {
-        display: none;
+    footer {
+        text-align: center;
+        color: var(--secondary-background-dark);
+    }
+</style>
+
+<style is:global>
+    @media (max-width: 500px) {
+        body {
+            text-align: center;
+        }
     }
 
-    main:has(#tab-1.active) #content-1,
-    main:has(#tab-2.active) #content-2,
-    main:has(#tab-3.active) #content-3 {
+    body:has(#tab-1.active) #content-1,
+    body:has(#tab-2.active) #content-2,
+    body:has(#tab-3.active) #content-3 {
         display: block;
     }
 
-    #license {
-        text-align: center;
-        color: var(--secondary-background-dark);
+    .content {
+        display: none;
     }
-</style>
 
-<style is:global>
     .content-inner {
         display: flex;
         flex-direction: column;
diff --git a/src/styles/default-padding.css b/src/styles/default-padding.css
index 5c226f7..f1238f9 100644
--- a/src/styles/default-padding.css
+++ b/src/styles/default-padding.css
@@ -1,4 +1,4 @@
-main {
+body {
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -8,19 +8,19 @@ main {
 }
 
 @media (max-width: 1420px) {
-    main {
+    body {
         padding-inline: 10vw;
     }
 }
 
 @media (max-width: 768px) {
-    main {
+    body {
         padding: 6rem 5vw;
     }
 }
 
 @media (max-width: 480px) {
-    main {
+    body {
         padding: 6rem 3vw;
     }
 }