Skip to content

Commit 05ea6d3

Browse files
mucho613mucho613
authored
Merge pull request #18 from coderdojo-japan/feature/top-page-sections
[DCJ2025-115] トップページの各セクションを実装
2 parents 30695f8 + c1b5673 commit 05ea6d3

30 files changed

+420
-144
lines changed

‎_includes/navbar.html‎

Lines changed: 13 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,14 @@
1-
<header class="fixed-top">
2-
<nav class="navbar navbar-expand-xxl header-nav">
3-
<a class="navbar-brand" href="/#top">
4-
<img src="/img/header/logo-bk.svg" class="d-inline-block align-top site-logo" alt="DojoCon Japan 2024">
5-
</a>
6-
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
7-
<span class="navbar-toggler-icon"></span>
8-
</button>
9-
<div class="collapse navbar-collapse" id="navbarNav">
10-
<div class="navbar-nav">
11-
<a class="nav-item nav-link active" href="/">TOP</a>
12-
<!--<a class="nav-item nav-link active" href="/#about-coderdojo">CoderDojoとは</a> -->
13-
<a class="nav-item nav-link active" href="/#overview">開催概要</a>
14-
<a class="nav-item nav-link active" href="/#news">お知らせ</a>
15-
<!-- <a class="nav-item nav-link active" href="/#live">ライブ配信</a> -->
16-
<a class="nav-item nav-link active" href="/posts/sponsors/">スポンサー</a>
17-
<!-- <a class="nav-item nav-link active" href="/#staff">スタッフ</a> -->
18-
<!--<a class="nav-item nav-link active" href="/timetable">タイムテーブル</a>-->
19-
<a class="nav-item nav-link active" href="/sessions">セッション</a>
20-
<a class="nav-item nav-link active" href="/events">企画</a>
21-
<!--<a class="nav-item nav-link active" href="/exhibition">展示</a>-->
22-
<!--<a class="nav-item nav-link active" href="/contest">コンテスト</a>-->
23-
<!--<a class="nav-item nav-link active" href="/workshops">ワークショップ</a>-->
24-
<!--<a class="nav-item nav-link active" href="/dojos">Dojo自慢</a>-->
25-
<a class="nav-item nav-link active" href="{{ site.contact }}" target="_blank">問い合わせ</a>
26-
<a class="nav-item nav-link active link_button" href="/registration" style="padding-left:30px;padding-right: 30px;color:white;font-weight: normal;">参加申込</a>
27-
</div>
28-
</div>
1+
<div class="mx-4 sticky top-4 z-10">
2+
<nav
3+
class="rounded-[40px] w-fit mx-auto bg-[#f5f5f5] mt-8 inset-shadow-[0px_-2px_10px_rgba(125,125,125,0.25)] shadow-[7px_7px_10px_rgba(125,125,125,0.15)]">
4+
<ul class="flex flex-wrap min-h-20 items-center p-5 justify-center divide-x-2 gap-y-2 *:text-[#cc8f2e] *:px-6">
5+
<li><a href="#outline">開催概要</a></li>
6+
<li><a href="#session">セッション</a></li>
7+
<li><a href="/events">企画</a></li>
8+
<li><a href="/contest">コンテスト</a></li>
9+
<li><a href="https://suzuri.jp/DojoConJapan" target="_blank">グッズ</a></li>
10+
<li><a href="/sponsorship">スポンサー募集</a></li>
11+
<li><a href="{{ site.contact }}" target="_blank">お問い合わせ</a></li>
12+
</ul>
2913
</nav>
30-
</header>
31-
14+
</div>

‎_includes/top/sections/about-coderdojo.html‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<div class="relative mt-20 xl:mt-48">
2+
<div class="max-w-7xl mx-6 xl:mx-auto">
3+
<div class="max-w-3xl mx-auto xl:absolute xl:bottom-[45%]">
4+
<!-- 見出しセクション -->
5+
<!-- デスクトップの場合 -->
6+
<h2 class="hidden xl:block mx-8">
7+
<img src="/img/2025/top/about-coderdojo/about-coderdojo-heading.webp" alt="About CoderDojo" />
8+
</h2>
9+
10+
<!-- モバイルの場合 -->
11+
<h2 class="relative xl:hidden max-w-lg">
12+
<img src="/img/2025/top/about-coderdojo/about-coderdojo-heading.webp" alt="About CoderDojo" />
13+
<img class="h-full w-auto absolute right-0 top-0 w-3xs" src="/img/2025/top/about-coderdojo/coderdojo-logo-transparent.webp" />
14+
</h2>
15+
16+
<!-- 説明文セクション -->
17+
<div class="mt-9 xl:ml-18 xl:max-w-[620px]">
18+
<p>
19+
CoderDojoは子ども達にプログラミングを学ぶ場を提供する、ボランティア主導の世界的な非営利活動です。
20+
</p>
21+
<p>
22+
CoderDojoは2011年にアイルランドから始まり、現在は世界100カ国に2,000以上の道場があり、日本国内でも全国200以上の道場で毎年1,000回以上(*1)開催されています。CoderDojoはエンジニアやデザイナー、各地域の保護者や学生、研究者や経営者など（メンター）と子どもが出会える場にもなっています。<br />
23+
<small>*1 統計情報:https://coderdojo.jp/stats</small>
24+
</p>
25+
</div>
26+
</div>
27+
</div>
28+
29+
<!-- DojoCon の画像 -->
30+
<!-- デスクトップの場合 -->
31+
<div class="hidden xl:flex items-center -mx-4 xl:mt-18 justify-between">
32+
<div class="w-2/7 mt-12"><img class="w-full" src="/img/2025/top/about-coderdojo/coderdojo-logo-transparent.webp" /></div>
33+
<div class="w-2/3 mt-12"><img class="w-full" src="/img/2025/top/about-coderdojo/dojocon.webp" /></div>
34+
</div>
35+
36+
<!-- モバイルの場合 -->
37+
<div class="xl:hidden block m-8">
38+
<img class="max-w-3xl place-self-center w-full" src="/img/2025/top/about-coderdojo/dojocon.webp" />
39+
</div>
40+
</div>

‎_includes/top/sections/inspire-next.html‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!-- デスクトップの場合 -->
2+
<div class="hidden xl:flex mt-48">
3+
<div class="w-[45%] -mt-10 mx-auto absolute z-1 pr-16 right-0">
4+
<h2>
5+
<img src="/img/2025/top/inspire-next/inspire-next-heading.webp" alt="Inspire NEXT ～好奇心に火をつけよう～" />
6+
</h2>
7+
<div class="mt-9 max-w-3xl">
8+
今年のDojoCon Japanのテーマは「Inspire NEXT〜好奇心に火をつけよう〜」です。<br />
9+
この言葉には、「次の一歩をふみ出すきっかけになるようなひらめきや刺激を届けたい」という思いがこめられています。プログラミングやテクノロジーの世界は、AIなど新しいことがどんどん出てきて、変わり続けています。でも、子どもたちの「やってみたい！」「知りたい！」という好奇心は、いつの時代も変わりません。<br />
10+
CoderDojoは、そんな好奇心を大切にし、応援する場所です。<br />
11+
このイベントを通して、子どもも大人も、次のチャレンジに向かう気持ちに火がつくような出会いや体験を届けたいと考えています。新しい道場を作ってみたくなったり、今の道場をもっと良くしたくなったり――<br />
12+
そんな「次」への一歩をみんなで応援します。
13+
</div>
14+
</div>
15+
16+
<div class="flex items-center -mx-4 mt-18 justify-between w-full">
17+
<div class="w-2/3 relative">
18+
<!-- 写真にかぶっても視認性を確保するためのオーバーレイ -->
19+
<div class="bg-linear-to-r from-transparent from-70% to-white hidden top-0 xl:block absolute size-full">
20+
</div>
21+
<img class="w-full" src="/img/2025/top/inspire-next/exhibit.webp" />
22+
</div>
23+
<div class="w-1/4 -mt-48"><img class="w-full" src="/img/2025/top/inspire-next/fire-transparent.webp" /></div>
24+
</div>
25+
</div>
26+
27+
<!-- モバイルの場合 -->
28+
<div class="xl:hidden relative mt-20 mx-6">
29+
<div class="max-w-3xl mx-auto">
30+
<h2 class="relative max-w-7xl">
31+
<img src="/img/2025/top/inspire-next/inspire-next-heading.webp" alt="Inspire NEXT ～好奇心に火をつけよう～" />
32+
<img class="h-[140%] w-auto absolute right-0 -bottom-1/5 w-3xs" src="/img/2025/top/inspire-next/fire-transparent.webp" />
33+
</h2>
34+
35+
<div class="mt-9">
36+
今年のDojoCon Japanのテーマは「Inspire NEXT〜好奇心に火をつけよう〜」です。<br />
37+
この言葉には、「次の一歩をふみ出すきっかけになるようなひらめきや刺激を届けたい」という思いがこめられています。プログラミングやテクノロジーの世界は、AIなど新しいことがどんどん出てきて、変わり続けています。でも、子どもたちの「やってみたい！」「知りたい！」という好奇心は、いつの時代も変わりません。<br />
38+
CoderDojoは、そんな好奇心を大切にし、応援する場所です。<br />
39+
このイベントを通して、子どもも大人も、次のチャレンジに向かう気持ちに火がつくような出会いや体験を届けたいと考えています。新しい道場を作ってみたくなったり、今の道場をもっと良くしたくなったり――<br />
40+
そんな「次」への一歩をみんなで応援します。
41+
</div>
42+
</div>
43+
44+
<div class="max-w-3xl mx-auto mt-8">
45+
<img class="place-self-center w-full" src="/img/2025/top/inspire-next/exhibit.webp" />
46+
</div>
47+
</div>

‎_includes/top/sections/keynote.html‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<h2 class="text-4xl text-center mb-12">
2+
基調講演
3+
<span class="block mt-5 text-2xl">KEYNOTE 01</span>
4+
</h2>
5+
6+
<div class="flex px-6 lg:px-12 max-w-7xl mx-auto jutify-between gap-x-12 mb-16 flex-col lg:flex-row-reverse">
7+
<div class="w-full lg:w-[55%] mb-8">
8+
<p class="text-3xl lg:text-4xl leading-12 lg:leading-15 mb-2">
9+
生成AI時代における<br />
10+
「子どもたちの創造」と学び
11+
</p>
12+
<p class="text-xl mb-4">宮島 衣瑛（みやじま きりえ）</p>
13+
<p class="text-xs mb-8 leading-5">
14+
一般社団法人 CoderDojo Japan 理事<br />
15+
CoderDojo Kashiwa Champion
16+
</p>
17+
<p class="leading-7 mb-8">
18+
AI（人工知能）がどんどん進化し、わたしたちのまわりにも当たり前のように使われるようになってきました。そんな時代に、子どもたちはどんなふうに学び、何を創り出していくのでしょうか？<br />
19+
この講演では、生成AIの今とこれから、そしてAIとともに学ぶことの楽しさや可能性について、わかりやすくお話しします。<br />
20+
未来をつくる子どもたちの「創造力」を育むために、わたしたち大人ができること、CoderDojoが果たせる役割についても、一緒に考えていきましょう。
21+
</p>
22+
</div>
23+
<div class="place-self-center lg:place-self-start max-w-full lg:w-[45%]">
24+
<div class="aspect-[1/cos(30deg)] overflow-hidden flex items-center justify-center"
25+
style="clip-path: polygon(50% -50%,100% 50%,50% 150%,0 50%);">
26+
<img class="w-full" src="https://placehold.jp/512x512.png" alt="宮島 衣瑛">
27+
</div>
28+
</div>
29+
</div>
30+
31+
<div class="flex max-w-7xl mx-auto px-6 lg:px-12 jutify-between gap-x-12 flex-col lg:flex-row">
32+
<div class="w-full lg:w-[55%] mb-8">
33+
<p class="text-3xl lg:text-4xl leading-12 lg:leading-15 mb-2">
34+
生成AIをはじめ急速に変化する環境で、<br />
35+
子どもの好奇心をどう伸ばすか
36+
</p>
37+
<p class="text-xl mb-4">小宮山 利恵子（こみやま りえこ）</p>
38+
<p class="text-xs mb-8 leading-5">
39+
スタディサプリ教育AI研究所所長<br />
40+
国立大学法人 東京学芸大学大学院教育学研究科准教授
41+
</p>
42+
<p class="leading-7 mb-8">
43+
AIやテクノロジーの進化によって、わたしたちの生活や学びの環境は、これまでにないスピードで変わっています。そんな時代に、子どもたちの「知りたい！」「やってみたい！」という気持ちをどう育てていけばいいのでしょうか？<br />
44+
そして、子どもたちの好奇心を守り、伸ばすために、大人にはどんなかかわり方ができるのでしょうか？教育とテクノロジーの専門家である小宮山さんが、たくさんの事例をまじえながら、未来の学びについてやさしく語ってくれます。
45+
</p>
46+
</div>
47+
<div class="place-self-center lg:place-self-start max-w-full lg:w-[45%]">
48+
<div class="aspect-[1/cos(30deg)] overflow-hidden flex items-center justify-center"
49+
style="clip-path: polygon(50% -50%,100% 50%,50% 150%,0 50%);">
50+
<img class="w-full" src="https://placehold.jp/512x512.png" alt="小宮山 利恵子">
51+
</div>
52+
</div>
53+
</div>

‎_includes/top/sections/news.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<h2 class="text-4xl mt-20 sm:mt-32 text-center">
2+
お知らせ
3+
<span class="block mt-5 text-2xl">NEWS</span>
4+
</h2>
5+
6+
<div class="m-6 flex flex-col items-center">
7+
<ul class="border-y divide-y max-w-7xl mx-auto mb-12">
8+
{% for i in (1..5) %}
9+
<li class="text-sm flex items-center py-4 flex-wrap sm:flex-nowrap gap-y-1">
10+
<time class="block min-w-24">2025.06.20</time>
11+
<span class="block min-w-24 text-center mr-6 px-4 py-px rounded-xs bg-[#cc8f2e] text-white">レポート</span>
12+
DojoCon Japan 2025開催のお知らせ　今年のテーマは「Inspire NEXT〜好奇心に火をつけよう〜」
13+
</li>
14+
{% endfor %}
15+
</ul>
16+
</div>

‎_includes/top/sections/organized-by.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<h2 class="text-4xl text-center">
2+
主催
3+
<span class="block mt-5 text-2xl">ORGANIZED BY</span>
4+
</h2>
5+
<p class="text-2xl sm:text-4xl text-center mt-10 mx-8 leading-16">
6+
DojoCon Japan 2025 実行委員会<br />
7+
一般社団法人 CoderDojo Japan
8+
</p>

‎_includes/top/sections/outline.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<h2 id="outline" class="text-4xl text-center mb-8 pt-20">
2+
開催概要
3+
<span class="block mt-5 text-2xl">OUTLINE</span>
4+
</h2>
5+
6+
<div class="md:max-w-3xl xl:max-w-7xl mx-auto">
7+
<div class="flex mx-6 justify-between flex-wrap text-center text-xl gap-y-8
8+
flex-col min-[400px]:flex-row
9+
min-[400px]:*:w-[45%] xl:*:w-[24%]">
10+
<div class="flex flex-col justify-between">
11+
<div class="flex flex-1 items-center justify-center mb-4">
12+
<img class="place-self-center align-middle" src="/img/2025/top/outline/date.webp">
13+
</div>
14+
<p>開催日時</p>
15+
</div>
16+
17+
<div class="flex flex-col justify-between">
18+
<div class="flex flex-1 items-center justify-center mb-4">
19+
<img class="place-self-center align-middle" src="/img/2025/top/outline//kurume-kappa.webp">
20+
</div>
21+
<p class="whitespace-pre">福岡県久留米市<wbr />六ツ門町８−１</p>
22+
</div>
23+
24+
<div class="flex flex-col justify-between">
25+
<div class="flex flex-1 items-center justify-center mb-4">
26+
<img class="place-self-center align-middle" src="/img/2025/top/outline//city-plaza.webp">
27+
</div>
28+
<p class="whitespace-pre">久留米市<wbr />シティプラザ</p>
29+
</div>
30+
31+
<div class="flex flex-col justify-between">
32+
<div class="flex flex-1 items-center justify-center mb-4">
33+
<img class="place-self-center align-middle" src="/img/2025/top/outline//free.webp">
34+
</div>
35+
<p>参加無料</p>
36+
</div>
37+
</div>
38+
</div>

‎_includes/top/sections/session.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<div id="session" class="max-w-3xl lg:max-w-[1800px] px-8 mx-auto mt-8 mb-16 flex flex-col lg:-mt-64 lg:flex-row items-center lg:items-start">
2+
<div class="w-full lg:w-2/5 mb-8 lg:mt-68">
3+
<div class="lg:max-w-sm lg:place-self-end lg:mr-[10%]">
4+
<h2 class="text-4xl mb-4 text-center lg:text-left">
5+
セッション
6+
<span class="block mt-2 text-2xl">SESSION</span>
7+
</h2>
8+
<p class="leading-7 mb-10">
9+
さまざまな分野で活やくしている人たちの話を聞いて、考え方やアイデアを広げてみよう。<br />
10+
プログラミングや教育、地域での活動など、たくさんのヒントがつまった時間です。
11+
</p>
12+
</div>
13+
</div>
14+
15+
<ul class="flex flex-wrap gap-x-6 gap-y-12 lg:w-3/5">
16+
{% for i in (1..6) %}
17+
<li class="flex-1 min-w-full sm:min-w-64">
18+
<img class="w-full" src="https://placehold.jp/1920x1080.png" alt="セッションのイメージ">
19+
<p class="mt-2">セッションタイトル。2行ぐらいあるかも</p>
20+
<p class="text-xs mb-2">セッションの説明です。最大2行ぐらいまで許容しそうな雰囲気</p>
21+
<p class="text-xs text-gray-400">
22+
登壇者：仮の団体名・仮の登壇者の氏名<br />
23+
所属：仮の所属名</p>
24+
</li>
25+
{% endfor %}
26+
</ul>
27+
</div>

‎_includes/top/sections/sponsor.html‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<h2 class="text-4xl text-center">
2+
スポンサー
3+
<span class="block mt-5 text-2xl">SPONSOR</span>
4+
</h2>
5+
6+
<h3 class="text-2xl mt-22 mx-8 text-center mb-4">ゴールドスポンサー
7+
<span class="block text-base mt-1">GOLD SPONSOR</span>
8+
</h3>
9+
10+
<div class="flex gap-x-8 px-8 max-w-3xl mx-auto">
11+
<img class="w-full max-w-3xl mx-auto mb-8" src="https://placehold.jp/1920x1080.png" alt="ゴールドスポンサーのロゴ">
12+
</div>
13+
14+
<h3 class="text-2xl mt-22 mx-8 text-center mb-4">シルバースポンサー
15+
<span class="block text-base mt-1">SILVER SPONSOR</span>
16+
</h3>
17+
18+
<div class="flex gap-x-8 px-8 max-w-3xl mx-auto">
19+
<div><img class="w-full mx-auto mb-8" src="https://placehold.jp/1920x1080.png" alt="シルバースポンサーのロゴ">
20+
</div>
21+
<div><img class="w-full mx-auto mb-8" src="https://placehold.jp/1920x1080.png" alt="シルバースポンサーのロゴ">
22+
</div>
23+
</div>
24+
25+
<h3 class="text-2xl mt-22 mx-8 text-center mb-4">ブロンズスポンサー
26+
<span class="block text-base mt-1">BRONZE SPONSOR</span>
27+
</h3>
28+
29+
<div class="flex gap-x-8 px-8 max-w-3xl mx-auto">
30+
<div><img class="w-full mx-auto mb-8" src="https://placehold.jp/1920x1080.png" alt="ブロンズスポンサーのロゴ">
31+
</div>
32+
<div><img class="w-full mx-auto mb-8" src="https://placehold.jp/1920x1080.png" alt="ブロンズスポンサーのロゴ">
33+
</div>
34+
</div>
35+
36+
<h3 class="text-2xl mt-22 mx-8 text-center mb-4">インカインドスポンサー
37+
<span class="block text-base mt-1">IN-KIND SPONSOR</span>
38+
</h3>
39+
40+
<div class="flex gap-x-8 px-8 max-w-3xl mx-auto">
41+
<div><img class="w-full mx-auto mb-8" src="https://placehold.jp/1920x1080.png" alt="インカインドスポンサーのロゴ">
42+
</div>
43+
<div><img class="w-full mx-auto mb-8" src="https://placehold.jp/1920x1080.png" alt="インカインドスポンサーのロゴ">
44+
</div>
45+
</div>

‎_includes/top/sections/staff.html‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<h2 class="text-4xl text-center pt-20 xl:pt-30">
2+
実行員紹介
3+
<span class="block mt-5 text-2xl">STAFF</span>
4+
</h2>
5+
6+
<!-- デスクトップで表示 -->
7+
<div class="hidden xl:block max-w-7xl mx-auto my-24">
8+
<ul class="staff flex flex-wrap justify-center gap-x-36">
9+
{% for i in (1..42) %}
10+
<li class="-mt-[74px]">
11+
<div class="relative aspect-[1/cos(30deg)] w-50 overflow-hidden flex items-center justify-center"
12+
style="clip-path: polygon(50% -50%,100% 50%,50% 150%,0 50%);">
13+
14+
<div class="block absolute size-full opacity-0 hover:opacity-100 transition-200 transition-opacity">
15+
<div class="absolute size-full mix-blend-multiply bg-[#6f6f6f]"></div>
16+
<p class="flex flex-col items-center justify-center text-white text-center absolute size-full">
17+
<span class="text-xs">肩書き</span>
18+
名字 名前
19+
<span class="text-xs">道場名</span>
20+
</p>
21+
</div>
22+
<img class="w-full" src="https://placehold.jp/320x320.png" alt="スタッフの写真">
23+
</div>
24+
</li>
25+
{% endfor %}
26+
</ul>
27+
</div>
28+
29+
<!-- モバイルで表示 -->
30+
<div class="block xl:hidden mx-auto mt-9 mb-20">
31+
<ul class="flex flex-wrap justify-center gap-x-2 gap-y-6 mx-[2%]">
32+
{% for i in (1..42) %}
33+
<li class="flex flex-col items-center gap-y-2">
34+
<div class="relative aspect-[1/cos(30deg)] w-24 sm:w-30 overflow-hidden flex items-center justify-center"
35+
style="clip-path: polygon(50% -50%,100% 50%,50% 150%,0 50%);">
36+
<img class="w-full" src="https://placehold.jp/320x320.png" alt="スタッフの写真">
37+
</div>
38+
39+
<!-- モバイルで表示する、肩書きや氏名の表示 -->
40+
<p class="flex flex-col text-center">
41+
<span class="text-xs">肩書き</span>
42+
名字 名前
43+
<span class="text-xs">道場名</span>
44+
</p>
45+
</li>
46+
{% endfor %}
47+
</ul>
48+
</div>

0 commit comments

Comments
 (0)