<path d="M21.458,16.5a4,4,0,0,0-4-4h-.5V12a1,1,0,0,0-1-1h-12a1,1,0,0,0-1,1v9.5a2.5,2.5,0,0,0,2.5,2.5h9a2.5,2.5,0,0,0,2.5-2.5v-1h.5A4,4,0,0,0,21.458,16.5Zm-4,2h-.25a.249.249,0,0,1-.25-.25v-3.5a.25.25,0,0,1,.25-.25h.25a2,2,0,0,1,0,4Z" /><path d="M5.649,2.865a.25.25,0,0,0,.016-.43L3.3.905a.5.5,0,0,0-.75.511l.422,2.53a.25.25,0,0,0,.137.184.253.253,0,0,0,.229,0Z" /><path d="M3.646,5.094a.25.25,0,0,0-.1.335l2.22,4.3a.5.5,0,0,0,.444.27h3a.5.5,0,0,0,.439-.741l-3.026-5.5a.25.25,0,0,0-.339-.1Z" /><path d="M13.538,7.293l-.006,0a3.528,3.528,0,0,1-.636-.349.252.252,0,0,0-.361.084L11.293,9.257A.5.5,0,0,0,11.73,10h1.832a.5.5,0,0,0,.468-.323L14.7,7.893a.25.25,0,0,0-.2-.337,3.526,3.526,0,0,1-.68-.156C13.727,7.369,13.633,7.333,13.538,7.293Z" /><path d="M17.017,2.815a3.68,3.68,0,0,0-2.811-2.8.5.5,0,0,0-.535.761c.529.806.21,1.282-.353,1.994a3.643,3.643,0,0,0-.542.819,2.038,2.038,0,0,0,1.151,2.784,2.046,2.046,0,0,0,2.245-.258A3.363,3.363,0,0,0,17.017,2.815Z" /></svg> </div> <div> <h3 class="mb-4 font-semibold text-2xl">UI / UX Design</h3> <p class="text-zinc-500 text-lg"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis viverra mollis nisl dole dolorili tincidunt. Integer eget vitae id tortor. </p> </div> </div> <div class="tb-pop-up p-12 bg-[#e8e5f5] rounded-xl flex items-start gap-8"> <div class="w-[200px]"> <svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title /><path d="M23.159.006A23.885,23.885,0,0,0,4.628,13.663L1.993,19.488a.722.722,0,0,0-.046.133L.154,22.467a1,1,0,1,0,1.692,1.067l4.518-7.208a.5.5,0,0,1,.845.532L6.02,18.747a.25.25,0,0,0,.306.365L9.764,17.7a12.375,12.375,0,0,0,5.844-4.836.25.25,0,0,0-.021-.3L13.31,9.914A.251.251,0,0,1,13.5,9.5H17a.219.219,0,0,0,.2-.134,10.816,10.816,0,0,1,2.049-3.2L23.8,1.26A.75.75,0,0,0,23.159.006Z" /></svg> </div> <div> <h3 class="mb-4 font-semibold text-2xl">Product Design</h3> <p class="text-zinc-500 text-lg"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis viverra mollis nisl dole dolorili tincidunt. Integer eget vitae id tortor. </p> </div> </div> <div class="tb-pop-up p-12 bg-[#e8e5f5] rounded-xl flex items-start gap-8"> <div class="w-[200px]"> <svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title /><path d="M21.458,16.5a4,4,0,0,0-4-4h-.5V12a1,1,0,0,0-1-1h-12a1,1,0,0,0-1,1v9.5a2.5,2.5,0,0,0,2.5,2.5h9a2.5,2.5,0,0,0,2.5-2.5v-1h.5A4,4,0,0,0,21.458,16.5Zm-4,2h-.25a.249.249,0,0,1-.25-.25v-3.5a.25.25,0,0,1,.25-.25h.25a2,2,0,0,1,0,4Z" /><path d="M5.649,2.865a.25.25,0,0,0,.016-.43L3.3.905a.5.5,0,0,0-.75.511l.422,2.53a.25.25,0,0,0,.137.184.253.253,0,0,0,.229,0Z" /><path d="M3.646,5.094a.25.25,0,0,0-.1.335l2.22,4.3a.5.5,0,0,0,.444.27h3a.5.5,0,0,0,.439-.741l-3.026-5.5a.25.25,0,0,0-.339-.1Z" /><path d="M13.538,7.293l-.006,0a3.528,3.528,0,0,1-.636-.349.252.252,0,0,0-.361.084L11.293,9.257A.5.5,0,0,0,11.73,10h1.832a.5.5,0,0,0,.468-.323L14.7,7.893a.25.25,0,0,0-.2-.337,3.526,3.526,0,0,1-.68-.156C13.727,7.369,13.633,7.333,13.538,7.293Z" /><path d="M17.017,2.815a3.68,3.68,0,0,0-2.811-2.8.5.5,0,0,0-.535.761c.529.806.21,1.282-.353,1.994a3.643,3.643,0,0,0-.542.819,2.038,2.038,0,0,0,1.151,2.784,2.046,2.046,0,0,0,2.245-.258A3.363,3.363,0,0,0,17.017,2.815Z" /></svg> </div> <div> <h3 class="mb-4 font-semibold text-2xl">Web Design</h3> <p class="text-zinc-500 text-lg"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis viverra mollis nisl dole dolorili tincidunt. Integer eget vitae id tortor. </p> </div> </div> <div class="tb-pop-up p-12 bg-[#d4cfeb] rounded-xl flex items-start gap-8"> <div class="w-[200px]"> <svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title /><path d="M23.159.006A23.885,23.885,0,0,0,4.628,13.663L1.993,19.488a.722.722,0,0,0-.046.133L.154,22.467a1,1,0,1,0,1.692,1.067l4.518-7.208a.5.5,0,0,1,.845.532L6.02,18.747a.25.25,0,0,0,.306.365L9.764,17.7a12.375,12.375,0,0,0,5.844-4.836.25.25,0,0,0-.021-.3L13.31,9.914A.251.251,0,0,1,13.5,9.5H17a.219.219,0,0,0,.2-.134,10.816,10.816,0,0,1,2.049-3.2L23.8,1.26A.75.75,0,0,0,23.159.006Z" /></svg> </div> <div> <h3 class="mb-4 font-semibold text-2xl">Web Development</h3> <p class="text-zinc-500 text-lg"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis viverra mollis nisl dole dolorili tincidunt. Integer eget vitae id tortor. </p> </div> </div> </div> <div class="tb-pop-up mt-12 text-center"> <a href="/contact" class="inline-block rounded-full py-4 px-12 bg-[#928abb] text-white text-xl transition duration-300 hover:cursor-pointer hover:bg-[#928abbaa] hover:shadow-lg"> Contact me </a> </div> </div> <div class="pt-[100px] pb-[100px]"> <div class="mb-8 flex justify-between items-center"> <div class="tb-pop-up max-w-[465px] mb-8"> <h2 class="relative font-semibold text-4xl leading-tight">My portfolio</h2> <img class="inline-block relative top-[-10px] z-[-1]" src="" /> </div> <div class="flex items-center gap-6"> <button class="portfolio-slide-prev-btn rounded-full p-4 bg-gray-100 transition duration-300 hover:bg-[#928abb] hover:text-white" @click.prevent="PortfolioSplide.go('-1')"> <svg xmlns="http://www.w3.org/2000/svg" class="w-12 h-12" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M15 6l-6 6l6 6"></path> </svg> </button> <button class="portfolio-slide-next-btn rounded-full p-4 bg-gray-100 transition duration-300 hover:bg-[#928abb] hover:text-white" @click.prevent="PortfolioSplide.go('+1')"> <svg xmlns="http://www.w3.org/2000/svg" class="w-12 h-12" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M9 6l6 6l-6 6"></path> </svg> </button> </div> </div> <section x-ref="portfolioSplide" class="tb-pop-up splide" aria-label="Splide/Alpine.js Carousel Example"> <div class="splide__track"> <ul class="splide__list"> <li class="splide__slide group/list-item" onclick="ESSEPAGE.goto('/portfolio/work-sample')"> <div class="overflow-hidden mb-10 aspect-video rounded-xl"> <img class="object-cover w-full h-full rounded-xl transition duration-300 group-hover/list-item:scale-110" src="https://i.esdrop.com/d/f/XcGaoptYok/aZGnGe8NMY.jpg" alt="placeholder image" /> </div> <h3 class="mb-4 font-semibold text-2xl"> Website & Mobile App Redesign </h3> <p class="mb-4 text-zinc-500 text-lg"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lectus mattis nunc aliquam tincidunt est non dolor sit consectuetur do. </p> <a href="/portfolio/work-sample" class="flex items-center gap-2 text-lg"> <span class="font-semibold">Read More</span> <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 transition duration-300 group-hover/list-item:translate-x-1" viewbox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path> </svg> </a> </li> <li class="splide__slide group/list-item" onclick="ESSEPAGE.goto('#')"> <div class="overflow-hidden mb-10 aspect-video rounded-xl"> <img class="object-cover w-full h-full rounded-xl transition duration-300 group-hover/list-item:scale-110" src="https://i.esdrop.com/d/f/XcGaoptYok/y58aDfrGUN.jpg" alt="placeholder image" /> </div> <h3 class="mb-4 font-semibold text-2xl"> Manager Dashboard Design </h3> <p class="mb-4 text-zinc-500 text-lg"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lectus mattis nunc aliquam tincidunt est non dolor sit consectuetur do. </p> <a href="#" class="flex items-center gap-2 text-lg"> <span class="font-semibold">Read More</span> <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 transition duration-300 group-hover/list-item:translate-x-1" viewbox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path> </svg> </a> </li> <li class="splide__slide group/list-item" onclick="ESSEPAGE.goto('#')"> <div class="overflow-hidden mb-10 aspect-video rounded-xl"> <img class="object-cover w-full h-full rounded-xl transition duration-300 group-hover/list-item:scale-110" src="https://i.esdrop.com/d/f/XcGaoptYok/kbzr62wsg2.jpg" alt="placeholder image" /> </div> <h3 class="mb-4 font-semibold text-2xl"> Cosmetic Packaging Design </h3> <p class="mb-4 text-zinc-500 text-lg"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lectus mattis nunc aliquam tincidunt est non dolor sit consectuetur do. </p> <a href="#" class="flex items-center gap-2 text-lg"> <span class="font-semibold">Read More</span> <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 transition duration-300 group-hover/list-item:translate-x-1" viewbox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path> </svg> </a> </li> <li class="splide__slide group/list-item" onclick="ESSEPAGE.goto('#')"> <div class="overflow-hidden mb-10 aspect-video rounded-xl"> <img class="object-cover w-full h-full rounded-xl transition duration-300 group-hover/list-item:scale-110" src="https://i.esdrop.com/d/f/XcGaoptYok/WETWiMb64F.jpg" alt="placeholder image" /> </div> <h3 class="mb-4 font-semibold text-2xl"> Logo Design & Color System Planning </h3> <p class="mb-4 text-zinc-500 text-lg"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lectus mattis nunc aliquam tincidunt est non dolor sit consectuetur do. </p> <a href="#" class="flex items-center gap-2 text-lg"> <span class="font-semibold">Read More</span> <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 transition duration-300 group-hover/list-item:translate-x-1" viewbox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path> </svg> </a> </li> </ul> </div> </section> </div> <div class="pt-[100px] pb-[100px]"> <h2 class="tb-pop-up mb-8 text-center font-semibold text-4xl">My clients say...</h2> <p class="tb-pop-up max-w-[592px] mx-auto mb-8 px-6 text-center text-zinc-500 text-2xl">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lectus mattis nunc aliquam tincidunt est non.</p> <div class="py-8"> <section x-ref="sayAboutSplide" class="tb-pop-up splide bg-white py-12"> <div class="splide__track w-full md:w-[80%] mx-auto"> <ul class="splide__list"> <li class="splide__slide"> <div class="flex flex-wrap items-center gap-4"> <div class="flex-1"> <p class="mb-8 text-zinc-500 text-2xl leading-relaxed"> “Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lectus mattis nunc aliquam tincidunt est non. Viverra nec eu, in ridicus” </p> <p class="mb-2 font-semibold text-lg">Johnny Kim</p> <p class="text-zinc-500 text-lg"> VP of Design at Apple </p> </div> <div class="max-w-[300px] mx-auto rounded-full overflow-hidden"> <img class="w-full" src="https://i.esdrop.com/d/f/XcGaoptYok/pnnxJcqSld.jpg" /> </div> </div> </li> <li class="splide__slide"> <div class="flex flex-wrap items-center gap-4"> <div class="flex-1"> <p class="mb-8 text-zinc-500 text-2xl leading-relaxed"> “Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lectus mattis nunc aliquam tincidunt est non. Viverra nec eu, in ridicus” </p> <p class="mb-2 font-semibold text-lg">Tom Bayda</p> <p class="text-zinc-500 text-lg"> VP of Design at Nike </p> </div> <div class="max-w-[300px] mx-auto rounded-full overflow-hidden"> <img class="w-full" src="https://i.esdrop.com/d/f/XcGaoptYok/l9Rpl16qYt.jpg" loading="lazy" /> </div> </div> </li> <li class="splide__slide"> <div class="flex flex-wrap items-center gap-4"> <div class="flex-1"> <p class="mb-8 text-zinc-500 text-2xl leading-relaxed"> “Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lectus mattis nunc aliquam tincidunt est non. Viverra nec eu, in ridicus” </p> <p class="mb-2 font-semibold text-lg">Chris Keller</p> <p class="text-zinc-500 text-lg"> VP of Design at Facebook </p> </div> <div class="max-w-[300px] mx-auto rounded-full overflow-hidden"> <img class="w-full" src="https://i.esdrop.com/d/f/XcGaoptYok/0LvDYnanR0.jpg" loading="lazy" /> </div> </div> </li> </ul> </div> <div class="absolute top-0 bottom-0 left-0 h-full flex items-center"> <button class="portfolio-slide-prev-btn rounded-full p-2 md:p-4 bg-gray-100 transition duration-300 hover:bg-[#928abb] hover:text-white" @click.prevent="SayAboutSplide.go('-1')"> <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 md:w-12 md:h-12" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M15 6l-6 6l6 6"></path> </svg> </button> </div> <div class="absolute top-0 bottom-0 right-0 h-full flex items-center"> <button class="portfolio-slide-next-btn rounded-full p-2 md:p-4 bg-gray-100 transition duration-300 hover:bg-[#928abb] hover:text-white" @click.prevent="SayAboutSplide.go('+1')"> <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 md:w-12 md:h-12" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M9 6l6 6l-6 6"></path> </svg> </button> </div> </section> </div> </div> </div> </div> <footer class="border-t"> <div class="sized-content"> <div class="py-20"> <div class="flex flex-wrap justify-between"> <div class="tb-pop-up basis-1/4"> <h3 class="mb-8 font-semibold text-2xl">Pages</h3> <div class="mb-4 space-y-8 text-zinc-500 text-lg"> <a href="/" class="block hover:text-zinc-800">Home</a> <a href="/about" class="block hover:text-zinc-800">About</a> <a href="/portfolio" class="block hover:text-zinc-800">Portfolio</a> <a href="/contact" class="block hover:text-zinc-800">Contact</a> </div> </div> <div class="tb-pop-up basis-1/4"> <h3 class="mb-8 font-semibold text-2xl">Contact Me</h3> <a href="mailto:lisakim@email.com" class="mb-4 flex items-center gap-2 text-zinc-800 hover:text-zinc-500"> <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewbox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10z"></path><path d="M3 7l9 6l9 -6"></path> </svg> <span class="text-lg">lisakim@email.com</span> </a> <a href="tel:010-1234-5678" class="mb-4 flex items-center gap-2 text-zinc-800 hover:text-zinc-500"> <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewbox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2"></path> </svg> <span class="text-lg">010-1234-5678</span> </a> </div> <div class="tb-pop-up basis-1/4"> <a href="/" class="block"> <img class="w-[250px]" src="https://i.esdrop.com/d/f/kGFgk3acAH/K5qMOhfRUR.png" loading="lazy" /> </a> <p class="mb-12 text-zinc-500 text-lg"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lectus mattis nunc aliquam tincidunt est non. </p> <div class="flex items-center gap-3"> <a href="#" class="block p-1 border border-[#928abb] rounded-lg"> <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8" viewbox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M4 4m0 4a4 4 0 0 1 4 -4h8a4 4 0 0 1 4 4v8a4 4 0 0 1 -4 4h-8a4 4 0 0 1 -4 -4z"></path><path d="M12 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path><path d="M16.5 7.5l0 .01"></path> </svg> </a> <a href="#" class="block p-1 border border-[#928abb] rounded-lg"> <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8" viewbox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c0 -.249 1.51 -2.772 1.818 -4.013z"></path> </svg> </a> <a href="#" class="block p-1 border border-[#928abb] rounded-lg"> <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8" viewbox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3"></path> </svg> </a> </div> </div> </div> </div> <div class="tb-pop-up py-12 text-center text-zinc-500"> Copyright © OOZE STUDIO | Powered by <span class="text-lg">≶</span>Essepage </div> </div> </footer> <script essepage-event="afterUpdate" type="text/plain" data-esse-original-type data-esse-state>function updateIndicator(e,o){for(const o of e){if(o.isIntersecting){o.target.classList.add('show-el')}}}const TbPopUp=new IntersectionObserver(updateIndicator,{threshold:.5});Array.from(document.querySelectorAll('.tb-pop-up')).forEach((e=>{TbPopUp.observe(e)}));</script> </div> </div></wrapper>