Skip to content

Commit

Permalink
Merge pull request #39 from ozaharsh95/project-section-with-search-pa…
Browse files Browse the repository at this point in the history
…gination

feat:Project Page with Pagination and Responsiveness
  • Loading branch information
CatherineKiiru authored Nov 18, 2024
2 parents 1627d97 + a9b1280 commit 6f5d69a
Show file tree
Hide file tree
Showing 14 changed files with 564 additions and 80 deletions.
6 changes: 3 additions & 3 deletions build/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,10 @@
<link rel="icon" type="image/svg+xml" href="/assets/afos-logo-white-0ed9ccd1.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />

<link href="/dist/output.css" rel="stylesheet">
<title>AFOS: African Open Source</title>
<script type="module" crossorigin src="/assets/index-7a0be90b.js"></script>
<link rel="stylesheet" href="/assets/index-429cbaec.css">
<script type="module" crossorigin src="/assets/index-050c525c.js"></script>
<link rel="stylesheet" href="/assets/index-0060df3a.css">
</head>
<body>
<div id="root"></div>
Expand Down
File renamed without changes.
82 changes: 79 additions & 3 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -30,11 +30,13 @@
},
"homepage": "https://github.com/chaoss/GitHub-Copilot-Hackathon-Project#readme",
"dependencies": {
"@radix-ui/react-slot": "1.1.0",
"class-variance-authority": "0.7.0",
"clsx": "2.1.1",
"lucide-react": "0.436.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "6.26.1",
"tailwind-merge": "2.5.2",
"tailwindcss-animate": "1.0.7"
},
Expand Down
43 changes: 22 additions & 21 deletions src/App.jsx
Original file line number Diff line number Diff line change
@@ -1,25 +1,26 @@
import Collaboration from "./components/Collaboration";
import Empowerment from "./components/Empowerment";
import Enhancement from "./components/Enhancement";
import Footer from "./components/Footer";
import Navbar from "./components/Navbar";
import Newsletter from "./components/Newsletter";
import Projects from "./components/Projects";
import Hero from "./components/Hero";

import { BrowserRouter as Router,Routes, Route , Navigate } from "react-router-dom";
import Home from "./pages/Home";
import ProjectPage from "./pages/Project";
function App() {
return (
<div>
<Navbar />
<Hero />
<Projects />
<Empowerment />
<Collaboration />
<Enhancement />
<Newsletter />
<Footer />
</div>
);
return (
<div>
<Router>
<Routes>
{/* This route is for home component
with exact path "/" */}
<Route path="/" exact element={<Home />} />
{/* This route is for projectPage component
with exact path "/projects" */}
<Route path="/projects" element={<ProjectPage />} />
{/* If any route mismatches the upper
route endpoints then, redirect triggers
and redirects app to home component with to="/" */}
{/* <Redirect to="/" /> */}
<Route path="*" element={<Navigate to="/" />} />
</Routes>
</Router>
</div>
);
}

export default App;
3 changes: 3 additions & 0 deletions src/assets/images/FilterIcon.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
27 changes: 20 additions & 7 deletions src/components/Navbar.jsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
/* eslint-disable no-unused-vars */
import React, { useState } from "react";
import logo from "../assets/images/afos-logo.svg";
import { Link } from "react-router-dom";

function Navbar() {
const [navOpen, setNavOpen] = useState(false);
return (
<div className="flex justify-between md:w-full p-5 text-green bg-gradient-to-r from-orange-50 to-lime-50">
<a href="#">
<a href="/">
<img src={logo} alt="logo" className="w-20 h-10" />
</a>
<nav>
Expand All @@ -28,13 +29,22 @@ function Navbar() {
</button>
<div className={` ${navOpen ? "block" : "hidden"}`}>
<div className="flex flex-col absolute text-green mt-5 z-10 items-center gap-12 py-6 w-1/2 left-[50%] h-screen bg-white Responsive-mobile-menu">
<a href="#" className="hover:underline underline-offset-8 hover:text-zinc-500">
<a
href="#"
className="hover:underline underline-offset-8 hover:text-zinc-500"
>
About Afos
</a>
<a href="#" className="hover:underline underline-offset-8 hover:text-zinc-500">
<Link
to="/projects"
className="hover:underline underline-offset-8 hover:text-zinc-500"
>
Projects
</a>
<a href="#" className="hover:underline underline-offset-8 hover:text-zinc-500">
</Link>
<a
href="#"
className="hover:underline underline-offset-8 hover:text-zinc-500"
>
Community
</a>
<button className="bg-yellow hover:bg-amber-400 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-200 rounded-md px-4 md:px-6 py-4 text-sm md:text-base font-semibold">
Expand All @@ -53,9 +63,12 @@ function Navbar() {
</a>
</li>
<li className="">
<a href="#" className="px-4 py-4 mr-4 text-green hover:text-zinc-500">
<Link
to="/projects"
className="px-4 py-4 mr-4 text-green hover:text-zinc-500"
>
Projects
</a>
</Link>
</li>
<li>
<a href="#" className="px-4 py-2 mr-4 text-green hover:text-zinc-500">
Expand Down
74 changes: 32 additions & 42 deletions src/components/ProjectCards.jsx
Original file line number Diff line number Diff line change
@@ -1,48 +1,38 @@
function ProjectCards({
image,
title,
description,
project_link,
category
}) {
return (
<div className="w-full py-7 md:py-10 px-5 rounded-xl border-[1px] border-[#ecea8a] bg-[#ffffe3]">
{/* Project Logo */}
<div className="h-36 flex justify-center items-center bg-[#f6f3c3] border-[1px] border-[#E6E76D] rounded-xl">
<img className=" rounded-t-xl" src={image} alt={title} />
function ProjectCards({ image, title, description, project_link, category }) {
return (
<div className="w-full py-7 md:py-10 px-5 rounded-xl border-[1px] border-[#ecea8a] bg-[#ffffe3]">
{/* Project Logo */}
<div className="h-36 flex justify-center items-center bg-[#f6f3c3] border-[1px] border-[#E6E76D] rounded-xl overflow-hidden">
<img className=" rounded-t-xl" src={image} alt={title} />
</div>

</div>

{/* Card Content */}
<div className="pt-6 h-52 overflow-hidden">

{/* Category */}
<div className="flex gap-2 items-center my-4">
<div className="text-sm font-sans px-2 py-1 text-gray-600 font-medium bg-[#F1EEA6] rounded-md">
Category - {category}
</div>
</div>

{/* Description */}
<div className="my-4">
<div className="text-base text-gray-600 font-medium">
{description.length < 200 ? description : description.substring(0, 200) + "..."}
</div>
</div>

</div>
{/* Card Content */}
<div className="pt-6 h-52 overflow-hidden">
{/* Category */}
<div className="flex gap-2 items-center my-4">
<div className="text-sm font-sans px-2 py-1 text-gray-600 font-medium bg-[#F1EEA6] rounded-md">
Category - {category}
</div>
</div>

{/* View Project Button */}
<a href={project_link}
target="_blank"
rel="noreferrer"
>
<button className=" bg-[#323200] hover:bg-[#323200da] font-semibold text-[#ffffe3] w-full p-3 rounded-lg">
View Project
</button>
</a>
{/* Description */}
<div className="my-4">
<div className="text-base text-gray-600 font-medium">
{description.length < 200
? description
: description.substring(0, 200) + "..."}
</div>
</div>
);
</div>

{/* View Project Button */}
<a href={project_link} target="_blank" rel="noreferrer">
<button className=" bg-[#323200] hover:bg-[#323200da] font-semibold text-[#ffffe3] w-full p-3 rounded-lg">
View Project
</button>
</a>
</div>
);
}

export default ProjectCards;
Loading

0 comments on commit 6f5d69a

Please sign in to comment.