Lint

.eslintrc.cjs

@@ -39,7 +39,7 @@ module.exports = {
     '@stylistic/eol-last': ['error', 'always'],
     '@stylistic/indent': ['error', 2],
     '@stylistic/jsx-quotes': ['error', 'prefer-single'],
-    '@stylistic/max-len': ['error'],
+    '@stylistic/max-len': ['error', 120],
     '@stylistic/no-trailing-spaces': ['error'],
     '@stylistic/object-curly-spacing': ['error', 'always'],
     '@stylistic/quotes': ['error', 'single'],

index.html

@@ -4,16 +4,16 @@
     <meta charset='UTF-8'>
     <link rel='icon' type='image/png' href='/comclub_logo.png'>
     <link
-      rel="stylesheet"
-      type="text/css"
-      charset="UTF-8"
-      href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css"
-    />
+      rel='stylesheet'
+      type='text/css'
+      charset='UTF-8'
+      href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css'
+    >
     <link
-      rel="stylesheet"
-      type="text/css"
-      href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"
-    />
+      rel='stylesheet'
+      type='text/css'
+      href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css'
+    >
     <meta name='viewport' content='width=device-width, initial-scale=1.0'>
     <title>NUS Students' Computing Club</title>
   </head>

package.json

@@ -24,6 +24,7 @@
     "@stylistic/eslint-plugin": "^1.5.3",
     "@types/react": "^18.2.43",
     "@types/react-dom": "^18.2.17",
+    "@types/react-slick": "^0.23.13",
     "@typescript-eslint/eslint-plugin": "^6.19.0",
     "@typescript-eslint/parser": "^6.19.0",
     "@vitejs/plugin-react": "^4.2.1",

src/App.jsx

@@ -16,17 +16,11 @@ function App() {
         <Routes>
           <Route path='/' element={<Home />} />
           <Route path='/privacy' element={<Privacy />} />
-        </Routes>
-        <Routes>
           <Route path='/about' element={<About />} />
-        </Routes>
-        <Routes>
           <Route path='/events'>
             <Route path='' element={<Events />} />
             <Route path=':articleLink' element={<Article />} />
           </Route>
-        </Routes>
-        <Routes>
           <Route path='/resources' element={<Resources />} />
         </Routes>
       </main>

src/layout/WindowCard.css

@@ -5,6 +5,7 @@
     border-2
     overflow-hidden
     drop-shadow-window
+    w-fit
   ;
 }
 

src/pages/about/RolesSection.tsx

@@ -16,7 +16,7 @@ function RolesSection() {
                 {
                   members.map((member) => {
                     const imgSrc: string =
-                      `members/${member.name.replace(/\s/g, '')}.jpg`;
+                      `/members/${member.name.replace(/\s/g, '')}.jpg`;
                     return <RoleCard
                       name={member.name}
                       role={member.role}

src/pages/about/index.tsx

@@ -7,7 +7,7 @@ function About() {
   return (
     <div>
       <section>
-        <img src='about_graphic.svg' className='section-graphic'></img>
+        <img src='/about_graphic.svg' className='section-graphic'></img>
         <div className='section-description'>
           <h1>About Us</h1>
           <p>
@@ -39,7 +39,7 @@ function About() {
       <section className='icon-section'>
         <div className='icon-container'>
           <div className='icon-bubble'>
-            <img src='vision_icon.svg'></img>
+            <img src='/vision_icon.svg'></img>
           </div>
           <h3>Our Vision</h3>
           <p>
@@ -51,7 +51,7 @@ function About() {
 
         <div className='icon-container'>
           <div className='icon-bubble'>
-            <img src='mission_icon.svg'></img>
+            <img src='/mission_icon.svg'></img>
           </div>
           <h3>Our Mission</h3>
           <p>

src/pages/events/articles.json

@@ -1 +1 @@
-{"wellness_festival": {"title": "SOC Wellness Festival", "body": "\nHey SoC Students,\n\nAre you feeling the mid-semester slump? Is your brain starting to feel fried from staring at endless lines of code? If so, don\u2019t panic. We\u2019ve got the antidote for you!\n\nThis year, we are introducing Canine Companion: Interacting with Dogs, a collaboration between Student Life Office and Computing Club.\n\nRegistration is free for all NUS SoC students!\n\nPlease note:\nEvent is limited to 10-minute timeslot per person. You will be allocated to, and informed about a specific 10-minute timeslot within the window period that the event is conducted.\n\nDo check out some other exciting workshops under SoC Wellness Festival 2024 too\ud83d\ude0e\ud83d\ude0e:\n- Craft your own Musical Box\n- Build your own Air Plant Terrarium\n- Embrace Nature with Forest Therapy\n\nSlots are limited so do register your interest at https://forms.office.com/r/4vfPX0aiCF now!\n", "link": "wellness_festival", "imgSrc": "https://nuscomputingdev.github.io/comclub-website-2024/articles/wellness_festival.jpg"}, "bizcom_league": {"title": "BIZCOM League", "body": "\nHEY SOC\ud83e\udd13\nRecess week is almost here \ud83d\ude0b! are you looking for ways to destress?? \ud83d\ude0c AND meet new friends \ud83e\udd73\ud83e\udd73?\n\nJoin us at BIZCOM LEAGUE, and stand a chance to win:\n- HaiDiLao vouchers \ud83c\udf72 - Grab vouchers \ud83d\ude97\n- NTUC vouchers \ud83c\udf7e\n- JBL speakers \ud83d\udd08!\n- FREE JERSEYS \ud83d\udc55\nanddddd most importantly, IT\u2019s FREE!!!! \ud83e\udd11\n\n\nBIZCOM LEAGUE IS BACK AGAIN\ud83d\ude31\ud83d\ude31\ud83e\udd29\ud83e\udd29 between NUS Computing Club and NUS Bizad Club where you get to make some new Biz friends! (You may sign up in groups of 8 MAX, or even solo!)\nAll you have to do is sign up and play four sports (basketball\ud83c\udfc0 , dodgeball \ud83e\udd3e\u200d\u2640\ufe0f, ultimate frisbee\ud83e\udd4f , captain\u2019s ball \ud83c\udfd0) over the course of two days!\n\nWHEN?\n\u203c\ufe0f26 Feb 9am - 7pm\n\u203c\ufe0f27 Feb 9am - 7pm\n\nSo WHAT ARE YOU WAITING FOR\u2049\ufe0fSIGN UP NOW\u203c\ufe0f you won\u2019t regret it \ud83e\udd2d\nhttps://nus.campuslabs.com/engage/submitter/form/start/626464\n", "link": "bizcom_league", "imgSrc": "https://nuscomputingdev.github.io/comclub-website-2024/articles/bizcom_league.jpg"}, "freshman_social_camp": {"title": "Freshman Social Camp", "body": "\nDates: 19th June - 22nd June 2024\n\nTheme: Harry Potter\n\nFSC is crafted to kickstart your university journey with enduring friendships and unforgettable experiences. Engage in a variety of physical and intellectual games, participate in team bonding exercises, and compete for exciting team and individual prizes. You will also have the opportunity to attend the beach finale event Bash together with your new friends, solidifying your friendships.\n\nSignup links will be released soon! Stay tuned!\n", "link": "freshman_social_camp", "imgSrc": "/announcements/fsc.jpg"}, "freshman_orientation_camp": {"title": "Freshman Orientation Camp", "body": "\nDates: 24th July - 27th July 2024\n\nTheme: Teenage Mutant Ninja Turtles\n\nFOW is a 4-day physical orientation camp where seniors help freshmen adapt to different aspects of university life through preparatory talks and team-building activities. Forge lasting friendships as you navigate campus resources and academic challenges together. Look forward to strategic team games that develop you both intellectually and physically.\n\nSignup links will be released soon! Stay tuned!\n", "link": "freshman_orientation_camp", "imgSrc": "/announcements/fow.jpg"}, "freshman_finale_camp": {"title": "Freshman Finale Camp", "body": "\nDates: 5th August - 7th August 2024\n\nTheme: Elementals: Rediscover your inner element\n\nAbstract: FFC is a 3-day physical summer camp, perfectly tailored for international students gearing up for matriculation closer to August. The camp offers an array of theme-based activities such as flag-building and exhilarating house face-offs. Engage in friendly competition alongside your housemates, strategizing to earn glory for your elemental faction in a series of thrilling challenges. End the camp on a high note with its campfire and barbecue finale under the stars.\n\nSignup links will be released soon! Stay tuned!\n", "link": "freshman_finale_camp", "imgSrc": "/announcements/ffc.jpg"}, "computing_bash": {"title": "Computing Bash", "body": "\nEvent date: 16th August 2024\n\nA fun-filled beach finale event where freshmen and seniors come together to wrap up the entire orientation experience with a night of performances, games, and food. Held at Sentosa Beach, Bash 2024 offers an electrifying atmosphere with DJ sets, inflatable obstacle courses, and much more.\n\nSignup links will be released soon! Stay tuned!\n", "link": "computing_bash", "imgSrc": "/announcements/bash.jpg"}}
+{"wellness_festival": {"title": "SOC Wellness Festival", "body": "\nHey SoC Students,\n\nAre you feeling the mid-semester slump? Is your brain starting to feel fried from staring at endless lines of code? If so, don\u2019t panic. We\u2019ve got the antidote for you!\n\nThis year, we are introducing Canine Companion: Interacting with Dogs, a collaboration between Student Life Office and Computing Club.\n\nRegistration is free for all NUS SoC students!\n\nPlease note:\nEvent is limited to 10-minute timeslot per person. You will be allocated to, and informed about a specific 10-minute timeslot within the window period that the event is conducted.\n\nDo check out some other exciting workshops under SoC Wellness Festival 2024 too\ud83d\ude0e\ud83d\ude0e:\n- Craft your own Musical Box\n- Build your own Air Plant Terrarium\n- Embrace Nature with Forest Therapy\n\nSlots are limited so do register your interest at https://forms.office.com/r/4vfPX0aiCF now!\n", "link": "wellness_festival", "imgSrc": "https://nuscomputingdev.github.io/comclub-website-2024/articles/wellness_festival.jpg"}, "bizcom_league": {"title": "BIZCOM League", "body": "\nHEY SOC\ud83e\udd13\nRecess week is almost here \ud83d\ude0b! are you looking for ways to destress?? \ud83d\ude0c AND meet new friends \ud83e\udd73\ud83e\udd73?\n\nJoin us at BIZCOM LEAGUE, and stand a chance to win:\n- HaiDiLao vouchers \ud83c\udf72 - Grab vouchers \ud83d\ude97\n- NTUC vouchers \ud83c\udf7e\n- JBL speakers \ud83d\udd08!\n- FREE JERSEYS \ud83d\udc55\nanddddd most importantly, IT\u2019s FREE!!!! \ud83e\udd11\n\n\nBIZCOM LEAGUE IS BACK AGAIN\ud83d\ude31\ud83d\ude31\ud83e\udd29\ud83e\udd29 between NUS Computing Club and NUS Bizad Club where you get to make some new Biz friends! (You may sign up in groups of 8 MAX, or even solo!)\nAll you have to do is sign up and play four sports (basketball\ud83c\udfc0 , dodgeball \ud83e\udd3e\u200d\u2640\ufe0f, ultimate frisbee\ud83e\udd4f , captain\u2019s ball \ud83c\udfd0) over the course of two days!\n\nWHEN?\n\u203c\ufe0f26 Feb 9am - 7pm\n\u203c\ufe0f27 Feb 9am - 7pm\n\nSo WHAT ARE YOU WAITING FOR\u2049\ufe0fSIGN UP NOW\u203c\ufe0f you won\u2019t regret it \ud83e\udd2d\nhttps://nus.campuslabs.com/engage/submitter/form/start/626464\n", "link": "bizcom_league", "imgSrc": "https://nuscomputingdev.github.io/comclub-website-2024/articles/bizcom_league.jpg"}, "freshman_social_camp": {"title": "Freshman Social Camp", "body": "\nDates: 19th June - 22nd June 2024\n\nTheme: Harry Potter\n\nFSC is crafted to kickstart your university journey with enduring friendships and unforgettable experiences. Engage in a variety of physical and intellectual games, participate in team bonding exercises, and compete for exciting team and individual prizes. You will also have the opportunity to attend the beach finale event Bash together with your new friends, solidifying your friendships.\n\nSignup links will be released soon! Stay tuned!\n", "link": "freshman_social_camp", "imgSrc": "/announcements/fsc.jpg"}, "freshman_orientation_camp": {"title": "Freshman Orientation Camp", "body": "\nDates: 24th July - 27th July 2024\n\nTheme: Teenage Mutant Ninja Turtles\n\nFOW is a 4-day physical orientation camp where seniors help freshmen adapt to different aspects of university life through preparatory talks and team-building activities. Forge lasting friendships as you navigate campus resources and academic challenges together. Look forward to strategic team games that develop you both intellectually and physically.\n\nSignup links will be released soon! Stay tuned!\n", "link": "freshman_orientation_camp", "imgSrc": "/announcements/fow.jpg"}, "freshman_finale_camp": {"title": "Freshman Finale Camp", "body": "\nDates: 5th August - 7th August 2024\n\nTheme: Elementals: Rediscover your inner element\n\nAbstract: FFC is a 3-day physical summer camp, perfectly tailored for international students gearing up for matriculation closer to August. The camp offers an array of theme-based activities such as flag-building and exhilarating house face-offs. Engage in friendly competition alongside your housemates, strategizing to earn glory for your elemental faction in a series of thrilling challenges. End the camp on a high note with its campfire and barbecue finale under the stars.\n\nSignup links will be released soon! Stay tuned!\n", "link": "freshman_finale_camp", "imgSrc": "/announcements/ffc.jpg"}, "computing_bash": {"title": "Computing Bash", "body": "\nEvent date: 16th August 2024\n\nA fun-filled beach finale event where freshmen and seniors come together to wrap up the entire orientation experience with a night of performances, games, and food. Held at Sentosa Beach, Bash 2024 offers an electrifying atmosphere with DJ sets, inflatable obstacle courses, and much more.\n\nSignup links will be released soon! Stay tuned!\n", "link": "computing_bash", "imgSrc": "/announcements/bash.jpg"}}

src/pages/events/dump.py

@@ -90,13 +90,13 @@
             'title': 'SOC Wellness Festival',
             'body': wellness_festival_body,
             'link': 'wellness_festival',
-            'imgSrc': 'https://nuscomputingdev.github.io/comclub-website-2024/articles/wellness_festival.jpg',
+            'imgSrc': '/articles/wellness_festival.jpg',
         },
         'bizcom_league': {
             'title': 'BIZCOM League',
             'body': bizcom_league_body,
             'link': 'bizcom_league',
-            'imgSrc': 'https://nuscomputingdev.github.io/comclub-website-2024/articles/bizcom_league.jpg',
+            'imgSrc': '/articles/bizcom_league.jpg',
         },
         'freshman_social_camp': {
             'title': 'Freshman Social Camp',

src/pages/resources/FolderLink.tsx

@@ -9,7 +9,7 @@ interface FolderLinkProps {
 function FolderLink(props: FolderLinkProps) {
   return (
     <a className='folder-link' href={props.link} target='blank'>
-      <img src='folder_icon.svg'></img>
+      <img src='/folder_icon.svg'></img>
       <p>{props.label}</p>
     </a>
   );

src/pages/resources/index.tsx

@@ -15,23 +15,27 @@ function Resources() {
 
       <section className='md:items-start'>
         <div className='resource-window-container'>
-          <WindowCard content={<div className='resource-window-content'>
-            <img src='planner_icon.svg'></img>
-            <div className='resource-window-text'>
-              <h4>Study Planner</h4>
-              <p>Chart out your academic journey.</p>
-              <button disabled>Coming Soon!</button>
+          <WindowCard content={
+            <div className='resource-window-content'>
+              <img src='/planner_icon.svg'></img>
+              <div className='resource-window-text'>
+                <h4>Study Planner</h4>
+                <p>Chart out your academic journey.</p>
+                <button disabled>Coming Soon!</button>
+              </div>
             </div>
-          </div>}></WindowCard>
+          }></WindowCard>
 
-          <WindowCard content={<div className='resource-window-content'>
-            <img src='sep_icon.svg'></img>
-            <div className='resource-window-text'>
-              <h4>SEP Points Tracker</h4>
-              <p>Monitor your SEP points.</p>
-              <button disabled>Coming Soon!</button>
+          <WindowCard content={
+            <div className='resource-window-content'>
+              <img src='/sep_icon.svg'></img>
+              <div className='resource-window-text'>
+                <h4>SEP Points Tracker</h4>
+                <p>Monitor your SEP points.</p>
+                <button disabled>Coming Soon!</button>
+              </div>
             </div>
-          </div>}></WindowCard>
+          }></WindowCard>
         </div>
 
         <div className='resource-link-container'>