10/3/24

pages/projects/index.vue

@@ -1,3 +1,177 @@
+<script setup lang="ts">
+</script>
+
 <template>
-    <div>Page: index</div>
+    <PageTop text="Projects" image-path="/images/page-top.jpg" />
+    <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>
+            </li>
+            <li>
+                <NuxtLink to="/projects/rocket">
+                    <img src="/images/rocket_top.jpg" alt="ロケット達">
+                    <h2>Rocket開発チーム</h2>
+                    <p>SERA Rocket開発チームです。モデルロケットの製作を中心に活動しており、ロケットに関する知識を高めることを目指しています。</p>
+                </NuxtLink>
+            </li>
+            <li>
+                <NuxtLink to="/projects/edu-robot">
+                    <img src="/images/education-1.jpg" alt="教育用ローバー">
+                    <h2>教育プロジェクト</h2>
+                    <p>SERAでは主に新入会員の教育を目的に、教育用ローバー(CanSat)の開発を行っています。外部でも使用できるようなキットを目指して開発中です。</p>
+                </NuxtLink>
+            </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>
+            </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));
+    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;
+        }
+    }
+}
+</style>

pages/projects/rocket.vue

@@ -1,3 +1,109 @@
 <template>
-    <div>Page: rocket</div>
+    <PageTop text="Rocket開発チーム" image-path="/images/page-top.jpg" />
+    <main>
+        <section>
+            <img src="/images/rocket_top.jpg" alt="Rocket top image" class="float-left">
+            <p>岐阜高専・宇宙工学研究会【SERA】Rocket開発チームです。</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>
+            <p>
+                モデルロケット・エンジンやライセンスについての詳細は、
+                <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>
+            <p>
+                また、オリジナルのモデルロケットや缶サット搭載用ロケットの製作も行っています。缶サット搭載用ロケットは、缶サット甲子園の大会及び校内試験を行う為に
+                <NuxtLink to="/projects/cansat">CanSat開発チーム</NuxtLink>
+                と協力して製作・改良を行っています。</p>
+            <p>
+                Rocket開発チームの活動・受賞歴の詳細は
+                <NuxtLink to="/about/achievements">『活動実績』のページ</NuxtLink>
+                をご覧ください。
+            </p>
+        </section>
+
+        <section>
+            <h3>種子島ロケットコンテスト</h3>
+            <p>Rocket開発チームでは、滞空・定点回収部門と高度部門への出場経験があります。第13回大会では、<strong>滞空・定点回収部門で優勝</strong>を収めました。この優勝を機に、同好会へと昇進することが出来たのです。</p>
+        </section>
+        
+        <section>
+            <h3>缶サット搭載用ロケット</h3>
+            <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;
+    }
+}
+</style>