lean more into transitions and animations

package-lock.json

@@ -28,7 +28,6 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
       "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
-      "peer": true,
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.5",
         "@jridgewell/trace-mapping": "^0.3.24"
@@ -444,6 +443,7 @@
       "version": "7.28.4",
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.4.tgz",
       "integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.3",
@@ -2203,6 +2203,7 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-3.1.2.tgz",
       "integrity": "sha512-Txsm1tJvtiYeLUVRNqxZGKR/mI+CzuIQuc2gn+YCs9rMTowpNZ2Nqt53JdL8KF9bLhAf2ruR/dr9eZCwdTriRA==",
+      "peer": true,
       "dependencies": {
         "@sveltejs/vite-plugin-svelte-inspector": "^2.1.0",
         "debug": "^4.3.4",
@@ -2352,6 +2353,7 @@
       "version": "8.15.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2468,6 +2470,7 @@
       "version": "4.16.19",
       "resolved": "https://registry.npmjs.org/astro/-/astro-4.16.19.tgz",
       "integrity": "sha512-baeSswPC5ZYvhGDoj25L2FuzKRWMgx105FetOPQVJFMCAp0o08OonYC7AhwsFdhvp7GapqjnC1Fe3lKb2lupYw==",
+      "peer": true,
       "dependencies": {
         "@astrojs/compiler": "^2.10.3",
         "@astrojs/internal-helpers": "0.4.1",
@@ -3027,6 +3030,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.3",
         "caniuse-lite": "^1.0.30001741",
@@ -3203,7 +3207,6 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/code-red/-/code-red-1.0.4.tgz",
       "integrity": "sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==",
-      "peer": true,
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.4.15",
         "@types/estree": "^1.0.1",
@@ -3293,7 +3296,6 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
       "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
-      "peer": true,
       "dependencies": {
         "mdn-data": "2.0.30",
         "source-map-js": "^1.0.1"
@@ -4358,7 +4360,6 @@
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.3.tgz",
       "integrity": "sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==",
-      "peer": true,
       "dependencies": {
         "@types/estree": "^1.0.6"
       }
@@ -4487,8 +4488,7 @@
     "node_modules/locate-character": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
-      "integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
+      "integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA=="
-      "peer": true
     },
     "node_modules/locate-path": {
       "version": "5.0.0",
@@ -4897,8 +4897,7 @@
     "node_modules/mdn-data": {
       "version": "2.0.30",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
-      "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
+      "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA=="
-      "peer": true
     },
     "node_modules/mdurl": {
       "version": "2.0.0",
@@ -5885,7 +5884,6 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/periscopic/-/periscopic-3.1.0.tgz",
       "integrity": "sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==",
-      "peer": true,
       "dependencies": {
         "@types/estree": "^1.0.0",
         "estree-walker": "^3.0.0",
@@ -6687,6 +6685,7 @@
       "version": "4.52.0",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.52.0.tgz",
       "integrity": "sha512-+IuescNkTJQgX7AkIDtITipZdIGcWF0pnVvZTWStiazUmcGA2ag8dfg0urest2XlXUi9kuhfQ+qmdc5Stc3z7g==",
+      "peer": true,
       "dependencies": {
         "@types/estree": "1.0.8"
       },
@@ -6773,6 +6772,7 @@
       "version": "1.93.0",
       "resolved": "https://registry.npmjs.org/sass/-/sass-1.93.0.tgz",
       "integrity": "sha512-CQi5/AzCwiubU3dSqRDJ93RfOfg/hhpW1l6wCIvolmehfwgCI35R/0QDs1+R+Ygrl8jFawwwIojE2w47/mf94A==",
+      "peer": true,
       "dependencies": {
         "chokidar": "^4.0.0",
         "immutable": "^5.0.2",
@@ -7404,6 +7404,7 @@
       "version": "5.4.20",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.20.tgz",
       "integrity": "sha512-j3lYzGC3P+B5Yfy/pfKNgVEg4+UtcIJcVRt2cDjIOmhLourAqPqf8P7acgxeiSgUB7E3p2P8/3gNIgDLpwzs4g==",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.21.3",
         "postcss": "^8.4.43",
@@ -7562,6 +7563,7 @@
       "version": "3.25.76",
       "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
       "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
+      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }

src/components/Header.astro

@@ -2,20 +2,30 @@
 import Logo from './Logo.astro'
 import Nav from './Nav.astro'
 
-const { current = '' } = Astro.props;
+export interface Props {
+    current?: string;
+    showLogo?: boolean;
+}
+
+const {current = '', showLogo = true} = Astro.props;
 ---
+<header>
+    {
+        showLogo && (
+            <Logo width="50" height="50"/>
+        )
+    }
+    <Nav current={current}/>
+</header>
 
 <style>
     header {
         display: flex;
+        justify-content: center;
+        align-items: center;
         margin: 0 auto;
         max-width: var(--wrap);
         padding: 1em;
         width: 100%;
     }
 </style>
-
-<header>
-  <Logo width="50" height="50" />
-  <Nav current={current} />
-</header>

src/components/Logo.astro

@@ -11,6 +11,10 @@ const { width, height } = Astro.props;
 
 <style>
 
+    img {
+        view-transition-name: nav-logo;
+    }
+
   @media screen and (max-width: 520px) {
     img {
       display: none;

src/components/Nav.astro

@@ -1,6 +1,12 @@
 ---
 const { current = '' } = Astro.props;
 ---
+<nav>
+  <div class="nav-buttons">
+    <a data-astro-prefetch class={current === "" ? "selected" : ""} href='/'>home</a>
+    <a data-astro-prefetch class={current === "blog" ? "selected" : ""} href='/blog'>blog</a>
+  </div>
+</nav>
 
 <style>
 
@@ -24,12 +30,14 @@ const { current = '' } = Astro.props;
         font-weight: 700;
         justify-content: flex-end;
         text-transform: uppercase;
+        min-height: 60px;
     }
 
     .nav-buttons {
         display: flex;
         flex-direction: row;
         overflow-x: hidden;
+        gap: 1rem;
     }
 
     a {
@@ -38,7 +46,6 @@ const { current = '' } = Astro.props;
         padding: 10px 5px;
         display: block;
         position: relative;
-    margin-left: 20px;
         min-width: 70px;
         text-align: center;
     }
@@ -72,10 +79,3 @@ const { current = '' } = Astro.props;
         width: 75px;
     }
 </style>
-
-<nav>
-  <div class="nav-buttons">
-    <a data-astro-prefetch class={current === "" ? "selected" : ""} href='/'>home</a>
-    <a data-astro-prefetch class={current === "blog" ? "selected" : ""} href='/blog'>blog</a>
-  </div>
-</nav>

src/layouts/BaseLayout.astro

@@ -8,8 +8,9 @@ export interface Props {
   description: string;
   permalink: string;
   current?: string;
+  showLogo?: boolean;
 }
-const { title, description, permalink, current } = Astro.props;
+const { title, description, permalink, current, showLogo = true } = Astro.props;
 ---
 <html lang="en">
 <head>
@@ -17,7 +18,7 @@ const { title, description, permalink, current } = Astro.props;
 </head>
 <body>
   <div class="layout">
-    <Header current={current} />
+    <Header current={current} showLogo={showLogo} />
 
     <main>
       <slot />

src/pages/about.astro

@@ -10,27 +10,34 @@ const permalink = `${Astro?.site?.href}about`;
     <div class="container">
         <h1>About me</h1>
 
-    <p>My name is <strong>Paweł</strong>, but I'm better known as <strong>YouHaveTrouble</strong> on the internet.</p>
+        <p>My name is <strong>Paweł</strong>, but I'm better known as <strong>YouHaveTrouble</strong> on the internet.
+        </p>
         <p>
             I currently work as a full-stack web developer. Technologies I usually use for my job are javascript, vuejs,
-      typescript, sql. I also often actively research and learn about new technologies that could be used to improve my
+            typescript, sql. I also often actively research and learn about new technologies that could be used to
+            improve my
             work.
         </p>
         <p>
-      In my spare time I develop plugins for minecraft servers. This is a hobby that initially made me learn how to
+            In my spare time I develop plugins for minecraft servers. This is a hobby that initially made me learn how
+            to
             code. To this day I help maintain <a href="https://purpurmc.org">Purpur</a> server software along with its
-      <a href="https://modrinth.com/plugin/purpurextras">official plugin</a>. List of plugins I currently support can be
+            <a href="https://modrinth.com/plugin/purpurextras">official plugin</a>. List of plugins I currently support
+            can be
             found <a href="https://modrinth.com/user/YouHaveTrouble/plugins">here</a>.
         </p>
         <p>
-      My video game interests are mostly focused on narrative heavy games, but I also enjoy some ARPGs and roguelikes.
+            My video game interests are mostly focused on narrative heavy games, but I also enjoy some ARPGs and
-      You can see my full steam library <a href="https://steamcommunity.com/id/YouHaveTrouble/games/?tab=all">here</a>.
+            roguelikes.
+            You can see my full steam library <a
+                href="https://steamcommunity.com/id/YouHaveTrouble/games/?tab=all">here</a>.
             Recommendations from my favourite games would include:
         </p>
         <ul>
             <li><a href="https://store.steampowered.com/app/420530/OneShot/">OneShot</a></li>
             <li><a href="https://store.steampowered.com/app/1150690/OMORI/">OMORI</a></li>
-      <li><a href="https://store.steampowered.com/app/250900/The_Binding_of_Isaac_Rebirth/">The Binding of Isaac: Rebirth</a></li>
+            <li><a href="https://store.steampowered.com/app/250900/The_Binding_of_Isaac_Rebirth/">The Binding of Isaac:
+                Rebirth</a></li>
             <li><a href="https://store.steampowered.com/app/105600/Terraria/">Terraria</a></li>
             <li><a href="https://store.steampowered.com/app/582010/Monster_Hunter_World/">Monster Hunter: World</a></li>
             <li><a href="https://store.steampowered.com/app/238960/Path_of_Exile/">Path of Exile</a></li>
@@ -38,14 +45,19 @@ const permalink = `${Astro?.site?.href}about`;
     </div>
 </BaseLayout>
 
-<style>
+<style lang="scss" scoped>
-ul {
+
+  h1 {
+    view-transition-name: about;
+  }
+
+  ul {
     list-style-type: disc;
     padding-left: 1.5rem;
     margin-block: 0;
-}
+  }
 
-ul li {
+  ul li {
     margin-block: 0;
-}
+  }
 </style>

src/pages/blog/[slug].astro

@@ -31,7 +31,7 @@ const permalink = `${Astro?.site?.href}blog/${slug}`;
 <BaseLayout title={title} description={description} permalink={permalink} current="blog">
   <header>
     <p>{publishDate} ~ {readTime}</p>
-    <h1>{title}</h1>
+    <h1 style={`view-transition-name: blogpost-${slug}`}>{title}</h1>
     <div class="tags" style="justify-content: center">
       {tags.map(item => (
           <span class="tag">{item}</span>
@@ -55,7 +55,6 @@ const permalink = `${Astro?.site?.href}blog/${slug}`;
     margin-bottom: 0.7em;
     display: flex;
     justify-content: center;
-    view-transition-name: blog-title;
     width: fit-content;
     margin-inline: auto;
   }

src/pages/blog/index.astro

@@ -21,7 +21,7 @@ const allPosts= posts.sort((a, b) => new Date(b.data.publishDate).valueOf() - ne
           { index !== 0 && <hr /> }
           <div class="post-item">
             <h2>
-              <a data-astro-prefetch href={href}>{post.data.title}</a>
+              <a data-astro-prefetch href={href} style={`view-transition-name: blogpost-${post.slug}`}>{post.data.title}</a>
             </h2>
             <div class="tags">
               {post.data.tags.map(item => (
@@ -39,7 +39,12 @@ const allPosts= posts.sort((a, b) => new Date(b.data.publishDate).valueOf() - ne
   </div>
 </BaseLayout>
 
-<style>
+<style lang="scss" scoped>
+
+  h1 {
+    view-transition-name: blog;
+  }
+
   h2,
   .post-item-footer {
     font-family: var(--font-family-sans);

src/pages/index.astro

@@ -1,10 +1,10 @@
 ---
 import BaseLayout from '../layouts/BaseLayout.astro';
+import {getCollection} from "astro:content";
+import logoImage from '../assets/img/yht_logo.png';
+import {Image} from 'astro:assets';
 import ActivityWidget from "../components/ActivityWidget.astro";
 import ViewCounter from "../components/ViewCounter.astro";
-import SocialsWidget from "../components/SocialsWidget.astro";
-import ProjectsFeature from "../components/ProjectsFeature.astro";
-import {getCollection} from "astro:content";
 
 const title = 'Home';
 const description = 'My little corner of the internet.';
@@ -17,256 +17,318 @@ const latestBlogPost = await getCollection("posts")
     ).then(sortedBlogPosts => sortedBlogPosts.length > 0 ? sortedBlogPosts[0] : null);
 ---
 
-<BaseLayout title={title} description={description} permalink={permalink}>
+<BaseLayout
-  <div class="home-container">
+        title={title}
-    <div class="window home-copy" data-title="Welcome" id="welcome">
+        description={description}
-      <div>
+        permalink={permalink}
-        <h1>Welcome to my little corner of the interwebs</h1>
+        showLogo={false}
-        <p>Feel free to check out what I got in store!</p>
+>
-      </div>
+    <div class="hero">
-    </div>
+        <div class="thought-bubble">
-    <div class="window-row">
+            <div class="thoughts">
-      <div class="window visitor-counter" data-title="Visitors counter" id="visitor-counter"
+                <div class="latest-blogpost">
-           aria-label="Visitors counter">
-        <ViewCounter/>
-      </div>
-      <div class="window activity" data-title="Activity" id="activity" aria-label="Activity">
-        <ActivityWidget/>
-      </div>
-    </div>
-    <div class="window-row">
-      <div class="window socials" data-title="Socials" id="socials" aria-label="Socials">
-        <SocialsWidget/>
-      </div>
-      <div class="window blog" aria-label="Blog" id="blog" data-title="Blog">
-        <span>Latest article:</span>
                     {
-          latestBlogPost === null ? (
+                        latestBlogPost ? (
-              <div class="latest-article">
+                                <span>Latest blog post:</span>
-                <span class="title">No articles yet</span>
+                                <a href={`/blog/${latestBlogPost.slug}`} style={`view-transition-name: blogpost-${latestBlogPost.slug}`}>
-                <span class="excerpt">Come back later to check for new articles!</span>
+                                    {latestBlogPost.data.title}
-              </div>
+                                </a>
-          ) : null
+                        ) : (
-        }
+                                <span>No blog posts yet.</span>
-        <div class="latest-article">
-          <span class="title">{latestBlogPost?.data.title}</span>
-          <span class="excerpt">{latestBlogPost?.data.description}</span>
-        </div>
-        <div class="actions">
-          {
-            latestBlogPost !== null && (
-                  <a href={`/blog/${latestBlogPost?.slug}`} class="button">Read more</a>
-                  <a href="/blog" class="button secondary">All articles</a>
                         )
                     }
                 </div>
-        <div class="buttons">
+                <div class="visitor-count">
-          <div class="rss">
+                    <ViewCounter />
-            <a
-                href="/rss.xml"
-                target="_blank"
-                aria-label="RSS feed"
-                title="RSS feed"
-            >
-              <svg height="14px" width="14px" xmlns="http://www.w3.org/2000/svg"
-                   viewBox="-271 273 256 256" xml:space="preserve">
-                <g>
-                  <path fill="white" d="M-271,360v48.9c31.9,0,62.1,12.6,84.7,35.2c22.6,22.6,35.1,52.8,35.1,84.8v0.1h49.1c0-46.6-19-88.7-49.6-119.4
-                    C-182.2,379-224.4,360.1-271,360z"/>
-                  <path fill="white" d="M-237,460.9c-9.4,0-17.8,3.8-24,10s-10,14.6-10,24c0,9.3,3.8,17.7,10,23.9c6.2,6.1,14.6,9.9,24,9.9s17.8-3.7,24-9.9
-                    s10-14.6,10-23.9c0-9.4-3.8-17.8-10-24C-219.2,464.7-227.6,460.9-237,460.9z"/>
-                  <path fill="white" d="M-90.1,348.1c-46.3-46.4-110.2-75.1-180.8-75.1v48.9C-156.8,322-64.1,414.9-64,529h49C-15,458.4-43.7,394.5-90.1,348.1z"/>
-                </g>
-              </svg>
-            </a>
                 </div>
+            </div>
+            <div class="thoughts-list">
+                <label>
+                    <input
+                            type="radio"
+                            name="thoughts"
+                            id="latest-blogpost"
+                            aria-label="Latest blog post"
+                            checked
+                    />
+                </label>
+                <label>
+                    <input
+                            type="radio"
+                            name="thoughts"
+                            id="visitor-count"
+                            aria-label="Activity"
+                    />
+                </label>
+            </div>
+        </div>
+        <div class="hero-body">
+            <div class="hero-nav">
+                <a class="option about" href="/about">About</a>
+                <a class="option projects" href="/projects">Projects</a>
+                <a class="option blog" href="/blog">Blog</a>
+            </div>
+            <Image
+                    src={logoImage}
+                    alt="Logo displaying a stylized character with brown hair wearing purple hoodie on a light blue circle background"
+                    width={150}
+                    height={150}
+                    loading="eager"
+                    class="main-logo"
+                    draggable="false"
+            />
 
         </div>
-      </div>
-    </div>
-    <div class="window-row">
-      <div class="window" data-title="Projects" id="projects" aria-label="Projects">
-        <div class="buttons">
-          <button popovertarget="projects-info" popovertargetaction="show" tabindex="0" aria-label="Projects info">
-            <span class="icon">ℹ️</span>
-          </button>
-        </div>
-        <div popover="auto" id="projects-info" class="window">
-          <div class="buttons">
-            <button popovertarget="projects-info" popovertargetaction="hide" tabindex="0"
-                    aria-label="Close projects info">
-              <span class="icon">❌</span>
-            </button>
-          </div>
-          <h2>Projects</h2>
-          <p>
-            Here are some of the projects I'm working on. Most of them are open source, so feel free to check them out!
-            <br>
-            Projects presented here are what I consider in presentable and/or finished state. They might or might not
-            get
-            updates.
-            <br>
-            Most logos generated using <a href="https://huggingface.co/spaces/dalle-mini/dalle-mini" target="_blank">DALL-E
-            mini</a>.
-            <br>
-            Inviter logo by <a href="https://slyfoxart.artstation.com/projects" target="_blank">SlyFox</a>
-          </p>
-        </div>
-        <ProjectsFeature/>
-      </div>
-    </div>
-
 
     </div>
 </BaseLayout>
 
 <style lang="scss">
 
-  #projects-info {
+  .hero {
-    position: fixed;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    flex: 1;
+    container-type: inline-size;
+    container-name: hero;
+
+    .hero-body {
+      display: flex;
+      justify-content: center;
+      flex-direction: column-reverse;
+      width: 100%;
+      align-items: center;
+      gap: 0.5rem;
+      position: relative;
+      z-index: 1;
     }
 
-  .visitor-counter {
+    .hero-nav {
-    padding: 1.5rem 2rem 0 2rem;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      gap: 0.5rem;
+      width: 100%;
+
+
+      .option {
+        border-width: 1px;
+        border-style: solid;
+        border-color: var(--text-main);
         display: flex;
         justify-content: center;
         align-items: center;
-    min-width: min(15rem, 100%);
+        font-size: 0.8rem;
-    flex: 1;
+        text-decoration: none;
+        padding: 0.5rem;
         width: 100%;
+        border-radius: 1rem;
+        background-color: var(--background-body);
+
+        &.about {
+          view-transition-name: about;
         }
 
-  .socials {
+        &.projects {
-    padding: 2rem 1rem 0 1rem;
+          view-transition-name: projects;
-    flex: 2;
+        }
-    min-width: min(25rem, 100%);
+
+        &.blog {
+          view-transition-name: blog;
+        }
+      }
+
+    }
+
+    .thought-bubble {
+      position: relative;
+      width: min(100%, 15rem);
+      min-height: 5rem;
+      background-color: var(--text-main);
+      margin-bottom: 0.75rem;
+      border-radius: 1rem;
+      border: 2px solid black;
+      opacity: 0;
+      z-index: 5;
+      animation: fadeIn 1s linear forwards;
+      animation-delay: 0.25s;
+
+      &:has(input#latest-blogpost:checked) {
+        .thoughts {
+          .latest-blogpost {
+            display: flex;
+          }
+        }
+      }
+      &:has(input#visitor-count:checked) {
+        .thoughts {
+          .visitor-count {
+            display: flex;
+          }
+        }
+      }
+
+
+      .thoughts {
+        display: flex;
+        flex-direction: row;
+        height: 5rem;
+
+        & > * {
+          display: none;
+        }
+
+        .latest-blogpost {
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          width: 100%;
+          height: 100%;
+          color: var(--background-body);
+
+          a {
+            color: var(--background-body);
+            text-decoration: underline;
+          }
+        }
+
+        .visitor-count {
+          width: 100%;
+            height: 100%;
+            justify-content: center;
+            align-items: center;
+          color: var(--background-body)
         }
 
         .activity {
-    min-width: min(100%, 16rem);
+          overflow: hidden;
-    flex: 2;
-  }
-
-  #projects {
-    width: 100%;
-    display: flex;
-    flex: 1;
-    padding-top: 1.5rem;
-  }
-
-  .blog {
-    padding: 2rem 1rem 0.75rem 1rem;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    min-width: min(25rem, 100%);
-    width: 100%;
-    gap: 0.5rem;
-    flex: 1;
-
-    .latest-article {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      text-align: center;
-      margin-bottom: 0.5rem;
-      background: rgba(255,255,255, 0.05);
-      padding: 0.5rem;
-      border-radius: 0.25rem;
-
-      .title {
-        font-weight: 600;
-        font-size: 1.1rem;
-        view-transition-name: blog-title;
-      }
-
-      .excerpt {
-        font-size: 0.9rem;
-        color: var(--text-secondary);
         }
       }
 
-    .actions {
+      .thoughts-list {
-      display: flex;
-      gap: 0.5rem;
-    }
-
-  }
-
-  .buttons {
-    .rss {
-      display: flex;
-      height: 100%;
-      justify-content: center;
-      align-items: center;
-      aspect-ratio: 1/1;
-      padding-bottom: 4px;
-      a {
-        height: 100%;
-        width: 100%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      }
-    }
-  }
-
-  .window-row {
         display: flex;
         flex-direction: row;
-    flex-wrap: wrap;
-    gap: 1.5rem;
-    width: 100%;
         justify-content: center;
+        gap: 0.5rem;
+
       }
 
-  .home-container {
+      &::before {
-    align-items: center;
+        position: absolute;
-    display: flex;
+        content: '';
-    flex-direction: column;
+        bottom: -2.25rem;
-    justify-content: center;
+        right: 25%;
-    margin: 2em 0;
+        width: 2rem;
-    gap: 1.5rem;
+        height: 2rem;
-
+        background-color: var(--text-main);
-    .home-copy {
+        border: 2px solid black;
-      flex: 1;
+        border-radius: 50%;
-      display: flex;
+        z-index: 5;
-      width: 100%;
-      padding-top: 3rem;
-      padding-inline: 0.5rem;
-
-      h1 {
-        font-weight: 700;
-        margin-bottom: 0.5em;
-        line-height: 1.3;
-        font-size: 2rem;
-        text-align: center;
       }
 
-      p {
+      &::after {
-        text-align: center;
+        position: absolute;
-        font-size: 1.2rem;
+        content: '';
+        bottom: -3.25rem;
+        right: 33%;
+        width: 1rem;
+        height: 1rem;
+        background-color: var(--text-main);
+        border: 2px solid black;
+        border-radius: 50%;
+        z-index: 5;
+      }
+
+    }
+
+    @container hero (width >= 320px) {
+
+      .hero-body {
+        flex-direction: row;
+      }
+
+      .hero-nav {
+        animation-name: animateNavIn;
+        animation-duration: 0.5s;
+        animation-fill-mode: forwards;
+        animation-delay: 0.1s;
+        position: absolute;
+        opacity: 0;
+
+        .option {
+          position: absolute;
+          width: 4rem;
+          height: 4rem;
+          border-radius: 50%;
+
+          &.about {
+            animation-name: animateNavAboutIn;
+            animation-duration: 0.75s;
+            animation-fill-mode: forwards;
+            animation-delay: 0.25s;
+          }
+
+          &.blog {
+            animation-name: animateNavBlogIn;
+            animation-duration: 0.75s;
+            animation-fill-mode: forwards;
+            animation-delay: 0.25s;
+          }
         }
       }
 
     }
 
-  @media (max-width: 1200px) {
+  }
-    p {
+
-      font-size: 1.2em;
+  .main-logo {
+    border-radius: 50%;
+    view-transition-name: nav-logo;
+  }
+
+  @keyframes animateNavIn {
+    0% {
+      bottom: 50%;
+      left: auto;
+      right: auto;
+      opacity: 0;
+    }
+    100% {
+      left: auto;
+      right: auto;
+      bottom: -2.5rem;
+      opacity: 1;
+    }
+
+  }
+
+  @keyframes animateNavBlogIn {
+    0% {
+      transform: translateX(0) translateY(0);
+    }
+    100% {
+      transform: translateX(calc(100% + 0.25rem)) translateY(-1.5rem);
     }
   }
 
-  @media (max-width: 800px) {
+  @keyframes animateNavAboutIn {
-    .home-container {
+    0% {
-      flex-direction: column;
+      transform: translateX(0) translateY(0);
+    }
+    100% {
+      transform: translateX(calc(-100% - 0.25rem)) translateY(-1.5rem);
+    }
   }
 
-    .home-copy {
+  @keyframes fadeIn {
-      flex: 0;
+    0% {
-      padding-bottom: 2em;
+      opacity: 0;
-      text-align: center;
+    }
+    100% {
+      opacity: 1;
     }
   }
 

src/pages/projects.astro

@@ -85,6 +85,10 @@ for (const project of projectsCollection) {
     margin-bottom: 3.25rem;
   }
 
+  h1 {
+      view-transition-name: projects;
+  }
+
   h2 {
     text-transform: capitalize;
   }