feat: make / route more responsive to smaller viewports

src/App.css

@@ -7,14 +7,11 @@ body {
   height: 360px;
 
   position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-
-  margin: auto;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
   text-align: center;
-  overflow: auto;
+  overflow: visible;
 }
 
 .icons {
@@ -28,3 +25,9 @@ body {
 .icons *:last-child {
   margin-right: 0;
 }
+
+@media (max-width: 480px) {
+  .aboutMeBox {
+    width: 100%;
+  }
+}

src/App.tsx

@@ -10,7 +10,7 @@ function App() {
   return (
     <div>
       <div className='aboutMeBox'>
-        <img src='https://github.com/SrIzan10.png' alt='main profile picture' height='200px' />
+        <img src='https://github.com/SrIzan10.png' alt='main profile picture' height='200px' style={{ borderRadius: '70px' }} />
         <p>I'm a hobbyist developer and osu! player based on Spain who loves to open-source and to work on teams.</p>
         <p>Stalk me on social media:</p>
         <div className='icons'>

src/BlogPost.css

@@ -7,7 +7,7 @@
     line-height: 2;
 }
 
-@media (max-width: 1160px) {
+@media (max-width: 900px) {
     .blogPostContent {
         padding: 0;
     }