Skip to content

Commit

Permalink
feat: desktop view of mobile design.
Browse files Browse the repository at this point in the history
  • Loading branch information
@banahaker
banahaker committed Jun 6, 2024
1 parent c72b886 commit 6fe7347
Show file tree
Hide file tree
Showing 3 changed files with 210 additions and 150 deletions.
13 changes: 9 additions & 4 deletions components/About.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,14 @@ function AboutContent({ children }: { children: React.ReactNode }) {
}
export default function About() {
return (
<div className="container">
<div className="container bg-green-900">
<AboutSection>
<AboutTitle>關於 SITCON</AboutTitle>
<AboutContent>
SITCON 學生計算機年會是由學生自發舉辦，投身學生資訊教育與推廣開源精神的社群， 也是一個由學生主辦、學生擔任講者、以學生為主軸的資訊研討會，給學生們一個發表交流技術的舞台。 除了技術研討之外，還有許多從學生角度出發的經驗分享、專題研究成果或探討學生相關議題等等議程。我們也曾舉辦黑客松、工作坊，和各地學校社團舉辦聯合講座等等。
SITCON
學生計算機年會是由學生自發舉辦，投身學生資訊教育與推廣開源精神的社群，
也是一個由學生主辦、學生擔任講者、以學生為主軸的資訊研討會，給學生們一個發表交流技術的舞台。
除了技術研討之外，還有許多從學生角度出發的經驗分享、專題研究成果或探討學生相關議題等等議程。我們也曾舉辦黑客松、工作坊，和各地學校社團舉辦聯合講座等等。
<div className="h-3" />
<Link href={"/teams"} className="link">
{" "}
Expand All @@ -37,8 +40,10 @@ export default function About() {
Code of Conduct
</AboutTitle>
<AboutContent>
SITCON 歡迎不同身分、來自不同背景的與會者，也非常鼓勵女性、性少數與多元背景的參與者。為了讓大家都能愉快的參加 SITCON，我們要求所有參與者閱讀社群的的行為準則（Code of Conduct），共同創造一個友善的環境。
{" "}
SITCON
歡迎不同身分、來自不同背景的與會者，也非常鼓勵女性、性少數與多元背景的參與者。為了讓大家都能愉快的參加
SITCON，我們要求所有參與者閱讀社群的的行為準則（Code of
Conduct），共同創造一個友善的環境。{" "}
<Link href="/coc" className="link">
行為準則（Code of Conduct）
</Link>
Expand Down
243 changes: 148 additions & 95 deletions components/Events.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,7 @@ import TimeTable from "./TimeTable";
export function EventTitle({ children }: { children: React.ReactNode }) {
return (
<h2 className="flex mb-[1rem] text-2xl font-bold text-center text-black ">
<div className="flex justify-between gap-2 mx-auto">
{children}
</div>
<div className="flex justify-between gap-2 mx-auto">{children}</div>
</h2>
);
}
Expand All @@ -19,110 +17,165 @@ export function EventBox({ children }: { children: React.ReactNode }) {
whileInView={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: 20 }}
transition={{ ease: "easeOut", duration: 0.3 }}
className={"pb-6 px-6 rounded-[5rem] bg-white relative mb-[2rem] shadow-2xl h-full z-50"}
className={
"pb-6 px-6 rounded-[5rem] bg-white relative mb-[2rem] shadow-2xl h-full z-50"
}
>
{children}
</motion.div>
);
}
export function EventImg({ src }: { src: string }) {
return (
<img src={src} className="w-full mt-[2rem] rounded-[4rem] shadow-xl" alt={"Event Image"} />
<img
src={src}
className="w-full mt-[2rem] rounded-[4rem] shadow-xl"
alt={"Event Image"}
/>
);
}
export default function Events() {
return (
<div className="container bg-[linear-gradient(#E6E9F1,#C5CFE0)] rounded-[2rem] -mt-5 -mb-10 px-[2rem] pb-[2rem]">
<div className="flex py-8">
<div className="flex items-center gap-2 mx-auto text-3xl font-bold text-center">
<span><img src="/2024/images/sitcon.svg" height="2rem" width="auto" alt="sitcon1" /></span>
<h1 className="text-2xl text-center text-[#1E3D6C]">課程活動</h1>
<span><img src="/2024/images/sitcon.svg" height="2rem" width="auto" alt="sitcon2" /></span>
<div className="bg-[linear-gradient(#E6E9F1,#C5CFE0)] rounded-[2rem] -mt-5 -mb-10 px-[2rem] pb-[2rem]">
<div className=" max-w-[1024px] mx-auto">
<div className="flex py-8">
<div className="flex items-center gap-2 mx-auto text-3xl font-bold text-center">
<span>
<img
src="/2024/images/sitcon.svg"
height="2rem"
width="auto"
alt="sitcon1"
/>
</span>
<h1 className="text-2xl text-center text-[#1E3D6C]">課程活動</h1>
<span>
<img
src="/2024/images/sitcon.svg"
height="2rem"
width="auto"
alt="sitcon2"
/>
</span>
</div>
</div>
<TimeTable />
<div className="mt-[5rem]" />
<EventBox>
<div className="flex mb-[2rem]">
<div className="bg-[linear-gradient(90deg,#EAB9D4,#E78EBF)] w-[50%] h-[1rem] mx-auto rounded-b-full" />
</div>
<EventContent>
<EventTitle>
<img
src="/2024/images/main-course.svg"
alt="主線課程"
height={"2rem"}
width={"auto"}
/>
主線課程
</EventTitle>
講師們會帶著大家從零開始認識 Python，從基礎語法、各種資料結構，到
function、套件管理，最終目標是做出屬於自己的 Telegram 聊天機器人！
<br />
<br />
在課程中，透過講師的精心準備的課程，穿插多個動手實作練習，並即時搭配多位助教及講師的協助，確保每位學員都能夠得到充分的關注和指導，讓每一位學員都可以跟上課程進度，並且在課程中不斷進步。
</EventContent>
<EventImg src="./images/53111094241_0442d799b2_c.jpg" />
</EventBox>
<EventBox>
<div className="flex mb-[2rem]">
<div className="bg-[linear-gradient(90deg,#B1DAED,#809CF3)] w-[50%] h-[1rem] mx-auto rounded-b-full" />
</div>
<EventContent>
<EventTitle>
<img
src="/2024/images/hackathon.svg"
alt="Ｈackathon"
height={"2rem"}
width={"auto"}
/>
Hackathon
</EventTitle>
黑客松（Hackathon）是「黑客」（Hack；原指早期為電腦系統找尋不完美的地方，或是探索不同的解法，來改善電腦系統）與「馬拉松」（Marathon）的組合字，顧名思義，也就像是程式設計、工程界的馬拉松：由有興趣的一群人在有限的時間內，發揮自己的專長做出一個有特色的專案。
</EventContent>
<EventImg src="./images/48711682947_ebcb764c42_c.jpg" />
</EventBox>
<EventBox>
<div className="flex mb-[2rem]">
<div className="bg-[linear-gradient(90deg,#92EBEB,#55C6C6)] w-[50%] h-[1rem] mx-auto rounded-b-full" />
</div>
<EventContent>
<EventTitle>
<img
src="/2024/images/breadth.svg"
alt="廣度課程"
height={"2rem"}
width={"auto"}
/>
廣度課程
</EventTitle>
為避免單一的教學方式限制了學員對資訊領域的視野，夏令營在設計時，特別安排了廣度課程。讓學員在學習基礎課程之餘，也能學到資訊領域的其他層面，增加自身資訊技能的廣度。其中，我們邀請到了許多在資訊圈打滾多年的權威人士分享自身經驗，期許能為迷茫中的學員，點亮未來的一盞明燈，找到屬於自己的資訊路。
</EventContent>
<EventImg src="./images/48711498916_9f781599dc_c.jpg" />
</EventBox>
<EventBox>
<div className="flex mb-[2rem]">
<div className="bg-[linear-gradient(90deg,#FFAE6D,#F98849)] w-[50%] h-[1rem] mx-auto rounded-b-full" />
</div>
<EventContent>
<EventTitle>
<img
src="/2024/images/view-coffee.svg"
alt="視界咖啡館"
height={"2rem"}
width={"auto"}
/>
視界咖啡館
</EventTitle>
視界咖啡館參考自世界咖啡館（The World
Café），在本次夏令營中，我們邀請到各領域及社群知名前輩，將傳統座談會形式改以聊天的樣貌呈現。學員可以與資訊界的名人們近距離互動，期望透過縮短講者與學員之間的距離，講者可以更針對學員給出建議，也鼓勵學員踴躍提問、參與，進而產生良好的雙向交流。
</EventContent>
<EventImg src="./images/53110517522_254f76817b_c.jpg" />
</EventBox>
<EventBox>
<div className="flex mb-[2rem]">
<div className="bg-[linear-gradient(90deg,#FF8585,#FF5858)] w-[50%] h-[1rem] mx-auto rounded-b-full" />
</div>
<EventContent>
<EventTitle>
<img
src="/2024/images/source-mind.svg"
alt="開源精神與社群"
height={"2rem"}
width={"auto"}
/>
開源精神與社群
</EventTitle>
開源精神短講將邀請在開源社群中活躍多年的前輩，期許能夠透過前輩的經驗分享來讓學員更加認識開源（Open
Source），並鼓勵學員參與往後的社群活動。同時，我們也會邀請許多和資訊相關的社群前來擺攤，藉由互動遊戲、影片欣賞、專人介紹、闖關集點...等方式，讓學員認識所謂的「社群」，並對開源活動有初步了解。
</EventContent>
<EventImg src="./images/53111600473_89d572cbcb_c.jpg" />
</EventBox>
<EventBox>
<div className="flex mb-[2rem]">
<div className="bg-[linear-gradient(90deg,#6C5AC1,#C2A5F4)] w-[50%] h-[1rem] mx-auto rounded-b-full" />
</div>
<EventContent>
<EventTitle>
<img
src="/2024/images/breakthrough-game.svg"
alt="闖關活動"
height={"2rem"}
width={"auto"}
/>
闖關活動
</EventTitle>
在遊戲中融入程式，讓夏令營的學員們可以在團隊合作中，一起享受解謎的樂趣和刺激，同時學習更多元的知識內容。有趣的故事和豐富的解謎，歡迎挑戰！
</EventContent>
<EventImg src="./images/53111601698_7e4ba45812_c.jpg" />
</EventBox>
</div>
<TimeTable />
<div className="mt-[5rem]" />
<EventBox>
<div className="flex mb-[2rem]">
<div className="bg-[linear-gradient(90deg,#EAB9D4,#E78EBF)] w-[50%] h-[1rem] mx-auto rounded-b-full" />
</div>
<EventContent>
<EventTitle>
<img src="/2024/images/main-course.svg" alt="主線課程" height={"2rem"} width={"auto"} />
主線課程
</EventTitle>
講師們會帶著大家從零開始認識 Python，從基礎語法、各種資料結構，到 function、套件管理，最終目標是做出屬於自己的 Telegram 聊天機器人！
<br />
<br />
在課程中，透過講師的精心準備的課程，穿插多個動手實作練習，並即時搭配多位助教及講師的協助，確保每位學員都能夠得到充分的關注和指導，讓每一位學員都可以跟上課程進度，並且在課程中不斷進步。
</EventContent>
<EventImg src="./images/53111094241_0442d799b2_c.jpg" />
</EventBox>
<EventBox>
<div className="flex mb-[2rem]">
<div className="bg-[linear-gradient(90deg,#B1DAED,#809CF3)] w-[50%] h-[1rem] mx-auto rounded-b-full" />
</div>
<EventContent>
<EventTitle>
<img src="/2024/images/hackathon.svg" alt="Ｈackathon" height={"2rem"} width={"auto"} />
Hackathon
</EventTitle>
黑客松（Hackathon）是「黑客」（Hack；原指早期為電腦系統找尋不完美的地方，或是探索不同的解法，來改善電腦系統）與「馬拉松」（Marathon）的組合字，顧名思義，也就像是程式設計、工程界的馬拉松：由有興趣的一群人在有限的時間內，發揮自己的專長做出一個有特色的專案。
</EventContent>
<EventImg src="./images/48711682947_ebcb764c42_c.jpg" />
</EventBox>
<EventBox>
<div className="flex mb-[2rem]">
<div className="bg-[linear-gradient(90deg,#92EBEB,#55C6C6)] w-[50%] h-[1rem] mx-auto rounded-b-full" />
</div>
<EventContent>
<EventTitle>
<img src="/2024/images/breadth.svg" alt="廣度課程" height={"2rem"} width={"auto"} />
廣度課程
</EventTitle>
為避免單一的教學方式限制了學員對資訊領域的視野，夏令營在設計時，特別安排了廣度課程。讓學員在學習基礎課程之餘，也能學到資訊領域的其他層面，增加自身資訊技能的廣度。其中，我們邀請到了許多在資訊圈打滾多年的權威人士分享自身經驗，期許能為迷茫中的學員，點亮未來的一盞明燈，找到屬於自己的資訊路。
</EventContent>
<EventImg src="./images/48711498916_9f781599dc_c.jpg" />
</EventBox>
<EventBox>
<div className="flex mb-[2rem]">
<div className="bg-[linear-gradient(90deg,#FFAE6D,#F98849)] w-[50%] h-[1rem] mx-auto rounded-b-full" />
</div>
<EventContent>
<EventTitle>
<img src="/2024/images/view-coffee.svg" alt="視界咖啡館" height={"2rem"} width={"auto"} />
視界咖啡館
</EventTitle>
視界咖啡館參考自世界咖啡館（The World Café），在本次夏令營中，我們邀請到各領域及社群知名前輩，將傳統座談會形式改以聊天的樣貌呈現。學員可以與資訊界的名人們近距離互動，期望透過縮短講者與學員之間的距離，講者可以更針對學員給出建議，也鼓勵學員踴躍提問、參與，進而產生良好的雙向交流。
</EventContent>
<EventImg src="./images/53110517522_254f76817b_c.jpg" />
</EventBox>
<EventBox>
<div className="flex mb-[2rem]">
<div className="bg-[linear-gradient(90deg,#FF8585,#FF5858)] w-[50%] h-[1rem] mx-auto rounded-b-full" />
</div>
<EventContent>
<EventTitle>
<img src="/2024/images/source-mind.svg" alt="開源精神與社群" height={"2rem"} width={"auto"} />
開源精神與社群
</EventTitle>
開源精神短講將邀請在開源社群中活躍多年的前輩，期許能夠透過前輩的經驗分享來讓學員更加認識開源（Open Source），並鼓勵學員參與往後的社群活動。同時，我們也會邀請許多和資訊相關的社群前來擺攤，藉由互動遊戲、影片欣賞、專人介紹、闖關集點...等方式，讓學員認識所謂的「社群」，並對開源活動有初步了解。
</EventContent>
<EventImg src="./images/53111600473_89d572cbcb_c.jpg" />
</EventBox>
<EventBox>
<div className="flex mb-[2rem]">
<div className="bg-[linear-gradient(90deg,#6C5AC1,#C2A5F4)] w-[50%] h-[1rem] mx-auto rounded-b-full" />
</div>
<EventContent>
<EventTitle>
<img src="/2024/images/breakthrough-game.svg" alt="闖關活動" height={"2rem"} width={"auto"} />
闖關活動
</EventTitle>
在遊戲中融入程式，讓夏令營的學員們可以在團隊合作中，一起享受解謎的樂趣和刺激，同時學習更多元的知識內容。有趣的故事和豐富的解謎，歡迎挑戰！
</EventContent>
<EventImg src="./images/53111601698_7e4ba45812_c.jpg" />
</EventBox>
</div >
</div>
);
}
Loading

0 comments on commit 6fe7347

Please sign in to comment.