<body id="iqnl">
<nav id="imvi" x-data="{ isOpen: false }" class="fixed w-full z-50 p-6">
<div id="iutp" class="p-2 w-full mx-auto rounded-lg flex flex-col lg:flex-row bg-gray-100 container shadow-xl">
<div id="iwah" class="h-12 flex justify-between">
<a href="#"><img src="https://cdn.glitch.global/16c1060a-84ef-4364-baee-52e9c6da00a5/2843136f-e299-447d-a8a4-9e3f17746926.image.png?v=1668040849154" class="h-full"/></a>
<div id="il6y" x-on:click="isOpen = !isOpen" x-on:click.outside="isOpen = false" class="w-12 flex items-center justify-center lg:hidden cursor-pointer">
<span id="mobile_nav_icon_close" :class="!isOpen ? '' : 'hidden'"><i id="i46j" class="fas fa-bars">
</i></span>
<span id="mobile_nav_icon_open" :class="isOpen ? '' : 'hidden'"><i class="fas fa-times">
</i></span>
</div>
</div>
<div :class="isOpen ? '' : 'hidden'" class="flex-grow justify-end flex-col lg:flex lg:flex-row pt-4 lg:pt-0">
<a id="in10n" href="#snippet" class="rounded-lg px-6 flex items-center h-12 -mx-2 lg:mx-0 hover:text-emerald-500">Snippet</a>
<a href="#expertises" class="rounded-lg px-6 flex items-center h-12 -mx-2 lg:mx-0 hover:text-emerald-500">Expertise</a>
<a href="#works" class="rounded-lg px-6 flex items-center h-12 -mx-2 lg:mx-0 hover:text-emerald-500">Works</a>
<a href="#experiences" class="rounded-lg px-6 flex items-center h-12 -mx-2 lg:mx-0 hover:text-emerald-500">Experiences</a>
<a href="#connect" class="bg-neutral-800 text-white rounded-lg font-semibold px-6 flex items-center justify-center hover:opacity-80 mx-4 mb-4 lg:mb-0 lg:mr-0 lg:ml-4 h-12 mt-4 lg:mt-0">Connect</a>
</div>
</div>
</nav>
<section class="relative container mx-auto mb-16 lg:pt-28">
<div class="grid lg:grid-cols-2 w-full rounded lg:rounded-lg overflow-hidden shadow-xl">
<div class="bg-gray-100 flex items-center relative min-h-screen lg:min-h-min">
<img id="iuxb2" src="https://assets.senangwebs.com/websites/efc7c6b6-3a22-4ffc-a131-b24f23b63dd2/images/PiNwfZDwL5lpuApjDFCTd6RgwLCekmTLgt0LgHHO.jpg" class="w-full h-full top-0 left-0 absolute object-cover"/>
<div id="islcb" class="pt-40 pb-16 lg:py-40 px-6 lg:px-16 z-10">
<div id="iq0rr" class="flex flex-col lg:-mr-80 bg-white bg-opacity-50 backdrop-blur-md p-6 rounded-xl items-center lg:items-start">
<img id="id4be" src="https://images.unsplash.com/photo-1544502062-f82887f03d1c?q=80&w=3959&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="w-48 rounded-full mb-4 lg:hidden shadow-lg aspect-square object-cover"/>
<p class="lg:text-lg font-semibold mb-2 text-left text-gray-800">Hello & Welcome!
</p>
<h1 class="text-4xl lg:text-7xl font-bold text-left mb-4">A.Hakim Noor
</h1>
<p class="text-2xl lg:text-4xl mb-6 lg:mb-8 text-left font-semibold">A mechanical engineer by training, software engineer by trade.
</p>
<div class="w-full flex flex-col lg:flex-row">
<a href="#works" class="bg-emerald-500 text-white rounded-lg text-lg font-semibold px-8 w-full lg:max-w-max h-14 flex items-center justify-center hover:opacity-80">My Works</a>
<div class="w-full lg:w-4 h-4">
</div>
<a href="#experiences" class="border-neutral-800 border-2 text-neutral-800 rounded-lg text-lg font-semibold px-8 w-full lg:max-w-max h-14 flex items-center justify-center hover:opacity-80">Experiences</a>
</div>
</div>
</div>
</div>
<div class="bg-gray-200 pt-80 lg:p-0 hidden lg:block relative">
<img id="iy0u9" src="https://images.unsplash.com/photo-1544502062-f82887f03d1c?q=80&w=3959&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="w-full h-full top-0 left-0 absolute object-cover"/>
</div>
</div>
</section>
<section id="snippet" class="h-20">
</section>
<section class="px-6 lg:px-16 my-8 lg:my-16 container mx-auto">
<div class="p-0 lg:px-24 mb-8 lg:mb-16">
<h1 class="text-3xl lg:text-6xl capitalize font-bold mb-2 lg:mb-6">My
<span class="text-emerald-500"><i class="fas fa-code">
</i></span>Snippet
</h1>
<div id="ivksc" class="text-xl lg:text-2xl">
<p id="i4git">A fusion of mechanical engineering expertise and a self-taught
immersion into the world of software engineering. Driven by an
unwavering passion for sciences and technologies since my formative
years, I have charted a course that currently centres around
advocating for the transformative potential of web-based VR, AR, and
Spatial Computing technologies.
</p>
</div>
</div>
<div class="grid grid-cols-1 gap-4">
<div class="rounded-lg bg-gray-200 grid grid-cols-1 lg:grid-cols-2 p-4 lg:px-16 lg:py-8 relative shadow-xl">
<img src="https://assets.senangwebs.com/websites/efc7c6b6-3a22-4ffc-a131-b24f23b63dd2/images/cuiLCX5bAh6HVyqBZuwRZP5Jsm72EcQV4vTLJHhJ.jpg" class="w-full h-full top-0 left-0 absolute object-cover rounded-lg blur-md lg:blur-none"/>
<div class="relative lg:col-start-2 aspect-square">
<div class="absolute top-0 left-0 w-full h-full flex lg:justify-center flex-col">
<div class="border-2 rounded-md border-emerald-500 text-emerald-500 px-2 max-w-max font-bold mb-2 lg:mb-4">Engagement
</div>
<p id="ijlag" class="text-xl lg:text-2xl">Passionate about education, I thrive on sharing insights with
students in diverse institutes. Actively collaborating with local
and international universities, I contribute to impactful projects
and research, pushing the boundaries of technological innovation.
</p>
</div>
</div>
</div>
<div class="rounded-lg bg-gray-200 grid grid-cols-1 lg:grid-cols-2 p-4 lg:px-16 lg:py-8 relative shadow-xl">
<img src="https://assets.senangwebs.com/websites/efc7c6b6-3a22-4ffc-a131-b24f23b63dd2/images/vLYxqpPceiTBUK1dgrDvnbz3EL0fAuOC3SjMCz2G.jpg" class="w-full h-full top-0 left-0 absolute object-cover rounded-lg blur-md lg:blur-none"/>
<div class="relative lg:col-start-1 aspect-square">
<div class="absolute top-0 left-0 w-full h-full flex lg:justify-center flex-col">
<div class="border-2 rounded-md border-emerald-500 text-emerald-500 px-2 max-w-max font-bold mb-2 lg:mb-4">Philosophy
</div>
<p id="ixpek" class="text-xl lg:text-2xl">Commitment to the relentless pursuit of excellence and testament
to the exciting intersection of engineering, technology, and
education.
</p>
</div>
</div>
</div>
</div>
</section>
<section id="expertises" class="h-20">
</section>
<section class="px-6 lg:px-16 my-8 lg:my-16 container mx-auto">
<div class="grid grid-cols-1 mb-4 lg:mb-8 mx-0 lg:mx-24">
<div class="col-span-1">
<div class="border-2 rounded-md border-emerald-500 text-emerald-500 px-2 max-w-max font-bold mb-2 lg:mb-4">Expertise
</div>
</div>
<div>
<h1 class="text-2xl lg:text-6xl capitalize font-bold mb-2 lg:mb-4">The mastery that I possess
</h1>
</div>
<div class="flex items-center">
<p class="text-base lg:text-2xl font-semibold w-full">And what you can expect...
</p>
</div>
</div>
<div class="grid lg:grid-cols-3 gap-4">
<div class="rounded-lg p-4 flex flex-col shadow-xl">
<div class="bg-gradient-to-br from-emerald-500 to-teal-500 text-white w-16 h-16 rounded mb-4 flex items-center justify-center text-4xl">
<i class="fas fa-globe-asia">
</i>
</div>
<h4 class="mb-2 font-semibold text-lg">Web Development
</h4>
<p class="mb-2 text-lg">Built countless number of product with Laravel framework ever since
Laravel 5. From marketplace to drag & drop website builder.
</p>
<div class="flex gap-2 mt-auto">
<div class="text-sm font-semibold text-white bg-neutral-600 rounded-md h-6 flex items-center justify-center px-2">
<p>Laravel
</p>
</div>
<div class="text-sm font-semibold text-white bg-neutral-600 rounded-md h-6 flex items-center justify-center px-2">
<p>PHP
</p>
</div>
</div>
</div>
<div class="rounded-lg p-4 flex flex-col shadow-xl">
<div class="bg-gradient-to-br from-emerald-500 to-teal-500 text-white w-16 h-16 rounded mb-4 flex items-center justify-center text-4xl">
<i class="fas fa-vr-cardboard">
</i>
</div>
<h4 class="mb-2 font-semibold text-lg">VR/AR/Spatial Computing
</h4>
<p id="ices5g" class="mb-2 text-lg">Advocate for AR & VR technologies. Specifically web-based approach
such as A-Frame framework which allow greater accessibility than
platform specific solution.
</p>
<div class="flex gap-2 mt-auto">
<div class="text-sm font-semibold text-white bg-neutral-600 rounded-md h-6 flex items-center justify-center px-2">
<p>A-Frame
</p>
</div>
<div class="text-sm font-semibold text-white bg-neutral-600 rounded-md h-6 flex items-center justify-center px-2">
<p>AR.js
</p>
</div>
</div>
</div>
<div class="rounded-lg p-4 flex flex-col shadow-xl">
<div class="bg-gradient-to-br from-emerald-500 to-teal-500 text-white w-16 h-16 rounded mb-4 flex items-center justify-center text-4xl">
<i class="fas fa-laptop-code">
</i>
</div>
<h4 class="mb-2 font-semibold text-lg">No-code Solution
</h4>
<p class="mb-2 text-lg">Helping out educational institution to equip their student with
no-code solution skills. Building mobile app using GlideApps.
</p>
<div class="flex gap-2 mt-auto">
<div class="text-sm font-semibold text-white bg-neutral-600 rounded-md h-6 flex items-center justify-center px-2">
<p>SenangWebs
</p>
</div>
<div class="text-sm font-semibold text-white bg-neutral-600 rounded-md h-6 flex items-center justify-center px-2">
<p>GlideApps
</p>
</div>
</div>
</div>
</div>
</section>
<section id="works" class="h-20">
</section>
<section class="px-6 lg:px-16 my-8 lg:my-16 container mx-auto">
<div class="grid grid-cols-1 mb-4 lg:mb-8 mx-0 lg:mx-24">
<div class="col-span-1">
<div class="border-2 rounded-md border-emerald-500 text-emerald-500 px-2 max-w-max font-bold mb-2 lg:mb-4">Works
</div>
</div>
<div>
<h1 class="text-2xl lg:text-6xl capitalize font-bold mb-2 lg:mb-4">The Fruit Of My Labor
</h1>
</div>
<div class="flex items-center">
<p id="iowwfg" class="text-base lg:text-2xl font-semibold w-full">Check out what I have built so far
</p>
</div>
</div>
<div class="grid lg:grid-cols-2 gap-4">
<div class="rounded-lg lg:rounded-2xl overflow-hidden flex flex-col justify-between group shadow-xl">
<div class="p-4 lg:p-8 text-center flex flex-col justify-between h-full">
<div>
<div class="text-xl lg:text-2xl mb-2 lg:mb-4 font-bold">Kad Kahwin Digital
</div>
<div id="idjpgk" class="text-base lg:text-lg mb-4 lg:mb-8">Electronic invitation card for wedding specialized for Malay
community in Malaysia
</div>
</div>
<div class="flex justify-center">
<a href="#" class="font-semibold text-emerald-500 lg:text-lg flex items-center gap-2 pr-1 hover:gap-3 hover:pr-0 hover:opacity-80">Learn More<i class="fas fa-arrow-right">
</i></a>
</div>
</div>
<div>
<img src="https://cdn.glitch.global/82d64943-fcf3-455b-bf6d-b3e19eb9a042/preview_kkd.png?v=1704837781552" class="w-full group-hover:translate-y-4 transition grayscale group-hover:grayscale-0"/>
</div>
</div>
<div class="rounded-lg lg:rounded-2xl overflow-hidden flex flex-col justify-between group shadow-xl">
<div class="p-4 lg:p-8 text-center flex flex-col justify-between h-full">
<div>
<div class="text-xl lg:text-2xl mb-2 lg:mb-4 font-bold">SenangWebs
</div>
<div class="text-base lg:text-lg mb-4 lg:mb-8">Your Intuitive Drag & Drop Website Builder for Effortless
Online Presence!
</div>
</div>
<div class="flex justify-center">
<a href="#" class="font-semibold text-emerald-500 lg:text-lg flex items-center gap-2 pr-1 hover:gap-3 hover:pr-0 hover:opacity-80">Learn More<i class="fas fa-arrow-right">
</i></a>
</div>
</div>
<div>
<img src="https://cdn.glitch.global/82d64943-fcf3-455b-bf6d-b3e19eb9a042/preview_sw.png?v=1704837782571" class="w-full group-hover:translate-y-4 transition grayscale group-hover:grayscale-0"/>
</div>
</div>
</div>
</section>
<section id="experiences" class="h-20">
</section>
<section class="px-6 lg:px-16 my-8 lg:my-16 container mx-auto">
<div class="grid grid-cols-1 mb-4 lg:mb-8 mx-0 lg:mx-24">
<div class="col-span-1">
<div class="border-2 rounded-md border-emerald-500 text-emerald-500 px-2 max-w-max font-bold mb-2 lg:mb-4">Experiences
</div>
</div>
<div>
<h1 class="text-2xl lg:text-6xl capitalize font-bold mb-2 lg:mb-4">The Path I Walked On
</h1>
</div>
<div class="flex items-center">
<p class="text-base lg:text-2xl font-semibold w-full">What makes me to me of today
</p>
</div>
</div>
<div class="flex flex-col relative">
<div class="grid grid-cols-11">
<div class="col-span-10 lg:col-span-5 py-2 order-2 lg:order-1">
</div>
<div class="col-span-1 flex justify-center items-top relative order-1 lg:order-2">
<div class="border border-neutral-600 h-full">
</div>
<div class="w-4 h-4 absolute flex items-center justify-center -mt-1 text-neutral-600">
<i class="fas fa-chevron-up">
</i>
</div>
</div>
<div class="col-span-5 hidden lg:block order-3">
</div>
</div>
<div class="grid grid-cols-11">
<div class="col-span-10 lg:col-span-5 py-2 order-2 lg:order-1">
<div class="flex flex-col lg:flex-row p-4 rounded-lg gap-4 shadow-xl">
<div class="w-16 h-16 rounded aspect-square overflow-hidden">
<img src="https://steelbluemedia.com/wp-content/uploads/2019/06/new-google-favicon-512.png" class="w-full h-full object-cover"/>
</div>
<div class="flex flex-col">
<p class="text-lg lg:text-xl font-semibold">Back End Developer
</p>
<p class="lg:text-lg">TalentCloud.ai · Full-time
</p>
<p class="opacity-80">Dec 2022 - Present · 1 yr 2 mos
</p>
</div>
</div>
</div>
<div class="col-span-1 flex justify-center items-center relative order-1 lg:order-2">
<div class="border border-neutral-600 h-full">
</div>
<div class="w-4 h-4 rounded-full bg-neutral-600 absolute text-white flex justify-center items-center">
</div>
</div>
<div class="col-span-5 hidden lg:block order-3">
</div>
</div>
<div class="grid grid-cols-11">
<div class="col-span-5 hidden lg:block">
</div>
<div class="col-span-1 flex justify-center items-center relative">
<div class="border border-neutral-600 h-full">
</div>
<div class="w-4 h-4 rounded-full bg-neutral-600 absolute text-white flex justify-center items-center">
</div>
</div>
<div class="col-span-10 lg:col-span-5 py-2">
<div class="flex flex-col lg:flex-row p-4 rounded-lg gap-4 shadow-xl">
<div class="w-16 h-16 rounded aspect-square overflow-hidden">
<img src="https://steelbluemedia.com/wp-content/uploads/2019/06/new-google-favicon-512.png" class="w-full h-full object-cover"/>
</div>
<div class="flex flex-col">
<p class="text-lg lg:text-xl font-semibold">Founder & Technology Officer
</p>
<p class="lg:text-lg">Bookklik Technologies · Self-employed
</p>
<p class="opacity-80">Apr 2018 - Present · 5 yrs 10 mos
</p>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-11">
<div class="col-span-10 lg:col-span-5 py-2 order-2 lg:order-1">
<div class="flex flex-col lg:flex-row p-4 rounded-lg gap-4 shadow-xl">
<div class="w-16 h-16 rounded aspect-square overflow-hidden">
<img src="https://steelbluemedia.com/wp-content/uploads/2019/06/new-google-favicon-512.png" class="w-full h-full object-cover"/>
</div>
<div class="flex flex-col">
<p class="text-lg lg:text-xl font-semibold">Chief Technology Officer
</p>
<p class="lg:text-lg">FixColab Sdn. Bhd. · Full-time
</p>
<p class="opacity-80">Mar 2021 - Nov 2022 · 1 yr 9 mos
</p>
</div>
</div>
</div>
<div class="col-span-1 flex justify-center items-center relative order-1 lg:order-2">
<div class="border border-neutral-600 h-full">
</div>
<div class="w-4 h-4 rounded-full bg-neutral-600 absolute text-white flex justify-center items-center">
</div>
</div>
<div class="col-span-5 hidden lg:block order-3">
</div>
</div>
<div class="grid grid-cols-11">
<div class="col-span-5 hidden lg:block">
</div>
<div class="col-span-1 flex justify-center items-center relative">
<div class="border border-neutral-600 h-full">
</div>
<div class="w-4 h-4 rounded-full bg-neutral-600 absolute text-white flex justify-center items-center">
</div>
</div>
<div class="col-span-10 lg:col-span-5 py-2">
<div class="flex flex-col lg:flex-row p-4 rounded-lg gap-4 shadow-xl">
<div class="w-16 h-16 rounded aspect-square overflow-hidden">
<img src="https://steelbluemedia.com/wp-content/uploads/2019/06/new-google-favicon-512.png" class="w-full h-full object-cover"/>
</div>
<div class="flex flex-col">
<p class="text-lg lg:text-xl font-semibold">Product Manager
</p>
<p class="lg:text-lg">SenangHost · Part-time
</p>
<p class="opacity-80">Mar 2020 - Feb 2021 · 1 yr
</p>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-11">
<div class="col-span-10 lg:col-span-5 py-2 order-2 lg:order-1">
<div class="flex flex-col lg:flex-row p-4 rounded-lg gap-4 shadow-xl">
<div class="w-16 h-16 rounded aspect-square overflow-hidden">
<img src="https://steelbluemedia.com/wp-content/uploads/2019/06/new-google-favicon-512.png" class="w-full h-full object-cover"/>
</div>
<div class="flex flex-col">
<p class="text-lg lg:text-xl font-semibold">Producer, Workshops & Classes
</p>
<p id="itop2b" class="lg:text-lg">Forward School · Full-time
</p>
<p class="opacity-80">Aug 2019 - Feb 2021 · 1 yr 7 mos
</p>
</div>
</div>
</div>
<div class="col-span-1 flex justify-center items-center relative order-1 lg:order-2">
<div class="border border-neutral-600 h-full">
</div>
<div class="w-4 h-4 rounded-full bg-neutral-600 absolute text-white flex justify-center items-center">
</div>
</div>
<div class="col-span-5 hidden lg:block order-3">
</div>
</div>
<div class="grid grid-cols-11">
<div class="col-span-5 hidden lg:block">
</div>
<div class="col-span-1 flex justify-center items-center relative">
<div class="border border-neutral-600 h-full">
</div>
<div class="w-4 h-4 rounded-full bg-neutral-600 absolute text-white flex justify-center items-center">
</div>
</div>
<div class="col-span-10 lg:col-span-5 py-2">
<div class="flex flex-col lg:flex-row p-4 rounded-lg gap-4 shadow-xl">
<div class="w-16 h-16 rounded aspect-square overflow-hidden">
<img src="https://steelbluemedia.com/wp-content/uploads/2019/06/new-google-favicon-512.png" class="w-full h-full object-cover"/>
</div>
<div class="flex flex-col">
<p class="text-lg lg:text-xl font-semibold">Software Engineer
</p>
<p class="lg:text-lg">Website Artisan PLT · Part-time
</p>
<p class="opacity-80">Nov 2019 - Jul 2020 · 9 mos
</p>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-11">
<div class="col-span-10 lg:col-span-5 py-2 order-2 lg:order-1">
</div>
<div class="col-span-1 flex justify-center items-bottom relative order-1 lg:order-2">
<div class="border border-neutral-600 w-4 absolute">
</div>
</div>
<div class="col-span-5 hidden lg:block order-3">
</div>
</div>
</div>
</section>
<section id="connect" class="h-20">
</section>
<section id="i4s04v" class="px-6 lg:px-16 my-8 lg:my-16 container mx-auto">
<div class="grid grid-cols-1 mb-4 lg:mb-8 mx-0 lg:mx-24">
<div class="col-span-1">
<div class="border-2 rounded-md border-emerald-500 text-emerald-500 px-2 max-w-max font-bold mb-2 lg:mb-4">Connect
</div>
</div>
<div>
<h1 id="i7b59x" class="text-2xl lg:text-6xl capitalize font-bold mb-2 lg:mb-4">Feel Free to Reach Out
</h1>
</div>
<div class="flex items-center">
<p id="ic3e62" class="text-base lg:text-2xl font-semibold w-full">Great minds think alike
</p>
</div>
</div>
<div class="rounded-lg bg-gradient-to-br from-emerald-400 to-teal-400 shadow-xl">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
<div id="ic0vqj" class="lg:col-span-2 py-4 lg:py-16 pl-4 lg:pl-16 pr-4 lg:pr-10 justify-between flex flex-col">
<div>
<div class="text-3xl lg:text-6xl font-bold text-white mb-2 lg:mb-4">Connect
<br/>& Let's Talk
</div>
<div id="ilyq2p" class="mb-4 lg:mb-8 text-white text-base lg:text-lg">Do you think we can get along?
<br/>Get in touch with me through
these platform below:
</div>
</div>
<div id="i80w11" class="flex justify-center lg:justify-start gap-4">
<a href="#" class="rounded-md flex items-center justify-center w-16 h-16 bg-white text-neutral-800 text-2xl"><i class="fab fa-google">
</i></a>
<a href="#" class="rounded-md flex items-center justify-center w-16 h-16 bg-white text-neutral-800 text-2xl"><i class="fab fa-linkedin">
</i></a>
<a href="#" class="rounded-md flex items-center justify-center w-16 h-16 bg-white text-neutral-800 text-2xl"><i class="fab fa-twitter">
</i></a>
<a href="#" class="rounded-md flex items-center justify-center w-16 h-16 bg-white text-neutral-800 text-2xl"><i class="fab fa-facebook">
</i></a>
</div>
</div>
<div id="io2f1n" class="hidden xl:flex items-end lg:p-16 p-4">
<div id="i179c8">
<img id="ivy0qn" src="https://images.unsplash.com/photo-1544502062-f82887f03d1c?q=80&w=3959&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="h-full lg:ml-auto rounded-full border-2 border-white aspect-square object-cover"/>
</div>
</div>
</div>
</div>
</section>
<footer class="flex flex-col lg:flex-row container mx-auto pt-4 px-6 lg:px-16 mb-16">
<div class="flex justify-center">
<a href="#" class="bg-gray-200 rounded-md flex items-center justify-center w-8 h-8 text-gray-600 text-sm mr-2"><i class="fab fa-google">
</i></a>
<a href="#" class="bg-gray-200 rounded-md flex items-center justify-center w-8 h-8 text-gray-600 text-sm mr-2"><i class="fab fa-linkedin">
</i></a>
<a href="#" class="bg-gray-200 rounded-md flex items-center justify-center w-8 h-8 text-gray-600 text-sm mr-2"><i class="fab fa-twitter">
</i></a>
<a href="#" class="bg-gray-200 rounded-md flex items-center justify-center w-8 h-8 text-gray-600 text-sm mr-2"><i class="fab fa-facebook">
</i></a>
</div>
<div class="flex-grow h-8 flex items-center justify-center lg:justify-end font-semibold" id="i9aq4h">© A.Hakim Noor
</div>
<div class="flex justify-center">
<a href="#" class="flex items-center justify-center w-8 h-8 text-sm lg:ml-4"><i class="fas fa-arrow-up">
</i></a>
</div>
</footer>
</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