fix: use inline CSS classes to remove jsx attribute error

armanmoztar · Jan 4, 2025 · 030287a · 030287a
1 parent acaa864
commit 030287a
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 36 deletions.
diff --git a/src/App.css b/src/App.css
@@ -28,6 +28,42 @@
   color: #61dafb;
 }
 
+.background-container {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+}
+
+.background-container::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -10;
+  height: 100%;
+  width: 100%;
+  background: linear-gradient(
+    0deg,
+    rgba(34, 112, 195, 0.47524947478991597) 0%,
+    rgba(110, 255, 27, 0) 100%
+  );
+}
+
+.background-container::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -9;
+  height: 100%;
+  width: 100%;
+  background-size: 20px 20px;
+  mask-image: radial-gradient(
+    ellipse 80% 50% at 50% 0%,
+    #000 70%,
+    transparent 110%
+  );
+}
+
+
 @keyframes App-logo-spin {
   from {
     transform: rotate(0deg);

diff --git a/src/Portfolio.js b/src/Portfolio.js
@@ -357,42 +357,6 @@ const Portfolio = () => {
         <Projects />
       </div>
 
-      {/* Custom background styles */}
-      <style jsx>{`
-        .background-container {
-          position: absolute;
-          inset: 0;
-          z-index: -1;
-        }
-        .background-container::before {
-          content: "";
-          position: absolute;
-          inset: 0;
-          z-index: -10;
-          height: 100%;
-          width: 100%;
-          background: linear-gradient(
-            0deg,
-            rgba(34, 112, 195, 0.47524947478991597) 0%,
-            rgba(110, 255, 27, 0) 100%
-          );
-        }
-        .background-container::after {
-          content: "";
-          position: absolute;
-          inset: 0;
-          z-index: -9;
-          height: 100%;
-          width: 100%;
-          background-size: 20px 20px;
-          mask-image: radial-gradient(
-            ellipse 80% 50% at 50% 0%,
-            #000 70%,
-            transparent 110%
-          );
-        }
-      `}</style>
-
       {/* Background container */}
       <div className="background-container"></div>
     </div>