style: technology component

src/assets/components/technologies/index.js

@@ -1,38 +1,53 @@
-import React, { useEffect } from 'react';
+import React, { useEffect } from "react";
 
 //Styles
-import * as S from './style';
+import * as S from "./style";
 
 //Atropos
-import Atropos from 'atropos/react';
+import Atropos from "atropos/react";
 
 //AOS
-import AOS from 'aos';
-import 'aos/dist/aos.css';
+import AOS from "aos";
+import "aos/dist/aos.css";
 
 export default function Cards({ tech }) {
-
   useEffect(() => {
     AOS.init();
   });
 
   return (
     <S.ContentWrapper>
-      <Atropos>
-        {tech.technology.map((technology, index) => (
+      {tech.technology.map((technology, index) => (
+        <Atropos
+          data-aos="fade-up"
+          data-aos-duration="2000"
+          key={index}
+          rotateXMax={18}
+          rotateYMax={18}
+        >
           <div className="atropos atropos-header w-full atropos-rotate-touch-scroll-y atropos-rotate-touch">
-            <div className='atropos-scale'>
-              <a href={technology.docs} target="_blank" rel="noopener noreferrer" data-aos="fade-up" data-aos-duration="2000" key={index}>
-                <div className='atropos-rotate'>
-                  <div className='atropos-inner'>
-                    <img src={technology.technologyImage} alt={technology.name} title={technology.name} width={50} data-atropos-offset="3" />
+            <div className="atropos-scale">
+              <a
+                href={technology.docs}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <div className="atropos-rotate">
+                  <div className="atropos-inner">
+                    <img
+                      src={technology.technologyImage}
+                      alt={technology.name}
+                      title={technology.name}
+                      width={50}
+                      data-atropos-offset="3"
+                    />
                   </div>
                 </div>
               </a>
             </div>
           </div>
-        ))}
-      </Atropos>
+        </Atropos>
+      ))}
     </S.ContentWrapper>
   );
-}
+}

src/assets/components/technologies/style.js

@@ -1,12 +1,43 @@
 import styled from "styled-components";
 
 export const ContentWrapper = styled.section`
-  width: 100%;
-  height: 100%;
+  width: 90%;
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 2rem;
 
-  img {
-    width: 5rem;
-    height: 5rem;
-    object-fit: contain;
+  .atropos {
+    width: 10rem;
+    height: 10rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex: 1 1 15rem;
+
+    .atropos-scale {
+      width: 11rem;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background-color: rgba(0, 11, 29, .7);
+      border-radius: 1.5rem;
+
+      .atropos-rotate {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+
+        img {
+          width: 6rem;
+          height: 6rem;
+          object-fit: contain;
+        }
+      }
+    }
   }
-`;
+`;