Merge pull request #61 from shobhitexe/main

issue#57 Buttons Fixed && issue#58 Routing done

package.json

@@ -11,7 +11,8 @@
   "dependencies": {
     "ci": "^2.2.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.8.2"
   },
   "devDependencies": {
     "@types/react": "^18.0.27",
@@ -20,6 +21,6 @@
     "autoprefixer": "^10.4.13",
     "postcss": "^8.4.21",
     "tailwindcss": "^3.2.7",
-    "vite": "^4.1.0"
+    "vite": "^4.1.4"
   }
 }

src/App.jsx

@@ -1,78 +1,15 @@
-import { Navbar, Footer, ProjectCard } from "./components";
-import projects from "./DB/projects.json";
+import { Navbar, Footer } from "./components";
+import { Projects, Home } from "./pages";
+import { Route, Routes } from "react-router-dom";
 
 function App() {
   return (
     <div className="bg-secondary text-white">
       <Navbar />
-      {/* ⚡ Main Section Starts */}
-      <section className="mx-auto max-w-screen-xl px-4 py-20 lg:flex lg:h-screen lg:items-center">
-        <div className="mx-auto max-w-xl flex flex-col items-center text-center">
-          <h1 className="font-mono text-[50px] sm:text-[60px] text-white font-bold -mt-16">
-            ProjectsHut
-          </h1>
-          <h1 className="leading-3 text-[1rem] sm:text-[1rem] tracking-widest text-primary">
-            Create & Explore
-          </h1>
-
-          <p className="mt-9 sm:text-[1.5rem] sm:leading-relaxed">
-            ProjectsHut is an innovative platform that allows users to publish
-            their projects 🤙 for free
-          </p>
-
-          <div className="mt-8 flex flex-wrap justify-center gap-4">
-            <a
-              className="inline-block rounded border border-primary bg-primary px-12 py-3 text-sm font-medium text-white hover:bg-transparent hover:text-primary focus:outline-none focus:ring active:text-primary"
-              href="https://github.com/priyankarpal/ProjectsHut/fork"
-              target="_blank"
-              rel="noreferrer"
-            >
-              Add projects
-            </a>
-
-            <a
-              className="inline-block rounded border border-primary px-12 py-3 text-sm font-medium text-primary hover:bg-primary hover:text-white focus:outline-none focus:ring active:bg-primary "
-              href="#projects"
-            >
-              Browse projects
-            </a>
-          </div>
-        </div>
-      </section>
-
-      {/* ⚡ Main Section Ends */}
-
-      {/* ⚡ Projects Section Starts */}
-      <section id="projects">
-        <div className="mx-auto max-w-screen-xl px-4  sm:px-6 lg:px-8">
-          <div className="mx-auto max-w-lg text-center">
-            <h2 className="text-3xl font-bold sm:text-4xl">
-              List of cool 🔥 Projects
-            </h2>
-            <p className="m-4 text-gray-300">
-              It's designed to provide a space for individuals to showcase their
-              work and connect with a global audience.
-            </p>
-          </div>
-        </div>
-
-        <div className="mt-8 grid grid-cols-1 m-[6rem]  gap-8 md:grid-cols-2 lg:grid-cols-3 ">
-          {/* Projects  */}
-          {projects.map((project, i) => (
-            <ProjectCard
-              gh={project["gh-username"]}
-              link={project.link}
-              title={project.title}
-              description={project.description}
-              tech={project.tech}
-              key={i}
-            />
-          ))}
-        </div>
-      </section>
-
-      {/* ⚡ Projects Section Ends */}
-
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="projects" element={<Projects />} />
+      </Routes>
       <Footer />
     </div>
   );

src/CSS/index.css

@@ -1,3 +1,28 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+/* root */
+
+html {
+  @apply bg-secondary;
+}
+
+/* Scrollbar design */
+
+.scrollbar::-webkit-scrollbar {
+  @apply h-[5px];
+}
+
+.scrollbar::-webkit-scrollbar-track {
+  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+}
+
+.scrollbar::-webkit-scrollbar-thumb {
+  background-color: rgb(166 110 252 / var(--tw-bg-opacity));
+  outline: 1px solid slategrey;
+}
+
+.scrollbar::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}

src/components/Footer.jsx

@@ -1,24 +1,32 @@
 const Footer = () => {
-    return (
-        <footer aria-label="Site Footer">
-            <div className="max-w-screen-xl  pb-8 mx-auto sm:px-6">
-                <div className="pt-8 mt-16 border-t flex justify-center items-center border-gray-100 dark:border-gray-800">
-                    <div className="flex items-center justify-start ml-4 space-x-4">
-                        <a href="https://github.com/priyankarpal/ProjectsHut" title="Github" target="_blank">
-                            <i className="fa-brands fa-github fa-xl" />
-                        </a>
-                        <a href="https://twitter.com/Priyankarpal" title="Twitter" target="_blank">
-                            <i className="fa-brands fa-twitter fa-xl" />
-                        </a>
-                    </div>
-
-                    <div className="flex items-center justify-center flex-1">
-                        Handcrafted By Students ❤️🚀
-                    </div>
-                </div>
-            </div>
-        </footer>
-    );
-}
+  return (
+    <footer aria-label="Site Footer">
+      <div className=" pb-8 mx-auto sm:px-6 w-full bg-secondary">
+        <div className="pt-8 mt-5 border-t flex justify-center items-center border-gray-100 dark:border-gray-800">
+          <div className="flex items-center justify-start ml-4 space-x-4">
+            <a
+              href="https://github.com/priyankarpal/ProjectsHut"
+              title="Github"
+              target="_blank"
+            >
+              <i className="fa-brands fa-github fa-xl" />
+            </a>
+            <a
+              href="https://twitter.com/Priyankarpal"
+              title="Twitter"
+              target="_blank"
+            >
+              <i className="fa-brands fa-twitter fa-xl" />
+            </a>
+          </div>
 
-export default Footer;
+          <div className="flex items-center justify-center flex-1">
+            Handcrafted By Students ❤️🚀
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;

src/components/Navbar.jsx

@@ -1,3 +1,5 @@
+import { Link } from "react-router-dom";
+
 const Navbar = () => {
   return (
     <nav
@@ -13,9 +15,9 @@ const Navbar = () => {
 
       <ul className="flex items-center gap-2  text-[1.3rem] text-white">
         <li className="hidden lg:block">
-          <a className="rounded-lg px-3 py-2" href="/">
+          <Link className="rounded-lg px-3 py-2" to="/">
             Home
-          </a>
+          </Link>
         </li>
 
         <li>

src/components/ProjectCard.jsx

@@ -12,16 +12,16 @@ const ProjectCard = ({ gh, name, link, title, description, tech }) => {
           alt={`${gh}'s github profile`}
         />
       </div>
-      <p className="mt-1  text-gray-500 dark:text-gray-500 flex gap-1 flex-row overflow-auto">
+      <div className="mt-1  text-gray-500 dark:text-gray-500 flex flex-row overflow-auto scrollbar items-center">
         {tech.map((tag, i) => (
           <p
-            className="bg-green-400 rounded-full text-black pl-[.5rem] pr-[.5rem] text-[.8rem]"
+            className="bg-green-400 rounded-full text-black pl-[.8rem] pr-[.8rem] m-[.2rem] xl:text-[1rem] md:text-[0.8rem] whitespace-nowrap"
             key={i}
           >
             {tag}
           </p>
         ))}
-      </p>
+      </div>
       <p className="mt-2 text-white-800 dark:text-white-400">{description}</p>
       <a
         className="mt-3 inline-flex items-center gap-2  text-sm font-medium p-3 justify-center bg-primary rounded text-white   xl:text-[1rem] md:text-[0.8rem]"

src/main.jsx

@@ -2,9 +2,10 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App";
 import "./CSS/index.css";
+import { BrowserRouter } from "react-router-dom";
 
 ReactDOM.createRoot(document.getElementById("root")).render(
-  <React.StrictMode>
+  <BrowserRouter>
     <App />
-  </React.StrictMode>
+  </BrowserRouter>
 );

src/pages/Home.jsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+const Home = () => {
+  return (
+    <section>
+      <div className="mx-auto max-w-screen-xl px-4 py-20 lg:flex my-28 lg:items-center">
+        <div className="mx-auto max-w-xl flex flex-col items-center text-center">
+          <h1 className="font-mono text-[50px] sm:text-[60px] text-white font-light -mt-16">
+            ProjectsHut
+          </h1>
+          <h1 className="leading-3 text-[11px] sm:text-[14px] tracking-widest text-primary">
+            Create & Explore
+          </h1>
+
+          <p className="mt-9 sm:text-[1.5rem] sm:leading-relaxed">
+            ProjectsHut is an innovative platform that allows users to publish
+            their projects 🤙 for free
+          </p>
+
+          <div className="mt-8 flex flex-wrap justify-center gap-4">
+            <a
+              className="group relative inline-block focus:outline-none focus:ring"
+              href="https://github.com/priyankarpal/ProjectsHut/fork"
+              target="_blank"
+            >
+              <span className="inline-block rounded border border-primary bg-primary px-12 py-3 text-sm font-medium text-white hover:bg-transparent hover:text-primary focus:outline-none focus:ring active:text-primary">
+                Add projects
+              </span>
+            </a>
+
+            <Link
+              className="inline-block rounded border border-primary px-12 py-3 text-sm font-medium text-primary hover:bg-primary hover:text-white focus:outline-none focus:ring active:bg-primary "
+              to="projects"
+            >
+              Browse projects
+            </Link>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Home;

src/pages/Projects.jsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { ProjectCard } from "../components";
+import projects from "../DB/projects.json";
+
+const Projects = () => {
+  return (
+    <section id="projects" className="my-32">
+      <div className="mx-auto max-w-screen-xl px-4  sm:px-6 lg:px-8">
+        <div className="mx-auto max-w-lg text-center">
+          <h2 className="text-3xl font-bold sm:text-4xl">
+            List of cool 🔥 Projects
+          </h2>
+
+          <p className="m-4 text-gray-300">
+            It's designed to provide a space for individuals to showcase their
+            work and connect with a global audience.
+          </p>
+        </div>
+      </div>
+
+      <div className="mt-8 grid grid-cols-1  gap-8 md:grid-cols-2 lg:grid-cols-3 m-[4rem]">
+        {/* Projects */}
+        {projects.map((project, i) => (
+          <ProjectCard
+            gh={project["gh-username"]}
+            link={project.link}
+            title={project.title}
+            description={project.description}
+            tech={project.tech}
+            key={i}
+          />
+        ))}
+      </div>
+    </section>
+  );
+};
+
+export default Projects;

src/pages/index.js

@@ -0,0 +1,4 @@
+import Projects from "./Projects";
+import Home from "./Home";
+
+export { Projects, Home };