Add global styles and enhance about page with skill presentation

2026-05-12 15:21:19 +09:00 · 2025-12-21 17:08:28 +07:00
parent f3f974491d
commit a383f01141
2 changed files with 38 additions and 1 deletions
@@ -1,4 +1,6 @@
 ---
+import "../styles/global.css";
+
 const pageTitle = "About Me";
 const identity = {
  firstName: "Thuan",
@@ -19,6 +21,9 @@ const skills = [
 const happy = true;
 const finished = false;
 const goal = 3;
+const skillColor = "crimson";
+const fontWeight = "bold";
+const textCase = "uppercase";
 ---

 <html lang='en'>
@@ -28,6 +33,17 @@ const goal = 3;
    <meta name='viewport' content='width=device-width' />
    <meta name='generator' content={Astro.generator} />
    <title>{pageTitle}</title>
+    <style define:vars={{ skillColor, fontWeight, textCase }}>
+      h1 {
+        color: purple;
+        font-size: 4rem;
+      }
+      .skill {
+        color: var(--skillColor);
+        font-weight: var(--fontWeight);
+        text-transform: var(--textCase);
+      }
+    </style>
  </head>
  <body>
    <a href='/'>Home</a>
@@ -62,7 +78,7 @@ const goal = 3;
    </ul>
    <p>My skills are:</p>
    <ul>
-      {skills.map((skill) => <li>{skill}</li>)}
+      {skills.map((skill) => <li class='skill'>{skill}</li>)}
    </ul>

    {happy && <p>I am happy to be learning Astro!</p>}
@@ -0,0 +1,21 @@
+html {
+  background-color: #f1f5f9;
+  font-family: sans-serif;
+}
+
+body {
+  margin: 0 auto;
+  width: 100%;
+  max-width: 80ch;
+  padding: 1rem;
+  line-height: 1.5;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+h1 {
+  margin: 1rem 0;
+  font-size: 2.5rem;
+}