Merge pull request #329 from jpa-perl/nagayama/add-special-hakodate

スペシャルイベントを追加

2024hakodate/ejs.config.js

@@ -54,6 +54,50 @@ module.exports = {
 体験メディア、インタラクションの理解とデザイン、ライフログなどの研究と教育に従事。
         `,
       },
+    ],
+    specialEventSpeakers: [
+      {
+        photo: "./images/special/kumikumitm.jpg",
+        name: "三谷 公美",
+        name_en: "id:kumikumitm",
+        description:
+          "一般社団法人LOCAL理事を務めるほか、北海道地域情報セキュリティ連絡会（HAISL）副会長、北海道情報セキュリティ勉強会 (せきゅぽろ) 副代表、さくらインターネット株式会社エバンジェリストなど、さまざまな技術コミュニティやイベント運営に携わる。北海道、東京都を中心に活動している。",
+      },
+      {
+        photo: "./images/special/onagatani.jpg",
+        name: "永谷 理",
+        name_en: "id:onagatani",
+        title: "株式会社COLSIS 取締役CTO",
+        description: `2000年から地元北海道でWEB関連のディレクションや制作に関わる。2006年から東京にてECサイトやポータルサイトのサーバーサイドエンジニアとして大規模トラフィックを扱う技術を経験。
+Hokkaido.pmを2010年に立ち上げ、YAPC::Hokkaido 2016 SAPPOROはコアスタッフにて運営として参加。
+現在はコルシス札幌支社に勤務しエンタープライズ系インフラ構築や、ECサイトなどのシステム開発に従事。`,
+      },
+      {
+        photo: "./images/special/hokkai7go.jpg",
+        name: "菅井 祐太朗",
+        name_en: "id:hokkai7go",
+        title: "一般社団法人LOCAL理事 / 株式会社I-Style取締役CTO",
+        description: `大学を卒業後、メーカー系SIerにて主に官公庁向けの大規模システム運用に従事。
+その後、WebインフラエンジニアやSREとして数社を経験し、2021年4月より現職。
+著書に『Chef実践入門 ~コードによるインフラ構築の自動化 (WEB+DB PRESS plus)』(技術評論社.2014年.共著)がある。​
+北見市生まれ。岩見沢市出身。`,
+      },
+      {
+        photo: "./images/special/jumbo_hakodate.jpg",
+        name: "中村 拓也",
+        name_en: "id:jumbo_hakodate",
+        description:
+          "函館市在住。株式会社函館ラボラトリ （株式会社アットウェア の子会社）でコワーキングスペースと子供向けの工作・プログラミングを運営。ITコミュニティはこだてIKA や Code for Hakodate のメンバーとしても活動中。",
+      },
+      {
+        photo: "./images/special/chiku_wait.jpg",
+        name: "中田 裕貴",
+        name_en: "id:chiku_wait",
+        title:
+          "さくらインターネット株式会社さくらインターネット研究所研究員 / 公立はこだて未来大学　大学院システム情報科学研究科　博士（後期）課程",
+        description: `
+2022年に公立はこだて未来大学　大学院博士（前期）課程を修了し、さくらインターネット株式会社に新卒入社。2024年より大学院博士（後期）課程に社会人学生として進学。 さくらインターネット研究所と大学院では、クラウドやエッジコンピューティングにおけるOSや仮想化技術など、システムソフトウェアに関する研究に従事。大学進学をきっかけに北海道に移住し、現在は札幌市在住。`,
+      },
       {
         photo: "./images/speaker/dr-fukamachi.jpg",
         name: "深町 賢一",
@@ -63,8 +107,8 @@ module.exports = {
 IIJ(最初の商用インターネットサービスプロバイダ)の現場で十数年つとめたあと、できるだけ実務に即したITインフラストラクチャを大学で教えようとしている。
 よく使う言語は、シェルスクリプトとPerl。
 30年来のメインの生活環境はBSD Unix(NEWS-OS 4.x, NetBSD 0.8-)で、最近は(ssh元兼GUI環境として)Debian GNU Linuxも併用。
-今回の講演では、"シェルとPerlの使い分け"を、実生活環境のログ分析をもとに話はじめて、Unixとコンピュータ開発史をふりかえりつつ、先のことを考えてみる予定。`
-      }
+今回の講演では、"シェルとPerlの使い分け"を、実生活環境のログ分析をもとに話はじめて、Unixとコンピュータ開発史をふりかえりつつ、先のことを考えてみる予定。`,
+      },
     ],
   },
 };

2024hakodate/src/index.ejs

@@ -125,13 +125,56 @@
 						<%= speaker.title %><br>
 					</div>
 				</div>
-				<p class="text-sm sm:text-md p-5 text-justify bg-[#191919]">
+				<p class="text-sm sm:text-md p-5 text-balance bg-[#191919]">
 					<%= speaker.description %>
 				</p>
 			</div>
 			<% } %>
 	</div>
 
+	<header class="sectionHeader">
+		<h2><span>Special Event</span></h2>
+	</header>
+	<div class="container mx-auto max-w-7xl mt-20">
+		<h3 class="m-auto text-center text-2xl lg:text-5xl font-bold">北海道のエンジニアコミュニティ座談会</h3>
+		<p class="text-center text-lg lg:text-2xl max-w-2xl px-5 m-auto my-10">
+			北海道にゆかりのあるエンジニアの方々をゲストにお招きし、北海道の魅力、北海道での働き方、北海道でのエンジニアコミュニティの状況などから北海道で働くとはどのようなことかを伺っていきます！
+			<br />
+			<a href="https://blog.yapcjapan.org/entry/2024/09/02/120000" target="_blank" rel="noopener"
+				class="inline-flex items-center mt-6 p-2 px-5 pl-10 rounded-md font-extrabold bg-key no-underline ">詳しくはこちら!
+				<span class="material-symbols-outlined text-4xl">
+					chevron_right
+				</span>
+
+			</a>
+		</p>
+		<div class=" flex flex-wrap justify-center">
+			<% for (const speaker of locals.specialEventSpeakers) { %>
+				<div class="block p-4 pb-10 sm:basis-1/2 md:basis-1/3 xl:basis-1/3 fadeIn">
+					<img class="border-y-4 border-key w-full" src="<%= speaker.photo %>" alt="<%= speaker.name %>" />
+					<div class="grid m-auto p-5 bg-[#121212]">
+						<div class="font-bold text-2xl text-center">
+							<span class="shuffleText">
+								<%= speaker.name %>
+							</span>
+						</div>
+						<div class="text-sm text-center text-gray-500">
+							<span class="shuffleText text-display">
+								<%= speaker.name_en %>
+							</span>
+						</div>
+					</div>
+					<p class="text-sm sm:text-md p-5 text-balance bg-[#191919]">
+						<% if (speaker.title) { %>
+							<%= speaker.title %><br /><br />
+								<% } %>
+									<%= speaker.description %>
+					</p>
+				</div>
+				<% } %>
+		</div>
+	</div>
+
 	<% if (Object.keys(locals.jobboards).length> 0) { %>
 		<header class="sectionHeader">
 			<h2><span>Job Board</span></h2>