add aboutme webcomponents

src/components/aboutme.js

@@ -0,0 +1,80 @@
+const id = 't0yohei';
+
+const template = `
+  <div class="main">
+    <div class="main-top">
+      <a href="https://twitter.com/${id}">
+        <img
+          class="twitter-image"
+          src="https://pbs.twimg.com/profile_images/731737341488816130/wH_caJBf_400x400.jpg"
+        />
+      </a>
+      <div class="top">
+        <h1><span>とよへい</span></h1>
+        <p>Software Engineer</p>
+      </div>
+    </div>
+    <p class="description">しがないソフトウェアエンジニャです。</p>
+    <table class="profile-table">
+      <tbody>
+        <tr>
+          <th class="show">好きな言語 / FW</th>
+          <td class="show"><p>Ruby, Rails, Vue.js</p></td>
+        </tr>
+        <tr>
+          <th class="show">好きな物</th>
+          <td class="show"><p>アニメ、コーヒー</p></td>
+        </tr>
+        <tr>
+          <th class="show">住処</th>
+          <td class="show"><p>東京周辺</p></td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+
+  <style>
+  .main {
+    margin-top: 20px;
+  }
+
+  .main-top {
+    display: flex;
+    align-items: center;
+    gap: 50px;
+  }
+
+  .twitter-image {
+    width: 150px;
+    height: 150px;
+    border-radius: 100px;
+  }
+
+  .description {
+    margin: 30px 0;
+    font-size: 18px;
+  }
+
+  .profile-table {
+    table-layout: auto;
+    width: 100%;
+    text-align: left;
+  }
+  </style>
+`;
+
+class AboutMe extends HTMLElement {
+  constructor() {
+    super();
+  }
+
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    const elem = document.createElement('template');
+    elem.innerHTML = template;
+
+    this.shadowRoot.append(elem.content);
+  }
+}
+
+customElements.define('about-me', AboutMe);

src/pages/about.astro

@@ -3,9 +3,14 @@ import Layout from '../layouts/Layout.astro';
 import '../styles/global.css';
 ---
 
+<script>
+  import '../components/aboutme.js';
+</script>
+
 <Layout title="About me">
   <main>
     <h1>About me</h1>
+    <about-me></about-me>
   </main>
 </Layout>