profile pictures + updating prettier

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "singleQuote": true,
+  "trailingComma": "none",
+  "arrowParens": "avoid",
+  "printWidth": 80,
+  "semi": false
+}

package.json

@@ -80,6 +80,6 @@
   "devDependencies": {
     "eslint": "8.55.0",
     "eslint-config-next": "14.0.3",
-    "prettier": "^3.0.3"
+    "prettier": "^3.2.2"
   }
 }

pages/slack.js

@@ -350,18 +350,21 @@ const SlackPage = () => {
           <Quote
             text="I knew it's where I wanted to be"
             person="Shawn"
+            img="https://cloud-8u876lgxi-hack-club-bot.vercel.app/0shawn.png"
             age={18}
             location="MD"
           />
           <Quote
             text="I felt so free- there were no expectations"
             person="JC"
+            img="https://ca.slack-edge.com/T0266FRGM-U03MNFDRSGJ-e6fb939acfd8-512"
             age={17}
             location="CT"
           />
           <Quote
             text="Finally, I found my people!"
             person="Cheru"
+            img="https://ca.slack-edge.com/T0266FRGM-U02UYFZQ0G0-eb4e3c7fb0cf-512"
             age={16}
             location="VT"
           />
@@ -381,7 +384,7 @@ const SlackPage = () => {
             sx={{
               width: ['100%', '50%'],
               paddingX: '32px',
-              display: ['flex'],
+              display: 'flex',
               alignItems: 'center',
               justifyContent: 'center'
             }}
@@ -460,17 +463,24 @@ function Project({ title, description, sx, color, img }) {
         <Text
           as="p"
           variant="subtitle"
-          sx={{ width: ['full', 'copyPlus'], opacity: '75%', textAlign: 'center' }}
+          sx={{
+            width: ['full', 'copyPlus'],
+            opacity: '75%',
+            textAlign: 'center'
+          }}
         >
           {description}
         </Text>
       </Box>
-      <Image src={`/slack/${img}.png`} sx={{ visibility: ['hidden', 'visible'] }} />
+      <Image
+        src={`/slack/${img}.png`}
+        sx={{ visibility: ['hidden', 'visible'] }}
+      />
     </Box>
   )
 }
 
-function Quote({ text, person, age, location }) {
+function Quote({ text, person, age, location, img }) {
   return (
     <Box
       sx={{
@@ -483,9 +493,12 @@ function Quote({ text, person, age, location }) {
       <Text as="h3" variant="title" sx={{ mb: 3, fontSize: ['36px', 4, 5] }}>
         "{text}"
       </Text>
-      <Text as="p" variant="paragraph">
+      <Flex sx={{ gap: '8px' }}>
-        {person}, {age} from {location}
+        <Image src={img} sx={{ height: 24, width: 24, borderRadius: 100 }} />
-      </Text>
+        <Text as="p" variant="paragraph">
+          {person}, {age} from {location}
+        </Text>
+      </Flex>
     </Box>
   )
 }

prettier.config.js

@@ -1,7 +0,0 @@
-module.exports = {
-  singleQuote: true,
-  trailingComma: 'none',
-  arrowParens: 'avoid',
-  printWidth: 80,
-  semi: false
-}

yarn.lock

@@ -6366,10 +6366,10 @@ prelude-ls@^1.2.1:
   resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
-prettier@^3.0.3:
+prettier@^3.2.2:
-  version "3.0.3"
+  version "3.2.2"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.0.3.tgz#432a51f7ba422d1469096c0fdc28e235db8f9643"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.2.2.tgz#96e580f7ca9c96090ad054616c0c4597e2844b65"
-  integrity sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg==
+  integrity sha512-HTByuKZzw7utPiDO523Tt2pLtEyK7OibUD9suEJQrPUCYQqrHr74GGX6VidMrovbf/I50mPqr8j/II6oBAuc5A==
 
 prismjs@~1.27.0:
   version "1.27.0"