<body>
<section id="i3vv" class="min-w-screen flex h-full min-h-screen w-full flex-col items-center justify-start bg-gradient-to-br from-indigo-100 to-indigo-400 p-6 pb-20 lg:pb-6">
<div id="iyhl-2" class="container grid items-start gap-4 lg:grid-cols-8">
<div id="ilru-2" x-data="{ open: false }" class="flex w-full flex-col gap-4 rounded-2xl bg-white p-4 shadow-xl lg:col-span-3 lg:p-8 xl:col-span-2">
<div id="ig08-2" href="#" class="flex items-center gap-4 lg:flex-col lg:p-4">
<div id="icalt-2" class="aspect-square max-w-16 overflow-hidden rounded-2xl bg-indigo-200 shadow-lg lg:max-w-48">
<img id="i4lugq" src="https://images.unsplash.com/photo-1593508512255-86ab42a8e620?q=80&w=3878&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</div>
<div id="i3tb8w" class="flex flex-grow flex-col justify-center gap-2 lg:items-center">
<h4 id="i2eu1-2" class="text-xl font-bold capitalize lg:text-2xl">Ahmad Razak</h4>
<div id="i1op5y" class="flex justify-between gap-4">
<h1 id="ibkz6-2-2" class="flex h-8 max-w-max items-center justify-center overflow-hidden rounded-lg bg-indigo-600 px-3 text-xs uppercase text-white lg:text-base">ELECTRICAL Engineer</h1>
<div id="i5bujt" x-on:click="open = !open" class="flex aspect-square h-8 w-8 min-w-max items-center justify-center rounded-lg bg-indigo-600 fill-white p-2 lg:hidden">
<svg id="id60gy" xmlns="http://www.w3.org/2000/svg" x-show="!open" viewBox="0 0 448 512">
<path d="M207 381.5L12.7 187.1c-9.4-9.4-9.4-24.6 0-33.9l22.7-22.7c9.4-9.4 24.5-9.4 33.9 0L224 284.5l154.7-154c9.4-9.3 24.5-9.3 33.9 0l22.7 22.7c9.4 9.4 9.4 24.6 0 33.9L241 381.5c-9.4 9.4-24.6 9.4-33.9 0z"></path>
</svg>
<svg id="ik4bg9" xmlns="http://www.w3.org/2000/svg" x-show="open" viewBox="0 0 448 512">
<path d="M241 130.5l194.3 194.3c9.4 9.4 9.4 24.6 0 33.9l-22.7 22.7c-9.4 9.4-24.5 9.4-33.9 0L224 227.5 69.3 381.5c-9.4 9.3-24.5 9.3-33.9 0l-22.7-22.7c-9.4-9.4-9.4-24.6 0-33.9L207 130.5c9.4-9.4 24.6-9.4 33.9 0z"></path>
</svg>
</div>
</div>
</div>
</div>
<div id="ixjn0i-2" :class="open ? 'flex' : 'hidden lg:flex'" class="flex-col gap-4 border-y border-indigo-100 py-4 lg:py-8">
<div id="i9flr-2-2" class="flex gap-4">
<div id="iiafgj" class="aspect-square h-12 w-12 min-w-max rounded-lg bg-indigo-100 fill-indigo-600 p-3">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M464 64H48C21.5 64 0 85.5 0 112v288c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zm0 48v40.8c-22.4 18.3-58.2 46.7-134.6 106.5-16.8 13.2-50.2 45.1-73.4 44.7-23.2 .4-56.6-31.5-73.4-44.7C106.2 199.5 70.4 171.1 48 152.8V112h416zM48 400V214.4c22.9 18.3 55.4 43.9 104.9 82.6 21.9 17.2 60.1 55.2 103.1 55 42.7 .2 80.5-37.2 103.1-54.9 49.5-38.8 82-64.4 104.9-82.7V400H48z"></path>
</svg>
</div>
<div id="is2g1-2-2" class="flex flex-grow flex-col justify-center overflow-hidden">
<p id="iujgb-2-2" class="overflow-hidden text-ellipsis text-xs font-bold uppercase">Email</p>
<p id="ix89t-2-2" class="overflow-hidden text-ellipsis">[email protected]</p>
</div>
</div>
<div id="il4z6f" class="flex gap-4">
<div class="aspect-square h-12 w-12 min-w-max rounded-lg bg-indigo-100 fill-indigo-600 p-3">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M493.4 24.6l-104-24c-11.3-2.6-22.9 3.3-27.5 13.9l-48 112c-4.2 9.8-1.4 21.3 6.9 28l60.6 49.6c-36 76.7-98.9 140.5-177.2 177.2l-49.6-60.6c-6.8-8.3-18.2-11.1-28-6.9l-112 48C3.9 366.5-2 378.1 .6 389.4l24 104C27.1 504.2 36.7 512 48 512c256.1 0 464-207.5 464-464 0-11.2-7.7-20.9-18.6-23.4z"></path>
</svg>
</div>
<div class="flex flex-grow flex-col justify-center overflow-hidden">
<p id="iouxm" class="overflow-hidden text-ellipsis text-xs font-bold uppercase">Phone</p>
<p id="isr5vg" class="overflow-hidden text-ellipsis">+60 10 XXXX 123</p>
</div>
</div>
<div id="ivazg-2-2" class="flex gap-4">
<div id="iw1cmj" class="aspect-square h-12 w-12 min-w-max rounded-lg bg-indigo-100 fill-indigo-600 p-3">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
<path d="M152.1 236.2c-3.5-12.1-7.8-33.2-7.8-33.2h-.5s-4.3 21.1-7.8 33.2l-11.1 37.5H163zM616 96H336v320h280c13.3 0 24-10.7 24-24V120c0-13.3-10.7-24-24-24zm-24 120c0 6.6-5.4 12-12 12h-11.4c-6.9 23.6-21.7 47.4-42.7 69.9 8.4 6.4 17.1 12.5 26.1 18 5.5 3.4 7.3 10.5 4.1 16.2l-7.9 13.9c-3.4 5.9-10.9 7.8-16.7 4.3-12.6-7.8-24.5-16.1-35.4-24.9-10.9 8.7-22.7 17.1-35.4 24.9-5.8 3.5-13.3 1.6-16.7-4.3l-7.9-13.9c-3.2-5.6-1.4-12.8 4.2-16.2 9.3-5.7 18-11.7 26.1-18-7.9-8.4-14.9-17-21-25.7-4-5.7-2.2-13.6 3.7-17.1l6.5-3.9 7.3-4.3c5.4-3.2 12.4-1.7 16 3.4 5 7 10.8 14 17.4 20.9 13.5-14.2 23.8-28.9 30-43.2H412c-6.6 0-12-5.4-12-12v-16c0-6.6 5.4-12 12-12h64v-16c0-6.6 5.4-12 12-12h16c6.6 0 12 5.4 12 12v16h64c6.6 0 12 5.4 12 12zM0 120v272c0 13.3 10.7 24 24 24h280V96H24c-13.3 0-24 10.7-24 24zm58.9 216.1L116.4 167c1.7-4.9 6.2-8.1 11.4-8.1h32.5c5.1 0 9.7 3.3 11.4 8.1l57.5 169.1c2.6 7.8-3.1 15.9-11.4 15.9h-22.9a12 12 0 0 1 -11.5-8.6l-9.4-31.9h-60.2l-9.1 31.8c-1.5 5.1-6.2 8.7-11.5 8.7H70.3c-8.2 0-14-8.1-11.4-15.9z"></path>
</svg>
</div>
<div id="i93xd-2-2" class="flex flex-grow flex-col justify-center overflow-hidden">
<p id="i6qig-2-2" class="overflow-hidden text-ellipsis text-xs font-bold uppercase">Languages</p>
<p id="iudee-2-2" class="overflow-hidden text-ellipsis">Malay, English, and Mandarin</p>
</div>
</div>
<div id="ifo3j-2-2" class="flex gap-4">
<div id="icxzj-2-2" class="aspect-square h-12 w-12 min-w-max rounded-lg bg-indigo-100 fill-indigo-600 p-3">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path d="M288 0c-69.6 0-126 56.4-126 126 0 56.3 82.4 158.8 113.9 196 6.4 7.5 17.8 7.5 24.2 0C331.7 284.8 414 182.3 414 126 414 56.4 357.6 0 288 0zm0 168c-23.2 0-42-18.8-42-42s18.8-42 42-42 42 18.8 42 42-18.8 42-42 42zM20.1 216A32 32 0 0 0 0 245.7v250.3c0 11.3 11.4 19.1 21.9 14.9L160 448V214.9c-8.8-16-16.1-31.5-21.3-46.4L20.1 216zM288 359.7c-14.1 0-27.4-6.2-36.5-17-19.7-23.2-40.6-49.6-59.5-76.7v182l192 64V266c-18.9 27.1-39.8 53.5-59.5 76.7-9.1 10.8-22.4 17-36.5 17zm266.1-198.5L416 224v288l139.9-56A32 32 0 0 0 576 426.3V176c0-11.3-11.4-19.1-21.9-14.9z"></path>
</svg>
</div>
<div id="ig3ll-2-2" class="flex flex-grow flex-col justify-center overflow-hidden">
<p id="inusx-3-2" class="overflow-hidden text-ellipsis text-xs font-bold uppercase">Location</p>
<p id="izabg-2-2" class="overflow-hidden text-ellipsis">Perlis, Malaysia</p>
</div>
</div>
</div>
<div id="ikwszd" :class="open ? 'flex' : 'hidden lg:flex'" class="flex h-8 items-center justify-center gap-2 opacity-70 lg:mt-4">
<a id="i10877" href="https://x.com" target="_blank" class="flex aspect-square h-8 w-8 items-center justify-center p-1"
><svg id="ix52v8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M459.4 151.7c.3 4.5 .3 9.1 .3 13.6 0 138.7-105.6 298.6-298.6 298.6-59.5 0-114.7-17.2-161.1-47.1 8.4 1 16.6 1.3 25.3 1.3 49.1 0 94.2-16.6 130.3-44.8-46.1-1-84.8-31.2-98.1-72.8 6.5 1 13 1.6 19.8 1.6 9.4 0 18.8-1.3 27.6-3.6-48.1-9.7-84.1-52-84.1-103v-1.3c14 7.8 30.2 12.7 47.4 13.3-28.3-18.8-46.8-51-46.8-87.4 0-19.5 5.2-37.4 14.3-53 51.7 63.7 129.3 105.3 216.4 109.8-1.6-7.8-2.6-15.9-2.6-24 0-57.8 46.8-104.9 104.9-104.9 30.2 0 57.5 12.7 76.7 33.1 23.7-4.5 46.5-13.3 66.6-25.3-7.8 24.4-24.4 44.8-46.1 57.8 21.1-2.3 41.6-8.1 60.4-16.2-14.3 20.8-32.2 39.3-52.6 54.3z"></path></svg
></a>
<a id="isc6ds" href="https://www.linkedin.com" target="_blank" class="flex aspect-square h-8 w-8 items-center justify-center p-1"
><svg id="i2s3hv" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path d="M100.3 448H7.4V148.9h92.9zM53.8 108.1C24.1 108.1 0 83.5 0 53.8a53.8 53.8 0 0 1 107.6 0c0 29.7-24.1 54.3-53.8 54.3zM447.9 448h-92.7V302.4c0-34.7-.7-79.2-48.3-79.2-48.3 0-55.7 37.7-55.7 76.7V448h-92.8V148.9h89.1v40.8h1.3c12.4-23.5 42.7-48.3 87.9-48.3 94 0 111.3 61.9 111.3 142.3V448z"></path></svg
></a>
<a id="i50rt5" href="https://github.com" target="_blank" class="flex aspect-square h-8 w-8 items-center justify-center p-1"
><svg id="ilksvl" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
<path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg
></a>
</div>
</div>
<div id="idiy3-2" x-data="{ page: 'about' }" class="flex w-full flex-col gap-4 rounded-2xl bg-white shadow-xl md:p-4 lg:col-span-5 xl:col-span-6">
<div id="itzjj-2" class="fixed bottom-0 left-0 z-20 mx-auto flex w-full items-center justify-center justify-around bg-indigo-600 px-2 py-2 text-sm text-white sm:gap-2 lg:static lg:max-w-max lg:rounded-full lg:px-8 lg:text-base">
<a id="iwbe6s-2-2-2" href="#" :class="page == 'about' ? 'bg-black bg-opacity-50 text-white' : ''" x-on:click="page = 'about'" class="flex flex-col items-center rounded-xl px-4 py-2 md:flex-row md:gap-2 md:rounded-full"
><svg id="ix5fip-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-4 fill-white">
<path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 96c48.6 0 88 39.4 88 88s-39.4 88-88 88-88-39.4-88-88 39.4-88 88-88zm0 344c-58.7 0-111.3-26.6-146.5-68.2 18.8-35.4 55.6-59.8 98.5-59.8 2.4 0 4.8 .4 7.1 1.1 13 4.2 26.6 6.9 40.9 6.9 14.3 0 28-2.7 40.9-6.9 2.3-.7 4.7-1.1 7.1-1.1 42.9 0 79.7 24.4 98.5 59.8C359.3 421.4 306.7 448 248 448z"></path>
</svg>
<p id="iy4lhy-2" class="text-xs md:text-base">About</p></a
>
<a id="i15zz6-2-2" href="#" :class="page == 'resume' ? 'bg-black bg-opacity-50 text-white' : ''" x-on:click="page = 'resume'" class="flex flex-col items-center rounded-xl px-4 py-2 md:flex-row md:gap-2 md:rounded-full"
><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-4 fill-white">
<path d="M320 336c0 8.8-7.2 16-16 16h-96c-8.8 0-16-7.2-16-16v-48H0v144c0 25.6 22.4 48 48 48h416c25.6 0 48-22.4 48-48V288H320v48zm144-208h-80V80c0-25.6-22.4-48-48-48H176c-25.6 0-48 22.4-48 48v48H48c-25.6 0-48 22.4-48 48v80h512v-80c0-25.6-22.4-48-48-48zm-144 0H192V96h128v32z"></path>
</svg>
<p id="ihq1ie-2-2" class="text-xs md:text-base">Resume</p></a
>
<a id="iuscre" href="#" :class="page == 'portfolio' ? 'bg-black bg-opacity-50 text-white' : ''" x-on:click="page = 'portfolio'" class="flex flex-col items-center rounded-xl px-4 py-2 md:flex-row md:gap-2 md:rounded-full"
><svg id="ighv3b" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-4 fill-white">
<path d="M572.7 292.1L500.3 416.2A64 64 0 0 1 445 448H45c-18.5 0-30.1-20.1-20.7-36.1l72.4-124.2A64 64 0 0 1 152 256h400c18.5 0 30.1 20.1 20.7 36.1zM152 224h328v-48c0-26.5-21.5-48-48-48H272l-64-64H48C21.5 64 0 85.5 0 112v278l69.1-118.4C86.2 242.3 118 224 152 224z"></path>
</svg>
<p id="iwdzmu" class="text-xs md:text-base">Portfolio</p></a
>
<a id="ihcpkv" href="#" :class="page == 'blog' ? 'bg-black bg-opacity-50 text-white' : ''" x-on:click="page = 'blog'" class="flex flex-col items-center rounded-xl px-4 py-2 md:flex-row md:gap-2 md:rounded-full"
><svg id="iqn45" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-4 fill-white">
<path d="M128 256A128 128 0 1 0 256 384 128 128 0 0 0 128 256zm379-54.9L400.1 18.3a37.3 37.3 0 0 0 -64.1 0L229 201.1C214.8 225.5 232.6 256 261.1 256H474.9C503.4 256 521.2 225.5 507 201.1zM480 288H320a32 32 0 0 0 -32 32V480a32 32 0 0 0 32 32H480a32 32 0 0 0 32-32V320A32 32 0 0 0 480 288z"></path>
</svg>
<p id="id9d8i" class="text-xs md:text-base">Blog</p></a
>
<a id="i1xze2" href="#" :class="page == 'contact' ? 'bg-black bg-opacity-50 text-white' : ''" x-on:click="page = 'contact'" class="flex flex-col items-center rounded-xl px-4 py-2 md:flex-row md:gap-2 md:rounded-full"
><svg id="iwhdle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-4 fill-white">
<path d="M493.4 24.6l-104-24c-11.3-2.6-22.9 3.3-27.5 13.9l-48 112c-4.2 9.8-1.4 21.3 6.9 28l60.6 49.6c-36 76.7-98.9 140.5-177.2 177.2l-49.6-60.6c-6.8-8.3-18.2-11.1-28-6.9l-112 48C3.9 366.5-2 378.1 .6 389.4l24 104C27.1 504.2 36.7 512 48 512c256.1 0 464-207.5 464-464 0-11.2-7.7-20.9-18.6-23.4z"></path>
</svg>
<p id="iff2g1" class="text-xs md:text-base">Contact</p></a
>
</div>
<div id="iisedw" x-show="page == 'about'" class="flex flex-col gap-4 p-4">
<h3 id="i5u1ii" class="text-2xl font-bold capitalize lg:text-4xl">About Me</h3>
<div id="ie8s1x" class="h-2 max-w-24 rounded-full bg-indigo-600"></div>
<p id="itjvoj" class="mb-4">
Experienced electrical engineer with more than 5 years specializing in power systems design, automation, and project management. I graduated from Peninsular Technical University with a solid understanding of electrical engineering principles and a keen interest in creative problem-solving. Proficient in AutoCAD, ETAP, and PLC programming. I am fluent in Malay, English, and Mandarin, and have a proven history of effectively collaborating on international projects involving diverse cultures.
<br />
</p>
<h4 id="ipg5be" class="text-xl font-bold capitalize lg:text-2xl">
What I'm Doing
<br />
</h4>
<div id="ijnh0g" class="mb-4 grid gap-8 lg:grid-cols-2">
<div id="iihsch" class="flex flex-col gap-4 rounded-xl p-8 shadow-lg xl:flex-row">
<div id="ih3m3b" class="flex aspect-square h-12 w-12 max-w-max items-center justify-center fill-indigo-600">
<svg id="ie31jj" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
<path d="M336.5 160C322 70.7 287.8 8 248 8s-74 62.7-88.5 152h177zM152 256c0 22.2 1.2 43.5 3.3 64h185.3c2.1-20.5 3.3-41.8 3.3-64s-1.2-43.5-3.3-64H155.3c-2.1 20.5-3.3 41.8-3.3 64zm324.7-96c-28.6-67.9-86.5-120.4-158-141.6 24.4 33.8 41.2 84.7 50 141.6h108zM177.2 18.4C105.8 39.6 47.8 92.1 19.3 160h108c8.7-56.9 25.5-107.8 49.9-141.6zM487.4 192H372.7c2.1 21 3.3 42.5 3.3 64s-1.2 43-3.3 64h114.6c5.5-20.5 8.6-41.8 8.6-64s-3.1-43.5-8.5-64zM120 256c0-21.5 1.2-43 3.3-64H8.6C3.2 212.5 0 233.8 0 256s3.2 43.5 8.6 64h114.6c-2-21-3.2-42.5-3.2-64zm39.5 96c14.5 89.3 48.7 152 88.5 152s74-62.7 88.5-152h-177zm159.3 141.6c71.4-21.2 129.4-73.7 158-141.6h-108c-8.8 56.9-25.6 107.8-50 141.6zM19.3 352c28.6 67.9 86.5 120.4 158 141.6-24.4-33.8-41.2-84.7-50-141.6h-108z"></path>
</svg>
</div>
<div id="icqcxv" class="flex flex-col gap-2">
<h5 id="i3i0e1" class="text-lg font-bold capitalize lg:text-xl">
Web Development
<br />
</h5>
<p id="ilb1zl">
Extensive experience developing a wide range of products using the Laravel framework, starting from Laravel 5. These projects have included everything from marketplace platforms to drag-and-drop website builders.
<br />
</p>
</div>
</div>
<div id="ion1p3" class="flex flex-col gap-4 rounded-xl p-8 shadow-lg xl:flex-row">
<div id="iwhslf" class="flex aspect-square h-12 w-12 max-w-max items-center justify-center fill-indigo-600">
<svg id="i7nbnf" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
<path d="M608 64H32C14.3 64 0 78.3 0 96v320c0 17.7 14.3 32 32 32h160.2c25.2 0 48-14.8 58.4-37.7l27.7-61.6C286.2 331.1 302.4 320 320 320s33.8 11.1 41.7 28.6l27.7 61.6C399.8 433.2 422.6 448 447.8 448H608c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32zM160 304c-35.4 0-64-28.7-64-64s28.7-64 64-64 64 28.7 64 64-28.7 64-64 64zm320 0c-35.4 0-64-28.7-64-64s28.7-64 64-64 64 28.7 64 64-28.7 64-64 64z"></path>
</svg>
</div>
<div id="ivvpg1" class="flex flex-col gap-2">
<h5 id="ii8xxg" class="text-lg font-bold capitalize lg:text-xl">
VR/AR/Spatial Computing
<br />
</h5>
<p id="iftv1i">
Championing AR and VR technologies, with a focus on web-based framework like the A-Frame & AR.js. This approach provides enhanced accessibility compared to platform-exclusive solutions. Works on hardware such as Meta Quest 2 & 3.
<br />
</p>
</div>
</div>
<div id="i7e0k1" class="flex flex-col gap-4 rounded-xl p-8 shadow-lg xl:flex-row">
<div id="ikamkf" class="flex aspect-square h-12 w-12 max-w-max items-center justify-center fill-indigo-600">
<svg id="iyb5h6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
<path d="M255 261.7c6.3 6.3 16.4 6.3 22.6 0l11.3-11.3c6.3-6.3 6.3-16.4 0-22.6L253.3 192l35.7-35.7c6.3-6.3 6.3-16.4 0-22.6l-11.3-11.3c-6.3-6.3-16.4-6.3-22.6 0l-58.3 58.3c-6.3 6.3-6.3 16.4 0 22.6l58.4 58.3zm96-11.3l11.3 11.3c6.3 6.3 16.4 6.3 22.6 0l58.3-58.3c6.3-6.3 6.3-16.4 0-22.6l-58.3-58.3c-6.3-6.3-16.4-6.3-22.6 0l-11.3 11.3c-6.3 6.3-6.3 16.4 0 22.6L386.8 192l-35.7 35.7c-6.3 6.3-6.3 16.4 0 22.6zM624 416H381.5c-.7 19.8-14.7 32-32.7 32H288c-18.7 0-33-17.5-32.8-32H16c-8.8 0-16 7.2-16 16v16c0 35.2 28.8 64 64 64h512c35.2 0 64-28.8 64-64v-16c0-8.8-7.2-16-16-16zM576 48c0-26.4-21.6-48-48-48H112C85.6 0 64 21.6 64 48v336h512V48zm-64 272H128V64h384v256z"></path>
</svg>
</div>
<div id="ik6i1l" class="flex flex-col gap-2">
<h5 id="i6yb9m" class="text-lg font-bold capitalize lg:text-xl">
No/Low-code Solution
<br />
</h5>
<p id="iumg24">
Empowering educational institutions to enhance their students' abilities with no-code solution skills. Creating mobile apps using GlideApps & website using SenangWebs.
<br />
</p>
</div>
</div>
<div id="i917h9" class="flex flex-col gap-4 rounded-xl p-8 shadow-lg xl:flex-row">
<div id="iyi701" class="flex aspect-square h-12 w-12 max-w-max items-center justify-center fill-indigo-600">
<svg id="imja1s" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M501.1 395.7L384 278.6c-23.1-23.1-57.6-27.6-85.4-13.9L192 158.1V96L64 0 0 64l96 128h62.1l106.6 106.6c-13.6 27.8-9.2 62.3 13.9 85.4l117.1 117.1c14.6 14.6 38.2 14.6 52.7 0l52.7-52.7c14.5-14.6 14.5-38.2 0-52.7zM331.7 225c28.3 0 54.9 11 74.9 31l19.4 19.4c15.8-6.9 30.8-16.5 43.8-29.5 37.1-37.1 49.7-89.3 37.9-136.7-2.2-9-13.5-12.1-20.1-5.5l-74.4 74.4-67.9-11.3L334 98.9l74.4-74.4c6.6-6.6 3.4-17.9-5.7-20.2-47.4-11.7-99.6 .9-136.6 37.9-28.5 28.5-41.9 66.1-41.2 103.6l82.1 82.1c8.1-1.9 16.5-2.9 24.7-2.9zm-103.9 82l-56.7-56.7L18.7 402.8c-25 25-25 65.5 0 90.5s65.5 25 90.5 0l123.6-123.6c-7.6-19.9-9.9-41.6-5-62.7zM64 472c-13.2 0-24-10.8-24-24 0-13.3 10.7-24 24-24s24 10.7 24 24c0 13.2-10.7 24-24 24z"></path>
</svg>
</div>
<div id="idc6rm" class="flex flex-col gap-2">
<h5 id="i0w6sb" class="text-lg font-bold capitalize lg:text-xl">Engineering & Research</h5>
<p id="igsm9a">Engaging in research projects with local and international institutions independently. Specializing in VR/AR technology and engineering expertise.</p>
</div>
</div>
</div>
<h4 id="i7g8fv" class="text-xl font-bold capitalize lg:text-2xl">
Testimonials
<br />
</h4>
<div id="ipvlox" class="mb-4 grid gap-8 lg:grid-cols-2">
<div id="icawi3" class="flex flex-col gap-4 rounded-xl p-8 shadow-lg xl:flex-row">
<div id="idwsvg" class="flex aspect-square h-12 w-12 min-w-max items-center justify-center overflow-hidden rounded-full bg-neutral-200">
<img id="ihlxwd" src="https://assets.senangwebs.com/websites/efc7c6b6-3a22-4ffc-a131-b24f23b63dd2/images/nh1t1etBtGPmW6js6E9wRP2wHR7SFTJZITa8Stx8.png" class="w-full object-cover" />
</div>
<div id="iwmhow" class="flex flex-col gap-2">
<h5 id="ibh0qi" class="text-lg font-bold capitalize lg:text-xl">
David Chen
<br />
</h5>
<p id="ixs596">A cutting-edge professional with strong expertise in web development, computer programming, and a deep understanding of various technological advancements.</p>
</div>
</div>
<div id="i8g7rl" class="flex flex-col gap-4 rounded-xl p-8 shadow-lg xl:flex-row">
<div id="ihrgfk" class="flex aspect-square h-12 w-12 min-w-max items-center justify-center overflow-hidden rounded-full bg-neutral-200">
<img id="imuco-2-2" src="https://assets.senangwebs.com/websites/efc7c6b6-3a22-4ffc-a131-b24f23b63dd2/images/nh1t1etBtGPmW6js6E9wRP2wHR7SFTJZITa8Stx8.png" class="w-full object-cover" />
</div>
<div id="in3w5i" class="flex flex-col gap-2">
<h5 id="idkb2h" class="text-lg font-bold capitalize lg:text-xl">
Yi Shyan
<br />
</h5>
<p id="i1gvrf">A dedicated team player who works wholeheartedly to educate, guide, and motivate teammates or colleagues towards achieving the team's goals.</p>
</div>
</div>
</div>
<h4 id="iz6com" class="text-xl font-bold capitalize lg:text-2xl">
Partners & Clients
<br />
</h4>
<div id="ing23c-2" class="grid grid-cols-3 items-center gap-8 grayscale lg:grid-cols-4 xl:grid-cols-6 xl:gap-16">
<img id="iqht12-2" src="https://assets.senangwebs.com/websites/db806e57-f950-4d75-af6c-5e11006ca077/images/m5yWhAt1KnodPfMSXT53zXJOre24vBA4z5wyhag1.svg" class="w-full object-cover" />
<img id="i3vtdn" src="https://assets.senangwebs.com/websites/76da0eba-93cd-4c8c-9ad1-74861fabca02/images/xsRBhYzoncYHh0z0uBlMOMCGsxiZU6cMhg1oYy48.png" class="w-full object-cover" />
<img id="ia32lo" src="https://assets.senangwebs.com/websites/db806e57-f950-4d75-af6c-5e11006ca077/images/m5yWhAt1KnodPfMSXT53zXJOre24vBA4z5wyhag1.svg" class="w-full object-cover" />
<img id="inb7xm" src="https://assets.senangwebs.com/websites/76da0eba-93cd-4c8c-9ad1-74861fabca02/images/xsRBhYzoncYHh0z0uBlMOMCGsxiZU6cMhg1oYy48.png" class="w-full object-cover" />
<img id="idps1i" src="https://assets.senangwebs.com/websites/db806e57-f950-4d75-af6c-5e11006ca077/images/m5yWhAt1KnodPfMSXT53zXJOre24vBA4z5wyhag1.svg" class="w-full object-cover" />
<img id="ij06uw" src="https://assets.senangwebs.com/websites/76da0eba-93cd-4c8c-9ad1-74861fabca02/images/xsRBhYzoncYHh0z0uBlMOMCGsxiZU6cMhg1oYy48.png" class="w-full object-cover" />
</div>
</div>
<div id="iludl-2" x-show="page == 'resume'" class="flex flex-col gap-4 p-4">
<h3 id="ia7tz-2" class="text-2xl font-bold capitalize lg:text-4xl">Resume</h3>
<div id="i2f55-2" class="h-2 max-w-24 rounded-full bg-indigo-600"></div>
<h4 id="ie8ek-2" class="text-xl font-bold capitalize lg:text-2xl">
Experience
<br />
</h4>
<div id="ij4zip mb-4" class="mb-4 flex flex-col gap-4">
<div id="ig1i6h" class="flex gap-4">
<div id="igbtiu" class="ml-2 mt-2 hidden h-4 w-4 rounded-full bg-indigo-600 shadow-md shadow-indigo-600 lg:block"></div>
<div id="itj2vk" class="flex flex-grow flex-col pl-4 lg:p-0">
<h5 id="is7hj6" class="text-lg font-bold capitalize lg:text-xl">
Senior Electrical Engineer
<br />
</h5>
<p id="i8v8tx" class="text-indigo-600">Dec 2022 — Present</p>
<p id="imsotf-2-2">
<li id="i78btj-2" index="0" class="whitespace-normal break-words">Led a team of 8 engineers in designing and implementing smart grid solutions for urban developments, resulting in 20% improved energy efficiency</li>
<li id="ivd9vr-2" index="1" class="whitespace-normal break-words">Spearheaded the integration of renewable energy sources into existing power distribution networks, increasing clean energy usage by 35%</li>
<li id="iebtby-2" index="2" class="whitespace-normal break-words">Developed and maintained relationships with key stakeholders, securing 3 major contracts worth RM 50 million</li>
</p>
</div>
</div>
<div id="itdsof" class="flex gap-4">
<div id="igypcu" class="ml-2 mt-2 hidden h-4 w-4 rounded-full bg-indigo-600 shadow-md shadow-indigo-600 lg:block"></div>
<div id="ix73sk" class="flex flex-grow flex-col pl-4 lg:p-0">
<h5 id="i180om" class="text-lg font-bold capitalize lg:text-xl">
Project Engineer
<br />
</h5>
<p id="iqz5bc" class="text-indigo-600">Mar 2021 — Nov 2022</p>
<p id="inrika">
<li id="i1ktqt" index="0" class="whitespace-normal break-words">Managed electrical system designs for 5 large-scale industrial complexes, ensuring compliance with local and international standards</li>
<li id="i40529" index="1" class="whitespace-normal break-words">Implemented automated monitoring systems in 3 power plants, reducing downtime by 15% and increasing overall efficiency</li>
<li index="2" class="whitespace-normal break-words">Conducted feasibility studies and cost analyses for potential projects, contributing to a 25% increase in successful bids</li>
</p>
</div>
</div>
<div id="irax4u" class="flex gap-4">
<div id="inv47m" class="ml-2 mt-2 hidden aspect-square h-4 w-4 min-w-max rounded-full bg-indigo-600 shadow-md shadow-indigo-600 lg:block"></div>
<div class="flex flex-grow flex-col pl-4 lg:p-0">
<h5 id="ioo2p4" class="text-lg font-bold capitalize lg:text-xl">
Electrical Design Engineer
<br />
</h5>
<p id="izhxef" class="text-indigo-600">Aug 2019 — Feb 2021</p>
<p id="ieubu4-2">
<li index="0" class="whitespace-normal break-words">Designed low and medium voltage distribution systems for commercial and residential projects</li>
<li index="1" class="whitespace-normal break-words">Collaborated with multidisciplinary teams to optimize electrical layouts and reduce material costs by 10%</li>
<li index="2" class="whitespace-normal break-words">Prepared detailed technical reports and presentations for clients and regulatory bodies</li>
</p>
</div>
</div>
</div>
<h4 id="ikmux-2" class="text-xl font-bold capitalize lg:text-2xl">
Education
<br />
</h4>
<div id="i6t9tq" class="mb-4 flex flex-col gap-4">
<div id="is9o2y" class="flex gap-4">
<div id="igcdrh" class="ml-2 mt-2 hidden h-4 w-4 rounded-full bg-indigo-600 shadow-md shadow-indigo-600 lg:block"></div>
<div id="il7ork" class="flex flex-grow flex-col pl-4 lg:p-0">
<h5 id="iednps" class="text-lg font-bold capitalize lg:text-xl">
Peninsular Technical University
<br />
</h5>
<p id="ixvrcl" class="text-indigo-600">Shah Alam, Malaysia</p>
<p id="iep9jv">
Degree of Electrical Engineering
<br />
</p>
</div>
</div>
<div id="i2zdks" class="flex gap-4">
<div id="i3r30r" class="ml-2 mt-2 hidden h-4 w-4 rounded-full bg-indigo-600 shadow-md shadow-indigo-600 lg:block"></div>
<div id="itgggq" class="flex flex-grow flex-col pl-4 lg:p-0">
<h5 id="i0948k" class="text-lg font-bold capitalize lg:text-xl">
Peninsular Technical University
<br />
</h5>
<p id="iqaw15" class="text-indigo-600">Pasir Gudang, Malaysia</p>
<p id="izt8s1">
Diploma of Electrical Engineering
<br />
</p>
</div>
</div>
</div>
<h4 id="i3i5g-2" class="text-xl font-bold capitalize lg:text-2xl">
My Skills
<br />
</h4>
<div id="iq3ohd" class="grid gap-4 rounded-xl p-8 shadow-lg xl:grid-cols-3">
<div id="id0ufv" class="flex flex-col gap-2">
<h5 id="igaz0q" class="text-lg font-bold lg:text-xl">
HTML
<br />
</h5>
<div id="ir27uc" class="grid max-w-max grid-cols-5 gap-2 fill-indigo-600">
<div class="h-4 w-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path>
</svg>
</div>
<div class="h-4 w-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path>
</svg>
</div>
<div class="h-4 w-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path>
</svg>
</div>
<div class="h-4 w-4">
<svg id="iqhaqi" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path>
</svg>
</div>
<div class="h-4 w-4">
<svg id="iuokeo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path>
</svg>
</div>
</div>
</div>
<div id="ifdmdj" class="flex flex-col gap-2">
<h5 id="isrri9" class="text-lg font-bold lg:text-xl">
CSS
<br />
</h5>
<div class="grid max-w-max grid-cols-5 gap-2 fill-indigo-600">
<div class="h-4 w-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path>
</svg>
</div>
<div class="h-4 w-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path>
</svg>
</div>
<div class="h-4 w-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path>
</svg>
</div>
<div class="h-4 w-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path>
</svg>
</div>
<div class="h-4 w-4">
<svg id="iuokeo-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path>
</svg>
</div>
</div>
</div>
<div id="idh84g" class="flex flex-col gap-2">
<h5 id="igp5fd" class="text-lg font-bold lg:text-xl">
PHP
<br />
</h5>
<div class="grid max-w-max grid-cols-5 gap-2 fill-indigo-600">
<div class="h-4 w-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path>
</svg>
</div>
<div class="h-4 w-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path>
</svg>
</div>
<div class="h-4 w-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path>
</svg>
</div>
<div class="h-4 w-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path>
</svg>
</div>
<div class="h-4 w-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path d="M528.1 171.5L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6zM388.6 312.3l23.7 138.4L288 385.4l-124.3 65.3 23.7-138.4-100.6-98 139-20.2 62.2-126 62.2 126 139 20.2-100.6 98z"></path>
</svg>
</div>
</div>
</div>
<div id="itgggq-2" class="flex flex-col gap-2">
<h5 id="i0948k-2" class="text-lg font-bold lg:text-xl">
Laravel Framework
<br />
</h5>
<div id="iqaw15-2" class="grid max-w-max grid-cols-5 gap-2 fill-indigo-600">
<div id="iqpa8c" class="h-4 w-4">
<svg id="id30sf" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path>
</svg>
</div>
<div id="isjdoz" class="h-4 w-4">
<svg id="iqdvvg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path>
</svg>
</div>
<div id="im1j25" class="h-4 w-4">
<svg id="i4dlg5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path>
</svg>
</div>
<div id="ilowcc" class="h-4 w-4">
<svg id="iiekvq" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path>
</svg>
</div>
<div id="iqkicn" class="h-4 w-4">
<svg id="i8qfhg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path d="M528.1 171.5L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6zM388.6 312.3l23.7 138.4L288 385.4l-124.3 65.3 23.7-138.4-100.6-98 139-20.2 62.2-126 62.2 126 139 20.2-100.6 98z"></path>
</svg>
</div>
</div>
</div>
<div id="ipu8ml" class="flex flex-col gap-2">
<h5 id="iu9fm4" class="text-lg font-bold lg:text-xl">
TailwindCSS
<br />
</h5>
<div class="grid max-w-max grid-cols-5 gap-2 fill-indigo-600">
<div class="h-4 w-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path>
</svg>
</div>
<div class="h-4 w-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path>
</svg>
</div>
<div class="h-4 w-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path>
</svg>
</div>
<div class="h-4 w-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path>
</svg>
</div>
<div class="h-4 w-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path d="M528.1 171.5L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6zM388.6 312.3l23.7 138.4L288 385.4l-124.3 65.3 23.7-138.4-100.6-98 139-20.2 62.2-126 62.2 126 139 20.2-100.6 98z"></path>
</svg>
</div>
</div>
</div>
<div id="i5i1lt" class="flex flex-col gap-2">
<h5 id="i9abyu" class="text-lg font-bold lg:text-xl">
JavaScript
<br />
</h5>
<div class="grid max-w-max grid-cols-5 gap-2 fill-indigo-600">
<div class="h-4 w-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path>
</svg>
</div>
<div class="h-4 w-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path>
</svg>
</div>
<div class="h-4 w-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path>
</svg>
</div>
<div class="h-4 w-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path>
</svg>
</div>
<div class="h-4 w-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path d="M528.1 171.5L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6zM388.6 312.3l23.7 138.4L288 385.4l-124.3 65.3 23.7-138.4-100.6-98 139-20.2 62.2-126 62.2 126 139 20.2-100.6 98z"></path>
</svg>
</div>
</div>
</div>
<div id="ibpabj" class="flex flex-col gap-2">
<h5 id="ixdzei" class="text-lg font-bold lg:text-xl">
Alpine.js
<br />
</h5>
<div class="grid max-w-max grid-cols-5 gap-2 fill-indigo-600">
<div class="h-4 w-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path>
</svg>
</div>
<div class="h-4 w-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path>
</svg>
</div>
<div class="h-4 w-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path>
</svg>
</div>
<div class="h-4 w-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path>
</svg>
</div>
<div class="h-4 w-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path d="M528.1 171.5L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6zM388.6 312.3l23.7 138.4L288 385.4l-124.3 65.3 23.7-138.4-100.6-98 139-20.2 62.2-126 62.2 126 139 20.2-100.6 98z"></path>
</svg>
</div>
</div>
</div>
<div id="if2do8" class="flex flex-col gap-2">
<h5 id="i5u7gm" class="text-lg font-bold lg:text-xl">
Aframe.js
<br />
</h5>
<div class="grid max-w-max grid-cols-5 gap-2 fill-indigo-600">
<div class="h-4 w-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path>
</svg>
</div>
<div class="h-4 w-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path>
</svg>
</div>
<div class="h-4 w-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path>
</svg>
</div>
<div class="h-4 w-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path>
</svg>
</div>
<div class="h-4 w-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path d="M528.1 171.5L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6zM388.6 312.3l23.7 138.4L288 385.4l-124.3 65.3 23.7-138.4-100.6-98 139-20.2 62.2-126 62.2 126 139 20.2-100.6 98z"></path>
</svg>
</div>
</div>
</div>
<div id="ijekxo" class="flex flex-col gap-2">
<h5 id="i7ldug" class="text-lg font-bold lg:text-xl">
Android Studio
<br />
</h5>
<div class="grid max-w-max grid-cols-5 gap-2 fill-indigo-600">
<div class="h-4 w-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path>
</svg>
</div>
<div class="h-4 w-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path>
</svg>
</div>
<div class="h-4 w-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path>
</svg>
</div>
<div class="h-4 w-4">
<svg id="idow0d-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path d="M528.1 171.5L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6zM388.6 312.3l23.7 138.4L288 385.4l-124.3 65.3 23.7-138.4-100.6-98 139-20.2 62.2-126 62.2 126 139 20.2-100.6 98z"></path>
</svg>
</div>
<div class="h-4 w-4">
<svg id="idow0d" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path d="M528.1 171.5L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6zM388.6 312.3l23.7 138.4L288 385.4l-124.3 65.3 23.7-138.4-100.6-98 139-20.2 62.2-126 62.2 126 139 20.2-100.6 98z"></path>
</svg>
</div>
</div>
</div>
<div id="ifzuq7" class="flex flex-col gap-2">
<h5 id="i8xgoi" class="text-lg font-bold lg:text-xl">
WordPress
<br />
</h5>
<div class="grid max-w-max grid-cols-5 gap-2 fill-indigo-600">
<div class="h-4 w-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path>
</svg>
</div>
<div class="h-4 w-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path>
</svg>
</div>
<div class="h-4 w-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path>
</svg>
</div>
<div class="h-4 w-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path d="M528.1 171.5L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6zM388.6 312.3l23.7 138.4L288 385.4l-124.3 65.3 23.7-138.4-100.6-98 139-20.2 62.2-126 62.2 126 139 20.2-100.6 98z"></path>
</svg>
</div>
<div class="h-4 w-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path d="M528.1 171.5L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6zM388.6 312.3l23.7 138.4L288 385.4l-124.3 65.3 23.7-138.4-100.6-98 139-20.2 62.2-126 62.2 126 139 20.2-100.6 98z"></path>
</svg>
</div>
</div>
</div>
<div id="iwmaty" class="flex flex-col gap-2">
<h5 id="ipcj1z" class="text-lg font-bold lg:text-xl">
AWS Cloud
<br />
</h5>
<div class="grid max-w-max grid-cols-5 gap-2 fill-indigo-600">
<div class="h-4 w-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path>
</svg>
</div>
<div class="h-4 w-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path>
</svg>
</div>
<div class="h-4 w-4">
<svg id="ijiziw-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path d="M528.1 171.5L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6zM388.6 312.3l23.7 138.4L288 385.4l-124.3 65.3 23.7-138.4-100.6-98 139-20.2 62.2-126 62.2 126 139 20.2-100.6 98z"></path>
</svg>
</div>
<div class="h-4 w-4">
<svg id="igw5hi" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path d="M528.1 171.5L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6zM388.6 312.3l23.7 138.4L288 385.4l-124.3 65.3 23.7-138.4-100.6-98 139-20.2 62.2-126 62.2 126 139 20.2-100.6 98z"></path>
</svg>
</div>
<div class="h-4 w-4">
<svg id="ijiziw" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path d="M528.1 171.5L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6zM388.6 312.3l23.7 138.4L288 385.4l-124.3 65.3 23.7-138.4-100.6-98 139-20.2 62.2-126 62.2 126 139 20.2-100.6 98z"></path>
</svg>
</div>
</div>
</div>
<div id="ii5qml" class="flex flex-col gap-2">
<h5 id="iudl82" class="text-lg font-bold lg:text-xl">
Apple Xcode
<br />
</h5>
<div class="grid max-w-max grid-cols-5 gap-2 fill-indigo-600">
<div class="h-4 w-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path>
</svg>
</div>
<div class="h-4 w-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path>
</svg>
</div>
<div class="h-4 w-4">
<svg id="i4igqf" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path d="M528.1 171.5L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6zM388.6 312.3l23.7 138.4L288 385.4l-124.3 65.3 23.7-138.4-100.6-98 139-20.2 62.2-126 62.2 126 139 20.2-100.6 98z"></path>
</svg>
</div>
<div class="h-4 w-4">
<svg id="iad4cg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path d="M528.1 171.5L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6zM388.6 312.3l23.7 138.4L288 385.4l-124.3 65.3 23.7-138.4-100.6-98 139-20.2 62.2-126 62.2 126 139 20.2-100.6 98z"></path>
</svg>
</div>
<div class="h-4 w-4">
<svg id="ibr8ri" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path d="M528.1 171.5L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6zM388.6 312.3l23.7 138.4L288 385.4l-124.3 65.3 23.7-138.4-100.6-98 139-20.2 62.2-126 62.2 126 139 20.2-100.6 98z"></path>
</svg>
</div>
</div>
</div>
</div>
</div>
<div id="iuia2-2" x-show="page == 'portfolio'" class="flex flex-col gap-4 p-4">
<h3 id="i5nek-2" class="text-2xl font-bold capitalize lg:text-4xl">Portfolio</h3>
<div id="iu5yj-2" class="h-2 max-w-24 rounded-full bg-indigo-600"></div>
<div id="iincn-2" class="grid gap-8 lg:grid-cols-2">
<div id="i1n85m" class="flex flex-col gap-2">
<div id="i3a0nk" class="relative flex aspect-video overflow-hidden rounded-2xl bg-indigo-200">
<img id="i862vm" src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=3764&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="h-full w-full object-cover grayscale transition hover:scale-105 hover:grayscale-0" />
<a id="iwdg8j-2-3" href="https://senangstart.com/" target="_blank" class="absolute right-4 top-4 flex h-8 items-center justify-center gap-2 rounded-full bg-indigo-600 px-4 text-white"
><p>OPEN</p>
<svg id="il6n0x-2-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="h-4 w-4 fill-white">
<path d="M432 320H400a16 16 0 0 0 -16 16V448H64V128H208a16 16 0 0 0 16-16V80a16 16 0 0 0 -16-16H48A48 48 0 0 0 0 112V464a48 48 0 0 0 48 48H400a48 48 0 0 0 48-48V336A16 16 0 0 0 432 320zM488 0h-128c-21.4 0-32.1 25.9-17 41l35.7 35.7L135 320.4a24 24 0 0 0 0 34L157.7 377a24 24 0 0 0 34 0L435.3 133.3 471 169c15 15 41 4.5 41-17V24A24 24 0 0 0 488 0z"></path></svg
></a>
</div>
<div class="flex flex-col px-4">
<p id="iwq907" class="font-bold">Project Title Here</p>
<p id="i0ugi3" class="overflow-hidden text-ellipsis text-sm opacity-70">Project description</p>
<div></div>
</div>
</div>
<div id="imzog7" class="flex flex-col gap-2">
<div class="relative flex aspect-video overflow-hidden rounded-2xl bg-indigo-200">
<img id="ijyj11" src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=3764&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="h-full w-full object-cover grayscale transition hover:scale-105 hover:grayscale-0" />
<a id="iu2ube" href="https://senangstart.com/" target="_blank" class="absolute right-4 top-4 flex h-8 items-center justify-center gap-2 rounded-full bg-indigo-600 px-4 text-white"
><p>OPEN</p>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="h-4 w-4 fill-white">
<path d="M432 320H400a16 16 0 0 0 -16 16V448H64V128H208a16 16 0 0 0 16-16V80a16 16 0 0 0 -16-16H48A48 48 0 0 0 0 112V464a48 48 0 0 0 48 48H400a48 48 0 0 0 48-48V336A16 16 0 0 0 432 320zM488 0h-128c-21.4 0-32.1 25.9-17 41l35.7 35.7L135 320.4a24 24 0 0 0 0 34L157.7 377a24 24 0 0 0 34 0L435.3 133.3 471 169c15 15 41 4.5 41-17V24A24 24 0 0 0 488 0z"></path></svg
></a>
</div>
<div class="flex flex-col px-4">
<p id="iq3fpc" class="font-bold">Project Title Here</p>
<p id="iuvknr" class="overflow-hidden text-ellipsis text-sm opacity-70">Project description</p>
<div></div>
</div>
</div>
<div id="iwf7m9" class="flex flex-col gap-2">
<div id="ipgntr" class="flex aspect-video overflow-hidden rounded-2xl bg-indigo-200">
<img id="i43kwb" src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=3764&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="h-full w-full object-cover grayscale transition hover:scale-105 hover:grayscale-0" />
</div>
<div class="flex flex-col px-4">
<p id="iqwpup" class="font-bold">Project Title Here</p>
<p id="i2g8ir" class="overflow-hidden text-ellipsis text-sm opacity-70">Project description</p>
<div></div>
</div>
</div>
<div id="iz1p87" class="flex flex-col gap-2">
<div class="flex aspect-video overflow-hidden rounded-2xl bg-indigo-200">
<img id="i3l5uh" src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=3764&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="h-full w-full object-cover grayscale transition hover:scale-105 hover:grayscale-0" />
</div>
<div class="flex flex-col px-4">
<p id="ijc9n5" class="font-bold">Project Title Here</p>
<p id="ie5765" class="overflow-hidden text-ellipsis text-sm opacity-70">Project description</p>
<div></div>
</div>
</div>
</div>
</div>
<div id="ihlzj-2" x-show="page == 'blog'" class="flex flex-col gap-4 p-4">
<h3 id="iyxgg-2" class="text-2xl font-bold capitalize lg:text-4xl">Blog</h3>
<div id="ivpuf-2" class="h-2 max-w-24 rounded-full bg-indigo-600"></div>
<div id="i0nitn" class="grid gap-8 lg:grid-cols-3">
<a id="inz1y9" href="https://www.google.com/" target="_blank" class="flex flex-col gap-2 rounded-2xl shadow-lg"
><div id="icwjyk" class="flex aspect-video overflow-hidden rounded-2xl bg-indigo-200">
<img id="idu7fg-2" src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=3764&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="h-full w-full object-cover" />
</div>
<div id="iqye23" class="mb-2 flex flex-col px-6 py-4">
<p id="i3ec7y" class="text-sm opacity-70">Apr 29, 2023</p>
<h4 id="ig5d4k" class="text-xl font-bold capitalize lg:text-2xl">
Blog Title Here
<br />
</h4>
<p id="ipyjat" class="overflow-hidden text-ellipsis">Blog Category</p>
<div></div></div
></a>
<a id="i939jf" href="https://www.google.com/" target="_blank" class="flex flex-col gap-2 rounded-2xl shadow-lg"
><div class="flex aspect-video overflow-hidden rounded-2xl bg-indigo-200">
<img id="itikx7" src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=3764&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="h-full w-full object-cover" />
</div>
<div class="mb-2 flex flex-col px-6 py-4">
<p id="ivuo8l" class="text-sm opacity-70">Apr 29, 2023</p>
<h4 id="ios1l3" class="text-xl font-bold capitalize lg:text-2xl">
Blog Title Here
<br />
</h4>
<p id="ib9xya" class="overflow-hidden text-ellipsis">Blog Category</p>
<div></div></div
></a>
<a id="iulpq8" href="https://www.google.com/" target="_blank" class="flex flex-col gap-2 rounded-2xl shadow-lg"
><div class="flex aspect-video overflow-hidden rounded-2xl bg-indigo-200">
<img id="i6eocq" src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=3764&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="h-full w-full object-cover" />
</div>
<div class="mb-2 flex flex-col px-6 py-4">
<p id="i3vktg" class="text-sm opacity-70">Apr 29, 2023</p>
<h4 id="ic1k4w" class="text-xl font-bold capitalize lg:text-2xl">
Blog Title Here
<br />
</h4>
<p id="il7st8" class="overflow-hidden text-ellipsis">Blog Category</p>
<div></div></div
></a>
<a id="iacbdm" href="https://www.google.com/" target="_blank" class="flex flex-col gap-2 rounded-2xl shadow-lg"
><div class="flex aspect-video overflow-hidden rounded-2xl bg-indigo-200">
<img id="i22wi1" src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=3764&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="h-full w-full object-cover" />
</div>
<div class="mb-2 flex flex-col px-6 py-4">
<p id="ig8bzk" class="text-sm opacity-70">Apr 29, 2023</p>
<h4 id="ivdl5l" class="text-xl font-bold capitalize lg:text-2xl">
Blog Title Here
<br />
</h4>
<p id="idjcxj" class="overflow-hidden text-ellipsis">Blog Category</p>
<div></div></div
></a>
<a id="igrbif" href="https://www.google.com/" target="_blank" class="flex flex-col gap-2 rounded-2xl shadow-lg"
><div class="flex aspect-video overflow-hidden rounded-2xl bg-indigo-200">
<img id="i3vafn" src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=3764&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="h-full w-full object-cover" />
</div>
<div class="mb-2 flex flex-col px-6 py-4">
<p id="inmu33" class="text-sm opacity-70">Apr 29, 2023</p>
<h4 id="iybgnf" class="text-xl font-bold capitalize lg:text-2xl">
Blog Title Here
<br />
</h4>
<p id="ipqcyg" class="overflow-hidden text-ellipsis">Blog Category</p>
<div></div></div
></a>
<a id="i6lfex" href="https://www.google.com/" target="_blank" class="flex flex-col gap-2 rounded-2xl shadow-lg"
><div class="flex aspect-video overflow-hidden rounded-2xl bg-indigo-200">
<img id="i5aoq7" src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=3764&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="h-full w-full object-cover" />
</div>
<div class="mb-2 flex flex-col px-6 py-4">
<p id="i9wfcg" class="text-sm opacity-70">Apr 29, 2023</p>
<h4 id="i03mmk" class="text-xl font-bold capitalize lg:text-2xl">
Blog Title Here
<br />
</h4>
<p id="iu6gpk" class="overflow-hidden text-ellipsis">Blog Category</p>
<div></div></div
></a>
</div>
</div>
<div id="ianqu-2" x-show="page == 'contact'" class="flex flex-col gap-4 p-4">
<h3 id="inres-2" class="text-2xl font-bold capitalize lg:text-4xl">Contact</h3>
<div id="i3jrl-2" class="h-2 max-w-24 rounded-full bg-indigo-600"></div>
<div id="ipvlox-2" class="grid gap-8 xl:grid-cols-2">
<div id="i8g7rl-2" class="flex aspect-square items-center justify-center overflow-hidden rounded-xl shadow-lg grayscale md:block md:min-h-80 xl:col-span-1">
<iframe frameborder="0" id="iw8nxl" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d509884.0171305437!2d101.05133448086333!3d3.232855360384523!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31cc4252cdeb045f%3A0x26e1bee1215dfbb9!2sSelangor!5e0!3m2!1sen!2smy!4v1721366381735!5m2!1sen!2smy" loading="lazy" referrerpolicy="no-referrer-when-downgrade" class="h-full w-full"></iframe>
</div>
<form method="post" id="ij9rpd" class="flex flex-col justify-center gap-4 rounded-xl p-4 shadow-lg lg:p-8">
<h6 class="text-base font-bold capitalize text-indigo-600 lg:text-lg">Contact Me</h6>
<div class="grid">
<label for="name_s" class="text-bold h-6 text-sm">Name</label>
<input type="text" placeholder="Name" class="h-10 rounded-lg border-2 border-neutral-200 px-3 text-base" />
</div>
<div class="grid">
<label for="email_s" class="text-bold h-6 text-sm">Email</label>
<input type="email" placeholder="[email protected]" class="h-10 rounded-lg border-2 border-neutral-200 px-3 text-base" />
</div>
<div class="grid">
<label id="iay2fi" for="enquiry_s" class="text-bold h-6 text-sm">Enquiry</label>
<textarea rows="3" placeholder="Write..." class="rounded-lg border-2 border-neutral-200 px-3 py-2 text-base"></textarea>
</div>
<div class="flex justify-end">
<button type="submit" class="flex h-10 w-full items-center justify-center rounded-lg bg-indigo-600 px-4 text-base font-semibold text-white hover:opacity-80 lg:max-w-max">Send</button>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
</body>
Welcome to SenangStart Template Preview! 🎉 Visit our homepage for a deeper dive into our offerings, or you can edit this template with drag-n-drop website builder.
Edit Template