Skip to content

Commit

Permalink
Implmenet: Marquee
Browse files Browse the repository at this point in the history
  • Loading branch information
@ntut-xuan
ntut-xuan committed Jun 12, 2024
1 parent b405d32 commit 0667663
Show file tree
Hide file tree
Showing 6 changed files with 188 additions and 106 deletions.
109 changes: 109 additions & 0 deletions src/assets/news.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
[
{
"people": "簡嘉頤、林妍蓁、劉宜蓁",
"description": "榮獲 2024 尋找資安女婕思（資安組）- 第二名",
"time": "2024.04.27"
},
{
"people": "吳奕萱、何穎宣、莊于潔",
"description": "榮獲 2024 尋找資安女婕思（資安組）- 佳作",
"time": "2024.04.27"
},
{
"people": "李佳軒、黄湘婷、陳欣霈",
"description": "榮獲 2024 尋找資安女婕思（資安組）- 佳作",
"time": "2024.04.27"
},
{
"people": "林星主、李子儀、詹採晴",
"description": "榮獲 2024 尋找資安女婕思（資安組）- 佳作",
"time": "2024.04.27"
},
{
"people": "胡瑀涵、歐佳昀、黃曉筠",
"description": "榮獲 2024 尋找資安女婕思（資安組）- 佳作",
"time": "2024.04.27"
},
{
"people": "吳奕萱、何穎宣、莊于潔、李佳軒、黄湘婷、陳欣霈、簡嘉頤、林妍蓁、劉宜蓁、胡瑀涵、歐佳昀、黃曉筠、林星主、李子儀、詹採晴",
"description": "晉級 2024 尋找資安女婕思（資安組）決賽",
"extraDescription": "（晉級率 15/21 = 71%）",
"time": "2024.04.16"
},
{
"people": "白又銘、郭思彤",
"description": "榮獲第 54 屆全國技能競賽（北區分區-青年組）網路安全職類第二名",
"time": "2024.03.30"
},
{
"people": "李昆積、張家維",
"description": "晉級 2024 AIS3 EOF 攻防競賽決賽",
"time": "2024.01.21"
},
{
"people": "李昆積、林幸慧",
"description": "錄取 TeamT5 Security Camp 2024 資安培訓營",
"time": "2024.12.14"
},
{
"people": "黃漢軒",
"description": "錄取 國立清華大學 資訊安全研究所、國立陽明交通大學 資訊安全研究所",
"time": "2024.12.14"
},
{
"people": "顏柏耀、張家維、許貽昇",
"description": "通過 112 年 iPAS 初級資訊安全工程師鑑定",
"time": "2023.12.05"
},
{
"people": "張家維、顏柏耀",
"description": "榮獲 2023 T 貓盃全國資安基礎實務能力競賽 - 佳作",
"time": "2023.11.23"
},
{
"people": "陳勝舢",
"description": "榮獲 DEVCORE 戴夫寇爾 獎學金資格",
"time": "2023.10.18"
},
{
"people": "李昆積、李子儀、吳奕萱、何穎宣、莊于潔",
"description": "錄取 2023 AIS3 新型態資安實務主題課程",
"time": "2023.07.07"
},
{
"people": "陳勝舢",
"description": "榮任第 53 屆全國技能競賽暨國手選拔賽青年組「網路安全」職類解說技術顧問",
"time": "2023.06.17"
},
{
"people": "張君瑋、郭丞軒、呂凱達、林蔚、林星主、林正峰、林威立、吳承諺、王育嵐、林承孝、洪嘉璘、劉柏鑫、盧岳劭、温淇淼、黃柏喆、吳威勝、楊子毅、李之正、邱凡洺、何亞翰、李昆積、陳雅音、江柔萱",
"description": "通過 112 年 iPAS 初級資訊安全工程師鑑定",
"extraDescription": "（課程同學通過率 23/37 = 62%）",
"time": "2023.06.16"
},
{
"people": "陸詠涵、陳佳均、陳琴蓮",
"description": "榮獲 2023 尋找資安女婕思（資安組）- 優勝",
"time": "2023.04.16"
},
{
"people": "吳奕萱、何穎宣、莊于潔",
"description": "榮獲 2023 尋找資安女婕思（資安組）- 佳作",
"time": "2023.04.16"
},
{
"people": "張洸銘",
"description": "榮獲 2023 AIS3 EOF攻防競賽 特別獎 - 蟒蛇專家獎",
"time": "2023.02.13"
},
{
"people": "陳勝舢",
"description": "錄取 TeamT5 Security Camp 2023 資安培訓營",
"time": "2022.12.13"
},
{
"people": "陳勝舢",
"description": "榮獲 AIS3 新型態資安暑期課程最佳專題獎",
"time": "2022.07.31"
}
]
28 changes: 28 additions & 0 deletions src/component/Marquee.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import news from "../assets/news.json"

export function Marquee(){
return (
<div className="w-100 overflow-y-hidden" style={{height: "400px"}}>
<div className="marquee-container">
<div className="marquee-content">
{
news.map((data) => {
return <>
<p>賀！{data.people} {data.description}</p>
<br/>
</>
})
}
{
news.map((data) => {
return <>
<p>賀！{data.people} {data.description}</p>
<br/>
</>
})
}
</div>
</div>
</div>
)
}
3 changes: 1 addition & 2 deletions src/component/Topics.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,7 @@ export function Topics(props: {
}){
return (
<p>
<span className="bold-red">{props.topic}</span>:
<span className="fst-italic">{props.description}</span>
<span className="bold-red">{props.topic}</span>: <span className="fst-italic">{props.description}</span>
</p>
)
}
32 changes: 32 additions & 0 deletions src/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -150,4 +150,36 @@ a {

.activities td {
padding: 1.25rem;
}

.marquee-container {
height: 100%; /* Adjust this to fit your desired height */
overflow: hidden;
position: relative;
}

.marquee-content {
display: flex;
flex-direction: column;
position: absolute;
top: 100%;
animation: scroll 150s linear infinite;
}

.marquee-container:hover .marquee-content {
animation-play-state: paused;
}

.marquee-content p {
font-size: calc(0.6rem + .3vw) !important;
color: #cf2e2e
}

@keyframes scroll {
0% {
transform: translateY(0%);
}
100% {
transform: translateY(-100%);
}
}
6 changes: 4 additions & 2 deletions src/layout/RootLayout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { Outlet } from "react-router-dom";
import { Header } from "../component/Header";
import { Navbar } from "../component/Navbar";
import Logo from "../assets/logo.png"
import { Marquee } from "../component/Marquee";

export function RootLayout(){
return (
Expand All @@ -21,8 +22,9 @@ export function RootLayout(){
<div className="border border-1 w-100 p-3" style={{borderColor: "#ffffff33"}}>
<img className="w-100 h-auto" src={Logo}></img>
</div>
<div className="border border-1 w-100 p-3">
<h6 className="fw-bold">公告</h6>
<div className="border border-1 w-100 p-4">
<h6 className="fw-bold mb-3">公告</h6>
<Marquee />
</div>
</Col>
</Row>
Expand Down
116 changes: 14 additions & 102 deletions src/page/News.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import news from "../assets/news.json"

export function News(){

const NewsItem = (props: {
Expand Down Expand Up @@ -30,108 +32,18 @@ export function News(){
<small>歡迎寄信與我聯繫：[email protected]</small>
<br/>
<table className="table-bordered">
<NewsItem
people="簡嘉頤、林妍蓁、劉宜蓁"
description="榮獲 2024 尋找資安女婕思（資安組）- 第二名"
time="2024.04.27"
></NewsItem>
<NewsItem
people="吳奕萱、何穎宣、莊于潔"
description="榮獲 2024 尋找資安女婕思（資安組）- 佳作"
time="2024.04.27"
></NewsItem>
<NewsItem
people="李佳軒、黄湘婷、陳欣霈"
description="榮獲 2024 尋找資安女婕思（資安組）- 佳作"
time="2024.04.27"
></NewsItem>
<NewsItem
people="林星主、李子儀、詹採晴"
description="榮獲 2024 尋找資安女婕思（資安組）- 佳作"
time="2024.04.27"
></NewsItem>
<NewsItem
people="胡瑀涵、歐佳昀、黃曉筠"
description="榮獲 2024 尋找資安女婕思（資安組）- 佳作"
time="2024.04.27"
></NewsItem>
<NewsItem
people="吳奕萱、何穎宣、莊于潔、李佳軒、黄湘婷、陳欣霈、簡嘉頤、林妍蓁、劉宜蓁、胡瑀涵、歐佳昀、黃曉筠、林星主、李子儀、詹採晴"
description="晉級 2024 尋找資安女婕思（資安組）決賽"
extraDescription="（晉級率 15/21 = 71%）"
time="2024.04.16"
></NewsItem>
<NewsItem
people="白又銘、郭思彤"
description="榮獲第 54 屆全國技能競賽（北區分區-青年組）網路安全職類第二名"
time="2024.03.30"
></NewsItem>
<NewsItem
people="李昆積、張家維"
description="晉級 2024 AIS3 EOF 攻防競賽決賽"
time="2024.01.21"
></NewsItem>
<NewsItem
people="黃漢軒"
description="錄取 國立清華大學 資訊安全研究所、國立陽明交通大學 資訊安全研究所"
time="2024.01.21"
></NewsItem>
<NewsItem
people="顏柏耀、張家維、許貽昇"
description="通過 112 年 iPAS 初級資訊安全工程師鑑定"
time="2023.12.05"
></NewsItem>
<NewsItem
people="張家維、顏柏耀"
description="榮獲 2023 T 貓盃全國資安基礎實務能力競賽 - 佳作"
time="2023.11.23"
></NewsItem>
<NewsItem
people="陳勝舢"
description="榮獲 DEVCORE 戴夫寇爾 獎學金資格"
time="2023.10.18"
></NewsItem>
<NewsItem
people="李昆積、李子儀、吳奕萱、何穎宣、莊于潔"
description="錄取 2023 AIS3 新型態資安實務主題課程"
time="2023.07.07"
></NewsItem>
<NewsItem
people="陳勝舢"
description="榮任第 53 屆全國技能競賽暨國手選拔賽青年組「網路安全」職類解說技術顧問"
time="2023.06.17"
></NewsItem>
<NewsItem
people="張君瑋、郭丞軒、呂凱達、林蔚、林星主、林正峰、林威立、吳承諺、王育嵐、林承孝、洪嘉璘、劉柏鑫、盧岳劭、温淇淼、黃柏喆、吳威勝、楊子毅、李之正、邱凡洺、何亞翰、李昆積、陳雅音、江柔萱"
description="通過 112 年 iPAS 初級資訊安全工程師鑑定"
extraDescription="（課程同學通過率 23/37 = 62%）"
time="2023.06.16"
></NewsItem>
<NewsItem
people="陸詠涵、陳佳均、陳琴蓮"
description="榮獲 2023 尋找資安女婕思（資安組）- 優勝"
time="2023.04.16"
></NewsItem>
<NewsItem
people="吳奕萱、何穎宣、莊于潔"
description="榮獲 2023 尋找資安女婕思（資安組）- 佳作"
time="2023.04.16"
></NewsItem>
<NewsItem
people="張洸銘"
description="榮獲 2023 AIS3 EOF攻防競賽 特別獎 - 蟒蛇專家獎"
time="2023.02.13"
></NewsItem>
<NewsItem
people="陳勝舢"
description="錄取 TeamT5 Security Camp 2023 資安培訓營"
time="2023.12.23"
></NewsItem>
<NewsItem
people="陳勝舢"
description="榮獲 AIS3 新型態資安暑期課程最佳專題獎"
time="2022.07.31"
></NewsItem>
{
news.map((data) => {
return (
<NewsItem
people={data.people}
description={data.description}
time={data.time}
extraDescription={data.extraDescription}
></NewsItem>
)
})
}
</table>
</div>
</div>
Expand Down

0 comments on commit 0667663

Please sign in to comment.