Updated and added pages

This commit is contained in:
2024-10-09 01:40:36 +09:00
parent 780905fb4e
commit 545ac73e0e
37 changed files with 1552 additions and 291 deletions

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>