From a5ba6e03aaa52527e457827c1dbe8c039eacd218 Mon Sep 17 00:00:00 2001
From: rxyhn <rxyhn.dev@gmail.com>
Date: Tue, 24 Sep 2024 12:02:01 +0700
Subject: [PATCH] chore: update components

---
 src/components/Button.astro |  2 +-
 src/components/Photo.tsx    |  2 +-
 src/pages/index.astro       | 45 +++++++++++--------------------------
 3 files changed, 15 insertions(+), 34 deletions(-)

diff --git a/src/components/Button.astro b/src/components/Button.astro
index 329af89..687a864 100644
--- a/src/components/Button.astro
+++ b/src/components/Button.astro
@@ -13,7 +13,7 @@ const { icon, href, label } = Astro.props;
 <a
   href={href}
   target="_blank"
-  class="group flex w-fit items-center gap-2 rounded border border-neutral-300 px-3 py-2 hover:bg-neutral-200 dark:border-neutral-700 dark:hover:bg-neutral-800"
+  class="group flex w-fit items-center rounded border border-neutral-300 px-3 py-2 hover:bg-neutral-200 dark:border-neutral-700 dark:hover:bg-neutral-800"
   aria-label={label}
 >
   <span
diff --git a/src/components/Photo.tsx b/src/components/Photo.tsx
index 59e6c68..80c9b9f 100644
--- a/src/components/Photo.tsx
+++ b/src/components/Photo.tsx
@@ -21,7 +21,7 @@ export default function Photo({ imageSrc, imageAlt }: PhotoProps) {
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           transition={{ delay: 2.4, duration: 0.4, ease: "easeInOut" }}
-          className="absolute h-[298px] w-[298px] p-10 xl:h-[498px] xl:w-[498px]"
+          className="absolute h-[298px] w-[298px] p-10 mix-blend-lighten xl:h-[498px] xl:w-[498px]"
         >
           <img
             src={imageSrc}
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 24b0ac2..dcd4e65 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,6 +1,5 @@
 ---
 import Button from "@/components/Button.astro";
-import Container from "@/components/Container.astro";
 import Photo from "@/components/Photo";
 import PageLayout from "@/layouts/PageLayout.astro";
 import { SITE } from "@/consts";
@@ -10,36 +9,19 @@ const { name, label, summary, socials } = basics;
 
 <PageLayout title="Home" description={SITE.DESCRIPTION}>
   <section class="h-full">
-    <Container size="xl">
-      <div class="my-24 flex h-screen items-center justify-center xl:my-0">
-        <div
-          class="flex flex-col-reverse items-center justify-between xl:flex-row"
-        >
+    <div class="flex h-full items-center justify-center">
+      <div class="container mx-auto">
+        <div class="flex flex-col items-center justify-between xl:flex-row">
           <!-- Text Section -->
-          <div class="w-full text-justify xl:w-1/2 xl:text-start">
-            <div class="flex flex-col items-start gap-2">
-              <p
-                class="text-md tracking-tight text-neutral-900 dark:text-neutral-50 xl:text-xl"
-              >
-                Hi, my name is
-              </p>
-              <h1
-                class="bg-gradient-to-b from-neutral-900 to-neutral-600 bg-clip-text text-start text-4xl font-bold tracking-tight text-transparent dark:from-neutral-50 dark:to-neutral-400 xl:text-8xl"
-              >
-                {name}.
-              </h1>
-            </div>
-            <p
-              class="text-md mt-2 font-medium text-black/75 dark:text-white/75 xl:text-xl"
-            >
-              {label}.
-            </p>
-            <p
-              class="text-md mt-2 font-medium text-black/75 dark:text-white/75 xl:text-xl"
+          <div class="order-2 text-center xl:order-none xl:text-left">
+            <span class="text-xl">Hi, my name is</span>
+            <h1 class="mb-6 text-[48px] font-bold leading-[1.1] xl:text-[80px]">
+              {name}
+            </h1>
+            <p class="mb-8 max-w-[500px] text-white/80">{label} {summary}</p>
+            <div
+              class="flex flex-row items-center justify-center gap-8 xl:justify-start"
             >
-              {summary}.
-            </p>
-            <div class="mt-5 flex flex-wrap items-center gap-6">
               {
                 socials.map((item) => (
                   <Button
@@ -51,13 +33,12 @@ const { name, label, summary, socials } = basics;
               }
             </div>
           </div>
-
           <!-- Photo Section -->
-          <div class="mb-8 xl:mb-0">
+          <div class="order-1 mb-8 xl:order-none xl:mb-0">
             <Photo client:load imageSrc="/assets/photo.png" imageAlt={name} />
           </div>
         </div>
       </div>
-    </Container>
+    </div>
   </section>
 </PageLayout>