Feature/demo/mochi

src/app/demo/mochi-k18/page.tsx

@@ -0,0 +1,58 @@
+import Image from "next/image";
+
+import { BackButton } from "@/components/BackButton";
+
+import profileImage from "./image.png";
+
+import styles from "./style.module.css";
+
+export default function MochiK180DemoPage() {
+  return (
+    <div className={styles.all}>
+      <BackButton path="/demo" title="一覧に戻る" />
+      <div className={styles.top}>
+        <Image
+          src={profileImage}
+          className={styles.icon}
+          alt="picture"
+          width={40}
+          height={40}
+        />
+        <div className={styles.names}>
+          <div className={styles.name}>mochi-k18</div>
+          <div className={styles.sub}>一応水泳部。自認はほぼ帰宅部。</div>
+        </div>
+      </div>
+      <div className={styles.title}>自己紹介</div>
+      <div className={styles.main}>
+        <p>・誕生日：8月11日</p>
+        <p>
+          ・部活：水泳部。今は幽霊部員のようだが、一応入学からの初期メンツ。頑張っていた時代もあった。
+        </p>
+        <p>
+          ・趣味：スキー、マンガを読むこと。特に異世界・転生モノ。スポーツマンガも好き。
+        </p>
+        <p>
+          ・長所(特技)：長所なんて自分で書くモノではないので得意なことでも書いておく。
+          <br />
+          　　　　　　　スキー、マッサージ(水泳部で鍛えられた。もはや趣味)、人に頼ること？
+        </p>
+        <p>
+          ・短所：定時で起きること。強制されないと何もできない。期限ギリギリまで課題等する気が起きない。
+        </p>
+        <p>
+          プログラミング関係は初心者です。pythonは少しいじったことある。
+          <br />
+          いつもギリギリで生きています。他人に迷惑はかかりすぎないようにしてる、、、と思いたい。
+        </p>
+        <a
+          href="https://github.com/mochi-k18"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          githubアカウント
+        </a>
+      </div>
+    </div>
+  );
+}

src/app/demo/mochi-k18/style.module.css

@@ -0,0 +1,53 @@
+body {
+  margin: 0;
+  font-family: "Hiragino Sans", "Yu Gothic", sans-serif;
+  background: linear-gradient(135deg, #7ec8e3, #7ee0b5);
+  color: black;
+}
+.all {
+  padding: 30px;
+}
+.top {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+.icon {
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  object-fit: cover;
+  display: block;
+}
+.names {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.name,
+.sub {
+  background: white;
+  padding: 10px 20px;
+  border-radius: 20px;
+  display: inline-block;
+}
+.name {
+  font-size: 26px;
+  font-weight: 600;
+}
+.title {
+  margin-top: 30px;
+  background: white;
+  display: inline-block;
+  padding: 8px 16px;
+  border-radius: 20px;
+  font-weight: bold;
+}
+.main {
+  margin-top: 15px;
+  background: white;
+  padding: 20px;
+  border-radius: 20px;
+  max-width: 900px;
+  text-decoration-skip-ink: none;
+}

src/app/demo/page.tsx

@@ -23,9 +23,6 @@ export default function DemoPage() {
               utsukushiioto0816-tech
             </DynamicLink>
           </div>
-          <div className={styles.link}>
-            <DynamicLink link="/demo/karencaya">karencaya</DynamicLink>
-          </div>
           <div className={styles.link}>
             <DynamicLink link="/demo/K10-K10">K10-K10</DynamicLink>
           </div>
@@ -41,6 +38,9 @@ export default function DemoPage() {
           <div className={styles.link}>
             <DynamicLink link="/demo/Shirym-min">Shirym-min</DynamicLink>
           </div>
+          <div className={styles.link}>
+            <DynamicLink link="/demo/mochi-k18">mochi-k18</DynamicLink>
+          </div>
         </div>
       </div>
     </div>