chore: update layout

raexera · Sep 12, 2024 · c89c3d6 · c89c3d6
1 parent 4bcd5bc
commit c89c3d6
Show file tree

Hide file tree

Showing 7 changed files with 127 additions and 101 deletions.
diff --git a/src/layouts/BottomLayout.astro b/src/layouts/BottomLayout.astro
@@ -0,0 +1,9 @@
+---
+import Container from "@/components/Container.astro";
+---
+
+<div class="flex-1 py-5">
+  <Container size="lg">
+    <slot />
+  </Container>
+</div>
diff --git a/src/layouts/Layout.astro → src/layouts/PageLayout.astro b/src/layouts/Layout.astro → src/layouts/PageLayout.astro
@@ -1,7 +1,6 @@
 ---
 import "@/styles/global.css";
 import BaseHead from "@/components/BaseHead.astro";
-import Container from "@/components/Container.astro";
 import Header from "@/components/Header.astro";
 import Drawer from "@/components/Drawer.astro";
 import Footer from "@/components/Footer.astro";
@@ -16,7 +15,7 @@ import { SITE } from "@/consts";
   <head>
     <BaseHead title={`${title} - ${SITE.TITLE}`} description={description} />
   </head>
-  <body class="flex min-h-screen flex-col">
+  <body>
     <Boxes client:load />
     <Starry
       client:idle
@@ -28,15 +27,11 @@ import { SITE } from "@/consts";
       particleDensity={100}
       className="fixed inset-0 z-0"
     />
-    <div class="relative z-10 flex min-h-screen flex-col">
-      <Header />
-      <Drawer />
-      <main class="flex-grow">
-        <Container size="lg">
-          <slot />
-        </Container>
-      </main>
-      <Footer />
-    </div>
+    <Header />
+    <Drawer />
+    <main class="z-10">
+      <slot />
+    </main>
+    <Footer />
   </body>
 </html>
diff --git a/src/layouts/TopLayout.astro b/src/layouts/TopLayout.astro
@@ -0,0 +1,9 @@
+---
+import Container from "@/components/Container.astro";
+---
+
+<div class="pb-5 pt-36">
+  <Container size="lg">
+    <slot />
+  </Container>
+</div>
diff --git a/src/pages/about.astro b/src/pages/about.astro
@@ -1,26 +1,32 @@
 ---
+import Awards from "@/components/sections/Awards.astro";
 import Heading from "@/components/Heading.astro";
-import Layout from "@/layouts/Layout.astro";
-import Experience from "@/components/sections/Experience.astro";
 import Education from "@/components/sections/Education.astro";
-import Awards from "@/components/sections/Awards.astro";
+import Experience from "@/components/sections/Experience.astro";
 import Skills from "@/components/sections/Skills.astro";
+import PageLayout from "@/layouts/PageLayout.astro";
+import TopLayout from "@/layouts/TopLayout.astro";
+import BottomLayout from "@/layouts/BottomLayout.astro";
 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>
-</Layout>
+<PageLayout title="About" description={SITE.DESCRIPTION}>
+  <TopLayout>
+    <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.",
+      ]}
+    />
+  </TopLayout>
+  <BottomLayout>
+    <div class="mt-8 flex flex-col gap-8">
+      <Experience />
+      <Skills />
+      <Awards class="order-first" />
+      <Education class="order-first" />
+    </div>
+  </BottomLayout>
+</PageLayout>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1,59 +1,62 @@
 ---
 import Button from "@/components/Button.astro";
-import Layout from "@/layouts/Layout.astro";
+import Container from "@/components/Container.astro";
+import PageLayout from "@/layouts/PageLayout.astro";
 import PFP from "@/assets/images/pfp.png";
 import { Image } from "astro:assets";
 import { SITE } from "@/consts";
 import { basics } from "@cv";
 const { name, label, summary, socials } = basics;
 ---
 
-<Layout title="Home" description={SITE.DESCRIPTION}>
-  <div class="flex h-screen items-center justify-center">
-    <div
-      class="flex flex-col-reverse gap-8 md:flex-row md:items-center md:justify-between"
-    >
-      <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"
+<PageLayout title="Home" description={SITE.DESCRIPTION}>
+  <Container size="lg">
+    <div class="flex h-screen items-center justify-center">
+      <div
+        class="flex flex-col-reverse gap-8 md:flex-row md:items-center md:justify-between"
+      >
+        <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 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 dark:from-neutral-50 dark:to-neutral-400 lg:text-5xl"
+            >
+              {name}.
+            </h1>
+          </div>
+          <h2 class="mt-2 text-sm font-medium lg:text-lg">{label}.</h2>
+          <h2 class="mt-2 text-sm font-medium lg:text-lg">{summary}.</h2>
+          <div
+            class="mt-5 flex flex-wrap items-center justify-center gap-2 md:justify-start"
           >
-            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"
-          >
-            {name}.
-          </h1>
-        </div>
-        <h2 class="mt-2 text-sm font-medium lg:text-lg">{label}.</h2>
-        <h2 class="mt-2 text-sm font-medium lg:text-lg">{summary}.</h2>
-        <div
-          class="mt-5 flex flex-wrap items-center justify-center gap-2 md:justify-start"
-        >
-          {
-            socials.map((item) => (
-              <Button
-                icon={item.network}
-                href={item.url}
-                label="Social Media Link"
-              />
-            ))
-          }
+            {
+              socials.map((item) => (
+                <Button
+                  icon={item.network}
+                  href={item.url}
+                  label="Social Media Link"
+                />
+              ))
+            }
+          </div>
         </div>
-      </div>
-      <div class="w-full md:w-auto md:flex-shrink-0">
-        <div
-          class="mx-auto w-full max-w-xs rounded-3xl border border-black/25 bg-white p-10 dark:border-white/25 dark:bg-black"
-        >
-          <Image
-            src={PFP}
-            alt="Rayhan Kafi Pratama"
-            loading="eager"
-            class="h-auto w-full rounded-xl object-cover"
-          />
+        <div class="w-full md:w-auto md:flex-shrink-0">
+          <div
+            class="mx-auto w-full max-w-xs rounded-3xl border border-black/25 bg-white p-10 dark:border-white/25 dark:bg-black"
+          >
+            <Image
+              src={PFP}
+              alt="Rayhan Kafi Pratama"
+              loading="eager"
+              class="h-auto w-full rounded-xl object-cover"
+            />
+          </div>
         </div>
       </div>
     </div>
-  </div>
-</Layout>
+  </Container>
+</PageLayout>
diff --git a/src/pages/projects.astro b/src/pages/projects.astro
@@ -1,27 +1,33 @@
 ---
 import Card from "@/components/Card.astro";
-import Layout from "@/layouts/Layout.astro";
 import Heading from "@/components/Heading.astro";
+import PageLayout from "@/layouts/PageLayout.astro";
+import TopLayout from "@/layouts/TopLayout.astro";
+import BottomLayout from "@/layouts/BottomLayout.astro";
 import { SITE } from "@/consts";
 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>
-</Layout>
+<PageLayout title="Projects" description={SITE.DESCRIPTION}>
+  <TopLayout>
+    <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."
+    />
+  </TopLayout>
+  <BottomLayout>
+    <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>
+  </BottomLayout>
+</PageLayout>
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -34,17 +34,15 @@ html.dark {
 
 html,
 body {
-  @apply h-full w-full antialiased;
-  @apply bg-white dark:bg-black;
-  @apply text-black/75 dark:text-white/75;
+  @apply h-full w-full bg-white text-black/75 antialiased dark:bg-black dark:text-white/75;
 }
 
 body {
-  @apply flex min-h-screen flex-col;
+  @apply relative flex flex-col;
 }
 
 main {
-  @apply flex-grow py-16;
+  @apply flex flex-1 flex-col;
 }
 
 header {