セッション一覧実装

Author: Fukusan64

_data/sessions.yml

@@ -6,8 +6,8 @@
   tag: 基調講演
   url: /sessions/keynote1/
   outline: |
-    生成AIの急速な進展により、「プログラミングを学ぶこと」の意味や価値そのものが、根本から問い直される時代がきています。
-    だからこそ今、子どもたちが〈つくる〉ことを楽しみ、世代を超えた仲間と学び合う CoderDojo コミュニティのような学びの場が、これまで以上に重要な意味を持ってきます。
+    生成AIの急速な進展により、「プログラミングを学ぶこと」の意味や価値そのものが、根本から問い直される時代がきています。<br />
+    だからこそ今、子どもたちが〈つくる〉ことを楽しみ、世代を超えた仲間と学び合う CoderDojo コミュニティのような学びの場が、これまで以上に重要な意味を持ってきます。<br />
     本講演では、「教育・学びとは何か」を根底から問い直す視点から、プログラミング教育の脱構築を提案し、これからの CoderDojo のあり方も皆さんと考えていきたいと思います。
 
 - title: 生成AI時代における子どもたちに必要な力とは？
@@ -18,8 +18,8 @@
   tag: 招待講演
   url: /sessions/keynote2/
   outline: |
-    生成AIが瞬時に答えを導く時代において、子どもたちに本当に必要なのは「問いを立てる力」です。
-    本講演では、AIに頼るだけでは得られない学びとして、現場体験や五感を通じた身体知、そしてアナログとデジタルをつなぐ教育の可能性を探ります。
+    生成AIが瞬時に答えを導く時代において、子どもたちに本当に必要なのは「問いを立てる力」です。<br />
+    本講演では、AIに頼るだけでは得られない学びとして、現場体験や五感を通じた身体知、そしてアナログとデジタルをつなぐ教育の可能性を探ります。<br />
     効率化の先にある“人間ならではの学び”をどう育むのかを考えます。
 
 - title: エンジニアではない私がCoderDojoを立ち上げた
@@ -31,8 +31,8 @@
   url: /sessions/session1/
   outline: |
     プログラミングも出来ない、PCのことも詳しくない、8歳と4歳の子どものママでしかなかった私が、CoderDojo久留米と出会い、息子と通い、そこで出会った人達に憧れ、
-    自分も新しい事にチャレンジしたい、そしてその姿を子どもに見せたいと思いCoderDojo 早良を立ち上げました。
-    しかし知識がない私は立ち上げと運営に苦戦する日々、そんな時に息子がメンターとして助けてくれるように。
+    自分も新しい事にチャレンジしたい、そしてその姿を子どもに見せたいと思いCoderDojo 早良を立ち上げました。<br />
+    しかし知識がない私は立ち上げと運営に苦戦する日々、そんな時に息子がメンターとして助けてくれるように。<br />
     初回から参加応募30人を超え、チャンピオンに知識がなくとも、みんなで探求する唯一無二のCoderDojo早良です。
 
 - title: CoderDojoに救われて現在親子でメンターをやっている話
@@ -43,11 +43,9 @@
   tag: セッション
   url: /sessions/session2/
   outline: |
-    こだわりが強く周囲に馴染めず不登校だった息子は、主体的に学べるCoderDojoで居場所を感じられました。
-    今では親子でCoderDojoのメンターになり仲間ができ楽しく活動しています。
-    本能のまま意欲的に次々作品やシステムを作り、現在は有難いことに開発の仕事もいただいています。
-
-    好奇心が強すぎる子への関わりについて、母親の立場から自身の経験をお話します。
-    偉そうに言える立場ではないですが経験談として参考程度に聞いていただければ幸いです。
-
+    こだわりが強く周囲に馴染めず不登校だった息子は、主体的に学べるCoderDojoで居場所を感じられました。<br />
+    今では親子でCoderDojoのメンターになり仲間ができ楽しく活動しています。<br />
+    本能のまま意欲的に次々作品やシステムを作り、現在は有難いことに開発の仕事もいただいています。<br />
+    好奇心が強すぎる子への関わりについて、母親の立場から自身の経験をお話します。<br />
+    偉そうに言える立場ではないですが経験談として参考程度に聞いていただければ幸いです。<br />
     息子本人からも開発の楽しさについて語ります。

_pages/sessions.md

@@ -0,0 +1,43 @@
+---
+layout: default
+permalink: /sessions/
+title: セッション
+---
+{% include navbar.html %}
+
+<h2 class="text-4xl text-center mb-8 mt-30 xl:mt-15">
+  セッション
+  <span class="block mt-5 text-2xl">SESSTIONS</span>
+</h2>
+
+<ul class="max-w-7xl mx-auto mb-8 px-4 sm:px-8 flex flex-wrap justify-between gap-y-16">
+  {% for session in site.data.sessions %}
+    <li class="w-full md:w-[47%] rounded-xl">
+      {% if session.url %}
+        <a href="{{ session.url }}">
+          <h3 class="text-2xl mb-2 hover:text-[#cc8f2e] transition-colors duration-200">{{ session.title }}</h3>
+        </a>
+      {% else %}
+        <h3 class="text-2xl mb-2">{{ session.title }}</h3>
+      {% endif %}
+
+      {% if session.tag %}
+        <span class="block w-fit mb-4 min-w-24 text-center px-4 py-px rounded-xs bg-[#cc8f2e] text-white">{{ session.tag }}</span>
+      {% endif %}
+
+      <div class="text-gray-600">
+        {{ session.outline }}
+      </div>
+
+      {% if session.url %}
+        <a class="block w-fit my-2 border rounded p-2 hover:bg-[#cc8f2e] hover:text-white transition-colors duration-200" href="{{ session.url }}">
+          <i class="fas fa-file mx-1"></i> 詳細を見る
+        </a>
+      {% endif %}
+
+      <div class="flex gap-x-4 mt-8">
+        <img src="{{ session.img }}" alt="{{ session.title | escape }}" />
+      </div>
+    </li>
+  {% endfor %}
+</ul>