Merge pull request #6 from ucsdds3/Issac

Issac
ucsdds3 · Nov 13, 2024 · eceb7c6 · eceb7c6
2 parents 74910a8 + 9221ddb
commit eceb7c6
Show file tree

Hide file tree

Showing 12 changed files with 237 additions and 12 deletions.
diff --git a/.github/workflows/deploy.yaml b/.github/workflows/deploy.yaml
@@ -0,0 +1,49 @@
+name: Deploy
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+
+      - name: Install dependencies
+        uses: bahmutov/npm-install@v1
+
+      - name: Build project
+        run: npm run build
+
+      - name: Upload production-ready build files
+        uses: actions/upload-artifact@v4
+        with:
+          name: production-files
+          path: ./dist
+
+  deploy:
+    name: Deploy
+    needs: build
+    runs-on: ubuntu-latest
+    if: github.ref == 'refs/heads/main'
+
+    steps:
+      - name: Download artifact
+        uses: actions/download-artifact@v4
+        with:
+          name: production-files
+          path: ./dist
+
+      - name: Deploy to GitHub Pages
+        uses: peaceiris/actions-gh-pages@v4
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./dist
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>DS3 @ UCSD</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,7 +15,9 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.3.0",
-    "react-router-dom": "^6.28.0"
+    "react-router-dom": "^6.28.0",
+    "simplebar": "^6.2.7",
+    "simplebar-react": "^3.2.6"
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,10 +1,10 @@
-import Navbar from './Components/Navbar'
+import Page from "./Components/Page/Page"
 
 function App() {
 
   return (
     <>
-      <Navbar />
+      <Page></Page>
     </>
   )
 }

diff --git a/src/Assets/Images/Sleepy_Bear.png b/src/Assets/Images/Sleepy_Bear.png
diff --git a/src/Assets/Images/big-logo-light.png b/src/Assets/Images/big-logo-light.png
diff --git a/src/Components/Page/Footer.tsx b/src/Components/Page/Footer.tsx
@@ -0,0 +1,79 @@
+import { FaDiscord, FaGithub, FaLinkedinIn } from "react-icons/fa6";
+import { SiGmail } from "react-icons/si";
+
+const Footer = () => {
+  const btnClass =
+    "btn rounded-full text-white text-lg w-12 p-0 border-none bg-[#202020] hover:bg-[#282828] glow";
+
+  return (
+    <div className="border-t border-[--border-color] flex py-8 bg-[#181818]">
+      <div className="flex flex-col flex-1 gap-3 items-center">
+        <img src="src\Assets\Images\big-logo-light.png" alt="DS3 Logo" className="w-40" />
+        <div className="flex flex-col gap-2 items-center text-sm font-medium">
+          <span>© 2024 Data Science Student Society, All Rights Reserved</span>
+        </div>
+      </div>
+      <div
+        id="quick-link"
+        className="flex flex-1 justify-center gap-x-20 border-x border-[--border-color]"
+      >
+        <div className="flex flex-col gap-y-2 justify-center">
+          <h4 className="text-lg font-bold mb-2 text-white">Information</h4>
+          <a href="" className="hover:underline">
+            About
+          </a>
+          <a href="" className="hover:underline">
+            Events
+          </a>
+        </div>
+        <div className="flex flex-col gap-y-2 justify-center">
+          <h4 className="text-lg font-bold mb-2 text-white">Get Involved</h4>
+          <a href="" className="hover:underline">
+            Projects
+          </a>
+          <a href="" className="hover:underline">
+            Consulting
+          </a>
+        </div>
+      </div>
+      <div
+        id="social-media-links"
+        className="flex flex-col flex-1 items-center justify-center gap-y-8"
+      >
+        <h4 className="text-lg font-bold text-white">Social Links</h4>
+        <div className="flex items-center w-[20vw] justify-evenly">
+          <button
+            onClick={() => window.open("https://discord.gg/fbnAP848V9", "_blank")}
+            className={btnClass}
+            title={"Discord"}
+          >
+            <FaDiscord />
+          </button>
+          <button
+            onClick={() => window.open("mailto:ds3@ucsd.edu", "_blank")}
+            className={btnClass}
+            title={"Mail"}
+          >
+            <SiGmail />
+          </button>
+          <button
+            onClick={() => window.open("https://github.com/TheBoyRoy05/", "_blank")}
+            className={btnClass}
+            title={"Github"}
+          >
+            <FaGithub />
+          </button>
+          <button
+            onClick={() => window.open("https://www.linkedin.com/in/issacroy/", "_blank")}
+            className={btnClass}
+            title={"LinkedIn"}
+          >
+            <FaLinkedinIn />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Footer;
diff --git a/src/Components/Navbar.tsx → src/Components/Page/Navbar.tsx b/src/Components/Navbar.tsx → src/Components/Page/Navbar.tsx
@@ -1,17 +1,16 @@
-import { FaHome } from "react-icons/fa";
 import { useNavigate } from "react-router-dom";
 
 const Navbar = () => {
   const navigate = useNavigate();
   const btnClass =
-    "btn mr-4 mt-4 overflow-hidden bg-gray-400 bg-clip-padding backdrop-filter backdrop-blur-sm bg-opacity-10 border-none shadow-lg text-gray-200 text-shadow hover:bg-gray-500 hover:bg-opacity-30";
+    "btn mx-2 my-2 overflow-hidden bg-gray-400 bg-clip-padding backdrop-filter backdrop-blur-sm bg-opacity-10 border-none shadow-lg text-gray-200 text-shadow hover:bg-gray-500 hover:bg-opacity-30";
 
   return (
     <div className="flex fixed w-full z-10 items-center">
-      <button className="text-[2rem] font-bold ml-6" onClick={() => navigate("/")}>
-        DS3
+      <button className="text-[2rem] font-bold ml-6 p-4" onClick={() => navigate("/")}>
+        <img src="src\Assets\Images\big-logo-light.png" alt="Logo" className="w-24" />
       </button>
-      <div className="flex flex-1 justify-end">
+      <div className="flex flex-1 justify-end mr-2">
         <button className={btnClass} onClick={() => navigate(`/about-me`)}>
           {"About Us"}
         </button>
@@ -26,4 +25,4 @@ const Navbar = () => {
   );
 };
 
-export default Navbar;
+export default Navbar;
diff --git a/src/Components/Page/Page.tsx b/src/Components/Page/Page.tsx
@@ -0,0 +1,31 @@
+import "simplebar-react/dist/simplebar.min.css";
+import SimpleBar from "simplebar-react";
+import Navbar from "./Navbar";
+import Footer from "./Footer";
+
+interface PageProps {
+  children?: React.ReactNode;
+}
+
+const Page = ({ children }: PageProps) => {
+  return (
+    <SimpleBar className={`absolute left-0 top-0 w-screen h-screen overflow-x-hidden bg-[#101010]`}>
+      <Navbar />
+      <div className="flex flex-col items-center py-[10vh]">
+        {children || (
+          <>
+            <h2 className="text-white text-center hero-text-shadow mt-10 mb-10 text-[3.75vw]">Coming Soon</h2>
+            <img
+              src={`/src/Assets/Images/Sleepy_Bear.png`}
+              alt="Under Construction"
+              className="bear mt-24 w-[42vw]"
+            />
+          </>
+        )}
+      </div>
+      <Footer />
+    </SimpleBar>
+  );
+};
+
+export default Page;
diff --git a/src/Styles/index.css b/src/Styles/index.css
@@ -1,3 +1,7 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+.hero-text-shadow {
+  text-shadow: 0 5px 20px #0057ff33, 0 -5px 15px #ff5a0026, 0 0 30px #ffffff4d;
+}
diff --git a/vite.config.ts b/vite.config.ts
@@ -4,4 +4,5 @@ import react from '@vitejs/plugin-react-swc'
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
+  base: "/DS3@UCSD/"
 })