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">
@@ -41,22 +41,22 @@ import ngen from "@/assets/ngen.png";
   </Project>
 
   <!-- <Project -->
-  <!-- name="JHUNTERDELOCHE.COM" -->
+    <!-- name="JHUNTERDELOCHE.COM" -->
-  <!-- image={{ src: jhdcom, alt: "Picture of jhunterdeloche.com homepage" }} -->
+    <!-- image={{ src: jhdcom, alt: "Picture of jhunterdeloche.com homepage" }} -->
-  <!-- links={[ -->
+    <!-- links={[ -->
-  <!-- { text: "JHunterDeLoche.com", url: "https://jhunterdeloche.com" }, -->
+      <!-- { text: "JHunterDeLoche.com", url: "https://jhunterdeloche.com" }, -->
-  <!-- { -->
+      <!-- { -->
-  <!-- text: "Git Repo", -->
+        <!-- text: "Git Repo", -->
-  <!-- url: "https://git.noahsw.xyz/noah/jhunterdeloche.com", -->
+        <!-- url: "https://git.noahsw.xyz/noah/jhunterdeloche.com", -->
-  <!-- }, -->
+      <!-- }, -->
-  <!-- ]} -->
+    <!-- ]} -->
   <!-- > -->
-  <!-- Personal website for Hunter DeLoche, a fellow University of Chicago student. -->
+    <!-- Personal website for Hunter DeLoche, a fellow University of Chicago student. -->
-  <!-- Includes information about Hunter's studies and music production activities -->
+    <!-- Includes information about Hunter's studies and music production activities -->
-  <!-- in his band, "Amnesium." -->
+    <!-- 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>