Better Scaling and responsiveness

Author: AttAditya

src/components/Future/index.jsx

@@ -14,14 +14,14 @@ export function Future() {
     ].join(" "),
     [
       "It will be very easy to use, in desktops, web and most importantly,",
-      "in virtual and augmented reality(in the future).",
+      "in virtual and augmented reality (in the future).",
     ].join(" "),
   ];
 
   return (<>
     <Section
       icon={<RectangleGoggles />}
-      name="The Future of Programming is Coming!"
+      name="Programming Like The Future"
     >
       {contents.map(text => <p key={text}>{text}</p>)}
     </Section>

src/components/Hero/style.css

@@ -23,7 +23,7 @@
 }
 
 .brand-logo {
-  width: min(50vw, 20rem);
+  width: min(50vw, 15rem);
   aspect-ratio: 1;
 }
 

src/components/Navbar/style.css

@@ -23,12 +23,12 @@
   align-items: center;
   height: 100%;
   gap: 0.5rem;
-  padding: 1rem;
+  padding: 0.5rem;
   border-radius: 0.5rem;
-  font-size: 1.2rem;
+  font-size: 1rem;
   position: relative;
   background: var(--gradient);
-  opacity: 0.5;
+  opacity: 0.3;
 }
 
 .nav-links:hover {
@@ -40,7 +40,7 @@
   text-decoration: none;
   cursor: pointer;
   position: relative;
-  padding: 0.5rem 1rem;
+  padding: 0.5rem 0.75rem;
   border-radius: 0.5rem;
 }
 
@@ -51,7 +51,7 @@
 .nav-link-sep {
   display: block;
   width: 0.125rem;
-  height: 2rem;
+  height: 1rem;
   background: white;
   transition: width 0.3s ease-in-out;
 }

src/components/Section/style.css

@@ -1,13 +1,12 @@
 .section {
   display: flex;
-  padding: 4rem;
-  gap: 4rem;
+  padding: 2rem;
   align-items: start;
 }
 
 .section-icon {
   flex: 1;
-  padding: 0rem 5rem;
+  padding: 0rem 2rem;
   position: sticky;
   top: 0;
   display: flex;
@@ -27,20 +26,22 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  gap: 4rem;
+  gap: 2rem;
 }
 
 .section-name {
   background: var(--gradient);
   display: flex;
   padding: 1rem 2rem;
   border-radius: 1rem;
-  font-size: 2.5rem;
+  font-size: 2rem;
   font-weight: 600;
+  text-wrap-style: balance;
+  text-align: center;
 }
 
 .section-description {
-  font-size: 2rem;
+  font-size: 1.5rem;
   text-align: left;
   color: var(--text-secondary);
   line-height: 1.5;
@@ -50,3 +51,28 @@
   gap: 1rem;
 }
 
+.section-description p {
+  text-align: left;
+}
+
+@media (max-width: 1000px) {
+  .section {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .section-icon {
+    width: min(50vw, 20rem);
+    position: relative;
+  }
+
+  .section-content {
+    padding: 2rem;
+    width: 100%;
+  }
+
+  .section-description {
+    text-wrap-style: balance;
+  }
+}
+