Revert "Project performance improvement (maybe)"

This reverts commit 67ebb0f.
UTDNebula · Feb 22, 2024 · 0cd2726 · 0cd2726
1 parent 3ecf5e2
commit 0cd2726
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 56 deletions.
diff --git a/src/components/Projects.tsx b/src/components/Projects.tsx
@@ -90,48 +90,48 @@ export default function Projects() {
   }, [carouselRef]);
   const carouselKeyBase = 'projects';
   return (
-    <div className="w-full rounded-full overflow-x-clip relative flex items-center justify-center w-full aspect-square lg:scale-[115%] scale-[200%] lg:my-52 my-[34rem] shadow-[0px_0px_87px_-1px_#312E81]">
-      <div className="bg-stars bg-cover absolute inset-0"></div>
-      <div className="bg-stars bg-stars-delay bg-cover absolute inset-0"></div>
-      <div className="shrink-0 flex flex-col justify-center lg:scale-[calc(1/1.15)] scale-[calc(1/2)] h-min w-full">
-        <div className="text-center flex flex-col items-center">
-          <h3 className="text-2xl md:text-4xl text-white">Check Out Our </h3>
-          <h1 className="font-kallisto md:text-7xl text-4xl font-bold text-transparent w-min bg-clip-text bg-gradient-to-r from-[#6166FA] via-[#C2C9FF] to-[#FE8164]">
-            Projects
-          </h1>
-        </div>
-        <div className="text-center pt-4 text-white px-4">
-          <p>Check out what we have been creating in our lab up in the galaxy</p>
-        </div>
-        <div className="gap-8 grid-cols-4 mx-auto pt-6 text-white hidden lg:grid">
-          {PROJECTS_INFO.map((project, index) => (
-            <button
-              type="button"
-              key={`project-selector-${index}`}
-              className={`hover:scale-105 active:scale-95 transition flex h-16 px-10 justify-center items-center rounded-full cursor-pointer ${
-                selected === index ? 'bg-[#6166FA] border-black' : 'border-white'
-              } transition duration-300 ease-in-out border-2`}
-              onClick={() => {
-                const el = document.querySelector(`#${carouselKeyBase}-${index}`);
-                el?.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });
-              }}
-            >
-              {project.shortName}
-            </button>
-          ))}
-        </div>
-        <div className="pt-6">
-          <Carousel data={PROJECTS_INFO} keyBase={carouselKeyBase} ref={carouselRef}>
-            {(project, index, valueCount, prev, next) => (
-              <ProjectCard
-                valueCount={valueCount}
-                prev={prev}
-                next={next}
-                index={index}
-                project={project}
-              />
-            )}
-          </Carousel>
+    <div className="w-full overflow-x-clip">
+      <div className="bg-stars bg-cover rounded-full flex items-center justify-center w-full aspect-square lg:scale-[115%] scale-[200%] lg:my-52 my-[34rem] shadow-[0px_0px_87px_-1px_#312E81]">
+        <div className="shrink-0 flex flex-col justify-center lg:scale-[calc(1/1.15)] scale-[calc(1/2)] h-min w-full">
+          <div className="text-center flex flex-col items-center">
+            <h3 className="text-2xl md:text-4xl text-white">Check Out Our </h3>
+            <h1 className="font-kallisto md:text-7xl text-4xl font-bold text-transparent w-min bg-clip-text bg-gradient-to-r from-[#6166FA] via-[#C2C9FF] to-[#FE8164]">
+              Projects
+            </h1>
+          </div>
+          <div className="text-center pt-4 text-white px-4">
+            <p>Check out what we have been creating in our lab up in the galaxy</p>
+          </div>
+          <div className="gap-8 grid-cols-4 mx-auto pt-6 text-white hidden lg:grid">
+            {PROJECTS_INFO.map((project, index) => (
+              <button
+                type="button"
+                key={`project-selector-${index}`}
+                className={`hover:scale-105 active:scale-95 transition flex h-16 px-10 justify-center items-center rounded-full cursor-pointer ${
+                  selected === index ? 'bg-[#6166FA] border-black' : 'border-white'
+                } transition duration-300 ease-in-out border-2`}
+                onClick={() => {
+                  const el = document.querySelector(`#${carouselKeyBase}-${index}`);
+                  el?.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });
+                }}
+              >
+                {project.shortName}
+              </button>
+            ))}
+          </div>
+          <div className="pt-6">
+            <Carousel data={PROJECTS_INFO} keyBase={carouselKeyBase} ref={carouselRef}>
+              {(project, index, valueCount, prev, next) => (
+                <ProjectCard
+                  valueCount={valueCount}
+                  prev={prev}
+                  next={next}
+                  index={index}
+                  project={project}
+                />
+              )}
+            </Carousel>
+          </div>
         </div>
       </div>
     </div>

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -12,27 +12,21 @@ html {
 
 @keyframes animatedBackground {
   from {
-    transform: translate(-100%);
+    background-position: 0 0;
   }
   to {
-    transform: translate(100%);
+    background-position: 100% 0;
   }
 }
 
 .bg-stars {
-  background-image: url('/stars.png'), linear-gradient(black, black);
-  background-size: cover, cover;
-  animation-timing-function: linear;
-  animation: animatedBackground 40s linear infinite;
+  background-image: url('/stars.png'), linear-gradient(lightgray, lightgray);
+  background-size: cover, cover, 50%;
+  background-repeat: repeat-x, no-repeat, no-repeat;
+  animation-timing-function: ease-in-out;
+  animation: animatedBackground 40s linear infinite alternate;
   @media (max-width: 640px) {
-    animation: animatedBackground 120s linear infinite;
-  }
-}
-
-.bg-stars-delay {
-  animation-delay: -20s;
-  @media (max-width: 640px) {
-    animation-delay: -60s;
+    animation: animatedBackground 120s linear infinite alternate;
   }
 }