diff --git a/package.json b/package.json index d2d2650..191dc56 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "antd": "^5.19.1", "axios": "^1.2.2", "framer-motion": "^10.8.3", + "lodash": "^4.17.21", "prettier": "^3.3.3", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/src/components/Common/MainTitle.jsx b/src/components/Common/MainTitle.jsx new file mode 100644 index 0000000..6899055 --- /dev/null +++ b/src/components/Common/MainTitle.jsx @@ -0,0 +1,8 @@ +const MainTitle = ({ + title, + highlight +}) => { + return

{title} {highlight}

; +}; + +export default MainTitle; diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx index e069bb3..6581735 100644 --- a/src/components/Header/Header.jsx +++ b/src/components/Header/Header.jsx @@ -4,6 +4,7 @@ import { MdClose, MdMenu, MdHome, + MdStore, } from "react-icons/md"; import { AiFillGithub } from "react-icons/ai"; import { Link } from "react-router-dom"; @@ -36,9 +37,9 @@ function Header({notice }) { icon: , }, { - name: "Contributors", - link: "/Contributors", - icon: , + name: "Resources", + link: "/resources", + icon: , }, { name: "Github", diff --git a/src/components/Layout/Layout.jsx b/src/components/Layout/Layout.jsx index 5b817ee..8350afa 100644 --- a/src/components/Layout/Layout.jsx +++ b/src/components/Layout/Layout.jsx @@ -10,7 +10,7 @@ import { ThemeProvider } from '../../context/ThemeContext'; */ const Layout = ({ stars, children }) => { return ( -
+
{ + return
+ {resource.image && ( +
+ {resource.title} { e.target.src = "assets/logo.png"; }} + className="h-40 object-cover object-center " + /> +
+ )} +
+

{resource.title}

+

{resource.description}

+ + Learn More + +
+
; +}; + +export default ResourceCard; diff --git a/src/components/Resources/ResourceSection.jsx b/src/components/Resources/ResourceSection.jsx new file mode 100644 index 0000000..3f912a8 --- /dev/null +++ b/src/components/Resources/ResourceSection.jsx @@ -0,0 +1,18 @@ +import ResourceCard from "./ResourceCard"; + +const ResourceSection = ({ id, title, resources }) => { + return ( +
+

{title}

+
+ {resources.length === 0 ?
+

No resources found

+
: + resources.map((resource, index) => ( + + ))} +
+
+ ); +} +export default ResourceSection; diff --git a/src/data/Resources.json b/src/data/Resources.json new file mode 100644 index 0000000..026aefd --- /dev/null +++ b/src/data/Resources.json @@ -0,0 +1,302 @@ +{ + "learningResources": [ + { + "title": "FreeCodeCamp", + "description": "Learn web development for free with interactive tutorials.", + "link": "https://www.freecodecamp.org", + "image": "https://upload.wikimedia.org/wikipedia/commons/3/39/FreeCodeCamp_logo.png" + }, + { + "title": "MDN Web Docs", + "description": "Comprehensive documentation and tutorials for web technologies.", + "link": "https://developer.mozilla.org", + "image": "https://community.mozilla.org/wp-content/uploads/2021/11/mdn_web_docs_feature.png" + }, + { + "title": "W3Schools", + "description": "Tutorials and references for web development technologies.", + "link": "https://www.w3schools.com", + "image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR-DGcGz4BXfhXDLGtih-TGcqPMBytYnscynQ&s" + }, + { + "title": "Codecademy", + "description": "Interactive coding lessons on various programming languages.", + "link": "https://www.codecademy.com", + "image": "https://images.codecademy.com/social/logo-codecademy-social.png" + }, + { + "title": "Coursera", + "description": "Free online courses from top universities and companies.", + "link": "https://www.coursera.org", + "image": "https://infostride.com/wp-content/uploads/2024/06/Thumbnail_508fa1.png?w=1024" + }, + { + "title": "edX", + "description": "Free online courses from universities and institutions.", + "link": "https://www.edx.org", + "image": "https://logowik.com/content/uploads/images/edx-free-online-course-new6759.jpg" + }, + { + "title": "Khan Academy", + "description": "Free educational resources for a wide range of subjects.", + "link": "https://www.khanacademy.org", + "image": "https://logowik.com/content/uploads/images/khan-academy6250.jpg" + }, + { + "title": "The Odin Project", + "description": "Free full-stack web development curriculum.", + "link": "https://www.theodinproject.com", + "image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTnoZBN3vJcazky2e1lBBOMuUmKAFaIJxm6oA&s" + }, + { + "title": "SoloLearn", + "description": "Learn to code with interactive lessons and a community of learners.", + "link": "https://www.sololearn.com", + "image": "https://logowik.com/content/uploads/images/sololearn8062.jpg" + }, + { + "title": "JavaScript.info", + "description": "Comprehensive guide to modern JavaScript.", + "link": "https://javascript.info", + "image": "https://javascript.info/img/site_preview_en_1200x630.png" + }, + { + "title": "CS50 by Harvard", + "description": "An introduction to computer science, available for free online.", + "link": "https://cs50.harvard.edu", + "image": "https://media.licdn.com/dms/image/D4D12AQEBOHQtw677Mg/article-cover_image-shrink_600_2000/0/1693564480366?e=2147483647&v=beta&t=EYPMRRqdwRB6y-PiACBhYCfBhOmzkk1WWtNnoQRUZAE" + }, + { + "title": "MIT OpenCourseWare", + "description": "Free lecture notes, exams, and videos from MIT.", + "link": "https://ocw.mit.edu", + "image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTIyauQ46N-CFeyPFemlxo6iKPeCGIeWojBCA&s" + }, + { + "title": "Udemy", + "description": "A collection of free courses on various topics.", + "link": "https://www.udemy.com/courses/free", + "image": "https://course.lk/uploads/institute/91/udemy.jpg" + }, + { + "title": "Frontend Masters", + "description": "Free webinars and courses on front-end development.", + "link": "https://frontendmasters.com", + "image": "https://btholt.github.io/intro-to-web-dev-v2/static/f72cae0c73fecbb6beecea606d8fabd3/ffe34/FrontendMastersLogo.png" + }, + { + "title": "Pluralsight Free Courses", + "description": "Access to a selection of free courses on technology and development.", + "link": "https://www.pluralsight.com/offer/2020/free", + "image": "https://www.insightpartners.com/wp-content/uploads/2018/06/PLURALSIGHT.png" + }, + { + "title": "Treehouse", + "description": "Interactive learning with a focus on web development and design.", + "link": "https://teamtreehouse.com", + "image": "https://w7.pngwing.com/pngs/329/126/png-transparent-treehouse-tv-television-channel-ytv-sesame-television-text-logo.png" + } + ], + "toolsLibraries": [ + { + "title": "React", + "description": "A JavaScript library for building user interfaces.", + "link": "https://reactjs.org", + "image": "https://www.nexoid.com/technology/reactjs/react_js_logo.webp" + }, + { + "title": "Bootstrap", + "description": "A popular framework for building responsive and mobile-first websites.", + "link": "https://getbootstrap.com", + "image": "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Bootstrap_logo.svg/2560px-Bootstrap_logo.svg.png" + }, + { + "title": "Vue.js", + "description": "A progressive JavaScript framework for building user interfaces.", + "link": "https://vuejs.org", + "image": "https://www.teknei.com/wp-content/uploads/2019/02/vue.png" + }, + { + "title": "Tailwind CSS", + "description": "A utility-first CSS framework for creating custom designs.", + "link": "https://tailwindcss.com", + "image": "https://getlogovector.com/wp-content/uploads/2021/01/tailwind-css-logo-vector.png" + }, + { + "title": "Angular", + "description": "A platform for building mobile and desktop web applications.", + "link": "https://angular.io", + "image": "https://w7.pngwing.com/pngs/311/952/png-transparent-angular-logo-landscape-tech-companies-thumbnail.png" + }, + { + "title": "Svelte", + "description": "A modern JavaScript framework for building fast user interfaces.", + "link": "https://svelte.dev", + "image": "https://svelte.dev/svelte-logo.svg" + }, + { + "title": "Sass", + "description": "A CSS preprocessor that makes writing CSS easier.", + "link": "https://sass-lang.com", + "image": "https://cdn.mos.cms.futurecdn.net/TTgVoW3Q5WPkMBHi2VD59Q.jpg" + }, + { + "title": "jQuery", + "description": "A fast, small, and feature-rich JavaScript library.", + "link": "https://jquery.com", + "image": "https://www.devopsschool.com/blog/wp-content/uploads/2020/04/jquery.png" + }, + { + "title": "Lodash", + "description": "A modern JavaScript utility library delivering modularity.", + "link": "https://lodash.com", + "image": "https://almablog-media.s3.ap-south-1.amazonaws.com/008_7fe10d3c4a.png" + }, + { + "title": "Gulp", + "description": "A toolkit for automating painful or time-consuming tasks in your development workflow.", + "link": "https://gulpjs.com", + "image": "https://static-00.iconduck.com/assets.00/gulp-icon-2048x2048-ymy9jk5n.png" + }, + { + "title": "Webpack", + "description": "A static module bundler for JavaScript applications.", + "link": "https://webpack.js.org", + "image": "https://logowik.com/content/uploads/images/webpack4233.jpg" + }, + { + "title": "Parcel", + "description": "A zero-configuration web application bundler.", + "link": "https://parceljs.org", + "image": "https://i0.wp.com/css-tricks.com/wp-content/uploads/2019/10/parcel-box-title.png?fit=1200%2C600&ssl=1" + }, + { + "title": "Alpine.js", + "description": "A minimal framework for composing JavaScript behavior in your HTML.", + "link": "https://alpinejs.dev", + "image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSqvNQyIyR6GOd1wFUk_UM5PScxQvwL0SSpsQ&s" + }, + { + "title": "Chart.js", + "description": "A JavaScript library for creating beautiful charts.", + "link": "https://www.chartjs.org", + "image": "https://miro.medium.com/v2/resize:fit:1200/1*VkZw7N4w-wXurt8gtQoGkg.png" + }, + { + "title": "D3.js", + "description": "A JavaScript library for producing dynamic, interactive data visualizations.", + "link": "https://d3js.org", + "image": "https://dwglogo.com/wp-content/uploads/2017/10/D3_js_logo.png" + }, + { + "title": "PixiJS", + "description": "A fast 2D rendering engine for web applications.", + "link": "https://pixijs.com", + "image": "https://files.pixijs.download/branding/pixijs-banner.png" + }, + { + "title": "Moment.js", + "description": "A library for parsing, validating, manipulating, and formatting dates.", + "link": "https://momentjs.com", + "image": "https://sun9-74.userapi.com/impf/c858428/v858428969/17cbd/Hqk-AZk3VtM.jpg?size=807x245&quality=96&sign=04bcabcb461aa666a861b9d96a5364d7&type=album" + }, + { + "title": "Three.js", + "description": "A JavaScript library for creating 3D graphics in the browser.", + "link": "https://threejs.org", + "image": "https://miro.medium.com/v2/resize:fit:687/1*m0zrCLd2wY29-jiHaxYsgA.png" + }, + { + "title": "Axios", + "description": "A promise-based HTTP client for the browser and Node.js.", + "link": "https://axios-http.com", + "image": "https://axios-http.com/assets/logo.svg" + }, + { + "title": "Eslint", + "description": "A tool for identifying and fixing problems in JavaScript code.", + "link": "https://eslint.org", + "image": "https://miro.medium.com/v2/resize:fit:1400/1*QlHjt8KztbbbjyIfyh2gAQ.jpeg" + }, + { + "title": "Jest", + "description": "A JavaScript testing framework with a focus on simplicity.", + "link": "https://jestjs.io", + "image": "https://docs.testit.software/images/integrations/jest.png" + }, + { + "title": "Prettier", + "description": "An opinionated code formatter for consistent code style.", + "link": "https://prettier.io", + "image": "https://miro.medium.com/v2/resize:fit:1200/1*ODJ3DFXcUs3P6UMNor0u6w.png" + }, + { + "title": "Cypress", + "description": "A JavaScript end-to-end testing framework.", + "link": "https://www.cypress.io", + "image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT9wCeSRyMZFFrOZSXwoLSK6DUhU5SLqV3mTQ&s" + } + ], + "careerRoadmaps": [ + { + "title": "Frontend Developer Roadmap", + "description": "A comprehensive guide for becoming a frontend developer.", + "link": "https://roadmap.sh/frontend", + "image": "https://roadmap.sh/og/roadmap/frontend" + }, + { + "title": "Backend Developer Roadmap", + "description": "A complete guide for becoming a backend developer.", + "link": "https://roadmap.sh/backend", + "image": "https://roadmap.sh/og/roadmap/backend" + }, + { + "title": "Full Stack Developer Roadmap", + "description": "A complete guide to becoming a full stack developer.", + "link": "https://roadmap.sh/fullstack", + "image": "https://roadmap.sh/og/roadmap/full-stack" + }, + { + "title": "DevOps Roadmap", + "description": "A guide to becoming a DevOps engineer.", + "link": "https://roadmap.sh/devops", + "image": "https://roadmap.sh/og/roadmap/devops" + }, + { + "title": "AI Data Scientist Roadmap", + "description": "A roadmap for becoming a data scientist.", + "link": "https://roadmap.sh/ai-data-scientist", + "image": "https://roadmap.sh/og/roadmap/ai-data-scientist" + }, + { + "title": "Machine Learning Engineer Roadmap", + "description": "A guide to becoming a machine learning engineer.", + "link": "https://www.scaler.com/blog/machine-learning-roadmap/", + "image": "https://scaler-blog-prod-wp-content.s3.ap-south-1.amazonaws.com/wp-content/uploads/2024/03/11235140/step-by-step-machine-learning-roadmap-1024x585.webp" + }, + { + "title": "Cybersecurity Roadmap", + "description": "A roadmap for a career in cybersecurity.", + "link": "https://roadmap.sh/cybersecurity", + "image": "https://roadmap.sh/og/roadmap/cyber-security" + }, + { + "title": "Product Manager Roadmap", + "description": "A guide for becoming a product manager.", + "link": "https://roadmap.sh/product-manager", + "image": "https://roadmap.sh/og/roadmap/product-manager" + }, + { + "title": "UX Designer Roadmap", + "description": "A roadmap to becoming a UX designer.", + "link": "https://roadmap.sh/ux-designer", + "image": "https://roadmap.sh/og/roadmap/ux-design" + }, + { + "title": "Game Developer Roadmap", + "description": "A comprehensive guide for becoming a game developer.", + "link": "https://roadmap.sh/game-developer", + "image": "https://roadmap.sh/og/roadmap/game-developer" + } + ] +} \ No newline at end of file diff --git a/src/index.css b/src/index.css index 4263213..b51032e 100644 --- a/src/index.css +++ b/src/index.css @@ -6,7 +6,11 @@ margin: 0; padding: 0; } - +img{ + width: 100%; + max-width: 100%; + height: auto; +} @layer base { body { @apply bg-white text-dark dark:bg-[#02000e] dark:text-white; diff --git a/src/main.jsx b/src/main.jsx index 0402dc5..f81c419 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -10,6 +10,7 @@ import BGShape from "./components/BGShape"; import NotFound from "./pages/NotFound"; import DocList from "./pages/Doc"; import DocDetail from "./pages/Doc/single doc"; +import Resources from "./pages/Resources"; const router = createBrowserRouter( [ @@ -26,7 +27,11 @@ const router = createBrowserRouter( element: }, { - path: '/Contributors', + path: '/resources', + element: + }, + { + path: '/contributors', element: }, { diff --git a/src/pages/Doc/index.jsx b/src/pages/Doc/index.jsx index d155ae0..4ac049a 100644 --- a/src/pages/Doc/index.jsx +++ b/src/pages/Doc/index.jsx @@ -3,6 +3,7 @@ import { Link } from 'react-router-dom'; import { List, Spin, Alert } from 'antd'; import Layout from '../../components/Layout/Layout'; import { FaArrowRight } from "react-icons/fa"; +import MainTitle from '../../components/Common/MainTitle'; const DocList = () => { const [docs, setDocs] = useState([]); @@ -37,12 +38,12 @@ const DocList = () => { return (
-

Documentation

+
    { docs.map(item => {item.title.replace(/_/g, ' ')} - + ) } diff --git a/src/pages/Resources.jsx b/src/pages/Resources.jsx new file mode 100644 index 0000000..432217e --- /dev/null +++ b/src/pages/Resources.jsx @@ -0,0 +1,84 @@ +import React, { useState, useCallback } from 'react'; +import Layout from '../components/Layout/Layout'; +import MainTitle from '../components/Common/MainTitle'; +import ResourceSection from '../components/Resources/ResourceSection'; +import resources from '../data/Resources'; +import { Input } from 'antd'; +import { SearchOutlined } from '@ant-design/icons'; +import debounce from 'lodash/debounce'; // Import lodash debounce + +const { Search } = Input; + +const Resources = () => { + const [searchQuery, setSearchQuery] = useState(''); + const [filteredResources, setFilteredResources] = useState(resources); + + const handleSearch = useCallback( + debounce((query) => { + const lowerQuery = query.toLowerCase(); + + // Update filtered resources + const newFilteredResources = { + learningResources: resources.learningResources.filter(resource => + resource.title.toLowerCase().includes(lowerQuery) || + resource.description.toLowerCase().includes(lowerQuery) + ), + toolsLibraries: resources.toolsLibraries.filter(resource => + resource.title.toLowerCase().includes(lowerQuery) || + resource.description.toLowerCase().includes(lowerQuery) + ), + careerRoadmaps: resources.careerRoadmaps.filter(resource => + resource.title.toLowerCase().includes(lowerQuery) || + resource.description.toLowerCase().includes(lowerQuery) + ) + }; + setFilteredResources(newFilteredResources); + + if (lowerQuery) { + const sections = (Object.keys(newFilteredResources)).map(key => ({ id: key, resources: newFilteredResources[key] })); + const targetSection = sections.find(section => section.resources.length > 0); + if (targetSection) { + const sectionElement = document.getElementById(targetSection.id); + if (sectionElement) { + sectionElement.scrollIntoView({ behavior: 'smooth' }); + } + } + } + }, 100), + [] + ); + + const handleChange = (e) => { + const query = e.target.value; + setSearchQuery(query); + handleSearch(query); + }; + + return ( + +
    + +
    +
    + + +
    +
    + {Object.keys(filteredResources).map((key, index) => ( + + ))} +
    +     + ); +}; + +export default Resources; diff --git a/yarn.lock b/yarn.lock index e9bf368..6a2a6e4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1514,6 +1514,11 @@ lodash.merge@^4.6.2: resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a" integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ== +lodash@^4.17.21: + version "4.17.21" + resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c" + integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg== + longest-streak@^3.0.0: version "3.1.0" resolved "https://registry.yarnpkg.com/longest-streak/-/longest-streak-3.1.0.tgz#62fa67cd958742a1574af9f39866364102d90cd4"