ref: improve responsive

src/components/Avatar/avatar.ts

@@ -4,6 +4,10 @@ export const Avatar = styled.img`
 border-radius: 50%;
 width: 5rem;
 height: 5rem;
+@media(max-width: 480px){
+    width: 10rem;
+    height: 10rem;
+}
 `
 export const AvatarHeader = styled.img`
 border-radius: 50%;

src/pages/home/styles.ts

@@ -26,4 +26,8 @@ gap: 1rem;
 span{
   font-size: 2.3rem;
 }
+@media (max-width: 448px) {
+  display: block;
+  font-size: 1rem;
+}
 `

src/pages/projects/styles.ts

@@ -10,6 +10,9 @@ export const ProjectGrid = styled.div`
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 2rem;
   width: 100%;
+  @media(max-width: 512px){
+    display: block;
+  }
 `;
 
 export const ProjectCard = styled.a`
@@ -25,11 +28,18 @@ export const ProjectCard = styled.a`
   &:hover {
     transform: translateY(-5px);
   }
+  @media(max-width: 512px){
+    display: block;
+    margin-bottom: 1rem;
+  }
 `;
 
 export const ProjectName = styled.h2`
   font-size: 1.5rem;
   margin-bottom: 0.5rem;
+  @media(max-width: 512px){
+    font-size: 1.3rem;
+  }
 `;
 
 export const ProjectDescription = styled.p`

src/pages/skills/styles.ts

@@ -2,9 +2,17 @@ import styled from "styled-components";
 
 export const SkillsContainer = styled.div`
 display: flex;
+flex-direction: row;
 margin-top: 1rem;
+align-items: center;
 p {
     margin-left: 0.3rem;
     margin-right: 2.5rem;
 }
+@media(max-width: 1090px){
+    flex-direction: column;
+    p{
+        margin: 0 0 1rem 0;
+    }
+}
 `