From b0f0bcf5dfabed21aa8b443229b73cea1a7fc6c3 Mon Sep 17 00:00:00 2001 From: devvsakib Date: Tue, 30 Jul 2024 22:14:21 +0600 Subject: [PATCH 1/7] resource page added with few free resource list --- src/components/Common/MainTitle.jsx | 8 ++++ src/components/Header/Header.jsx | 7 ++-- src/components/Resources/ResourceSection.jsx | 21 ++++++++++ src/data/Resources.json | 44 ++++++++++++++++++++ src/main.jsx | 7 +++- src/pages/Doc/index.jsx | 5 ++- src/pages/Resources.jsx | 27 ++++++++++++ 7 files changed, 113 insertions(+), 6 deletions(-) create mode 100644 src/components/Common/MainTitle.jsx create mode 100644 src/components/Resources/ResourceSection.jsx create mode 100644 src/data/Resources.json create mode 100644 src/pages/Resources.jsx 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 cedd611..76e9fe0 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"; @@ -28,9 +29,9 @@ function Header({ countStar, notice }) { icon: , }, { - name: "Contributors", - link: "/Contributors", - icon: , + name: "Resources", + link: "/resources", + icon: , }, { name: "Github", diff --git a/src/components/Resources/ResourceSection.jsx b/src/components/Resources/ResourceSection.jsx new file mode 100644 index 0000000..11df0e6 --- /dev/null +++ b/src/components/Resources/ResourceSection.jsx @@ -0,0 +1,21 @@ +import { Link } from "react-router-dom"; + +const ResourceSection = ({ title, resources }) => ( +
+

{title}

+
+ {resources.map((resource, index) => ( +
+ {resource.image && {resource.title}} +

{resource.title}

+

{resource.description}

+ + Learn More + +
+ ))} +
+
+); + +export default ResourceSection; diff --git a/src/data/Resources.json b/src/data/Resources.json new file mode 100644 index 0000000..b616b58 --- /dev/null +++ b/src/data/Resources.json @@ -0,0 +1,44 @@ +{ + "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" + } + ], + "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://icons.getbootstrap.com/assets/img/icons-hero.png" + } + ], + "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" + } + ] +} \ No newline at end of file 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..8ed2043 --- /dev/null +++ b/src/pages/Resources.jsx @@ -0,0 +1,27 @@ +import React from 'react'; +import Layout from '../components/Layout/Layout'; +import { Space } from 'antd'; +import MainTitle from '../components/Common/MainTitle'; +import ResourceSection from '../components/Resources/ResourceSection'; +import resources from '../data/resources'; + + +const Resources = () => { + return ( + +
    + + + + + + +
    +     + ); +}; + +export default Resources; From f7667ec7ce092213ae3893f9be064ebb5ea532c6 Mon Sep 17 00:00:00 2001 From: devvsakib Date: Tue, 30 Jul 2024 22:16:09 +0600 Subject: [PATCH 2/7] vercel deploy issue fix --- src/pages/Resources.jsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/pages/Resources.jsx b/src/pages/Resources.jsx index 8ed2043..2a6f999 100644 --- a/src/pages/Resources.jsx +++ b/src/pages/Resources.jsx @@ -1,9 +1,8 @@ -import React from 'react'; import Layout from '../components/Layout/Layout'; import { Space } from 'antd'; import MainTitle from '../components/Common/MainTitle'; import ResourceSection from '../components/Resources/ResourceSection'; -import resources from '../data/resources'; +import resources from '../data/Resources'; const Resources = () => { From 088a3524f5b21a5043ddcd30d8c068cac6b451c7 Mon Sep 17 00:00:00 2001 From: devvsakib Date: Tue, 30 Jul 2024 22:28:45 +0600 Subject: [PATCH 3/7] new font + new component for resource card --- src/components/Layout/Layout.jsx | 2 +- src/components/Resources/ResourceCard.jsx | 27 ++++++++++++++++++++ src/components/Resources/ResourceSection.jsx | 17 ++++-------- 3 files changed, 33 insertions(+), 13 deletions(-) create mode 100644 src/components/Resources/ResourceCard.jsx 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} + )} +
    +

    {resource.title}

    +

    {resource.description}

    + + Learn More + +
    +
    ; +}; + +export default ResourceCard; diff --git a/src/components/Resources/ResourceSection.jsx b/src/components/Resources/ResourceSection.jsx index 11df0e6..6d18c56 100644 --- a/src/components/Resources/ResourceSection.jsx +++ b/src/components/Resources/ResourceSection.jsx @@ -1,18 +1,11 @@ -import { Link } from "react-router-dom"; +import ResourceCard from "./ResourceCard"; const ResourceSection = ({ title, resources }) => ( -
    -

    {title}

    -
    +
    +

    {title}

    +
    {resources.map((resource, index) => ( -
    - {resource.image && {resource.title}} -

    {resource.title}

    -

    {resource.description}

    - - Learn More - -
    + ))}
    From 9dc2859ff95e344fa79774b9f7c9c917a208546d Mon Sep 17 00:00:00 2001 From: devvsakib Date: Tue, 30 Jul 2024 22:52:14 +0600 Subject: [PATCH 4/7] more resources added --- src/data/Resources.json | 144 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 144 insertions(+) diff --git a/src/data/Resources.json b/src/data/Resources.json index b616b58..c7dc3ec 100644 --- a/src/data/Resources.json +++ b/src/data/Resources.json @@ -11,6 +11,54 @@ "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" } ], "toolsLibraries": [ @@ -25,6 +73,54 @@ "description": "A popular framework for building responsive and mobile-first websites.", "link": "https://getbootstrap.com", "image": "https://icons.getbootstrap.com/assets/img/icons-hero.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": "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": "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" } ], "careerRoadmaps": [ @@ -39,6 +135,54 @@ "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 From 0e6996c821675f08a90f499d2324cab3f66015ce Mon Sep 17 00:00:00 2001 From: devvsakib Date: Tue, 30 Jul 2024 23:20:54 +0600 Subject: [PATCH 5/7] lodash aded+ lots of improvement and more resources added --- package.json | 1 + src/components/Resources/ResourceSection.jsx | 26 ++-- src/data/Resources.json | 120 +++++++++++++++++++ src/pages/Resources.jsx | 84 +++++++++++-- yarn.lock | 5 + 5 files changed, 218 insertions(+), 18 deletions(-) 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/Resources/ResourceSection.jsx b/src/components/Resources/ResourceSection.jsx index 6d18c56..3f912a8 100644 --- a/src/components/Resources/ResourceSection.jsx +++ b/src/components/Resources/ResourceSection.jsx @@ -1,14 +1,18 @@ import ResourceCard from "./ResourceCard"; -const ResourceSection = ({ title, resources }) => ( -
    -

    {title}

    -
    - {resources.map((resource, index) => ( - - ))} -
    -
    -); - +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 index c7dc3ec..2f104d4 100644 --- a/src/data/Resources.json +++ b/src/data/Resources.json @@ -59,6 +59,48 @@ "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://cs50.harvard.edu/images/cs50x-logo.png" + }, + { + "title": "MIT OpenCourseWare", + "description": "Free lecture notes, exams, and videos from MIT.", + "link": "https://ocw.mit.edu", + "image": "https://ocw.mit.edu/courses/media/ocw_logo-2x.png" + }, + { + "title": "Udemy Free Courses", + "description": "A collection of free courses on various topics.", + "link": "https://www.udemy.com/courses/free", + "image": "https://udemy-images.udemy.com/course/480x270/1071882_59a0.jpg" + }, + { + "title": "Codecademy Learn", + "description": "Free interactive coding lessons on various programming languages.", + "link": "https://www.codecademy.com/learn", + "image": "https://upload.wikimedia.org/wikipedia/commons/6/63/Codecademy_Logo.png" + }, + { + "title": "Frontend Masters", + "description": "Free webinars and courses on front-end development.", + "link": "https://frontendmasters.com", + "image": "https://frontendmasters.com/images/logo.svg" + }, + { + "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.pluralsight.com/content/dam/pluralsight2/marketing/graphics/ps-logo.png" + }, + { + "title": "Treehouse", + "description": "Interactive learning with a focus on web development and design.", + "link": "https://teamtreehouse.com", + "image": "https://teamtreehouse.com/assets/images/logo.svg" } ], "toolsLibraries": [ @@ -92,6 +134,12 @@ "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.", @@ -110,6 +158,12 @@ "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://gulpjs.com/images/gulp-2x.png" + }, { "title": "Webpack", "description": "A static module bundler for JavaScript applications.", @@ -121,6 +175,72 @@ "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://alpinejs.dev/img/logo.svg" + }, + { + "title": "Chart.js", + "description": "A JavaScript library for creating beautiful charts.", + "link": "https://www.chartjs.org", + "image": "https://www.chartjs.org/media/logo-title.png" + }, + { + "title": "D3.js", + "description": "A JavaScript library for producing dynamic, interactive data visualizations.", + "link": "https://d3js.org", + "image": "https://d3js.org/logo.png" + }, + { + "title": "PixiJS", + "description": "A fast 2D rendering engine for web applications.", + "link": "https://pixijs.com", + "image": "https://pixijs.com/assets/images/logo.png" + }, + { + "title": "Moment.js", + "description": "A library for parsing, validating, manipulating, and formatting dates.", + "link": "https://momentjs.com", + "image": "https://momentjs.com/docs/images/moment-logo.svg" + }, + { + "title": "Three.js", + "description": "A JavaScript library for creating 3D graphics in the browser.", + "link": "https://threejs.org", + "image": "https://threejs.org/examples/favicon.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://eslint.org/assets/img/logo.svg" + }, + { + "title": "Jest", + "description": "A JavaScript testing framework with a focus on simplicity.", + "link": "https://jestjs.io", + "image": "https://jestjs.io/img/jest.svg" + }, + { + "title": "Prettier", + "description": "An opinionated code formatter for consistent code style.", + "link": "https://prettier.io", + "image": "https://prettier.io/favicon.ico" + }, + { + "title": "Cypress", + "description": "A JavaScript end-to-end testing framework.", + "link": "https://www.cypress.io", + "image": "https://www.cypress.io/images/brand/logo.svg" } ], "careerRoadmaps": [ diff --git a/src/pages/Resources.jsx b/src/pages/Resources.jsx index 2a6f999..6eef91e 100644 --- a/src/pages/Resources.jsx +++ b/src/pages/Resources.jsx @@ -1,23 +1,93 @@ +import React, { useState, useCallback } from 'react'; import Layout from '../components/Layout/Layout'; -import { Space } from 'antd'; 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); + + // Scroll to the relevant section if there are results + if (lowerQuery) { + const sections = [ + { id: 'learning-resources', resources: newFilteredResources.learningResources }, + { id: 'tools-libraries', resources: newFilteredResources.toolsLibraries }, + { id: 'career-roadmaps', resources: newFilteredResources.careerRoadmaps } + ]; + const targetSection = sections.find(section => section.resources.length > 0); + if (targetSection) { + const sectionElement = document.getElementById(targetSection.id); + if (sectionElement) { + sectionElement.scrollIntoView({ behavior: 'smooth' }); + } + } + } + }, 300), // Debounce delay in milliseconds + [] + ); + + const handleChange = (e) => { + const query = e.target.value; + setSearchQuery(query); + handleSearch(query); + }; + return (
    - - - - - +
    + {/* Icon and Input container */} +
    + + +
    +
    + {filteredResources.learningResources.length > 0 && ( + + )} + {filteredResources.toolsLibraries.length > 0 && ( + + )} + {filteredResources.careerRoadmaps.length > 0 && ( + + )}
    ); 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" From 6d42727675b35f65186f31157157461ce73a5bcb Mon Sep 17 00:00:00 2001 From: devvsakib Date: Tue, 30 Jul 2024 23:24:11 +0600 Subject: [PATCH 6/7] search field dark ui issue fix --- src/pages/Resources.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/Resources.jsx b/src/pages/Resources.jsx index 6eef91e..b38f962 100644 --- a/src/pages/Resources.jsx +++ b/src/pages/Resources.jsx @@ -74,7 +74,7 @@ const Resources = () => { placeholder="Search..." value={searchQuery} onChange={handleChange} - className="w-full outline-none p-2 border border-gray-300 rounded-md pl-10" // Added padding to the left for icon + className="w-full dark:bg-black outline-none p-2 border border-gray-300 rounded-md pl-10" />
    From 4415300460741337fd0ae84eb4c8a782def3e50b Mon Sep 17 00:00:00 2001 From: devvsakib Date: Wed, 31 Jul 2024 10:40:35 +0600 Subject: [PATCH 7/7] lots of improvement + resource images added --- src/components/Resources/ResourceCard.jsx | 47 ++++++++++++----------- src/data/Resources.json | 44 +++++++++------------ src/index.css | 6 ++- src/pages/Resources.jsx | 22 +++-------- 4 files changed, 54 insertions(+), 65 deletions(-) diff --git a/src/components/Resources/ResourceCard.jsx b/src/components/Resources/ResourceCard.jsx index fdd93fd..89cdb8f 100644 --- a/src/components/Resources/ResourceCard.jsx +++ b/src/components/Resources/ResourceCard.jsx @@ -1,27 +1,30 @@ import { Link } from "react-router-dom"; -const ResourceCard = ({idx, resource}) => { - return
    - {resource.image && ( - {resource.title} - )} -
    -

    {resource.title}

    -

    {resource.description}

    - - Learn More - -
    -
    ; +const ResourceCard = ({ idx, resource }) => { + 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/data/Resources.json b/src/data/Resources.json index 2f104d4..026aefd 100644 --- a/src/data/Resources.json +++ b/src/data/Resources.json @@ -64,43 +64,37 @@ "title": "CS50 by Harvard", "description": "An introduction to computer science, available for free online.", "link": "https://cs50.harvard.edu", - "image": "https://cs50.harvard.edu/images/cs50x-logo.png" + "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://ocw.mit.edu/courses/media/ocw_logo-2x.png" + "image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTIyauQ46N-CFeyPFemlxo6iKPeCGIeWojBCA&s" }, { - "title": "Udemy Free Courses", + "title": "Udemy", "description": "A collection of free courses on various topics.", "link": "https://www.udemy.com/courses/free", - "image": "https://udemy-images.udemy.com/course/480x270/1071882_59a0.jpg" - }, - { - "title": "Codecademy Learn", - "description": "Free interactive coding lessons on various programming languages.", - "link": "https://www.codecademy.com/learn", - "image": "https://upload.wikimedia.org/wikipedia/commons/6/63/Codecademy_Logo.png" + "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://frontendmasters.com/images/logo.svg" + "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.pluralsight.com/content/dam/pluralsight2/marketing/graphics/ps-logo.png" + "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://teamtreehouse.com/assets/images/logo.svg" + "image": "https://w7.pngwing.com/pngs/329/126/png-transparent-treehouse-tv-television-channel-ytv-sesame-television-text-logo.png" } ], "toolsLibraries": [ @@ -114,7 +108,7 @@ "title": "Bootstrap", "description": "A popular framework for building responsive and mobile-first websites.", "link": "https://getbootstrap.com", - "image": "https://icons.getbootstrap.com/assets/img/icons-hero.png" + "image": "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Bootstrap_logo.svg/2560px-Bootstrap_logo.svg.png" }, { "title": "Vue.js", @@ -162,7 +156,7 @@ "title": "Gulp", "description": "A toolkit for automating painful or time-consuming tasks in your development workflow.", "link": "https://gulpjs.com", - "image": "https://gulpjs.com/images/gulp-2x.png" + "image": "https://static-00.iconduck.com/assets.00/gulp-icon-2048x2048-ymy9jk5n.png" }, { "title": "Webpack", @@ -180,37 +174,37 @@ "title": "Alpine.js", "description": "A minimal framework for composing JavaScript behavior in your HTML.", "link": "https://alpinejs.dev", - "image": "https://alpinejs.dev/img/logo.svg" + "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://www.chartjs.org/media/logo-title.png" + "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://d3js.org/logo.png" + "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://pixijs.com/assets/images/logo.png" + "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://momentjs.com/docs/images/moment-logo.svg" + "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://threejs.org/examples/favicon.png" + "image": "https://miro.medium.com/v2/resize:fit:687/1*m0zrCLd2wY29-jiHaxYsgA.png" }, { "title": "Axios", @@ -222,25 +216,25 @@ "title": "Eslint", "description": "A tool for identifying and fixing problems in JavaScript code.", "link": "https://eslint.org", - "image": "https://eslint.org/assets/img/logo.svg" + "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://jestjs.io/img/jest.svg" + "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://prettier.io/favicon.ico" + "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://www.cypress.io/images/brand/logo.svg" + "image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT9wCeSRyMZFFrOZSXwoLSK6DUhU5SLqV3mTQ&s" } ], "careerRoadmaps": [ 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/pages/Resources.jsx b/src/pages/Resources.jsx index b38f962..432217e 100644 --- a/src/pages/Resources.jsx +++ b/src/pages/Resources.jsx @@ -34,13 +34,8 @@ const Resources = () => { }; setFilteredResources(newFilteredResources); - // Scroll to the relevant section if there are results if (lowerQuery) { - const sections = [ - { id: 'learning-resources', resources: newFilteredResources.learningResources }, - { id: 'tools-libraries', resources: newFilteredResources.toolsLibraries }, - { id: 'career-roadmaps', resources: newFilteredResources.careerRoadmaps } - ]; + 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); @@ -49,7 +44,7 @@ const Resources = () => { } } } - }, 300), // Debounce delay in milliseconds + }, 100), [] ); @@ -67,7 +62,6 @@ const Resources = () => { highlight="Web Development" />
    - {/* Icon and Input container */}
    {
    - {filteredResources.learningResources.length > 0 && ( - - )} - {filteredResources.toolsLibraries.length > 0 && ( - - )} - {filteredResources.careerRoadmaps.length > 0 && ( - - )} + {Object.keys(filteredResources).map((key, index) => ( + + ))}
    );