From 345e44838add4d9909658268f88f50989ffd556a Mon Sep 17 00:00:00 2001 From: Donald Reddy Indelu Date: Thu, 30 May 2024 22:32:37 +0530 Subject: [PATCH 01/15] update --- src/components/Background/BackGround.module.css | 6 ------ src/components/{BackGround => a}/BackGround.jsx | 0 src/components/{BackGround => a}/BackGround.module.css | 0 3 files changed, 6 deletions(-) delete mode 100644 src/components/Background/BackGround.module.css rename src/components/{BackGround => a}/BackGround.jsx (100%) rename src/components/{BackGround => a}/BackGround.module.css (100%) diff --git a/src/components/Background/BackGround.module.css b/src/components/Background/BackGround.module.css deleted file mode 100644 index 34f5234..0000000 --- a/src/components/Background/BackGround.module.css +++ /dev/null @@ -1,6 +0,0 @@ -#container { - position: fixed; - z-index: -100; - height: 100vh; - width: 100vw; -} \ No newline at end of file diff --git a/src/components/BackGround/BackGround.jsx b/src/components/a/BackGround.jsx similarity index 100% rename from src/components/BackGround/BackGround.jsx rename to src/components/a/BackGround.jsx diff --git a/src/components/BackGround/BackGround.module.css b/src/components/a/BackGround.module.css similarity index 100% rename from src/components/BackGround/BackGround.module.css rename to src/components/a/BackGround.module.css From 9936c21a5381b5c9bbd8308e9925c60f5a6e5180 Mon Sep 17 00:00:00 2001 From: Donald Reddy Indelu Date: Thu, 30 May 2024 22:33:06 +0530 Subject: [PATCH 02/15] update --- src/components/{a => BackGround}/BackGround.jsx | 0 src/components/{a => BackGround}/BackGround.module.css | 0 2 files changed, 0 insertions(+), 0 deletions(-) rename src/components/{a => BackGround}/BackGround.jsx (100%) rename src/components/{a => BackGround}/BackGround.module.css (100%) diff --git a/src/components/a/BackGround.jsx b/src/components/BackGround/BackGround.jsx similarity index 100% rename from src/components/a/BackGround.jsx rename to src/components/BackGround/BackGround.jsx diff --git a/src/components/a/BackGround.module.css b/src/components/BackGround/BackGround.module.css similarity index 100% rename from src/components/a/BackGround.module.css rename to src/components/BackGround/BackGround.module.css From 633ee61d80b30bb0c95faef4a283241db13a252f Mon Sep 17 00:00:00 2001 From: Donald Reddy Indelu Date: Thu, 30 May 2024 22:33:51 +0530 Subject: [PATCH 03/15] update --- src/components/BackGround/BackGround.module.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/BackGround/BackGround.module.css b/src/components/BackGround/BackGround.module.css index 34f5234..da19fbd 100644 --- a/src/components/BackGround/BackGround.module.css +++ b/src/components/BackGround/BackGround.module.css @@ -1,6 +1,6 @@ #container { position: fixed; z-index: -100; - height: 100vh; - width: 100vw; + height: 100%; + width: 100%; } \ No newline at end of file From 8b093e303a0fdfdcc16b063ea59110a8d769b255 Mon Sep 17 00:00:00 2001 From: Donald Reddy Indelu Date: Thu, 30 May 2024 22:36:34 +0530 Subject: [PATCH 04/15] update --- src/components/Navbar/Navbar.jsx | 4 ++++ src/main.jsx | 6 ++++-- src/pages/About/About.jsx | 9 +++++++++ src/pages/About/About.module.css | 0 4 files changed, 17 insertions(+), 2 deletions(-) create mode 100644 src/pages/About/About.jsx create mode 100644 src/pages/About/About.module.css diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx index 333f974..f6041cd 100644 --- a/src/components/Navbar/Navbar.jsx +++ b/src/components/Navbar/Navbar.jsx @@ -50,6 +50,7 @@ function Navbar() {
  • APOD
  • MartianImagery
  • NASA's Projects
    • +
  • About us
    • @@ -73,6 +74,9 @@ function Navbar() {
  • NASA's Projects
    • +
  • + About us +
  • diff --git a/src/main.jsx b/src/main.jsx index 88ab0d8..d0baa28 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,16 +1,18 @@ import React from 'react' import ReactDOM from 'react-dom/client' +import { createBrowserRouter, createRoutesFromElements, RouterProvider, Route } from "react-router-dom" +import './index.css' import App from './App.jsx' import Home from "./pages/Home/Home.jsx" import NasaProjects from "./pages/NasaProjects/NasaProjects.jsx" -import './index.css' -import { createBrowserRouter, createRoutesFromElements, RouterProvider, Route } from "react-router-dom" +import About from "./pages/About/About.jsx" const router = createBrowserRouter( createRoutesFromElements( }> } /> } /> + } /> ) ) diff --git a/src/pages/About/About.jsx b/src/pages/About/About.jsx new file mode 100644 index 0000000..80a1d76 --- /dev/null +++ b/src/pages/About/About.jsx @@ -0,0 +1,9 @@ +import React from 'react' + +function About() { + return ( +
    About
    + ) +} + +export default About \ No newline at end of file diff --git a/src/pages/About/About.module.css b/src/pages/About/About.module.css new file mode 100644 index 0000000..e69de29 From 30ea3577d655d1b46e1cdafe18f177e815185862 Mon Sep 17 00:00:00 2001 From: Donald Reddy Indelu Date: Thu, 30 May 2024 22:38:20 +0530 Subject: [PATCH 05/15] update --- src/components/BackGround/BackGround.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/BackGround/BackGround.jsx b/src/components/BackGround/BackGround.jsx index edf8b23..3fab2ba 100644 --- a/src/components/BackGround/BackGround.jsx +++ b/src/components/BackGround/BackGround.jsx @@ -29,7 +29,7 @@ function StarField({ numberOfStars = 100 }) { for (let i = 0; i < numberOfStars; i++) { let x = (Math.random() * 2 - 1) * 10; // Ensure x is within -5 to 5 range let y = (Math.random() * 2 - 1) * 10; // Ensure y is within -5 to 5 range - let z = (Math.random() * 2 - 1) * 4; // Ensure z is within -5 to 5 range + let z = (Math.random() * 2 - 1) * 10; // Ensure z is within -5 to 5 range starsPosition.push([x, y, z]); } setPositions((prev) => [...starsPosition]); @@ -37,7 +37,7 @@ function StarField({ numberOfStars = 100 }) { useEffect(addStars, []); return ( - + { positions.map((position, index) => ( From 1fa6fe4aa3b567b72890d52e54615d663ceafa4d Mon Sep 17 00:00:00 2001 From: Donald Reddy Indelu Date: Thu, 30 May 2024 23:13:10 +0530 Subject: [PATCH 06/15] update --- src/components/BackGround/BackGround.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/BackGround/BackGround.jsx b/src/components/BackGround/BackGround.jsx index 3fab2ba..7703096 100644 --- a/src/components/BackGround/BackGround.jsx +++ b/src/components/BackGround/BackGround.jsx @@ -37,7 +37,7 @@ function StarField({ numberOfStars = 100 }) { useEffect(addStars, []); return ( - + { positions.map((position, index) => ( @@ -52,7 +52,7 @@ function Background() { return (
    - + From da536339c0c3ed33d27677fdaeb43718a87310c3 Mon Sep 17 00:00:00 2001 From: Donald Reddy Indelu Date: Thu, 30 May 2024 23:15:03 +0530 Subject: [PATCH 07/15] update --- src/components/BackGround/BackGround.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/BackGround/BackGround.jsx b/src/components/BackGround/BackGround.jsx index 7703096..1a4846a 100644 --- a/src/components/BackGround/BackGround.jsx +++ b/src/components/BackGround/BackGround.jsx @@ -52,7 +52,7 @@ function Background() { return (
    - + From aef8588f0bf938db158b982b070d3e4f7ab8269d Mon Sep 17 00:00:00 2001 From: Donald Reddy Indelu Date: Fri, 31 May 2024 09:49:14 +0530 Subject: [PATCH 08/15] update --- src/assets/method.svg | 1 + src/assets/vision.svg | 1 + src/pages/About/About.jsx | 106 +++++++++++++++++++++++++- src/pages/About/About.module.css | 126 +++++++++++++++++++++++++++++++ 4 files changed, 232 insertions(+), 2 deletions(-) create mode 100644 src/assets/method.svg create mode 100644 src/assets/vision.svg diff --git a/src/assets/method.svg b/src/assets/method.svg new file mode 100644 index 0000000..bb7b251 --- /dev/null +++ b/src/assets/method.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/vision.svg b/src/assets/vision.svg new file mode 100644 index 0000000..b050796 --- /dev/null +++ b/src/assets/vision.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/pages/About/About.jsx b/src/pages/About/About.jsx index 80a1d76..dac9749 100644 --- a/src/pages/About/About.jsx +++ b/src/pages/About/About.jsx @@ -1,8 +1,110 @@ -import React from 'react' +import React, { useEffect, useState } from 'react' +import Styles from "./About.module.css" +import vision from "../../assets/vision.svg" +import method from "../../assets/method.svg" +import { FaGithub } from "react-icons/fa"; +import { FaLinkedin } from "react-icons/fa6"; + + function About() { + + const FOUNDER_NAME = "PranavBarthwal" + const FOUNDER_LINKEDIN_URL = "https://www.linkedin.com/in/pranavbarthwal03/" + const CARDS_PER_PAGE = 10; + const repoName = "cosmoXplore"; + + const [contributors, setContributors] = useState([]); + const [founder, setFounder] = useState({}); + + + useEffect(() => { + fetchContributors() + }, []) + + async function fetchContributors() { + try { + + const response = await fetch(`https://api.github.com/repos/${FOUNDER_NAME}/${repoName}/contributors`) + + const data = await response.json(); + + console.log(data); + + setContributors((prev) => { + return data.filter((user, idx) => user.login != FOUNDER_NAME); + }) + + setFounder(data.find((user) => user.login == FOUNDER_NAME)); + + } catch (error) { + console.log(error.message); + } + } + + return ( -
    About
    +     ) } diff --git a/src/pages/About/About.module.css b/src/pages/About/About.module.css index e69de29..99f298e 100644 --- a/src/pages/About/About.module.css +++ b/src/pages/About/About.module.css @@ -0,0 +1,126 @@ +#container { + min-height: 100dvh; + margin-top: 30dvh; + padding-bottom: 20dvh; +} + +/* section 1 */ +#section_1 { + display: flex; + flex-direction: column; + align-items: center; +} + +#section_1 h1 { + color: rgb(140, 0, 255); +} + +#section_1 p { + font-size: 3rem; + width: 70%; + color: rgb(255, 255, 255); + text-align: center; +} + +/* section 2 */ +#section_2 { + margin-top: 25%; + padding-left: 10%; +} + +#section_2 div { + display: flex; + align-items: center; +} + +#section_2 p { + width: 60%; + font-size: 1.5rem; + margin-top: 10px; +} + +/* section 3 */ +#section_3 { + margin-top: 25%; + padding-left: 10%; +} + +#section_3 h1 { + text-align: right; + padding-right: 10%; +} + +#section_3 div { + display: flex; + align-items: center; +} + +#section_3 p { + width: 60%; + font-size: 1.5rem; + text-align: left; +} + +/* open source section */ + +#section_4 { + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-evenly; + margin-top: 25%; +} + +#founder { + text-align: center; + margin-bottom: 20%; +} + +#founder>div { + border: 1px solid white; + padding: 20px 40px; + background: #00000059; + border-radius: 20px; + margin-top: 30px; +} + +#founder img { + border-radius: 50%; + aspect-ratio: 1 / 1; + width: 300px; + margin-bottom: 20px; +} + +#social { + display: flex; + justify-content: space-evenly; +} + +#social a { + color: white; +} + +#cards { + background: red; + margin-top: 5%; + display: grid; + grid-template-rows: 1fr 1fr; + grid-template-columns: repeat(4, 1fr); +} + +.card { + height: 300px; + width: 300px; + border: 1px solid white; + padding: 20px 20px; + background: #00000059; + border-radius: 20px; + margin-top: 30px; + text-align: center; +} + +.card img { + aspect-ratio: 1 / 1; + width: 150px; + border-radius: 50%; +} \ No newline at end of file From d77276635fc48d1525976c86d1f75cbcb093d63e Mon Sep 17 00:00:00 2001 From: Donald Reddy Indelu Date: Fri, 31 May 2024 10:55:07 +0530 Subject: [PATCH 09/15] update --- src/pages/About/About.jsx | 46 +++++++++++++- src/pages/NasaProjects/NasaProjects.jsx | 83 ++++++------------------- src/utils/Pagination.js | 36 +++++++++++ 3 files changed, 98 insertions(+), 67 deletions(-) create mode 100644 src/utils/Pagination.js diff --git a/src/pages/About/About.jsx b/src/pages/About/About.jsx index dac9749..3b2aa76 100644 --- a/src/pages/About/About.jsx +++ b/src/pages/About/About.jsx @@ -2,8 +2,8 @@ import React, { useEffect, useState } from 'react' import Styles from "./About.module.css" import vision from "../../assets/vision.svg" import method from "../../assets/method.svg" -import { FaGithub } from "react-icons/fa"; -import { FaLinkedin } from "react-icons/fa6"; +import { FaAnglesRight, FaAnglesLeft, FaAngleLeft, FaAngleRight, FaGithub, FaLinkedin } from "react-icons/fa6"; + @@ -16,6 +16,9 @@ function About() { const [contributors, setContributors] = useState([]); const [founder, setFounder] = useState({}); + const [page, setPage] = useState(1); // to store pagination number. + const [pageinatedContributors, setPageinatedContributors] = useState([]); + useEffect(() => { @@ -42,6 +45,37 @@ function About() { } } + // next page + function handleNextPage(e) { + setPage((prev) => { + if (prev < (Math.ceil(contributors.length / 8))) + return prev + 1; + return prev; + }) + } + + + // go to last page + function handleLastPage(e) { + setPage(Math.ceil(contributors.length / 8)); + } + + + // previous page + function handlePrevPage(e) { + setPage((prev) => { + if (prev > 1) + return prev - 1; + return prev; + }) + } + + + // go to first page + function handleStartPage(e) { + setPage(1); + } + return (
    @@ -98,7 +132,13 @@ function About() { )) }
    - +
    + + + {page} + + +
    diff --git a/src/pages/NasaProjects/NasaProjects.jsx b/src/pages/NasaProjects/NasaProjects.jsx index dd033b6..9a9c6f6 100644 --- a/src/pages/NasaProjects/NasaProjects.jsx +++ b/src/pages/NasaProjects/NasaProjects.jsx @@ -2,14 +2,11 @@ import React, { useEffect, useState } from 'react'; import logo from "../../assets/NASA_logo.svg"; import Styles from "./NasaProjects.module.css"; import { FaSearch } from "react-icons/fa"; -import { FaAnglesRight } from "react-icons/fa6"; +import { FaAnglesRight, FaAnglesLeft, FaAngleLeft, FaAngleRight } from "react-icons/fa6"; import ProjectCard from '../../components/ProjectCard/ProjectCard'; import { IoReloadOutline } from "react-icons/io5"; -import { FaAnglesLeft } from "react-icons/fa6"; -import { FaAngleLeft } from "react-icons/fa6"; -import { FaAngleRight } from "react-icons/fa6"; import ReadableStreamDecoder from "../../utils/ReadableStreamDecoder.js" - +import * as Pagination from "../../utils/Pagination.js"; function TechNews() { @@ -18,10 +15,11 @@ function TechNews() { const [isLoading, setIsLoading] = useState(true); // to show loading state. const [search, setSearch] = useState(""); // to store search query. const [projects, setProjects] = useState([]); // to store projects. - const [tempProject, setTempProjects] = useState(JSON.parse(localStorage.getItem("projects")) || []); // to stote temporary projects. - const [paginationProjects, setPaginationProjects] = useState([]); // to store projects for pagination. - const [page, setPage] = useState(1); // to store pagination number. + const [tempProject, setTempProjects] = useState([]); // to stote temporary projects. + // const [paginationProjects, setPaginationProjects] = useState([]); // to store projects for pagination. + const [currentPage, setCurrentPage] = useState(1); // to store pagination number. const [week, setWeek] = useState(1); // to set weeks for fetching data. + const itemsPerPage = 10; // Adding on scroll event listener for auto closing search bar. useEffect(() => { @@ -39,10 +37,10 @@ function TechNews() { }, [week]) - // to paginate when new projects are fetched or page is changed + // to paginate when new projects are fetched or currentPage is changed useEffect(() => { - Pagination(); - }, [page, projects, paginationProjects]) + setTempProjects(Pagination.Paginate(projects, currentPage, itemsPerPage)); + }, [currentPage, projects]) // debouncing the search query @@ -120,9 +118,8 @@ function TechNews() { const { projectId, title, acronym, description, startDateString, endDateString, lastUpdated, statusDescription } = data.project; temp.push({ projectId, title, acronym, description, startDateString, endDateString, lastUpdated, statusDescription }); } - setPaginationProjects((prev) => [...temp]); + // setPaginationProjects((prev) => [...temp]); setProjects((prev) => [...temp]); - localStorage.setItem("projects", JSON.stringify(temp)); setTimeout(() => setIsLoading(false), 2000) } catch (error) { @@ -142,12 +139,13 @@ function TechNews() { // search for projects function handleSearch() { try { - setPaginationProjects( + setTempProjects( projects.filter((item) => ( item.title.toLowerCase().search(search.toLowerCase()) > -1 )) ); - setPage(1) + setCurrentPage(1) + Pagination.Paginate(tempProject, currentPage, itemsPerPage) } catch (error) { console.log(error.message); } @@ -158,49 +156,6 @@ function TechNews() { setSearch(e.target.value); } - - // next page - function handleNextPage(e) { - setPage((prev) => { - if (prev < (Math.ceil(paginationProjects.length / 10))) - return prev + 1; - return prev; - }) - } - - - // go to last page - function handleLastPage(e) { - setPage(Math.ceil(paginationProjects.length / 10)); - } - - - // previous page - function handlePrevPage(e) { - setPage((prev) => { - if (prev > 1) - return prev - 1; - return prev; - }) - } - - - // go to first page - function handleStartPage(e) { - setPage(1); - } - - - // to make pages - function Pagination() { - setTempProjects((prev) => { - const last_index = page * 10; - const start_index = last_index - 10; - return paginationProjects.slice(start_index, last_index); - }) - } - - return (
    @@ -236,15 +191,15 @@ function TechNews() { { projects.length ?
    - - - {page} - - + setCurrentPage(Pagination.StartPage(projects, currentPage, itemsPerPage))} /> + setCurrentPage(Pagination.PrevPage(projects, currentPage, itemsPerPage))} /> + {currentPage} + setCurrentPage(Pagination.NextPage(projects, currentPage, itemsPerPage))} /> + setCurrentPage(Pagination.LastPage(projects, currentPage, itemsPerPage))} />
    : "" } - +
    ) diff --git a/src/utils/Pagination.js b/src/utils/Pagination.js new file mode 100644 index 0000000..0b8e355 --- /dev/null +++ b/src/utils/Pagination.js @@ -0,0 +1,36 @@ +// next page +function NextPage(array = [], currentPage = 1, itemsPerPage = 10) { + if (currentPage < (Math.ceil(array.length / itemsPerPage))) + return currentPage + 1; + return currentPage; +} + + +// go to last page +function LastPage(array = [], currentPage = 1, itemsPerPage = 10) { + return Math.ceil(array.length / itemsPerPage); +} + + +// previous page +function PrevPage(array = [], currentPage = 1, itemsPerPage = 10) { + if (currentPage > 1) + return currentPage - 1; + return currentPage; +} + + +// go to first page +function StartPage(array = [], currentPage = 1, itemsPerPage = 10) { + return 1; +} + + +// to make pages +function Paginate(array = [], currentPage = 1, itemsPerPage = 10) { + const last_index = currentPage * itemsPerPage; + const start_index = last_index - itemsPerPage; + return array.slice(start_index, last_index); +} + +export { Paginate, NextPage, PrevPage, LastPage, StartPage }; \ No newline at end of file From 1cde98e2c6d7226b2a78880e9cc3f91024498589 Mon Sep 17 00:00:00 2001 From: Donald Reddy Indelu Date: Fri, 31 May 2024 11:06:32 +0530 Subject: [PATCH 10/15] update --- src/pages/About/About.jsx | 52 +++++++------------------ src/pages/NasaProjects/NasaProjects.jsx | 2 +- src/utils/Pagination.js | 2 +- 3 files changed, 15 insertions(+), 41 deletions(-) diff --git a/src/pages/About/About.jsx b/src/pages/About/About.jsx index 3b2aa76..6a36e69 100644 --- a/src/pages/About/About.jsx +++ b/src/pages/About/About.jsx @@ -3,6 +3,7 @@ import Styles from "./About.module.css" import vision from "../../assets/vision.svg" import method from "../../assets/method.svg" import { FaAnglesRight, FaAnglesLeft, FaAngleLeft, FaAngleRight, FaGithub, FaLinkedin } from "react-icons/fa6"; +import Pagination from "../../utils/Pagination.js" @@ -11,12 +12,12 @@ function About() { const FOUNDER_NAME = "PranavBarthwal" const FOUNDER_LINKEDIN_URL = "https://www.linkedin.com/in/pranavbarthwal03/" - const CARDS_PER_PAGE = 10; + const CARDS_PER_PAGE = 8; const repoName = "cosmoXplore"; const [contributors, setContributors] = useState([]); const [founder, setFounder] = useState({}); - const [page, setPage] = useState(1); // to store pagination number. + const [currentPage, setCurrentPage] = useState(1); // to store pagination number. const [pageinatedContributors, setPageinatedContributors] = useState([]); @@ -25,6 +26,10 @@ function About() { fetchContributors() }, []) + useEffect(() => { + setPageinatedContributors(Pagination.Paginate(contributors, currentPage, CARDS_PER_PAGE)); + }, [contributors, currentPage]) + async function fetchContributors() { try { @@ -45,37 +50,6 @@ function About() { } } - // next page - function handleNextPage(e) { - setPage((prev) => { - if (prev < (Math.ceil(contributors.length / 8))) - return prev + 1; - return prev; - }) - } - - - // go to last page - function handleLastPage(e) { - setPage(Math.ceil(contributors.length / 8)); - } - - - // previous page - function handlePrevPage(e) { - setPage((prev) => { - if (prev > 1) - return prev - 1; - return prev; - }) - } - - - // go to first page - function handleStartPage(e) { - setPage(1); - } - return (
    @@ -121,7 +95,7 @@ function About() {

    Our Contributors

    { - contributors.map((user) => ( + pageinatedContributors.map((user) => (

    {user.login}

    @@ -133,11 +107,11 @@ function About() { }
    - - - {page} - - + setCurrentPage(Pagination.StartPage(contributors, currentPage, CARDS_PER_PAGE))} /> + setCurrentPage(Pagination.PrevPage(contributors, currentPage, CARDS_PER_PAGE))} /> + {currentPage} + setCurrentPage(Pagination.NextPage(contributors, currentPage, CARDS_PER_PAGE))} /> + setCurrentPage(Pagination.LastPage(contributors, currentPage, CARDS_PER_PAGE))} />
    diff --git a/src/pages/NasaProjects/NasaProjects.jsx b/src/pages/NasaProjects/NasaProjects.jsx index 9a9c6f6..db3af26 100644 --- a/src/pages/NasaProjects/NasaProjects.jsx +++ b/src/pages/NasaProjects/NasaProjects.jsx @@ -6,7 +6,7 @@ import { FaAnglesRight, FaAnglesLeft, FaAngleLeft, FaAngleRight } from "react-ic import ProjectCard from '../../components/ProjectCard/ProjectCard'; import { IoReloadOutline } from "react-icons/io5"; import ReadableStreamDecoder from "../../utils/ReadableStreamDecoder.js" -import * as Pagination from "../../utils/Pagination.js"; +import Pagination from "../../utils/Pagination.js"; function TechNews() { diff --git a/src/utils/Pagination.js b/src/utils/Pagination.js index 0b8e355..a8aa1a5 100644 --- a/src/utils/Pagination.js +++ b/src/utils/Pagination.js @@ -33,4 +33,4 @@ function Paginate(array = [], currentPage = 1, itemsPerPage = 10) { return array.slice(start_index, last_index); } -export { Paginate, NextPage, PrevPage, LastPage, StartPage }; \ No newline at end of file +export default { Paginate, NextPage, PrevPage, LastPage, StartPage }; \ No newline at end of file From 60c038fe433c521852a1201a465e321403c42299 Mon Sep 17 00:00:00 2001 From: Donald Reddy Indelu Date: Fri, 31 May 2024 12:40:57 +0530 Subject: [PATCH 11/15] added about page --- src/pages/About/About.jsx | 21 +++++----- src/pages/About/About.module.css | 72 +++++++++++++++++++++++++++++--- 2 files changed, 78 insertions(+), 15 deletions(-) diff --git a/src/pages/About/About.jsx b/src/pages/About/About.jsx index 6a36e69..525e045 100644 --- a/src/pages/About/About.jsx +++ b/src/pages/About/About.jsx @@ -21,7 +21,6 @@ function About() { const [pageinatedContributors, setPageinatedContributors] = useState([]); - useEffect(() => { fetchContributors() }, []) @@ -37,8 +36,6 @@ function About() { const data = await response.json(); - console.log(data); - setContributors((prev) => { return data.filter((user, idx) => user.login != FOUNDER_NAME); }) @@ -57,12 +54,12 @@ function About() {

    About CosmoXplore

    - ''Making space exploration accessible and exciting for everyone, CosmoXplore is your portal to the universe's wonders.'' + “CosmoXplore is your portal to the universe's wonders, Making space exploration accessible and exciting for everyone.”

    -

    Our Vision

    +

    Our Vision

    Explore the cosmos with CosmoXplore and stay informed about the innovations driving humanity's journey into the final frontier. Join us in discovering the beauty and mysteries of space, one photo and breakthrough at a time.As an open source organization, we are committed to transparency, collaboration, and community-driven development.

    @@ -70,7 +67,7 @@ function About() {
    -

    Our Methods

    +

    Our Methods

    Our platform brings you stunning Astronomy Picture of the Day (APOD) images, fascinating photos of Mars, and updates on the latest technological breakthroughs at NASA. Utilizing NASA's open API, we deliver a seamless and engaging experience for space enthusiasts and curious minds alike.

    @@ -80,7 +77,7 @@ function About() {
    -

    Our Founder

    +

    Our Founder

    {founder.login}

    @@ -92,11 +89,12 @@ function About() {
    -

    Our Contributors

    +

    Our Contributors

    +
    { - pageinatedContributors.map((user) => ( -
    + pageinatedContributors.map((user, idx) => ( +

    {user.login}

    @@ -106,10 +104,13 @@ function About() { )) }
    +
    setCurrentPage(Pagination.StartPage(contributors, currentPage, CARDS_PER_PAGE))} /> setCurrentPage(Pagination.PrevPage(contributors, currentPage, CARDS_PER_PAGE))} /> + {currentPage} + setCurrentPage(Pagination.NextPage(contributors, currentPage, CARDS_PER_PAGE))} /> setCurrentPage(Pagination.LastPage(contributors, currentPage, CARDS_PER_PAGE))} />
    diff --git a/src/pages/About/About.module.css b/src/pages/About/About.module.css index 99f298e..a5d72d7 100644 --- a/src/pages/About/About.module.css +++ b/src/pages/About/About.module.css @@ -1,7 +1,8 @@ #container { min-height: 100dvh; - margin-top: 30dvh; + border-top: solid 30dvh transparent; padding-bottom: 20dvh; + background-color: transparent; } /* section 1 */ @@ -9,6 +10,7 @@ display: flex; flex-direction: column; align-items: center; + animation: leviate 2s ease-in-out infinite; } #section_1 h1 { @@ -20,6 +22,13 @@ width: 70%; color: rgb(255, 255, 255); text-align: center; + text-shadow: 3px 3px 20px rgb(174, 0, 255); +} + +#section_2 img, +#section_3 img { + animation: leviate 2s ease-in-out infinite; + filter: drop-shadow(0px 0px 5px rgb(255, 255, 255)); } /* section 2 */ @@ -28,6 +37,11 @@ padding-left: 10%; } +#section_2 h1, +#section_3 h1 { + text-shadow: 3px 3px 20px rgb(174, 0, 255); +} + #section_2 div { display: flex; align-items: center; @@ -71,6 +85,7 @@ margin-top: 25%; } +/* founder */ #founder { text-align: center; margin-bottom: 20%; @@ -82,6 +97,8 @@ background: #00000059; border-radius: 20px; margin-top: 30px; + box-shadow: 0 0 20px rgb(174, 0, 255); + animation: leviate 2s ease-in-out infinite; } #founder img { @@ -89,6 +106,7 @@ aspect-ratio: 1 / 1; width: 300px; margin-bottom: 20px; + box-shadow: 0 0 20px white; } #social { @@ -98,29 +116,73 @@ #social a { color: white; + } + +/* contributors */ #cards { - background: red; - margin-top: 5%; display: grid; grid-template-rows: 1fr 1fr; grid-template-columns: repeat(4, 1fr); + column-gap: 20px; +} + +#contributors { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; } .card { - height: 300px; - width: 300px; + height: 250px; + width: 250px; border: 1px solid white; padding: 20px 20px; background: #00000059; border-radius: 20px; margin-top: 30px; text-align: center; + word-wrap: break-word; +} + +.card h3 { + font-size: 1.2rem; } .card img { aspect-ratio: 1 / 1; width: 150px; border-radius: 50%; + margin-bottom: 5px; + box-shadow: 0 0 20px rgb(255, 255, 255); +} + +.card:hover { + animation: leviate 2s ease-in-out infinite; + box-shadow: 0 0 40px rgb(174, 0, 255); +} + +@keyframes leviate { + + 50% { + transform: translateY(-10px); + } +} + +#page-btns { + margin-top: 5%; + display: flex; + justify-content: space-between; + align-items: center; + width: 200px; +} + +.page-icons { + cursor: pointer; +} + +#page-num { + font-size: 2rem; } \ No newline at end of file From 5515cc281afd977a54551153916e1b885188a8f0 Mon Sep 17 00:00:00 2001 From: Donald Reddy Indelu Date: Fri, 31 May 2024 14:12:35 +0530 Subject: [PATCH 12/15] made responsive --- src/pages/About/About.module.css | 52 +++++++++++++++++++++++++++----- 1 file changed, 45 insertions(+), 7 deletions(-) diff --git a/src/pages/About/About.module.css b/src/pages/About/About.module.css index a5d72d7..182babe 100644 --- a/src/pages/About/About.module.css +++ b/src/pages/About/About.module.css @@ -121,13 +121,6 @@ /* contributors */ -#cards { - display: grid; - grid-template-rows: 1fr 1fr; - grid-template-columns: repeat(4, 1fr); - column-gap: 20px; -} - #contributors { display: flex; flex-direction: column; @@ -135,6 +128,13 @@ align-items: center; } +#cards { + display: grid; + grid-template-rows: 1fr 1fr; + grid-template-columns: repeat(4, 1fr); + column-gap: 20px; +} + .card { height: 250px; width: 250px; @@ -185,4 +185,42 @@ #page-num { font-size: 2rem; +} + +@media (max-width:1000px) { + #cards { + grid-template-columns: repeat(3, 1fr); + } +} + +@media (max-width:800px) { + #cards { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (max-width:600px) { + #section_1 p { + font-size: 1.5rem; + } + + #section_2 p, + #section_3 p { + font-size: 1rem; + } + + #section_2 img, + #section_3 img { + width: 200px; + } + + #section_3 { + margin-right: 20px; + } + + .card { + width: 170px; + padding: 10px 0; + } + } \ No newline at end of file From 81bff0cd2ca3147e382cf571fea8d1c1bfd88677 Mon Sep 17 00:00:00 2001 From: Donald Reddy Indelu Date: Fri, 31 May 2024 14:29:31 +0530 Subject: [PATCH 13/15] made responsive --- src/pages/About/About.module.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/About/About.module.css b/src/pages/About/About.module.css index 182babe..b1629da 100644 --- a/src/pages/About/About.module.css +++ b/src/pages/About/About.module.css @@ -196,6 +196,7 @@ @media (max-width:800px) { #cards { grid-template-columns: repeat(2, 1fr); + margin-bottom: 20%; } } From 8ee54b0852b2c3ab4fff120bc1d02b65d0f82757 Mon Sep 17 00:00:00 2001 From: Donald Reddy Indelu Date: Fri, 31 May 2024 14:32:05 +0530 Subject: [PATCH 14/15] update --- src/components/Apod/Apod.jsx | 4 ---- src/components/Toast/Toast.jsx | 1 - src/pages/NasaProjects/NasaProjects.jsx | 1 - 3 files changed, 6 deletions(-) diff --git a/src/components/Apod/Apod.jsx b/src/components/Apod/Apod.jsx index fb87068..4c07c85 100644 --- a/src/components/Apod/Apod.jsx +++ b/src/components/Apod/Apod.jsx @@ -22,14 +22,10 @@ function Apod() { response = await response.json(); - console.log(response); - setApodInfo((prev) => { return { ...prev, url: response.url, explanation: response.explanation, title: response.title, date: response.date, copyright: response.copyright, media_type: response.media_type } }) - console.log(apodInfo); - } catch (error) { console.log(error.message); } diff --git a/src/components/Toast/Toast.jsx b/src/components/Toast/Toast.jsx index 9a5a8a3..9a67e86 100644 --- a/src/components/Toast/Toast.jsx +++ b/src/components/Toast/Toast.jsx @@ -14,7 +14,6 @@ function Toast() { const [isSuccess, setIsSuccess] = useState(false); toastify = (message = "", isSuccess = true) => { - console.log(timeOut); if (timeOut) { setMessage(message); setIsSuccess(isSuccess); diff --git a/src/pages/NasaProjects/NasaProjects.jsx b/src/pages/NasaProjects/NasaProjects.jsx index db3af26..1e86c46 100644 --- a/src/pages/NasaProjects/NasaProjects.jsx +++ b/src/pages/NasaProjects/NasaProjects.jsx @@ -118,7 +118,6 @@ function TechNews() { const { projectId, title, acronym, description, startDateString, endDateString, lastUpdated, statusDescription } = data.project; temp.push({ projectId, title, acronym, description, startDateString, endDateString, lastUpdated, statusDescription }); } - // setPaginationProjects((prev) => [...temp]); setProjects((prev) => [...temp]); setTimeout(() => setIsLoading(false), 2000) From 6f371120b2ad5a65bb1c360c5930e4d5abfc12c3 Mon Sep 17 00:00:00 2001 From: Donald Reddy Indelu Date: Fri, 31 May 2024 20:52:47 +0530 Subject: [PATCH 15/15] add preloader --- src/App.jsx | 8 +++++++- src/assets/preloader.svg | 5 +++++ src/components/BackGround/BackGround.jsx | 8 +++++--- src/components/PreLoader/PreLoader.jsx | 14 ++++++++++++++ src/components/PreLoader/PreLoader.module.css | 12 ++++++++++++ 5 files changed, 43 insertions(+), 4 deletions(-) create mode 100644 src/assets/preloader.svg create mode 100644 src/components/PreLoader/PreLoader.jsx create mode 100644 src/components/PreLoader/PreLoader.module.css diff --git a/src/App.jsx b/src/App.jsx index 3da7dfb..4954ce5 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -4,11 +4,17 @@ import Navbar from './components/Navbar/Navbar.jsx' import Footer from './components/Footer/Footer.jsx' import Toast from "./components/Toast/Toast.jsx" import BackGround from './components/BackGround/BackGround.jsx' +import PreLoader from './components/PreLoader/PreLoader.jsx' +import { useState } from 'react' function App() { + + const [isPreLoading, setIsPreLoading] = useState(true) + return ( <> - + {isPreLoading && } + diff --git a/src/assets/preloader.svg b/src/assets/preloader.svg new file mode 100644 index 0000000..16aae33 --- /dev/null +++ b/src/assets/preloader.svg @@ -0,0 +1,5 @@ + + + diff --git a/src/components/BackGround/BackGround.jsx b/src/components/BackGround/BackGround.jsx index 1a4846a..cbc1918 100644 --- a/src/components/BackGround/BackGround.jsx +++ b/src/components/BackGround/BackGround.jsx @@ -13,7 +13,7 @@ function Star({ position }) { ); }; -function StarField({ numberOfStars = 100 }) { +function StarField({ numberOfStars = 100, setIsPreLoading }) { const starFieldRef = useRef(); @@ -25,6 +25,7 @@ function StarField({ numberOfStars = 100 }) { const [positions, setPositions] = useState([]) const addStars = useCallback(() => { + setIsPreLoading(true); const starsPosition = []; for (let i = 0; i < numberOfStars; i++) { let x = (Math.random() * 2 - 1) * 10; // Ensure x is within -5 to 5 range @@ -33,6 +34,7 @@ function StarField({ numberOfStars = 100 }) { starsPosition.push([x, y, z]); } setPositions((prev) => [...starsPosition]); + setTimeout(() => setIsPreLoading(false), 2000) }, [numberOfStars]) useEffect(addStars, []); @@ -48,13 +50,13 @@ function StarField({ numberOfStars = 100 }) { } -function Background() { +function Background({ setIsPreLoading }) { return (
    - +
    ); diff --git a/src/components/PreLoader/PreLoader.jsx b/src/components/PreLoader/PreLoader.jsx new file mode 100644 index 0000000..360c23b --- /dev/null +++ b/src/components/PreLoader/PreLoader.jsx @@ -0,0 +1,14 @@ +import React, { useEffect } from 'react' +import Styles from "./PreLoader.module.css" +import preloader from "../../assets/preloader.svg" + +function PreLoader() { + + return ( +
    + + + ) +} + +export default PreLoader \ No newline at end of file diff --git a/src/components/PreLoader/PreLoader.module.css b/src/components/PreLoader/PreLoader.module.css new file mode 100644 index 0000000..8e5c9ea --- /dev/null +++ b/src/components/PreLoader/PreLoader.module.css @@ -0,0 +1,12 @@ +#container { + position: fixed; + z-index: 11000; + height: 100%; + width: 100%; + top: 0; + left: 0; + display: flex; + justify-content: center; + align-items: center; + background: #000000; +} \ No newline at end of file