feat: make portfolio frame fluid below 1440px

src/components/EducationSection.module.css

@@ -1,12 +1,12 @@
 .educationSection {
   position: relative;
-  width: 1440px;
+  width: 100%;
   padding-top: 60px;
   padding-bottom: 32px;
 }
 
 .card {
-  width: 1320px;
+  width: 100%;
   background-color: transparent;
   border: 1px solid var(--border-default);
   border-radius: var(--radius-lg);

src/components/ExperienceSection.module.css

@@ -1,6 +1,6 @@
 .experienceSection {
   position: relative;
-  width: 1440px;
+  width: 100%;
   padding-top: 60px;
   padding-bottom: 80px;
 }

src/components/FooterSection.module.css

@@ -1,6 +1,7 @@
 .footerSection {
   position: relative;
-  width: 1440px;
+  width: 100%;
+  max-width: 1440px;
   height: 480px;
   overflow: hidden;
   display: flex;
@@ -14,7 +15,7 @@
   position: absolute;
   top: 0;
   left: 0;
-  width: 1440px;
+  width: 100%;
   height: 480px;
   z-index: 1;
 }

src/components/HeroSection.module.css

@@ -1,6 +1,6 @@
 .heroContentWrapper {
   position: relative;
-  width: 1440px;
+  width: 100%;
   height: 680px;
   z-index: 5;
 }

src/components/MilestonesSection.module.css

@@ -1,6 +1,6 @@
 .milestonesSection {
   position: relative;
-  width: 1440px;
+  width: 100%;
   padding-top: 40px;
   padding-bottom: 80px;
 }
@@ -12,7 +12,7 @@
 }
 
 .certCard {
-  width: 1320px;
+  width: 100%;
   background-color: transparent;
   border: 1px solid var(--border-default);
   border-radius: var(--radius-lg);

src/components/ProjectsSection.module.css

@@ -1,6 +1,6 @@
 .projectsSection {
   position: relative;
-  width: 1440px;
+  width: 100%;
   padding-top: 60px;
   padding-bottom: 80px;
 }

src/components/RiverJourney.module.css

@@ -1,6 +1,6 @@
 .journeySection {
   position: relative;
-  width: 1440px;
+  width: 100%;
   height: 1050px;
   /* Seamless continuation of scenic artwork */
 }

src/components/ScenicHeroJourney.module.css

@@ -1,6 +1,7 @@
 .scenicContainer {
   position: relative;
-  width: 1440px;
+  width: 100%;
+  max-width: 1440px;
   height: 1730px;
   overflow: hidden;
   background-color: var(--bg-page);
@@ -10,7 +11,7 @@
   position: absolute;
   top: 0;
   left: 0;
-  width: 1440px;
+  width: 100%;
   height: 1576px;
   z-index: 1;
   pointer-events: none;
@@ -19,6 +20,6 @@
 .artworkImage {
   object-fit: contain;
   object-position: top center;
-  width: 1440px;
+  width: 100%;
   height: 1576px;
 }

src/components/SkillsSection.module.css

@@ -1,12 +1,12 @@
 .skillsSection {
   position: relative;
-  width: 1440px;
+  width: 100%;
   padding-top: 60px;
   padding-bottom: 80px;
 }
 
 .mainCard {
-  width: 1320px;
+  width: 100%;
   background-color: transparent;
   border: 1px solid var(--border-default);
   border-radius: var(--radius-xl);