<body id="iruy">
<nav x-data="{ isOpen: false }" class="fixed w-full z-50 p-6">
<div
class="p-2 w-full mx-auto rounded-lg flex flex-col lg:flex-row bg-gray-100 container shadow-neumorphic"
>
<div 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
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'"
class=""
><i class="fas fa-bars"></i></span
><span
id="mobile_nav_icon_open"
:class="isOpen ? '' : 'hidden'"
class="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 hidden"
>
<a
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-neumorphic"
>
<div
class="bg-gray-100 flex items-center relative min-h-screen lg:min-h-min"
>
<img
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 class="pt-40 pb-16 lg:py-40 px-6 lg:px-16 z-10">
<div
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
src="https://assets.senangwebs.com/websites/efc7c6b6-3a22-4ffc-a131-b24f23b63dd2/images/zkbIoeelf1HovrdmLImnzFMaHyyutzGsuJbZ84ZB.jpg"
class="w-48 rounded-full mb-4 lg:hidden shadow-lg"
/>
<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
src="https://assets.senangwebs.com/websites/efc7c6b6-3a22-4ffc-a131-b24f23b63dd2/images/zkbIoeelf1HovrdmLImnzFMaHyyutzGsuJbZ84ZB.jpg"
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 class="text-xl lg:text-2xl">
<p>
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-neumorphic"
>
<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 class="text-xl lg:text-2xl font-semibold">
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-neumorphic"
>
<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 class="text-xl lg:text-2xl font-semibold">
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-neumorphic">
<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-neumorphic">
<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 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-neumorphic">
<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 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-neumorphic"
>
<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 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"
alt=""
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-neumorphic"
>
<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"
alt=""
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-neumorphic"
>
<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-neumorphic"
>
<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-neumorphic"
>
<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-neumorphic"
>
<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-neumorphic"
>
<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 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-neumorphic"
>
<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 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 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 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-neumorphic"
>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
<div
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 class="text-base mb-4 lg:mb-8 text-white">
Do you think we can get along? <br />Get in touch with me through
these platform below:
</div>
</div>
<div 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 class="hidden xl:flex items-end pr-0 lg:pr-16 pt-11">
<div class="mr-4">
<img
src="https://app.senangstart.com/storage/themes/July2021/Sn2g0Gu97czn5iqmnT72.png"
alt=""
class="h-full lg:ml-auto"
/>
</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"
>
© 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