feat(component): Add bio to show user info

Show its icon, name and description.

src/components/Bio/Bio.astro

@@ -0,0 +1,19 @@
+---
+import "../../styles/global.css";
+import "./style.css";
+
+export type Props = {
+  name: string;
+  description: string;
+  icon: string;
+};
+const props = Astro.props;
+---
+
+<div id="bio">
+  <div id="profile">
+    <img src={props.icon} alt="icon" loading="lazy" decoding="async" />
+    <span id="name">{props.name}</span>
+  </div>
+  <span id="description">{props.description}</span>
+</div>

src/components/Bio/style.css

@@ -0,0 +1,36 @@
+#bio {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 0.3rem;
+}
+
+#profile {
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+}
+
+img {
+  width: 6rem;
+  height: auto;
+}
+
+span {
+  font-family: "LINE Seed JP" sans-serif;
+  font-style: normal;
+  line-height: normal;
+  color: var(--foreground);
+}
+
+#name {
+  font-size: 2.5rem;
+  font-weight: bold;
+}
+
+#description {
+  font-size: 0.9rem;
+  font-weight: normal;
+  white-space: pre-line;
+}