Merge branch 'dev' into colm/add_footer

UCCNetsoc · Feb 15, 2023 · 3c439cd · 3c439cd
2 parents 84b3b38 + 3f4390a
commit 3c439cd
Show file tree

Hide file tree

Showing 16 changed files with 395 additions and 109 deletions.
diff --git a/public/img/binary-repeat.png b/public/img/binary-repeat.png
diff --git a/public/index.html b/public/index.html
@@ -2,8 +2,8 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon-32x32.281f43d2.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"

diff --git a/src/App.css b/src/App.css
@@ -21,7 +21,7 @@
   align-items: center;
   justify-content: center;
   font-size: calc(10px + 2vmin);
-  color: white;
+  color: black;
 }
 
 .App-link {

diff --git a/src/App.module.css b/src/App.module.css
@@ -1,12 +1,12 @@
 .header {
-    background-color: #282c34;
+    /* background-color: #282c34; */
     min-height: 100vh;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     font-size: calc(10px + 2vmin);
-    color: white;
+    color: black;
 }
 
 .container {

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,16 +1,23 @@
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
-// import Home from './views/Home';
-import Home from './views/Home/Home';   // app won't run unless i add an extra /Home ¯\_(ツ)_/¯
-import Footer from './components/Footer';
+
+import About from './views/About/About';
+import Header from './components/Header';
+import Home from './views/Home/Home';
+import Gaming from './views/Gaming/Gaming';
+import Esports from './views/Esports/Esports';
+import Technology from './views/Technology/Technology';
 
 function App() {
   return (
     <>
       <Router>
-        <header>
-        </header>
+        <header/>
         <Routes>
+          <Route path="/about" element={<About />} />
           <Route path="/" element={<Home />} />
+          <Route path="/gaming" element={<Gaming />} />
+          <Route path="/technology" element={<Technology />} />
+          <Route path="/esports" element={<Esports />} />  
         </Routes>
       </Router>
       <Footer />

diff --git a/src/index.css b/src/index.css
@@ -1,12 +1,13 @@
-body {
+html, body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background-color: #1e1e1e;
-  color: white;
+  /* background-color: #1e1e1e; */
+  color: black;
+  height: 100%;
 }
 
 code {
@@ -15,11 +16,11 @@ code {
 }
 
 h1,h2,h3,a {
-  color: #fff;
+  color: black;
 }
 
 p,span {
-  color: #dddddd
+  color: #111;
 }
 
 small {

diff --git a/src/views/About/About.module.css b/src/views/About/About.module.css
@@ -0,0 +1,71 @@
+.bg {
+    z-index: -1;
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    background: url(../../../public/img/binary-repeat.png);
+    filter: invert(1) brightness(0.4);
+    animation: swipe 120s linear infinite;
+}
+
+.main {
+    margin: 0 auto;
+    z-index: 10;
+    background-color: rgba(27, 27, 27, 1);
+    width: 70vw;
+    min-height: -webkit-fill-available;
+    user-select: none;
+    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px,
+        rgba(0, 0, 0, 0.12) 0px 4px 6px,
+        rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
+}
+
+
+.article {
+    margin: 0 auto;
+    width: 80%;
+    font-size: 24px;
+    line-height: 1.5;
+}
+
+.article a {
+    color: #276ab6;
+    text-decoration: none;
+    transition: all .3s;
+}
+
+.title {
+    margin: 0;
+    color: rgb(255, 255, 255);
+    font-size: 3em;
+    text-align: center;
+    padding: .5em 0;
+}
+
+.article p {
+    color: rgb(255, 255, 255);
+    text-align: center;
+    padding-bottom: 1.75em;
+}
+
+.article a:hover {
+    box-shadow: inset 0 -3px 0 0 rgb(0, 161, 11);
+    padding-bottom: 6px;
+}
+
+@keyframes swipe {
+    0% {
+        background-position: 0% 50%;
+        /* filter: invert(1) brightness(0.4); */
+    }
+
+    50% {
+        background-position: 100% 50%;
+        /* filter: invert(1) brightness(0.4); */
+    }
+
+    100% {
+        background-position: 0% 50%;
+        /* filter: invert(1); */
+    }
+}
diff --git a/src/views/About/About.tsx b/src/views/About/About.tsx
@@ -0,0 +1,45 @@
+import styles from './About.module.css'
+
+const About = () => {
+  return (
+    <>
+      <div className={styles.bg}></div>
+      <main className={styles.main}>
+        <article className={styles.article}>
+          <h1 className={styles.title}>
+            About UCC Netsoc
+          </h1>
+          <p>
+            UCC Netsoc is <a href="https://www.ucc.ie">UCC</a>'s Networking,
+            Gaming and  Technology society.
+          </p>
+          <p>
+            We are a student-run non-profit college society that aims to provide a space for students
+            to learn about technology and network with each other, also have fun playing games and
+            find new friends with similar hobbies and interests.
+          </p>
+          <p>
+            We host a wide range of events throughout the year, including
+            workshops, talks, game nights and more. We also host a number of
+            competitions throughout the year, including our annual tech conference;{" "}
+            <a href="https://devcon.ie">Cork DevCon</a>.
+          </p>
+          <p>
+            We also run a number of projects, including our {" "}
+            <a href="https://netsoc.cloud">
+              Cloud Service
+            </a>, our <a href="https://github.com/uccnetsoc/nac">Infrastructure as Code</a> and some Discord bots.
+          </p>
+          <p>
+            We are always looking for new members, so if you are a UCC student and are interested  in
+            joining, head over to the <a href="https://candsportal.ucc.ie">Clubs & Socs Portal</a> and
+            become a member. Also make sure to join our{" "}<a href="https://discord.netsoc.co">Discord</a>{" "}
+            to keep up to date on events and the happenings of the society.
+          </p>
+        </article>
+      </main>
+    </>
+  )
+}
+
+export default About;
diff --git a/src/views/Esports/Esports.module.css b/src/views/Esports/Esports.module.css
diff --git a/src/views/Esports/Esports.tsx b/src/views/Esports/Esports.tsx
@@ -0,0 +1,14 @@
+import styles from "./Esports.module.css";
+
+const Esports = () => {
+    return (
+        <>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+                 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+                  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+        </>
+    )
+}
+
+export default Esports;
diff --git a/src/views/Gaming/Gaming.module.css b/src/views/Gaming/Gaming.module.css
diff --git a/src/views/Gaming/Gaming.tsx b/src/views/Gaming/Gaming.tsx
@@ -0,0 +1,14 @@
+import styles from "./Gaming.module.css";
+
+const Gaming = () => {
+    return (
+        <>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+                 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+                  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+        </>
+    )
+}
+
+export default Gaming;