changed projects section behavior

.prettierrc.mjs

@@ -0,0 +1,12 @@
+/** @type {import("prettier").Config} */
+export default {
+  plugins: ['prettier-plugin-astro', 'prettier-plugin-tailwindcss'],
+  overrides: [
+    {
+      files: '*.astro',
+      options: {
+        parser: 'astro',
+      },
+    },
+  ],
+};

package.json

@@ -16,15 +16,17 @@
     "@tsparticles/engine": "^3.5.0",
     "@tsparticles/interaction-particles-links": "^3.5.0",
     "@tsparticles/move-parallax": "^3.5.0",
-    "astro": "^4.16.10",
+    "astro": "^4.16.13",
-    "tailwindcss": "^3.4.14",
+    "tailwindcss": "^3.4.15",
     "typescript": "^5.6.3"
   },
   "devDependencies": {
     "clsx": "^2.1.1",
     "prettier": "^3.3.3",
     "prettier-plugin-astro": "^0.13.0",
+    "prettier-plugin-tailwindcss": "^0.6.8",
     "sharp": "^0.33.5",
     "tailwind-merge": "^2.5.4"
-  }
+  },
+  "packageManager": "pnpm@8.14.2+sha1.1670a65b60df5f95e9f0cb7de46e605d9bd74fda"
 }

src/components/Project.astro

@@ -2,6 +2,7 @@
 import Paragraph from "@/components/Paragraph.astro";
 import Link from "@/components/Link.astro";
 import { Image } from "astro:assets";
+import cn from "@/scripts/cn"
 
 type Props = {
   name: string;
@@ -14,10 +15,8 @@ const props: Props = Astro.props;
 ---
 
 <div
-  class={"flex justify-around items-center my-3" +
+  class={cn("flex justify-around items-center my-3 flex-col",
-    (props.reverse
+    (props.reverse ? "md:flex-row-reverse" : "md:flex-row"))}
-      ? " md:flex-row-reverse flex-col-reverse"
-      : " md:flex-row flex-col")}
 >
   <div class="basis-1/3 my-7">
     <Image

src/components/sections/Projects.astro

@@ -6,7 +6,7 @@ import Project from "@/components/Project.astro";
 
 import drfeelycom from "@/assets/drfeelycom.png";
 import ngen from "@/assets/ngen.png";
-//import jhdcom from "@/assets/jhdcom.png";
+<!-- import jhdcom from "@/assets/jhdcom.png"; -->
 ---
 
 <Section id="projects">
@@ -56,7 +56,7 @@ import ngen from "@/assets/ngen.png";
     <!-- in his band, "Amnesium." -->
   <!-- </Project> -->
 
-  <div class="flex justify-around mt-10">
+  <div class="mt-10 flex justify-around">
     <LinkButton href="https://git.noahsw.xyz">
       View all projects at git.noahsw.xyz
     </LinkButton>