Rescaling Team Page

[dilanurbayraktar]

Less wonky Team Page on smaller screens 😵‍💫

Summary 💻

POV: you run npm run dev and navigate to http://localhost:5173/team. "Wow! The team page looks so good." Then, you click the windowed mode button and become horrified as the styles freak out! No worries, for this ticket, you will build the responsiveness on the component file (teampage.tsx).

Deliverables 🚀

• Schedule at least two meetings as a pair
• Create a new branch using the "create a branch" button
• Create your page in /src/components/
• Style the page to match the footer in the wireframe (see below).
• Open a PR and request review from @brandondionisio.

Wireframe 🎨

Unfortunately, we don't have a rescaled design of the Team Page 🫣, buttttt we do give you some guidance on how to best style it for different screen sizes. You have some flexibility in how you want to rescale the page (as long as the page looks decent).

Tip for success 📈

For all the sections below, the font and box sizes should decrease proportionally as the screen size decreases.

• Meet Our Team: For smaller screen sizes, vertically align the boxes. You could also consider having the texts placed under the images if you think it looks better that way
• Contact Us: This section should be relatively easier as it just consists of text. For phone screens, you could have the texts aligned vertically in the following format: Find Us on Instagram -> @LCSTutors -> Email Us -> [email protected]
• Tailwind allows you to apply certain styles for different screen sizes. These are called breakpoints. A breakpoint to apply a certain style for small screens and larger looks like: sm:[style].
• Here's an amazing resource to get you guys started: https://tailwindcss.com/docs/responsive-design
• You don't have to change anything with the header and footer!!
• Additionally, for long blocks of text, they will often exceed the size of the parent div and the overflow will be visible. There are a ton of tailwind classes to prevent this from happening. For example overflow-hidden text-ellipsis will cut off extra text and the cut off will be an ellipsis.
• Tailwind overflow resources: https://tailwindcss.com/docs/text-overflow, https://tailwindcss.com/docs/text-wrap
• Chrome Dev Tools will be your friend for this ticket. Press f12 to inspect the page -> the middle icon on the image below:
  

Where to get help!

Reach out to @dilanurbayraktar and @brandondionisio.