aulianza · aulianza · Oct 14, 2023 · Oct 14, 2023 · Oct 14, 2023
diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
 <div align="center">
-  <h1>Personal Landing Page</h1>
+  <h1>aulianza.com</h1>
   <p>🌀 Personal landing page built with Next.js 13 App Router, TypeScript and Tailwind CSS.</p>
 </div>
 <br />
@@ -36,13 +36,13 @@ If you are interested in running this project on your local machine, you can do
 1. Clone using git
 
    ```bash
-   git clone https://github.com/aulianza/personal-landing-page
+   git clone https://github.com/aulianza/aulianza.com
    ```
 
 2. Using `create-next-app`
 
    ```bash
-   npx create-next-app -e https://github.com/aulianza/personal-landing-page project-name
+   npx create-next-app -e https://github.com/aulianza/aulianza.com project-name
    ```
 
 3. Using `degit`
@@ -53,8 +53,8 @@ If you are interested in running this project on your local machine, you can do
 
 4. Deploy to Vercel or Netlify, etc
 
-   [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/aulianza/personal-landing-page)
-   [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/aulianza/personal-landing-page)
+   [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/aulianza/aulianza.com)
+   [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/aulianza/aulianza.com)
 
 ### 2. Install dependencies
 

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -6,7 +6,7 @@
   --foreground-rgb: 0, 0, 0;
   --background-start-rgb: 214, 219, 220;
   --background-end-rgb: 255, 255, 255;
-  --rsbs-max-w: 36rem;
+  --rsbs-max-w: 30rem;
   --rsbs-ml: auto;
   --rsbs-mr: auto;
 }

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import type { Metadata } from "next";
 import { Sora } from "next/font/google";
 import Script from "next/script";
@@ -7,7 +8,7 @@ import "./globals.css";
 const sora = Sora({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: "Ryan Aulia - Aulianza Landing Page",
+  title: "Ryan Aulia - Software Engineer",
   description: "My Personal Landing Page",
   icons: "/images/aulianza.webp",
   // openGraph: {
@@ -26,11 +27,13 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <Script
-        src="https://umami.aulianza.id/script.js"
+        src="https://analytics.aulianza.com/script.js"
         data-website-id="c2ee1939-526f-4607-9cfb-cc19817333cf"
       />
-      <body className={sora.className}>
-        <div className="max-w-xl mx-auto">{children}</div>
+      <body className={clsx(sora.className)}>
+        <div className="max-w-[480px] mx-auto bg-white md:shadow-xl md:rounded-lg">
+          {children}
+        </div>
       </body>
     </html>
   );

diff --git a/src/common/components/Breakline.tsx b/src/common/components/Breakline.tsx
@@ -1,6 +1,10 @@
 const Breakline = () => {
   return (
-    <div className="border-b mx-3 pt-1 border-solid border-neutral-300 opacity-50"></div>
+    <div
+      className="border-b mx-3 pt-1 border-solid border-neutral-200 opacity-50"
+      data-aos="flip-down"
+      data-aos-duration="1000"
+    ></div>
   );
 };
 

diff --git a/src/common/components/Footer.tsx b/src/common/components/Footer.tsx
@@ -1,6 +1,6 @@
 const Footer = () => {
   return (
-    <div className="text-center text-neutral-500">
+    <div className="text-center text-sm pb-3 md:p-0 text-neutral-500">
       <div>© {new Date().getFullYear()} by aulianza</div>
     </div>
   );

diff --git a/src/common/components/PageWrapper.tsx b/src/common/components/PageWrapper.tsx
@@ -15,7 +15,7 @@ const PageWrapper = ({ children }: { children: React.ReactNode }) => {
     });
   }, []);
 
-  return <main>{children}</main>;
+  return <main className="p-6 md:my-3 space-y-5">{children}</main>;
 };
 
 export default PageWrapper;
diff --git a/src/common/constant/links.tsx b/src/common/constant/links.tsx
@@ -0,0 +1,47 @@
+import {
+  BiBriefcaseAlt2 as BusinessIcon,
+  BiCalendar as ChitChatIcon,
+  BiCoffee as CoffeeIcon,
+  BiFile as PDFIcon,
+  BiPin as WebsiteIcon,
+} from "react-icons/bi";
+
+import { LinkProps } from "../types/link";
+
+export const LINKS: LinkProps[] = [
+  {
+    label: "Personal Website & Portfolio",
+    icon: <WebsiteIcon size={21} className="text-neutral-600" />,
+    href: "https://aulianza.id",
+    className: "bg-sky-600",
+    target: "_blank",
+  },
+  {
+    label: "Resume & Curriculum Vitae",
+    icon: <PDFIcon size={21} className="text-neutral-600" />,
+    href: "https://bit.ly/cv-aulianza",
+    className: "bg-emerald-600",
+    target: "_self",
+  },
+  {
+    label: "1 on 1 Chit Chat Session",
+    icon: <ChitChatIcon size={21} className="text-neutral-600" />,
+    href: "https://cal.com/aulianza/schedule",
+    className: "bg-rose-600",
+    target: "_blank",
+  },
+  {
+    label: "PT Flexcode Space Teknologi",
+    icon: <BusinessIcon size={21} className="text-neutral-600" />,
+    href: "https://flexcode.co.id",
+    className: "bg-violet-800",
+    target: "_blank",
+  },
+  {
+    label: "Buy me a Cup of Coffee",
+    icon: <CoffeeIcon size={21} className="text-neutral-600" />,
+    href: "#",
+    className: "bg-neutral-800",
+    target: "",
+  },
+];
diff --git a/src/common/constant/socials.tsx b/src/common/constant/socials.tsx
@@ -1,11 +1,10 @@
-import { BiAt as ThreadsIcon } from "react-icons/bi";
 import {
   BsGithub as GithubIcon,
   BsInstagram as InstagramIcon,
   BsLinkedin as LinkedinIcon,
   BsRssFill as BlogIcon,
-  BsTwitter as TwitterIcon,
 } from "react-icons/bs";
+import { RiTwitterXFill as TwitterXIcon } from "react-icons/ri";
 
 import { SocialItemProps } from "../types/socials";
 
@@ -19,7 +18,7 @@ export const SOCIAL_MEDIA: SocialItemProps[] = [
     isShow: true,
     isExternal: true,
     eventName: "Social: Github",
-    className: "hover:text-black",
+    className: "hover:bg-black",
   },
   {
     title: "Linkedin",
@@ -28,16 +27,16 @@ export const SOCIAL_MEDIA: SocialItemProps[] = [
     isShow: true,
     isExternal: true,
     eventName: "Social: Linkedin",
-    className: "hover:text-blue-700",
+    className: "hover:bg-blue-600",
   },
   {
-    title: "Twitter",
-    href: "https://twitter.com/aulianzaa",
-    icon: <TwitterIcon size={iconSize} />,
+    title: "X",
+    href: "https://x.com/aulianzaa",
+    icon: <TwitterXIcon size={iconSize} />,
     isShow: true,
     isExternal: true,
-    eventName: "Social: Twitter",
-    className: "hover:text-sky-500",
+    eventName: "Social: X",
+    className: "hover:bg-black",
   },
   {
     title: "Instagram",
@@ -46,16 +45,7 @@ export const SOCIAL_MEDIA: SocialItemProps[] = [
     isShow: true,
     isExternal: true,
     eventName: "Social: Instagram",
-    className: "hover:text-amber-800",
-  },
-  {
-    title: "Threads",
-    href: "https://www.threads.net/@aulianza",
-    icon: <ThreadsIcon size={iconSize} />,
-    isShow: true,
-    isExternal: true,
-    eventName: "Social: Threads",
-    className: "hover:text-black",
+    className: "hover:bg-amber-700",
   },
   {
     title: "Blog",
@@ -64,6 +54,6 @@ export const SOCIAL_MEDIA: SocialItemProps[] = [
     isShow: true,
     isExternal: true,
     eventName: "Social: Blog",
-    className: "hover:text-orange-600",
+    className: "hover:bg-orange-500",
   },
 ];
diff --git a/src/modules/homepage/components/ButtonLink.tsx b/src/modules/homepage/components/ButtonLink.tsx
@@ -1,31 +1,14 @@
 "use client";
 
-import clsx from "clsx";
+import { clsx } from "clsx";
 import { useState } from "react";
-import { BiCoffee as CoffeeIcon, BiRocket as RocketIcon } from "react-icons/bi";
+import { PiLinkBreakDuotone as LinkIcon } from "react-icons/pi";
 
 import BottomSheet from "@/common/components/BottomSheet";
-import { LinkProps } from "@/common/types/link";
+import { LINKS } from "@/common/constant/links";
 
 import BuyACoffee from "./BuyACoffee";
 
-const LINKS: LinkProps[] = [
-  {
-    label: "Website & Portfolio",
-    icon: <RocketIcon size={20} />,
-    href: "https://aulianza.id",
-    className: "bg-white",
-    target: "_blank",
-  },
-  {
-    label: "Buy me a Coffee",
-    icon: <CoffeeIcon size={20} />,
-    href: "#",
-    className: "bg-violet-600 text-white",
-    target: "_self",
-  },
-];
-
 const ButtonLink = () => {
   const [isBottomSheetOpen, setBottomSheetOpen] = useState(false);
 
@@ -39,25 +22,75 @@ const ButtonLink = () => {
 
   return (
     <>
-      <div className="flex flex-col md:flex-row gap-3 items-center justify-center py-3">
+      <div
+        className="flex items-center gap-2 px-3"
+        data-aos="flip-down"
+        data-aos-duration="1000"
+      >
+        <LinkIcon size={24} />
+        <h2 className="font-medium text-neutral-600">Links</h2>
+      </div>
+      <div className="flex flex-col w-full gap-y-3">
         {LINKS?.map((item, index) => (
           <button
             key={index}
-            className={clsx(
-              "flex items-center justify-center gap-x-2 py-3 px-5 rounded-xl hover:gap-x-3 transition-all duration-300 w-full md:w-max shadow-sm",
-              item.className,
-            )}
             onClick={() => handleClick(item.href, item.target)}
+            className="relative inline-flex items-center justify-start py-4 pl-4 pr-14 overflow-hidden font-medium text-neutral-800 transition-all duration-150 ease-in-out rounded-lg hover:pl-12 hover:pr-6 bg-white group border shadow-sm"
+            data-aos="fade-down"
+            data-aos-duration="1000"
+            data-aos-delay={index * 100}
           >
-            {item.icon}
-            <span>{item.label}</span>
+            <span
+              className={clsx(
+                "absolute bottom-0 left-0 w-full h-0.5 transition-all duration-150 ease-in-out group-hover:h-full",
+                item.className,
+              )}
+            ></span>
+            <span className="absolute right-0 pr-4 duration-200 ease-out group-hover:translate-x-12">
+              <svg
+                className="w-5 h-5 text-green-500"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M14 5l7 7m0 0l-7 7m7-7H3"
+                ></path>
+              </svg>
+            </span>
+            <span className="absolute left-0 pl-4 -translate-x-12 group-hover:translate-x-0 ease-out duration-200">
+              <svg
+                className="w-5 h-5 text-green-300"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M14 5l7 7m0 0l-7 7m7-7H3"
+                ></path>
+              </svg>
+            </span>
+            <div className="flex items-center gap-3">
+              <span className="group-hover:hidden">{item.icon}</span>
+              <span className="relative w-full text-[15px] md:text-base text-left transition-colors duration-200 ease-in-out group-hover:text-white">
+                {item.label}
+              </span>
+            </div>
           </button>
         ))}
       </div>
 
       <BottomSheet
         key={isBottomSheetOpen ? "bottom-sheet-open" : "bottom-sheet-closed"}
-        title="Buy me a Coffee"
+        title="Buy me a Cup of Coffee"
         isOpen={isBottomSheetOpen}
         onClose={() => setBottomSheetOpen(false)}
       >