fix: layout

src/components/BaseHead.astro

@@ -2,7 +2,6 @@
 interface Props {
   title: string;
   description: string;
-  image?: string;
 }
 
 const canonicalURL = new URL(Astro.url.pathname, Astro.site);

src/components/Card.astro

@@ -1,14 +1,13 @@
 ---
-export interface CardProps {
+type Props = {
   url: string;
   description: string;
   highlights: string[];
   name: string;
   technologies: string[];
-}
+};
 
-const { url, name, description, highlights, technologies } =
-  Astro.props as CardProps;
+const { url, name, description, highlights, technologies } = Astro.props;
 ---
 
 <a

src/components/Heading.astro

@@ -1,5 +1,11 @@
 ---
-const { title, description } = Astro.props;
+type Props = {
+  title: string;
+  description: string;
+  highlight?: string[];
+};
+
+const { title, description, highlight } = Astro.props;
 ---
 
 <header class="flex flex-col items-center gap-4 text-center">
@@ -9,8 +15,21 @@ const { title, description } = Astro.props;
     >
       {title}.
     </h1>
-    <h2 class="mt-2 text-justify text-sm font-medium lg:text-lg">
+    <h2
+      class="mt-2 text-justify text-sm leading-6 sm:mt-4 sm:text-base lg:mt-6 lg:text-lg"
+    >
       {description}
     </h2>
+    {
+      highlight && (
+        <div class="flex flex-col gap-2">
+          {highlight.map((item) => (
+            <h2 class="mt-2 text-justify text-sm leading-6 sm:mt-4 sm:text-base lg:mt-6 lg:text-lg">
+              {item}
+            </h2>
+          ))}
+        </div>
+      )
+    }
   </div>
 </header>

src/components/Section.astro

@@ -1,12 +1,13 @@
 ---
+type Props = {
+  className: string;
+  title: string;
+};
+
 const { className, title } = Astro.props;
 ---
 
-<section class:list={["flex flex-col gap-4", className]}>
-  {
-    title && (
-      <h2 class="text-sm font-bold uppercase tracking-widest">{title}</h2>
-    )
-  }
+<section class:list={["flex flex-col gap-2", className]}>
+  {title && <h2 class="font-semibold text-white">{title}</h2>}
   <slot />
 </section>

src/components/sections/Awards.astro

@@ -4,7 +4,7 @@ import { awards } from "@cv";
 ---
 
 <Section className={Astro.props.className} title="Awards">
-  <ul class="space-y-4 py-3">
+  <ul class="space-y-4">
     {
       awards.map(({ title, date, awarder }) => {
         return (

src/components/sections/Education.astro

@@ -4,7 +4,7 @@ import { education } from "@cv";
 ---
 
 <Section className={Astro.props.className} title="Education">
-  <ul class="space-y-4 py-3">
+  <ul class="space-y-4">
     {
       education.map(
         ({ institution, startDate, endDate, area, url, summary }) => {

src/components/sections/Experience.astro

@@ -32,11 +32,11 @@ import ExpandButton from "../ExpandButton";
                 </header>
                 <div class="relative flex flex-col pb-6 before:absolute before:-ml-6 before:mt-2 before:h-full before:w-px before:bg-neutral-500 sm:col-span-10">
                   <div class="absolute mt-2 h-2 w-2 -translate-x-[1.71rem] rounded-full bg-white ring ring-white" />
-                  <div class="flex flex-col pb-6">
+                  <div class="flex flex-col">
                     <h3 class="text-left text-base font-medium leading-snug text-white">
                       <div class="inline-flex flex-wrap items-center">
                         <span>{position}</span>
-                        <span class="mx-1.5">@</span>
+                        <span class="mx-1">@</span>
                         {url ? (
                           <a
                             class="inline-flex items-center hover:text-white/75"
@@ -65,7 +65,7 @@ import ExpandButton from "../ExpandButton";
                       </div>
                     </h3>
                     {(location || location_type) && (
-                      <p class="mt-1 text-sm">
+                      <p class="mt-2 text-sm">
                         {location}
                         {location && location_type && " - "}
                         {location_type}

src/pages/about.astro

@@ -12,22 +12,12 @@ import { SITE } from "@/consts";
   <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.",
+    ]}
   />
-  <p
-    class="mt-2 text-justify text-sm leading-6 sm:mt-4 sm:text-base lg:mt-6 lg:text-lg"
-  >
-    My passion for crafting software that turns ideas into reality through
-    elegant and intuitive interfaces.
-  </p>
-  <p
-    class="mb-8 mt-2 text-justify text-sm leading-6 sm:mt-4 sm:text-base lg:mt-6 lg:text-lg"
-  >
-    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.
-  </p>
-
-  <div class="space-y-12 md:col-span-4">
+  <div class="mt-8 flex flex-col gap-8">
     <Experience />
     <Skills />
     <Awards class="order-first" />