feat: batComponent and update style of technologies

src/assets/components/bats/index.js

@@ -0,0 +1,70 @@
+import { useEffect } from 'react';
+
+// Importando o GIF
+import batGif from '../../gifs/bat.gif';
+
+const HalloweenBats = ({ numberOfBats }) => {
+  useEffect(() => {
+    const random = Math.random();
+    const documentRef = document;
+    const windowRef = window;
+
+    // Função para criar um morcego
+    const createBat = () => {
+      const image = documentRef.createElement('img');
+      const container = documentRef.createElement('div');
+      const containerStyle = container.style;
+
+      containerStyle.position = 'fixed';
+      containerStyle.left = 0;
+      containerStyle.top = 0;
+      containerStyle.opacity = 0;
+      containerStyle.filter = 'invert(.2)';
+
+      container.appendChild(image);
+      image.src = batGif;
+
+      documentRef.body.appendChild(container);
+
+      let posX = windowRef.innerWidth * random;
+      let posY = windowRef.innerHeight * random;
+      let opacity = 0;
+
+      function calculatePosition(oldPos, max) {
+        return Math.max(Math.min(oldPos + (Math.random() - 0.5) * 400, max - 50), 50);
+      }
+
+      function animate() {
+        const newX = calculatePosition(posX, windowRef.innerWidth);
+        const newY = calculatePosition(posY, windowRef.innerHeight);
+        const distance = 5 * Math.sqrt((posX - newX) * (posX - newX) + (posY - newY) * (posY - newY));
+
+        containerStyle.opacity = opacity;
+        opacity = 1;
+
+        containerStyle.transition = containerStyle.transition = distance / 1000 + 's linear';
+        containerStyle.transform = containerStyle.transform = 'translate(' + newX + 'px,' + newY + 'px)';
+        image.style.transform = image.style.transform = posX > newX ? '' : 'scaleX(-1)';
+
+        posX = newX;
+        posY = newY;
+
+        setTimeout(animate, distance);
+      }
+
+      setTimeout(animate, random * 3000);
+
+      return () => {
+        documentRef.body.removeChild(container);
+      };
+    };
+
+    for (let i = 0; i < numberOfBats; i++) {
+      createBat();
+    }
+  }, [numberOfBats]);
+
+  return null;
+};
+
+export default HalloweenBats;

src/assets/components/projectCard/index.js

@@ -0,0 +1,13 @@
+import React from "react";
+
+//React icons
+import { FaGithub } from "react-icons/fa";
+import { CiLink } from "react-icons/ci";
+
+export default function index() {
+  return (
+    <>
+
+    </>
+  );
+}

src/assets/components/technologies/style.js

@@ -23,7 +23,12 @@ export const ContentWrapper = styled.section`
       display: flex;
       justify-content: center;
       align-items: center;
-      background-color: rgba(0, 11, 29, 0.7);
+      //radial gradient
+      background: radial-gradient(
+        circle at 50% 50%,
+        rgba(25, 25, 25, 0.9) 0%,
+        rgba(0, 11, 29, 0.7)  60%
+      );
       border-radius: 1.5rem;
 
       .atropos-rotate {

src/assets/pages/projects/index.js

@@ -1,14 +1,21 @@
-import React from 'react';
+import React from "react";
 
 //Components
-import Layout from '../../components/layout'
+import Layout from "../../components/layout";
+import BatComponent from "../../components/bats";
+
+//Styles
+import * as S from "./style";
 
 export default function index() {
     return (
         <>
-            <Layout>
-                projects
-            </Layout>
+        <Layout backgroundFooter="#060d11">
+            <BatComponent numberOfBats={6} />
+            <S.Main>
+            <S.ContentWrapper></S.ContentWrapper>
+            </S.Main>
+        </Layout>
         </>
-    )
-}
+    );
+}

src/assets/pages/projects/style.js

@@ -0,0 +1,25 @@
+import styled from "styled-components";
+
+import Cave from "../../gifs/cave.gif";
+
+export const Main = styled.main`
+  width: 100%;
+  height: 100vh;
+  background-color: #0b1418;
+`;
+
+export const ContentWrapper = styled.section`
+  width: 100%;
+  height: 100%;
+  background: url(${Cave}) no-repeat center center/contain;
+  position: relative;
+  z-index: 0;
+
+  &:after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 10, 16, 0.7);
+    z-index: 1;
+  }
+`;