Skip to content

Commit

Permalink
merged updated code
Browse files Browse the repository at this point in the history
  • Loading branch information
devvsakib committed Jul 31, 2024
2 parents 2492c6a + 7a02263 commit 0e08c2d
Show file tree
Hide file tree
Showing 8 changed files with 382 additions and 29 deletions.
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion src/components/Layout/Layout.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { ThemeProvider } from '../../context/ThemeContext';
*/
const Layout = ({ stars, children }) => {
return (
<div className='flex flex-col justify-between min-h-screen'>
<div className='flex flex-col justify-between min-h-screen font-[poppins]'>
<ThemeProvider>
<Header
notice={"Under Construction"}
Expand Down
30 changes: 30 additions & 0 deletions src/components/Resources/ResourceCard.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import { Link } from "react-router-dom";

const ResourceCard = ({ idx, resource }) => {
return <div key={idx} className="dark:bg-black rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300">
{resource.image && (
<div className="grid items-center">
<img
src={resource.image}
alt={resource.title}
onError={(e) => { e.target.src = "assets/logo.png"; }}
className="h-40 object-cover object-center "
/>
</div>
)}
<div className="p-6">
<h3 className="text-lg font-semibold mb-2">{resource.title}</h3>
<p className="text-gray-700 mb-4">{resource.description}</p>
<Link
to={resource.link}
target="_blank"
rel="noopener noreferrer"
className="text-blue-600 hover:underline"
>
Learn More
</Link>
</div>
</div>;
};

export default ResourceCard;
35 changes: 16 additions & 19 deletions src/components/Resources/ResourceSection.jsx
Original file line number Diff line number Diff line change
@@ -1,21 +1,18 @@
import { Link } from "react-router-dom";

const ResourceSection = ({ title, resources }) => (
<section className="my-10">
<h2 className="text-2xl font-bold mb-4">{title}</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{resources.map((resource, index) => (
<div key={index} className="p-4 bg-black rounded-lg shadow-md flex flex-col items-center overflow-hidden">
{resource.image && <img src={resource.image} alt={resource.title} className="mb-4 object-cover object-center w-full h-36 rounded-t-lg" />}
<h3 className="text-xl font-semibold mb-2">{resource.title}</h3>
<p className="mb-4">{resource.description}</p>
<Link to={resource.link} target="_blank" rel="noopener noreferrer" className="text-blue-500 underline">
Learn More
</Link>
</div>
))}
</div>
</section>
);
import ResourceCard from "./ResourceCard";

const ResourceSection = ({ id, title, resources }) => {
return (
<section id={id} className="my-12">
<h2 className="text-3xl font-bold mb-10 text-center">{title}</h2>
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">
{resources.length === 0 ? <div>
<h3 className="text-xl font-medium text-center mb-20">No resources found</h3>
</div> :
resources.map((resource, index) => (
<ResourceCard idx={index} resource={resource} />
))}
</div>
</section>
);
}
export default ResourceSection;
260 changes: 259 additions & 1 deletion src/data/Resources.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,90 @@
"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": [
Expand All @@ -24,7 +108,133 @@
"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",
"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": [
Expand All @@ -39,6 +249,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"
}
]
}
6 changes: 5 additions & 1 deletion src/index.css

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

Loading

0 comments on commit 0e08c2d

Please sign in to comment.