🚀Renewal

src/pages/index.astro

@@ -4,76 +4,130 @@ import Card from "@/components/Card.astro";
 import details from "@/constants/details";
 import links from "@/constants/links";
 import contacts from "@/constants/contacts";
+import supports from "@/constants/supports";
 ---
 
 <Layout>
-  <div class={`
-    min-w-[350px]
-    w-[70vw]
-    flex
-    justify-center
-    mb-5
-  `}>
+  <div class="profile">
     <img
-      src={new URL("/last2014.png", Astro.url.origin).toString()}
+      src={new URL("/avatar.png", Astro.url.origin).toString()}
       alt="アバター"
-      class="w-[60px] h-[60px] mr-2 rounded-full"
     />
-    <div class="flex flex-col">
-      <span class="text-xl font-bold">
+
+    <div>
+      <span>
         Last2014
       </span>
-      <p class="text-sm">
-        ウェブ開発を一生してる小学生です。<br />
+
+      <p>
+        ウェブ開発をしてる小学生です。<br />
         TypeScriptをメインに色々作っています。
       </p>
     </div>
   </div>
   
-  <div class={`
-    flex
-    flex-wrap
-    gap-3
-    min-w-[350px]
-    w-[70vw]
-  `}>
-    <span class="font-bold text-4xl w-full my-2">詳細</span>
+  <div class="section">
+    <span>詳細</span>
     
     {details.map((detail) => (
-      <Card
-        title={detail.title}
-        description={detail.description}
-        img={detail.img}
-        href={detail.href}
-      />
+      <Card {...detail} canDarkInvert />
     ))}
   </div>
   
-  <div class={`
-    flex
-    flex-wrap
-    gap-3
-    min-w-[350px]
-    w-[70vw]
-  `}>
-    <span class="font-bold text-4xl w-full my-2">リンク</span>
+  <div class="section">
+    <span>リンク</span>
     
     {links.map((link) => (
       <Card {...link} />
     ))}
   </div>
+
+  <div class="section">
+    <span>支援</span>
+    
+    {supports.map((link) => (
+      <Card {...link} canDarkInvert isFullWidth />
+    ))}
+  </div>
   
-  <div class={`
-    flex
-    flex-col
-    gap-3
-    min-w-[350px]
-    w-[70vw]
-  `}>
-    <span class="font-bold text-4xl w-full my-2">連絡先</span>
+  <div class="section">
+    <span>連絡先</span>
     
     {contacts.map((contact) => (
-      <Card {...contact} isFullWidth />
+      <Card canDarkInvert {...contact} isFullWidth />
     ))}
   </div>
 </Layout>
+
+<style scoped>
+.profile {
+  display: flex;
+  width: 80dvw;
+  min-width: 20rem;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+}
+
+.profile img {
+  width: 4rem;
+  height: 4rem;
+  border-radius: 100%;
+  border: 1px solid var(--border-color);
+  flex-shrink: 0;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.profile div {
+  display: flex;
+  flex-direction: column;
+}
+
+.profile div span {
+  font-size: 1.25rem;
+  font-weight: 450;
+}
+
+.profile div p {
+  font-size: 0.9rem;
+  font-weight: 350;
+}
+
+.section {
+  width: 70dvw;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+}
+
+.section span {
+  width: 100%;
+  min-width: 20rem;
+  font-weight: bold;
+  font-size: 2rem;
+  user-select: none;
+  -webkit-user-select: none;
+}
+</style>
+
+
+<script>
+  const birthday = new Date("2014-12-08");
+
+  const getAge = () => {
+    const now = new Date();
+    let age = now.getFullYear() - birthday.getFullYear();
+    const m = now.getMonth() - birthday.getMonth();
+
+    if (m < 0 || (m === 0 && now.getDate() < birthday.getDate())) {
+      age--;
+    }
+    
+    return age;
+  }
+
+  const cardDescriptions = Array.from(document.querySelectorAll(".card-description"));
+  const ageData = cardDescriptions.filter(el => el.textContent === "")[0];
+  ageData.textContent = getAge() + "歳";
+</script>