feat: add back to top, services, about

assets/images/services/eifueo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54Z"></path></svg>

components/ButtonToTop.vue

@@ -0,0 +1,33 @@
+<template>
+  <a href="#" class="go-top"></a>
+</template>
+
+<style scoped>
+.go-top {
+  --offset: 20rem;
+  position: sticky;
+  bottom: 1rem;
+  margin-right: 1rem;
+  place-self: end;
+  margin-top: calc(100vh + var(--offset));
+
+  width: 2rem;
+  aspect-ratio: 1;
+  background: #ff8b24;
+  border-radius: 1rem;
+  box-shadow: 0 0.1rem 0.5rem 0 gray;
+}
+
+html.dark .go-top {
+  box-shadow: 0 0.1rem 0.5rem 0 black;
+}
+
+.go-top:before {
+  content: "";
+  position: absolute;
+  inset: 30%;
+  transform: translateY(20%) rotate(-45deg);
+  border-top: 0.35rem solid #fff;
+  border-right: 0.35rem solid #fff;
+}
+</style>

components/ProjectCard.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+const props = defineProps<{
+  name: string;
+  href: string;
+  img: string;
+}>();
+</script>
+
+<template>
+  <a :href="href" class="no-underline">
+    <div class="card flex flex-col items-center justify-around">
+      <img class="m-0" :src="img" />
+      <h3 class="m-0">{{ props.name }}</h3>
+      <p class="desc-text text-gray-600 dark:text-gray-200"><slot /></p>
+    </div>
+  </a>
+</template>
+
+<style scoped>
+img {
+  width: 6rem;
+}
+
+.card {
+  padding: 1rem;
+  border: 0.2rem solid pink;
+  background: rgb(255, 237, 241);
+  border-radius: 0.5rem;
+  width: 12rem;
+  height: 12rem;
+  line-height: 1.25;
+  transition: all 0.2s ease;
+}
+
+html.dark .card {
+  border: 0.2rem solid rgb(126, 93, 98);
+  background: rgb(110, 90, 92);
+}
+
+.card:hover,
+.card:active {
+  transform: scale(1.05);
+}
+
+.desc-text {
+  font-size: 0.8rem;
+  margin: 0;
+  text-align: center;
+}
+
+a.unclickable {
+  pointer-events: none;
+}
+</style>

components/ServiceCard.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+const props = defineProps<{
+  name: string;
+  href: string;
+  img: string;
+  unclickable?: boolean;
+}>();
+</script>
+
+<template>
+  <a :href="unclickable ? '' : href" :class="['no-underline', { unclickable }]">
+    <div class="card flex flex-col items-center justify-around">
+      <img class="m-0" :src="img" />
+      <h3 class="m-0">{{ props.name }}</h3>
+      <p class="desc-text text-gray-600 dark:text-gray-200"><slot /></p>
+    </div>
+  </a>
+</template>
+
+<style scoped>
+img {
+  width: 6rem;
+}
+
+.card {
+  padding: 1rem;
+  border: 0.2rem solid pink;
+  background: rgb(255, 237, 241);
+  border-radius: 0.5rem;
+  width: 12rem;
+  height: 12rem;
+  line-height: 1.25;
+  transition: all 0.2s ease;
+}
+
+html.dark .card {
+  border: 0.2rem solid rgb(126, 93, 98);
+  background: rgb(110, 90, 92);
+}
+
+.card:hover,
+.card:active {
+  transform: scale(1.05);
+}
+
+.desc-text {
+  font-size: 0.8rem;
+  margin: 0;
+  text-align: center;
+}
+
+a.unclickable {
+  pointer-events: none;
+}
+</style>

components/index/about.vue

@@ -1,6 +1,76 @@
+<script setup lang="ts">
+import { projects } from "@/data/projects";
+</script>
+
 <template>
-  <div class="prose dark:prose-invert">
-    <h1>About</h1>
-    <p>incl. projects</p>
+  <div class="prose dark:prose-invert w-full flex flex-col mt-9">
+    <h1 id="about" class="text-center mb-4">About</h1>
+
+    <!-- this could be in markdown but eh -->
+    <p>
+      Hello! It's very nice to meet you — I'm a student and Linux enthusiast who
+      is quite passionate about some subjects but is quite lazy in every other.
+    </p>
+
+    <p>
+      I've dabbled extensively and non-extensively in a variety of topics to
+      play with, including:
+    </p>
+    <ul>
+      <li>competitive programming on DMOJ</li>
+      <li>GUI toolkits very very briefly in GTK, Qt, and Swing</li>
+      <li>Linux and server administration</li>
+      <li>web development in the form of a Chrome extension and my sites</li>
+      <li>Godot Engine Cat Simulator DX</li>
+      <li>ski instruction</li>
+      <li>writing of literature</li>
+      <li>emulation</li>
+    </ul>
+    <p>…and other things that I'm forgetting right now.</p>
+    <p>
+      I have two server machines at home — a Dell OptiPlex 780 and a Dell
+      Latitude E5520. Yes, one of them is a laptop.
+    </p>
+    <h3>OptiPlex 780 ("asvyn")</h3>
+    <ul>
+      <li><strong>CPU:</strong> Intel Core 2 Duo E8400 (2c/2t)</li>
+      <li><strong>GPU:</strong> AMD ATI Radeon HD 3450</li>
+      <li><strong>RAM:</strong> 2× 1 GB DDR + 1× 2 GB DDR2</li>
+      <li><strong>Storage:</strong> Western Digital 150 GB hard drive</li>
+      <li><strong>OS:</strong> Arch Linux</li>
+    </ul>
+    <h3>Latitude E5520 ("panquia")</h3>
+    <ul>
+      <li><strong>CPU:</strong> Intel Core i5-3320M (2c/4t)</li>
+      <li><strong>GPU:</strong> Integrated</li>
+      <li><strong>RAM:</strong> 10 GB</li>
+      <li><strong>Storage:</strong> 300 GB hard drive</li>
+      <li><strong>OS:</strong> Arch Linux</li>
+    </ul>
+
+    <h1 class="text-center mb-0 mt-8">Fun things</h1>
+    <p class="text-center mb-4">(aka my programming projects)</p>
+    <div class="flex flex-col items-center justify-around gap-5">
+      <ProjectCard
+        v-for="(proj, index) in projects"
+        :name="proj.name"
+        :href="proj.href"
+        img=""
+        :key="index"
+      >
+        {{ proj.description }}
+      </ProjectCard>
+    </div>
   </div>
 </template>
+
+<style scoped>
+p {
+  margin: 0.5rem;
+}
+
+ul {
+  margin: 0;
+  line-height: 1.35;
+}
+</style>

components/index/services.vue

@@ -1,12 +1,77 @@
+<script setup lang="ts"></script>
+
 <template>
-  <div class="prose dark:prose-invert">
-    <h1>Services</h1>
-    <p>Gitea</p>
-    <p>Eifueo</p>
-    <p>Primoprod</p>
-    <p>Calibre</p>
-    <p>Plex</p>
-    <p>Jellyfin</p>
-    <p>Minecraft</p>
+  <div
+    class="container prose dark:prose-invert w-full flex flex-col items-center mt-9"
+  >
+    <h1 class="m-0">Services</h1>
+    <p class="prose dark:prose-invert">
+      This site is statically generated using
+      <a href="https://v3.nuxtjs.org">Nuxt.js</a> with the help of templates and
+      Markdown — because really, writing HTML by hand is tedious and I don't
+      know why I ever tried — and its source is available
+      <a href="https://github.com/potatoeggy/public">here</a>.
+    </p>
+    <!-- i could make this a list but god i'm so tired with nuxt -->
+    <div class="flex justify-around flex-wrap gap-8 items-center">
+      <ServiceCard
+        name="Gitea"
+        href="https://git.eggworld.tk"
+        img="/assets/images/services/gitea.png"
+      >
+        Self-hosted GitHub
+      </ServiceCard>
+      <ServiceCard
+        name="Eifueo"
+        href="https://eifueo.eggworld.tk"
+        img="/assets/images/services/eifueo.svg"
+      >
+        Note collection
+      </ServiceCard>
+      <ServiceCard
+        name="Primoprod"
+        href="https://primoprod.eggworld.tk"
+        img="/assets/images/services/primogem.png"
+      >
+        Wish simulator
+      </ServiceCard>
+      <ServiceCard
+        name="Calibre"
+        href="https://calibre.eggworld.tk"
+        img="/assets/images/services/calibre-web.png"
+      >
+        Kobo Cloud
+      </ServiceCard>
+      <ServiceCard
+        name="Plex"
+        href="https://plex.eggworld.tk"
+        img="/assets/images/services/plex.png"
+      >
+        Ad-filled media server
+      </ServiceCard>
+
+      <ServiceCard
+        name="Jellyfin"
+        href="https://jellyfin.eggworld.tk"
+        img="/assets/images/services/jellyfin.png"
+      >
+        FOSS media server
+      </ServiceCard>
+
+      <ServiceCard
+        name="Minecraft"
+        href="minecraft.eggworld.tk"
+        img="/assets/images/services/minecraft.png"
+        :unclickable="true"
+      >
+        Whitelisted
+      </ServiceCard>
+    </div>
   </div>
 </template>
+
+<style scoped>
+.container {
+  max-width: unset;
+}
+</style>

data/navItems.ts

@@ -1,5 +1,5 @@
 export const navItems = [
-  { href: "/about", title: "About" },
+  { href: "/#about", title: "About" },
   { href: "/blog", title: "Blog" },
   { href: "/stories", title: "Stories" },
 ];

data/projects.ts

@@ -1,9 +1,30 @@
-export const projects: Record<string, string> = {
-  public: "",
-  primoprod: "",
-  mandown: "",
-  noveldown: "",
-  eifueo: "",
-};
+export const projects = [
+  {
+    name: "public",
+    href: "https://github.com/potatoeggy/public",
+    description: "This website!",
+  },
+  {
+    name: "mandown",
+    href: "https://github.com/potatoeggy/mandown",
+    description: "I couldn't find one so I made one",
+  },
+  { name: "noveldown", href: "https://github.com/potatoeggy/noveldown" },
+  { name: "YTMusicDL", href: "https://github.com/potatoeggy/YTMusicDL" },
+  { name: "jeopardy", href: "https://github.com/potatoeggy/jeopardy" },
+  { name: "Eifueo", href: "https://github.com/potatoeggy/eifueo" },
+  { name: "Napbot", href: "https://github.com/potatoeggy/napbot" },
+  { name: "emufeed", href: "https://github.com/potatoeggy/emufeed" },
+  { name: "Resketch", href: "https://github.com/anyuan-chen/resketch" },
+  {
+    name: "RecipeReady",
+    href: "https://github.com/christopherlam888/recipe-ready-frontend",
+  },
+  { name: "Perdiem", href: "https://github.com/anyuan-chen/perdiem" },
+  { name: "Flashnote", href: "https://github.com/potatoeggy/flashnote" },
+  { name: "Rooster", href: "https://github.com/potatoeggy/rooster" },
+  { name: "AutoFicFare", href: "https://github.com/potatoeggy/autoficfare" },
+  { name: "public", href: "https://github.com/potatoeggy/public" },
+];
 
 export default projects;

layouts/default.vue

@@ -25,6 +25,7 @@ useHead({ title: "Eggworld" });
       </p>
     </footer>
   </div>
+  <ButtonToTop />
 </template>
 
 <style>
@@ -34,6 +35,7 @@ html {
   transition: color 0.2s ease, background 0.2s ease;
   overflow-x: hidden;
   overflow-y: scroll;
+  scroll-behavior: smooth;
 }
 
 html.dark {
@@ -74,6 +76,12 @@ html.dark footer {
   --footer-drop-color: black;
 }
 
+div#__nuxt {
+  /* we need an element with only one child */
+  display: grid;
+  grid-template-columns: auto 0px;
+}
+
 @media screen and (max-width: 600px) {
   main {
     width: 90%;