linter issues

app/components/seafood-delights/seafood-button.tsx

@@ -7,10 +7,13 @@ export default function SeafoodButton() {
 
     // set maxShrimp based on image size so not to overflow
     const maxShrimp = 83;
-    const shrimpRainValues: number[] = [];
-    for (let i = 0; i < maxShrimp; i++) {
-        shrimpRainValues.push(Math.floor(Math.random() * 200));
-    }
+    const [shrimpRainValues] = useState(() => {
+        const shrimpRainValuesArr: number[] = [];
+        for (let i = 0; i < maxShrimp; i++) {
+            shrimpRainValuesArr.push(Math.floor(Math.random() * 200));
+        }
+        return shrimpRainValuesArr;
+    });
 
     function itsRainingShrimp() {
         setShowShrimpOverlay(true);

app/components/seafood-delights/seafood-delights.tsx

@@ -7,8 +7,8 @@ export default function SeafoodDelights() {
                 <p className="font-bold">
                     We are Shrimp Squad and we make things.
                 </p>
-                There's no project we can't mantis punch. Shrimply take a look
-                at what we're known for.
+                There&apos;s no project we can&apos;t mantis punch. Shrimply
+                take a look at what we&apos;re known for.
             </div>
             <SeafoodButton />
         </section>

app/components/seafood-delights/shrimp-rain.tsx

@@ -6,8 +6,6 @@ export function ShrimpRain({ randomValues }: { randomValues: number[] }) {
 
     const shrimpImagesArray = Array.from(Array(maxWidthToShrimp).keys());
     const shrimpImagesArrayElements = shrimpImagesArray.map((index) => {
-        const left = "left-[" + (index + 1) + "%]";
-        const bottom = "bottom-[" + randomValues[index] + "%]";
         return (
             <Image
                 key={index}

app/components/shrimp-projects/project-descriptions/biotama.tsx

@@ -6,11 +6,11 @@ export default function BiotamaText() {
                 players attempt to convert wastelands into thriving ecosystems.
             </p>
             <p className="mb-2">
-                The player starts with a "Mother Tree" which acts as the core
-                component of the player's ecosystem. Trees grow roots that can
-                connect together, allowing them to communicate and send
-                resources between each other. Mycelial networks function
-                similarly for fungi.
+                The player starts with a &quot;Mother Tree&quot; which acts as
+                the core component of the player&apos;s ecosystem. Trees grow
+                roots that can connect together, allowing them to communicate
+                and send resources between each other. Mycelial networks
+                function similarly for fungi.
             </p>
             <p>
                 Biotama aims to be educational as well as fun. It will feature

app/components/shrimp-projects/project-list/project-list.tsx

@@ -5,7 +5,7 @@ export default function ProjectList({
     handleProjectClick,
 }: {
     projects: ProjectListProps[];
-    handleProjectClick: any;
+    handleProjectClick: (project: string) => void;
 }) {
     const projectList = projects.map((project) => (
         <button