chore: update components and contents

README.md

@@ -35,22 +35,20 @@ Inside of your Astro project, you'll see the following folders and files:
 ├── README.md
 ├── src
 │   ├── components
+│   │   ├── Awards.astro
 │   │   ├── Boxes.tsx
 │   │   ├── Button.astro
 │   │   ├── Card.astro
-│   │   ├── Container.astro
+│   │   ├── Education.astro
 │   │   ├── ExpandButton.tsx
+│   │   ├── Experience.astro
 │   │   ├── Footer.astro
 │   │   ├── Header.astro
 │   │   ├── Heading.astro
 │   │   ├── Navbar.astro
 │   │   ├── Photo.tsx
 │   │   ├── Section.astro
-│   │   ├── sections
-│   │   │   ├── Awards.astro
-│   │   │   ├── Education.astro
-│   │   │   ├── Experience.astro
-│   │   │   └── Skills.astro
+│   │   ├── Skills.astro
 │   │   ├── Starry.tsx
 │   │   └── ThemeToggle.astro
 │   ├── consts.ts
@@ -66,9 +64,7 @@ Inside of your Astro project, you'll see the following folders and files:
 │   │   └── telegram.svg
 │   ├── layouts
 │   │   ├── BaseHead.astro
-│   │   ├── BaseLayout.astro
-│   │   ├── BottomLayout.astro
-│   │   └── TopLayout.astro
+│   │   └── BaseLayout.astro
 │   ├── lib
 │   │   └── utils.ts
 │   ├── pages
@@ -81,7 +77,7 @@ Inside of your Astro project, you'll see the following folders and files:
 ├── tailwind.config.mjs
 └── tsconfig.json
 
-12 directories, 52 files
+11 directories, 49 files
 ```
 
 Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.

cv.json

@@ -2,8 +2,10 @@
   "basics": {
     "name": "Rayhan Kafi Pratama",
     "nickname": "rxyhn",
-    "label": "Computer Science Student at Bina Nusantara University",
-    "summary": "Passionate about software development, problem-solving, and continuous learning. Strong advocate for clean code, best practices, and agile methodologies",
+    "label": "Undergraduate of Computer Science at Bina Nusantara University.",
+    "roles": ["Back-End Developer", "DevOps Engineer"],
+    "summary": "Crafting scalable and resilient systems that turn ideas into reality. I excel in seamless integration, clean code, and robust infrastructure. Committed to continuous learning, I deliver high-performance solutions that optimize reliability and deliver meaningful impact.",
+
     "location": {
       "city": "Jakarta",
       "countryCode": "ID",

src/components/sections/Awards.astro → src/components/Awards.astro

@@ -1,5 +1,5 @@
 ---
-import Section from "../Section.astro";
+import Section from "./Section.astro";
 import { awards } from "@cv";
 ---
 

src/components/sections/Education.astro → src/components/Education.astro

@@ -1,5 +1,5 @@
 ---
-import Section from "../Section.astro";
+import Section from "./Section.astro";
 import { education } from "@cv";
 ---
 

src/components/sections/Experience.astro → src/components/Experience.astro

@@ -1,6 +1,6 @@
 ---
-import ExpandButton from "../ExpandButton";
-import Section from "../Section.astro";
+import ExpandButton from "./ExpandButton";
+import Section from "./Section.astro";
 import { work } from "@cv";
 ---
 

src/components/Heading.astro

@@ -1,25 +1,11 @@
 ---
 type Props = {
   title: string;
-  description: string;
-  highlight?: string[];
 };
 
-const { title, description, highlight } = Astro.props;
+const { title } = Astro.props;
 ---
 
 <header class="flex flex-col items-center sm:mt-24">
   <h1 class="mb-6 text-center">{title}</h1>
-  <p class="mb-6 text-justify text-black/80 dark:text-white/80">
-    {description}
-  </p>
-  {
-    highlight && (
-      <div class="mb-6">
-        {highlight.map((item) => (
-          <p class="text-justify text-black/80 dark:text-white/80">{item}</p>
-        ))}
-      </div>
-    )
-  }
 </header>

src/components/sections/Skills.astro → src/components/Skills.astro

@@ -1,5 +1,5 @@
 ---
-import Section from "../Section.astro";
+import Section from "./Section.astro";
 import { skills } from "@cv";
 const { technologies, programming_languages } = skills;
 ---

src/pages/about.astro

@@ -1,23 +1,16 @@
 ---
-import Awards from "@/components/sections/Awards.astro";
+import Awards from "@/components/Awards.astro";
 import Heading from "@/components/Heading.astro";
-import Education from "@/components/sections/Education.astro";
-import Experience from "@/components/sections/Experience.astro";
-import Skills from "@/components/sections/Skills.astro";
+import Education from "@/components/Education.astro";
+import Experience from "@/components/Experience.astro";
+import Skills from "@/components/Skills.astro";
 import BaseLayout from "@/layouts/BaseLayout.astro";
 import { SITE } from "@/consts";
 ---
 
 <BaseLayout title="About" description={SITE.DESCRIPTION}>
   <div class="container mx-auto my-24 xl:my-5">
-    <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.",
-      ]}
-    />
+    <Heading title="About Me" />
     <div class="space-y-8 md:col-span-4">
       <Experience />
       <Skills />

src/pages/index.astro

@@ -21,10 +21,14 @@ const { name, label, summary, socials } = basics;
             <h1 class="mb-6">
               {name}
             </h1>
-            <p class="mb-8 max-w-[500px] text-black/80 dark:text-white/80">
-              {label}
-              {summary}
-            </p>
+            <div class="mb-8 flex max-w-[500px] flex-col gap-2">
+              <p class="text-black/80 dark:text-white/80">
+                {label}
+              </p>
+              <p class="text-black/80 dark:text-white/80">
+                {summary}
+              </p>
+            </div>
             <div
               class="flex flex-row items-center justify-center gap-6 xl:justify-start"
             >

src/pages/projects.astro

@@ -8,10 +8,7 @@ import { projects } from "@cv";
 
 <BaseLayout title="Projects" description={SITE.DESCRIPTION}>
   <div class="container mx-auto my-24 xl:my-5">
-    <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."
-    />
+    <Heading title="My Projects" />
     <div class="grid w-full grid-cols-1 gap-5 sm:grid-cols-2">
       {
         projects.map(({ url, name, description, highlights, technologies }) => (