Update projects

- Added a new project.
- Updated thumbnails for existing projects.
- Fixed uneven thumbnail sizes.

Author: swayam25

README.md

@@ -6,7 +6,7 @@ My portfolio website
 
 </div>
 
-## 🚀 Installation
+## 🚩 Installation
 
 1. Clone this repository
     ```sh
@@ -21,19 +21,11 @@ My portfolio website
 
 3. Start the app
     ```sh
-    pnpm run dev -- --port 2500
+    pnpm run dev
     ```
 
-## 🌐 Production
+## 🚀 Production
 
-1. Follow steps 1 & 2 from the [installation guide](#-installation). *Ignore if already done.*
-
-2. Build the app
-    ```sh
-    pnpm run build
-    ```
-
-3. Preview the app
-    ```sh
-    pnpm run preview -- --port 2500
-    ```
+- This project is configured to use the `static-adapter`, which enables deployment on static hosting services such as GitHub Pages, Cloudflare Pages/Workers, and similar platforms.
+- The project is currently hosted on GitHub Pages with an automated GitHub Workflow that deploys changes upon push to the `main` branch.
+- For detailed GitHub Pages implementation configuration, refer to [`.github/workflows/pages.yml`](./.github/workflows/pages.yml).

src/lib/data/projects.ts

@@ -9,6 +9,13 @@ interface Project {
 }
 
 const projects: Project = {
+    "MC Addon": {
+        desc: "Welcome to the official hub of MC Addon! A competitive, community-driven Lifesteal Minecraft Network with thrilling mechanics, epic events, and intense mini-games!",
+        url: "https://mcaddon.fun",
+        img: "/project/mcaddon.webp",
+        time: 2025,
+        tags: ["Minecraft", "Lifesteal", "SMP"]
+    },
     Aero: {
         desc: "Aero makes listening to music feel light and breezy.",
         url: "https://github.com/swayam25/Aero",

src/routes/+page.svelte

@@ -149,11 +149,10 @@
                                 <div
                                     class="flex flex-col items-center justify-start gap-y-4 md:flex-row md:items-start md:gap-x-4 md:gap-y-0"
                                 >
-                                    <img
-                                        src={data.img}
-                                        alt={name}
-                                        class="rounded-lg border border-slate-900 object-cover md:h-24 md:w-48"
-                                    />
+                                    <div
+                                        class="aspect-video w-full rounded-lg border border-slate-900 bg-slate-900 bg-cover bg-center object-cover md:h-24 md:w-auto"
+                                        style="background-image: url({data.img});"
+                                    ></div>
                                     <div class="flex flex-col items-start justify-center">
                                         <div class="flex w-full items-center justify-between">
                                             <div class="flex items-center justify-start gap-x-1">