added poster page

sitcon-tw · Mar 10, 2024 · f420b78 · f420b78
1 parent 8a97ca0
commit f420b78
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 2 deletions.
diff --git a/app/(website)/poster/page.tsx b/app/(website)/poster/page.tsx
@@ -0,0 +1,72 @@
+import Button from "@/components/website/button";
+import posterData from "./posterData";
+import Markdown from "react-markdown";
+import { twMerge } from "tailwind-merge";
+import { IoCloudDownload } from "react-icons/io5";
+export default function Page() {
+  return (
+    <div className="container">
+      <div className="mb-4 text-2xl font-bold md:text-4xl" id="page-title">
+        靜態海報展
+      </div>
+      <div className="flex flex-col gap-4 md:gap-8">
+        {posterData.map((poster, index) => (
+          <div
+            className="relative items-center overflow-hidden rounded-2xl bg-white p-4 shadow-md"
+            key={index}
+          >
+            <div className="flex flex-col lg:flex-row">
+              <div className="w-full shrink-0 lg:w-[400px]">
+                <img
+                  src={`/2024/poster/${poster.image}`}
+                  alt={poster.title}
+                  className="aspect-[1/1.414] w-full rounded-xl"
+                />
+              </div>
+
+              <div className="flex flex-col rounded-xl max-lg:py-2 lg:px-4">
+                <div className="text-xl font-bold text-[#385aac] lg:text-2xl">
+                  {poster.title}
+                </div>
+                <Markdown className="porse mt-1 break-all max-lg:text-sm">
+                  {poster.description}
+                </Markdown>
+                <div className="my-4 h-[2px] rounded-full bg-current opacity-5" />
+                <div className="flex items-center gap-2 text-lg">
+                  <div className="flex shrink-0" style={{ gap: "-8px" }}>
+                    {poster.avatars.map((avatar, index) => (
+                      <img
+                        key={index}
+                        src={`/2024/poster/${avatar}`}
+                        alt={poster.title}
+                        className={twMerge(
+                          index !== 0 && "-ml-1",
+                          "h-8 w-8 rounded-full border border-white object-cover shadow-sm",
+                        )}
+                      />
+                    ))}
+                  </div>
+                  {poster.author}
+                </div>
+                <Markdown className="porse mt-1 break-all max-lg:text-sm">
+                  {poster.authorDescription}
+                </Markdown>
+                <div className="my-4 flex-1" />
+                <div className="flex justify-end gap-4">
+                  <a
+                    href={`https://sitcon.org/2024/poster/${poster.file}`}
+                    className="flex items-center justify-center gap-2 break-keep rounded-full bg-[#385AAC] p-4 py-1.5 text-xl font-bold text-[#F8F3E8] shadow-[0px_6px_6px_0px_#5D7DDB4D] hover:bg-[#304e96] active:bg-[#263d75] md:text-lg"
+                    download={poster.file}
+                  >
+                    <IoCloudDownload />
+                    下載海報
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/app/(website)/poster/posterData.ts b/app/(website)/poster/posterData.ts
@@ -48,7 +48,7 @@ GitHub: [https://github.com/jwliao1209](https://github.com/jwliao1209)`,
     description:
       "隨著 ChatGPT 等語言模型的使用快速成長，可以預期未來網路上將充斥著大型自然語言模型 (Large Language Models，簡稱 LLM) 直接生成的文章。我們不禁好奇，這些 LLM 會不會偏好自己生成的文章呢？更明確地說，給定 LLM 數篇可用以回答問題的參考文章時，它們是否更傾向以自己生成的內容作為回答依據，造成 LLM 的回答不夠中立，甚至被自己的文章誤導、產生幻覺呢？在這場演講中，將以嚴謹的實驗討論 ChatGPT 與 Llama 2 這兩個 LLM 對「人類撰寫的文章」、「自己生成的文章」、「其他 LLM 生成的文章」分別的偏好程度。",
     tags: [`NLP`, `LLM`, `Retrieval Augmented Generation`],
-    file: "摸透語言模型的習性 LLM 會偏袒什麼樣的文章?.pdf",
+    file: "摸透語言模型的習性 LLM 會偏袒什麼樣的文章.pdf",
     image: "摸透語言模型的習性 LLM 會偏袒什麼樣的文章.webp",
     avatars: ["摸透語言模型的習性 LLM 會偏袒什麼樣的文章_1.webp"],
   },

diff --git a/components/Nav.tsx b/components/Nav.tsx
@@ -14,6 +14,10 @@ const NavLinks = [
     name: "議程表",
     href: "/agenda/",
   },
+  {
+    name: "靜態海報展",
+    href: "/poster/",
+  },
   {
     name: "會場地圖",
     href: "/venue/",
@@ -46,7 +50,7 @@ function NavLink({
   return (
     <Link
       href={href}
-      className="group relative px-2 py-1 font-rubik text-lg font-bold"
+      className="group relative px-2 py-1 font-rubik text-lg font-bold tracking-tighter"
     >
       {children}
       <AnimatePresence>