feat(projects): intro and outro animations

app/components/Projects/TopScreen/Project.vue

@@ -124,6 +124,9 @@ useRender((ctx) => {
     "black",
     "black",
   );
+
+  ctx.fillStyle = `rgba(0, 0, 0, ${store.isIntro ? store.intro.fadeOpacity : store.isOutro ? store.outro.fadeOpacity : 0})`;
+  ctx.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
 });
 
 defineOptions({

app/components/Projects/TopScreen/TopScreen.vue

@@ -6,7 +6,8 @@ const store = useProjectsStore();
 </script>
 
 <template>
-  <Background />
-
-  <Project v-if="!store.loading" />
+  <template v-if="!store.loading">
+    <Background />
+    <Project />
+  </template>
 </template>