Updated and added pages

2024-10-09 01:40:36 +09:00
parent 780905fb4e
commit 545ac73e0e
37 changed files with 1552 additions and 291 deletions
--- a/README.md
+++ b/README.md
@@ -29,5 +29,6 @@ npm run generate # 静的サイトを生成

 * `assets/databases/news.db`: ニュースを管理しているsqliteデータベース
 * `assets/siteinfo.json`: 部長と顧問の名前、コピーライトの年、メンバーの学科・学年ごとの人数、など更新があまりされない情報を集めたファイル、`import`して使う
+* `assets/achievements.json`: 活動実績に表示される参加・受賞歴を集めたファイル
 * `docs/`: `typedoc`で生成されたドキュメンテーションが入っている、`python -m http.server`などで`localhost`にホストして読む
 * `dist/`, `.output/`: `npm run generate`で生成された静的ウェブサイト本体、プロダクションレディーな状態 `dist/`は`.output/`へのリンクである
--- a/assets/achievements.json
+++ b/assets/achievements.json
@@ -0,0 +1,51 @@
+{
+    "cansatKousien": [
+        "缶サットチャレンジ岐阜2016 技術賞受賞",
+        "缶サット甲子園2017 岐阜大会 出場",
+        "缶サット甲子園2018 岐阜大会 出場",
+        "缶サット甲子園2019 岐阜大会 優勝",
+        "缶サット甲子園2019 全国大会 土岐賞(技術賞)受賞",
+        "缶サット甲子園2020 岐阜大会 優勝",
+        "缶サット甲子園2020 全国大会 土岐賞(技術賞)受賞",
+        "缶サット甲子園2021 岐阜大会 優勝",
+        "缶サット甲子園2021 全国大会 優勝"
+    ],
+    "tanegasimaRocketContest": {
+        "airtime": [
+            "第13回種子島ロケットコンテスト ロケット部門–滞空・定点回収 優勝",
+            "第16回種子島ロケットコンテスト ロケット部門–滞空・定点回収 書類審査通過（大会中止）"
+        ],
+        "altitude": [
+            "第14回種子島ロケットコンテスト ロケット部門–高度 書類審査通過 本戦出場",
+            "第15回種子島ロケットコンテスト ロケット部門–高度 書類審査通過 本戦出場"
+        ],
+        "cansat": [
+            "第14回種子島ロケットコンテスト ペイロード部門-CanSat 書類審査通過 本戦出場",
+            "第15回種子島ロケットコンテスト ペイロード部門-CanSat 書類審査通過 本戦出場",
+            "第16回種子島ロケットコンテスト ペイロード部門-CanSat 書類審査通過（大会中止）"
+        ]
+    },
+    "satelliteDesignContest": [
+        "第25回衛星設計コンテスト 参加（一次審査不通過）",
+        "第27回衛星設計コンテスト 参加（一次審査不通過）"
+    ],
+    "nationalTechincalCollegeSpaceContest": [
+        "2020年度プレ大会 敢闘賞",
+        "2021年度大会 優良賞"
+    ],
+    "other": [
+        "平成28年度 宇宙工学講座（8名参加）",
+        "高専スペースキャンプ2016（4名参加）",
+        "平成29年度 宇宙工学講座（2名参加）",
+        "高専スペースキャンプ2017（4名参加）",
+        "平成30年度 宇宙工学講座（4名参加）",
+        "高専スペースキャンプ2018（3名参加）",
+        "令和元年度 宇宙工学講座（4名参加）",
+        "航空宇宙フェア2019 出展",
+        "高専スペースキャンプ2019（7名参加）",
+        "令和2年度 宇宙工学講座（2名参加）",
+        "令和3年度 宇宙工学講座（4名参加）",
+        "令和3年度高専祭専門店出展",
+        "2021年11月14日 岐阜サイエンスフェア(モレラ岐阜)"
+    ]
+}
--- a/assets/databases/news.db
+++ b/assets/databases/news.db
--- a/assets/siteinfo.json
+++ b/assets/siteinfo.json
@@ -18,6 +18,6 @@
        "fourth": 1,
        "fifth": 1
    },
-    "advisorName": "佐藤敦（さとうあつい）",
+    "advisorName": "佐藤 敦（さとう あつし）",
    "headOfClub": "５年機械工学科 瀨 仁一郎"
 }
--- a/assets/styles/app.css
+++ b/assets/styles/app.css
@@ -27,7 +27,6 @@ main {
    margin: var(--main-margin-top-bottom) var(--main-margin-left-right);
 }

-
 html {
    font-size: 16px;
    scrollbar-width: none;
--- a/assets/styles/color-pallet.css
+++ b/assets/styles/color-pallet.css
@@ -4,6 +4,7 @@
    --astronaut: #214559;
    --comet2: #6e6970;
    --deep-space: #000001;
+    --martian: #136c51;
    --martian-moon: #c3e9d3;
    --meteorite: #4a3b6a;
    --moonlight: #f6eed5;
--- a/assets/styles/markdown.css
+++ b/assets/styles/markdown.css
@@ -11,6 +11,16 @@
    font-size: 16px;
 }

+.markdown .float-left {
+    float: left;
+    margin-right: 1rem;
+}
+
+.markdown .float-right {
+    float: right;
+    margin-left: 1rem;
+}
+
 .markdown > h1 {
    color: var(--neptune1);
    font-size: 2.5em;
@@ -66,12 +76,36 @@
    }
 }

-.markdown > p > em,
-.markdown > p > strong {
+.markdown > span {
+    width: fit-content;
+    margin: auto;
+    position: relative;
+    & > p > a > img {
+        width: 32rem;
+        height: auto;
+    }
+    & > p > a::after {
+        position: absolute;
+        content: "Youtube →";
+        display: flex;
+        height: 2rem;
+        bottom: 0.26rem;
+        right: 0;
+        background: #ff0000;
+        color: white;
+        padding: 0.25rem;
+        font-weight: bolder;
+        font-style: oblique;
+        place-items: center;
+    }
+}
+
+.markdown em,
+.markdown strong {
    color: var(--neptune1);
 }

-.markdown > p > em:has(strong) {
+.markdown em > strong {
    color: var(--sun2);
 }

--- a/assets/styles/page.css
+++ b/assets/styles/page.css
@@ -0,0 +1,62 @@
+main {
+    display: grid;
+    width: 50%;
+    justify-self: center;
+}
+
+section {
+    display: block;
+}
+
+img {
+    width: 20rem;
+    height: auto;
+}
+
+p {
+    margin: 0.5rem 0;
+}
+
+.float-right {
+    float: right;
+    margin-left: 2rem;
+}
+
+.float-left {
+    float: left;
+    margin-right: 2rem;
+}
+
+a,
+h2 {
+    color: var(--neptune1);
+}
+
+a:visited {
+    color: var(--neptune1);
+}
+
+h3 {
+    color: var(--neptune2);
+}
+
+h4 {
+    color: var(--martian);
+}
+
+strong {
+    color: var(--sun4);
+}
+
+@media screen and (max-width: 1024px) {
+    main {
+        width: 90%;
+        margin: 1rem;
+    }
+    section {
+        display: inherit;
+    }
+    img {
+        margin: auto !important;
+    }
+}
--- a/components/DropDown.vue
+++ b/components/DropDown.vue
@@ -48,10 +48,6 @@ const handleFocusOutEvent = () => {
            mouseover: handleMouseHoverEvent,
            mouseleave: handleMouseHoverEvent,
        }"
-        v-if="
-            (showInMobile === true && viewPortType !== ViewPortType.DESKTOP) ||
-            (showInMobile === false && viewPortType !== ViewPortType.MOBILE)
-        "
    >
        <button
            class="dropdown-label"
--- a/components/LinkCard.vue
+++ b/components/LinkCard.vue
@@ -1,11 +1,16 @@
 <script setup lang="ts">
-import type { LinkCardProperty } from '~/utils/linkCard';
+import type { LinkCardProperty } from "~/utils/linkCard";
 const property = defineProps<LinkCardProperty>();
+const doesNotHaveImage = ref<boolean>(property.imagePath === undefined);
 </script>

 <template>
-    <NuxtLink :to="property.link">
-        <div class="image" v-if="property.imagePath" :style="{ backgroundImage: `url(${property.imagePath})` }"></div>
+    <NuxtLink :to="property.link" :class="{ withoutImage: doesNotHaveImage }">
+        <div
+            class="image"
+            v-if="property.imagePath"
+            :style="{ backgroundImage: `url(${property.imagePath})` }"
+        ></div>
        <h2>{{ property.title }}</h2>
        <p>{{ property.description }}</p>
    </NuxtLink>
@@ -29,7 +34,12 @@ a:hover {
 }

 a > * {
-    margin: 2rem;
+    margin: 0 2rem;
+}
+
+.withoutImage {
+    grid: 1fr 1.5fr / 1fr;
+    height: 15rem;
 }

 .image {
@@ -38,6 +48,8 @@ a > * {
    background-size: cover;
    width: 18rem;
    height: 12rem;
+    margin-top: 1.75rem;
+    margin-bottom: 0.75rem;
    place-self: center;
 }

@@ -54,7 +66,7 @@ h2 {

 h2::after {
    display: block;
-    content: '';
+    content: "";
    position: absolute;
    width: 7px;
    height: 2rem;
@@ -68,4 +80,39 @@ p {
    color: var(--deep-space);
    margin: 0 2rem;
 }
+
+@media screen and (max-width: 1024px) {
+    a {
+        width: 20rem;
+        height: 25rem;
+    }
+    a > * {
+        margin: 0 1rem;
+    }
+    h2 {
+        font-size: 16pt;
+    }
+    .image {
+        width: 16rem;
+        height: 10rem;
+    }
+}
+
+@media screen and (max-width: 640px) {
+    a {
+        width: 16rem;
+        height: 21rem;
+    }
+    a > * {
+        margin: 0 0.75rem;
+    }
+    h2 {
+        font-size: 16pt;
+    }
+    .image {
+        width: 12rem;
+        height: 8rem;
+        margin-top: 0.75rem;
+    }
+}
 </style>
--- a/components/PageTop.vue
+++ b/components/PageTop.vue
@@ -14,7 +14,7 @@ const property = defineProps<PageTopProperty>();
 div {
    display: flex;
    width: 100vw;
-    height: 12rem;
+    height: 16rem;
    margin: 0;
    background-repeat: no-repeat;
    background-position: center;
--- a/components/PankuzuList.vue
+++ b/components/PankuzuList.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+const route = useRoute();
+const router = useRouter();
+
+console.log(route.path);
+console.log(router.getRoutes());
+console.log(router.resolve({ name: "news" }));
+
+const getLinkArray = (): Array<string> => {
+    let links = route.fullPath.split("/");
+    return links.map<string>((value) => {
+        return "/" + value;
+    });
+};
+
+const linkArray = getLinkArray();
+</script>
+
+<template>
+    <div>Pankuzu List</div>
+    <nav>
+        <ul>
+            <li v-for="link in linkArray">
+                <NuxtLink
+                    :to="link"
+                    v-if="linkArray.indexOf(link) !== linkArray.length - 1"
+                >
+                    {{ link }}
+                </NuxtLink>
+                <p v-else>{{ link }}</p>
+            </li>
+        </ul>
+    </nav>
+</template>
+
+<style scoped>
+ul {
+    list-style-type: none;
+    display: flex;
+    align-items: center;
+}
+</style>
--- a/components/QAndABox.vue
+++ b/components/QAndABox.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { QAndABoxProperty } from "~/utils/qAndABox";
+const property = defineProps<QAndABoxProperty>();
+</script>
+
+<template>
+    <div class="q-and-a">
+        <h2>{{ property.question }}</h2>
+        <div>
+            <slot></slot>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.q-and-a {
+    max-width: 1105px;
+    width: 80vw;
+}
+
+.q-and-a > h2 {
+    color: var(--deep-space);
+    background-color: var(--starlight1);
+    border-radius: 1rem;
+    font-weight: 600;
+    line-height: 2;
+    padding-inline: 1.5rem;
+}
+
+.q-and-a > div {
+    width: 90%;
+    margin-inline: 3rem;
+}
+</style>
--- a/components/TheFooter.vue
+++ b/components/TheFooter.vue
@@ -31,15 +31,16 @@ const showThePast = (event: Event) => {
            <div class="top-column">
                <div class="summary">
                    <h3>
-                        岐阜高専<wbr />宇宙<wbr />工学<wbr />研究会 - {{ SiteInfo.clubNameLong }}
+                        岐阜高専<wbr />宇宙<wbr />工学<wbr />研究会 -
+                        {{ SiteInfo.clubNameLong }}
                    </h3>
                    <p>
                        宇宙分野に興味ある学生が<wbr />集い、<wbr />宇宙理工学に<wbr />関する知識を<wbr />身に付けると共に、<wbr />
                        宇宙分野に関連する<wbr />各種競技会へ<wbr />参加して<wbr />人間力と実践力を<wbr />養うことを目的に<wbr />活動しています。
                    </p>
-                    <NuxtLink to="/about/sera"
-                        >About {{ SiteInfo.clubNameAbbreviation }}</NuxtLink
-                    >
+                    <NuxtLink to="/about/sera">
+                        About {{ SiteInfo.clubNameAbbreviation }}
+                    </NuxtLink>
                </div>
                <div class="links">
                    <ul>
@@ -64,12 +65,12 @@ const showThePast = (event: Event) => {
                                </li>
                                <li>
                                    <NuxtLink to="/projects/kosen-x">
-                                        CubeSat Kosen-x
+                                        CubeSat KOSEN-X
                                    </NuxtLink>
                                </li>
                                <li>
-                                    <NuxtLink to="/projects/edu-robot">
-                                        Edu-Robot
+                                    <NuxtLink to="/projects/education">
+                                        教育プロジェクト
                                    </NuxtLink>
                                </li>
                            </ul>
@@ -118,6 +119,14 @@ const showThePast = (event: Event) => {
                                <Icon name="simple-icons:instagram" />
                            </NuxtLink>
                        </li>
+                        <li>
+                            <NuxtLink
+                                to="https://github.com/SERA-NIT-Gifu-College"
+                                target="_blank"
+                            >
+                                <Icon name="simple-icons:github" />
+                            </NuxtLink>
+                        </li>
                    </ul>
                </div>
            </div>
@@ -224,7 +233,7 @@ footer {
    display: flex;
    padding: 0;
    & > li {
-        margin-right: 0.5rem;
+        margin: 0 0.5rem;
        & > a span {
            width: 48px;
            height: 48px;
--- a/components/TheHeader.vue
+++ b/components/TheHeader.vue
@@ -7,7 +7,7 @@ const exploreDropDownEntries: Array<DropDownEntry> = [
    { text: "Projects", link: "/projects" },
    { text: "CanSat", link: "/projects/cansat" },
    { text: "Rocket", link: "/projects/rocket" },
-    { text: "Edu-Robot", link: "/projects/edu-robot" },
+    { text: "Edu-Robot", link: "/projects/education" },
    { text: "CubeSat KOSEN-X", link: "/projects/kosen-x" },
    { text: "About", link: "/about" },
 ];
@@ -27,7 +27,7 @@ const mediaDropDownEntries: Array<DropDownEntry> = [
                    :mode="DropDownMode.onClick"
                    :alignment="DropDownAlignment.Left"
                    :entries="exploreDropDownEntries"
-                    :show-in-mobile="false"
+                    class="left-dropdown"
                />
            </div>
            <div id="logo-link">
@@ -41,7 +41,7 @@ const mediaDropDownEntries: Array<DropDownEntry> = [
                    :mode="DropDownMode.onClick"
                    :alignment="DropDownAlignment.Right"
                    :entries="mediaDropDownEntries"
-                    :show-in-mobile="false"
+                    class="right-dropdown"
                />
            </div>
        </div>
@@ -51,6 +51,9 @@ const mediaDropDownEntries: Array<DropDownEntry> = [
 <style scoped>
 header {
    width: 100vw;
+    position: sticky;
+    top: 0;
+    z-index: 10;
 }

 .navigation-menu {
@@ -104,4 +107,11 @@ header {
    height: auto;
    background: transparent !important;
 }
+
+@media screen and (max-width: 640px) {
+    .left-dropdown,
+    .right-dropdown {
+        display: none;
+    }
+}
 </style>
--- a/error.vue
+++ b/error.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { NuxtError } from "#app";

-const props = defineProps({
+const property = defineProps({
    error: Object as () => NuxtError,
 });

@@ -13,8 +13,8 @@ definePageMeta({
 <template>
    <NuxtLayout>
        <div>
-            <h1>{{ error?.statusCode }}</h1>
-            <p>{{ error?.message }}</p>
+            <h1>{{ property.error?.statusCode }}</h1>
+            <p>{{ property.error?.message }}</p>
            <NuxtLink to="/">戻る</NuxtLink>
        </div>
    </NuxtLayout>
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -17,7 +17,7 @@ const basicRules = {
            "ignoreArrayIndexes": true,
            "ignoreClassFieldInitialValues": true,
            "enforceConst": true,
-            "ignore": [0]
+            "ignore": [0, 1, -1]
        }
    ],
    "dot-notation": "error",
--- a/pages/about/achievements.vue
+++ b/pages/about/achievements.vue
@@ -1,3 +1,174 @@
+<script setup lang="ts">
+import AchievementsList from "~/assets/achievements.json";
+
+useSeoMeta(
+    generateSeoMeta(
+        "活動実績",
+        "岐阜高専宇宙工学研究会の活動や受賞歴の紹介ページです。",
+        "/sera-logo-text.svg"
+    )
+);
+</script>
+
 <template>
-    <div>Page: achievements</div>
+    <PageTop text="活動実績" image-path="/images/page-top.jpg" />
+    <main>
+        <section>
+            <p>
+                岐阜高専宇宙工学研究会【SERA】では、各種競技会に参加しています。
+            </p>
+            <p>
+                主には缶サット甲子園と種子島ロケットコンテストに出場しています。また、来年度はRocket開発チームが新たにモデルロケット全国大会にも出場予定です。
+            </p>
+        </section>
+
+        <section>
+            <h2>競技会の参加・受賞歴</h2>
+        </section>
+
+        <section>
+            <img
+                src="/images/koshien2020_mission-rogo.png"
+                alt="2020 Mission Logo"
+                class="float-right"
+                style="background-color: black"
+            />
+            <h3>缶サット甲子園</h3>
+            <ul>
+                <li
+                    v-for="entry in AchievementsList.cansatKousien"
+                    :key="AchievementsList.cansatKousien.indexOf(entry)"
+                >
+                    {{ entry }}
+                </li>
+            </ul>
+            <p>
+                この画像は、2020大会におおける我々のミッションロゴです。※無断使用厳禁
+            </p>
+            <p>
+                2020大会の開発記録についての開発記録も公開しております。
+                <NuxtLink to="/news/cansat-koushien-2020-championship">
+                    こちら
+                </NuxtLink>
+                からご覧ください。
+            </p>
+        </section>
+
+        <section>
+            <h3>種子島ロケットコンテスト</h3>
+            <h4>滑空・定点回収</h4>
+            <img
+                src="/images/rocket_top.jpg"
+                alt="rockets"
+                class="float-right"
+            />
+            <ul>
+                <li
+                    v-for="entry in AchievementsList.tanegasimaRocketContest
+                        .airtime"
+                    :key="
+                        AchievementsList.tanegasimaRocketContest.airtime.indexOf(
+                            entry
+                        )
+                    "
+                >
+                    {{ entry }}
+                </li>
+            </ul>
+            <br />
+            <h4>高度</h4>
+            <ul>
+                <li
+                    v-for="entry in AchievementsList.tanegasimaRocketContest
+                        .altitude"
+                    :key="
+                        AchievementsList.tanegasimaRocketContest.altitude.indexOf(
+                            entry
+                        )
+                    "
+                >
+                    {{ entry }}
+                </li>
+            </ul>
+            <br />
+            <h4>CanSat</h4>
+            <img
+                src="/images/cansat/cansat_03.jpg"
+                alt="Sample Image"
+                class="float-right"
+            />
+            <ul>
+                <li
+                    v-for="entry in AchievementsList.tanegasimaRocketContest
+                        .cansat"
+                    :key="
+                        AchievementsList.tanegasimaRocketContest.cansat.indexOf(
+                            entry
+                        )
+                    "
+                >
+                    {{ entry }}
+                </li>
+            </ul>
+        </section>
+
+        <section>
+            <h3>衛星設計コンテスト</h3>
+            <ul>
+                <li
+                    v-for="entry in AchievementsList.satelliteDesignContest"
+                    :key="
+                        AchievementsList.satelliteDesignContest.indexOf(entry)
+                    "
+                >
+                    {{ entry }}
+                </li>
+            </ul>
+        </section>
+
+        <section>
+            <h3>全国高等専門学校 宇宙コンテスト(宇宙コン)</h3>
+            <ul>
+                <li
+                    v-for="entry in AchievementsList.nationalTechincalCollegeSpaceContest"
+                    :key="
+                        AchievementsList.nationalTechincalCollegeSpaceContest.indexOf(
+                            entry
+                        )
+                    "
+                >
+                    {{ entry }}
+                </li>
+            </ul>
+        </section>
+
+        <section>
+            <h2>その他活動実績 (イベントなど)</h2>
+            <img
+                src="/images/uchu_fea.jpg"
+                alt="Sample Image"
+                class="float-right"
+            />
+            <ul>
+                <li
+                    v-for="entry in AchievementsList.other"
+                    :key="AchievementsList.other.indexOf(entry)"
+                >
+                    {{ entry }}
+                </li>
+            </ul>
+        </section>
+    </main>
 </template>
+
+<style scoped>
+@import url("~/assets/styles/page.css");
+
+ul li {
+    line-height: 24pt;
+}
+
+ul li::marker {
+    content: "☆ ";
+}
+</style>
--- a/pages/about/for-middle-schoolers-and-new-comers.vue
+++ b/pages/about/for-middle-schoolers-and-new-comers.vue
@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import SiteInfo from "~/assets/siteinfo.json";
+
+const memberGradeRatioDate: string = new Date(
+    SiteInfo.memberGradeRatio.date
+).toLocaleDateString("ja-JP-u-ca-japanese", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+});
+const memberDepartmentRatioDate: string = new Date(
+    SiteInfo.memberDepartmentRatio.date
+).toLocaleDateString("ja-JP-u-ca-japanese", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+});
+const memberTotal: number =
+    SiteInfo.memberGradeRatio.first +
+    SiteInfo.memberGradeRatio.second +
+    SiteInfo.memberGradeRatio.third +
+    SiteInfo.memberGradeRatio.fourth +
+    SiteInfo.memberGradeRatio.fifth;
+
+useSeoMeta(
+    generateSeoMeta(
+        "中学生・新入生向けページ",
+        "岐阜高専の新入生や岐阜高専を目指す中学生など向けのページです。",
+        "/sera-logo-text.svg"
+    )
+);
+</script>
+
+<template>
+    <PageTop
+        text="中学生・新入生向けページ"
+        image-path="/images/page-top.jpg"
+    />
+    <main>
+        <h3>SERAに興味があるみなさんへ</h3>
+
+        <QAndABox question="SERAについて簡単に教えて!">
+            <p>宇宙分野に興味ある学生が集まった団体です。</p>
+            <p>
+                具体的には、教育用の模型ロケットや飲料缶サイズの模型人口衛星を設計、製作しています。
+            </p>
+            <p>
+                宇宙理工学に関する知識とスキルを身に付けると共に、競技会や宇宙系の教育イベントの参加を通じて、
+                人間力と実践力を養うことが出来ます。
+            </p>
+            <NuxtLink to="/about/sera"> 詳しくはこちら </NuxtLink>
+        </QAndABox>
+
+        <QAndABox
+            question="SERAでの活動を通して、どのような力を身に付けることができますか？"
+        >
+            <p>
+                コンピュータを使った製図(CAD)のスキル、電子回路の知識、プログラミング能力
+                などの専門技術のほか、プロジェクトの進め方やチームワークのスキルなど、技術者
+                としての人間性を身に付けることが出来ます。
+            </p>
+            <NuxtLink to="/projects/education">詳しくはこちら</NuxtLink>
+        </QAndABox>
+
+        <QAndABox question="活動時間はいつ？">
+            <p>
+                授業終了後から、18:30まで活動しています。土日祝日は大会等が無い限りお休みです。
+            </p>
+        </QAndABox>
+
+        <QAndABox question="活動場所はどこ？">
+            <p></p>
+        </QAndABox>
+
+        <QAndABox question="Rocket開発チームでやっている事は？">
+            <p>モデルロケットの設計、製作を行っています。</p>
+            <p>
+                小型のものから、CanSat開発チームが作成した缶サットを積むことのできるものまで、大きさは様々です。
+            </p>
+            <NuxtLink to="/projects/rocket"> 詳しくはこちら </NuxtLink>
+        </QAndABox>
+
+        <QAndABox question="CanSat開発チームでやっている事は？">
+            <p>
+                「缶サット」と呼ばれる350ml缶サイズのの模擬人工衛星を製作しています。
+            </p>
+            <p>
+                「投下型」「設置型」「走行型」など、工夫次第で様々な種類のものを製作できます。
+                また、競技の種類によっては、1kgを超える大きさにもなる「ローバー」も製作しています。
+            </p>
+            <NuxtLink to="/projects/cansat"> 詳しくはこちら </NuxtLink>
+        </QAndABox>
+
+        <QAndABox question="Rocket・CanSat以外で行っている活動は？">
+            <p>
+                「CubeSat」と呼ばれる、10cm x 10cm x
+                20cmサイズの超小型衛星の開発をしています。
+            </p>
+            <p>全国の高専と連携して、開発を行っています。</p>
+            <NuxtLink to="/projects/kosen-x"> 詳しくはこちら </NuxtLink>
+        </QAndABox>
+
+        <QAndABox question="何人で活動していますか？">
+            <p>
+                {{ memberGradeRatioDate }}現座、 1年生が{{
+                    SiteInfo.memberGradeRatio.first
+                }}人、 2年生が{{ SiteInfo.memberGradeRatio.second }}人、
+                3年生が{{ SiteInfo.memberGradeRatio.third }}人、 4年生が{{
+                    SiteInfo.memberGradeRatio.fourth
+                }}人、 5年生が{{ SiteInfo.memberGradeRatio.fifth }}人の 合計{{
+                    memberTotal
+                }}人で活動しています。
+            </p>
+        </QAndABox>
+    </main>
+</template>
+
+<style scoped>
+main {
+    display: block;
+    margin-inline: auto;
+}
+
+h3 {
+    width: fit-content;
+    color: var(--neptune1);
+    margin-inline: auto;
+}
+</style>
--- a/pages/about/gallery.vue
+++ b/pages/about/gallery.vue
@@ -1,3 +1,216 @@
+<script setup lang="ts">
+const { data } = await useFetch("/api/getGalleryImages");
+
+enum Direction {
+    FORWARD,
+    BACKWARD,
+}
+
+const showViewer = ref<boolean>(false);
+const imagePathViewer = ref<string>("");
+const captionViewer = ref<string>("");
+const indexViewer = ref<number>(0);
+
+const openViewer = (entry: GalleryEntry) => {
+    showViewer.value = true;
+    imagePathViewer.value = entry.imagePath;
+    captionViewer.value = entry.caption;
+    indexViewer.value = data.value?.indexOf(entry) as number;
+    document.getElementsByTagName("body")[0].classList.add("no_scroll");
+};
+
+const closeViewer = () => {
+    showViewer.value = false;
+    document.getElementsByTagName("body")[0].classList.remove("no_scroll");
+};
+
+const changeImage = (direction: number) => {
+    const lastIndex = (data.value?.length as number) - 1;
+    const delta = direction === Direction.FORWARD ? 1 : -1;
+    let newIndex = indexViewer.value + delta;
+    if (newIndex < 0) {
+        newIndex = lastIndex;
+    } else if (newIndex > lastIndex) {
+        newIndex = 0;
+    }
+    const nextEntry = data.value?.at(newIndex);
+    indexViewer.value = data.value?.indexOf(
+        nextEntry as GalleryEntry
+    ) as number;
+    imagePathViewer.value = nextEntry?.imagePath as string;
+    captionViewer.value = nextEntry?.caption as string;
+};
+
+useSeoMeta(
+    generateSeoMeta(
+        "写真集",
+        "岐阜高専宇宙工学研究会の出場大会などでの写真です。",
+        "/sera-logo-text.svg"
+    )
+);
+</script>
+
 <template>
-    <div>Page: gallery</div>
+    <PageTop text="写真集" image-path="/images/page-top.jpg" />
+    <main>
+        <p>大会や日々の活動の様子をアップロードしていきます</p>
+        <div class="image-list">
+            <div
+                v-for="entry in data"
+                class="image-thumbnail"
+                @click="openViewer(entry)"
+                :key="entry.id"
+            >
+                <img :src="entry.imagePath" :alt="entry.caption" />
+                <figcaption>{{ entry.caption }}</figcaption>
+            </div>
+        </div>
+        <Transition name="image-viewer-transition">
+            <div class="image-viewer" v-if="showViewer">
+                <button @click="closeViewer" class="close">
+                    <Icon name="ic:baseline-close" />
+                </button>
+                <img :src="imagePathViewer" :alt="captionViewer" />
+                <figcaption>{{ captionViewer }}</figcaption>
+                <button @click="changeImage(Direction.FORWARD)" class="next">
+                    <Icon name="material-symbols:arrow-forward-rounded" />
+                </button>
+                <button @click="changeImage(Direction.BACKWARD)" class="back">
+                    <Icon name="material-symbols:arrow-back-rounded" />
+                </button>
+            </div>
+        </Transition>
+    </main>
 </template>
+
+<style scoped>
+main {
+    justify-self: center;
+}
+
+.image-list {
+    width: fit-content;
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    grid-template-rows: auto;
+    gap: 20px;
+}
+
+.image-thumbnail {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    width: 20rem;
+    height: 15rem;
+    background-color: var(--starlight1);
+    border-radius: 1rem;
+    transition: scale 0.2s ease-in-out;
+}
+
+.image-thumbnail:hover {
+    background-color: var(--starlight5);
+    cursor: pointer;
+    scale: 105%;
+    transition: scale 0.2s ease-in-out;
+}
+
+.image-thumbnail img {
+    width: 15rem;
+    height: 10rem;
+    object-fit: cover;
+}
+
+.image-thumbnail figcaption {
+    width: 15rem;
+    text-align: center;
+}
+
+.image-viewer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 10;
+    display: grid;
+    grid-template-columns: 5rem auto 5rem;
+    grid-template-rows: 5rem auto 5rem;
+    grid-template-areas:
+        "top top close"
+        "left image right"
+        "caption caption caption";
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(70, 70, 70, 0.9);
+}
+
+.image-viewer img {
+    width: max-content;
+    height: auto;
+    max-height: 80vh;
+    grid-area: image;
+    justify-self: center;
+    align-self: center;
+}
+
+.image-viewer figcaption {
+    color: var(--sunlight);
+    font-size: 24pt;
+    grid-area: caption;
+    justify-self: center;
+}
+
+.image-viewer .close {
+    grid-area: close;
+    width: 3rem;
+    height: 3rem;
+    place-self: center;
+    & > span {
+        display: flex;
+        width: 2rem;
+        height: 2rem;
+        place-content: center;
+    }
+}
+
+.image-viewer .next {
+    grid-area: right;
+    width: 3rem;
+    height: 3rem;
+    place-self: center;
+    place-content: center;
+    & > span {
+        width: 2rem;
+        height: 2rem;
+    }
+}
+
+.image-viewer .back {
+    grid-area: left;
+    width: 3rem;
+    height: 3rem;
+    place-self: center;
+    & > span {
+        display: flex;
+        width: 2rem;
+        height: 2rem;
+        place-content: center;
+    }
+}
+
+.image-viewer-transition-enter-active,
+.image-viewer-transition-leave-active {
+    transition: opacity 0.3s ease-in-out;
+}
+
+.image-viewer-transition-enter-from,
+.image-viewer-transition-leave-to {
+    opacity: 0;
+}
+</style>
+
+<style>
+.no_scroll {
+    height: 100%;
+    overflow-y: hidden;
+}
+</style>
--- a/pages/about/index.vue
+++ b/pages/about/index.vue
@@ -1,3 +1,67 @@
+<script setup lang="ts">
+useSeoMeta(
+    generateSeoMeta(
+        "About Us",
+        "岐阜高専宇宙工学研究会についてのページです。",
+        "/sera-logo-text.svg"
+    )
+);
+</script>
+
 <template>
-    <div>Page: index</div>
+    <PageTop text="About Us" image-path="/images/page-top.jpg" />
+    <PankuzuList />
+    <main>
+        <ul>
+            <li>
+                <LinkCard
+                    title="SERAについて"
+                    description="岐阜工業高等専門学校宇宙工学研究会【SERA】の概要です。"
+                    link="/about/sera"
+                />
+            </li>
+            <li>
+                <LinkCard
+                    title="活動実績"
+                    description="SERAの活動実績、受賞歴を紹介します。"
+                    link="/about/achievements"
+                />
+            </li>
+            <li>
+                <LinkCard
+                    title="写真集"
+                    description="大会や普段の活動での様子です。"
+                    link="/about/gallery"
+                />
+            </li>
+            <li>
+                <LinkCard
+                    title="中学生・新入生向け"
+                    description="部活のFAQを集めてみました。"
+                    link="/about/for-middle-schoolers-and-new-comers"
+                />
+            </li>
+        </ul>
+    </main>
 </template>
+
+<style scoped>
+ul {
+    list-style: none;
+    display: grid;
+    gap: 20px;
+    grid: repeat(2, 1fr) / repeat(2, 1fr);
+    width: fit-content;
+    padding: 0;
+    margin: auto;
+}
+
+@media screen and (max-width: 1024px) {
+    main {
+        margin: var(--main-margin-top-bottom) 0;
+    }
+    ul {
+        grid: repeat(3, 1fr) / 1fr;
+    }
+}
+</style>
--- a/pages/about/sera.vue
+++ b/pages/about/sera.vue
@@ -1,3 +1,87 @@
+<script setup lang="ts">
+import SiteInfo from "~/assets/siteinfo.json";
+
+useSeoMeta(
+    generateSeoMeta(
+        "SERAについて",
+        "岐阜高専宇宙工学研究会についてのページです。",
+        "/sera-logo-text.svg"
+    )
+);
+</script>
+
 <template>
-    <div>Page: sera</div>
+    <PageTop text="SERAについて" image-path="/images/page-top.jpg" />
+    <main>
+        <section>
+            <img src="/sera-logo-text.svg" alt="SERA Logo" class="float-left" />
+            <p>
+                宇宙分野に興味ある学生が集い、宇宙理工学に関する知識を身に付けると共に、宇宙分野に関連する各種競技会へ参加して人間力と実践力を養うことを目的に活動しています。
+            </p>
+        </section>
+
+        <section>
+            <h2>岐阜高専宇宙工学研究会 について</h2>
+            <p>
+                超小型衛星開発を目指す有志の団体として2016年度に発足、2018年度より岐阜高専の正式な同好会として活動し、2022年度より岐阜高専の正式なクラブとして活動しています。
+            </p>
+            <p>
+                宇宙工学研究会の英語表記{{
+                    `"${SiteInfo.clubNameLong}"`
+                }}の頭文字をとって【{{
+                    SiteInfo.clubNameAbbreviation
+                }}(セラ)】と呼んでいます。
+            </p>
+            <p>部長 : {{ SiteInfo.headOfClub }}</p>
+        </section>
+
+        <section>
+            <h2>活動内容</h2>
+        </section>
+
+        <section>
+            <h3>各種競技会への参加</h3>
+            <p>
+                主に缶サット甲子園・種子島ロケットコンテストに出場しており、競技用の缶サット・モデルロケットを製作しています。
+            </p>
+            <p>
+                活動の詳細については、
+                <NuxtLink to="/projects">Projects</NuxtLink>
+                や
+                <NuxtLink to="/about/achievements">活動実績</NuxtLink>
+                のページをご覧ください。
+            </p>
+        </section>
+
+        <section>
+            <h3>宇宙理工学に関する学習</h3>
+            <p>
+                缶サットやモデルロケットの製作を通じたOJT (On the Job Training :
+                実際の活動を通じて、知識や技術などを身に付ける教育) により、
+                実践力を身に付ける活動を行っている他、
+                高専スペース連携の「高専スペースアカデミア」、
+                岐阜県の「宇宙工学講座」などの遠隔講義に参加し、
+                宇宙理工学について学習しています。
+            </p>
+            <p>
+                また、高専スペースアカデミアの一環として8月下旬に愛媛県新居浜市で開催される3泊4日の合宿形式で行われる宇宙教育イベント「高専スペースキャンプ」に参加しています。
+                その他、サイエンスボランティアや日本航空宇宙学会関係のイベント等にも出展することもあり、コミュニケーション能力などの人間力も養うこともできます。
+            </p>
+        </section>
+
+        <section>
+            <h3>高専連携による超小型衛星開発</h3>
+            <p>
+                高専スペース連携に参画する高専を中心として、超小型衛星の一種であるCubeSat(キューブサット)を開発しています。
+            </p>
+            <p>
+                2021年11月9日にはKOSEN-1が打ち上げられ、現在JAXAの革新的衛星技術実証3号機で打ち上げ予定のKOSEN-2(代表
+                : 米子高専)の開発が進められています。
+            </p>
+        </section>
+    </main>
 </template>
+
+<style scoped>
+@import url("~/assets/styles/page.css");
+</style>
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -28,29 +28,30 @@ useSeoMeta(
            <h3>News</h3>
            <div></div>
            <ul id="news-list">
-                <li v-for="entry in data" :key="(entry.date as number)">
+                <li v-for="entry in data" :key="entry.date as number">
+                    <div>
                        <small>
                            {{
-                            new Date(entry.date as number).toLocaleDateString(
-                                "ja-JP",
-                                { dateStyle: "medium" }
-                            )
+                                new Date(
+                                    entry.date as number
+                                ).toLocaleDateString("ja-JP", {
+                                    dateStyle: "medium",
+                                })
                            }}
                        </small>
                        <div class="new-label" v-if="data?.indexOf(entry) < 2">
                            NEW!
                        </div>
+                    </div>
                    <article
                        v-html="marked.parse(entry.cardContent as string)"
                    ></article>
                    <NuxtLink
                        v-if="entry.entryType === EntryType.Article"
-                        :to="(entry.linkPath as string)"
+                        :to="entry.linkPath as string"
                    >
-                        <Icon
-                            name="material-symbols:keyboard-double-arrow-right-rounded"
-                        />
-                        Read More
+                        <Icon name="material-symbols:arrow-forward-rounded" />
+                        <div>Read More</div>
                    </NuxtLink>
                </li>
            </ul>
@@ -62,7 +63,7 @@ useSeoMeta(
                data-dnt="true"
                data-align="center"
                data-theme="dark"
-                :data-height="16 * 70"
+                :data-height="16 * 40"
                :data-width="16 * 33"
                href="https://twitter.com/SERA_NITGC?ref_src=twsrc%5Etfw"
            >
@@ -115,13 +116,19 @@ main {
    }
    & li > *:first-child {
        margin-left: 0;
+        display: flex;
+        flex-direction: row;
    }
    & li > *:last-child {
        margin-right: 0;
    }
+    & li small {
+        align-content: center;
+    }
    & li .new-label {
        background-color: var(--sun2);
        padding: 0.25rem 0.5rem;
+        margin: auto 0.5rem;
    }
    & li a {
        text-decoration: none;
@@ -141,10 +148,10 @@ main {
    place-self: center;
    width: fit-content;
    & > .twitter-timeline-rendered {
-        display: unset;
-        width: unset;
-        max-width: unset;
-        margin: unset;
+        display: unset !important;
+        width: unset !important;
+        max-width: unset !important;
+        margin: unset !important;
    }
 }

@@ -162,10 +169,36 @@ main {
        width: 90%;
    }

+    #news-list {
+        & li {
+            min-height: 5rem;
+        }
+        & li > *:first-child {
+            flex-direction: column;
+        }
+        & li .new-label {
+            margin: 0.5rem auto;
+        }
+        & li a div {
+            display: none;
+        }
+        & li a span {
+            width: 32px;
+            height: 32px;
+        }
+    }
+
    #twitter {
        margin: 1rem 0;
        width: 90%;
        justify-self: center;
+        justify-content: center;
+        position: relative;
+        & > .twitter-timeline-rendered iframe {
+            position: absolute;
+            inset: 50% auto auto 50%;
+            translate: -50% -50%;
+        }
    }
 }
 </style>
--- a/pages/news/index.vue
+++ b/pages/news/index.vue
@@ -1,19 +1,24 @@
 <script setup lang="ts">
 const { data } = await useFetch("/api/getNewsList");
+
+useSeoMeta(
+    generateSeoMeta(
+        "News",
+        "岐阜高専宇宙工学研究会からのニュースです。",
+        "/sera-logo-text.svg"
+    )
+);
 </script>

 <template>
-    <PageTop
-        text="News"
-        image-path="/images/news-top.jpg"
-    />
+    <PageTop text="News" image-path="/images/news-top.jpg" />
    <main>
        <div class="news-list">
            <NewsCard
                v-for="article in data"
                :key="article.date as number"
                :news-entry="article"
-                :is-new="data?.indexOf(article) < 2"
+                :is-new="(data?.indexOf(article) as number) < 2"
            ></NewsCard>
        </div>
    </main>
--- a/pages/projects/cansat.vue
+++ b/pages/projects/cansat.vue
@@ -1,3 +1,108 @@
+<script setup lang="ts">
+useSeoMeta(
+    generateSeoMeta(
+        "CanSat開発チーム",
+        "岐阜高専宇宙工学研究会の「CanSat開発チーム」についてのページです。",
+        "/images/cansat_top.jpg"
+    )
+);
+</script>
+
 <template>
-    <div>Page: cansat</div>
+    <PageTop text="CanSat開発チーム" image-path="/images/page-top.jpg" />
+    <main>
+        <section>
+            <img
+                src="/images/cansat_top.jpg"
+                alt="CanSat top image"
+                class="float-left"
+            />
+            <p>岐阜高専宇宙工学研究会【SERA】CanSat開発チームです。</p>
+            <p>
+                CanSat開発チームでは、主にCanSat(缶サット)を製作し、缶サット製作を通じて、機械工学、電気電子工学、情報工学、制御工学等を組み合わせた設計・製作・評価能力の向上を目指しています。
+            </p>
+            <p>
+                また、CanSatの各種競技会にも出場している他、オリジナルのCanSatローバーキットの開発も行っております。
+            </p>
+        </section>
+
+        <section>
+            <h2>CanSatとは</h2>
+            <img
+                src="/images/cansat/cansat_01.jpg"
+                alt="CanSat"
+                class="float-right"
+            />
+            <p>
+                CanSatとは、教育用の缶サイズの模擬人工衛星で「宇宙開発の縮小版」とも言われています。漫画『宇宙兄弟』11~12巻では、主人公ムッタらの宇宙飛行士候補生の訓練の一環としてアメリカのARLISSという実在する大会に出場する場面があるなど、宇宙教育の面において注目されている存在です。
+            </p>
+            <p>
+                CanSatには350mL缶サイズやその3倍程度のOpenClassなどのサイズがあり、規定のサイズの中にマイコンやセンサ、モータなどの素子を組み込み、ロケットや気球で上空から放出し、パラシュート等を使用して降下している間や着地後に動作する物となっています。降下中に動作するものから着地後に移動するようなものまで、様々なタイプのCanSatが作られています。
+            </p>
+            <p>
+                SERAが参加している缶サット甲子園では350mL缶サイズ、種子島ロケットコンテストでは
+                OpenClass 直径154mm・高さ300mm以下
+                という規定があり、規定(レギュレーション)は大会ごとにまちまちとなっています。
+            </p>
+            <p>
+                SERAでは、様々なタイプのCanSatの中でも特に「ローバー型」と呼ばれる、駆動部がついており移動機構を備えたCanSatの開発に力を入れております。
+            </p>
+        </section>
+
+        <section>
+            <h2>CanSat開発チームの活動</h2>
+            <img
+                src="/images/cansat/cansat_02.jpg"
+                alt="SERA自作ロケット"
+                class="float-left"
+            />
+            <p>
+                CanSat開発チームでは、毎年缶サット甲子園と種子島ロケットコンテストの2大会に出場しています。優勝を目指してCanSatの設計・製作・改良などを行っています。
+            </p>
+            <p>
+                また新たな試みとして、新入会員の教育題材となるような「教育用ローバーキット」の開発を行っております。
+            </p>
+            <p>
+                CanSat開発チームの活動・受賞歴の詳細は
+                <NuxtLink to="/about/achievements"
+                    >『活動実績』のページ</NuxtLink
+                >
+                をご覧ください。
+            </p>
+        </section>
+
+        <section>
+            <h3>缶サット甲子園</h3>
+            <img
+                src="/images/cansat/koshien2020.jpg"
+                alt="缶サット甲子園"
+                class="float-right"
+            />
+            <p>
+                斬新で独創的な缶サットのCoolさを競う大会として「缶サット甲子園」があります。自分たちでミッションを考えて独自の缶サットを開発し、運用、プレゼンまで行います。様々な技術や経験を身に付けることが出来る大会です。
+                高校生向けの大会となるため、高専では3年生以下でチームを結成し、出場しています。
+            </p>
+            <p>
+                また
+                <NuxtLink to="/projects/rocket">Rocket開発チーム</NuxtLink>
+                と協力し、大会や校内試験で使用する缶サット打ち上げ用ロケットの開発も行っています。
+            </p>
+        </section>
+
+        <section>
+            <h3>種子島ロケットコンテスト</h3>
+            <img
+                src="/images/cansat/seratank-1.png"
+                alt="SERATANK-1"
+                class="float-left"
+            />
+            <p>
+                CanSat開発チームでは、毎年ペイロード部門に出場しています。優勝を目指して新機体の開発を行っています。
+            </p>
+        </section>
+    </main>
 </template>
+
+<style scoped>
+@import url("~/assets/styles/page.css");
+</style>
--- a/pages/projects/edu-robot.vue
+++ b/pages/projects/edu-robot.vue
@@ -1,3 +0,0 @@
-<template>
-    <div>Page: edu-robot</div>
-</template>
--- a/pages/projects/education.vue
+++ b/pages/projects/education.vue
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+useSeoMeta(
+    generateSeoMeta(
+        "教育プロジェクト",
+        "岐阜高専宇宙工学研究会の教育プロジェクトについてのページです。",
+        "/images/education/education-1.jpg"
+    )
+);
+</script>
+
+<template>
+    <PageTop text="教育プロジェクト" image-path="/images/page-top.jpg" />
+    <main>
+        <section>
+            <h2>新入生研修</h2>
+            <p>
+                人工衛星やロケットを開発するためには、それ相応の技術が必要です。
+            </p>
+            <p>
+                SERAの新人研修では、新入生へ「モデルロケット」「プログラミング」「CAD」「材料の加工」「資料作成」の技術を教え、
+                大会への参加などの経験を積むための準備をします。
+                1連の研修が終わると、メンバーと共に大会や活動への参加を通して、実践的な技術を身に着けられます。
+            </p>
+        </section>
+
+        <section>
+            <h2>研修で使用する機材/ソフトウェア</h2>
+        </section>
+
+        <section>
+            <h3>AlphaⅢ</h3>
+            <img
+                src="/images/rocket/alpha3.jpg"
+                alt="Alpha III"
+                class="float-left"
+            />
+            <p>教育用に使われる、小型の火薬ロケットです。</p>
+            <p>
+                モデルロケットの製作、運用の練習として使用しています。
+                教育用と言えど迫力満載で、自作ロケットの基本的な知識を一通り学べます。
+            </p>
+        </section>
+
+        <section>
+            <h3>Raspberry Pi</h3>
+            <img
+                src="/images/education/raspberry-pi-4.jpg"
+                alt="Raspberry Pi 4"
+                class="float-right"
+            />
+            <p>Raspberry財団が開発している、マイクロコンピュータです。</p>
+            <p>
+                我々SERAでは、缶サットを動かすためのコンピュータとして使用しています。
+                プログラミング言語は、主にPythonを使用しています。
+            </p>
+            <p>※こちらの画像は、Raspberry Piの公式ホームページのものです。</p>
+        </section>
+
+        <section>
+            <h3>Fusion360</h3>
+            <p>
+                機械の設計をするソフトウェアです。
+                研修においては、作成した3Dモデルを3Dプリンタで印刷を行うため、より実践的な設計技術を身に付けることが出来ます。
+            </p>
+        </section>
+
+        <section>
+            <h3>Word/Excel/PowerPoint</h3>
+            <p>
+                社会人になっても使用する機会の多い、Microsoft社のソフトウェアです。
+            </p>
+            <p>
+                SERAでは、大会のプレゼン作成や各種会議での資料作成の際に使用しています。
+                研修では、これらのソフトウェアを最低限使用できるように教えます。その後は、実際に使用する機会を設けることで、
+                実践を重ねることで経験を積むことが出来ます。
+            </p>
+        </section>
+
+        <section>
+            <h2>教育用ローバーの開発</h2>
+            <img
+                src="/images/education/education-1.jpg"
+                alt="教育用ローバー"
+                class="float-left"
+            />
+            <p>上記の新人研修とは別に、教育用ローバーを開発しています。</p>
+            <p>
+                新人研修をしてゆく中で学ぶ「プログラミング」「CAD」「材料の加工」などの様々な技術をまとめて学ぼうというプロジェクトです。
+                宇宙に興味を持つ学生を増やす、衛星開発に触れる機会を増やすことを目標に、現在は開発中です。
+            </p>
+            <p>
+                アイデアをお持ちの方、教育用ローバーに触れてみたいという方は、是非ご連絡ください。
+            </p>
+        </section>
+    </main>
+</template>
+
+<style scoped>
+@import url("~/assets/styles/page.css");
+</style>
--- a/pages/projects/index.vue
+++ b/pages/projects/index.vue
@@ -1,4 +1,11 @@
 <script setup lang="ts">
+useSeoMeta(
+    generateSeoMeta(
+        "Projects",
+        "岐阜高専宇宙工学研究会の活動の詳細に関するページです。",
+        "/sera-logo-text.svg"
+    )
+);
 </script>

 <template>
@@ -6,172 +13,58 @@
    <main>
        <ul class="cards-list">
            <li>
-                <NuxtLink to="/projects/cansat">
-                    <img src="/images/cansat_top.jpg" alt="CanSat-s">
-                    <h2>CanSat開発チーム</h2>
-                    <p>SERA CanSat開発チームです。缶サットの製作を中心に活動しており、人工衛星などに関する知識を高めることを目指しています。</p>
-                </NuxtLink>
+                <LinkCard
+                    title="Rocket開発チーム"
+                    description="SERA Rocket開発チームです。モデルロケットの製作を中心に活動しており、ロケットに関する知識を高めることを目指しています。"
+                    link="/projects/rocket"
+                    image-path="/images/rocket_top.jpg"
+                />
            </li>
            <li>
-                <NuxtLink to="/projects/rocket">
-                    <img src="/images/rocket_top.jpg" alt="ロケット達">
-                    <h2>Rocket開発チーム</h2>
-                    <p>SERA Rocket開発チームです。モデルロケットの製作を中心に活動しており、ロケットに関する知識を高めることを目指しています。</p>
-                </NuxtLink>
+                <LinkCard
+                    title="CanSat開発チーム"
+                    description="SERA CanSat開発チームです。缶サットの製作を中心に活動しており、人工衛星などに関する知識を高めることを目指しています。"
+                    link="/projects/cansat"
+                    image-path="/images/cansat_top.jpg"
+                />
            </li>
            <li>
-                <NuxtLink to="/projects/edu-robot">
-                    <img src="/images/education-1.jpg" alt="教育用ローバー">
-                    <h2>教育プロジェクト</h2>
-                    <p>SERAでは主に新入会員の教育を目的に、教育用ローバー(CanSat)の開発を行っています。外部でも使用できるようなキットを目指して開発中です。</p>
-                </NuxtLink>
+                <LinkCard
+                    title="教育プロジェクト"
+                    description="SERAでは主に新入会員の教育を目的に、教育用ローバー(CanSat)の開発を行っています。外部でも使用できるようなキットを目指して開発中です。"
+                    link="/projects/education"
+                    image-path="/images/education/education-1.jpg"
+                />
            </li>
            <li>
-                <NuxtLink to="/projects/kosen-x">
-                    <img src="/images/kosen1_gunma-cgv5-a.JPG" alt="KOSEN-1">
-                    <h2>CubeSat KOSEN-X</h2>
-                    <p>高専連携による超小型衛星開発についてです。高専スペース連携が中心となって製作しているCubeSatのプロジェクトに一部の部員が参加させて頂いております。</p>
-                </NuxtLink>
+                <LinkCard
+                    title="CubeSat KOSEN-X"
+                    description="高専連携による超小型衛星開発についてです。高専スペース連携が中心となって製作しているCubeSatのプロジェクトに一部の部員が参加させて頂いております。"
+                    link="/projects/kosen-x"
+                    image-path="/images/kosen1_gunma-cgv5-a.JPG"
+                />
            </li>
        </ul>
-
-        <LinkCard title="テスト" description="これはテストカードです。" link="/" image-path="/sera-logo-text.svg" />
    </main>
 </template>

 <style scoped>
 .cards-list {
-    --card-width-normal: 25rem;
-    --card-height-normal: 30rem;
-
    list-style: none;
    display: grid;
-    grid: repeat(2, var(--card-height-normal)) / repeat(2, var(--card-width-normal));
+    grid: repeat(2, auto) / repeat(2, auto);
    gap: 2rem;
    width: fit-content;
    padding: 0;
    margin: auto;
 }

-.cards-list li {
-    width: var(--card-width-normal);
-    height: var(--card-height-normal);
-    background-color: var(--starlight);
-    border-radius: 1rem;
-    transition: all 0.2s ease-in-out;
-    & > a {
-        display: grid;
-        grid: 13rem 7rem auto / 1fr;
-        padding: 2rem;
-        text-decoration: none;
-        height: calc(100% - 4rem);
-    }
-}
-
-.cards-list li:hover {
-    transition: all 0.2s ease-in-out;
-    scale: 105%;
-}
-
-.cards-list li a {
-    & > img {
-        width: 20rem;
-        height: auto;
-        max-height: 12rem;
-        place-self: center;
-    }
-    & > h2 {
-        position: relative;
-        color: var(--neptune1);
-        background-color: var(--starlight5);
-        border-radius: 1rem;
-        padding: 1rem 1.5rem;
-    }
-    & > h2::after {
-        display: block;
-        position: absolute;
-        top: 0.75rem;
-        left: 0.6rem;
-        width: 7px;
-        height: 3rem;
-        border-radius: 3px;
-        background-color: var(--neptune1);
-        content: '';
-    }
-    & > p {
-        color: var(--deep-space);
-    }
-}
-
@media screen and (max-width: 1024px) {
    main {
        margin: var(--main-margin-top-bottom) 0;
    }
    .cards-list {
-        --card-width-medium: 20rem;
-        --card-height-medium: 25rem;
-        grid: var(--card-height-medium) / repeat(auto-fill, var(--card-width-medium));
-    }
-    .cards-list li {
-        width: var(--card-width-medium);
-        height: var(--card-height-medium);
-    }
-    .cards-list li a {
-        grid: 10rem 5rem auto / 1fr;
-        padding: 1rem;
-        & > img {
-            width: 15rem;
-            margin: 0.5rem 0;
-        }
-        & > h2 {
-            font-size: 16pt;
-            margin: 0.5rem 0;
-            height: fit-content;
-        }
-        & > h2::after {
-            height: 2rem;
-            top: 1rem;
-            width: 5px;
-        }
-        & > p {
-            margin: 0.5rem 0;
-        }
-    }
-}
-
-@media screen and (max-width: 640px) {
-    main {
-        margin: var(--main-margin-top-bottom) 0;
-    }
-    .cards-list {
-        --card-width-small: 18rem;
-        --card-height-small: 25rem;
-        grid: var(--card-height-small) / repeat(auto-fill, var(--card-width-small));
-    }
-    .cards-list li {
-        width: var(--card-width-small);
-        height: var(--card-height-small);
-    }
-    .cards-list li a {
-        grid: 9rem 5rem auto / 1fr;
-        padding: 1rem;
-        & > img {
-            width: 12rem;
-            margin: 0.5rem 0;
-        }
-        & > h2 {
-            font-size: 16pt;
-            margin: 0.5rem 0;
-            height: fit-content;
-        }
-        & > h2::after {
-            height: 2rem;
-            top: 1rem;
-            width: 5px;
-        }
-        & > p {
-            margin: 0.5rem 0;
-        }
+        grid: repeat(4, 1fr) / 1fr;
    }
 }
 </style>
--- a/pages/projects/kosen-x.vue
+++ b/pages/projects/kosen-x.vue
@@ -1,3 +1,87 @@
+<script setup lang="ts">
+useSeoMeta(
+    generateSeoMeta(
+        "CubeSat KOSEN-X",
+        "岐阜高専宇宙工学研究会の高専連携衛星プロジェクトに関するページです。",
+        "/images/kosen1_gunma-cgv5-a.JPG"
+    )
+);
+</script>
+
 <template>
-    <div>Page: kosen-x</div>
+    <PageTop text="CubeSat KOSEN-X" image-path="/images/page-top.jpg" />
+    <main>
+        <section>
+            <p>
+                宇宙に打ち上げる本物の超小型人工衛星を他高専の教員や学生と協力して開発するプロジェクトです。
+            </p>
+            <p>
+                高専の授業、実習やSERAで身に付けたことを存分に発揮することで、
+                社会人技術者が仕事で求められるような事柄を学生のうちから経験し、身に付けることが出来ます。
+            </p>
+            <p>
+                2021年11月9日に、高知高専を中心とする木星電波観測技術実証衛星
+                KOSEN-1が打ち上げられ、現在運用されています。
+                並行して、米子高専を中心とする海洋観測データ収集衛星
+                KOSEN-2の開発が進められています。
+            </p>
+            <p>
+                KOSEN-1、KOSEN-2ともに宇宙航空研究開発機構(JAXA)のイプシロンロケットで打ち上げられます。
+            </p>
+        </section>
+
+        <section>
+            <p>詳細はこちらから</p>
+            <p>[KOSEN-1]</p>
+            <ul>
+                <li>
+                    <NuxtLink
+                        to="http://www.kenkai.jaxa.jp/kakushin/kakushin02.html"
+                    >
+                        JAXA革新的衛星技術実証2号機
+                    </NuxtLink>
+                </li>
+                <li>
+                    <NuxtLink to="https://www.kochi-ct.ac.jp/news/archives/247">
+                        高知高専の新着情報
+                    </NuxtLink>
+                </li>
+            </ul>
+            <p>[KOSEN-2]</p>
+            <ul>
+                <li>
+                    <NuxtLink
+                        to="https://www.kenkai.jaxa.jp/kakushin/kakushin03.html"
+                    >
+                        JAXA革新的衛星技術実証3号機
+                    </NuxtLink>
+                </li>
+                <li>
+                    <NuxtLink
+                        to="https://www.yonago-k.ac.jp/a112/a116/a117/b383/"
+                    >
+                        米子高専の新着情報
+                    </NuxtLink>
+                </li>
+            </ul>
+        </section>
+
+        <section>
+            <img src="/images/kosen1_gunma-cgv5-a.JPG" alt="KOSEN-1" />
+            <p>画像：菅原達弥(群馬高専)</p>
+        </section>
+    </main>
 </template>
+
+<style scoped>
+@import url("~/assets/styles/page.css");
+
+section:last-of-type {
+    width: fit-content;
+    justify-self: center;
+}
+
+img {
+    width: 60rem;
+}
+</style>
--- a/pages/projects/rocket.vue
+++ b/pages/projects/rocket.vue
@@ -1,109 +1,102 @@
+<script setup lang="ts">
+useSeoMeta(
+    generateSeoMeta(
+        "Rocket開発チーム",
+        "岐阜高専宇宙工学研究会の「Rocket開発チーム」についてのページです。",
+        "/images/rocket_top.jpg"
+    )
+);
+</script>
+
 <template>
    <PageTop text="Rocket開発チーム" image-path="/images/page-top.jpg" />
    <main>
        <section>
-            <img src="/images/rocket_top.jpg" alt="Rocket top image" class="float-left">
+            <img
+                src="/images/rocket_top.jpg"
+                alt="Rocket top image"
+                class="float-left"
+            />
            <p>岐阜高専・宇宙工学研究会【SERA】Rocket開発チームです。</p>
-            <p>Rocket開発チームは、主に自作のモデルロケットを製作しており、モデルロケット製作を通じた設計・製作・評価能力の向上を目指しています。</p>
-            <p>また、モデルロケットの各種競技会にも出場している他、新入生向けのモデルロケット打上げ体験等を行っております。</p>
+            <p>
+                Rocket開発チームは、主に自作のモデルロケットを製作しており、モデルロケット製作を通じた設計・製作・評価能力の向上を目指しています。
+            </p>
+            <p>
+                また、モデルロケットの各種競技会にも出場している他、新入生向けのモデルロケット打上げ体験等を行っております。
+            </p>
        </section>

        <section>
            <h2>モデルロケットとは</h2>
-            <img src="/images/rocket/alpha3.jpg" alt="Alpha III" class="float-right">
-            <p>モデルロケットは、火薬エンジンを使用しておよそ時速180km (モデルロケット：AlphaⅢ、エンジン：A8-3の場合) で大空高く飛ぶ模型ロケットです。世界で50年間5億回無事故を記録しています。(日本モデルロケット協会HPより)</p>
-            <p>モデルロケットの打ち上げにはライセンスの取得が必要であり、C型のエンジンを扱うには4級ライセンス、G型ロケットを扱うには3級ライセンスが必要となります。</p>
-            <p>画像は「AlphaⅢ」という、入門用モデルロケットです。約50mほどの高度まで打ち上げることが可能です(A8-3エンジンを使用した場合)。 簡単に製作できるようになっている為、モデルロケット教室やSERA新入生向け打上げ体験などで広く使用されています。</p>
+            <img
+                src="/images/rocket/alpha3.jpg"
+                alt="Alpha III"
+                class="float-right"
+            />
+            <p>
+                モデルロケットは、火薬エンジンを使用しておよそ時速180km
+                (モデルロケット：AlphaⅢ、エンジン：A8-3の場合)
+                で大空高く飛ぶ模型ロケットです。世界で50年間5億回無事故を記録しています。(日本モデルロケット協会HPより)
+            </p>
+            <p>
+                モデルロケットの打ち上げにはライセンスの取得が必要であり、C型のエンジンを扱うには4級ライセンス、G型ロケットを扱うには3級ライセンスが必要となります。
+            </p>
+            <p>
+                画像は「AlphaⅢ」という、入門用モデルロケットです。約50mほどの高度まで打ち上げることが可能です(A8-3エンジンを使用した場合)。
+                簡単に製作できるようになっている為、モデルロケット教室やSERA新入生向け打上げ体験などで広く使用されています。
+            </p>
            <p>
                モデルロケット・エンジンやライセンスについての詳細は、
-                <NuxtLink to="https://www.ja-r.net/">日本モデルロケット協会HP</NuxtLink>
+                <NuxtLink to="https://www.ja-r.net/">
+                    日本モデルロケット協会HP
+                </NuxtLink>
                をご覧ください。
            </p>
        </section>

        <section>
            <h2>Rocket開発チームの活動</h2>
-            <img src="/images/rocket/rocket_02.jpg" alt="2 staged rocket" class="float-left">
-            <p>Rocket開発チームでは、毎年種子島ロケットコンテストに出場しています。優勝を目指してロケットの設計・解析・製作などを行っています。</p>
+            <img
+                src="/images/rocket/rocket_02.jpg"
+                alt="2 staged rocket"
+                class="float-left"
+            />
+            <p>
+                Rocket開発チームでは、毎年種子島ロケットコンテストに出場しています。優勝を目指してロケットの設計・解析・製作などを行っています。
+            </p>
            <p>
                また、オリジナルのモデルロケットや缶サット搭載用ロケットの製作も行っています。缶サット搭載用ロケットは、缶サット甲子園の大会及び校内試験を行う為に
                <NuxtLink to="/projects/cansat">CanSat開発チーム</NuxtLink>
-                と協力して製作・改良を行っています。</p>
+                と協力して製作・改良を行っています。
+            </p>
            <p>
                Rocket開発チームの活動・受賞歴の詳細は
-                <NuxtLink to="/about/achievements">『活動実績』のページ</NuxtLink>
+                <NuxtLink to="/about/achievements">
+                    『活動実績』のページ
+                </NuxtLink>
                をご覧ください。
            </p>
        </section>

        <section>
            <h3>種子島ロケットコンテスト</h3>
-            <p>Rocket開発チームでは、滞空・定点回収部門と高度部門への出場経験があります。第13回大会では、<strong>滞空・定点回収部門で優勝</strong>を収めました。この優勝を機に、同好会へと昇進することが出来たのです。</p>
+            <p>
+                Rocket開発チームでは、滞空・定点回収部門と高度部門への出場経験があります。第13回大会では、<strong>滞空・定点回収部門で優勝</strong>を収めました。この優勝を機に、同好会へと昇進することが出来たのです。
+            </p>
        </section>

        <section>
            <h3>缶サット搭載用ロケット</h3>
-            <p>CanSat開発チームと協力し、缶サット甲子園で使用する為のモデルロケットを製作しています。</p>
-            <p>これらはペイロードロケットと呼ばれ、缶サットを上空に打ち上げることを目的に設計されています。</p>
+            <p>
+                CanSat開発チームと協力し、缶サット甲子園で使用する為のモデルロケットを製作しています。
+            </p>
+            <p>
+                これらはペイロードロケットと呼ばれ、缶サットを上空に打ち上げることを目的に設計されています。
+            </p>
        </section>
    </main>
 </template>

 <style scoped>
-main {
-    display: grid;
-    width: 60%;
-    justify-self: center;
-}
-
-section {
-    display: block;
-}
-
-img {
-    width: 20rem;
-}
-
-p {
-    margin: 0.5rem 0;
-}
-
-.float-right {
-    float: right;
-    margin-left: 2rem;
-}
-
-.float-left {
-    float: left;
-    margin-right: 2rem;
-}
-
-a, h2 {
-    color: var(--neptune1);
-}
-
-a:visited {
-    color: var(--neptune1);
-}
-
-h3 {
-    color: var(--neptune2);
-}
-
-strong {
-    color: var(--sun4);
-}
-
-@media screen and (max-width: 1024px) {
-    main {
-        width: 90%;
-        margin: 1rem;
-    }
-    section {
-        display: inherit;
-    }
-    img {
-        margin: auto !important;
-    }
-}
+@import url("~/assets/styles/page.css");
 </style>
--- a/server/api/getGalleryImages.ts
+++ b/server/api/getGalleryImages.ts
@@ -0,0 +1,51 @@
+/**
+ * Getting List of URL to the images under /public/images/gallery/
+ * @module api/getGalleryImages
+ */
+import sqlite3 from "sqlite3";
+import path from "path";
+import { fileURLToPath } from "url";
+import type { GalleryEntry } from "~/utils/galleryEntry";
+import { asyncDatabaseRead } from "~/utils/asyncDatabase";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+/**
+ * Handler of getImages event
+ * @name getImagesEventHandler
+ * @param {H3Event<EventHandlerRequest>} event
+ * @returns {Array<GalleryEntry>} list of image entry
+ * @function
+ */
+const getGalleryImagesEventHandler = defineEventHandler(async (event: any) => {
+    const database = new sqlite3.Database(
+        path.join(__dirname, "../../assets/databases/gallery.db")
+    );
+
+    const sql = `SELECT * FROM gallery;`;
+
+    let res: Array<GalleryEntry> = new Array<GalleryEntry>(0);
+
+    try {
+        res = await asyncDatabaseRead<Array<GalleryEntry>>(
+            database,
+            sql,
+            (rows) => {
+                return rows as Array<GalleryEntry>;
+            }
+        );
+    } catch (err: any) {
+        const error = err as Error;
+        throw createError({
+            statusCode: 500,
+            statusMessage: error.message,
+        });
+    }
+
+    database.close();
+
+    return res;
+});
+
+export default getGalleryImagesEventHandler;
--- a/utils/dropDown.ts
+++ b/utils/dropDown.ts
@@ -40,14 +40,12 @@ interface DropDownEntry {
 * @property {string} label Label of the component
 * @property {(DropDownMode | string)} mode Interaction mode of the component
 * @property {Array<DropDownEntry>} entries Entries of DropDown menu
- * @property {boolean} showInMobile Whether to show the component in mobile(<640px) environemnt
 * @property {(DropDownAlignment | number)=} alignment Explicitly assign the alignment of the component
 */
 interface DropDownProperty {
    label: string;
    mode: DropDownMode | string;
    entries: Array<DropDownEntry>;
-    showInMobile: boolean;
    alignment?: DropDownAlignment | number;
 }

--- a/utils/galleryEntry.ts
+++ b/utils/galleryEntry.ts
@@ -0,0 +1,18 @@
+/**
+ * Types for gallery image entry data
+ * @module utils/galleryEntry
+ */
+
+/**
+ * Interface for gallery image entry
+ * @property {number} id id from database
+ * @property {string} imagePath image URL
+ * @property {string} caption caption of the image
+ */
+interface GalleryEntry {
+    id: number;
+    imagePath: string;
+    caption: string;
+}
+
+export type { GalleryEntry };
--- a/utils/generateSeoMeta.ts
+++ b/utils/generateSeoMeta.ts
@@ -31,18 +31,41 @@ export function generateSeoMeta(
    imagePath: string,
    type?: "website" | "article"
 ): UseSeoMetaInput {
+    const titleComposer = (title: string): string => {
+        return title + " - 岐阜高専宇宙工学研究会";
+    };
+
+    const descriptionComposer = (description: string): string => {
+        return (
+            description +
+            " - 岐阜高専宇宙工学研究会【SERA】公式ホームページです。航空や宇宙に興味がある学生が所属しており、モデルロケットや缶サット製作などを中心に宇宙に関する知識を高めるために活動しています。"
+        );
+    };
+
    return {
        title: title,
-        ogTitle: title + " - 岐阜高専宇宙工学研究会",
-        twitterTitle: title + " - 岐阜高専宇宙工学研究会",
-        description: description,
-        ogDescription: description,
-        twitterDescription: description,
+        ogTitle: titleComposer(title),
+        twitterTitle: titleComposer(title),
+        description: descriptionComposer(description),
+        ogDescription: descriptionComposer(description),
+        twitterDescription: descriptionComposer(description),
        ogImage: imagePath,
        twitterImage: imagePath,
        twitterCard: "summary",
+        twitterSite: "@SERA_NITGC",
        charset: "utf-8",
        ogLocale: "ja_JP",
        ogType: type || "website",
+        articleTag: [
+            "宇宙工学研究会",
+            "SERA",
+            "岐阜高専",
+            "岐阜工業高等専門学校",
+            "クラブ活動",
+            "部活動",
+            "同好会",
+            "宇宙",
+            "研究会",
+        ],
    };
 }
--- a/utils/qAndABox.ts
+++ b/utils/qAndABox.ts
@@ -0,0 +1,14 @@
+/**
+ * Types for QAndABox component
+ * @module utils/qAndABox
+ */
+
+/**
+ * Interface that defines property for QAndABox component
+ * @property {string} question
+ */
+interface QAndABoxProperty {
+    question: string;
+}
+
+export type { QAndABoxProperty };