[FIX]: Conflicts

prakharpants · Nov 5, 2022 · de2788a · de2788a
2 parents 0e61ef1 + 3becd70
commit de2788a
Show file tree

Hide file tree

Showing 15 changed files with 239 additions and 171 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "commclassroom",
  "private": false,
- "homepage": "https://commclassroom.github.io/commclassroom",
+ "homepage": "https://commclassroom.org",
  "dependencies": {
  "@testing-library/jest-dom": "^5.16.5",
  "@testing-library/react": "^13.4.0",

diff --git a/public/404.html b/public/404.html
@@ -4,7 +4,7 @@
  <meta charset="utf-8">
  <title>Single Page Apps for GitHub Pages</title>
  <script type="text/javascript">
- var pathSegmentsToKeep = 1;
+ var pathSegmentsToKeep = 0;
 
  var l = window.location;
  l.replace(
@@ -19,4 +19,4 @@
  </head>
  <body>
  </body>
-</html>
+</html>
diff --git a/public/CNAME b/public/CNAME
@@ -0,0 +1 @@
+commclassroom.org
diff --git a/src/App.js b/src/App.js
@@ -10,12 +10,11 @@ import Hashnode from './pages/Hashnode.js'
 const App = () => {
  return (
  <div className="main">
- <Routes basename={"/commclassroom"}>
- <Route exact path="/co" element={<HomePage/>} />
- <Route path="/commclassroom/course" element={<Course />} />
- <Route path="/commclassroom/event" element={<Events />} />
- <Route path="/commclassroom/roadmaps" element={<Roadmaps />} />
- <Route path="/commclassroom/Hashnode" element={<Hashnode />} />
+ <Routes>
+ <Route exact path="/" element={<HomePage/>} />
+ <Route path="/course" element={<Course />} />
+ <Route path="/event" element={<Events />} />
+ <Route path="/roadmaps" element={<Roadmaps />} />
  </Routes>
  </div>
  )

diff --git a/src/components/Course/Card.js b/src/components/Course/Card.js
@@ -0,0 +1,15 @@
+import React from 'react'
+
+const Card = ({ course = {} }) => {
+ return (
+ <div className="course_cont_2_card">
+ <img className="course_cont_2_card_1" src={course.image} alt={course.title} />
+ <p className="course_cont_2_card_1_heading"> {course.title} </p>
+ <p className="course_cont_2_card_1_para_1">
+ {course.description}
+ </p>
+ </div>
+ )
+}
+
+export default Card
diff --git a/src/components/Course/CardsList.js b/src/components/Course/CardsList.js
@@ -0,0 +1,14 @@
+import React from 'react'
+import Card from './Card'
+
+const CardsList = ({courses}) => {
+ return (
+ <div className="course_cont_2">
+ {
+ courses.map(course => <Card course={course}></Card>)
+ }
+ </div>
+ )
+}
+
+export default CardsList
diff --git a/src/components/Course/Course.js b/src/components/Course/Course.js
@@ -1,112 +1,16 @@
 import React from 'react'
+import Header from './Header'
+import CardsList from './CardsList'
+import { courses } from './data'
 import './course.css'
-import Learning from '../../assets/Learning.png'
-import Notes from '../../assets/Notes.png'
-import Assignment from '../../assets/Assignment.png'
-import DoubtSupport from '../../assets/DoubtSupport.png'
-import Guidance from '../../assets/Guidance.png'
-import Projects from '../../assets/Project.png'
-import Dsa from '../../assets/DSA.png'
-import Github from '../../assets/Github.png'
-import MachineLearning from '../../assets/MachineLearning.png'
-import SystemDesign from '../../assets/SystemDesign.png'
-import FullStack from '../../assets/FullStack.png'
-import DevOps from '../../assets/DevOps.png'
-import Python from '../../assets/Python.png'
 
 const course = () => {
  return (
  <>
- <div className="course_cont_1">
- <div className="course_cont_a">
- <p className="course_cont_para">
- Boost your career with our free hands-on courses.
- </p>
- </div>
- <div className="course_cont_b">
- <div className="course_cont_b_1">
- <div className="course_cont_b_1_frame_1">
- <img src={Learning} alt="Learning" /> 
- <p> Structured Learning </p>
- </div>
- <div className="course_cont_b_1_frame_2">
- <img src={Notes} alt="Learning" /> 
- <p> Notes </p>
- </div>
- <div className="course_cont_b_1_frame_3">
- <img src={Assignment} alt="Learning" /> 
- <p> Assignments </p>
- </div>
- </div>
- <div className="course_cont_b_2">
- <div className="course_cont_b_1_frame_4">
- <img src={DoubtSupport} alt="Learning" /> 
- <p> Doubt Support </p>
- </div>
- <div className="course_cont_b_1_frame_5">
- <img src={Guidance} alt="Learning" /> 
- <p> Guidance </p>
- </div>
- <div className="course_cont_b_1_frame_6">
- <img src={Projects} alt="Learning" /> 
- <p> Projects </p>
- </div>
- </div>
- </div>
- </div>
- <div className="course_cont_2">
- <div className="course_cont_2_card">
- <img className="course_cont_2_card_1" src={Dsa} />
- <p className="course_cont_2_card_1_heading"> Data Structures and Algorithm in Java </p>
- <p className="course_cont_2_card_1_para_1"> 
- Got no programming knowledge ? No worries. Become an expert at solving simple to complex LeetCode problems with ease and become interview-ready.
- </p>
- </div>
- <div className="course_cont_2_card">
- <img className="course_cont_2_card_1" src={Github} />
- <p className="course_cont_2_card_1_heading">Develop your knowledge of Git and GitHub. </p>
- <p className="course_cont_2_card_1_para_1">
- Start out your exploration of open source with the comprehensive Git & GitHub tutorial, which covers both basic and advanced concepts.
- </p>
- </div>
- <div className="course_cont_2_card">
- <img className="course_cont_2_card_1" src={DevOps} />
- <p className="course_cont_2_card_1_heading">Beginner to Advanced DevOps </p>
- <p className="course_cont_2_card_1_para_1">
- DevOps engineer is without a doubt the most in-demand position on the market right now, particularly with the rise of high-paying remote possibilities. Learn DevOps from scratch here.
- </p>
- </div>
- <div className="course_cont_2_card">
- <img className="course_cont_2_card_1" src={FullStack} />
- <p className="course_cont_2_card_1_heading"> Web Development</p>
- <p className="course_cont_2_card_1_para_1">
- Build credible, work-like projects to gain proficiency in React, NodeJS, MongoDB, Javascript, and other technologies to launch a successful career as a developer.
- </p>
- </div>
- <div className="course_cont_2_card">
- <img className="course_cont_2_card_1" src={Python} />
- <p className="course_cont_2_card_1_heading"> Learn Python from A to Z </p>
- <p className="course_cont_2_card_1_para_1">
- Get introduced to all of the Python developer skills in this course and construct practical projects along the way to add to your portfolio.
- </p>
- </div>
- <div className="course_cont_2_card">
- <img className="course_cont_2_card_1" src={MachineLearning} />
- <p className="course_cont_2_card_1_heading"> Master Machine Learning </p>
- <p className="course_cont_2_card_1_para_1">
- Become the cool kid in town. Without any prerequisites, master Machine Learning from scratch to an advanced level.
- </p>
- </div>
- <div className="course_cont_2_card">
- <img className="course_cont_2_card_1" src={SystemDesign} />
- <p className="course_cont_2_card_1_heading"> System Design Fundamentals </p>
- <p className="course_cont_2_card_1_para_1">
- Your ability to develop scalable systems will improve as an engineer. Prepare for system design interviews by learning how to build complex systems.
- </p>
- </div>
- </div>
- </>
-)
+ <Header />
+ <CardsList courses={courses}/>
+ </>
+ )
 }
 
 export default course
diff --git a/src/components/Course/Header.js b/src/components/Course/Header.js
@@ -0,0 +1,52 @@
+import React from 'react'
+
+import Learning from '../../assets/Learning.png'
+import Notes from '../../assets/Notes.png'
+import Assignment from '../../assets/Assignment.png'
+import DoubtSupport from '../../assets/DoubtSupport.png'
+import Guidance from '../../assets/Guidance.png'
+import Projects from '../../assets/Project.png'
+
+const Header = () => {
+ return (
+ <div className="course_cont_1">
+ <div className="course_cont_a">
+ <p className="course_cont_para">
+ Boost your career with our free hands-on courses.
+ </p>
+ </div>
+ <div className="course_cont_b">
+ <div className="course_cont_b_1">
+ <div className="course_cont_b_1_frame_1">
+ <img src={Learning} alt="Learning" />
+ <p> Structured Learning </p>
+ </div>
+ <div className="course_cont_b_1_frame_2">
+ <img src={Notes} alt="Learning" />
+ <p> Notes </p>
+ </div>
+ <div className="course_cont_b_1_frame_3">
+ <img src={Assignment} alt="Learning" />
+ <p> Assignments </p>
+ </div>
+ </div>
+ <div className="course_cont_b_2">
+ <div className="course_cont_b_1_frame_4">
+ <img src={DoubtSupport} alt="Learning" />
+ <p> Doubt Support </p>
+ </div>
+ <div className="course_cont_b_1_frame_5">
+ <img src={Guidance} alt="Learning" />
+ <p> Guidance </p>
+ </div>
+ <div className="course_cont_b_1_frame_6">
+ <img src={Projects} alt="Learning" />
+ <p> Projects </p>
+ </div>
+ </div>
+ </div>
+ </div>
+ )
+}
+
+export default Header
diff --git a/src/components/Course/data.js b/src/components/Course/data.js
@@ -0,0 +1,45 @@
+import Dsa from '../../assets/DSA.png'
+import Github from '../../assets/Github.png'
+import MachineLearning from '../../assets/MachineLearning.png'
+import SystemDesign from '../../assets/SystemDesign.png'
+import FullStack from '../../assets/FullStack.png'
+import DevOps from '../../assets/DevOps.png'
+import Python from '../../assets/Python.png'
+
+export const courses = [
+ {
+ title: "Data Structures and Algorithm in Java",
+ description: "Got no programming knowledge ? No worries. Become an expert at solving simple to complex LeetCode problems with ease and become interview-ready.",
+ image: Dsa
+ },
+ {
+ title: "Develop your knowledge of Git and GitHub.",
+ description: "Start out your exploration of open source with the comprehensive Git & GitHub tutorial, which covers both basic and advanced concepts.",
+ image: Github
+ },
+ {
+ title: "Beginner to Advanced DevOps",
+ description: "DevOps engineer is without a doubt the most in-demand position on the market right now, particularly with the rise of high-paying remote possibilities. Learn DevOps from scratch here.",
+ image: DevOps
+ },
+ {
+ title: "Web Development",
+ description: "Build credible, work-like projects to gain proficiency in React, NodeJS, MongoDB, Javascript, and other technologies to launch a successful career as a developer.",
+ image: FullStack
+ },
+ {
+ title: "Learn Python from A to Z",
+ description: "Get introduced to all of the Python developer skills in this course and construct practical projects along the way to add to your portfolio.",
+ image: Python
+ },
+ {
+ title: "Master Machine Learning ",
+ description: "Become the cool kid in town. Without any prerequisites, master Machine Learning from scratch to an advanced level.",
+ image: MachineLearning
+ },
+ {
+ title: "System Design Fundamentals",
+ description: "Your ability to develop scalable systems will improve as an engineer. Prepare for system design interviews by learning how to build complex systems.",
+ image: SystemDesign
+ },
+]
diff --git a/src/components/Event/Card.js b/src/components/Event/Card.js
@@ -0,0 +1,18 @@
+import React from 'react'
+
+const Card = ({ event }) => {
+ return (
+ <div className="events_cont_2_card">
+ <img className="events_cont_2_card_1" src={event.image} alt={event.title} />
+ {event.ongoing && <p className="events_cont_2_card_1_head">🟢 On-Going </p>}
+ {!event.ongoing && <p className="events_cont_2_card_1_head1">🔴 Completed </p>}
+ <p className="events_cont_2_card_1_heading"> {event.title} </p>
+ <p className="events_cont_2_card_1_para_1">
+ {event.description}
+ </p>
+ <p className="events_cont_2_card_1_date">{event.date}</p>
+ </div>
+ )
+}
+
+export default Card
diff --git a/src/components/Event/CardsList.js b/src/components/Event/CardsList.js
@@ -0,0 +1,14 @@
+import React from 'react'
+import Card from './Card'
+
+const CardsList = ({ events }) => {
+ return (
+ <div className="events_cont_2">
+ {
+ events.map(event => <Card event={event} />)
+ }
+ </div>
+ )
+}
+
+export default CardsList