diff --git a/src/pages/about.astro b/src/pages/about.astro
index 76049e2..35af202 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -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>
