<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8" />
<meta name="application-name" content="{{ config('app.name') }}" />
<meta name="csrf-token" content="{{ csrf_token() }}" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>This is me | JDevs-ID</title>
<!-- Favicon -->
<script src="https://cdn.tailwindcss.com"></script>
<link
rel="icon"
type="image/png"
href="https://avatars.githubusercontent.com/u/57583609"
/>
<script>
document.addEventListener("DOMContentLoaded", function () {
const text =
"Life as Abdullah, Developer, Data & System Analyst, Server Engineer";
const typewriterElement = document.getElementById("typewriter");
let index = 0;
function type() {
if (index < text.length) {
typewriterElement.textContent += text.charAt(index);
index++;
setTimeout(type, 100); // Adjust typing speed here (in milliseconds)
}
}
type(); // Start typing
});
document.addEventListener("DOMContentLoaded", () => {
const mobileMenuButton = document.querySelector("#mobile-menu-button");
const closeMenuButton = document.querySelector("#close-menu-button");
const mainContent = document.getElementById("main-content");
const backdrop = document.getElementById("backdrop");
const mobileMenu = document.getElementById("mobile-menu");
mobileMenuButton.addEventListener("click", () => {
mobileMenu.classList.remove("hidden"); // Show the menu
backdrop.classList.remove("hidden"); // Show the backdrop
mainContent.classList.add("blur"); // Apply blur to main content
});
closeMenuButton.addEventListener("click", () => {
mobileMenu.classList.add("hidden"); // Hide the menu
backdrop.classList.add("hidden"); // Hide the backdrop
mainContent.classList.remove("blur"); // Remove blur from main content
});
backdrop.addEventListener("click", () => {
mobileMenu.classList.add("hidden"); // Hide the menu
backdrop.classList.add("hidden"); // Hide the backdrop
mainContent.classList.remove("blur"); // Remove blur from main content
});
});
</script>
</head>
<body class="antialiased h-screen overflow-y-auto">
<div class="bg-white">
<header class="absolute inset-x-0 top-0 z-50">
<nav
class="flex items-center justify-between p-6 lg:px-8"
aria-label="Global"
>
<div class="flex lg:flex-1">
<a href="#" class="-m-1.5 p-1.5">
<span class="sr-only">Tri Jaya Prasetya</span>
<img
class="h-8 w-auto rounded-full"
src="https://avatars.githubusercontent.com/u/57583609"
alt=""
/>
</a>
</div>
<div class="flex lg:hidden">
<button
id="mobile-menu-button"
type="button"
class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700"
>
<span class="sr-only">Open main menu</span>
<svg
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
/>
</svg>
</button>
</div>
<!-- <div class="hidden lg:flex lg:gap-x-12">
<a href="#" class="text-sm font-semibold leading-6 text-gray-900">Articles</a>
<a href="#" class="text-sm font-semibold leading-6 text-gray-900">Galleries</a>
<a href="#" class="text-sm font-semibold leading-6 text-gray-900">Projects</a>
<a href="#" class="text-sm font-semibold leading-6 text-gray-900">Portfolio</a>
</div> -->
<div class="hidden lg:flex lg:flex-1 lg:justify-end">
<a
href="https://github.com/JDevs-id"
target="_blank"
class="text-sm font-semibold leading-6 text-gray-900"
>go on my github <span aria-hidden="true">→</span></a
>
</div>
</nav>
<!-- Mobile menu, show/hide based on menu open state. -->
<div
id="mobile-menu"
class="lg:hidden hidden"
role="dialog"
aria-modal="true"
>
<!-- Background backdrop, show/hide based on slide-over state. -->
<div
id="backdrop"
class="fixed inset-0 z-50 hidden bg-black opacity-50"
></div>
<div
class="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white bg-opacity-50 px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10"
>
<div class="flex items-center justify-between">
<a href="#" class="-m-1.5 p-1.5">
<span class="sr-only">Tri Jaya Prasetya</span>
<img
class="h-8 w-auto rounded-full"
src="https://lh3.googleusercontent.com/a/ACg8ocIJi9HmNv1MEE8g6fSsV0Ir9Y3sLfbX2XuZdcrll1cLhMph4-Jf=s288-c-no"
alt=""
/>
</a>
<button
id="close-menu-button"
type="button"
class="-m-2.5 rounded-md p-2.5 text-gray-700"
>
<span class="sr-only">Close menu</span>
<svg
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>
<div class="mt-6 flow-root">
<div class="-my-6 divide-y divide-gray-500/10">
<!-- <div class="space-y-2 py-6">
<a href="#" class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">Articles</a>
<a href="#" class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">Galleries</a>
<a href="#" class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">Projects</a>
<a href="#" class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">Portfolio</a>
</div> -->
<div class="py-6">
<a
href="https://github.com/JDevs-id"
target="_blank"
class="-mx-3 block rounded-lg px-3 py-2.5 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
>go on my github <span aria-hidden="true">→</span></a
>
</div>
</div>
</div>
</div>
</div>
</header>
<div class="relative isolate px-6 pt-14 lg:px-8" id="main-content">
<div
class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
aria-hidden="true"
>
<div
class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#3498db] to-[#9089fc] opacity-50 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
style="
clip-path: polygon(
74.1% 44.1%,
100% 61.6%,
97.5% 26.9%,
85.5% 0.1%,
80.7% 2%,
72.5% 32.5%,
60.2% 62.4%,
52.4% 68.1%,
47.5% 58.3%,
45.2% 34.5%,
27.5% 76.7%,
0.1% 64.9%,
17.9% 100%,
27.6% 76.8%,
76.1% 97.7%,
74.1% 44.1%
);
"
></div>
</div>
<div class="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56">
<div class="flex justify-center mb-4">
<div
class="relative rounded-full px-3 py-1 text-sm leading-6 text-gray-600 ring-1 ring-gray-900/10 hover:ring-gray-900/20"
>
<a href="#" class="font-semibold text-indigo-600">
<span class="absolute inset-0" aria-hidden="true"></span>This is
me,
</a>
</div>
</div>
<div class="text-center">
<div class="flex lg:flex-1 justify-center">
<a href="#" class="-m-1.5 p-1.5">
<span class="sr-only">Tri Jaya Prasetya</span>
<img
class="h-48 w-auto rounded-full"
src="https://lh3.googleusercontent.com/a/ACg8ocIJi9HmNv1MEE8g6fSsV0Ir9Y3sLfbX2XuZdcrll1cLhMph4-Jf=s288-c-no"
alt=""
/>
</a>
</div>
<p class="text-2xl font-bold mt-6 text-lg leading-8 text-gray-600">
Tri Jaya Prasetya
</p>
<h1
id="typewriter"
class="text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl"
></h1>
<div class="mt-10 flex items-center justify-center gap-x-6">
<a
href="mailto:trijayaprasetya@gmail.com"
target="_blank"
class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
>
Mail me
</a>
<a
href="https://www.linkedin.com/in/tri-jaya-prasetya/"
target="_blank"
class="text-sm font-semibold leading-6 text-gray-900"
>visit me on linkedIn <span aria-hidden="true">→</span></a
>
</div>
</div>
</div>
<div
class="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
aria-hidden="true"
>
<div
class="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#3498db] to-[#9089fc] opacity-50 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]"
style="
clip-path: polygon(
74.1% 44.1%,
100% 61.6%,
97.5% 26.9%,
85.5% 0.1%,
80.7% 2%,
72.5% 32.5%,
60.2% 62.4%,
52.4% 68.1%,
47.5% 58.3%,
45.2% 34.5%,
27.5% 76.7%,
0.1% 64.9%,
17.9% 100%,
27.6% 76.8%,
76.1% 97.7%,
74.1% 44.1%
);
"
></div>
</div>
</div>
</div>
</body>
</html>