1"use strict";(self.webpackChunkportsofzeki=self.webpackChunkportsofzeki||[]).push([[590],{1002:(e,t,i)=>{i.r(t),i.d(t,{default:()=>Z});var n=i(5043),a=i(5464),r=i(184),s=i(8129);const o={some:0,all:1};function l(e,t){let{root:i,margin:n,amount:a="some"}=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};const r=function(e,t,i){var n;if("string"===typeof e){let a=document;t&&((0,s.V)(Boolean(t.current),"Scope provided, but no element detected."),a=t.current),i?(null!==(n=i[e])&&void 0!==n||(i[e]=a.querySelectorAll(e)),e=i[e]):e=a.querySelectorAll(e)}else e instanceof Element&&(e=[e]);return Array.from(e||[])}(e),l=new WeakMap,d=new IntersectionObserver((e=>{e.forEach((e=>{const i=l.get(e.target);if(e.isIntersecting!==Boolean(i))if(e.isIntersecting){const i=t(e);"function"===typeof i?l.set(e.target,i):d.unobserve(e.target)}else i&&(i(e),l.delete(e.target))}))}),{root:i,rootMargin:n,threshold:"number"===typeof a?a:o[a]});return r.forEach((e=>d.observe(e))),()=>d.disconnect()}var d=i(3968),c=i(3546),m=i(9887),p=i(579);a.i7` 2 0% { transform: scale(1); } 3 50% { transform: scale(1.05); } 4 100% { transform: scale(1); } 5`,a.i7` 6 from { 7 opacity: 0; 8 transform: scale(0.9); 9 } 10 to { 11 opacity: 1; 12 transform: scale(1); 13 } 14`;const h=a.Ay.section` 15 padding: 8rem 0; 16 background: ${e=>{let{theme:t}=e;return t.backgroundAlt}}; 17 position: relative; 18 overflow: hidden; 19 20 &::before { 21 content: ''; 22 position: absolute; 23 top: 0; 24 left: 0; 25 right: 0; 26 height: 4px; 27 background: ${e=>{let{theme:t}=e;return t.gradient}}; 28 29 } 30`,u=a.Ay.div` 31 max-width: 1200px; 32 margin: 0 auto; 33 padding: 0 2rem; 34`,g=a.Ay.h2` 35 font-size: 2.5rem; 36 font-weight: 700; 37 text-align: center; 38 margin-bottom: 3rem; 39 background: ${e=>{let{theme:t}=e;return t.gradient}}; 40 -webkit-background-clip: text; 41 -webkit-text-fill-color: transparent; 42 position: relative; 43 44 &::after { 45 content: ''; 46 position: absolute; 47 bottom: -10px; 48 left: 50%; 49 transform: translateX(-50%); 50 width: 60px; 51 height: 4px; 52 background: ${e=>{let{theme:t}=e;return t.gradient}}; 53 border-radius: 2px; 54 } 55`,f=a.Ay.div` 56 display: grid; 57 grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); 58 gap: 2rem; 59`,y=a.Ay.div` 60 background: ${e=>{let{theme:t}=e;return t.card}}; 61 border-radius: 1rem; 62 overflow: hidden; 63 box-shadow: ${e=>{let{theme:t}=e;return t.shadowMd}}; 64 transition: transform ${e=>{let{theme:t}=e;return t.transition}}; 65 66 &:hover { 67 transform: translateY(-5px); 68 } 69`,b=a.Ay.div` 70 position: relative; 71 padding-top: 56.25%; 72 overflow: hidden; 73`,v=a.Ay.img` 74 position: absolute; 75 top: 0; 76 left: 0; 77 width: 100%; 78 height: 100%; 79 object-fit: cover; 80 transition: transform ${e=>{let{theme:t}=e;return t.transition}}; 81`,x=a.Ay.div` 82 position: absolute; 83 top: 0; 84 left: 0; 85 width: 100%; 86 height: 100%; 87 background: rgba(0, 0, 0, 0.7); 88 display: flex; 89 align-items: center; 90 justify-content: center; 91 opacity: 0; 92 transition: opacity ${e=>{let{theme:t}=e;return t.transition}}; 93 94 ${b}:hover & { 95 opacity: 1; 96 } 97`,w=a.Ay.div` 98 display: flex; 99 gap: 1rem; 100`,j=a.Ay.a` 101 width: 3rem; 102 height: 3rem; 103 border-radius: 50%; 104 background: ${e=>{let{theme:t}=e;return t.primary}}; 105 color: white; 106 display: flex; 107 align-items: center; 108 justify-content: center; 109 cursor: pointer; 110 transition: transform ${e=>{let{theme:t}=e;return t.transition}}; 111 112 &:hover { 113 transform: scale(1.1); 114 } 115`,k=a.Ay.div` 116 padding: 1.5rem; 117`,A=a.Ay.h3` 118 ${e=>{let{theme:t}=e;return t.mixins.headingStyles}}; 119 font-size: ${e=>{let{theme:t}=e;return t.sizes.xl}}; 120 margin-bottom: 0.5rem; 121`,S=a.Ay.p` 122 ${e=>{let{theme:t}=e;return t.mixins.bodyStyles}}; 123 color: ${e=>{let{theme:t}=e;return t.textLight}}; 124 margin-bottom: 1rem; 125`,z=a.Ay.div` 126 display: flex; 127 flex-wrap: wrap; 128 gap: 0.5rem; 129`,$=a.Ay.span` 130 font-size: ${e=>{let{theme:t}=e;return t.sizes.xs}}; 131 padding: 0.25rem 0.75rem; 132 border-radius: 1rem; 133 background: ${e=>{let{theme:t}=e;return t.backgroundDark}}; 134 color: ${e=>{let{theme:t}=e;return t.textLight}}; 135`,C=a.Ay.div` 136 position: fixed; 137 top: 0; 138 left: 0; 139 width: 100%; 140 height: 100%; 141 z-index: 1000; 142 display: flex; 143 align-items: center; 144 justify-content: center; 145`,P=a.Ay.div` 146 position: absolute; 147 top: 0; 148 left: 0; 149 width: 100%; 150 height: 100%; 151 background: rgba(0, 0, 0, 0.8); 152`,T=a.Ay.div` 153 position: relative; 154 width: 90%; 155 max-width: 900px; 156 max-height: 90vh; 157 overflow-y: auto; 158 background: ${e=>{let{theme:t}=e;return t.card}}; 159 border-radius: 1rem; 160 z-index: 1001; 161 padding: 2rem; 162`,E=a.Ay.button` 163 position: absolute; 164 top: 1rem; 165 right: 1rem; 166 font-size: 2rem; 167 background: none; 168 border: none; 169 color: ${e=>{let{theme:t}=e;return t.text}}; 170 cursor: pointer; 171`,R=a.Ay.div` 172 text-align: center; 173 margin-bottom: 2rem; 174 175 h2 { 176 ${e=>{let{theme:t}=e;return t.mixins.headingStyles}}; 177 font-size: ${e=>{let{theme:t}=e;return t.sizes["3xl"]}}; 178 margin-bottom: 0.5rem; 179 } 180 181 h3 { 182 color: ${e=>{let{theme:t}=e;return t.textLight}}; 183 font-size: ${e=>{let{theme:t}=e;return t.sizes.lg}}; 184 } 185`,M=a.Ay.div` 186 display: flex; 187 flex-direction: column; 188 gap: 2rem; 189`,B=a.Ay.div` 190 h4 { 191 ${e=>{let{theme:t}=e;return t.mixins.headingStyles}}; 192 font-size: ${e=>{let{theme:t}=e;return t.sizes.xl}}; 193 margin-bottom: 1rem; 194 } 195`,F=a.Ay.div` 196 display: grid; 197 grid-template-columns: repeat(3, 1fr); 198 gap: 1rem; 199`,N=a.Ay.div` 200 text-align: center; 201 padding: 1rem; 202 background: ${e=>{let{theme:t}=e;return t.backgroundDark}}; 203 border-radius: 0.5rem; 204 205 span { 206 display: block; 207 color: ${e=>{let{theme:t}=e;return t.textLight}}; 208 margin-bottom: 0.5rem; 209 } 210 211 strong { 212 font-size: ${e=>{let{theme:t}=e;return t.sizes.lg}}; 213 } 214`,I=a.Ay.div` 215 display: grid; 216 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 217 gap: 1.5rem; 218`,W=a.Ay.div` 219 h5 { 220 ${e=>{let{theme:t}=e;return t.mixins.headingStyles}}; 221 font-size: ${e=>{let{theme:t}=e;return t.sizes.base}}; 222 margin-bottom: 0.5rem; 223 text-transform: capitalize; 224 } 225`,D=a.Ay.ul` 226 list-style: none; 227 padding: 0; 228`,O=a.Ay.li` 229 ${e=>{let{theme:t}=e;return t.mixins.bodyStyles}}; 230 color: ${e=>{let{theme:t}=e;return t.textLight}}; 231 margin-bottom: 0.25rem; 232`,U=(a.Ay.div` 233 display: grid; 234 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 235 gap: 1rem; 236`,a.Ay.img` 237 width: 100%; 238 height: 200px; 239 object-fit: cover; 240 border-radius: 0.5rem; 241 cursor: pointer; 242 transition: transform ${e=>{let{theme:t}=e;return t.transition}}; 243 244 &:hover { 245 transform: scale(1.05); 246 } 247`),J=a.Ay.div` 248 background: ${e=>{let{theme:t}=e;return t.backgroundDark}}; 249 padding: 1.5rem; 250 border-radius: 0.5rem; 251 border-left: 4px solid ${e=>{let{theme:t}=e;return t.primary}}; 252`,L=a.Ay.div` 253 background: ${e=>{let{theme:t}=e;return t.backgroundDark}}; 254 padding: 1.5rem; 255 border-radius: 0.5rem; 256 border-left: 4px solid ${e=>{let{theme:t}=e;return t.success}}; 257`,H=a.Ay.div` 258 font-size: 1.5rem; 259 color: ${e=>{let{theme:t}=e;return t.primary}}; 260 margin-bottom: 0.5rem; 261`,q=a.Ay.div` 262 font-size: 1.25rem; 263 font-weight: bold; 264 color: ${e=>{let{theme:t}=e;return t.text}}; 265 margin-bottom: 0.25rem; 266`,_=a.Ay.div` 267 font-size: 0.875rem; 268 color: ${e=>{let{theme:t}=e;return t.textLight}}; 269`,G=a.Ay.h5` 270 color: ${e=>{let{theme:t}=e;return t.text}}; 271 font-size: 1rem; 272 font-weight: 600; 273 margin-bottom: 0.75rem; 274`,Q=a.Ay.div` 275 position: relative; 276 width: 100%; 277 height: 400px; 278 display: flex; 279 align-items: center; 280 justify-content: center; 281`,V=a.Ay.div` 282 position: relative; 283 width: 100%; 284 height: 100%; 285 overflow: hidden; 286`,Y=a.Ay.button` 287 position: absolute; 288 ${e=>{let{position:t}=e;return t}}: 1rem; 289 top: 50%; 290 transform: translateY(-50%); 291 background: rgba(0, 0, 0, 0.5); 292 color: white; 293 border: none; 294 border-radius: 50%; 295 width: 40px; 296 height: 40px; 297 font-size: 1.5rem; 298 display: flex; 299 align-items: center; 300 justify-content: center; 301 cursor: pointer; 302 z-index: 2; 303 transition: background-color 0.2s; 304 305 &:hover { 306 background: rgba(0, 0, 0, 0.8); 307 } 308`,Z=e=>{let{projects:t}=e;
308const[i,a]=(0,n.useState)(null),[s,o]=(0,n.useState)(0),[Z,X]=(0,n.useState)(!1),K=(0,n.useRef)(null),ee=function(e){let{root:t,margin:i,amount:a,once:r=!1}=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};const[s,o]=(0,n.useState)(!1);return(0,n.useEffect)((()=>{if(!e.current||r&&s)return;const n={root:t&&t.current||void 0,margin:i,amount:a};return l(e.current,(()=>(o(!0),r?void 0:()=>o(!1))),n)}),[t,e,i,r,a]),s}(K,{once:!0,margin:"-100px"}),te={hidden:{opacity:0,y:50},visible:e=>({opacity:1,y:0,transition:{delay:.1*e,duration:.5,ease:"easeOut"}})},ie=e=>{i&&("ArrowRight"===e.key&&ne(),"ArrowLeft"===e.key&&ae(),"Escape"===e.key&&a(null))};n.useEffect((()=>(document.addEventListener("keydown",ie),()=>document.removeEventListener("keydown",ie))),[i]);const ne=()=>{i&&o((e=>e===i.gallery.length-1?0:e+1))},ae=()=>{i&&o((e=>0===e?i.gallery.length-1:e-1))};return(0,p.jsx)(h,{ref:K,children:(0,p.jsxs)(u,{children:[(0,p.jsx)(g,{as:d.P.h2,initial:{opacity:0,y:-50},animate:ee?{opacity:1,y:0}:{},transition:{duration:.6,ease:"easeOut"},children:"Featured Projects"}),(0,p.jsx)(f,{as:d.P.div,variants:{hidden:{opacity:0},visible:{opacity:1,transition:{staggerChildren:.1,delayChildren:.3}}},initial:"hidden",animate:ee?"visible":"hidden",children:m.F.map(((e,t)=>(0,p.jsxs)(y,{as:d.P.div,custom:t,variants:te,whileHover:{y:-10,transition:{duration:.3}},whileTap:{scale:.98},children:[(0,p.jsxs)(b,{children:[(0,p.jsx)(v,{src:e.image,alt:e.title}),(0,p.jsx)(x,{as:d.P.div,initial:{opacity:0}
308,whileHover:{opacity:1},transition:{duration:.2},children:(0,p.jsxs)(w,{children:[(0,p.jsx)(j,{as:d.P.a,whileHover:{scale:1.1},whileTap:{scale:.95},href:e.githubUrl,target:"_blank",rel:"noopener noreferrer",children:(0,p.jsx)(r.hL4,{})}),(0,p.jsx)(j,{as:d.P.a,whileHover:{scale:1.1},whileTap:{scale:.95},href:e.liveUrl,target:"_blank",rel:"noopener noreferrer",children:(0,p.jsx)(r.EQc,{})}),(0,p.jsx)(j,{as:d.P.button,whileHover:{scale:1.1},whileTap:{scale:.95},onClick:()=>a(e),children:(0,p.jsx)(r.__w,{})})]})})]}),(0,p.jsxs)(k,{children:[(0,p.jsx)(A,{children:e.title}),(0,p.jsx)(S,{children:e.description}),(0,p.jsx)(z,{children:e.tech.map(((e,t)=>(0,p.jsx)($,{as:d.P.span,initial:{opacity:0,scale:0},animate:{opacity:1,scale:1},transition:{delay:.1*t},children:e},e)))})]})]},e.id)))}),(0,p.jsx)(c.N,{children:i&&(0,p.jsxs)(C,{as:d.P.div,initial:"hidden",animate:"visible",variants:{hidden:{opacity:0,scale:.8,y:50},visible:{opacity:1,scale:1,y:0,transition:{type:"spring",damping:25,stiffness:500}},exit:{opacity:0,scale:.8,y:50,transition:{duration:.3}}},exit:"exit",children:[(0,p.jsxs)(T,{as:d.P.div,initial:{scale:.9,y:20},animate:{scale:1,y:0},exit:{scale:.9,y:20},transition:{duration:.3},children:[(0,p.jsx)(E,{onClick:()=>a(null),children:(0,p.jsx)(r.QCr,{})}),(0,p.jsxs)(R,{children:[(0,p.jsx)(d.P.h2,{initial:{opacity:0,y:-20},animate:{opacity:1,y:0},transition:{delay:.2},children:i.title}),(0,p.jsx)(d.P.h3,{initial:{opacity:0,y:-20},animate:{opacity:1,y:0},transition:{delay:.3},children:i.subtitle})]}),(0,p.jsxs)(M,{children:[(0,p.jsxs)(B,{children:[(0,p.jsx)(g,{children:"Overview"}),(0,p.jsx)(d.P.p,{initial:{opacity:0,y:20},animate:{opacity:1,y:0},transition:{delay:.4},children:i.overview})]}),(0,p.jsxs)(B,{children:[(0,p.jsx)(g,{children:"Challenge"}),(0,p.jsx)(J,{as:d.P.div,initial:{opacity:0,x:-20},animate:{opacity:1,x:0},transition:{delay:.5},children:i.challenge})]}),(0,p.jsxs)(B,{children:[(0,p.jsx)(g,{children:"Solution"}),(0,p.jsx)(L,{as:d.P.div,initial:{opacity:0,x:20},animate:{opacity:1,x:0},transition:{delay:.6},children:i.solution})]}),(0,p.jsxs)(B,{children:[(0,p.jsx)(g,{children:"Impact"}),(0,p.jsx)(F,{children:Object.entries(i.impact).map(((e,t)=>{let[i,n]=e;return(0,p.jsxs)(N,{as:d.P.div,initial:{opacity:0,scale:.8},animate:{opacity:1,scale:1},transition:{delay:.7+.1*t},children:[(0,p.jsx)(H,{children:i}),(0,p.jsx)(q,{children:n}),(0,p.jsx)(_,{children:i})]},i)}))})]}),(0,p.jsxs)(B,{children:[(0,p.jsx)(g,{children:"Tech Stack"}),(0,p.jsx)(I,{children:Object.entries(i.techStack).map(((e,t)=>{let[i,n]=e;return(0,p.jsxs)(W,{as:d.P.div,initial:{opacity:0,y:20},animate:{opacity:1,y:0},transition:{delay:.8+.1*t},children:[(0,p.jsx)(G,{children:i}),(0,p.jsx)(D,{children:n.map(((e,t)=>(0,p.jsx)(O,{as:d.P.li,initial:{opacity:0,x:-10},animate:{opacity:1,x:0},transition:{delay:.9+.05*t},children:e},e)))})]},i)}))})]}),(0,p.jsxs)(B,{children:[(0,p.jsx)(g,{children:"Gallery"}),(0,p.jsxs)(Q,{children:[(0,p.jsx)(Y,{onClick:ae,position:"left",children:"\u2039"}),(0,p.jsx)(V,{children:(0,p.jsx)(c.N,{mode:"wait",children:(0,p.jsx)(U,{as:d.P.img,initial:{opacity:0,x:100},animate:{opacity:1,x:0},exit:{opacity:0,x:-100},transition:{duration:.3},src:i.gallery[s],alt:`${i.title} ${s+1}`},s)})}),(0,p.jsx)(Y,{onClick:ne,position:"right",children:"\u203a"})]})]})]})]}),(0,p.jsx)(P,{onClick:()=>a(null)})]})})]})})}},9887:(e,t,i)=>{i.d(t,{F:()=>k});const n=i.p+"static/media/work1.4f6fb9c0eb9b9b31d039.4f6fb9c0eb9b9b31d039.jpg",a=i.p+"static/media/1.1a931418b55ca9a3c926.png",r=i.p+"static/media/2.e813bbc1124d79e38171.png",s=i.p+"static/media/3.dac970d5faa287b6a9d3.png",o=i.p+"static/media/4.faeed802a66d1019b7ad.png",l=i.p+"static/media/2.9c1554a008f218097a2f.png",d=i.p+"static/media/1.e339fed3d253dad99456.png",c=i.p+"static/media/3.0e12174194306b6289de.png",m=i.p+"static/media/4.a187a1f681c009974011.png",p=i.p+"static/media/5.eb37b13b19e3c2e8315b.png",h=i.p+"static/media/6.e0e592b38814268af001.png",u=i.p+"static/media/m.0cd0543f564166d53036.jpg",g=i.p+"static/media/Screenshot 2024-12-04 043407.b36e858a56f1bf44523d.png",f=i.p+"static/media/Screenshot 2024-12-04 043429.8339760a67db38f21849.png",y=i.p+"static/media/Screenshot 2024-12-04 043439.cc5896c6d60845ba9eb6.png",b=i.p+"static/media/m.66586902c9dd68dd607b.png",v=i.p+"static/media/Screenshot 2024-12-04 043633.50c6ed55b07ecfb8457a.png",x=i.p+"static/media/Screenshot 2024-12-04 043653.8e9df453ba17ebb0a9fa.png",w=i.p+"static/media/Screenshot 2024-12-04 043704.c04bb19be28d3e9852eb.png",j=i.p+"static/media/z.beb3eeb494ac98d95866.jpg",k=[{id:1,title:"Amazon Clone",description:"A fully functional e-commerce platform inspired by Amazon, featuring user authentication, product listings, and order management.",image:n,tech:["React","Node.js","MongoDB","Express","Firebase"],liveUrl:"https://amazonclonekiyaw.netlify.app/",subtitle:"Feature-Rich E-Commerce Platform Inspired by Amazon",overview:"A comprehensive e-commerce platform built using the MERN stack. The application includes a responsive UI for browsing and purchasing products, a secure backend for managing user data and orders, and real-time authentication using Firebase. Users can search for products, add items to their cart, and complete transactions seamlessly.",challenge:"The primary challenges involved creating a robust product filtering and search system, implementing secure payment gateways, and ensuring scalability to handle a large number of users and transactions.",solution:"We utilized React for a dynamic and responsive user interface, Node.js and Express for backend services, and MongoDB for data storage. Firebase was used for real-time user authentication and database integration. Features like product recommendations and category-based filtering enhance the user experience.",impact:{performance:"Ensures seamless navigation and fast load times for all users.",scalability:"Supports high user traffic with efficie
308nt backend and database optimization.",userEngagement:"Enhanced user retention with personalized recommendations and an intuitive UI."},techStack:{frontend:["React","Redux","CSS3","Bootstrap"],backend:["Node.js","Express","MongoDB"],authentication:["Firebase"],devops:["Heroku","AWS S3"]},gallery:[o,a,r,s]},{id:2,title:"Afar Region Tourism Bureau Website",description:"A full-stack web application designed for the Afar Region Tourism Bureau, featuring content management for news and events, an interactive dashboard, and user-friendly design.",image:l,tech:["React","Node.js","MongoDB","Express"],liveUrl:"https://afartourismbureau.netlify.app/",subtitle:"Comprehensive Tourism Management Platform for the Afar Region",overview:"This project is a dynamic and responsive website tailored for the Afar Region Tourism Bureau. It includes a content management system (CMS) for news and event updates, an interactive dashboard for administrators, and a public-facing site that showcases the beauty and culture of the Afar region. The platform facilitates easy updates and ensures an engaging user experience.",challenge:"The primary challenges were designing a flexible CMS to manage diverse content types, integrating user-friendly tools for non-technical administrators, and ensuring the site could handle a growing number of visitors while maintaining optimal performance.",solution:"We implemented a MERN stack-based architecture with React for a responsive user interface and Node.js with Express for backend services. MongoDB was used for managing and organizing the data. The CMS was designed with an intuitive dashboard, allowing administrators to add, edit, and delete news, events, and media content. Advanced caching and server-side rendering were applied to ensure scalability and fast load times.",impact:{usability:"Simplified content management for administrators with an intuitive dashboard.",accessibility:"Enhanced visibility of the Afar region's tourism potential through a well-designed platform.",scalability:"Supports high traffic volumes, ensuring smooth performance during peak periods."},techStack:{frontend:["React","Redux","CSS3","Bootstrap"],backend:["Node.js","Express","MongoDB"],authentication:["JWT"],devops:["Heroku","AWS S3"]},gallery:[l,d,l,c,m,p,h]},{id:3,title:"Apple Clone",description:"A visually stunning frontend clone of the Apple website, showcasing Apple products and services with responsive design and smooth animations.",image:u,tech:["React","CSS3","JavaScript"],liveUrl:"https://apple-frontend.netlify.app",subtitle:"Pixel-Perfect Apple Website Clone with Modern UI Features",overview:"This project is a frontend clone of the Apple website, built to replicate its sleek design and smooth animations. The clone highlights Apple\u2019s product pages, showcasing devices like iPhones, MacBooks, and Apple Watches. The design focuses on delivering a seamless user experience with responsive layouts, interactive elements, and polished transitions.",challenge:"Recreating Apple\u2019s unique design language required precise attention to detail, including typography, animations, and responsiveness across devices. Ensuring the website remained lightweight and performant despite heavy visuals was also a challenge.",solution:"We utilized React to build reusable components for different sections of the site, ensuring consistency and efficiency. CSS3 animations and transitions were leveraged to mimic the Apple website\u2019s dynamic effects. The design was optimized for performance, with lazy loading of images and minimal external dependencies.",impact:{design:"Achieved a pixel-perfect clone of Apple's design with responsive layouts.",performance:"Ensured smooth animations and fast loading times with lightweight assets.",userExperience:"Delivered an engaging experience that mirrors the official Apple website."},techStack:{frontend:["React","CSS3","JavaScript"],animations:["CSS3 Animations","GSAP"],devops:["Netlify"]},gallery:[u,g,f,y]},{id:4,title:"Portfolio Website",description:"A personal portfolio website to showcase projects, skills, and experiences with dynamic animations and responsive design.",image:b,tech:["React","Framer Motion","Styled Components"],liveUrl:"https://zekisolomon.netlify.app/",subtitle:"Dynamic and Responsive Portfolio Website",overview:"This project is a personal portfolio website designed to showcase a developer\u2019s projects, skills, and experiences. Built with React, Framer Motion, and Styled Components, the site features smooth animations, interactive transitions, and a fully responsive layout. The design emphasizes modern aesthetics and usability to engage potential clients and employers.",challenge:"The main challenges were creating fluid and seamless animations while maintaining optimal performance across all devices. Designing a structure that highlights the developer\u2019s achievements and skills in an engaging way was also a key focus.",solution:"React was used for building reusable and modular components, while Framer Motion provided advanced animations and transitions. Styled Components allowed for scoped, maintainable, and flexible styling. The site was designed with responsiveness in mind to ensure compatibility with various screen sizes.",impact:{usability:"Provides a user-friendly interface for showcasing projects and skills.",aesthetics:"Modern and visually appealing design with engaging animations.",performance:"Optimized animations and layout for fast loading and smooth interactions."},techStack:{frontend:["React","Framer Motion","Styled Components"],animations:["Framer Motion"],styling:["Styled Components"],devops:["Netlify"]},gallery:[b,v,x,w]},{id:5,title:"Zoom Clone",description:"A real-time video conferencing application with chat functionality, built using EJS, Node.js, and Socket.IO.",image:j,tech:["Node.js","EJS","Socket.IO","PeerJS"],liveUrl:"https://github.com/kiyaeh/zoom-clone2",subtitle:"Real-Time Video Conferencing Platform",overview:"This project is a real-time video conferencing application inspired by Zoom. It includes features like video and audio streaming, text chat, and dynamic room creation. The project uses Socket.IO for real-time communication and PeerJS for seamless peer-to-peer video and audio connections. The application is designed to be lightweight and scalable for efficient group calls.",challenge:"The main challenges were implementing real-time video and audio streams with minimal latency, ensuring stable connections during group calls, and managing communication between multiple users in a scalable manner.",solution:"We utilized Node.js and Express for the backend server and EJS for templating to create a dynamic user interface. Socket.IO enabled real-time chat and room management, while PeerJS handled peer-to-peer video and audio communication. Scalability was ensured through WebRTC optimizations and efficie
308nt session handling.",impact:{realTimeCommunication:"Facilitated seamless group video calls with low latency.",scalability:"Supports multiple users in a single room with optimized performance.",usability:"User-friendly interface with intuitive room creation and joining features."},techStack:{frontend:["EJS","HTML5","CSS3","Bootstrap"],backend:["Node.js","Express"],realTime:["Socket.IO","PeerJS","WebRTC"],devops:["Heroku"]},gallery:[j]}]}}]); 309//# sourceMappingURL=590.1cfc0b3a.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.