-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
19 lines (19 loc) · 32.6 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Eyuel Solomon - Web Designer + Frontend Developer</title>
<meta name="keywords" content="Frontend developer + designer in ethiopia, Web app developer, website designer, Eyuel Solomon">
<meta name="og:type" content="website">
<meta property="og:title" content="Eyuel Solomon - Web Designer + Frontend Developer">
<meta name="description" content="Hello, I'm Eyuel. I'm a Web Designer and a Front-end Developer from Ethiopia">
<meta property="og:description" content="Hello, I'm Eyuel. I'm a Web Designer and a Front-end Developer from Ethiopia">
<meta property="og:image" content="/avatar.webp">
<meta property="og:url" content="https://eyuelad.github.io/">
<meta name="twitter:card" content="summary">
<link rel="icon" type="image/x-icon" href="/logo-icon.svg"><link rel="modulepreload" href="/_payload.js"><link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.6990272b.js"><link rel="preload" as="style" href="/_nuxt/entry.62bef236.css"><link rel="modulepreload" as="script" crossorigin href="/_nuxt/default.d5dcd667.js"><link rel="modulepreload" as="script" crossorigin href="/_nuxt/Header.96ddac86.js"><link rel="modulepreload" as="script" crossorigin href="/_nuxt/Footer.74e6624e.js"><link rel="modulepreload" as="script" crossorigin href="/_nuxt/composables.07284e8d.js"><link rel="modulepreload" as="script" crossorigin href="/_nuxt/_commonjsHelpers.726de751.js"><link rel="modulepreload" as="script" crossorigin href="/_nuxt/index.d8d290f8.js"><link rel="preload" as="style" href="/_nuxt/CTA.3c300db3.css"><link rel="modulepreload" as="script" crossorigin href="/_nuxt/hero.f1a8c0b7.js"><link rel="modulepreload" as="script" crossorigin href="/_nuxt/web-1-10.b0dd2a9a.js"><link rel="modulepreload" as="script" crossorigin href="/_nuxt/Works.e855ab1c.js"><link rel="modulepreload" as="script" crossorigin href="/_nuxt/Featured.848799f7.js"><link rel="modulepreload" as="script" crossorigin href="/_nuxt/useImage.3bbd0ea9.js"><link rel="modulepreload" as="script" crossorigin href="/_nuxt/query.6c9d5ef5.js"><link rel="modulepreload" as="script" crossorigin href="/_nuxt/utils.f6caf6e3.js"><link rel="modulepreload" as="script" crossorigin href="/_nuxt/index.79f7c7f3.js"><link rel="modulepreload" as="script" crossorigin href="/_nuxt/Services.5b8fdfec.js"><link rel="modulepreload" as="script" crossorigin href="/_nuxt/Testimonials.fe3bc643.js"><link rel="modulepreload" as="script" crossorigin href="/_nuxt/CTA.10a18eb1.js"><link rel="prefetch" as="script" crossorigin href="/_nuxt/web-socket.ab65699b.js"><link rel="prefetch" as="script" crossorigin href="/_nuxt/asyncData.791c8611.js"><link rel="prefetch" as="script" crossorigin href="/_nuxt/error-component.c48757a5.js"><link rel="prefetch" as="image" type="image/svg+xml" href="/_nuxt/bi_brush.6d9b1e00.svg"><link rel="prefetch" as="image" type="image/svg+xml" href="/_nuxt/bi_code-square.56bc1942.svg"><link rel="prefetch" as="image" type="image/svg+xml" href="/_nuxt/ph_quotes.ac65693e.svg"><link rel="prefetch" as="image" type="image/png" href="/_nuxt/doug-nebeker.a56ac88f.png"><link rel="prefetch" as="image" type="image/png" href="/_nuxt/kyo.39d6a960.png"><link rel="prefetch" as="image" type="image/png" href="/_nuxt/motoki-aoki.abf00f0b.png"><link rel="prefetch" as="image" type="image/webp" href="/_nuxt/cover.5d16cc61.webp"><link rel="prefetch" as="image" type="image/webp" href="/_nuxt/cover.8146335a.webp"><link rel="prefetch" as="image" type="image/png" href="/_nuxt/cover.2db07529.png"><link rel="prefetch" as="image" type="image/webp" href="/_nuxt/cover.84e50235.webp"><link rel="prefetch" as="image" type="image/webp" href="/_nuxt/cover.39256b68.webp"><link rel="prefetch" as="image" type="image/webp" href="/_nuxt/cover.73add59f.webp"><link rel="prefetch" as="image" type="image/webp" href="/_nuxt/cover.9cb98121.webp"><link rel="prefetch" as="image" type="image/webp" href="/_nuxt/cover.c6dfd5b8.webp"><link rel="prefetch" as="image" type="image/webp" href="/_nuxt/cover.ef68c984.webp"><link rel="stylesheet" href="/_nuxt/entry.62bef236.css"><link rel="stylesheet" href="/_nuxt/CTA.3c300db3.css"></head>
<body ><div id="__nuxt"><!--[--><div class="bg-gray-900 text-gray-50"><div class=""><header id="headers" class="fixed z-10 w-full text-sm backdrop-blur-none transition-all duration-300"><div class="lg:container mx-auto py-4 px-6 md:px-8"><div class="flex justify-between items-center"><div class="text-lg font-bold">Eyuel Solomon</div><nav class="hidden md:flex items-center gap-8 font-medium"><a class="py-3 inline-block relative after:block after:absolute after:bottom-0 after:w-full after:h-0 after:bg-sky-500 after:duration-200 hover:after:h-1" href="#works"> Works </a><a class="py-3 inline-block relative after:block after:absolute after:bottom-0 after:w-full after:h-0 after:bg-sky-500 after:duration-200 hover:after:h-1" href="#services"> Services </a><a class="btn-default bg-sky-500 hover:bg-sky-400" href="mailto:[email protected]"> Contact </a></nav></div></div></header><main class="pt-16 md:pt-20 relative overflow-clip"><!--[--><!--[--><div class=""><section id="hero-home" class="py-8 lg:py-20"><div class="relative lg:container mx-auto p-4 px-6 md:px-8 grid md:grid-cols-12 gap-6 md:gap-12 2xl:gap-20"><div class="flex items-center col-span-12 md:col-span-6 order-2 md:order-1"><div><div class="mb-8 md:mb-12 text-sky-200 text-5xl xs:text-6xl md:text-5xl lg:text-6xl xl:text-7xl font-bold"><div class="" data-aos="fade-right" data-aos-once="true"> Let's <span class="text-sky-50">Build</span></div><div class="" data-aos="fade-right" data-aos-once="true" data-aos-delay="100"><span class="text-sky-50">Amazing</span><span class="">Things</span></div><div class="" data-aos="fade-right" data-aos-once="true" data-aos-delay="200"> On The <span class="text-sky-50">Web</span></div></div><div class="mb-8 md:mb-12 text-lg xs:text-xl" data-aos="zoom-in" data-aos-once="true" data-aos-duration="500"> I'm Eyuel, a Web Designer + Frontend Developer based in Ethiopia. </div><a href="#works" class="btn-default bg-sky-500 hover:bg-sky-400" data-aos="zoom-in" data-aos-once="true"><span>Portfolio</span><span><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 fill-white" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 1.414L10.586 9H7a1 1 0 100 2h3.586l-1.293 1.293a1 1 0 101.414 1.414l3-3a1 1 0 000-1.414z" clip-rule="evenodd"></path></svg></span></a></div></div><div class="flex items-center col-span-12 md:col-span-6 order-1 md:order-2"><img class="hero-home__image absolute lg:top-0 right-0 w-full md:w-1/2 object-contain opacity-60 lg:-translate-y-1/3 translate-x-1/4 scale-125 md:scale-150 xl:scale-125" src="/images/web-1-10.png" alt="web design + web development"></div></div></section><section id="works" data-v-1b0005b0><div class="lg:container mx-auto py-12 md:py-20 px-6 md:px-8" data-v-1b0005b0><div class="mb-3 md:mb-6 flex items-center justify-between" data-v-1b0005b0><h2 class="text-3xl md:text-4xl" data-v-1b0005b0>Featured Works</h2></div><div class="md:block flex gap-4 snap-x snap-mandatory overflow-x-auto md:overflow-x-hidden rounded-lg" data-v-1b0005b0><!--[--><div class="py-4 xl:py-6 w-5/6 sm:w-4/6 md:w-full snap-start shrink-0" data-v-1b0005b0><a class="featured-work group py-3 md:flex items-center justify-between featured-work--text-first" href="https://www.bunnamore.com" target="_blank" data-v-1b0005b0><div class="md:order-2 featured-work__img-container relative md:w-6/12 md:mx-auto mb-4 md:mb-0"><img class="featured-work__img col-span-8 rounded-lg aspect-[1.778] object-cover bg-gray-800 duration-300" src="/_nuxt/cover.84e50235.webp" alt="Bunnamore Website"><div class="featured-work__overlay absolute z-10 top-0 w-full h-full rounded-lg flex items-center justify-center gap-3 bg-gray-800/60 opacity-0 duration-300 group-hover:opacity-100"><a class="btn-default bg-gray-100 hover:bg-gray-50 text-sky-500 scale-0 duration-300 delay-75 group-hover:scale-100" href="https://www.bunnamore.com" target="_blank"><span> Visit Live</span><span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-5 w-5 stroke-sky-500"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"></path></svg></span></a></div></div><div class="md:order-1 md:w-5/12 h-fit"><h4 class="lg:mb-6 xl:mb-10 text-2xl md:text-3xl lg:text-4xl xl:text-6xl font-medium">Bunnamore Website</h4><h4 class="lg:text-lg xl:text-xl mb-4">A wordpress website for Bunnamore Trading, illy Cafe franchise owner in Ethiopia.</h4><div class="mb-4 hidden md:flex gap-2"><!--[--><div class="px-2 py-1 rounded bg-sky-800/40 text-xs lg:text-sm">Front-end</div><div class="px-2 py-1 rounded bg-sky-800/40 text-xs lg:text-sm">Web Design</div><div class="px-2 py-1 rounded bg-sky-800/40 text-xs lg:text-sm">Website</div><!--]--></div></div></a></div><div class="py-4 xl:py-6 w-5/6 sm:w-4/6 md:w-full snap-start shrink-0" data-v-1b0005b0><a class="featured-work group py-3 md:flex items-center justify-between" href="https://www.lolinedigitals.com" target="_blank" data-v-1b0005b0><div class="featured-work__img-container relative md:w-6/12 md:mx-auto mb-4 md:mb-0"><img class="featured-work__img col-span-8 rounded-lg aspect-[1.778] object-cover bg-gray-800 duration-300" src="/_nuxt/cover.9cb98121.webp" alt="Loline Digitals Website"><div class="featured-work__overlay absolute z-10 top-0 w-full h-full rounded-lg flex items-center justify-center gap-3 bg-gray-800/60 opacity-0 duration-300 group-hover:opacity-100"><a class="btn-default bg-gray-100 hover:bg-gray-50 text-sky-500 scale-0 duration-300 delay-75 group-hover:scale-100" href="https://www.lolinedigitals.com" target="_blank"><span> Visit Live</span><span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-5 w-5 stroke-sky-500"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"></path></svg></span></a></div></div><div class="md:w-5/12 h-fit"><h4 class="lg:mb-6 xl:mb-10 text-2xl md:text-3xl lg:text-4xl xl:text-6xl font-medium">Loline Digitals Website</h4><h4 class="lg:text-lg xl:text-xl mb-4">A static website for Loline Digitals, a digital marketing agency based in Ethiopia.</h4><div class="mb-4 hidden md:flex gap-2"><!--[--><div class="px-2 py-1 rounded bg-sky-800/40 text-xs lg:text-sm">Front-end</div><div class="px-2 py-1 rounded bg-sky-800/40 text-xs lg:text-sm">Web Design</div><div class="px-2 py-1 rounded bg-sky-800/40 text-xs lg:text-sm">Website</div><!--]--></div></div></a></div><div class="py-4 xl:py-6 w-5/6 sm:w-4/6 md:w-full snap-start shrink-0" data-v-1b0005b0><a class="featured-work group py-3 md:flex items-center justify-between featured-work--text-first" href="https://www.lolinemag.com" target="_blank" data-v-1b0005b0><div class="md:order-2 featured-work__img-container relative md:w-6/12 md:mx-auto mb-4 md:mb-0"><img class="featured-work__img col-span-8 rounded-lg aspect-[1.778] object-cover bg-gray-800 duration-300" src="/_nuxt/cover.c6dfd5b8.webp" alt="Loline Mag Website"><div class="featured-work__overlay absolute z-10 top-0 w-full h-full rounded-lg flex items-center justify-center gap-3 bg-gray-800/60 opacity-0 duration-300 group-hover:opacity-100"><a class="btn-default bg-gray-100 hover:bg-gray-50 text-sky-500 scale-0 duration-300 delay-75 group-hover:scale-100" href="https://www.lolinemag.com" target="_blank"><span> Visit Live</span><span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-5 w-5 stroke-sky-500"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"></path></svg></span></a></div></div><div class="md:order-1 md:w-5/12 h-fit"><h4 class="lg:mb-6 xl:mb-10 text-2xl md:text-3xl lg:text-4xl xl:text-6xl font-medium">Loline Mag Website</h4><h4 class="lg:text-lg xl:text-xl mb-4">A dynamic website for Loline Mag, an Ethiopian digital magazine.</h4><div class="mb-4 hidden md:flex gap-2"><!--[--><div class="px-2 py-1 rounded bg-sky-800/40 text-xs lg:text-sm">Front-end</div><div class="px-2 py-1 rounded bg-sky-800/40 text-xs lg:text-sm">Web Design</div><div class="px-2 py-1 rounded bg-sky-800/40 text-xs lg:text-sm">Website</div><!--]--></div></div></a></div><div class="py-4 xl:py-6 w-5/6 sm:w-4/6 md:w-full snap-start shrink-0" data-v-1b0005b0><a class="featured-work group py-3 md:flex items-center justify-between" href="https://1takeprod.com" target="_blank" data-v-1b0005b0><div class="featured-work__img-container relative md:w-6/12 md:mx-auto mb-4 md:mb-0"><img class="featured-work__img col-span-8 rounded-lg aspect-[1.778] object-cover bg-gray-800 duration-300" src="/_nuxt/cover.5d16cc61.webp" alt="1Take Production Website"><div class="featured-work__overlay absolute z-10 top-0 w-full h-full rounded-lg flex items-center justify-center gap-3 bg-gray-800/60 opacity-0 duration-300 group-hover:opacity-100"><a class="btn-default bg-gray-100 hover:bg-gray-50 text-sky-500 scale-0 duration-300 delay-75 group-hover:scale-100" href="https://1takeprod.com" target="_blank"><span> Visit Live</span><span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-5 w-5 stroke-sky-500"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"></path></svg></span></a></div></div><div class="md:w-5/12 h-fit"><h4 class="lg:mb-6 xl:mb-10 text-2xl md:text-3xl lg:text-4xl xl:text-6xl font-medium">1Take Production Website</h4><h4 class="lg:text-lg xl:text-xl mb-4">A dynamic Wordpress website for 1Take Production, a priduction company based in Ethiopia.</h4><div class="mb-4 hidden md:flex gap-2"><!--[--><div class="px-2 py-1 rounded bg-sky-800/40 text-xs lg:text-sm">Front-end</div><div class="px-2 py-1 rounded bg-sky-800/40 text-xs lg:text-sm">Web Design</div><div class="px-2 py-1 rounded bg-sky-800/40 text-xs lg:text-sm">Website</div><!--]--></div></div></a></div><div class="py-4 xl:py-6 w-5/6 sm:w-4/6 md:w-full snap-start shrink-0" data-v-1b0005b0><a class="featured-work group py-3 md:flex items-center justify-between featured-work--text-first" href="https://blog.lolinemag.com" target="_blank" data-v-1b0005b0><div class="md:order-2 featured-work__img-container relative md:w-6/12 md:mx-auto mb-4 md:mb-0"><img class="featured-work__img col-span-8 rounded-lg aspect-[1.778] object-cover bg-gray-800 duration-300" src="/_nuxt/cover.73add59f.webp" alt="Loline Blog"><div class="featured-work__overlay absolute z-10 top-0 w-full h-full rounded-lg flex items-center justify-center gap-3 bg-gray-800/60 opacity-0 duration-300 group-hover:opacity-100"><a class="btn-default bg-gray-100 hover:bg-gray-50 text-sky-500 scale-0 duration-300 delay-75 group-hover:scale-100" href="https://blog.lolinemag.com" target="_blank"><span> Visit Live</span><span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-5 w-5 stroke-sky-500"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"></path></svg></span></a></div></div><div class="md:order-1 md:w-5/12 h-fit"><h4 class="lg:mb-6 xl:mb-10 text-2xl md:text-3xl lg:text-4xl xl:text-6xl font-medium">Loline Blog</h4><h4 class="lg:text-lg xl:text-xl mb-4">A blogging platform for writers to share their stories and for readers to discover fresh ideas and perspectives.</h4><div class="mb-4 hidden md:flex gap-2"><!--[--><div class="px-2 py-1 rounded bg-sky-800/40 text-xs lg:text-sm">Front-end</div><div class="px-2 py-1 rounded bg-sky-800/40 text-xs lg:text-sm">Web App</div><!--]--></div></div></a></div><div class="py-4 xl:py-6 w-5/6 sm:w-4/6 md:w-full snap-start shrink-0" data-v-1b0005b0><a class="featured-work group py-3 md:flex items-center justify-between" target="_blank" data-v-1b0005b0><div class="featured-work__img-container relative md:w-6/12 md:mx-auto mb-4 md:mb-0"><img class="featured-work__img col-span-8 rounded-lg aspect-[1.778] object-cover bg-gray-800 duration-300" src="/_nuxt/cover.ef68c984.webp" alt="Menurize Landing Page"><!----></div><div class="md:w-5/12 h-fit"><h4 class="lg:mb-6 xl:mb-10 text-2xl md:text-3xl lg:text-4xl xl:text-6xl font-medium">Menurize Landing Page</h4><h4 class="lg:text-lg xl:text-xl mb-4">A landing page design for a digital menu service provider.</h4><div class="mb-4 hidden md:flex gap-2"><!--[--><div class="px-2 py-1 rounded bg-sky-800/40 text-xs lg:text-sm">Web Design</div><div class="px-2 py-1 rounded bg-sky-800/40 text-xs lg:text-sm">Website</div><!--]--></div></div></a></div><!--]--></div></div></section><section id="services"><div class="lg:container mx-auto py-12 md:py-20 px-6 md:px-8"><div class="mb-4 md:mb-12 flex justify-center"><h2 class="text-4xl">Services</h2></div><div class="grid md:grid-cols-12 gap-4 md:gap-6 pb-2 rounded-lg"><!--[--><div class="xl:col-start-2 mt-14 xl:mt-16 px-4 pt-0 pb-6 md:col-span-6 xl:col-span-5 flex flex-col items-center justify-between gap-6 rounded-3xl bg-sky-900/20" data-aos="fade-up" data-aos-once="true" data-aos-duration="500" data-aos-delay="0" data-aos-anchor-placement="top-bottom"><div class="relative flex flex-col items-center text-center"><div class="p-6 md:p-8 w-fit rounded-full bg-sky-50 absolute top-0 left-1/2 -translate-y-1/2 -translate-x-1/2 shadow-lg shadow-sky-900/20 transition-all duration-300"><img class="h-6 w-6 md:h-10 md:w-10" src="/_nuxt/bi_brush.6d9b1e00.svg"></div><h4 class="relative mt-16 md:mt-20 text-sky-400 text-xl sm:text-2xl md:text-4xl font-bold"><!----> Web Design</h4></div><div class="space-y-1"><!--[--><div class="flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg><div>Website & landing page design</div></div><div class="flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg><div>Dashboard application design</div></div><div class="flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg><div>Email template design, ...</div></div><!--]--></div><div class="flex justify-center gap-3"></div></div><div class="mt-14 xl:mt-16 px-4 pt-0 pb-6 md:col-span-6 xl:col-span-5 flex flex-col items-center justify-between gap-6 rounded-3xl bg-sky-900/20" data-aos="fade-up" data-aos-once="true" data-aos-duration="500" data-aos-delay="200" data-aos-anchor-placement="top-bottom"><div class="relative flex flex-col items-center text-center"><div class="p-6 md:p-8 w-fit rounded-full bg-sky-50 absolute top-0 left-1/2 -translate-y-1/2 -translate-x-1/2 shadow-lg shadow-sky-900/20 transition-all duration-300"><img class="h-6 w-6 md:h-10 md:w-10" src="/_nuxt/bi_code-square.56bc1942.svg"></div><h4 class="relative mt-16 md:mt-20 text-sky-400 text-xl sm:text-2xl md:text-4xl font-bold"><div class="absolute -top-1 sm:-top-2 left-1/2 -translate-y-1/2 -translate-x-1/2 text-sm sm:text-base font-medium">Frontend</div> Web Development</h4></div><div class="space-y-1"><!--[--><div class="flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg><div>Website & web app development</div></div><div class="flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg><div>VueJs, NuxtJs, AlpineJs, Tailwind CSS</div></div><div class="flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg><div>HTML, CSS, JavaScript</div></div><!--]--></div><div class="flex justify-center gap-3"></div></div><!--]--></div></div></section><section id="testimonials" class="bg-gradient-to-b from-gray-800/40 to-transparent"><div class="lg:container mx-auto py-12 md:py-20 px-6 md:px-8"><div class="mb-4 md:mb-12 flex items-center justify-between"><h2 class="text-4xl">What Clients Say</h2><div class="flex gap-x-4"><button class="group btn-icon bg-sky-900 disabled:bg-sky-900/50 hover:bg-sky-800" disabled><span><svg class="h-5 w-5 stroke-sky-100 group-disabled:stroke-sky-700" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"></path></svg></span></button><button class="group btn-icon bg-sky-900 disabled:bg-sky-900/50 hover:bg-sky-800" disabled><span><svg class="h-5 w-5 stroke-sky-100 group-disabled:stroke-sky-700" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"></path></svg></span></button></div></div><div id="testimonials-carousel" class="flex gap-4 md:gap-6 snap-x snap-mandatory rounded-xl overflow-x-hidden"><!--[--><div id="testimonial-0" class="relative mt-14 xl:mt-16 p-6 md:p-8 shrink-0 w-full md:w-1/2 xl:w-1/3 snap-start flex flex-col justify-between space-y-6 rounded-2xl bg-sky-900/20"><div class="animate-pulse-sm peer p-4 w-fit rounded-lg bg-sky-900 absolute top-0 -translate-y-1/2 transition-all duration-300"><img class="h-6 w-6 md:h-8 md:w-8" src="/_nuxt/ph_quotes.ac65693e.svg"></div><div class="italic line-clamp-6">Eyuel is very professional and got the job done in a timely and quality manner. I'll be working with him again.</div><div class="peer"><div class="text-lg font-bold">Doug Nebeker</div><div class="">Upwork Client</div></div><a style="" class="rounded-lg w-full h-full p-2 md:p-4 flex justify-center bg-sky-900/95 absolute -top-6 left-0 opacity-0 scale-0 duration-300 peer-hover:scale-100 peer-hover:opacity-100 hover:scale-100 hover:opacity-100" href="https://www.upwork.com/freelancers/~01267a35e2bccc37e2" target="_blank"><img class="max-h-full object-contain rounded-lg" src="/_nuxt/doug-nebeker.a56ac88f.png"></a></div><div id="testimonial-1" class="relative mt-14 xl:mt-16 p-6 md:p-8 shrink-0 w-full md:w-1/2 xl:w-1/3 snap-start flex flex-col justify-between space-y-6 rounded-2xl bg-sky-900/20"><div class="animate-pulse-sm peer p-4 w-fit rounded-lg bg-sky-900 absolute top-0 -translate-y-1/2 transition-all duration-300"><img class="h-6 w-6 md:h-8 md:w-8" src="/_nuxt/ph_quotes.ac65693e.svg"></div><div class="italic line-clamp-6">Very quick and nice update! I asked a bit challenging html effect task in my 2nd work with him.
His 1st update was perfect and I had nothing to ask further. Good understanding with a professional skillset!</div><div class="peer"><div class="text-lg font-bold">Motoki Aoki</div><div class="">Upwork Client</div></div><a style="" class="rounded-lg w-full h-full p-2 md:p-4 flex justify-center bg-sky-900/95 absolute -top-6 left-0 opacity-0 scale-0 duration-300 peer-hover:scale-100 peer-hover:opacity-100 hover:scale-100 hover:opacity-100" href="https://www.upwork.com/freelancers/~01267a35e2bccc37e2" target="_blank"><img class="max-h-full object-contain rounded-lg" src="/_nuxt/motoki-aoki.abf00f0b.png"></a></div><div id="testimonial-2" class="relative mt-14 xl:mt-16 p-6 md:p-8 shrink-0 w-full md:w-1/2 xl:w-1/3 snap-start flex flex-col justify-between space-y-6 rounded-2xl bg-sky-900/20"><div class="animate-pulse-sm peer p-4 w-fit rounded-lg bg-sky-900 absolute top-0 -translate-y-1/2 transition-all duration-300"><img class="h-6 w-6 md:h-8 md:w-8" src="/_nuxt/ph_quotes.ac65693e.svg"></div><div class="italic line-clamp-6">Eyuel is very top quality of Vue.js developer among all the developers that I hired.
He did an amazing job for my Vue.js V2 project.
I strongly recommend anyone that looking for a web developer to hire Eyuel without a second thought, and you will never be disappointed.</div><div class="peer"><div class="text-lg font-bold">Kyo</div><div class="">Upwork Client</div></div><a style="" class="rounded-lg w-full h-full p-2 md:p-4 flex justify-center bg-sky-900/95 absolute -top-6 left-0 opacity-0 scale-0 duration-300 peer-hover:scale-100 peer-hover:opacity-100 hover:scale-100 hover:opacity-100" href="https://www.upwork.com/freelancers/~01267a35e2bccc37e2" target="_blank"><img class="max-h-full object-contain rounded-lg" src="/_nuxt/kyo.39d6a960.png"></a></div><!--]--></div></div></section><section id="section-cta" data-v-e7d3c631><div class="lg:container mx-auto py-12 md:py-20 px-6 md:px-8" data-v-e7d3c631><div class="cta rounded-xl p-6 py-8 md:p-12 bg-black grid md:grid-cols-12 gap-4" data-v-e7d3c631><div class="md:col-span-10 lg:col-span-8 2xl:col-span-6 md:col-start-2 lg:col-start-3 2xl:col-start-4 flex flex-col sm:flex-row items-center gap-6 md:gap-8" data-v-e7d3c631><img class="cta__img w-40 rounded-lg bg-sky-800/50 object-contain aspect-square" src="/images/web-1-10.png" alt="" data-v-e7d3c631><div class="text-center sm:text-left" data-v-e7d3c631><div class="mb-6 md:mb-8 text-2xl sm:text-2xl md:text-4xl font-bold" data-v-e7d3c631>Do you have a Web Project in Mind?</div><a class="mx-auto sm:mx-0 btn-default bg-sky-500 hover:bg-sky-400" href="mailto:[email protected]" data-aos="zoom-in" data-aos-once="true" data-v-e7d3c631>Let's Work Together!</a></div></div></div></div></section></div><!--]--><!--]--></main><footer class="bg-gray-800/50 text-sky-50"><div class="lg:container mx-auto p-4 py-8 px-6 md:px-8 text-center"><div class="mb-4 flex justify-center gap-x-4"><!--[--><div class=""><a class="block p-2 fill-white hover:fill-sky-500 duration-200" href="https://www.github.com/eyuelad"><svg class="h-6 w-6" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Github</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg></a></div><div class=""><a class="block p-2 fill-white hover:fill-sky-500 duration-200" href="https://www.linkedin.com/eyuelad"><svg class="h-6 w-6" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Linkedin</title><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"></path></svg></a></div><div class=""><a class="block p-2 fill-white hover:fill-sky-500 duration-200" href="https://instagram.com/eyuelad"><svg class="h-6 w-6" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Instagram</title><path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z"></path></svg></a></div><div class=""><a class="block p-2 fill-white hover:fill-sky-500 duration-200" href="https://t.me/eyuelad"><svg class="h-6 w-6" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Telegram</title><path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"></path></svg></a></div><div class=""><a class="block p-2 fill-white hover:fill-sky-500 duration-200" href="mailto:[email protected]"><svg class="h-6 w-6" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Gmail</title><path d="M24 5.457v13.909c0 .904-.732 1.636-1.636 1.636h-3.819V11.73L12 16.64l-6.545-4.91v9.273H1.636A1.636 1.636 0 0 1 0 19.366V5.457c0-2.023 2.309-3.178 3.927-1.964L5.455 4.64 12 9.548l6.545-4.91 1.528-1.145C21.69 2.28 24 3.434 24 5.457z"></path></svg></a></div><!--]--></div><div class=""> Designed and Built by Me © 2024</div></div></footer></div></div><!--]--></div><script type="module">import p from "/_payload.js";window.__NUXT__={...p,...((function(a,b){return {state:{},_errors:{},serverRendered:true,config:{public:{content:{clientDB:{isSPA:a,integrity:1718701960085},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:a,wsUrl:b,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"\u002F_nuxt\u002F",cdnURL:b}},prerenderedAt:1718701972002}}(false,"")))}</script><script type="module" src="/_nuxt/entry.6990272b.js" crossorigin></script></body>
</html>