Completed website

.gitignore

@@ -0,0 +1,24 @@
+# build output
+dist/
+
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
+
+# jetbrains setting folder
+.idea/

.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}

.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}

package.json

@@ -12,6 +12,7 @@
     "@astrojs/react": "^4.1.0",
     "@astrojs/tailwind": "^5.1.3",
     "@fontsource/poppins": "^5.1.0",
+    "@iconify-json/codicon": "^1.2.7",
     "@iconify-json/solar": "^1.2.1",
     "@iconify/react": "^5.1.0",
     "@types/react": "^19.0.1",

src/pages/services.astro

@@ -1,11 +1,88 @@
 ---
-import Layout from '../layouts/Layout.astro';
+import Layout from "../layouts/Layout.astro";
+import { Icon } from "astro-icon/components";
 ---
 
 <Layout title="yiffing.dev - Services">
-    <div>
+  <div class="mt-[5vh]">
-        <div>
+    <div class="mt-4 font-semibold text-[var(--sky)] text-[6vh]">
-            The stuff we host
+      The stuff we host
-        </div>
     </div>
+    <div class="text-[20px] font-semibold">
+      Here is a nice grid of the useless stuff we created / host :3
+    </div>
+    <div class="grid grid-cols-5 max-md:block gap-3 mt-4">
+      <div class="gridContainer max-md:mb-3 flex flex-col">
+        <img
+          class="m-auto"
+          width="48"
+          src="https://git.yiffing.dev/assets/img/logo.svg"
+          alt=""
+        />
+        <div class="text-center">
+          <div class="mt-3 font-semibold">Yiffing Git [Forgejo]</div>
+          <div class="mt-2">
+            This is our highly modified forgejo instance with <a href="/pages"
+              >Pages</a
+            > support.
+          </div>
+        </div>
+
+        <a href="https://git.yiffing.dev" target="_blank">
+          <div class="btn font-semibold">Check out</div>
+        </a>
+      </div>
+      <div class="gridContainer max-md:mb-3 flex flex-col">
+        <div class="text-[var(--yellow)] flex justify-center text-[40px]">
+          <Icon name="codicon:terminal-linux" />
+        </div>
+        <div class="text-center">
+          <div class="mt-3 font-semibold">Linux Mirrors</div>
+          <div class="mt-2">
+            For now only private arch linux repository
+          </div>
+        </div>
+
+        <div class="btnDis font-semibold">Soon</div>
+      </div>
+    </div>
+  </div>
 </Layout>
+
+<style>
+  .gridContainer {
+    background-color: var(--mantle);
+    padding: 20px;
+    border-radius: 10px;
+  }
+
+  .btn {
+    background-color: var(--mauve-rgb);
+    color: var(--mauve);
+    padding: 10px;
+    margin-top: 10px;
+    border-radius: 15px;
+    text-align: center;
+    transition: all 300ms;
+  }
+
+  .btnDis {
+    background-color: var(--mauve-rgb);
+    color: var(--mauve);
+    padding: 10px;
+    margin-top: 10px;
+    border-radius: 15px;
+    text-align: center;
+    cursor: not-allowed;
+  }
+
+  .btn:hover {
+    background-color: var(--mauve);
+    color: var(--crust);
+  }
+  
+  a {
+    color: var(--mauve);
+    font-weight: 600;
+  }
+</style>