added skills and improved gallery

package.json

@@ -13,8 +13,12 @@
     "@astrojs/markdown-remark": "^4.2.1",
     "@astrojs/mdx": "^2.1.1",
     "@expressive-code/plugin-shiki": "^0.32.4",
+    "@iconify-json/flat-color-icons": "^1.1.10",
+    "@iconify-json/logos": "^1.1.43",
     "@iconify-json/prime": "^1.1.12",
+    "@iconify-json/simple-icons": "^1.1.109",
     "@iconify-json/typcn": "^1.1.9",
+    "@iconify-json/vscode-icons": "^1.1.35",
     "@microflash/remark-callout-directives": "^2.0.0",
     "astro": "^4.2.6",
     "astro-expressive-code": "^0.32.4",

src/components/GalaryZoom.astro

@@ -16,7 +16,7 @@
       min-height: 20px;
       min-width: 20px;
       max-height: 35%;
-      max-width: 40%;
+      max-width: 50%;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
@@ -38,10 +38,8 @@
     document.getElementById("galary-zoom").style.display = "initial";
     document.getElementById("zoom-image").src = img.src;
   }
-  function hide(dom) {
-    document.body.classList.remove("remove-scrolling");
-    dom.style.display = "none";
-  }
 </script>
 
-<div id="galary-zoom" onclick="hide(this)"><img id="zoom-image" /></div>
+<div id="galary-zoom" onclick='this.style.display = "none";'>
+  <img id="zoom-image" />
+</div>

src/components/ProjectCard.astro

@@ -5,9 +5,10 @@ interface Props {
   name: string;
   href?: string;
   gallery?: string | string[];
+  center?: true;
 }
 
-const { name, href, gallery } = Astro.props;
+const { name, href, gallery, center } = Astro.props;
 ---
 
 <style lang="scss">
@@ -18,7 +19,6 @@ const { name, href, gallery } = Astro.props;
     &.project-external {
       text-decoration: none;
       &::after {
-        background-color: white;
         width: 20px;
         position: absolute;
         right: 20px;
@@ -33,25 +33,14 @@ const { name, href, gallery } = Astro.props;
     transition: border-color 0.3s;
     .gallery {
       margin-top: -30px;
-      margin-bottom: 20px;
-      height: 260px;
       img {
-        position: static;
         max-height: 250px;
         margin: 20px 10px;
         border-radius: 10px;
-        transition: all 0.3s;
+        transition: transform 0.3s;
         cursor: pointer;
         &:hover {
-          &.single {
+          transform: scale(1.1);
-            position: relative;
-            height: inherit !important;
-          }
-          & {
-            margin: 0 !important;
-            max-height: 260px;
-            height: 280px;
-          }
         }
       }
     }
@@ -69,9 +58,11 @@ const { name, href, gallery } = Astro.props;
   }
   @media (max-width: $responsive-width) {
     .gallery {
-      height: initial !important;
       margin-top: -4px;
       text-align: center;
+      img {
+        max-height: 15vh !important;
+      }
       * {
         margin: 2px !important;
       }
@@ -87,7 +78,10 @@ const { name, href, gallery } = Astro.props;
   <a class="project-external" target={href ? "_blank" : ""} href={href}>
     <h2>{name}</h2><slot />
     <a>
-      <div class={gallery ? "gallery" : ""}>
+      <div
+        style={center ? "text-align: center;" : ""}
+        class={gallery ? "gallery" : ""}
+      >
         {
           Array.isArray(gallery) ? (
             gallery.map((src) => (

src/data/skills.ts

@@ -0,0 +1,126 @@
+type Skill = {
+    [name: string]: {
+        iconName: string
+        url?: string
+        color?: string
+    }
+}
+
+const skills: Skill = {
+    "React": {
+        iconName: "mdi:react",
+        url: "https://react.dev/",
+        color: "#60C7DE"
+    },
+    "React Native": {
+        iconName: "mdi:react",
+        url: "https://reactnative.dev/",
+        color: "#60C7DE"
+    },
+    "TypeScript": {
+        iconName: "mdi:language-typescript",
+        url: "https://github.com/topics/typescript",
+        color: "#3178c6"
+    },
+    "Capacitor.js": {
+        iconName: "logos:capacitorjs-icon",
+        url: "https://capacitorjs.com/",
+        color: "#35A4EF"
+    },
+    "Android": {
+        iconName: "mdi:android",
+        url: "https://android.com/",
+        color: "#3DDC84"
+    },
+    "iOS": {
+        iconName: "mdi:apple-ios",
+    },
+    "Vue": {
+        iconName: "logos:vue",
+        url: "https://vuejs.org/",
+        color: "#41b883"
+    },
+    "Go": {
+        iconName: "logos:go",
+        url: "https://go.dev/",
+        color: "#00acd7"
+    },
+    "Tauri": {
+        iconName: "logos:tauri",
+        url: "https://tauri.app/",
+        color: "#24c8db"
+    },
+    "Git": {
+        iconName: "mdi:git",
+        url: "https://git-scm.com/",
+        color: "#de4c36"
+    },
+    "Tailwind": {
+        iconName: "logos:tailwindcss-icon",
+        url: "https://tailwindcss.com/",
+        color: "#44a8b3"
+    },
+    "Python": {
+        iconName: "logos:python",
+        url: "https://python.org/",
+        color: "#3572A5"
+    },
+    "Linux": {
+        iconName: "flat-color-icons:linux",
+    },
+    "C++": {
+        iconName: "mdi:language-cpp",
+        url: "https://github.com/topics/cpp?l=c%2B%2B&o",
+        color: "#f34b7d"
+    },
+    "C#": {
+        iconName: "mdi:language-csharp",
+        url: "https://github.com/topics/c-sharp?l=c%23",
+        color: "#178600"
+    },
+    "Godot": {
+        iconName: "logos:godot-icon",
+        url: "https://godotengine.org/",
+        color: "#478cbf"
+    },
+    "Unreal Engine": {
+        iconName: "mdi:unreal",
+        url: "https://www.unrealengine.com/"
+    },
+    "Astro": {
+        iconName: "vscode-icons:file-type-astro",
+        url: "https://astro.build/",
+        color: "#ff5a03"
+    },
+    "Bun": {
+        iconName: "logos:bun",
+        url: "https://bun.sh/"
+    },
+    "Blender": {
+        iconName: "logos:blender",
+        url: "https://blender.org/",
+        color: "#e87d0d"
+    },
+    "OpenAI API": {
+        iconName: "simple-icons:openai",
+        url: "https://platform.openai.com/docs/api-reference/"
+    },
+    "Elevenlabs API": {
+        iconName: "mdi:two",
+        url: "https://elevenlabs.io/api"
+    },
+    "Adobe Photoshop": {
+        iconName: "logos:adobe-photoshop"
+    },
+    "Adobe Illustrator": {
+        iconName: "logos:adobe-illustrator"
+    },
+    "Adobe Premiere": {
+        iconName: "logos:adobe-premiere"
+    },
+    "Adobe Indesign": {
+        iconName: "logos:adobe-indesign"
+    }
+}
+
+export { skills }

src/pages/projects.astro

@@ -19,6 +19,7 @@ import GalaryZoom from "../components/GalaryZoom.astro";
       <GalaryZoom />
       <ProjectCard
         name="voicenext"
+        center={true}
         gallery={[
           "/img/projects/voicenext/Promo.png",
           "/img/projects/voicenext/Home.png",