https://ewnetutesfaye.netlify.app/static/js/425.6ba732d8.chunk.js

1"use strict";(self.webpackChunkportsofzeki=self.webpackChunkportsofzeki||[]).push([[425],{1665:(e,t,i)=>{i.r(t),i.d(t,{default:()=>z});var r=i(5464),a=i(3968),n=i(3546),s=i(5043);const o=i.p+"static/media/IMG_5439.f8548f015b6c82c42d0a.jpg",l=i.p+"static/media/resume.9e4ed5946bf8fad9d16f.pdf";var d=i(579);const m=r.Ay.section`
2  min-height: 100vh;
3  display: flex;
4  align-items: center;
5  position: relative;
6  padding: 4rem 2rem;
7  background: ${e=>{let{theme:t}=e;return t.background}};
8  overflow: hidden;
9
10  @media (max-width: 768px) {
11    padding: 2rem 1rem;
12  }
13
14  &::before {
15    content: '';
16    position: absolute;
17    top: 0;
18    right: 0;
19    width: 45%;
20    height: 100%;
21    background: ${e=>{let{theme:t}=e;return t.gradient}};
22    opacity: 0.05;
23    clip-path: polygon(30% 0%, 100% 0%, 100% 100%, 0% 100%);
24  }
25`,p=r.Ay.div`
26  max-width: 1200px;
27  margin: 0 auto;
28  width: 100%;
29  display: grid;
30  grid-template-columns: 1.2fr 0.8fr;
31  gap: 2.5rem;
32  align-items: center;
33
34  @media (max-width: 1024px) {
35    grid-template-columns: 1fr;
36    text-align: center;
37  }
38`,h=r.Ay.div`
39  z-index: 1;
40  padding-right: 2rem;
41
42  @media (max-width: 1024px) {
43    padding-right: 0;
44  }
45`,c=(0,r.Ay)(a.P.div)`
46  ${e=>{let{theme:t}=e;return t.mixins.bodyStyles}};
47  font-size: ${e=>{let{theme:t}=e;return t.sizes.lg}};
48  color: ${e=>{let{theme:t}=e;return t.primary}};
49  margin-top: 3.5rem;
50  margin-bottom: 0.5rem;
51  display: flex;
52  align-items: center;
53  gap: 0.5rem;
54  font-weight: ${e=>{let{theme:t}=e;return t.weights.medium}};
55
56  span {
57    display: flex;
58    align-items: center;
59    padding: 0.5rem 1rem;
60    background: ${e=>{let{theme:t}=e;return t.primary}}15;
61    border-radius: 50px;
62  }
63
64  @media (max-width: 1024px) {
65    justify-content: center;
66  }
67
68  @media (max-width: 480px) {
69    font-size: ${e=>{let{theme:t}=e;return t.sizes.md}};
70    margin-top: 2rem;
71  }
72`,x=(0,r.Ay)(a.P.h1)`
73  ${e=>{let{theme:t}=e;return t.mixins.headingStyles}};
74  font-size: clamp(${e=>{let{theme:t}=e;return t.sizes["4xl"]}}, 5vw, ${e=>{let{theme:t}=e;return t.sizes["6xl"]}});
75  margin-bottom: 1.5rem;
76  
77  .name {
78    display: block;
79    margin-bottom: 0.5rem;
80    
81  }
82  
83  .highlight-container {
84    height: 4rem;
85    position: relative;
86    display: flex;
87   align-items: center;
88    overflow: hidden;
89
90    @media (max-width: 768px) {
91      height: 3rem;
92    }
93
94    @media (max-width: 480px) {
95      height: 2.5rem;
96      
97    }
98  }
99
100  .highlight {
101    color: ${e=>{let{theme:t}=e;return t.primary}};
102    font-size: clamp(${e=>{let{theme:t}=e;return t.sizes["2xl"]}}, 4vw, ${e=>{let{theme:t}=e;return t.sizes["4xl"]}});
103    font-weight: ${e=>{let{theme:t}=e;return t.weights.semibold}};
104    letter-spacing: -0.01em;
105    
106    width: 100%;
107     text-align: center;
108  
109     @media (max-width: 1024px) {
110      text-align: center;
111    }
112    
113    @media (max-width: 480px) {
114      font-size: ${e=>{let{theme:t}=e;return t.sizes.lg}};
115}}
116`,u=(0,r.Ay)(a.P.p)`
117  ${e=>{let{theme:t}=e;return t.mixins.bodyStyles}};
118  font-size: ${e=>{let{theme:t}=e;return t.sizes.lg}};
119  color: ${e=>{let{theme:t}=e;return t.text}}dd;
120  margin-bottom: 2.5rem;
121  max-width: 600px;
122  line-height: ${e=>{let{theme:t}=e;return t.lineHeights.relaxed}};
123
124  @media (max-width: 1024px) {
125    margin: 0 auto 2.5rem;
126  }
127
128  @media (max-width: 480px) {
129    font-size: ${e=>{let{theme:t}=e;return t.sizes.md}};
130  }
131`,g=(0,r.Ay)(a.P.div)`
132  display: flex;
133  padding: 0rem 5rem;
134  gap: 1.5rem;
135
136  @media (max-width: 1024px) {
137    justify-content: center;
138    padding: 0rem 2rem;
139  }
140
141  @media (max-width: 480px) {
142    flex-direction: column;
143    gap: 1rem;
144    padding: 0rem 1rem;
145  }
146`,y=(0,r.Ay)(a.P.a)`
147  ${e=>{let{theme:t}=e;return t.mixins.bodyStyles}};
148  padding: 0.7rem 1.2rem;
149  border-radius: 32px;
150  font-size: ${e=>{let{theme:t}=e;return t.sizes.lg}};
151  font-weight: ${e=>{let{theme:t}=e;return t.weights.semibold}};
152  letter-spacing: 0.02em;
153  cursor: pointer;
154  text-decoration: none;
155  display: inline-flex;
156  align-items: center;
157  justify-content: center;
158  gap: 0.8rem;
159  position: relative;
160  overflow: hidden;
161  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
162
163  &::before {
164    content: '';
165    position: absolute;
166    top: 50%;
167    left: 50%;
168    width: 120%;
169    height: 120%;
170    background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 70%);
171    transform: translate(-50%, -50%) scale(0);
172    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
173    z-index: 1;
174  }
175
176  &:hover::before {
177    transform: translate(-50%, -50%) scale(1);
178  }
179
180  span {
181    position: relative;
182    z-index: 2;
183    display: flex;
184    align-items: center;
185    gap: 0.8rem;
186  }
187
188  &.primary {
189    background: linear-gradient(
190      135deg,
191      ${e=>{let{theme:t}=e;return t.primary}} 0%,
192      ${e=>{let{theme:t}=e;return t.primary}}ee 100%
193    );
194    color: ${e=>{let{theme:t}=e;return t.background}};
195    box-shadow: 0 4px 20px ${e=>{let{theme:t}=e;return t.primary}}40,
196                0 8px 30px ${e=>{let{theme:t}=e;return t.primary}}30;
197    border: 2px solid transparent;
198
199    &:hover {
200      transform: translateY(-3px) scale(1.02);
201      box-shadow: 0 6px 25px ${e=>{let{theme:t}=e;return t.primary}}50,
202                  0 10px 35px ${e=>{let{theme:t}=e;return t.primary}}40;
203    }
204
205    &:active {
206      transform: translateY(1px) scale(0.98);
207    }
208  }
209
210  &.secondary {
211    background: ${e=>{let{theme:t}=e;return t.background}};
212    color: ${e=>{let{theme:t}=e;return t.primary}};
213    border: 2px solid ${e=>{let{theme:t}=e;return t.primary}}30;
214    backdrop-filter: blur(10px);
215    
216    &::after {
217      content: '';
218      position: absolute;
219      inset: 0;
220      background: ${e=>{let{theme:t}=e;return t.primary}}10;
221      transform: scaleX(0);
222      transform-origin: right;
223      transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
224      z-index: 0;
225    }
226
227    &:hover {
228      transform: translateY(-3px) scale(1.02);
229      border-color: ${e=>{let{theme:t}=e;return t.primary}};
230      box-shadow: 0 6px 25px ${e=>{let{theme:t}=e;return t.primary}}20;
231
232      &::after {
233        transform: scaleX(1);
234        transform-origin: left;
235      }
236    }
237
238    &:active {
239      transform: translateY(1px) scale(0.98);
240    }
241  }
242
243  @media (max-width: 768px) {
244    padding: 0.9rem 2rem;
245    font-size: ${e=>{let{theme:t}=e;return t.sizes.md}};
246  }
247
248  @media (max-width: 480px) {
249    width: 100%;
250    padding: 1rem 1.5rem;
251  }
252`,f=(0,r.Ay)(a.P.div)`
253  position: relative;
254  width: 100%;
255  height: 100%;
256  min-height: 450px;
257  display: flex;
258  align-items: center;
259  justify-content: center;
260  perspective: 1000px;
261
262  @media (max-width: 1024px) {
263    min-height: 400px;
264  }
265
266  @media (max-width: 480px) {
267    min-height: 350px;
268  }
269`,b=(0,r.Ay)(a.P.div)`
270  position: relative;
271  width: 90%;
272  height: 90%;
273  transform-style: preserve-3d;
274
275  &::before,
276  &::after {
277    content: '';
278    position: absolute;
279    width: 100%;
280    height: 100%;
281    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
282    background: ${e=>{let{theme:t}=e;return t.primary}}15;
283    z-index: 0;
284  }
285
286  &::before {
287    transform: translateZ(-50px);
288    filter: blur(20px);
289    opacity: 0.8;
290  }
291
292  &::after {

293    transform: translateZ(-25px);
294    filter: blur(10px);
295    opacity: 0.4;
296  }
297`,w=(0,r.Ay)(a.P.div)`
298  position: relative;
299  width: 100%;
300  height: 100%;
301  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
302  overflow: hidden;
303  box-shadow: 
304    0 10px 30px ${e=>{let{theme:t}=e;return t.primary}}30,
305    0 20px 60px ${e=>{let{theme:t}=e;return t.primary}}20;
306  
307  &::before {
308    content: '';
309    position: absolute;
310    inset: 0;
311    background: linear-gradient(
312      45deg,
313      ${e=>{let{theme:t}=e;return t.primary}}20 0%,
314      transparent 100%
315    );
316    z-index: 2;
317  }
318`,v=(0,r.Ay)(a.P.img)`
319  width: 100%;
320  height: 100%;
321  object-fit: cover;
322`,$=(0,r.Ay)(a.P.div)`
323  position: absolute;
324  width: ${e=>e.size}px;
325  height: ${e=>e.size}px;
326  border-radius: 50%;
327  background: ${e=>{let{theme:t}=e;return t.primary}};
328  opacity: 0.2;
329  z-index: 1;
330`,z=()=>{const[e,t]=(0,s.useState)(0),i=["Full Stack Developer","Backend Developer","Mobile App Developer","Freelancer"],r=Array.from({length:15},((e,t)=>({id:t,size:10*Math.random()+5,initialX:100*Math.random(),initialY:100*Math.random()})));z(3,6);function z(e,t){return Math.random()*(t-e)+e}(0,s.useEffect)((()=>{const e=setInterval((()=>{t((e=>(e+1)%i.length))}),2e3);return()=>clearInterval(e)}),[i.length]);return(0,d.jsx)(m,{id:"home",children:(0,d.jsxs)(p,{children:[(0,d.jsxs)(h,{children:[(0,d.jsx)(c,{initial:{opacity:0,y:20},animate:{opacity:1,y:0},transition:{duration:.5},children:(0,d.jsx)("span",{children:"\ud83d\udc4b Hello, I'm"})}),(0,d.jsxs)(x,{initial:{opacity:0,y:20},animate:{opacity:1,y:0},transition:{duration:.5,delay:.2},children:[(0,d.jsx)("span",{className:"name",children:"Ewnetu Tesfaye"}),(0,d.jsx)("div",{className:"highlight-container",children:(0,d.jsx)(n.N,{mode:"wait",children:(0,d.jsx)(a.P.span,{className:"highlight",initial:{y:50,opacity:0},animate:{y:0,opacity:1},exit:{y:-50,opacity:0},transition:{duration:.5},children:i[e]},e)})})]}),(0,d.jsx)(u,{initial:{opacity:0,y:20},animate:{opacity:1,y:0},transition:{duration:.5,delay:.4},children:"Expertise in MERNstack:Crafting dynamic web experiences with Mongodb Express.js React and Node.js. Bringing ideas to life with seamless integration top-notch performance and a passion for clean scalable code."}),(0,d.jsxs)(g,{initial:{opacity:0,y:20},animate:{opacity:1,y:0},transition:{duration:.5,delay:.6},children:[(0,d.jsx)(y,{href:"#contact",className:"primary",whileHover:{scale:1.02},whileTap:{scale:.98},children:(0,d.jsxs)("span",{children:["Let's Talk",(0,d.jsx)(a.P.span,{initial:{rotate:0},animate:{rotate:[0,-20,20,-20,20,0]},transition:{duration:1.5,repeat:1/0,repeatDelay:3},children:"\ud83d\udc4b"})]})}),(0,d.jsx)(y,{as:"button",onClick:()=>{const e=document.createElement("a");e.href=l,e.download="Ewnetu_Tesfaye_Resume.pdf",document.body.appendChild(e),e.click(),document.body.removeChild(e)},className:"secondary",whileHover:{scale:1.02},whileTap:{scale:.98},children:(0,d.jsxs)("span",{children:["Resume",(0,d.jsx)(a.P.span,{initial:{x:0},animate:{x:[0,5,0]},transition:{duration:1.5,repeat:1/0,repeatDelay:3},children:"\ud83d\ude80"})]})})]})]}),(0,d.jsx)(f,{children:(0,d.jsxs)(b,{initial:"hidden",animate:"visible",whileHover:"hover",variants:{hidden:{opacity:0,scale:.8,rotateY:-20},visible:{opacity:1,scale:1,rotateY:0,transition:{duration:1,ease:"easeOut"}},hover:{scale:1.05,rotateY:10,transition:{duration:.5}}},children:[r.map((e=>(0,d.jsx)($,{size:e.size,style:{left:`${e.initialX}%`,top:`${e.initialY}%`},animate:{x:[0,z(-50,50),0],y:[0,z(-50,50),0],opacity:[.2,.5,.2]},transition:{duration:z(3,6),repeat:1/0,repeatType:"reverse",ease:"easeInOut"}},e.id))),(0,d.jsx)(w,{animate:{borderRadius:["30% 70% 70% 30% / 30% 30% 70% 70%","70% 30% 30% 70% / 70% 70% 30% 30%","30% 70% 70% 30% / 30% 30% 70% 70%"]},transition:{duration:8,repeat:1/0,repeatType:"reverse",ease:"easeInOut"},children:(0,d.jsx)(v,{src:o,alt:"Profile",initial:{scale:1.2},animate:{scale:[1.2,1.15,1.2]},transition:{duration:8,repeat:1/0,repeatType:"reverse",ease:"easeInOut"}})})]})})]})})}}}]);
331//# sourceMappingURL=425.6ba732d8.chunk.js.map