From 4f18ebf16bc6a8683c9f10ec436ae3f3e149e4c1 Mon Sep 17 00:00:00 2001
From: martincai8 <martincai46@gmail.com>
Date: Sun, 17 Nov 2024 21:30:27 -0800
Subject: [PATCH] update confetti and projects font size

---
 src/sections/Footer.jsx   |  6 +++---
 src/sections/Projects.jsx | 14 ++++++--------
 2 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/sections/Footer.jsx b/src/sections/Footer.jsx
index 1d3a07f5..74fae7bd 100644
--- a/src/sections/Footer.jsx
+++ b/src/sections/Footer.jsx
@@ -156,8 +156,8 @@ const ConfettiContainer = styled.div`
   position: absolute;
   top: 0;
   left: 0;
-  width: 3840px;
-  height: 2160px;
+  width: 200vw;
+  height: 200vh;
 
   canvas {
     width: 100% !important;
@@ -179,7 +179,7 @@ const Footer = () => {
         <ConfettiContainer>
           <Confetti
             mode="fall"
-            shapeSize={40}
+            shapeSize={20}
             colors={['#E261BB', '#61B5E2', '#E26161', '#E28A61', '#ED9823', '#FDC699']}
           />
         </ConfettiContainer>
diff --git a/src/sections/Projects.jsx b/src/sections/Projects.jsx
index 735a1070..b862ecdc 100644
--- a/src/sections/Projects.jsx
+++ b/src/sections/Projects.jsx
@@ -72,9 +72,8 @@ const ProjectsBackground = styled.div`
 `;
 
 const Title = styled.p`
-  font-family: 'LT Museum';
   color: white;
-  font-size: calc(100vw * (40 / 1280));
+  font-size: calc(100vw * (56 / 1280));
   font-weight: 700;
   position: relative;
   top: 120px;
@@ -82,30 +81,29 @@ const Title = styled.p`
   z-index: 1;
 
   ${p => p.theme.mediaQueries.tablet} {
-    font-size: calc(100vw * (40 / 1280));
+    font-size: calc(100vw * (56 / 834));
   }
 
   ${p => p.theme.mediaQueries.mobile} {
-    font-size: calc(100vw * (140 / 1280));
+    font-size: calc(100vw * (56 / 487));
     top: 20px;
   }
 `;
 
 const Description = styled.p`
-  font-family: 'LT Museum';
   color: white;
-  font-size: 1.2em;
+  font-size: calc(100vw * (20 / 1280));
   position: relative;
   top: 140px;
   text-align: center;
   z-index: 1;
 
   ${p => p.theme.mediaQueries.tablet} {
-    font-size: calc(100vw * (40 / 1280));
+    font-size: calc(100vw * (20 / 834));
   }
 
   ${p => p.theme.mediaQueries.mobile} {
-    font-size: calc(100vw * (60 / 1280));
+    font-size: calc(100vw * (20 / 487));
     top: 30px;
   }
 `;