diff --git a/.npmrc b/.npmrc new file mode 100644 index 0000000..581701c --- /dev/null +++ b/.npmrc @@ -0,0 +1 @@ +package-manager-strict=false \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..ed98aab --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "deepscan.ignoreConfirmWarning": true +} \ No newline at end of file diff --git a/components/About.tsx b/components/About.tsx index 0310fbb..12d9a01 100644 --- a/components/About.tsx +++ b/components/About.tsx @@ -18,11 +18,14 @@ function AboutContent({ children }: { children: React.ReactNode }) { } export default function About() { return ( -
+
關於 SITCON - SITCON 學生計算機年會是由學生自發舉辦，投身學生資訊教育與推廣開源精神的社群， 也是一個由學生主辦、學生擔任講者、以學生為主軸的資訊研討會，給學生們一個發表交流技術的舞台。 除了技術研討之外，還有許多從學生角度出發的經驗分享、專題研究成果或探討學生相關議題等等議程。我們也曾舉辦黑客松、工作坊，和各地學校社團舉辦聯合講座等等。 + SITCON + 學生計算機年會是由學生自發舉辦，投身學生資訊教育與推廣開源精神的社群， + 也是一個由學生主辦、學生擔任講者、以學生為主軸的資訊研討會，給學生們一個發表交流技術的舞台。 + 除了技術研討之外，還有許多從學生角度出發的經驗分享、專題研究成果或探討學生相關議題等等議程。我們也曾舉辦黑客松、工作坊，和各地學校社團舉辦聯合講座等等。
{" "} @@ -37,8 +40,10 @@ export default function About() { Code of Conduct - SITCON 歡迎不同身分、來自不同背景的與會者，也非常鼓勵女性、性少數與多元背景的參與者。為了讓大家都能愉快的參加 SITCON，我們要求所有參與者閱讀社群的的行為準則（Code of Conduct），共同創造一個友善的環境。 - {" "} + SITCON + 歡迎不同身分、來自不同背景的與會者，也非常鼓勵女性、性少數與多元背景的參與者。為了讓大家都能愉快的參加 + SITCON，我們要求所有參與者閱讀社群的的行為準則（Code of + Conduct），共同創造一個友善的環境。{" "} 行為準則（Code of Conduct） diff --git a/components/ApplicationInfo.tsx b/components/ApplicationInfo.tsx index b69604a..92c2f4c 100644 --- a/components/ApplicationInfo.tsx +++ b/components/ApplicationInfo.tsx @@ -1,158 +1,138 @@ -import SectionTitle from "./SectionTitle"; -import { motion } from "framer-motion"; -import Button from "./Button"; -function PriceCard({ type, price }: { type: string; price: number }) { - return ( -
-
-
{type}
-
- {Array.from({ length: type === "團體報名" ? 3 : 1 }).map((_, i) => ( - - ))} -
-
-
- - {price.toLocaleString()} - - 元/人 -
-
- ); -} -function ApplicationCard({ - children, - icon, - dense = false, -}: { - children: React.ReactNode; - icon?: string; - dense?: boolean; -}) { - return ( -
-
{children}
- {icon && ( - - )} -
- ); -} -function ApplicationTitle({ children }: { children: React.ReactNode }) { - return

{children}

; -} -function ApplicationContent({ children }: { children: React.ReactNode }) { - return

{children}

; -} +import StartRegister from "./nav/StartRegister"; + export default function ApplicationInfo() { return ( -
- 報名資訊 - - 日期 - 07/17 ~ 07/21 - - - 地點 - 陽明交通大學 光復校區 - - - 報名時間 - 延長至 5/31(五) 23:59 - -
- - -
-
- - -
-
- - 前往報名 - -
- -
-
- 將 SITCON Camp 重要日程加入行事曆 + <> +
+
+
+ sitcon1 +

報名資訊

+ sitcon2 +
+
+
+

將 CAMP 重要日程加入行事曆

+ + event-add + +
+
+
+
+

+ 活動日期 +

+

+ 07/17 - 07/21 +

+
+
+
+
+ calender +
+
+
+
+
+
+

+ 報名時間 +

+

+ 即日起 - 05/31 +

+
+
+
+
+ clock +
+
+
+
+
+
+

+ 活動地點 +

+

+ 陽明交通大學 +
+ 光復校區 +

+
+
+
+
+ location +
+
+
+
+ -
- -
-
注意事項
-
-
    -
  1. - 若在 5/12（日）23:59 前報名即享有早鳥價，享有早鳥價者仍可享有團報優惠。 -
    2. -
  2. - 三人同時報名，視為團體報名，享有團體報名價格，但並不保證同時錄取，每團以三人為限，詳見 - {" "} - - 報名簡章 - - 。 -
    3. -
  3. - 本次夏令營預計招收學員 60 名，我們會針對報名資料做簡易審查，非先報先贏。 -
    4. -
  4. - 正取學員名單最晚將於 6/8（六）前公佈，屆時請關注 SITCON 相關社群媒體及 Email 信箱。 -
    5. -
  5. - 正取學員需完成報名費繳交，始完成報名程序；另設有補助名額，請詳閱 - {" "} - - 報名費用補助辦法 - - 。 -
    6. -
  6. - 關於退費事宜，請見 - {" "} - - 退費說明文件 - - 。 -
    7. -
+
+
+

注意事項

+
+
+

+ 1. 若在 5/12（日）23:59 前報名即享有早鳥價，享有早鳥價者仍可享有團報優惠。 +

+

+ 2. 三人同時報名，視為團體報名，享有團體報名價格，但並不保證同時錄取，每團以三人為限，詳見 + {" "} + + 報名簡章 + + 。 +

+

+ 3. 本次夏令營預計招收學員 60 名，我們會針對報名資料做簡易審查，非先報先贏。 +

+

+ 4. 正取學員名單最晚將於 6/8（六）前公佈，屆時請關注 SITCON 相關社群媒體及 Email 信箱。 +

+

+ 5. 正取學員需完成報名費繳交，始完成報名程序；另設有補助名額，請詳閱 + {" "} + + 報名費用補助辦法 + + 。 +

+

+ 6. 關於退費事宜，請見 + {" "} + + 退費說明文件 + + 。 +

-
+ ); } diff --git a/components/Events.tsx b/components/Events.tsx index 8290102..a5d5191 100644 --- a/components/Events.tsx +++ b/components/Events.tsx @@ -1,15 +1,14 @@ -import SectionTitle from "./SectionTitle"; import { motion } from "framer-motion"; import TimeTable from "./TimeTable"; export function EventTitle({ children }: { children: React.ReactNode }) { return ( -

- {children} +

+
{children}

); } export function EventContent({ children }: { children: React.ReactNode }) { - return
{children}
; + return
{children}
; } export function EventBox({ children }: { children: React.ReactNode }) { return ( @@ -18,7 +17,9 @@ export function EventBox({ children }: { children: React.ReactNode }) { whileInView={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: 20 }} transition={{ ease: "easeOut", duration: 0.3 }} - className={"py-6 px-6 lg:py-5 lg:px-6 rounded-xl bg-black bg-opacity-10 border border-black border-opacity-20 relative mb-4 lg:flex lg:gap-8 lg:items-center"} + className={ + "pb-6 px-6 rounded-[5rem] bg-white relative mb-[2rem] shadow-2xl h-full z-50" + } > {children} @@ -26,60 +27,155 @@ export function EventBox({ children }: { children: React.ReactNode }) { } export function EventImg({ src }: { src: string }) { return ( - {"Event + {"Event ); } export default function Events() { return ( -
- 課程活動 - -
- - - 主線課程 - 講師們會帶著大家從零開始認識 Python，從基礎語法、各種資料結構，到 function、套件管理，最終目標是做出屬於自己的 Telegram 聊天機器人！ -
-
- 在課程中，透過講師的精心準備的課程，穿插多個動手實作練習，並即時搭配多位助教及講師的協助，確保每位學員都能夠得到充分的關注和指導，讓每一位學員都可以跟上課程進度，並且在課程中不斷進步。 - - - - - - Hackathon - 黑客松（Hackathon）是「黑客」（Hack；原指早期為電腦系統找尋不完美的地方，或是探索不同的解法，來改善電腦系統）與「馬拉松」（Marathon）的組合字，顧名思義，也就像是程式設計、工程界的馬拉松：由有興趣的一群人在有限的時間內，發揮自己的專長做出一個有特色的專案。 - - - - - - 廣度課程 - 為避免單一的教學方式限制了學員對資訊領域的視野，夏令營在設計時，特別安排了廣度課程。讓學員在學習基礎課程之餘，也能學到資訊領域的其他層面，增加自身資訊技能的廣度。其中，我們邀請到了許多在資訊圈打滾多年的權威人士分享自身經驗，期許能為迷茫中的學員，點亮未來的一盞明燈，找到屬於自己的資訊路。 - - - - - - 視界咖啡館 - 視界咖啡館參考自世界咖啡館（The World Café），在本次夏令營中，我們邀請到各領域及社群知名前輩，將傳統座談會形式改以聊天的樣貌呈現。學員可以與資訊界的名人們近距離互動，期望透過縮短講者與學員之間的距離，講者可以更針對學員給出建議，也鼓勵學員踴躍提問、參與，進而產生良好的雙向交流。 - - - - - - 開源精神與社群 - 開源精神短講將邀請在開源社群中活躍多年的前輩，期許能夠透過前輩的經驗分享來讓學員更加認識開源（Open Source），並鼓勵學員參與往後的社群活動。同時，我們也會邀請許多和資訊相關的社群前來擺攤，藉由互動遊戲、影片欣賞、專人介紹、闖關集點...等方式，讓學員認識所謂的「社群」，並對開源活動有初步了解。 - - - - - - 闖關活動 - 在遊戲中融入程式，讓夏令營的學員們可以在團隊合作中，一起享受解謎的樂趣和刺激，同時學習更多元的知識內容。有趣的故事和豐富的解謎，歡迎挑戰！ - - - -
+
+
+
+
+ + sitcon1 + +

課程活動

+ + sitcon2 + +
+
+ +
+ +
+
+
+ + + 主線課程 + 主線課程 + + 講師們會帶著大家從零開始認識 Python，從基礎語法、各種資料結構，到 + function、套件管理，最終目標是做出屬於自己的 Telegram 聊天機器人！ +
+
+ 在課程中，透過講師的精心準備的課程，穿插多個動手實作練習，並即時搭配多位助教及講師的協助，確保每位學員都能夠得到充分的關注和指導，讓每一位學員都可以跟上課程進度，並且在課程中不斷進步。 + + + + +
+
+
+ + + Ｈackathon + Hackathon + + 黑客松（Hackathon）是「黑客」（Hack；原指早期為電腦系統找尋不完美的地方，或是探索不同的解法，來改善電腦系統）與「馬拉松」（Marathon）的組合字，顧名思義，也就像是程式設計、工程界的馬拉松：由有興趣的一群人在有限的時間內，發揮自己的專長做出一個有特色的專案。 + + + + +
+
+
+ + + 廣度課程 + 廣度課程 + + 為避免單一的教學方式限制了學員對資訊領域的視野，夏令營在設計時，特別安排了廣度課程。讓學員在學習基礎課程之餘，也能學到資訊領域的其他層面，增加自身資訊技能的廣度。其中，我們邀請到了許多在資訊圈打滾多年的權威人士分享自身經驗，期許能為迷茫中的學員，點亮未來的一盞明燈，找到屬於自己的資訊路。 + + + + +
+
+
+ + + 視界咖啡館 + 視界咖啡館 + + 視界咖啡館參考自世界咖啡館（The World + Café），在本次夏令營中，我們邀請到各領域及社群知名前輩，將傳統座談會形式改以聊天的樣貌呈現。學員可以與資訊界的名人們近距離互動，期望透過縮短講者與學員之間的距離，講者可以更針對學員給出建議，也鼓勵學員踴躍提問、參與，進而產生良好的雙向交流。 + + + + +
+
+
+ + + 開源精神與社群 + 開源精神與社群 + + 開源精神短講將邀請在開源社群中活躍多年的前輩，期許能夠透過前輩的經驗分享來讓學員更加認識開源（Open + Source），並鼓勵學員參與往後的社群活動。同時，我們也會邀請許多和資訊相關的社群前來擺攤，藉由互動遊戲、影片欣賞、專人介紹、闖關集點...等方式，讓學員認識所謂的「社群」，並對開源活動有初步了解。 + + + + +
+
+
+ + + 闖關活動 + 闖關活動 + + 在遊戲中融入程式，讓夏令營的學員們可以在團隊合作中，一起享受解謎的樂趣和刺激，同時學習更多元的知識內容。有趣的故事和豐富的解謎，歡迎挑戰！ + + + +
+
); } diff --git a/components/Footer.tsx b/components/Footer.tsx index d0c0e2f..1896eeb 100644 --- a/components/Footer.tsx +++ b/components/Footer.tsx @@ -38,7 +38,7 @@ export default function Footer() { }, ]; return ( -
+
學生計算機年會
diff --git a/components/Intro.tsx b/components/Intro.tsx index 0c18c66..1d3e531 100644 --- a/components/Intro.tsx +++ b/components/Intro.tsx @@ -1,42 +1,99 @@ +import Link from "next/link"; import { motion } from "framer-motion"; + export default function Intro() { return ( <> -
- - 樂趣之餘，不忘學習 - - - 由資訊社群所打造，超高知識含量的夏令營 - -
- +
+ - 有鑑於資訊領域逐漸成為科技時代的重要學門，社群與開源精神亦持續抬頭，SITCON 團隊認為將資訊教育向下扎根，為在資訊科學領域有興趣的學生提供一個親切而良好的機會入門，並播灑開源種子，是一件相當重要且值得去做的事情。 -
-
- 2014 年至今，SITCON 夏令營已將邁入第八屆，在此之前營隊的課程內容涵蓋開放原始碼、資訊安全、Maker、Python、後端的 Node.js、前端的資料爬蟲、視覺化、Telegram bot 等。另外更有社群闖關、視界咖啡館、黑客松等活動，讓學員充分吸收新知、動手實作、尋找自己的愛好及興趣，進而加入我們一起推動 Open Source。 -
-
- 今年 SITCON 夏令營將於陽明交通大學光復校區舉辦，以「拉麵加點 source，麵向開源界」為主軸。正如同拉麵的麵條和配料可以隨個人喜好自由搭配組合，在程式設計中也可以讓每個人根據自己的想法和需求，選用不同的程式模組和元件，打造獨一無二的作品。透過兩者結合，傳達開源及資訊的無限可能性，在動手實作的過程中，激發創意靈感，發掘個人興趣所在，進而體會開源的樂趣與價值。 - - SITCON Camp Image + 樂趣之餘，不忘學習 + + + 由資訊社群所打造，超高知識含量的夏令營 + +
+ + 有鑑於資訊領域逐漸成為科技時代的重要學門，社群與開源精神亦持續抬頭，SITCON + 團隊認為將資訊教育向下扎根，為在資訊科學領域有興趣的學生提供一個親切而良好的機會入門，並播灑開源種子，是一件相當重要且值得去做的事情。 +
+
+ 2014 年至今，SITCON + 夏令營已將邁入第八屆，在此之前營隊的課程內容涵蓋開放原始碼、資訊安全、Maker、Python、後端的 + Node.js、前端的資料爬蟲、視覺化、Telegram bot + 等。另外更有社群闖關、視界咖啡館、黑客松等活動，讓學員充分吸收新知、動手實作、尋找自己的愛好及興趣，進而加入我們一起推動 + Open Source。 +
+
+ 今年 SITCON 夏令營將於陽明交通大學光復校區舉辦，以「拉麵加點 + source，麵向開源界」為主軸。正如同拉麵的麵條和配料可以隨個人喜好自由搭配組合，在程式設計中也可以讓每個人根據自己的想法和需求，選用不同的程式模組和元件，打造獨一無二的作品。透過兩者結合，傳達開源及資訊的無限可能性，在動手實作的過程中，激發創意靈感，發掘個人興趣所在，進而體會開源的樂趣與價值。 + + SITCON Camp Image +
+
+ + +
); } + +function Card({ + iconPath, + title, + description, + moreLink, +}: { + iconPath: string; + title: string; + description: string; + moreLink: string; +}) { + return ( + + +

{title}

+

+ {description} +

+ + more + + + ); +} diff --git a/components/Nav.tsx b/components/Nav.tsx index 632db12..172de5c 100644 --- a/components/Nav.tsx +++ b/components/Nav.tsx @@ -1,5 +1,5 @@ -import { useEffect, useState } from "react"; -import { motion, useAnimate, stagger } from "framer-motion"; +import { useState } from "react"; +import StartRegister from "./nav/StartRegister"; import Link from "next/link"; function NavItem({ href, @@ -13,7 +13,7 @@ function NavItem({ return ( setIsNavOpen(false)} scroll={!href.startsWith("/#")} > @@ -21,55 +21,16 @@ function NavItem({ ); } -function useMenuAnimation(isOpen: boolean) { - const staggerMenuItems = stagger(0.1, { startDelay: 0.05 }); - const [scope, animate] = useAnimate(); - - useEffect(() => { - animate( - "#mobile-nav", - { - clipPath: isOpen - ? "inset(0% 0% 0% 0% round 10px)" - : "inset(0% 10% 100% 90% round 10px)", - y: isOpen ? 0 : -20, - opacity: isOpen ? 1 : 0, - }, - { - type: "spring", - bounce: 0, - duration: 0.5, - } - ); - - animate( - "#mobile-nav a", - isOpen - ? { opacity: 1, filter: "blur(0px)", scale: 1 } - : { opacity: 0, filter: "blur(10px)", scale: 0.3 }, - { - duration: 0.15, - delay: isOpen ? staggerMenuItems : 0, - } - ); - }, [animate, isOpen, staggerMenuItems]); - - return scope; -} export default function Nav() { const [isNavOpen, setIsNavOpen] = useState(false); - const scope = useMenuAnimation(isNavOpen); const navItems = [ - { href: "/#events", text: "課程活動" }, - { href: "/#records", text: "過往紀錄" }, - { href: "/#application-info", text: "報名資訊" }, { href: "/coc", text: "行為準則" }, { href: "/teams", text: "籌備團隊" }, ]; return ( <> -
- +
+
+
+ {navItems.map((item, index) => ( + + {item.text} + + ))} +
+
+
); diff --git a/components/Records.tsx b/components/Records.tsx index 506d363..9871f7b 100644 --- a/components/Records.tsx +++ b/components/Records.tsx @@ -82,59 +82,64 @@ function Parallax({ children, baseVelocity }: ParallaxProps) { ); } export default function Records() { - const imgRow1 = [ - "./images/53110516472_b081fd3d1a_c.jpg", - "./images/53110519457_81e1bc3781_c.jpg", - "./images/53111096906_8957a8857f_c.jpg", - "./images/53111098411_c2fb7a1bcd_c.jpg", - "./images/53111100071_8a4e7dd19b_c.jpg", - "./images/53111305319_71e7df2bdd_c.jpg", - "./images/53111601933_33b0392702_c.jpg", - ]; - const imgRow2 = [ - "./images/53111301199_3a9ebea5dd_c.jpg", - "./images/53111303304_4947c6c347_c.jpg", - "./images/53111304989_64db175cda_c.jpg", - "./images/53111511580_604ecbd2d8_c.jpg", - "./images/53111513390_7fd95246eb_c.jpg", - "./images/53111600553_81f2d2127e_c.jpg", - "./images/53111602443_d4050f381a_c.jpg", - "./images/53111604048_911606f8a9_c.jpg", - ]; + // const imgRow1 = [ + // "./images/53110516472_b081fd3d1a_c.jpg", + // "./images/53110519457_81e1bc3781_c.jpg", + // "./images/53111096906_8957a8857f_c.jpg", + // "./images/53111098411_c2fb7a1bcd_c.jpg", + // "./images/53111100071_8a4e7dd19b_c.jpg", + // "./images/53111305319_71e7df2bdd_c.jpg", + // "./images/53111601933_33b0392702_c.jpg", + // ]; + // const imgRow2 = [ + // "./images/53111301199_3a9ebea5dd_c.jpg", + // "./images/53111303304_4947c6c347_c.jpg", + // "./images/53111304989_64db175cda_c.jpg", + // "./images/53111511580_604ecbd2d8_c.jpg", + // "./images/53111513390_7fd95246eb_c.jpg", + // "./images/53111600553_81f2d2127e_c.jpg", + // "./images/53111602443_d4050f381a_c.jpg", + // "./images/53111604048_911606f8a9_c.jpg", + // ]; return ( - <> - 過往紀錄與回饋 -
- SITCON 夏令營在為學員帶來扎實內容的同時，也希望整個學習的過程有趣且精彩 ! -
- 以下為過往活動的影音紀錄。 +
+
+
+

過往紀錄與回饋

+
+
+
+
+ SITCON 夏令營在為學員帶來扎實內容的同時，也希望整個學習的過程有趣且精彩 ! +
+ 以下為過往活動的紀錄與回饋，讓您更了解 SITCON 夏令營的精彩內容！ +
- - + picture + {/* {imgRow1.map((img, index) => ( {"Image ))} @@ -144,7 +149,7 @@ export default function Records() { {imgRow2.map((img, index) => ( {"Image ))} - - + */} +
); } diff --git a/components/Reports.tsx b/components/Reports.tsx index 98fc15f..c4e42e0 100644 --- a/components/Reports.tsx +++ b/components/Reports.tsx @@ -2,6 +2,8 @@ import Link from "next/link"; import { useState } from "react"; import { motion, AnimatePresence } from "framer-motion"; import Button from "./Button"; + + function Report({ children, avatar256, @@ -18,107 +20,132 @@ function Report({ href?: string; }) { return ( -
-
- {"Student -
-
{name}
-
SITCON Camp {year} 學員
+
+
+
+
{name}
+
SITCON Camp {year} 學員
+
+
+ {"Student
-
{children}
-
-
- - 閱讀全文 - +
+
+
+ {children} +
+
+ + 閱讀全文 + + +
); } -function More({ children }: { children: React.ReactNode }) { - const [show, setShow] = useState(false); - return ( - <> - - {show && ( - - {children} - - )} - - - {!show && ( - - - - )} - - - ); -} +// function More({ children }: { children: React.ReactNode }) { +// const [show, setShow] = useState(false); +// return ( +// <> +// +// {show && ( +// +// {children} +// +// )} +// +// +// {!show && ( +// +// +// +// )} +// +// +// ); +// } export default function Reports() { // TODO: Make report a json file return ( - <> +
來聽聽學員的回饋 - -
- - 在 2023 年的 Camp 中我學到了蠻多平常體驗不到的！第一次體驗黑客松，跟來自各種不同年齡層的人一起合作寫專案！雖然每天 … - - - SITCON Camp 是我第一次參加資訊相關的夏令營。在接觸到活動資訊時，我被黑客松及視界咖啡館吸引，因此報名了這次夏令營 … - - - Camp 的課程很充實能學到很多東西，不論是手把手教你寫 Telegram Bot，又或是 Arduino 等，都是值得嘗試看看的的東西 … - + + + + +
+
+
+ + 在 2023 年的 Camp 中我學到了蠻多平常體驗不到的！第一次體驗黑客松，跟來自各種不同年齡層的人一起合作寫專案！雖然每天都爆肝，但是最後寫出的東西真的是超級有成就感～隊輔也都超級細心，會來詢問有沒有哪裡聽不懂，擔心我們沒有跟上進度，課程上也學到了蠻多以前沒學過的，整個收穫滿滿！ + + + SITCON Camp 是我第一次參加資訊相關的夏令營。在接觸到活動資訊時，我被黑客松及視界咖啡館吸引，因此報名了這次夏令營。營期時，能感受到工作人員對所有活動都非常用心。在基本課程時，講者及助教會不斷關心大家的學習情況並給予指導；在黑客松討論時，也都會給予對專題方向的引導及建議。其中最讓我驚艷的是特殊活動—奪寶大作戰，原本以為只是小小的串場活動，但每個關卡的設計都相當用心，需要運用各式各樣的資訊技能來破解。參加 SITCON Camp 後，讓我開始對其他相關的資訊社群感興趣，因此認識許多社群朋友，目前也正在積極參與各項活動的籌備！ + + + Camp 的課程很充實能學到很多東西，不論是手把手教你寫 Telegram Bot，又或是 Arduino 等，都是值得嘗試看看的的東西。黑客松的部分則是一個有點痛苦（因為想不到能幹嘛然後程式一直出事之類的）、很燒腦袋但很好玩的東西，要從 0 開始生出一個專案最後可以成功使用，但成功時會很有成就感畢竟全程都是自己來、沒有人指導你，希望大家可以享受在 Camp 的日子✨ + +
+
- - + + {/*
- + */} - +
); } diff --git a/components/SectionTitle.tsx b/components/SectionTitle.tsx index 0695948..4c62b37 100644 --- a/components/SectionTitle.tsx +++ b/components/SectionTitle.tsx @@ -11,7 +11,7 @@ export default function SectionTitle({ initial={{ opacity: 0 }} whileInView={{ opacity: 1 }} exit={{ opacity: 0 }} - className="text-4xl font-bold text-[#FFF] text-center my-4 py-4 scroll-mt-32 mt-32" + className="text-4xl font-bold text-[#FFF] text-center my-4 py-4" id={id} > {children} diff --git a/components/Sponsor.tsx b/components/Sponsor.tsx index 8817976..d26697b 100644 --- a/components/Sponsor.tsx +++ b/components/Sponsor.tsx @@ -1,29 +1,28 @@ import SponsorData from "@/assets/sponsor.json"; export default function Sponsor() { return ( -
+
{Object.entries(SponsorData).map(([title, items]) => (
-

+

{title}

-
+
{items.map((item) => ( -
+
{item.name}
-
{item.name}
+
{item.name}
))}
diff --git a/components/TimeTable.tsx b/components/TimeTable.tsx index 47a8b6c..87eb876 100644 --- a/components/TimeTable.tsx +++ b/components/TimeTable.tsx @@ -119,7 +119,7 @@ export default function TimeTable() { return ( <>
{time}
@@ -158,20 +156,18 @@ export default function TimeTable() { gridColumnStart: `🥞${room}`, gridRowStart: "roomname", }} - className={`text-center py-2 bg-white bg-opacity-[.02] text-white ${ - i === 0 && "rounded-tl-xl" - } ${i === 4 && "rounded-tr-xl"}`} + className={`text-center py-2 bg-white bg-opacity-[.02] text-[#1E3D6C] ${i === 0 && "rounded-tl-xl"} ${i === 4 && "rounded-tr-xl"}`} key={room} >
{room}
-
{rooms[room]}
+
{rooms[room]}
))} {schedule.sessions.map((session: any, i) => (
{session.zh.title.split("\n")[0]}
{session.zh.title.split("\n").length >= 2 && ( -
+
{session.zh.title.split("\n")[1]}
)} @@ -194,11 +190,11 @@ export default function TimeTable() { ))}
-
+
{Object.keys(rooms).map((room, i) => (
setActiveDay(room)} @@ -206,13 +202,15 @@ export default function TimeTable() { > {activeDay === room && ( )} -
{room}
-
+
+ {room} +
+
{rooms[room]}
@@ -220,7 +218,7 @@ export default function TimeTable() {
{Object.keys(rooms).map((item: string, i: number) => ( swipeConfidenceThreshold) { setActiveDay( Object.keys(rooms)[ - Math.max(0, Object.keys(rooms).indexOf(activeDay) - 1) + Math.max(0, Object.keys(rooms).indexOf(activeDay) - 1) ] ); } @@ -266,7 +264,7 @@ export default function TimeTable() { .filter(({ room }) => room === item) .map((session: any, i) => (
openSessionBox(session)} key={`${session.room}-${session.zh.title}`} > @@ -274,10 +272,10 @@ export default function TimeTable() {
{parseTime(session.start)} ~ {parseTime(session.end)}
-
+
{session.zh.title.split("\n")[0]} {session.zh.title.split("\n").length >= 2 && ( - + {session.zh.title.split("\n")[1]} )} @@ -302,7 +300,7 @@ export default function TimeTable() { exit={{ opacity: 0 }} > e.stopPropagation()} initial={{ opacity: 0, y: -100 }} animate={{ opacity: 1, y: 0 }} @@ -313,13 +311,13 @@ export default function TimeTable() {
{sessionMessage.zh.title.split("\n")[0]}
-
+
{sessionMessage.zh.title.split("\n")[1]}
diff --git a/components/Visual.tsx b/components/Visual.tsx index d43db8b..f4efeab 100644 --- a/components/Visual.tsx +++ b/components/Visual.tsx @@ -1,111 +1,56 @@ -import { - motion, - useTime, - useTransform, - useSpring, - useScroll, - easeInOut, -} from "framer-motion"; -import Planets from "./images/planets"; -import useScrollSize from "../hooks/useScrollSize"; -import { useState } from "react"; -export default function Visual() { - const [visualRef, { width, height }] = useScrollSize(); - const { scrollY } = useScroll(); - const time = useTime(); - const warpTime = useTransform(time, (t) => t % 8000); - const warpScrollY = useTransform(scrollY, [0, height], [0, 1]); - const springScrollY = useSpring(warpScrollY, { - damping: 50, - stiffness: 400, - }); - const vw = width / 100; - const logoY = useTransform(warpScrollY, [0, 1], [0, 70]); - const catX = useTransform(springScrollY, [0, 1], [0, -10 * vw]); - const catY = useTransform(springScrollY, [0, 1], [0, 25]); - const astronautX = useTransform(springScrollY, [0, 1], [0, 10 * vw]); - const astronautY = useTransform(springScrollY, [0, 1], [0, 50]); - const planetY = useTransform(warpTime, [0, 4000, 8000], [0, 25, 0], { - ease: easeInOut, - }); - const infoY = useTransform(warpScrollY, [0, 1], [0, -70]); - const [clickCount, setClickCount] = useState(0); - - const handleTap = () => { - setClickCount(prevCount => prevCount + 1); - }; +import { Inter } from "next/font/google"; - const shouldShake = clickCount >= 5; +const inter = Inter({ subsets: ["latin"] }); +export default function Visual() { return ( -
-
- {/* */} - - - +
+

+ 學生計算機年會夏令營 +

+

2024 sitcon camp

+
+
+ cat and text - - - 日期 - - - 07/17 ~ 07/21 - 7/17 ~ 7/21 - -
- 地點 -
-
- 陽明交通大學 光復校區 +
+
+
+
+
+
+ clock +

+ 活動日期 +

+
+
07/17-07/21
+
+
+
+ clock +

+ 活動地點 +

+
+
+ 陽明交通大學光復校區 +
+
- +
); diff --git a/components/nav/StartRegister.tsx b/components/nav/StartRegister.tsx new file mode 100644 index 0000000..95559d3 --- /dev/null +++ b/components/nav/StartRegister.tsx @@ -0,0 +1,11 @@ +export default function StartRegister() { + return ( + +

報名截止

+ + ); +} \ No newline at end of file diff --git a/hooks/useScrollSize.ts b/hooks/useScrollSize.ts index cf6dae9..e15c303 100644 --- a/hooks/useScrollSize.ts +++ b/hooks/useScrollSize.ts @@ -1,4 +1,4 @@ -import { Ref, useLayoutEffect, useRef, useState } from 'react'; +import { Ref, useLayoutEffect, useRef, useState } from "react"; type Result = { scrollWidth: number; @@ -31,7 +31,10 @@ const useScrollSize = (): [Ref, Result] => { const width = elementRef.current.clientWidth; const height = elementRef.current.clientHeight; - if (scrollWidth !== size.scrollWidth || scrollHeight !== size.scrollHeight) { + if ( + scrollWidth !== size.scrollWidth || + scrollHeight !== size.scrollHeight + ) { setSize({ scrollWidth, scrollHeight, height, width }); } }); @@ -39,4 +42,4 @@ const useScrollSize = (): [Ref, Result] => { return [elementRef, size]; }; -export default useScrollSize; \ No newline at end of file +export default useScrollSize; diff --git a/next.config.js b/next.config.js index 0470b32..f33d79b 100644 --- a/next.config.js +++ b/next.config.js @@ -5,6 +5,9 @@ const nextConfig = { basePath: "/2024", output: "export", distDir: "dist", + images: { + unoptimized: true, + }, }; console.log("🥞 url:", "http://localhost:3000/2024/"); diff --git a/package.json b/package.json index f297ec5..7968bfc 100644 --- a/package.json +++ b/package.json @@ -9,26 +9,26 @@ "lint": "next lint --fix" }, "dependencies": { - "@motionone/utils": "^10.15.1", + "@motionone/utils": "^10.17.0", "@types/node": "18.15.11", "@types/react": "18.0.33", "@types/react-dom": "18.0.11", "autoprefixer": "10.4.14", "eslint": "8.38.0", "eslint-config-next": "13.3.0", - "framer-motion": "^10.12.12", + "framer-motion": "^10.18.0", "next": "^13.5.6", "postcss": "^8.4.38", "react": "18.2.0", "react-dom": "18.2.0", "react-markdown": "^8.0.7", - "react-spring": "^9.7.3", "rehype-raw": "^6.1.1", "tailwindcss": "3.3.1", "typescript": "5.0.4" }, "devDependencies": { - "@tailwindcss/typography": "^0.5.9", + "@tailwindcss/typography": "^0.5.13", "eslint-config-prettier": "^9.1.0" - } + }, + "packageManager": "pnpm@9.1.0+sha512.67f5879916a9293e5cf059c23853d571beaf4f753c707f40cb22bed5fb1578c6aad3b6c4107ccb3ba0b35be003eb621a16471ac836c87beb53f9d54bb4612724" } diff --git a/pages/_app.tsx b/pages/_app.tsx index 5429d6a..dca1c5d 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -7,6 +7,12 @@ const googleTagManagerId = "GTM-NKHHNVV"; import Head from "next/head"; import Nav from "../components/Nav"; import Footer from "../components/Footer"; + +import React from "react"; +import { Inter } from "next/font/google"; + +const inter = Inter({ subsets: ["latin"] }); + export default function App({ Component, pageProps }: AppProps) { return ( <> @@ -27,7 +33,11 @@ export default function App({ Component, pageProps }: AppProps) { - + -