Skip to content

Commit

Permalink
feat: open source course page (WeMakeDevs#684)
Browse files Browse the repository at this point in the history
* feat: open source course page

* fix: id of structure section of open source course page

* style: open source course page content update

* style: reduce extra margin from the skeleton wrapper of testinomial

* fix: NewtabIcon of unstyled link going in next line

* style: hero section formated

* fix: typo and section arragment

* fix: typo

* feat: opensource card on course page

* style: card style change to morden

* fix: before element position in ButtonLink

* feat: add title to Hackthaons Card

* chore: package manger lock file update

* chore: removed unused package
  • Loading branch information
Chandraprakash-Darji authored Jun 28, 2023
1 parent 088ed82 commit 4a11aa8
Show file tree
Hide file tree
Showing 12 changed files with 457 additions and 46 deletions.
7 changes: 7 additions & 0 deletions src/App.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
GitGithubPageContent,
} from '@/content/courses';
import { CoursesPageContent } from '@/content/courses/CoursesPageContent';
import OpenSourcePageContent from '@/content/courses/opensource';
import NapptiveHackathon from '@/content/Hackathons/napptive';
import { MeetupPageContent } from '@/content/Meetup';
import Delhi2023 from '@/content/Meetup/delhi-may-2023';
Expand Down Expand Up @@ -43,6 +44,7 @@ const Super25Page = lazy(() => import('@/pages/Super25Page'));
const CocPage = lazy(() => import('@/pages/CocPage'));
const MeetupPage = lazy(() => import('@/pages/MeetupPage'));
const OpenSourcePage = lazy(() => import('@/pages/OpenSourcePage'));
const OpenSourceCoursePage = lazy(() => import('@/pages/OpenSourceCoursePage'));

const App = () => {
return (
Expand Down Expand Up @@ -72,6 +74,11 @@ const App = () => {
path='/courses/devops'
element={<SingleCoursePage content={DevopsPageContent} />}
/>
<Route
exact
path='/courses/opensource'
element={<OpenSourceCoursePage content={OpenSourcePageContent} />}
/>

{/* Events Page */}
<Route exact path='/events' element={<EventsPage />} />
Expand Down
Binary file added src/assets/courses/opensource.avif
Binary file not shown.
Binary file added src/assets/courses/opensource.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 4 additions & 4 deletions src/components/Cards/DetailCard.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,18 @@ import ButtonLink from '@/components/links/ButtonLink';

const DetailCard = ({ image, title, description, url, btnText, git }) => {
return (
<div className='overflow-hidden rounded-lg border border-content/50 bg-gradient-to-br from-transparent to-base-100/50'>
<div className='overflow-hidden rounded-2xl bg-content/5 p-4'>
<img
src={image}
className='aspect-video w-full object-cover object-center'
className='aspect-video w-full rounded-lg object-cover object-center'
alt={title + 'banner'}
/>
<div className='p-6'>
<div className='pt-6 pb-3'>
<h3>{title}</h3>
<p className='mt-2'>{description}</p>
<div className='mt-4 flex gap-2'>
{url && (
<ArrowLink as={ButtonLink} href={url}>
<ArrowLink openNewTab as={ButtonLink} href={url}>
{btnText}
</ArrowLink>
)}
Expand Down
38 changes: 10 additions & 28 deletions src/components/Cards/MeetupCard.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,37 +5,19 @@ import ButtonLink from '@/components/links/ButtonLink';

const MeetupCard = ({ img, title, on, description, slug, link }) => {
return (
<div className='overflow-hidden rounded-lg border border-content/50 bg-gradient-to-br from-transparent to-base-100/50'>
<img src={img || ''} alt={title + 'banner'} />
<div className='p-6'>
<div className='overflow-hidden rounded-2xl bg-content/5 p-4'>
<img
src={img || ''}
alt={title + 'banner'}
className='aspect-video w-full rounded-lg object-cover object-center'
/>
<div className='pt-6 pb-3'>
<h3>{title}</h3>
<p
style={{
marginTop: '1.3rem',
}}
>
{description}
</p>
<p
style={{
marginTop: '1.3rem',
display: 'flex',
alignItems: 'center',
gap: '.5rem',
}}
className='h3'
>
<p className='mt-2'>{description}</p>
<p className='h3 mt-4 flex items-center gap-2'>
<BsCalendar /> {new Date(on).toDateString()}
</p>
<p
style={{
marginTop: '1.3rem',
display: 'flex',
alignItems: 'center',
gap: '.5rem',
}}
className='h3'
>
<p className='h3 mt-4 flex items-center gap-2'>
<BsClock /> {new Date(on).toLocaleTimeString()}{' '}
{/\((.*)\)/
.exec(new Date(on).toString())[1]
Expand Down
9 changes: 9 additions & 0 deletions src/components/PageComp/CoursesPage/Courses.jsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import Devops from 'assets/courses/devops.jpg';
import DSA from 'assets/courses/dsa.jpg';
import GitGithub from 'assets/courses/git-github.jpg';
import OpenSource from 'assets/courses/opensource.jpeg';

import DetailCard from '../../Cards/DetailCard';

Expand Down Expand Up @@ -47,4 +48,12 @@ const courses = [
url: '/courses/devops',
btnText: 'Learn more',
},
{
title: 'Open Source',
description:
'Welcome to the immersive Open Source Course, where we empower individuals with skills to thrive in open source. Dive into this comprehensive program to explore open source principles, contribute to projects, and excel in the tech industry.',
image: OpenSource,
url: '/courses/opensource',
btnText: 'Learn more',
},
];
3 changes: 3 additions & 0 deletions src/components/PageComp/HackathonsPage/PastEvents.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,20 +26,23 @@ export default PastEvents;

const eventsData = [
{
title: 'Napptive hackathon',
description:
'Do you want to learn new skills, discover how to build and deploy cloud native apps and meet like-minded people? Find this and much more by participating in our hackathon!',
image: NapptiveBanner,
url: '/events/hackathons/napptive',
btnText: 'Learn more',
},
{
title: 'Stream hackathon',
description:
'WeMakeDevs <> Stream Hackathon : Hey if you are looking to learn new skills, meet interesting people, and push yourself to create something truly innovative, then you should definitely taking part in our hackathon!',
image: PastEvent2,
url: 'https://wemakedevs-stream.devpost.com/resources',
btnText: 'Learn more',
},
{
title: 'Cloud Native hackathon',
description:
'Cloud Native Hackathon is an initiative to bring together students, professionals, and even beginners from around the world to innovate and build projects in the domain of DevOps.',
image: PastEvent8,
Expand Down
11 changes: 1 addition & 10 deletions src/components/TweetCarousael/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,7 @@ import { eagerLoadTwitterLibrary, Tweet } from 'react-twitter-widgets';

//skeleton component layout wrappers
function InlineWrapperWithMargin({ children }) {
return (
<span
style={{
marginRight: '1.2rem',
marginLeft: '1.2rem',
}}
>
{children}
</span>
);
return <span className='mx-3'>{children}</span>;
}

function TweetCarousael({ tweetId, setTweetId }) {
Expand Down
2 changes: 1 addition & 1 deletion src/components/links/ButtonLink.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const ButtonLink = ({
href={href}
disabled={disabled}
className={clsxm(
'inline-flex w-max items-center rounded-full py-3 px-7 font-medium transition-all duration-75',
'relative inline-flex w-max items-center rounded-full py-3 px-7 font-medium transition-all duration-75',
// before becuse of safari don't suppport rounded outline
'focus-visible:before:absolute focus-visible:before:-top-1 focus-visible:before:-left-1 focus-visible:before:-right-1 focus-visible:before:-bottom-1 focus-visible:before:rounded-full focus-visible:before:border focus-visible:before:border-primary',
'disabled:cursor-not-allowed',
Expand Down
7 changes: 4 additions & 3 deletions src/components/links/UnstyledLink.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ import NewTab from 'Icons/core/NewTab';
import * as React from 'react';
import { Link } from 'react-router-dom';

import clsxm from '@/lib/utils';

const UnstyledLink = React.forwardRef(
(
{ children, href, openNewTab, openNewTabIcon = false, className, ...rest },
Expand Down Expand Up @@ -30,10 +32,9 @@ const UnstyledLink = React.forwardRef(
})}
href={href}
{...rest}
className={className}
className={clsxm('inline-flex', className)}
>
{children}
{openNewTabIcon && <NewTab />}
{children} {openNewTabIcon && <NewTab />}{' '}
</a>
);
}
Expand Down
171 changes: 171 additions & 0 deletions src/content/courses/opensource.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,171 @@
const OpenSourcePageContent = {
header: [
{
name: 'About',
href: '#sec-about',
},
{
name: 'Structure',
href: '#sec-structure',
},
{
name: 'Testimonials',
href: '#testimonials',
},
{
name: 'Join',
href: '#join',
},
{
name: 'FAQ',
href: '#faq',
},
],

CTA: {
name: 'Register',
href: '#register',
},

videoLink: 'https://www.youtube.com/embed/rZ41y93P2Qo',
whyjoin: [
{
title: 'Aspiring Developers',
description:
"Unleash your coding passion and thrive in open source development with our course, whether you're a student exploring career options or transitioning into the tech industry.",
},
{
title: 'Tech Professionals',
description:
'Expand your skill set, gain valuable insights, and enhance your career prospects in the tech industry by diving into the open source world with our course.',
},
{
title: 'Open Source Enthusiasts',
description:
'Become a valuable member of the open source community by acquiring the knowledge and practical guidance you need through our course to actively contribute to exciting projects.',
},
{
title: 'Students and Researchers',
description:
'Apply open source concepts effectively in your academic or research projects by joining our course, which introduces you to open source technologies and equips you with the necessary skills.',
},
{
title: 'Entrepreneurs and Innovators',
description:
'Empower your ventures with a deeper understanding of open source development, licensing, and collaboration through our course, enabling you to leverage open source resources for your projects and businesses.',
},
{
title: 'Desire to learn',
description:
'No matter your background or expertise, unlock your potential by joining our course tailored for open source enthusiasts, providing opportunities to contribute to meaningful projects and exciting career opportunities.',
},
],

structure: {
points: [
{
title: 'Comprehensive Lectures',
points: [
'Engage in regular structured lectures that allow you to follow along easily.',
'Gain a deep understanding of various tech domains with industry experts leading the sessions.',
'Learn directly from maintainers, gaining valuable insights and practical knowledge.',
],
},
{
title: 'Interaction with Industry Experts',
points: [
'Get the opportunity to interact with industry experts who will guide you in starting your journey in different tech domains.',
'Benefit from their expertise, experience, and guidance to accelerate your learning and career growth.',
],
},
{
title: 'Updated Assignments',
points: [
'Access the GitHub repository regularly for updated assignments.',
'Stay engaged and challenge yourself with practical exercises that enhance your skills and understanding.',
],
},
{
title: 'Structured Learning Resources',
points: [
'Gain access to a curated collection of free, high-quality learning resources for various tech stacks.',
'Explore these resources to deepen your knowledge and broaden your skill set.',
'Find links to our roadmaps repository, which provides comprehensive guidance for your learning path.',
],
},
{
title: 'Support for Open Source Programs',
points: [
'Receive dedicated support in applying to prestigious open source programs, such as Google Summer of Code, Outreachy, Major League Hacking Fellowship, LFX, and more.',
'Get guidance on application processes, project selection, and mentorship opportunities.',
'Increase your chances of being accepted into these programs and kickstart your open source journey.',
],
},
],
btns: [
{
text: 'Lectures',
link: 'https://www.youtube.com/playlist?list=PL9gnSGHSqcnq3Px3IAYF7yxeWGWrSdHK8',
},
{
text: 'Assignments',
link: 'https://github.com/WeMakeDevs/open-source-course',
},
],
},
learninpublic: [
{
title:
'Use #OpenSourceWithKunal on Twitter and share your journey regularly',
link: null,
},
{
title:
'There will be a blogging challenge will be running along with this and win exciting prices.',
link: {
title: 'Blogging challenges',
href: '/events/hashnode',
},
},
],
faq: [
{
id: 'FAQ1',
question: 'Are all of your courses free?',
answer:
'Yes! All of our courses are and will always be free as well as high quality. You can find those on our YouTube channel.',
},
{
id: 'FAQ2',
question: 'Is your community beginner friendly?',
answer:
'Yes! Even non-coders are welcome. Our courses are designed in such a way that anyone can get started with it. Even people who have never programmed before!',
},
{
id: 'FAQ3',
question: 'How do I join your community?',
answer:
'Make sure to join our Discord and Telegram channels. You can find us on all socials media platforms as @wemakedevs',
},
{
id: 'FAQ4',
question: 'How do I get my doubts resolved?',
answer:
'Join our Discord community along with thousands of others and feel free to ask your doubts in the relevant channels.',
},
{
id: 'FAQ5',
question: 'Do you provide notes and assignments?',
answer:
"Yes. It's crucial to revise the topics and self practice after watching the tutorials and we provide materials for the same.",
},
{
id: 'FAQ6',
question: 'Do you provide mentorship and guidance?',
answer:
'Yes. That is the highlight of our community. Get expert guidance from industry experts from around the world. You can learn more and get inspired by their stories and roadmaps via the podcast Open Source Cafe.',
},
],
};

export default OpenSourcePageContent;
Loading

0 comments on commit 4a11aa8

Please sign in to comment.