11 skill card carousel

src/App.css

@@ -48,3 +48,7 @@ a {
 main {
   margin-top: 2rem;
 }
+
+.slick-arrow {
+  display: none !important;
+}

src/Title.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { styled } from 'styled-components';
+import PropTypes from 'prop-types';
+import { glowingText } from './features/animations/GlowingText';
+
+const Title = ({ title }) => (
+  <TitleWrapper className="text-center">
+    {title}
+  </TitleWrapper>
+);
+
+const TitleWrapper = styled.h3`
+    font-size: 4rem;
+    font-weight: 700;
+    animation: ${glowingText} 3s infinite;
+
+    @media screen and (max-width: 769px) {
+      font-size: 3rem;
+    }
+    @media screen and (max-width: 426px) {
+      font-size: 2rem;
+    }
+`;
+
+Title.propTypes = {
+  title: PropTypes.string.isRequired,
+};
+
+export default Title;

src/features/animations/GlowingText.js

@@ -1,6 +1,6 @@
 import { keyframes } from 'styled-components';
 
-const glowingAnimation = keyframes`
+export const glowingAnimation = keyframes`
   0% {
     opacity: 1;
     box-shadow: 0 0 10px #ac89f6;
@@ -15,4 +15,27 @@ const glowingAnimation = keyframes`
   }
 `;
 
-export default glowingAnimation;
+export const glowingText = keyframes`
+  0% {
+    text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
+  }
+  50% {
+    text-shadow: 0 0 20px rgba(255, 255, 255, 0.9);
+  }
+  100% {
+    text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
+  }
+
+`;
+
+export const glowingBackground = keyframes`
+  0% {
+    text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
+  }
+  50% {
+    text-shadow: 0 0 20px rgba(255, 255, 255, 0.9);
+  }
+  100% {
+    text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
+  }
+`;

src/features/animations/StyleVars.js

@@ -15,3 +15,12 @@ export const greenPinkGradient = `
     background: linear-gradient(90.13deg, #00cea8 1.9%, #bf61ff 97.5%);
     background: -webkit-linear-gradient(-90.13deg, #00cea8 1.9%, #bf61ff 97.5%);
 `;
+
+export const blackGradient = {
+  background:
+    `linear-gradient(
+      to right,
+      #434343,
+      #000
+    )`,
+};

src/features/hero/Social.jsx

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { styled } from 'styled-components';
-import glowingAnimation from '../animations/GlowingText';
+import { glowingAnimation } from '../animations/GlowingText';
 
 const Social = () => (
   <SocialWrap className="d-flex flex-column gap-4 mt-5">

src/features/nav/Desktop.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { styled } from 'styled-components';
-import glowingAnimation from '../animations/GlowingText';
+import { glowingAnimation } from '../animations/GlowingText';
 
 const Desktop = () => (
   <Wrap>
@@ -15,8 +15,10 @@ const Wrap = styled.ul`
   display: flex;
   width: 60%;
   justify-content: space-around;
+  align-items: center;
   list-style-type:  none;
   font-size: 1.2rem;
+  margin: 0;
   a {
     color: #c3b0ec;
     border-radius: .3rem;

src/features/nav/MobileMenu.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from 'styled-components';
 import logo from '../../media/adarsh-logo.png';
-import glowingAnimation from '../animations/GlowingText';
+import { glowingAnimation } from '../animations/GlowingText';
 
 const MobileMenu = ({ open, onClick }) => (
   <Mobile style={{ width: open ? '100%' : 0, backgroundColor: open ? 'rgba(0,0,0, 0.9)' : 'rgba(0,0,0, 0)' }}>

src/features/nav/Navigation.jsx

@@ -4,11 +4,30 @@ import { Turn as Hamburger } from 'hamburger-react';
 import logo from '../../media/adarsh-logo.png';
 import MobileMenu from './MobileMenu';
 import Desktop from './Desktop';
-import glowingAnimation from '../animations/GlowingText';
+import { glowingAnimation } from '../animations/GlowingText';
+import { blackGradient } from '../animations/StyleVars';
 
 const Navigation = () => {
   const [isOpen, setOpen] = useState(false);
   const [width, setWidth] = useState(window.innerWidth);
+
+  const [scrolled, setScrolled] = useState(false);
+
+  const handleScroll = () => {
+    if (window.scrollY >= window.innerHeight) {
+      setScrolled(true);
+    } else {
+      setScrolled(false);
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener('scroll', handleScroll);
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+
   useEffect(() => {
     function handleResize() {
       setWidth(window.innerWidth);
@@ -17,7 +36,7 @@ const Navigation = () => {
     return () => window.removeEventListener('resize', handleResize);
   }, []);
   return (
-    <NavWrap>
+    <NavWrap style={scrolled ? blackGradient : { background: 'transparent' }}>
       <div className="logo-wrap">
         <img src={logo} alt="logo" />
       </div>
@@ -36,13 +55,14 @@ const Navigation = () => {
 const NavWrap = styled.nav`
   display: flex;
   width: 100%;
+  height: 8vh;
   position: fixed;
   z-index: 9;
   justify-content: space-between;
   align-items: center;
-  padding: 2rem 1rem;
+  padding: 0rem 1rem;
   .logo-wrap {
-    width: 50px;
+    width: 40px;
     display: grid;
     place-items: center;
     img {

src/features/skills/SkillCard.jsx

@@ -1,25 +1,32 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { styled } from 'styled-components';
+import { violetGradient } from '../animations/StyleVars';
 
 const SkillCard = ({
-  image, title, details, features,
-}) => {
-  const anything = 'helot bc';
-  return (
-    <div style={{ width: 'inherit' }}>
-      <img src={image} alt={title} />
-      <h1>{details}</h1>
-      <h1>{features}</h1>
-      <h1>{anything}</h1>
+  image, title, details,
+}) => (
+  <CardWrapper className="card gap-5 mx-auto rounded" style={{ width: '320px', height: '470px' }}>
+    <h5 className="card-header">{title}</h5>
+    <img src={image} className="card-img-top mx-auto" alt={title} />
+    <div className="card-body h-25">
+      <p className="card-text">{details}</p>
     </div>
-  );
-};
+  </CardWrapper>
+);
+
+const CardWrapper = styled.div`
+  ${violetGradient}
+  img {
+    width: 50%;
+    height: 140px;
+  }
+`;
 
 SkillCard.propTypes = {
   image: PropTypes.string.isRequired,
   title: PropTypes.string.isRequired,
   details: PropTypes.string.isRequired,
-  features: PropTypes.arrayOf(PropTypes.string).isRequired,
 };
 
 export default SkillCard;

src/features/skills/Slider.jsx

@@ -1,21 +1,27 @@
-import React from 'react';
+import React, { useState } from 'react';
 import Slider from 'react-slick';
-import data from './data';
+import { styled } from 'styled-components';
+import { data, techLogos } from './data';
 import SkillCard from './SkillCard';
+import Title from '../../Title';
+import { violetGradient } from '../animations/StyleVars';
+import { glowingText } from '../animations/GlowingText';
 
 const SkillSlider = () => {
+  const [isOpen, setOpen] = useState(false);
   const settings = {
-    dots: true,
-    infinite: false,
+    dots: false,
+    infinite: true,
     speed: 500,
-    slidesToShow: 4,
-    slidesToScroll: 4,
+    slidesToShow: 3,
+    slidesToScroll: 3,
     initialSlide: 0,
+    autoplay: true,
     responsive: [
       {
         breakpoint: 1024,
         settings: {
-          slidesToShow: 3,
+          slidesToShow: 2,
           slidesToScroll: 3,
           infinite: true,
           dots: true,
@@ -38,40 +44,84 @@ const SkillSlider = () => {
       },
     ],
   };
+
+  const handleOpen = () => {
+    setOpen(() => !isOpen);
+  };
   return (
-    <div className="mx-auto" style={{ maxWidth: '1200px' }}>
-      <h2> Responsive </h2>
-      <Slider {...settings}>
+    <SliderWrapper className="mx-auto">
+      <Title title="Tech and Tool" />
+      <Slider {...settings} className="slider">
         {data.map((card) => (
           <SkillCard key={card.id} {...card} />
         ))}
-        <div>
-          <h3>1</h3>
-        </div>
-        <div>
-          <h3>2</h3>
-        </div>
-        <div>
-          <h3>3</h3>
-        </div>
-        <div>
-          <h3>4</h3>
-        </div>
-        <div>
-          <h3>5</h3>
-        </div>
-        <div>
-          <h3>6</h3>
-        </div>
-        <div>
-          <h3>7</h3>
-        </div>
-        <div>
-          <h3>8</h3>
-        </div>
       </Slider>
-    </div>
+      <div className="accordion bg-transparent accordion-flush" id="accordionFlushExample">
+        <div className="accordion-item bg-transparent">
+          <div id="flush-collapseOne" className="accordion-collapse bg-transparent collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
+            <div className="accordion-body bg-transparent">
+              <div className="mx-auto" style={{ maxWidth: '1200px' }}>
+                <div className="header card-header mt-5">
+                  <h3>Tech Tools Framework</h3>
+                </div>
+                <div className="card logo-wrapper">
+                  {techLogos.map((logo) => (
+                    <div key={logo.id} className="card logo">
+                      <img src={logo.image} alt={logo.title} className="card-img-top" />
+                      <small className="text-center">{logo.title}</small>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+          <h2 className="accordion-header text-center mt-3 fs-1 bg-transparent" id="flush-headingOne">
+            <button className="badge text-light fs-3 bg-transparent text-center collapsed" onClick={handleOpen} type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
+              {isOpen ? 'Collapse 💀' : 'See More 🚀'}
+            </button>
+          </h2>
+        </div>
+      </div>
+    </SliderWrapper>
   );
 };
 
+const SliderWrapper = styled.section`
+  max-width: 1200px;
+  margin: 6rem 0 3rem 0;
+  .slider {
+    margin-top: 1rem;
+  }
+
+  .header {
+    padding: 0 !important;
+  }
+
+  .accordion {
+    background-color: transparent;
+  }
+
+  button {
+    border-color: transparent !important;
+    animation: ${glowingText} 2s infinite;
+  }
+
+  .logo-wrapper {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    gap: 1rem;
+    background: transparent;
+  }
+
+  .logo {
+    img {
+      width: 100px;
+      height: 100px;
+    }
+    ${violetGradient}
+  }
+`;
+
 export default SkillSlider;