1"use strict";(self.webpackChunkportsofzeki=self.webpackChunkportsofzeki||[]).push([[707],{3151:(e,t,i)=>{i.r(t),i.d(t,{default:()=>h});var r=i(5464),n=i(3968);const a=i.p+"static/media/about.099a20c067c61d44da25.jpg";var o=i(579);const s=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 &::before { 11 content: ''; 12 position: absolute; 13 top: 0; 14 right: 0; 15 width: 45%; 16 height: 100%; 17 background: ${e=>{let{theme:t}=e;return t.gradient}}; 18 opacity: 0.05; 19 clip-path: polygon(30% 0%, 100% 0%, 100% 100%, 0% 100%); 20 } 21 22 &::after { 23 content: ''; 24 position: absolute; 25 bottom: 0; 26 left: 0; 27 width: 45%; 28 height: 100%; 29 background: ${e=>{let{theme:t}=e;return t.gradient}}; 30 opacity: 0.05; 31 clip-path: polygon(0 0, 100% 0, 70% 100%, 0 100%); 32 } 33`,l=r.Ay.div` 34 max-width: 1200px; 35 margin: 0 auto; 36 display: grid; 37 grid-template-columns: 1fr 1fr; 38 gap: 4rem; 39 align-items: center; 40 position: relative; 41 z-index: 1; 42 43 @media (max-width: 968px) { 44 grid-template-columns: 1fr; 45 gap: 2rem; 46 } 47`,d=(0,r.Ay)(n.P.div)` 48 h2 { 49 ${e=>{let{theme:t}=e;return t.mixins.headingStyles}}; 50 font-size: ${e=>{let{theme:t}=e;return t.sizes["2xl"]}}; 51 background: linear-gradient( 52 135deg, 53 ${e=>{let{theme:t}=e;return t.primary}}, 54 ${e=>{let{theme:t}=e;return t.secondary}} 55 ); 56 -webkit-background-clip: text; 57 -webkit-text-fill-color: transparent; 58 display: inline-block; 59 padding: 0.5rem 2rem; 60 position: relative; 61 margin-bottom: 2rem; 62 63 &::before { 64 content: ''; 65 position: absolute; 66 inset: 0; 67 padding: 2px; 68 border-radius: 30px; 69 background: linear-gradient( 70 135deg, 71 ${e=>{let{theme:t}=e;return t.primary}}, 72 ${e=>{let{theme:t}=e;return t.secondary}} 73 ); 74 -webkit-mask: 75 linear-gradient(#fff 0 0) content-box, 76 linear-gradient(#fff 0 0); 77 -webkit-mask-composite: xor; 78 mask-composite: exclude; 79 opacity: 0.5; 80 transition: opacity 0.3s ease; 81 } 82 83 &:hover { 84 transform: scale(1.05); 85 86 &::before { 87 opacity: 1; 88 } 89 } 90 } 91 92 .description { 93 ${e=>{let{theme:t}=e;return t.mixins.bodyStyles}}; 94 color: ${e=>{let{theme:t}=e;return t.textLight}}; 95 font-size: ${e=>{let{theme:t}=e;return t.sizes.lg}}; 96 margin-bottom: 2rem; 97 line-height: ${e=>{let{theme:t}=e;return t.lineHeights.relaxed}}; 98 } 99`,c=r.Ay.div` 100 display: grid; 101 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 102 gap: 1.5rem; 103`,p=(0,r.Ay)(n.P.div)` 104 display: flex; 105 align-items: center; 106 gap: 1rem; 107 transition: all 0.3s ease; 108 109 .label { 110 color: ${e=>{let{theme:t}=e;return t.textMuted}}; 111 min-width: 100px; 112 display: flex; 113 align-items: center; 114 gap: 0.5rem; 115 position: relative; 116 117 .icon { 118 font-size: 1.2rem; 119 transition: transform 0.3s ease; 120 opacity: 0.7; 121 } 122 123 &::after { 124 content: ''; 125 position: absolute; 126 bottom: -2px; 127 left: 0; 128 width: 0; 129 height: 1px; 130 background: ${e=>{let{theme:t}=e;return t.primary}}; 131 transition: width 0.3s ease; 132 } 133 } 134 135 .value { 136 color: ${e=>{let{theme:t}=e;return t.text}}; 137 font-weight: ${e=>{let{theme:t}=e;return t.weights.medium}}; 138 position: relative; 139 transform-origin: left; 140 transition: transform 0.3s ease; 141 142 a { 143 color: ${e=>{let{theme:t}=e;return t.primary}}; 144 text-decoration: none; 145 transition: ${e=>{let{theme:t}=e;return t.transition}}; 146 position: relative; 147 148 &::after { 149 content: ''; 150 position: absolute; 151 bottom: -2px; 152 left: 0; 153 width: 0; 154 height: 1px; 155 background: ${e=>{let{theme:t}=e;return t.secondary}}; 156 transition: width 0.3s ease; 157 } 158 159 &:hover { 160 color: ${e=>{let{theme:t}=e;return t.secondary}}; 161 162 &::after { 163 width: 100%; 164 } 165 } 166 } 167 } 168 169 &:hover { 170 transform: translateX(5px); 171 172 .label { 173 &::after { 174 width: 100%; 175 } 176 177 .icon { 178 transform: rotate(10deg) scale(1.1); 179 } 180 } 181 182 .value { 183 transform: scale(1.02); 184 } 185 } 186`,m=(0,r.Ay)(n.P.div)` 187 position: relative; 188 border-radius: 20px; 189 overflow: hidden; 190 aspect-ratio: 1; 191 192 &::before { 193 content: ''; 194 position: absolute; 195 inset: 0; 196 background: linear-gradient(135deg, 197 ${e=>{let{theme:t}=e;return t.primary}}50, 198 ${e=>{let{theme:t}=e;return t.secondary}}50 199 ); 200 opacity: 0.1; 201 transition: opacity 0.3s ease; 202 } 203 204 &:hover::before { 205 opacity: 0.2; 206 } 207 208 img { 209 width: 100%; 210 height: 100%; 211 object-fit: cover; 212 border-radius: 20px; 213 border: 2px solid transparent; 214 background: ${e=>{let{theme:t}=e;return`linear-gradient(${t.card}, ${t.card}) padding-box,\n linear-gradient(135deg, ${t.primary}50, ${t.secondary}50) border-box`}}; 215 transition: transform 0.3s ease; 216 } 217 218 &:hover img { 219 transform: scale(1.05); 220 } 221 222 @media (max-width: 968px) { 223 max-width: 400px; 224 margin: 0 auto; 225 } 226`,h=()=>{const e=[{icon:"\ud83c\udfa4",label:"Name",value:"Ewnetu Tesfaye"},{icon:"\u2709\ufe0f",label:"Email",value:"[email protected]"},{icon:"\ud83c\udfe0",label:"Residence",value:"Ethiopia"},{icon:"\ud83c\udf06",label:"City",value:"Addis Ababa"},{icon:"\ud83c\udf93",label:"Degree",value:"Bachlor of Computer Science"},{icon:"\ud83d\udcbc",label:"Freelance",value:(0,o.jsxs)(o.Fragment,{children:["Hire me on ",(0,o.jsx)("a",{href:"https://upwork.com",target:"_blank",rel:"noopener noreferrer",children:"Upwork"})," and ",(0,o.jsx)("a",{href:"https://toptal.com",target:"_blank",rel:"noopener noreferrer",children:"Toptal"})]})}];return(0,o.jsx)(s,{id:"about",children:(0,o.jsxs)(l,{children:[(0,o.jsx)(m,{initial:{opacity:0,x:-50},whileInView:{opacity:1,x:0},viewport:{once:!0},transition:{duration:.5},children:(0,o.jsx)("img",{src:a,alt:"Profile"})}),(0,o.jsxs)(d,{initial:{opacity:0,x:50},whileInView:{opacity:1,x:0},viewport:{once:!0},transition:{duration:.5},children:[(0,o.jsxs)("h2",{children:[(0,o.jsx)("span",{className:"accent"}),"About Me"]}),(0,o.jsx)("p",{className:"description",children:"Hello there!Ewnetu is here.born and raised in zeway,Ethiopia.i'm Computer Science senior year Student at semera university.i started programming in 2021 with C++,javascript ,and have gained exprience in the MERN stack developer,i enjoy solving complex problems and working closely with teams and clients to deliver high quality solutions.i am always looking to learn new technologies and techniques to improve my skills and stay upto date with industry trends.when i'm not coding i like to attend tech sessions.feel free to contact me if you'd like to discu
226ss how we can work together on your next projects"}),(0,o.jsx)(c,{children:e.map(((e,t)=>(0,o.jsxs)(p,{as:n.P.div,initial:{opacity:0,y:20},whileInView:{opacity:1,y:0},viewport:{once:!0},transition:{duration:.5,delay:.1*t},children:[(0,o.jsxs)("span",{className:"label",children:[(0,o.jsx)("span",{children:e.icon}),e.label,":"]}),(0,o.jsx)("span",{className:"value",children:e.value})]},t)))})]})]})})}}}]); 227//# sourceMappingURL=707.2857c33b.chunk.js.map
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.