About us page

astro.config.ts

@@ -22,6 +22,7 @@ export default defineConfig({
     icon({
       include: {
         feather: ["*"],
+        flowbite: ["*"],
       },
     }),
     mdx(),

bun.lock

@@ -9,6 +9,7 @@
         "@astrojs/svelte": "^7.0.8",
         "@date-fns/tz": "^1.2.0",
         "@iconify-json/feather": "^1.2.1",
+        "@iconify-json/flowbite": "^1.2.5",
         "@tailwindcss/typography": "^0.5.16",
         "astro": "^5.5.5",
         "astro-icon": "^1.1.5",
@@ -165,6 +166,8 @@
 
     "@iconify-json/feather": ["@iconify-json/[email protected]", "", { "dependencies": { "@iconify/types": "*" } }, "sha512-gURNg2TJYuO1U7DoOGCylm9TwkMfzjOH2BHdWsE0IXLXj/MNkFIJu56Wu1xRws27M8hzDzUDt/biGUa/LfAjdg=="],
 
+    "@iconify-json/flowbite": ["@iconify-json/[email protected]", "", { "dependencies": { "@iconify/types": "*" } }, "sha512-HPaKCC4U5F3OrzDGkC6vTNv5DO9HG4rTYl2D1B4x6vetoNNhuHdh1mM3hDnpCPhNIUlbe2sBSMJxBtewP+YjVA=="],
+
     "@iconify/tools": ["@iconify/[email protected]", "", { "dependencies": { "@iconify/types": "^2.0.0", "@iconify/utils": "^2.2.0", "@types/tar": "^6.1.13", "axios": "^1.7.9", "cheerio": "1.0.0", "domhandler": "^5.0.3", "extract-zip": "^2.0.1", "local-pkg": "^0.5.1", "pathe": "^1.1.2", "svgo": "^3.3.2", "tar": "^6.2.1" } }, "sha512-Hybu/HGhv6T8nLQhiG9rKx+ekF7NNpPOEQAy7JRSKht3s3dcFSsPccYzk24Znc9MTxrR6Gak3cg6CPP5dyvS2Q=="],
 
     "@iconify/types": ["@iconify/[email protected]", "", {}, "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg=="],

package.json

@@ -28,6 +28,7 @@
     "@astrojs/svelte": "^7.0.9",
     "@date-fns/tz": "^1.2.0",
     "@iconify-json/feather": "^1.2.1",
+    "@iconify-json/flowbite": "^1.2.5",
     "@tailwindcss/typography": "^0.5.16",
     "astro": "^5.6.1",
     "astro-icon": "^1.1.5",

src/components/Header.astro

@@ -7,11 +7,11 @@ import banner from "+contents/banner.ts";
 import Logo from "./Logo.astro";
 
 const links = [
+  { title: "About", href: "/about", focus: Focus.about },
   { title: "プロジェクト", href: "/projects", focus: Focus.projects },
   { title: "記事", href: "/articles", focus: Focus.articles },
   { title: "メンバー", href: "/members", focus: Focus.members },
   { title: "参加", href: "/join", focus: Focus.join },
-  { title: "お問い合わせ", href: "/contact", focus: Focus.contact },
 ];
 
 interface Props {

src/layouts/StaticDocumentWrapper.astro

@@ -21,12 +21,8 @@ const { header, fill, title, position } = Astro.props;
     loading="eager"
     src={header}
     width="1920"
-    height="600"
-    class:list={[
-      "my-8 h-100 w-full object-cover md:h-100 lg:h-150",
-      fill,
-      position,
-    ]}
+    height={300}
+    class:list={["my-8 h-75 w-full object-cover", fill, position]}
   />
   <article class="prose mx-5 mb-20 max-w-xl sm:mx-10 md:mx-auto">
     <slot />

src/pages/about/index.astro

@@ -0,0 +1,125 @@
+---
+import GlobalLayout from "+/layouts/GlobalLayout.astro";
+import StaticDocumentWrapper from "+/layouts/StaticDocumentWrapper.astro";
+
+import ActionButton from "+/components/ActionButton.astro";
+import Header from "+/images/activity/develop/solo-dev.jpg";
+import { Focus } from "+/schema";
+---
+
+<GlobalLayout
+  focus={Focus.about}
+  title="About Us"
+  description={null}
+  image={Header}
+>
+  <StaticDocumentWrapper title="About Us" header={Header} fill="bg-gray-400">
+    <section>
+      <h2>団体概要</h2>
+      <ul>
+        <li>団体名: ut.code();</li>
+        <li>構成人数: 30 人程度</li>
+        <li>発足: 2019 年</li>
+        <li>
+          X: <a class="link" target="_blank" href="https://x.com/utokyo_code"
+            >utokyo_code</a
+          >
+        </li>
+        <li>
+          GitHub: <a
+            class="link"
+            target="_blank"
+            href="https://github.com/ut-code">ut-code</a
+          >
+        </li>
+        <li>Email: <span id="email-loader">読込中...</span></li>
+      </ul>
+      <script>
+        document.getElementById("");
+        console.log("loading email...");
+        // スパム対策
+        function showEmail() {
+          const elem = document.getElementById("email-loader");
+          if (!elem) return;
+          const addr = `contact${String.fromCharCode(64)}utcode.net`;
+          if (elem.innerText !== addr) {
+            elem.outerHTML = `<a class="link" href="mailto:${addr}">${addr}</a>`;
+          }
+        }
+        // HACK: setTimeout だとブラウザバックで戻った時、うまく実行されない
+        setInterval(showEmail, 3000);
+      </script>
+    </section>
+    <section>
+      <h2>紹介動画</h2>
+      <iframe
+        title="ut.code(); 紹介動画"
+        class="aspect-video w-full"
+        src="https://www.youtube-nocookie.com/embed/aUoa1AyfbMA?rel=0"
+        loading="lazy"
+        allow="picture-in-picture; web-share"
+        allow-fullscreen></iframe>
+    </section>
+    <section>
+      <h2>活動内容</h2>
+      ut.code(); には「学習」「交流」「開発」の三軸を主にして活動しています。
+      <p>
+        活動例:
+        <ul>
+          <li>学習: ut.code(); Learn、全ゼミ・自主ゼミ</li>
+          <li>交流: 五月祭・駒場祭、合宿</li>
+          <li>開発: プロジェクト、ハッカソン</li>
+        </ul>
+      </p>
+    </section>
+    <section>
+      <h2>活動場所</h2>
+      <ul>
+        <li>部室: 駒場学生会館 313B</li>
+        <li>本郷図書館 プロジェクトボックス</li>
+        <li>オンライン (Discord)</li>
+        など
+      </ul>
+    </section>
+    <section>
+      <h2>FAQ / よくある質問</h2>
+      <article>
+        <h3>Q: 活動頻度はどのくらいですか？</h3>
+        A: プロジェクトの参加数や各プロジェクトによって異なりますが、 一般的には毎週夜のミーティングと月1~2回の作業会になります。
+      </article>
+      <article>
+        <h3>Q: 初心者でも大丈夫ですか？</h3>
+        A: 全く問題ありません！ ut.code(); は全くの初心者がフルスタックのアプリケーションを作成できるようになる教材を公開しており、その教材を用いた勉強会や講習会も実施しています！
+      </article>
+      <article>
+        <h3>Q: 東京大学ではないです・一年生ではありません・文系です</h3>
+        A: 全く問題ありません！ ut.code(); は大学名・学年による制限は設けていません。
+      </article>
+    </section>
+    <section>
+      <h2>主な使用技術・スタック</h2>
+      <aside class="alert alert-outline alert-info">
+        具体的な使用技術はプロジェクトによって異なります。
+      </aside>
+      <ul>
+        <li>言語: JavaScript, TypeScript など</li>
+        <li>フレームワーク: React・Next.js, Svelte(Kit) など</li>
+        <li>UI: MUI, Tailwind, DaisyUI など</li>
+        <li>バックエンド: Hono, Express, Prisma, Drizzle など</li>
+        <li>データベース: Supabase, Neon など</li>
+        <li>インフラ: Cloudflare, Fly.io, Render など</li>
+        <li>情報: Notion, Discord, GitHub など</li>
+      </ul>
+    </section>
+    <section>
+      <h2>ご寄付・ご協賛のお願い</h2>
+      <p>
+        ut.code();
+        では、活動を支援していただける方を募集しております。詳細につきましては、次のページをご覧ください。
+      </p>
+      <p class="not-prose">
+        <ActionButton to="/donation"> ご寄付・ご協賛のお願い </ActionButton>
+      </p>
+    </section>
+  </StaticDocumentWrapper>
+</GlobalLayout>

src/pages/contact.astro

@@ -4,12 +4,14 @@ import Header from "+/images/headers/contact.jpg";
 import GlobalLayout from "+/layouts/GlobalLayout.astro";
 import StaticDocumentWrapper from "+/layouts/StaticDocumentWrapper.astro";
 import { Focus } from "+/schema";
+
+// TODO: delete this file
 ---
 
 <GlobalLayout
   title="連絡"
   description="ut.code(); に連絡する手段"
-  focus={Focus.contact}
+  focus={Focus.about}
   image={Header}
 >
   <StaticDocumentWrapper

src/pages/donation.astro

@@ -9,7 +9,7 @@ import { Focus } from "+/schema";
 <GlobalLayout
   title="ご寄付・ご協賛のお願い"
   description="ご寄付・ご協賛をお願いしております"
-  focus={Focus.contact}
+  focus={Focus.about}
   class="prose"
   image={Header}
 >

src/pages/index.astro

@@ -106,7 +106,7 @@ articles.splice(3);
       </ActionButton>
     </div>
   </section>
-  <section class="bg-black py-80 text-white">
+  <section class="bg-black pt-60 pb-20 text-white">
     <div
       class="mx-auto block items-center justify-evenly gap-12 overflow-hidden px-8 xl:flex xl:flex-row-reverse"
     >
@@ -156,6 +156,15 @@ articles.splice(3);
       </script>
     </div>
   </section>
+  <section class="bg-gray-50">
+    <div class="container mx-auto px-4 py-12">
+      <SectionHeader title="News" subtitle="最新情報" />
+      <ArticleList truncate {articles} max-cols="3" class="mt-10" />
+      <ActionButton to="/articles" class="mt-8 ml-auto">
+        すべての記事
+      </ActionButton>
+    </div>
+  </section>
   <section class="bg-gray-100/70 backdrop-blur-sm">
     <div class="container mx-auto py-16">
       <SectionHeader title="About us" subtitle="団体概要" />
@@ -192,24 +201,6 @@ articles.splice(3);
       </ul>
     </div>
   </section>
-  <section class="bg-gray-50">
-    <div class="container mx-auto px-4 py-12">
-      <SectionHeader title="News" subtitle="最新情報" />
-      <ArticleList truncate {articles} max-cols="3" class="mt-10" />
-      <ActionButton to="/articles" class="mt-8 ml-auto">
-        すべての記事
-      </ActionButton>
-    </div>
-  </section>
-  <section class="w-full bg-gray-50">
-    <iframe
-      title="ut.code(); 紹介動画"
-      class="h-[300px] w-full sm:h-[400px] md:h-[500px] lg:h-[100vh]"
-      src="https://www.youtube-nocookie.com/embed/aUoa1AyfbMA?rel=0"
-      loading="lazy"
-      allow="picture-in-picture; web-share"
-      allow-fullscreen></iframe>
-  </section>
   <section class="bg-gray-50 py-24">
     <SectionHeader title="協賛企業様" />
     <ul

src/schema.ts

@@ -81,9 +81,9 @@ export const CreateMemberSchema = ({ image }: { image: ImageFunction }) =>
 // ヘッダーのスタイリングに使われています
 export enum Focus {
   none = 0,
-  projects = 1,
-  articles = 2,
-  members = 3,
-  join = 4,
-  contact = 5,
+  about = 1,
+  projects = 2,
+  articles = 3,
+  members = 4,
+  join = 5,
 }