eperezme · eperezme · Dec 10, 2023 · Dec 8, 2023 · Dec 8, 2023 · Dec 10, 2023
diff --git a/.github/workflows/pr-deployment.yml b/.github/workflows/pr-deployment.yml
@@ -0,0 +1,35 @@
+name: PR Deployment
+
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  deploy-check:
+    runs-on: ubuntu-latest
+    environment:
+      name: test
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Set up Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build
+        run: npm run build
+
+      - name: Deployment Check
+        run: |
+          if [ $? -eq 0 ]; then
+            echo "Deployment check passed. Ready to merge."
+          else
+            echo "Deployment check failed. There are errors in the build."
+            exit 1
+          fi
diff --git a/dist/assets/index-7y6Pqbs5.js b/dist/assets/index-7y6Pqbs5.js
diff --git a/dist/assets/index-7y6Pqbs5.js.br b/dist/assets/index-7y6Pqbs5.js.br
diff --git a/dist/assets/index-PuzokcHH.css.br b/dist/assets/index-PuzokcHH.css.br
diff --git a/dist/assets/index-PuzokcHH.css → dist/assets/index-biK8TQ5C.css b/dist/assets/index-PuzokcHH.css → dist/assets/index-biK8TQ5C.css
diff --git a/dist/assets/index-biK8TQ5C.css.br b/dist/assets/index-biK8TQ5C.css.br
diff --git a/dist/assets/index-dL-WDNAr.js b/dist/assets/index-dL-WDNAr.js
diff --git a/dist/assets/index-dL-WDNAr.js.br b/dist/assets/index-dL-WDNAr.js.br
diff --git a/dist/index.html b/dist/index.html
@@ -1,14 +1,14 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="./src/assets/icons/dna.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Eduard Portfolio</title>
-    <script type="module" crossorigin src="/assets/index-dL-WDNAr.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-PuzokcHH.css">
-  </head>
-  <body>
-    <div id="root"></div>
-  </body>
-</html>
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="./src/assets/icons/dna.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Eduard Portfolio</title>
+    <script type="module" crossorigin src="/assets/index-7y6Pqbs5.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-biK8TQ5C.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

diff --git a/dist/index.html.br b/dist/index.html.br
diff --git a/package.json b/package.json
@@ -6,7 +6,8 @@
   "scripts": {
     "predeploy": "npm run build",
     "deploy": "gh-pages -d dist",
-    "dev": "vite --host",
+    "dev" : "vite",
+    "devh": "vite --host",
     "build": "vite build",
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"

diff --git a/src/App.jsx b/src/App.jsx
@@ -7,6 +7,7 @@ import './App.css'
 import './colors.css'
 import './typography.css'
 import './other.css'
+import './animations.css'
 // import {ThemeProvider, BaseStyles} from '@primer/react'
 import '@primer/css/utilities/index.scss'
 import '@primer/css/core/index.scss'
@@ -21,6 +22,8 @@ import Projects from './sources/projects/Projects.jsx'
 import Contact from './sources/contact/Contact.jsx'
 
 
+// import IntersectionObserverComponent from './functions/observer_old.jsx'
+import BuildInAnimation from './functions/observer.jsx'
 
 
 function App() {
@@ -30,12 +33,16 @@ function App() {
       <div className="overflow-x-clip page-responsive header-overlay home-campaign env-production logged-in color-bg-default">
         <div className='font-mktg'>
 
+        {/* <IntersectionObserverComponent> */}
+          <BuildInAnimation/>
           <Header/>
           <Skills/>
           <Experience/>
           <Projects/>
           <Contact/>
 
+
+        {/* </IntersectionObserverComponent> */}
         </div>
       </div>
     </>

diff --git a/src/animations.css b/src/animations.css
@@ -0,0 +1,87 @@
+/* FILEPATH: /c:/Users/eduar/Desktop/eperezme.github.io/src/animations.css */
+
+/* Animation for scaling from top */
+.build-in-scale-top {
+  transition: transform .7s cubic-bezier(0.16, 1, 0.3, 1);
+  transform: scaleY(0);
+  transform-origin: 0 0;
+}
+
+.build-in-scale-top.build-in-animate {
+  transform: scaleY(1);
+}
+
+/* Animation for sliding from left */
+.build-in-slideX-left {
+  opacity: 0;
+  transition: opacity .6s cubic-bezier(0.16, 1, 0.3, 1),transform .6s cubic-bezier(0.16, 1, 0.3, 1);
+  transform: translateX(-15px);
+}
+
+.build-in-slideX-left.build-in-animate {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+/* Animation for sliding from right */
+.build-in-slideX-right {
+  opacity: 0;
+  transition: opacity .6s cubic-bezier(0.16, 1, 0.3, 1),transform .6s cubic-bezier(0.16, 1, 0.3, 1);
+  transform: translateX(15px);
+}
+
+.build-in-slideX-right.build-in-animate {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.build-in-slideY {
+  opacity: 0;
+  transition: opacity .6s cubic-bezier(0.16, 1, 0.3, 1),transform .6s cubic-bezier(0.16, 1, 0.3, 1);
+  transform: translateY(15px);
+}
+
+.build-in-slideY.build-in-animate {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* Animation for fading in */
+.build-in-fade {
+  opacity: 0;
+  transition: opacity .6s cubic-bezier(0.16, 1, 0.3, 1),transform .6s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.build-in-fade.build-in-animate {
+  opacity: 1;
+}
+
+/* Animation for scaling and fading in */
+.build-in-scale-fade {
+  opacity: 0;
+  transition: opacity .7s cubic-bezier(0.16, 1, 0.3, 1),transform .7s cubic-bezier(0.16, 1, 0.3, 1);
+  transform: scale(0.96);
+}
+
+.build-in-scale-fade.build-in-animate {
+  opacity: 1;
+  transform: scale(1);
+}
+
+/* Animation for hovering on card-skew */
+card-skew:hover [data-target="card-skew.shine"] {
+  opacity: .85;
+}
+
+/* Animation for card-skew shine effect */
+[data-target="card-skew.shine"] {
+  width: 650px;
+  height: 650px;
+  background-color: var(--mktg-accent-primary);
+  filter: blur(180px);
+  border-radius: 300px;
+  opacity: 0;
+  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
+  mix-blend-mode: soft-light;
+  will-change: transform;
+}
diff --git a/src/functions/observer.jsx b/src/functions/observer.jsx
@@ -0,0 +1,64 @@
+import React, { useEffect } from 'react';
+
+const BuildInAnimation = () => {
+  const r = "build-in-animate";
+  const n = "build-in-reduced";
+  const o = 30;
+  const a = 0;
+  const l = 0;
+
+  useEffect(() => {
+    const handleIntersection = (entries) => {
+      for (let entry of entries) {
+        if (entry.target.classList.toggle(r, entry.isIntersecting)) {
+          if (entry.target.classList.contains("js-build-in-trigger")) {
+            for (let item of entry.target.querySelectorAll(".js-build-in-item")) {
+              item.classList.toggle(r, entry.isIntersecting);
+            }
+          }
+        }
+      }
+    };
+
+    const intersectionObserver = new IntersectionObserver(handleIntersection, {
+      rootMargin: `-${a}% 0% -${o}% 0%`,
+      threshold: l
+    });
+
+    document.querySelectorAll(".js-build-in-trigger[data-build-in-stagger], .js-build-in-group[data-build-in-stagger]").forEach((trigger) => {
+      const stagger = parseInt(trigger.getAttribute("data-build-in-stagger"));
+      const items = trigger.querySelectorAll(".js-build-in-item");
+      items.forEach((item, index) => {
+        item.style.transitionDelay = `${index * stagger}ms`;
+      });
+    });
+
+    document.querySelectorAll(".js-build-in-trigger, .js-build-in-item").forEach((element) => {
+      intersectionObserver.observe(element);
+    });
+
+    return () => {
+      intersectionObserver.disconnect();
+    };
+  }, [a, o, l, r]);
+
+  const isReducedMotion = (element) => {
+    const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const buildNonDecorative = element.getAttribute("data-build-non-decorative") || "false";
+    return prefersReducedMotion.matches && buildNonDecorative === "false";
+  };
+
+  const addClasses = (element) => {
+    element.classList.add(n);
+    element.classList.add(r);
+    const items = element.querySelectorAll(".js-build-in-item, .js-type-in-item");
+    items.forEach((item) => {
+      item.classList.add(n);
+      item.classList.add(r);
+    });
+  };
+
+  return null; // or return any JSX if needed
+};
+
+export default BuildInAnimation;
diff --git a/src/functions/observer_old.jsx b/src/functions/observer_old.jsx
@@ -0,0 +1,46 @@
+import React, { useEffect, useRef } from 'react';
+
+const IntersectionObserverComponent = ({ children }) => {
+  useEffect(() => {
+    // Find all elements with the class 'js-build-in-trigger'
+    const triggerElements = document.querySelectorAll('.js-build-in-trigger');
+
+    // Loop through each trigger element and create a separate Intersection Observer for each
+    triggerElements.forEach((triggerElement) => {
+      const triggerObserver = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting) {
+              // If the trigger element is at least half in the viewport, add animation class
+              triggerElement.classList.add('build-in-animate');
+              const itemsInTrigger = triggerElement.querySelectorAll('.js-build-in-item');
+              itemsInTrigger.forEach((item) => item.classList.add('build-in-animate'));
+            } else if (entry.boundingClientRect.top > window.innerHeight && entry.isIntersecting === false) {
+              // If the trigger element is scrolled above the viewport, remove animation class
+              triggerElement.classList.remove('build-in-animate');
+              const itemsInTrigger = triggerElement.querySelectorAll('.js-build-in-item');
+              itemsInTrigger.forEach((item) => item.classList.remove('build-in-animate'));
+            }
+          });
+        },
+
+      );
+
+      // Find all elements with the class 'js-build-in-item' inside the current trigger element
+      const animateElements = triggerElement.querySelectorAll('.js-build-in-item');
+
+      // Observe each 'js-build-in-item' element using the triggerObserver
+      animateElements.forEach((el) => triggerObserver.observe(el));
+
+      // Clean up the observer when the trigger element is removed from the DOM
+      return () => {
+        animateElements.forEach((el) => triggerObserver.unobserve(el));
+        triggerObserver.disconnect();
+      };
+    });
+  }, []); // Empty dependency array to ensure useEffect runs only once when the component mounts
+
+  return <div>{children}</div>;
+};
+
+export default IntersectionObserverComponent;