Fix few responsiveness aspects

- Fixed projects page overflowing in unexpected way on smaller screens
- Made section windows smaller to make clicking off them easier on mobile

Author: meowabyte

src/components/menu/body/aboutme.tsx

@@ -12,8 +12,8 @@ const calculateAge = (birthDate: Date): number => {
 const age = calculateAge(new Date(2005, 4, 27))
 
 export default function AboutMe() {
-    return <ModalBody className="grid max-lg:w-5/6 max-md:grid-rows-[0.5fr_2fr] md:grid-cols-[1fr_2fr] gap-5">
-        <Image priority className="justify-self-center" width={300} height={300} src="https://github.com/kvba5.png?size=300" alt="Avatar" />
+    return <ModalBody className="grid max-lg:w-4/5 max-md:grid-rows-[0.5fr_2fr] md:grid-cols-[1fr_2fr] gap-5">
+        <Image priority className="justify-self-center" width={400} height={400} src="https://github.com/kvba5.png?size=400" alt="Avatar" />
         <div className="overflow-y-auto">
             <h2 className="mb-5">About me</h2>
             <span>Hi! I'm Kuba! I'm a {age}-year-old software developer. I am passionate in AI, analytics and automation of various kinds of things. I like to create things that can make other people's life easier or that can make me happy. In spare time, I like to experiment with other hobbies like video editing or making music. I'd be more than happy if you could show me some support by checking out my projects on GitHub! (and maybe even contribute to them! :D)</span>

src/components/menu/body/projects.tsx

@@ -51,13 +51,13 @@ function Project({ repo: { name, description, stars, language } }: { repo: RepoD
 }
 
 function ProjectsList() {
-    return <div className="lg:grid lg:grid-cols-2 max-lg:flex max-lg:flex-col gap-5 overflow-y-auto">
+    return <div className="grid lg:grid-cols-2 max-lg:grid-cols-1 gap-5 max-lg:overflow-y-auto p-3">
         {FEATURED_REPOS.map((r, i) => <Project repo={r} key={`featuredrepo-${i}`} />)}
     </div>
 }
 
 export default function Projects() {
-    return <ModalBody className="flex flex-col gap-3">
+    return <ModalBody className="flex flex-col gap-3 max-sm:w-4/5">
         <h2 className="text-center">My featured projects!</h2>
         <ProjectsList />
     </ModalBody>

src/components/menu/body/social.tsx

@@ -61,7 +61,7 @@ function SocialLink({ data: [type, data] }: { data: [string, string | string[]]
 }
 
 export default function Social() {
-    return <ModalBody className="grid max-lg:grid-rows-2 lg:grid-cols-2 max-sm:w-5/6 lg:justify-between gap-10 *:[&>h2]:text-center *:[&>h2]:mb-5 *:*:*:grid *:*:*:grid-cols-2 *:*:*:content-between">
+    return <ModalBody className="grid max-lg:grid-rows-2 lg:grid-cols-2 max-sm:w-4/5 lg:justify-between gap-10 *:[&>h2]:text-center *:[&>h2]:mb-5 *:*:*:grid *:*:*:grid-cols-2 *:*:*:content-between">
         <div>
             <h2>Socials</h2>
             <div>{Object.entries(SOCIALS).map((s, i) => <SocialLink data={s} key={`social-entry-${i}`} />)}</div>