Update about page with personal details and skills

2026-05-12 15:21:19 +09:00 · 2025-12-21 17:01:42 +07:00
parent 099f60e9af
commit f3f974491d
1 changed files with 53 additions and 3 deletions
@@ -1,5 +1,24 @@
 ---
-
+const pageTitle = "About Me";
+const identity = {
+  firstName: "Thuan",
+  lastName: "Bui",
+  country: "Japan",
+  occupation: "Web Developer",
+  hobbies: ["coding", "running", "traveling"],
+};
+const skills = [
+  "HTML",
+  "CSS",
+  "Laravel",
+  "WordPress",
+  "JavaScript",
+  "Astro",
+  "React",
+];
+const happy = true;
+const finished = false;
+const goal = 3;
 ---

 <html lang='en'>
@@ -8,13 +27,13 @@
    <link rel='icon' type='image/svg+xml' href='/favicon.svg' />
    <meta name='viewport' content='width=device-width' />
    <meta name='generator' content={Astro.generator} />
-    <title>About</title>
+    <title>{pageTitle}</title>
  </head>
  <body>
    <a href='/'>Home</a>
    <a href='/about/'>About</a>
    <a href='/blog/'>Blog</a>
-    <h1>About Me</h1>
+    <h1>{pageTitle}</h1>
    <h2>... and my new Astro site!</h2>

    <p>
@@ -26,5 +45,36 @@
      This site will update as I complete more of the tutorial, so keep checking
      back and see how my journey is going!
    </p>
+    <p>Here are a few facts about me:</p>
+    <ul>
+      <li>My name is {identity.firstName} {identity.lastName}.</li>
+      <li>
+        I live in {identity.country} and I work as a {identity.occupation}.
+      </li>
+      {
+        identity.hobbies.length >= 2 && (
+          <li>
+            Two of my hobbies are: {identity.hobbies[0]} and{" "}
+            {identity.hobbies[1]}
+          </li>
+        )
+      }
+    </ul>
+    <p>My skills are:</p>
+    <ul>
+      {skills.map((skill) => <li>{skill}</li>)}
+    </ul>
+
+    {happy && <p>I am happy to be learning Astro!</p>}
+
+    {finished && <p>I finished this tutorial!</p>}
+
+    {
+      goal === 3 ? (
+        <p>My goal is to finish in 3 days.</p>
+      ) : (
+        <p>My goal is not 3 days.</p>
+      )
+    }
  </body>
 </html>