improve design

src/components/composite/top-profile.astro

@@ -0,0 +1,94 @@
+---
+import Picture from "astro/components/Picture.astro";
+import MyIcon from "@asset/icon.webp";
+import Anchor from "@components/mdx/anchor.astro";
+import { Icon } from "astro-icon/components";
+
+export interface Props {
+  links: {
+    href: string;
+    icon: string;
+    text: string;
+  }[];
+}
+---
+
+<div class="root">
+  <div class="icon-wrapper">
+    <Picture src={MyIcon} alt="icon" class="icon" />
+  </div>
+  <div class="names">
+    <h1 class="handle-name">namachan10777</h1>
+    <span class="real-name">Masaki Nakano</span>
+  </div>
+
+  <nav class="links">
+    {
+      Astro.props.links.map((link) => (
+        <Anchor href={link.href}>
+          <Icon name={link.icon} class="link-icon" aria-label={link.text} />
+        </Anchor>
+      ))
+    }
+  </nav>
+</div>
+
+<style>
+  @layer component {
+    .root {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 1.5rem;
+    }
+
+    .names {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 0.5rem;
+    }
+
+    .icon-wrapper {
+      width: 9rem;
+    }
+
+    .icon {
+      width: 100%;
+      height: auto;
+      border-radius: 50%;
+    }
+
+    .handle-name {
+      font-size: var(--font-size-3xl);
+      font-weight: bold;
+      color: var(--fg-strong);
+    }
+
+    .real-name {
+      font-size: var(--font-size-2xl);
+      font-weight: bold;
+      color: var(--fg-weak);
+    }
+
+    .links {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      gap: 2rem;
+      font-weight: bold;
+    }
+
+    .link-icon {
+      display: block;
+      font-size: var(--font-size-2xl);
+    }
+
+    .link-item {
+      display: inline-flex;
+      flex-direction: column;
+      gap: 0.5rem;
+      align-items: center;
+    }
+  }
+</style>

src/pages/index.astro

@@ -4,7 +4,7 @@ import { getCollection } from "astro:content";
 import Section from "@components/mdx/section.astro";
 import Heading2 from "@components/mdx/heading2.astro";
 import Event from "@components/composite/events.astro";
-import NameAndIcon from "@components/composite/name-and-icon.astro";
+import NameAndIcon from "@components/composite/top-profile.astro";
 import Typography from "@components/mdx/typography.astro";
 import Pre from "@components/mdx/pre.astro";
 import PostPreviewList from "@components/composite/post-preview-list.astro";
@@ -58,10 +58,9 @@ let contact = [
   og={{ type: "website" }}
   path={[{ display: { name: "profile", icon: "iconoir:home" }, absolute: "/" }]}
 >
-  <NameAndIcon />
+  <NameAndIcon links={links} />
   <Section>
     <Heading2>Profile</Heading2>
-    <Links links={links} />
     <Typography>
       A student at University of Tsukuba. Studying in distributed storage system
       in HPC.</Typography
@@ -91,14 +90,29 @@ let contact = [
 </Base>
 
 <style>
-  .readmore-icon {
-    margin-inline-end: 0.5rem;
-    display: inline-block;
-  }
-  .readmore .readmore-icon {
-    transition: transform 0.2s;
-  }
-  .readmore:hover .readmore-icon {
-    transform: scale(1.1);
+  @layer component {
+    .links {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      gap: 2rem;
+      font-weight: bold;
+    }
+
+    .link-icon {
+      margin-inline-end: 0.5rem;
+      display: inline-block;
+      font-size: var(--font-size-2xl);
+    }
+    .readmore-icon {
+      margin-inline-end: 0.5rem;
+      display: inline-block;
+    }
+    .readmore .readmore-icon {
+      transition: transform 0.2s;
+    }
+    .readmore:hover .readmore-icon {
+      transform: scale(1.1);
+    }
   }
 </style>