https://ewnetutesfaye.netlify.app/static/js/697.cbe231fb.chunk.js

1"use strict";(self.webpackChunkportsofzeki=self.webpackChunkportsofzeki||[]).push([[697],{8697:(e,t,i)=>{i.r(t),i.d(t,{default:()=>u});var n=i(5464),r=i(3968),a=i(579);const o=n.Ay.section`
2  padding: 6rem 2rem;
3  background: ${e=>{let{theme:t}=e;return t.background}};
4  position: relative;
5  overflow: hidden;
6
7  &::before {
8    content: '';
9    position: absolute;
10    top: 0;
11    left: 0;
12    width: 100%;
13    height: 100%;
14    background: ${e=>{let{theme:t}=e;return t.gradientAlt}};
15    opacity: 0.03;
16    transform: skewY(-6deg);
17    transform-origin: top left;
18  }
19`,s=n.Ay.div`
20  max-width: 1400px;
21  margin: 0 auto;
22`,l=(0,n.Ay)(r.P.div)`
23  text-align: center;
24  margin-bottom: 3rem;
25  position: relative;
26  
27  h2 {
28    ${e=>{let{theme:t}=e;return t.mixins.headingStyles}};
29    font-size: ${e=>{let{theme:t}=e;return t.sizes["2xl"]}};
30    background: linear-gradient(
31      135deg,
32      ${e=>{let{theme:t}=e;return t.primary}},
33      ${e=>{let{theme:t}=e;return t.secondary}}
34    );
35    -webkit-background-clip: text;
36    -webkit-text-fill-color: transparent;
37    display: inline-block;
38    padding: 0.5rem 2rem;
39    position: relative;
40    transition: all 0.3s ease;
41
42    &::before {
43      content: '';
44      position: absolute;
45      inset: 0;
46      padding: 2px;
47      border-radius: 30px;
48      background: linear-gradient(
49        135deg,
50        ${e=>{let{theme:t}=e;return t.primary}},
51        ${e=>{let{theme:t}=e;return t.secondary}}
52      );
53      -webkit-mask: 
54        linear-gradient(#fff 0 0) content-box, 
55        linear-gradient(#fff 0 0);
56      -webkit-mask-composite: xor;
57      mask-composite: exclude;
58      opacity: 0.5;
59      transition: opacity 0.3s ease;
60    }
61
62    &:hover {
63      transform: scale(1.05);
64      
65      &::before {
66        opacity: 1;
67      }
68    }
69  }
70`,d=n.Ay.div`
71  display: grid;
72  grid-template-columns: repeat(4, 1fr);
73  gap: 2rem;
74  
75  @media (max-width: 1200px) {
76    grid-template-columns: repeat(4, 1fr);
77  }
78  
79  @media (max-width: 640px) {
80    grid-template-columns: 1fr;
81  }
82`,c=n.Ay.h3`
83  ${e=>{let{theme:t}=e;return t.mixins.headingStyles}};
84  font-size: ${e=>{let{theme:t}=e;return t.sizes.xl}};
85  color: ${e=>{let{theme:t}=e;return t.text}};
86  margin-bottom: 1.5rem;
87  transition: color 0.3s ease;
88`,m=(0,n.Ay)(r.P.div)`
89  background: ${e=>{let{theme:t}=e;return t.card}};
90  border-radius: 1rem;
91  padding: 2rem;
92  box-shadow: ${e=>{let{theme:t}=e;return t.shadowMd}};
93  transition: all 0.4s ease-in-out;
94  position: relative;
95  overflow: hidden;
96  border: 1px solid transparent;
97
98  &::before {
99    content: '';
100    position: absolute;
101    top: 0;
102    left: 0;
103    width: 100%;
104    height: 4px;
105    background: ${e=>{let{theme:t}=e;return t.primary}};
106    transform: scaleX(0);
107    transition: transform 0.3s ease;
108  }
109
110  &:hover {
111    transform: translateY(-8px);
112    box-shadow: ${e=>{let{theme:t}=e;return t.shadowLg}};
113    border-color: ${e=>{let{theme:t}=e;return`${t.primary}30`}};
114    
115    &::before {
116      transform: scaleX(1);
117    }
118
119    ${c} {
120      color: ${e=>{let{theme:t}=e;return t.primary}};
121    }
122  }
123`,p=n.Ay.ul`
124  list-style: none;
125  padding: 0;
126  margin: 0;
127`,h=(0,n.Ay)(r.P.li)`
128  display: flex;
129  align-items: center;
130  gap: 1rem;
131  padding: 0.75rem 0;
132  color: ${e=>{let{theme:t}=e;return t.text}};
133  ${e=>{let{theme:t}=e;return t.mixins.bodyStyles}};
134  transition: all 0.3s ease;
135
136  .skill-icon {
137    width: 32px;
138    height: 32px;
139    display: flex;
140    align-items: center;
141    justify-content: center;
142    background: ${e=>{let{theme:t}=e;return`${t.primary}15`}};
143    border-radius: 8px;
144    transition: all 0.3s ease;
145    font-size: 1.2rem;
146  }
147
148  &:hover {
149    transform: translateX(10px);
150    color: ${e=>{let{theme:t}=e;return t.primary}};
151
152    .skill-icon {
153      background: ${e=>{let{theme:t}=e;return t.primary}};
154      color: white;
155      transform: rotate(10deg) scale(1.1);
156    }
157  }
158`,u=()=>{const e={hidden:{opacity:0,y:30,scale:.9},visible:{opacity:1,y:0,scale:1,transition:{type:"spring",stiffness:100,damping:12}}},t={hidden:{opacity:0,x:-20},visible:{opacity:1,x:0,transition:{type:"spring",stiffness:100}}};return(0,a.jsx)(o,{id:"skills",children:(0,a.jsxs)(s,{children:[(0,a.jsx)(l,{initial:{opacity:0,y:-20},whileInView:{opacity:1,y:0},viewport:{once:!0},transition:{duration:.6,type:"spring"},children:(0,a.jsx)("h2",{children:"Technical Skills"})}),(0,a.jsx)(d,{as:r.P.div,variants:{hidden:{opacity:0}

158,visible:{opacity:1,transition:{staggerChildren:.2}}},initial:"hidden",whileInView:"visible",viewport:{once:!0},children:[{title:"Frontend Development",skills:[{name:"React.js",icon:"\u269b\ufe0f"},{name:"Next.js",icon:"\u25b2"},{name:"TypeScript",icon:"\ud83d\udcd8"},{name:"Tailwind CSS",icon:"\ud83c\udfa8"},{name:"React Native",icon:"\ud83d\udcf1"}]},{title:"Backend Development",skills:[{name:"Node.js",icon:"\ud83d\udc9a"},{name:"Express.js",icon:"\ud83d\ude82"}]},{title:"Database & Tools",skills:[{name:"MongoDB",icon:"\ud83c\udf43"},{name:"Mysql",icon:"\ud83d\udc18"},{name:"Redis",icon:"\ud83d\udcd7"},{name:"GraphQL",icon:"\u25c8"},{name:"Docker",icon:"\ud83d\udc33"}]},{title:"Cloud & DevOps",skills:[{name:"AWS Services",icon:"\u2601\ufe0f"},{name:"CI/CD",icon:"\ud83d\udd04"},{name:"Git",icon:"\ud83d\udcda"},{name:"Linux",icon:"\ud83d\udc27"},{name:"Nginx",icon:"\ud83c\udf10"}]}].map(((i,n)=>(0,a.jsxs)(m,{variants:e,children:[(0,a.jsx)(c,{children:i.title}),(0,a.jsx)(p,{children:i.skills.map(((e,i)=>(0,a.jsxs)(h,{variants:t,children:[(0,a.jsx)("span",{className:"skill-icon",children:e.icon}),e.name]},i)))})]},n)))})]})})}}}]);
159//# sourceMappingURL=697.cbe231fb.chunk.js.map