Merge branch 'dev' into codex-1-about-page

GenDelta · web-flow · commit 99eb1c3795b9 · 2024-03-07T22:43:55.000+05:30
diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml
@@ -1,31 +1,50 @@
 name: Build
 
 on:
-  push:
-    branches:
-      - main
-      - dev
   pull_request:
     branches:
-      - main
       - dev
+    types:
+      - closed
 
 jobs:
   build:
     name: Build
     runs-on: ubuntu-latest
 
     steps:
-      - name: Checkout code
-        uses: actions/checkout@v2
+      - name: Checkout Code
+        uses: actions/checkout@v3
 
-      - name: Setup Node.js
-        uses: actions/setup-node@v2
+      - name: Install Node
+        uses: actions/setup-node@v3
         with:
-          node-version: '20.11.0'
+          node-version: 18.x
 
-      - name: Install dependencies
+      - name: Install Dependencies
         run: npm install
 
-      - name: Build project
-        run: npm run build
+      - name: Build Project
+        run: npm run build
+
+      - name: Upload artifact to enable deployment
+        uses: actions/upload-artifact@v3
+        with:
+          name: production-files
+          path: ./dist
+
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - name: Download artifact
+        uses: actions/download-artifact@v3
+        with:
+          name: production-files
+          path: ./dist
+
+      - name: Deploy to GitHub Pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.CI_CD_TOKEN }}
+          publish_dir: ./dist
diff --git a/.husky/commit-msg b/.husky/commit-msg
diff --git a/.husky/pre-commit b/.husky/pre-commit
diff --git a/index.html b/index.html
@@ -1,13 +1,16 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <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</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
-  </body>
-</html>
+
+<head>
+  <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>CodeX</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.jsx"></script>
+</body>
+
+</html>
diff --git a/package.json b/package.json
@@ -1,16 +1,18 @@
 {
-  "name": "vite-project",
+  "name": "codex-website",
   "private": true,
   "version": "0.0.0",
   "type": "module",
+  "homepage": "https://codexsit.github.io/CodeX-Website/",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
     "lint:fix": "eslint --fix .",
     "style": "prettier --write {src,test}/**/* ./*.{json,*.json} !package-lock.json -u --no-error-on-unmatched-pattern",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "deploy": "vite build && gh-pages -d dist"
   },
   "dependencies": {
     "@fontsource/league-gothic": "^5.0.18",
@@ -38,6 +40,7 @@
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
+    "gh-pages": "^6.1.1",
     "husky": "^8.0.0",
     "lint-staged": "^15.2.2",
     "postcss-cli": "^11.0.0",
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,10 +1,24 @@
 import { HashRouter as Router, Routes, Route } from "react-router-dom";
 import { ToastContainer } from "react-toastify";
 import routes from "@/routes/index";
+import Navbar from "@/components/Navbar/index";
+
+
+
+const navLinks = [
+  {name: "About Us", path: "/about-us"},
+  {name: "Our Team", path: "/teams"},
+  {name: "Gallery", path: "/gallery"},
+  {name: "Contact", path: "/contact"},
+  {name: "Projects", path: "/projects"}
+ 
+];
 
 function App() {
   return (
     <Router>
+      <Navbar links={navLinks}/>
+
       <ToastContainer />
       <Routes>
         {routes.map((route) => (
diff --git a/src/assets/images/close.svg b/src/assets/images/close.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>
diff --git a/src/assets/images/logo.svg b/src/assets/images/logo.svg
diff --git a/src/assets/images/menu.svg b/src/assets/images/menu.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg>
diff --git a/src/assets/styles/index.css b/src/assets/styles/index.css
@@ -5,6 +5,7 @@
 @import "@fontsource/poppins/900.css";
 @import "@fontsource/league-gothic";
 
+
 /* Reset default browser styles */
 * {
   margin: 0;
diff --git a/src/components/Navbar/index.jsx b/src/components/Navbar/index.jsx
@@ -0,0 +1,66 @@
+import { useState } from "react";
+import { Link, useLocation } from "react-router-dom";
+import PropTypes from "prop-types";
+import Logo from "@/assets/images/logo.svg";
+import closeIcon from "@/assets/images/close.svg";
+import menuIcon from "@/assets/images/menu.svg";
+
+function Navbar({ links }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const location = useLocation();
+
+  return (
+    <nav className=" shadow-md w-full flex justify-between items-center px-6 bg-secondary-dark">
+      <Link to="/" className="cursor-pointer">
+        <img src={Logo} alt="logo" />
+      </Link>
+
+      <ul
+        className={`
+          md:flex pl-0 justify-start md:justify-center md:items-center md:pb-0 md:z-auto left-0 
+          transition-all duration-500 ease-in
+          ${isOpen ? "flex flex-col " : "hidden"}
+        `}
+      >
+        {links.map((link) => (
+          <li
+            key={link.name}
+            className={`
+              font-semibold text-white md:my-0 md:ml-8
+              border-b-2 
+              ${
+                location.pathname .toLowerCase().includes(link.path.toLowerCase()) 
+                  ? "border-red-500 hover:border-red-700" 
+                  : "border-transparent hover:border-red-500"
+              }
+            `}
+          >
+            <Link to={link.path}>{link.name}</Link>
+          </li>
+        ))}
+      </ul>
+      <button
+        type="button"
+        onClick={() => setIsOpen(!isOpen)}
+        className="w-7 h-7 text-white cursor-pointer md:hidden"
+      >
+        {isOpen ? (
+          <img src={closeIcon} alt="close"  />
+        ) : (
+          <img src={menuIcon} alt="menu" />
+        )}
+      </button>
+    </nav>
+  );
+}
+
+Navbar.propTypes = {
+  links: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string.isRequired,
+      path: PropTypes.string.isRequired,
+    }),
+  ).isRequired,
+};
+
+export default Navbar;
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -22,11 +22,11 @@ export default {
         text: {
           light: "#F7F7F7",
           dark: "#232323",
-        },   
+        },
         gradient: {
           light: "#383838",
           dark: "#222222 ",
-        }
+        },
       },
       screens: {
         xs: "0px",
@@ -37,7 +37,7 @@ export default {
       },
       fontFamily: {
         poppins: ["Poppins", "sans-serif"],
-        gothic: ["League Gothic", "sans-serif"]
+        gothic: ["League Gothic", "sans-serif"],
       },
     },
   },
diff --git a/vite.config.js b/vite.config.js
@@ -13,4 +13,5 @@ export default defineConfig({
       "@": path.resolve(__dirname, "./src"),
     },
   },
+  base: "/CodeX-Website",
 });
