my-react-portfolio/src/components/styles/Skills.styles.js

A reusable and customizable React portfolio template.

// import styled from "styled-components";

// export const SkillsContainer = styled.div`
//   width: 100%;
//   height: 100%;
//   background-color: #121212;
//   color: #bdbdbd;
//   padding: 10px 0;
// `;

// export const SkillsWrapper = styled.div`
//   max-width: 1000px;
//   margin: 0 auto;
//   padding: 1rem 0.5rem;
//   display: flex;
//   flex-direction: column;
//   justify-content: center;
//   width: 100%;
//   height: 100%;
// `;

// export const SkillsTitle = styled.div`
//   padding-top: 3rem;

//   p {
//     font-size: 2rem;
//     font-weight: bold;
//     border-bottom: 4px solid #29ab87;
//     display: inline-block;
//   }

//   span {
//     color: #29ab87;
//   }

//   .subTitle {
//     padding-top: 1rem;
//     font-weight: 600;
//   }
// `;

// export const SkillsGrid = styled.div`
//   width: 100%;
//   display: grid;
//   grid-template-columns: repeat(2, 1fr);
//   gap: 1rem;
//   text-align: center;
//   padding-top: 2rem;
//   font-weight: 600;

//   @media (min-width: 640px) {
//     grid-template-columns: repeat(4, 1fr);
//   }
// `;

// export const SkillCard = styled.div`
//   box-shadow: 0px 0px 15px rgba(41, 171, 135, 0.5);
//   transition: transform 0.5s;
//   border-radius: 0.5rem;
//   padding-top: 0.5rem;

//   &:hover {
//     transform: scale(1.1);
//   }

//   img {
//     width: 80px;
//     margin: 0 auto;
//     padding-top: 0.5rem;
//   }

//   p {
//     margin: 1rem 0;
//   }
// `;