fix: performance problems with contact section

rubenbupe · Aug 13, 2024 · 942739f · 942739f
1 parent 2605d12
commit 942739f
Show file tree

Hide file tree

Showing 10 changed files with 91 additions and 88 deletions.
diff --git a/src/components/BackgroundChess.astro b/src/components/BackgroundChess.astro
@@ -0,0 +1,35 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "../lib/utils";
+
+type Props = HTMLAttributes<"div">;
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div
+    class={cn(
+        "pointer-events-none absolute h-full w-full overflow-hidden opacity-50 [perspective:200px]",
+        className
+    )}
+    {...rest}
+>
+    <div class="absolute inset-0 [transform:rotateX(35deg)]">
+        <div
+            class={cn(
+                "animate-grid",
+
+                "[background-repeat:repeat] [background-size:60px_60px] [height:300vh] [inset:0%_0px] [margin-left:-50%] [transform-origin:100%_0_0] [width:600vw]",
+
+                "[background-image:linear-gradient(to_right,rgba(255,255,255,0.2)_1px,transparent_0),linear-gradient(to_bottom,rgba(255,255,255,0.2)_1px,transparent_0)]"
+            )}
+        >
+        </div>
+    </div>
+
+    {/* Background Gradient */}
+    <div
+        class="absolute inset-0 bg-gradient-to-t from-white to-transparent to-90% dark:from-black"
+    >
+    </div>
+</div>
diff --git a/src/components/BackgroundChess.tsx b/src/components/BackgroundChess.tsx
diff --git a/src/components/ExpandableHoloJobCard.tsx b/src/components/ExpandableHoloJobCard.tsx
@@ -91,9 +91,15 @@ export function ExpandableHoloJobCard({
                     >
                       {active.title}
                     </motion.h3>
+										<motion.p
+											layoutId={`role-${active.id}-${id}`}
+											className="text-neutral-600 dark:text-neutral-400 text-base"
+										>
+											{active.role}
+										</motion.p>
                     <motion.p
                       layoutId={`timeperiod-${active.id}-${id}`}
-                      className="text-neutral-600 dark:text-neutral-400 text-base"
+                      className="text-neutral-600 dark:text-neutral-400 text-base text-xs"
                     >
                       {active.timePeriod}
                     </motion.p>

diff --git a/src/components/FlipWords.tsx b/src/components/FlipWords.tsx
@@ -28,9 +28,6 @@ export const FlipWords = ({
       }, duration);
   }, [isAnimating, duration, startAnimation]);
 
-	console.log(currentWord.split(""), currentWord.split("").map((letter, index) => (
-		`${letter}`
-	)))
   return (
     <AnimatePresence
       onExitComplete={() => {

diff --git a/src/components/Globe.tsx b/src/components/Globe.tsx
@@ -73,6 +73,7 @@ export function Globe() {
 		<div className="w-full max-w-full flex justify-center">
 			<canvas
 				ref={canvasRef}
+				className="bg-transparent"
 				style={{
 					width: size,
 					height: size,

diff --git a/src/components/HoloCard.tsx b/src/components/HoloCard.tsx
@@ -56,7 +56,6 @@ export const HoloCard = ({
 
   const updateStyles = () => {
     if (refElement.current) {
-      console.log(state.current);
       const { background, rotate, holo } = state.current;
       refElement.current?.style.setProperty("--m-x", `${holo.x}%`);
       refElement.current?.style.setProperty("--m-y", `${holo.y}%`);

diff --git a/src/components/Particles.tsx b/src/components/Particles.tsx
@@ -41,7 +41,6 @@ export const Particles = (props: ParticlesProps) => {
 
   const particlesLoaded = async (container?: Container) => {
     if (container) {
-      console.log(container);
       controls.start({
         opacity: 1,
         transition: {

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -8,7 +8,7 @@ import Section from "../components/Section.astro";
 import ConicHeader from "../components/ConicHeader.astro";
 import { Particles } from "../components/Particles";
 import Separator from "../components/Separator.astro";
-import { BackgroundChess } from "../components/BackgroundChess.tsx";
+import { BackgroundChess } from "../components/BackgroundChess.astro";
 import { FlipWords } from "../components/FlipWords";
 import Anchor from "../components/Anchor.astro";
 import { mailUrl } from "../constants/site";
@@ -23,6 +23,41 @@ import Contact from "../sections/Contact.astro";
     <Hero />
     <About />
     <Jobs />
-
+    <div class="relative w-full flex flex-col">
+        <ConicHeader
+            color="rgba(97,106,115,.12)"
+            borderColor="rgba(247,247,247,.22)"
+        />
+        <div
+            class="w-full max-w-[40rem] h-40 relative self-center [mask-image:radial-gradient(350px_200px_at_top,white_20%,transparent)]"
+        >
+            <Particles
+                client:visible
+                background="transparent"
+                minSize={0.4}
+                maxSize={1}
+                particleDensity={100}
+                className="w-full h-full"
+                particleColor="#FFFFFF"
+            />
+        </div>
+        <Section
+            id="projects"
+            class="relative py-24 min-h-[90vh] flex flex-col"
+        >
+            <div class="grid md:grid-cols-2 gap-12 md:px-12">
+                <div class="flex gap-4 col-start-2">
+                    <Separator
+                        class="inline flex-1 w-fit translate-y-1 border-primary"
+                    />
+                    <h2
+                        class="inline text-2xl font-bold tracking-tight sm:text-4xl md:text-5xl"
+                    >
+                        Projects
+                    </h2>
+                </div>
+            </div>
+        </Section>
+    </div>
     <Contact />
 </Layout>
diff --git a/src/sections/Contact.astro b/src/sections/Contact.astro
@@ -1,12 +1,14 @@
 ---
 import Anchor from "../components/Anchor.astro";
-import { BackgroundChess } from "../components/BackgroundChess";
+import BackgroundChess from "../components/BackgroundChess.astro";
 import { FlipWords } from "../components/FlipWords";
 import Section from "../components/Section.astro";
 import { mailUrl } from "../constants/site";
 ---
 
 <div class="relative w-full flex flex-col h-[80vh] overflow-hidden">
+    <BackgroundChess />
+
     <Section
         id="jobs"
         class="py-24 h-full flex flex-col justify-center items-center"
@@ -15,9 +17,9 @@ import { mailUrl } from "../constants/site";
             class="absolute inset-0 w-full h-full bg-background z-20 [mask-image:radial-gradient(transparent,white)] pointer-events-none"
         >
         </div>
-        <BackgroundChess className="" client:load />
+
         <h2
-            class="relative text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl"
+            class="relative text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl text-center"
         >
             <span aria-hidden="false" class="visually-hidden"
                 >Let's build the future together</span
@@ -40,7 +42,7 @@ import { mailUrl } from "../constants/site";
             Get in touch
         </Anchor>
     </Section>
-    <p class="relative mt-auto mb-2 text-center text-foreground/80">
+    <p class="relative mt-auto mb-2 text-center text-foreground/80 text-xs">
         © {new Date().getFullYear()} Rubén Buzón.
     </p>
 </div>
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
@@ -89,13 +89,18 @@ export default {
             transform: "rotate(215deg) translateX(-100vh)",
             opacity: 0,
           },
+        },
+				grid: {
+          "0%": { transform: "translateY(-50%)" },
+          "100%": { transform: "translateY(0)" },
         },
       },
       animation: {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
 				spotlight: "spotlight 2s ease .75s 1 forwards",
 				meteor: "meteor 5s linear infinite",
+				grid: "grid 15s linear infinite",
       },
     },
   },