https://ewnetutesfaye.netlify.app/static/js/604.4599ea0a.chunk.js

1"use strict";(self.webpackChunkportsofzeki=self.webpackChunkportsofzeki||[]).push([[604],{676:(e,i,t)=>{t.r(i),t.d(i,{default:()=>w});var a=t(5464),n=t(3968),s=t(5475),o=t(3216),r=t(5043),d=t(9887),l=t(579);const c=(0,a.Ay)(n.P.section)`
2  min-height: 100vh;
3  padding: 6rem 2rem;
4  background: ${e=>{let{theme:i}=e;return i.background}};
5  position: relative;
6`,m=(0,a.Ay)(n.P.div)`
7  max-width: 1200px;
8  margin: 0 auto;
9  position: relative;
10`,p=(0,a.Ay)((0,n.P)(s.N_))`
11  position: fixed;
12  top: 2rem;
13  left: 2rem;
14  padding: 0.8rem 1.5rem;
15  border-radius: 12px;
16  background: ${e=>{let{theme:i}=e;return i.card}};
17  color: ${e=>{let{theme:i}=e;return i.text}};
18  text-decoration: none;
19  display: flex;
20  align-items: center;
21  gap: 0.5rem;
22  font-weight: 500;
23  z-index: 10;
24  box-shadow: ${e=>{let{theme:i}=e;return i.shadowMd}};
25  transition: transform 0.3s, background 0.3s;
26
27  &:hover {
28    transform: translateY(-2px);
29    box-shadow: ${e=>{let{theme:i}=e;return i.shadowLg}};
30    background: ${e=>{let{theme:i}=e;return i.primary}}; // Change background color on hover
31  }
32`,h=(0,a.Ay)(n.P.div)`
33  text-align: center;
34  margin-bottom: 4rem;
35
36  h1 {
37    font-size: clamp(2.5rem, 5vw, 4rem);
38    margin-bottom: 1rem;
39    background: ${e=>{let{theme:i}=e;return i.gradient}};
40    -webkit-background-clip: text;
41    -webkit-text-fill-color: transparent;
42    animation: fadeIn 0.5s ease forwards; // Added animation
43  }
44
45  .subtitle {
46    font-size: 1.2rem;
47    color: ${e=>{let{theme:i}=e;return i.textSecondary}};
48    max-width: 700px;
49    margin: 0 auto;
50  }
51`,g=(0,a.Ay)(n.P.div)`
52  width: 100%;
53  height: 500px;
54  border-radius: 24px;
55  overflow: hidden;
56  margin-bottom: 4rem;
57  box-shadow: ${e=>{let{theme:i}=e;return i.shadowXl}};
58
59  img {
60    width: 100%;
61    height: 100%;
62    object-fit: cover;
63    transition: transform 0.3s ease-in-out;
64    
65    &:hover {
66      transform: scale(1.05); // Scale effect on hover
67    }
68  }
69`,u=(0,a.Ay)(n.P.div)`
70  display: grid;
71  grid-template-columns: 3fr 1fr;
72  gap: 3rem;
73  margin-bottom: 4rem;
74
75  @media (max-width: 968px) {
76    grid-template-columns: 1fr;
77  }
78`,f=a.Ay.div`
79  h2 {
80    font-size: 2rem;
81    margin-bottom: 1.5rem;
82    color: ${e=>{let{theme:i}=e;return i.text}};
83  }
84
85  p {
86    color: ${e=>{let{theme:i}=e;return i.textSecondary}};
87    line-height: 1.8;
88    margin-bottom: 2rem;
89  }
90`,b=a.Ay.div`
91  background: ${e=>{let{theme:i}=e;return i.card}};
92  padding: 2rem;
93  border-radius: 20px;
94  position: sticky;
95  top: 2rem;
96  height: fit-content;
97  box-shadow: ${e=>{let{theme:i}=e;return i.shadowLg}};
98`,y=a.Ay.div`
99  h3 {
100    font-size: 1.2rem;
101    margin-bottom: 1rem;
102    color: ${e=>{let{theme:i}=e;return i.text}};
103  }
104
105  ul {
106    list-style: none;
107    padding: 0;
108
109    li {
110      display: flex;
111      align-items: center;
112      gap: 0.5rem;
113      margin-bottom: 0.8rem;
114      color: ${e=>{let{theme:i}=e;return i.textSecondary}};
115
116      &::before {
117        content: "•";
118        color: ${e=>{let{theme:i}=e;return i.primary}};
119      }
120    }
121  }
122`,v=a.Ay.div`
123  display: grid;
124  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
125  gap: 2rem;
126  margin-top: 4rem;
127
128  .image-container {
129    border-radius: 16px;
130    overflow: hidden;
131    height: 250px;
132
133    img {
134      width: 100%;
135      height: 100%;
136      object-fit: cover;
137      transition: transform 0.3s ease;
138
139      &:hover {
140        transform: scale(1.05);
141      }
142    }
143  }
144`,w=()=>{const{id:e}=(0,o.g)(),[i,t]=(0,r.useState)(null),[a,s]=(0,r.useState)(!0),[w,x]=(0,r.useState)(!0),[S,k]=(0,r.useState)(null),j=(0,o.Zp)();(0,r.useEffect)((()=>{(()=>{try{x(!0);const i=d.F.find((i=>i.id===parseInt(e)));if(!i)return void k("Project not found");t(i)}catch(i){k("Error loading project details")}finally{x(!1)}})()}),[e]);return a?(0,l.jsx)("p",{children:"Loading..."}):S?(0,l.jsx)("p",{children:S}):(0,l.jsxs)(c,{initial:{opacity:0}

144,animate:{opacity:1},exit:{opacity:0},id:"projectdetail",children:[(0,l.jsx)(p,{onClick:()=>{j("/#portfolio")},whileHover:{x:-5,background:"#2a9d8f"},whileTap:{scale:.95},children:"\u2190 Back"}),(0,l.jsxs)(m,{children:[(0,l.jsxs)(h,{initial:{y:50,opacity:0},animate:{y:0,opacity:1},transition:{delay:.2},children:[(0,l.jsx)("h1",{children:i.title}),(0,l.jsx)("p",{className:"subtitle",children:i.subtitle})]}),(0,l.jsx)(g,{initial:{scale:.95,opacity:0},animate:{scale:1,opacity:1},transition:{delay:.4},children:(0,l.jsx)("img",{src:i.image,alt:i.title})}),(0,l.jsxs)(u,{children:[(0,l.jsx)(f,{children:(0,l.jsxs)(n.P.div,{initial:{y:50,opacity:0},animate:{y:0,opacity:1},transition:{delay:.6},children:[(0,l.jsx)("h2",{children:"Overview"}),(0,l.jsx)("p",{children:i.overview}),(0,l.jsx)("h2",{children:"The Challenge"}),(0,l.jsx)("p",{children:i.challenge}),(0,l.jsx)("h2",{children:"Our Solution"}),(0,l.jsx)("p",{children:i.solution}),(0,l.jsx)(v,{children:i.gallery.map(((e,i)=>(0,l.jsx)(n.P.div,{className:"image-container",initial:{opacity:0,y:20},animate:{opacity:1,y:0},transition:{delay:.8+.1*i},children:(0,l.jsx)("img",{src:e,alt:`Project view ${i+1}`})},i)))})]})}),(0,l.jsx)(b,{children:(0,l.jsx)(n.P.div,{initial:{x:50,opacity:0},animate:{x:0,opacity:1},transition:{delay:.8},children:(0,l.jsxs)(y,{children:[(0,l.jsx)("h3",{children:"Technology Stack"}),Object.entries(i.techStack).map((e=>{let[i,t]=e;return(0,l.jsxs)("div",{children:[(0,l.jsx)("h4",{children:i.toUpperCase()}),(0,l.jsx)("ul",{children:t.map(((e,i)=>(0,l.jsx)("li",{children:e},i)))})]},i)}))]})})})]})]})]})}},9887:(e,i,t)=>{t.d(i,{F:()=>k});const a=t.p+"static/media/work1.4f6fb9c0eb9b9b31d039.4f6fb9c0eb9b9b31d039.jpg",n=t.p+"static/media/1.1a931418b55ca9a3c926.png",s=t.p+"static/media/2.e813bbc1124d79e38171.png",o=t.p+"static/media/3.dac970d5faa287b6a9d3.png",r=t.p+"static/media/4.faeed802a66d1019b7ad.png",d=t.p+"static/media/2.9c1554a008f218097a2f.png",l=t.p+"static/media/1.e339fed3d253dad99456.png",c=t.p+"static/media/3.0e12174194306b6289de.png",m=t.p+"static/media/4.a187a1f681c009974011.png",p=t.p+"static/media/5.eb37b13b19e3c2e8315b.png",h=t.p+"static/media/6.e0e592b38814268af001.png",g=t.p+"static/media/m.0cd0543f564166d53036.jpg",u=t.p+"static/media/Screenshot 2024-12-04 043407.b36e858a56f1bf44523d.png",f=t.p+"static/media/Screenshot 2024-12-04 043429.8339760a67db38f21849.png",b=t.p+"static/media/Screenshot 2024-12-04 043439.cc5896c6d60845ba9eb6.png",y=t.p+"static/media/m.66586902c9dd68dd607b.png",v=t.p+"static/media/Screenshot 2024-12-04 043633.50c6ed55b07ecfb8457a.png",w=t.p+"static/media/Screenshot 2024-12-04 043653.8e9df453ba17ebb0a9fa.png",x=t.p+"static/media/Screenshot 2024-12-04 043704.c04bb19be28d3e9852eb.png",S=t.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:a,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

144nt 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:[r,n,s,o]},{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:d,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:[d,l,d,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:g,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:[g,u,f,b]},{id:4,title:"Portfolio Website",description:"A personal portfolio website to showcase projects, skills, and experiences with dynamic animations and responsive design.",image:y,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:[y,v,w,x]},{id:5,title:"Zoom Clone",description:"A real-time video conferencing application with chat functionality, built using EJS, Node.js, and Socket.IO.",image:S,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

144nt 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:[S]}]}}]);
145//# sourceMappingURL=604.4599ea0a.chunk.js.map