fix: pages layout

src/pages/about.astro

@@ -9,18 +9,20 @@ import { SITE } from "@/consts";
 ---
 
 <Layout title="About" description={SITE.DESCRIPTION}>
-  <Heading
-    title="About Me"
-    description="Hello 👋 I'm Rayhan Kafi Pratama, a bachelor of computer science student."
-    highlight={[
-      "My passion for crafting software that turns ideas into reality through elegant and intuitive interfaces.",
-      "I place a strong emphasis on creating seamless experiences, robust architecture, and high-quality code. I'm always eager to enhance my skills and contribute to meaningful and impactful projects.",
-    ]}
-  />
-  <div class="mt-8 flex flex-col gap-8">
-    <Experience />
-    <Skills />
-    <Awards class="order-first" />
-    <Education class="order-first" />
+  <div class="flex h-screen flex-col items-center justify-center">
+    <Heading
+      title="About Me"
+      description="Hello 👋 I'm Rayhan Kafi Pratama, a bachelor of computer science student."
+      highlight={[
+        "My passion for crafting software that turns ideas into reality through elegant and intuitive interfaces.",
+        "I place a strong emphasis on creating seamless experiences, robust architecture, and high-quality code. I'm always eager to enhance my skills and contribute to meaningful and impactful projects.",
+      ]}
+    />
+    <div class="mt-8 flex flex-col gap-8">
+      <Experience />
+      <Skills />
+      <Awards class="order-first" />
+      <Education class="order-first" />
+    </div>
   </div>
 </Layout>

src/pages/index.astro

@@ -16,12 +16,12 @@ const { name, label, summary, socials } = basics;
       <div class="w-full text-justify md:w-1/2 md:text-start">
         <div class="flex flex-col items-start gap-2">
           <h1
-            class="text-sm tracking-tight text-neutral-900 lg:text-lg dark:text-neutral-50"
+            class="text-sm tracking-tight text-neutral-900 dark:text-neutral-50 lg:text-lg"
           >
             Hi, my name is
           </h1>
           <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 lg:text-5xl dark:from-neutral-50 dark:to-neutral-400"
+            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 lg:text-5xl"
           >
             {name}.
           </h1>

src/pages/projects.astro

@@ -7,21 +7,23 @@ import { projects } from "@cv";
 ---
 
 <Layout title="Projects" description={SITE.DESCRIPTION}>
-  <Heading
-    title="My Projects"
-    description="Explore a collection of my projects here. As an open-source enthusiast, I'm passionate about collaboration and knowledge-sharing."
-  />
-  <div class="mt-4 grid w-full grid-cols-1 gap-4 sm:grid-cols-2">
-    {
-      projects.map(({ url, name, description, highlights, technologies }) => (
-        <Card
-          url={url}
-          description={description}
-          highlights={highlights}
-          name={name}
-          technologies={technologies}
-        />
-      ))
-    }
+  <div class="flex h-screen flex-col items-center justify-center">
+    <Heading
+      title="My Projects"
+      description="Explore a collection of my projects here. As an open-source enthusiast, I'm passionate about collaboration and knowledge-sharing."
+    />
+    <div class="mt-4 grid w-full grid-cols-1 gap-4 sm:grid-cols-2">
+      {
+        projects.map(({ url, name, description, highlights, technologies }) => (
+          <Card
+            url={url}
+            description={description}
+            highlights={highlights}
+            name={name}
+            technologies={technologies}
+          />
+        ))
+      }
+    </div>
   </div>
 </Layout>