create activity page

Hoshimikan6490 · Dec 31, 2024 · 62c9e71 · 62c9e71
1 parent 06396c5
commit 62c9e71
Show file tree

Hide file tree

Showing 17 changed files with 171 additions and 29 deletions.
diff --git a/activity.html b/activity.html
@@ -0,0 +1,160 @@
+<!DOCTYPE html>
+<html lang="ja">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" href="./images/logo.ico">
+    <link rel="apple-touch-icon" href="./images/logo.ico">
+    <link rel="stylesheet" href="style.css" type="text/css">
+    <title>執筆した記事や作成した動画｜Hoshimikan6490</title>
+</head>
+
+<body>
+    <header>
+        <div class="headerContents">
+            <div class="headerLeft">
+                <a href="/" rel="noreferrer">
+                    <img src="./images/logo.webp" alt="私のアイコン" class="myIcon">
+                    <div class="Myname">
+                        <p>Hoshimikan6490</p>
+                    </div>
+                </a>
+            </div>
+            <div class="headerRight">
+                <a href="https://github.com/Hoshimikan6490/hoshimikan6490.github.io" target="_blank"
+                    rel="noopener noreferrer">
+                    <img alt="このWebサイトのプログラムが見られるボタン"
+                        src="https://img.shields.io/badge/View%20on%20Github-grey?style=for-the-badge&logo=github">
+                </a>
+            </div>
+        </div>
+    </header>
+
+    <main>
+        <div>
+            <h1>note.comで執筆した記事</h1>
+            <div class="center_contents">
+                <div class="articles">
+                    <a href="https://note.com/hoshimikan6490/n/n9ca007d49fe7" target="_blank" rel="noopener noreferrer">
+                        <div class="article">
+                            <h3><span>Makecodeで</span><span>簡単地上絵作成！</span></h3>
+                            <img src="./images/how-to-make-tijoe.png" style="width: 100%;">
+                        </div>
+                    </a>
+                    <a href="https://note.com/hoshimikan6490/n/n63aca5db3930" target="_blank" rel="noopener noreferrer">
+                        <div class="article">
+                            <h3><span>Discordの</span><span>アナウンス</span><span>チャンネル</span><span>とは？</span></h3>
+                            <img src="./images/What-is-discord_announce_channel.png" style="width: 100%;">
+                        </div>
+                    </a>
+                    <a href="https://note.com/hoshimikan6490/n/n2724da615893" target="_blank" rel="noopener noreferrer">
+                        <div class="article">
+                            <h3><span>Minecraft Education Editionで</span><span>カスタムスキン</span><span>を使う方法</span>
+                            </h3>
+                            <img src="./images/how-to-use-custom_skin.webp" style="width: 100%;">
+                        </div>
+                    </a>
+                    <a href="https://note.com/hoshimikan6490/n/n95ebebb9165a" target="_blank" rel="noopener noreferrer">
+                        <div class="article">
+                            <h3><span>TweetShiftの</span><span>使い方</span></h3>
+                            <img src="./images/how-to-use-tweetshift.webp" style="width: 100%;">
+                        </div>
+                    </a>
+                    <a href="https://note.com/hoshimikan6490/n/n866694be9c06" target="_blank" rel="noopener noreferrer">
+                        <div class="article">
+                            <h3><span>surface
+                                    go</span><span>で</span><span>Java</span><span>マイクラ</span><span>やってみた</span><span>！！</span>
+                            </h3>
+                            <img src="./images/java-minecraft-on-surface-go.webp" style="width: 100%;">
+                        </div>
+                    </a>
+                    <a href="https://note.com/hoshimikan6490/n/nc56eb9303c2d" target="_blank" rel="noopener noreferrer">
+                        <div class="article">
+                            <h3><span>Minecraft</span><span> Education</span><span>
+                                    Edition</span><span>(教育版</span><span>Minecraft)</span><span>を</span><span>更新</span><span>しよう</span><span>！</span>
+                            </h3>
+                            <img src="./images/how-to-update-mcedu.webp" style="width: 100%;">
+                        </div>
+                    </a>
+                    <a href="https://note.com/hoshimikan6490/n/n702e4f7fe783" target="_blank" rel="noopener noreferrer">
+                        <div class="article">
+                            <h3><span>Minecraft</span><span> Education</span><span>
+                                    Edition</span><span>を</span><span>再インストール</span><span>する</span><span>方法</span></h3>
+                            <img src="./images/how-to-re-install-mcedu.webp" style="width: 100%;">
+                        </div>
+                    </a>
+                    <a href="https://note.com/hoshimikan6490/n/nd27d7f3851e7" target="_blank" rel="noopener noreferrer">
+                        <div class="article">
+                            <h3><span>windows</span><span>の</span><span>タスクバー</span><span>に</span><span>「サウンドの</span><span>詳細設定」</span><span>の</span><span>ショートカット</span><span>を</span><span>置く</span><span>方法</span>
+                            </h3>
+                            <img src="./images/open-sound-property.gif" style="width: 100%;">
+                        </div>
+                    </a>
+                </div>
+            </div>
+            <div class="article_buttons">
+                <a href="https://note.com/hoshimikan6490" class="button" target="_blank"
+                    rel="noopener noreferrer">個人noteの記事をもっと見る</a>
+                <a href="https://note.kogakuin.ac.jp/n/n3c23a1c3295c" class="button" target="_blank"
+                    rel="noopener noreferrer">大学noteの記事を見る</a>
+            </div>
+        </div>
+        <br>
+        <div>
+            <h1>大学の委員会で執筆した記事</h1>
+            <div class="center_contents">
+                <div class="articles">
+                    <a href="https://kogakuintimes.com/2024/04/06/shinnyuseikangeikaizenjitsujumbi-mitchaku/"
+                        target="_blank" rel="noopener noreferrer">
+                        <div class="article">
+                            <h3><span>工学院大学</span><span>　新入生</span><span>歓迎会</span><span>実行委員会</span><span>の</span><span>前日</span><span>準備に</span><span>密着</span><span>！！</span>
+                            </h3>
+                            <img src="./images/kogakuinTimes_shinkan-interview.png" style="width: 100%;">
+                        </div>
+                    </a>
+                    <a href="https://kogakuintimes.com/2023/11/28/shinjukusai_shokurepo/" target="_blank"
+                        rel="noopener noreferrer">
+                        <div class="article">
+                            <h3><span>【新宿祭】</span><span>模擬店に</span><span>行って</span><span>食べて</span><span>みた</span><span>！！</span>
+                            </h3>
+                            <img src="./images/kogakuinTimes_shinjukusai-syokurepo.png" style="width: 100%;">
+                        </div>
+                    </a>
+                </div>
+            </div>
+            <div class="article_buttons">
+                <a href="https://kogakuintimes.com/author/hoshimikan/" class="button" target="_blank"
+                    rel="noopener noreferrer">もっと見る</a>
+            </div>
+        </div>
+        <br>
+        <div>
+            <h1>公開した動画</h1>
+            <div class="center_contents">
+                <div class="articles">
+                    <a href="https://youtu.be/Ud1LILCsBFA" target="_blank" rel="noopener noreferrer">
+                        <div class="article">
+                            <h3><span>discordで人やBOTに管理者権限を与える方法</span></h3>
+                            <img src="./images/youtube_how-to-add-admin-on-discord.jpg" style="width: 100%;">
+                        </div>
+                    </a>
+                    <a href="https://youtu.be/DcdiHT4TY4E" target="_blank" rel="noopener noreferrer">
+                        <div class="article">
+                            <h3><span>熱ブロックの作り方</span></h3>
+                            <img src="./images/youtube_how-to-make-heatBlock.jpg" style="width: 100%;">
+                        </div>
+                    </a>
+                </div>
+            </div>
+            <div class="article_buttons">
+                <a href="https://kogakuintimes.com/author/hoshimikan/" class="button" target="_blank"
+                    rel="noopener noreferrer">旧チャンネルの動画をもっと見る</a>
+                <a href="https://kogakuintimes.com/author/hoshimikan/" class="button" target="_blank"
+                    rel="noopener noreferrer">新チャンネルの動画をもっと見る</a>
+            </div>
+        </div>
+    </main>
+</body>
+
+</html>
diff --git a/images/What-is-discord_announce_channel.png b/images/What-is-discord_announce_channel.png
diff --git a/images/What-is-discord_announce_channel.webp b/images/What-is-discord_announce_channel.webp
diff --git a/images/how-to-make-tijoe.png b/images/how-to-make-tijoe.png
diff --git a/images/how-to-make-tijoe.webp b/images/how-to-make-tijoe.webp
diff --git a/images/how-to-re-install-mcedu.webp b/images/how-to-re-install-mcedu.webp
diff --git a/images/how-to-update-mcedu.webp b/images/how-to-update-mcedu.webp
diff --git a/images/java-minecraft-on-surface-go.webp b/images/java-minecraft-on-surface-go.webp
diff --git a/images/kogakuinTimes_shinjukusai-syokurepo.png b/images/kogakuinTimes_shinjukusai-syokurepo.png
diff --git a/images/kogakuinTimes_shinkan-interview.png b/images/kogakuinTimes_shinkan-interview.png
diff --git a/images/open-sound-property.gif b/images/open-sound-property.gif
diff --git a/images/youtube_how-to-add-admin-on-discord.jpg b/images/youtube_how-to-add-admin-on-discord.jpg
diff --git a/images/youtube_how-to-make-heatBlock.jpg b/images/youtube_how-to-make-heatBlock.jpg
diff --git a/index.html b/index.html
@@ -69,9 +69,15 @@ <h1>Hoshimikan6490</h1>
         </div>
         <br>
         <div>
-            <h1>執筆した記事</h1>
+            <h1>活動実績(執筆した記事や作成した動画など)</h1>
             <div class="center_contents">
                 <div class="articles">
+                    <a href="https://note.com/hoshimikan6490/n/n9ca007d49fe7" target="_blank" rel="noopener noreferrer">
+                        <div class="article">
+                            <h3><span>Makecodeで</span><span>簡単地上絵作成！</span></h3>
+                            <img src="./images/how-to-make-tijoe.webp" style="width: 100%;">
+                        </div>
+                    </a>
                     <a href="https://note.com/hoshimikan6490/n/n63aca5db3930" target="_blank" rel="noopener noreferrer">
                         <div class="article">
                             <h3><span>Discordの</span><span>アナウンス</span><span>チャンネル</span><span>とは？</span></h3>
@@ -91,21 +97,10 @@ <h3><span>TweetShiftの</span><span>使い方</span></h3>
                             <img src="./images/how-to-use-tweetshift.webp" style="width: 100%;">
                         </div>
                     </a>
-                    <a href="https://note.com/hoshimikan6490/n/n9ca007d49fe7" target="_blank" rel="noopener noreferrer">
-                        <div class="article">
-                            <h3><span>Makecodeで</span><span>簡単地上絵作成！</span></h3>
-                            <img src="./images/how-to-make-tijoe.webp" style="width: 100%;">
-                        </div>
-                    </a>
                 </div>
             </div>
             <div class="article_buttons">
-                <a href="https://note.com/hoshimikan6490" class="button" target="_blank"
-                    rel="noopener noreferrer">個人noteの記事をもっと見る</a>
-                <a href="https://note.kogakuin.ac.jp/n/n3c23a1c3295c" class="button" target="_blank"
-                    rel="noopener noreferrer">大学noteの記事を見る</a>
-                <a href="https://kogakuintimes.com/author/hoshimikan/" class="button" target="_blank"
-                    rel="noopener noreferrer">note以外の記事を見る</a>
+                <a href="/activity" class="button" target="_blank" rel="noopener noreferrer">その他の活動をもっと見る</a>
             </div>
         </div>
         <br>

diff --git a/index.js b/index.js
@@ -9,8 +9,8 @@ app.get("/", async function (req, res) {
   res.sendFile(__dirname + "/index.html");
 });
 
-app.get("/sakuhin", async function (req, res) {
-  res.sendFile(__dirname + "/sakuhin.html");
+app.get("/activity", async function (req, res) {
+  res.sendFile(__dirname + "/activity.html");
 });
 
 app.get("/style.css", async function (req, res) {

diff --git a/sakuhin.html b/sakuhin.html
diff --git a/style.css b/style.css
@@ -97,7 +97,7 @@ main {
     display: flex;
     max-width: 1600px;
     margin: 0 auto;
-    padding: 0 20px 20px;
+    padding: 0 20px;
     justify-content: center;
     align-items: center;
 }
@@ -154,7 +154,6 @@ a.button {
 }
 
 .article_buttons {
-    margin-top: 20px;
     text-align: center;
 }