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);

src/styles/globals.css

@@ -26,21 +26,22 @@ html[data-theme="dark"] {
 
 body {
   width: 100%;
-  min-width: 1440px;
+  min-width: 320px;
   background-color: var(--bg-page);
   color: var(--text-primary);
   font-family: 'IRANYekanXVF', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   font-synthesis: none;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  overflow-x: auto;
+  overflow-x: hidden;
   transition: background-color 0.25s ease, color 0.25s ease;
 }
 
 /* Master 1440px Fixed Canvas */
 .desktop-canvas {
-  width: 1440px;
-  min-width: 1440px;
+  width: 100%;
+  max-width: var(--layout-frame);
+  min-width: 0;
   margin: 0 auto;
   position: relative;
   background-color: var(--bg-page);
@@ -49,11 +50,39 @@ body {
 
 /* 1320px Inner Content Container with 60px Gutters */
 .content-container {
-  width: 1320px;
+  width: calc(100% - (2 * var(--layout-page-gutter)));
+  max-width: var(--layout-container);
   margin: 0 auto;
   position: relative;
 }
 
+@media (max-width: 1024px) {
+  :root {
+    --layout-page-gutter: 32px;
+    --layout-section-padding: 80px;
+  }
+}
+
+@media (max-width: 640px) {
+  :root {
+    --layout-page-gutter: 20px;
+    --layout-section-padding: 64px;
+  }
+
+  .section-header {
+    margin-bottom: var(--space-6);
+  }
+
+  .section-title {
+    font-size: 28px;
+    line-height: 38px;
+  }
+
+  .section-underline {
+    width: 88px;
+  }
+}
+
 /* Common Section Header Component Styles */
 .section-header {
   display: flex;
@@ -153,6 +182,19 @@ body {
   box-shadow: 0 4px 12px var(--shadow-color);
 }
 
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+
+  *, *::before, *::after {
+    scroll-behavior: auto !important;
+    transition-duration: 0.01ms !important;
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+  }
+}
+
 a {
   color: inherit;
   text-decoration: none;