Please be advised that three team members were let go on July 15, 2025, leaving only three of us; to ensure continuity, please transfer all project documentation to the shared drive, update your current task statuses in the project tracker, return any company equipment by July 17, and we will meet on July 18 at 10:00 AM to review our updated priorities.

src/routes/+page.svelte

@@ -95,21 +95,21 @@
             
             <Profile isSnorre={true} tags={["Programmer"]} isMobile={mobile}/>
 
-            <Profile name="Oliver" tags={["Sound/Story","2D Artist", "Programmer"]} isMobile={mobile}>
+            <Profile replaced={true} name="Oliver" tags={["Sound/Story","2D Artist", "Programmer"]} isMobile={mobile}>
                 <span>
                     <p>Snorre does not get paid.</p>
                     <p><a href="https://www.linkedin.com/in/oliver-schwenger-291944278/" target="_blank" style="color:lightblue;">Linked-in</a></p>
                 </span>
             </Profile>
 
-            <Profile name="Kim" tags={["Cinemachine", "3D Artist", "Programmer"]} isMobile={mobile}>
+            <Profile replaced={true} name="Kim" tags={["Cinemachine", "3D Artist", "Programmer"]} isMobile={mobile}>
                 <span>
                     <p>Abla espaniol</p>
                     <p><a href="https://www.linkedin.com/in/kim-rex-de-dios-408860299/" target="_blank" style="color:lightblue;">Linked-in</a></p>
                 </span>
             </Profile>
             
-            <Profile name="Zylvester" tags={["Sound/Story", "2D/3D artist"]} isMobile={mobile}>
+            <Profile replaced={true} name="Zylvester" tags={["Sound/Story", "2D/3D artist"]} isMobile={mobile}>
                 <span>
                     <p>Closeted omega weeb</p>
                     <p><a href="https://www.linkedin.com/in/sylvester-junge-0b2a73196/" target="_blank" style="color:lightblue;">Linked-in</a>, <a href="https://www.youtube.com/watch?v=xvFZjo5PgG0" style="color:lightblue;">Funny link</a></p>

src/routes/comps/PostCard.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import Carousel from './Carousel.svelte';
+
+  export let title: string;
+  export let description: string;
+  export let jam = { name: '', url: '' };
+  export let viewUrl : string= '';
+  export let images: string[] = [];
+  export let placeholder = false;
+</script>
+
+<div class="games card bg-base-100 shadow-xl {placeholder ? 'w-96' : ''}">
+  {#if !placeholder}
+    <figure style="height: 15em;">
+      <Carousel {images} />
+    </figure>
+    <div class="card-body">
+      <h2 class="card-title">{title}</h2>
+      <p>{description}</p>
+      <br />
+      <p>
+        This was made during
+        <a href={jam.url} class="underline" target="_blank" rel="noopener">
+          {jam.name}
+        </a>
+      </p>
+      <div class="card-actions justify-end">
+        <a href={viewUrl}
+           class="btn btn-primary text-primary-content"
+           target="_blank"
+           rel="noopener"
+        >
+          View on itch.io
+        </a>
+      </div>
+    </div>
+  {:else}
+    <figure class="rounded-b-none" style="height: 15em;">
+      <div class="bg-grid-100 flex w-full h-full"></div>
+    </figure>
+    <div class="card-body">
+      <h2 class="card-title">What's next?</h2>
+      <div class="skeleton mt-1 h-4 w-28"></div>
+      <div class="skeleton h-4 w-full"></div>
+      <div class="skeleton h-4 w-full"></div>
+      <div class="skeleton h-4 w-28"></div>
+      <div class="skeleton h-4 w-full"></div>
+      <div class="flex grow"></div>
+      <div class="card-actions justify-end">
+        <a href="/"
+           class="btn btn-primary text-primary-content"
+           target="_blank"
+           rel="noopener"
+        >
+          RECURSION!
+        </a>
+      </div>
+    </div>
+  {/if}
+</div>
+

src/routes/comps/PostGrid.svelte

@@ -0,0 +1,68 @@
+<script>
+  import PostCard from './PostCard.svelte';
+
+  import Corrobot1 from '@images/GamePreviews/Corrobot1.png';
+  import Corrobot2 from '@images/GamePreviews/Corrobot2.png';
+  import Corrobot3 from '@images/GamePreviews/Corrobot3.png';
+
+  import Blood1 from '@images/GamePreviews/Blood1.png';
+  import Blood2 from '@images/GamePreviews/Blood2.png';
+  import Blood3 from '@images/GamePreviews/Blood3.png';
+  import Blood4 from '@images/GamePreviews/Blood4.png';
+  import Blood5 from '@images/GamePreviews/Blood5.png';
+
+  import Time1 from '@images/GamePreviews/Time1.png';
+  import Time2 from '@images/GamePreviews/Time2.png';
+  import Time3 from '@images/GamePreviews/Time3.png';
+  import Time4 from '@images/GamePreviews/Time4.png';
+  import Time5 from '@images/GamePreviews/Time5.png';
+
+  const games = [
+    {
+      title: 'Corrobot-rebounce',
+      description: 'A 3D sequel to Corrobot-Takeover',
+      jam: {
+        name: 'Nordic gamejam 2024',
+        url: 'https://itch.io/jam/nordic-game-jam-2024/rate/2659665'
+      },
+      viewUrl: 'https://botalex.itch.io/corrobot-rebounce',
+      images: [Corrobot1, Corrobot2, Corrobot3]
+    },
+    {
+      title: 'Unnamed blood game',
+      description: 'A game based on an unique kind of combat',
+      jam: {
+        name: 'Future Game Makers',
+        url: 'https://itch.io/jam/future-game-makers-jam-2024'
+      },
+      viewUrl: 'https://botalex.itch.io/mop-of-the-dead',
+      images: [Blood1, Blood2, Blood3, Blood4, Blood5]
+    },
+    {
+      title: 'One More Time',
+      description: 'What if time was money? A roguelike where you need to kill for time, which you can choose to spend.',
+      jam: {
+        name: 'Denmark Masters jam',
+        url: 'https://itch.io/jam/dmspiljam-november-2021'
+      },
+      viewUrl: 'https://botalex.itch.io/one-more-time',
+      images: [Time1, Time2, Time3, Time4, Time5]
+    }
+  ];
+</script>
+
+<div class="grid grid-flow-row gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+  {#each games as game (game.title)}
+    <PostCard
+      title={game.title}
+      description={game.description}
+      jam={game.jam}
+      viewUrl={game.viewUrl}
+      images={game.images}
+    />
+  {/each}
+
+  <!-- placeholder for upcoming game -->
+  <PostCard placeholder={true} />
+</div>
+

src/routes/comps/Profile.svelte

@@ -6,12 +6,13 @@
     export let name = "";
     export let tags = ["null"];
     export let isSnorre = false;
+    export let replaced = false;
 
     // Shit code but who cares, if it works /shrug
 </script>
 
 
-<div class="bg-grid-100 border-2 border-base-100 pl-1 pr-4 rounded-md cozette max-lg:pb-2">
+<div class="relative bg-grid-100 border-2 border-base-100 pl-1 pr-4 rounded-md cozette max-lg:pb-2">
 {#if !isSnorre}
   <div class=" developersProfile {isSnorre ? "isSnorre" : ""} pl-1 font-mono">
     <NameAndTag name={name} tags={tags} isMobile={isMobile}/>
@@ -41,9 +42,53 @@
         </div>
     </div>
 {/if}
+<div class="{replaced? "" : "hidden"} replaced flex justify-center items-center h-full absolute top-0 left-0 down-0 right-0">
+    <div class="corner-border-container px-2">
+      Replaced by AI
+    </div>
+  </div>
 </div>
 
 <style>
+  .replaced {
+    background: repeating-linear-gradient(45deg,#0009,#0009 15px, #000a 15px 20px);
+  }
+  .corner-border-container {
+  --length: 5px;
+  --width: 1px;
+  --line-color: #eeeeee;
+  background-color: #0008;
+  background-image:
+    linear-gradient(var(--line-color), var(--line-color)),
+    linear-gradient(var(--line-color), var(--line-color)),
+    linear-gradient(var(--line-color), var(--line-color)),
+    linear-gradient(var(--line-color), var(--line-color)),
+    linear-gradient(var(--line-color), var(--line-color)),
+    linear-gradient(var(--line-color), var(--line-color)),
+    linear-gradient(var(--line-color), var(--line-color)),
+    linear-gradient(var(--line-color), var(--line-color));
+  background-size:
+    var(--length) var(--width),
+    var(--width) var(--length),
+    var(--length) var(--width),
+    var(--width) var(--length),
+    var(--length) var(--width),
+    var(--width) var(--length),
+    var(--length) var(--width),
+    var(--width) var(--length);
+  background-position:
+    top left,
+    top left,
+    top right,
+    top right,
+    bottom right,
+    bottom right,
+    bottom left,
+    bottom left;
+  background-repeat: no-repeat;
+}
+
+
     .developersProfile:not(.snorre):not(.snorre-overlay){
         /* background-image: linear-gradient(var(--color-neutral) 33%, rgba(255,255,255,0) 0%); */
         /* background-image: linear-gradient(var(--color-neutral) 100%);