Fix: migrated to Sass module system and resolved variable scope issues

package.json

@@ -20,11 +20,11 @@
   },
   "homepage": "https://github.com/cobiwave/simplefolio#readme",
   "devDependencies": {
-    "@parcel/transformer-sass": "^2.8.2",
     "parcel": "^2.8.2",
     "prettier": "^2.8.1"
   },
   "dependencies": {
+    "@parcel/transformer-sass": "^2.16.0",
     "@popperjs/core": "^2.11.6",
     "bootstrap": "^5.2.3",
     "jquery": "^3.6.3",

src/data/scrollRevealConfig.js

@@ -64,4 +64,11 @@ export const targetElements = [
       origin: "bottom",
     },
   },
+  {
+    element: ".experience-wrapper",
+    animation: {
+        delay: 500,
+        origin: window.innerWidth > 768 ? "left" : "bottom",
+    },
+  }
 ];

src/index.html

@@ -266,6 +266,36 @@ <h3 class="project-wrapper__text-title">Project Title 2</h3>
       </div>
     </section>
     <!-- /END Projects Section -->
+    <!-- **** Experience Section **** -->
+<section id="experience">
+  <div class="container">
+    <h2 class="section-title ">Experience</h2>
+    <div class="experience-wrapper load-hidden">
+      <ul class="experience-wrapper__list">
+        <li class="experience-wrapper__list-item">
+          <h3 class="experience-wrapper__list-item-title">Job Title 1</h3>
+          <p class="experience-wrapper__list-item-subtitle">
+            Company Name | Start Date - End Date
+          </p>
+          <p class="experience-wrapper__list-item-text">
+            Describe your role, responsibilities, and achievements in this position.
+          </p>
+        </li>
+
+        <li class="experience-wrapper__list-item">
+          <h3 class="experience-wrapper__list-item-title">Job Title 2</h3>
+          <p class="experience-wrapper__list-item-subtitle">
+            Company Name | Start Date - End Date
+          </p>
+          <p class="experience-wrapper__list-item-text">
+            Describe your role, responsibilities, and achievements in this position.
+          </p>
+        </li>
+      </ul>
+    </div>
+  </div>
+</section>
+    <!-- /END Experience Section -->
 
     <!-- **** Contact Section **** -->
     <section id="contact">
@@ -276,7 +306,7 @@ <h2 class="section-title">Contact</h2>
           <a
             rel="noreferrer"
             target="_blank"
-            class="cta-btn cta-btn--resume"
+            class="cta-btn cta-btn--hero"
             href="mailto:example@email.com"
             >Call to Action</a
           >

src/sass/abstracts/_index.scss

@@ -0,0 +1,3 @@
+@forward "variables";
+@forward "mixins";
+@forward "helpers";

src/sass/abstracts/_mixins.scss

@@ -12,6 +12,8 @@
 ORDER: Base + Typography > Generar Layout + Grid > Page Layout > Components
 
 */
+@use "../abstracts/variables" as *;
+
 @mixin respond($breakpoint) {
   // Phone-xs
   @if $breakpoint == phone-xs {

src/sass/base/_base.scss

@@ -1,3 +1,4 @@
+@use "../abstracts/variables" as *;
 html {
   font-size: 62.5%;
 

src/sass/base/_typography.scss

@@ -1,5 +1,6 @@
+@use "../abstracts/variables" as *;
+@use "../abstracts/mixins" as *;
 @import url("https://fonts.googleapis.com/css?family=Montserrat:400,700");
-
 h1 {
   font-weight: 700;
 }

src/sass/components/_buttons.scss

@@ -1,3 +1,6 @@
+@use "../abstracts/variables" as *;
+@use "../abstracts/mixins" as *;
+
 /* Call to Action Button */
 .cta-btn {
   display: inline-block;

src/sass/layout/_footer.scss

@@ -1,3 +1,6 @@
+@use "../abstracts/variables" as *;
+@use "../abstracts/mixins" as *;
+
 .footer {
   background-color: $dark-grey;
   color: $white-color;

src/sass/layout/_sections.scss

@@ -1,3 +1,6 @@
+@use "../abstracts/variables" as *;
+@use "../abstracts/mixins" as *;
+
 // Section
 section {
   padding: 5rem 0rem;

src/sass/sections/_about.scss

@@ -1,3 +1,6 @@
+@use "../abstracts/variables" as *;
+@use "../abstracts/mixins" as *;
+
 #about {
   background-color: $primary-color;
   background-image: linear-gradient(

src/sass/sections/_contact.scss

@@ -1,15 +1,15 @@
+@use "../abstracts/variables" as *;
+@use "../abstracts/mixins" as *;
+
 #contact {
-  background-image: linear-gradient(
-    135deg,
-    $primary-color 0%,
-    $secondary-color 100%
-  );
+  background-color: $white-color;
+  color: $dark-blue-text;
   -webkit-clip-path: polygon(0 15vh, 100% 0, 100% 100%, 0 100%);
   clip-path: polygon(0 15vh, 100% 0, 100% 100%, 0 100%);
   padding: 15rem 0 10rem 0;
   margin-top: -10rem;
   margin-bottom: -1px;
-  color: $white-color;
+  color: black;
 
   @include respond(tab-land) {
     padding: 10rem 0;
@@ -20,11 +20,13 @@
 
   .contact-wrapper {
     margin-top: 3.2rem;
+    color: $dark-blue-text;
     padding: 0 2rem;
     backface-visibility: hidden;
 
     &__text {
       margin-bottom: 2.5rem;
+      color: $dark-grey;
     }
 
     &__text,

src/sass/sections/_experience.scss

@@ -0,0 +1,83 @@
+@use "../abstracts/variables" as *;
+@use "../abstracts/mixins" as *;
+
+#experience {
+  background-image: linear-gradient(45deg, $primary-color 0%, $secondary-color 100%);
+  -webkit-clip-path: polygon(0 15vh, 100% 0, 100% 100%, 0 100%);
+  clip-path: polygon(0 15vh, 100% 0, 100% 100%, 0 100%);
+  padding: 15rem 0 10rem 0;
+  margin-top: -10rem;
+  margin-bottom: -1px;
+  color: $white-color;
+  text-align: center;
+
+  @include respond(tab-land) {
+    padding: 10rem 0;
+    clip-path: none;
+    margin-top: 0;
+    -webkit-clip-path: none;
+  }
+
+  .section-title {
+    font-size: 4rem;
+    font-weight: 700;
+    margin-bottom: 4rem;
+  }
+
+  .experience-wrapper {
+    margin-top: 3.2rem;
+    color: $dark-blue-text;
+    padding: 0 2rem;
+    backface-visibility: hidden;
+
+    &__list {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+    }
+
+    &__list-item {
+    background: rgba($white-color, 0.08);
+    color: #fff; // ensure all text inside is white
+    border-radius: 1.5rem;
+    padding: 3rem;
+    margin-bottom: 3rem;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
+    transition: all 0.3s ease;
+
+    &:hover {
+        transform: translateY(-5px);
+        background: rgba($white-color, 0.15);
+    }
+
+    h3, p {
+        color: #fff !important;
+    }
+
+    &-subtitle {
+        color: rgba(255, 255, 255, 0.7);
+    }
+
+    &-text {
+        color: rgba(255, 255, 255, 0.85);
+
+    }
+
+      @include respond(phone) {
+        padding: 2rem;
+
+        &-title {
+          font-size: 2rem;
+        }
+
+        &-subtitle {
+          font-size: 1.6rem;
+        }
+
+        &-text {
+          font-size: 1.4rem;
+        }
+      }
+    }
+  }
+}

src/sass/sections/_hero.scss

@@ -1,3 +1,6 @@
+@use "../abstracts/variables" as *;
+@use "../abstracts/mixins" as *;
+
 #hero {
   min-height: 100vh;
   height: 100vh;

src/sass/sections/_projects.scss

@@ -1,3 +1,6 @@
+@use "../abstracts/variables" as *;
+@use "../abstracts/mixins" as *;
+
 #projects {
   background-color: $white-color;
   color: $dark-blue-text;

src/styles.scss

@@ -1,18 +1,21 @@
-@import "./sass/vendors/bootstrap.scss";
+@use "sass/vendors/bootstrap.scss";
 
-@import "./sass/abstracts/mixins";
-@import "./sass/abstracts/variables";
-@import "./sass/abstracts/helpers";
+@use "sass/abstracts/mixins" as *;
+@use "sass/abstracts/variables" as *;
+@use "sass/abstracts/helpers";
 
-@import "./sass/base/base";
-@import "./sass/base/typography";
+@use "sass/abstracts" as *;
 
-@import "./sass/components/buttons";
+@use "sass/base/base";
+@use "sass/base/typography";
 
-@import "./sass/layout/footer";
-@import "./sass/layout/sections";
+@use "sass/components/buttons";
 
-@import "./sass/sections/about";
-@import "./sass/sections/contact";
-@import "./sass/sections/hero";
-@import "./sass/sections/projects";
+@use "sass/layout/footer";
+@use "sass/layout/sections";
+
+@use "sass/sections/about";
+@use "sass/sections/contact";
+@use "sass/sections/hero";
+@use "sass/sections/projects";
+@use "sass/sections/experience";