index.html

---
layout: default
title: CSIE Council
---

<!-- GRID SECTION -->
<script src="https://unpkg.com/@themesberg/flowbite@latest/dist/flowbite.bundle.js"></script>

{% assign tags = "AI,CV,System,Blockchain,Security,VR&AR,Network,Computing,Graphics,Optimization,DIP,FinTech,eHealth,Robot,NLP,IoT,HCI,Logic&Automata,IR,Light" | split:',' %}

<div class="" id="filter">
	{% for tag in tags %}
	<button class=" rounded-full text-sm font-medium text-white bg-sky-500 m-1 p-1 px-3 my-1.5" id={{ tag }}>
		{{ tag }}
	</button>
	{% endfor %}
</div>

<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 mx-auto items-center">
	{% for category in site.categories reversed %}
	{% assign key = category[0] %}
	{% assign data = site.data.professors | where: "category", key | first %}

	<div class="p-4 pb-6 flex flex-col justify-center items-center rounded-3xl hover:bg-sky-50 m-2 professor"
		style="max-width: 16rem;" onclick="location.href='{{ category[1][0].url | relative_url }}'" >
		<div class="mx-auto bg-cover bg-center rounded-full w-28 h-28 lg:w-36 lg:h-36 my-2 shadow-md"
			style="background-image: url('{{site.baseurl}}/assets/img/{{  category[0]  }}.png');">
		</div>

		<div class="h-28 md:h-28 lg:h-28 name_section" id="{{ category[0] }}">
			<div class="chin_name text-sm lg:text-lg font-noto font-semibold">
				{{ data.chin_name }}
			</div>
			<div class="block eng_name text-sm lg:text-lg font-source font-bold">
				{{ data.eng_name }}
			</div>
			<span class="px-1 my-2 h-12 block lab_name text-gray-400 font-bold font-source text-xs lg:text-md">
				{{ data.lab | upcase }}
			</span>

		</div>

		<button
			class="mb-1 pl-4 p-3 shadow-md w-24 h-9 flex flex-row justify-around text-white bg-gray-600 hover:bg-gray-700 rounded-lg items-center"
			type="button" data-dropdown-toggle="dropdown-{{category[0]}}" onclick="window.event.stopPropagation();">
			<div>
				{{category[1][0].date | date:"%Y"}}
			</div>
			
			<svg class="w-4 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
				xmlns="http://www.w3.org/2000/svg">
				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7">
				</path>
			</svg>
		</button>
		<!-- Dropdown menu -->


		<div class="hidden bg-white z-50 w-24 divide-y divide-gray-200 rounded-md shadow-md" id="dropdown-{{category[0]}}">
			{% for post in category[1] %}
			<div class="max-width">
				<a href='{{ post.url | relative_url }}'
					class="text-center text-md block px-6 py-2 font-bold">{{post.date
					| date:"%Y"}}</a>
			</div>
			{% endfor %}
			</ul>
		</div>

		<!-- {{ post.excerpt }} -->
	</div>



	{% endfor %}
</div>
<script type="module" src={{ "/index.js" | relative_url }} async defer></script>