From bd261af51be661d6c9b292191806f55dcd7df1ef Mon Sep 17 00:00:00 2001 From: ajay-dhangar Date: Fri, 1 Mar 2024 21:13:39 +0530 Subject: [PATCH 1/2] update home page --- .../non-primitive-data-types/date-js.md | 2 +- src/components/GiscusComponent/index.tsx | 41 +++--- src/components/GiscusComponent/style.css | 3 + src/components/HomepageFeatures/index.js | 104 -------------- src/components/HomepageHero/index.js | 77 ++++++++++- src/pages/index.js | 76 +++++----- src/pages/index.module.css | 130 +++++++++++++++++- 7 files changed, 265 insertions(+), 168 deletions(-) create mode 100644 src/components/GiscusComponent/style.css diff --git a/docs/javascript/datatypes/non-primitive-data-types/date-js.md b/docs/javascript/datatypes/non-primitive-data-types/date-js.md index 0fdb806195..25bf66d771 100644 --- a/docs/javascript/datatypes/non-primitive-data-types/date-js.md +++ b/docs/javascript/datatypes/non-primitive-data-types/date-js.md @@ -3,7 +3,7 @@ id: date-datatypes-in-javascript title: Date Datatypes in JavaScript sidebar_label: Date sidebar_position: 4 -tags: [JavaScript, Date, Date Datatypes in JavaScript, Date in JavaScript] +tags: [JavaScript, Date, Date Datatypes in JavaScript, Date in JavaScript, JavaScript Date, JavaScript Date Datatypes, JavaScript Date Object, JavaScript Date Methods, JavaScript Date Examples, JavaScript Date Tutorial, JavaScript Date and Time, JavaScript Date Format, JavaScript Date Operations, JavaScript Date Functions, JavaScript Date Properties, JavaScript Date Setters, JavaScript Date Getters, JavaScript Date Working with Dates and Times, JavaScript Date Difference, JavaScript Date Add Days, JavaScript Date Add Months, JavaScript Date Add Years, JavaScript Date Add Hours, JavaScript Date Add Minutes, JavaScript Date Add Seconds, JavaScript Date Add Milliseconds, JavaScript Date Add Time, JavaScript Date Format, JavaScript Date Format Examples, JavaScript Date Format Tutorial, JavaScript Date Format Options, JavaScript Date Format Locale, JavaScript Date Format Timezone, JavaScript Date Format Date, JavaScript Date Format Time, JavaScript Date Format Day, JavaScript Date Format Month, JavaScript Date Format Year, JavaScript Date Format Weekday, JavaScript Date Format Week, JavaScript Date Format Hour, JavaScript Date Format Minute, JavaScript Date Format Second, JavaScript Date Format Millisecond, JavaScript Date Format UTC, JavaScript Date Format Local, JavaScript Date Format ISO, JavaScript Date Format Short, JavaScript Date Format Medium, JavaScript Date Format Long, JavaScript Date Format Full, JavaScript Date Format Custom] description: What is a Date in JavaScript and how to use it to work with dates and times. --- diff --git a/src/components/GiscusComponent/index.tsx b/src/components/GiscusComponent/index.tsx index 7027e52f1d..39757108bd 100644 --- a/src/components/GiscusComponent/index.tsx +++ b/src/components/GiscusComponent/index.tsx @@ -1,26 +1,29 @@ -import React from 'react'; +import React from "react"; import Giscus from "@giscus/react"; -import { useColorMode } from '@docusaurus/theme-common'; +import { useColorMode } from "@docusaurus/theme-common"; +import "./style.css"; export default function GiscusComponent() { const { colorMode } = useColorMode(); return ( - +
+ +
); -} \ No newline at end of file +} diff --git a/src/components/GiscusComponent/style.css b/src/components/GiscusComponent/style.css new file mode 100644 index 0000000000..dbb58559a5 --- /dev/null +++ b/src/components/GiscusComponent/style.css @@ -0,0 +1,3 @@ +.giscus-component { + padding: 20px; +} \ No newline at end of file diff --git a/src/components/HomepageFeatures/index.js b/src/components/HomepageFeatures/index.js index 050855027e..d32247cffb 100644 --- a/src/components/HomepageFeatures/index.js +++ b/src/components/HomepageFeatures/index.js @@ -3,33 +3,6 @@ import Heading from "@theme/Heading"; import styles from "./styles.module.css"; const FeatureList = [ - // { - // title: 'Easy to Use', - // Svg: require('@site/static/img/svg/undraw_docusaurus_mountain.svg').default, - // description: ( - // <> - // CodeHarbor is designed to be easy to learn and improve your coding skills. Start with the basics and learn at your own pace. - // - // ), - // }, - // { - // title: 'Focus on What Matters', - // Svg: require('@site/static/img/svg/undraw_docusaurus_tree.svg').default, - // description: ( - // <> - // CodeHarbor lets you focus on your coding skills, and we'll do the chores. Go ahead and learn the basics of coding. - // - // ), - // }, - // { - // title: 'Powered by React', - // Svg: require('@site/static/img/svg/undraw_docusaurus_react.svg').default, - // description: ( - // <> - // CodeHarbor is built using React, a popular JavaScript library for building user interfaces. React makes it painless to create interactive UIs. - // - // ), - // }, { title: "Blogging Platform", Svg: require("@site/static/img/svg/blogging.svg").default, @@ -40,29 +13,6 @@ const FeatureList = [ ), }, - - // { - // title: "Bug Fixes and Improvements", - // Svg: require("@site/static/img/svg/bug_fixing.svg").default, - // description: ( - // <> - // CodeHarbor is constantly being improved and updated. We are always open - // to feedback and suggestions. - // - // ), - // }, - - // { - // title: "YouTub Tutorial", - // Svg: require("@site/static/img/svg/youtube_tutorial.svg").default, - // description: ( - // <> - // CodeHarbor provides video tutorials on various topics. Learn from the - // best and improve your coding skills. - // - // ), - // }, - { title: "Website Setup", Svg: require("@site/static/img/svg/website_setup.svg").default, @@ -73,51 +23,6 @@ const FeatureList = [ ), }, - - // { - // title: "Web Development", - // Svg: require("@site/static/img/svg/web_development.svg").default, - // description: ( - // <> - // CodeHarbor provides tutorials on web development. Learn how to build - // websites and web applications. - // - // ), - // }, - - // { - // title: "Wall Post", - // Svg: require("@site/static/img/svg/wall_post.svg").default, - // description: ( - // <> - // CodeHarbor provides a wall post feature. Share your thoughts and ideas - // with the community. - // - // ), - // }, - - // { - // title: "Virtual Assistant", - // Svg: require("@site/static/img/svg/virtual_assistant.svg").default, - // description: ( - // <> - // CodeHarbor provides a virtual assistant to help you with your coding - // problems. Get help from the best. - // - // ), - // }, - - // { - // title: "Usability Testing", - // Svg: require("@site/static/img/svg/usability_testing.svg").default, - // description: ( - // <> - // CodeHarbor provides useability testing for your website. Get feedback - // from the community and improve your website. - // - // ), - // }, - { title: "Website", Svg: require("@site/static/img/svg/website.svg").default, @@ -129,15 +34,6 @@ const FeatureList = [ ), }, - // { - // title: 'Teaching', - // Svg: require('@site/static/img/svg/teaching.svg').default, - // description: ( - // <> - // CodeHarbor provides tutorials on teaching. Learn how to teach and share your knowledge with others. - // - // ), - // }, ]; function Feature({ Svg, title, description }) { diff --git a/src/components/HomepageHero/index.js b/src/components/HomepageHero/index.js index 42cc739f53..c9bf461482 100644 --- a/src/components/HomepageHero/index.js +++ b/src/components/HomepageHero/index.js @@ -1,16 +1,79 @@ -import clsx from "clsx"; -import Heading from "@theme/Heading"; import styles from "./styles.module.css"; +const svgList = [ + { + title: 'discord', + Svg: require('../../static/icons/discord.svg').default, + link: 'https://discord.com/invite/BFkPKMsfuZ', + }, + // { + // title: 'linkedin', + // Svg: require('../../static/icons/linkedin.svg').default, + // color: 'black', + // link: 'https://www.linkedin.com/groups/14232119/', + // }, + { + title: 'whats-app', + Svg: require('../../static/icons/whatsapp.svg').default, + color: 'black', + link: 'https://whatsapp.com/channel/0029VaBbYitJUM2aOYiCd83O', + }, + { + title: 'slack', + Svg: require('../../static/icons/slack.svg').default, + color: '#2979ff', + link: 'https://join.slack.com/t/codemastermindhq/shared_invite/zt-23wom4i3m-FOFl4BLtceOdeVOXQKxfLw', + }, + { + title: 'stackoverflow', + Svg: require('../../static/icons/stack-overflow.svg').default, + color: '#2979ff', + link: 'https://stackoverflow.com/users/18530900/ajay-dhangar', + }, +]; + +const SvgImg = ({Svg, color, link}) => { + return ( + + + + ); +}; + + export default function HomepageHero() { return ( -
-
-
- +
+
+
+

Code Mastery

+

+ Welcome to CodeMastermindHQ. Where innovation meets elegance in web + development. +
+ Join us for the future of coding excellence +

+ + +
+ +
+ HeroImg
); -} \ No newline at end of file +} diff --git a/src/pages/index.js b/src/pages/index.js index f3ca5182e6..971221469a 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -1,58 +1,66 @@ -import clsx from 'clsx'; -import Link from '@docusaurus/Link'; -import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; -import Layout from '@theme/Layout'; -import HomepageFeatures from '@site/src/components/HomepageFeatures'; -import HomepageWelcome from '@site/src/components/HomepageWelcome'; -import CoursesOfferedContent from '@site/src/components/CoursesOfferedContent'; -import FeaturedCourses from '@site/src/components/FeaturedCoursesWrapper'; -import OurInstructors from '@site/src/components/OurInstructors'; -import UpcomingEvents from '@site/src/components/UpcomingEvents'; -import GiscusComponent from '@site/src/components/GiscusComponent'; +import clsx from "clsx"; +import Link from "@docusaurus/Link"; +import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; +import Layout from "@theme/Layout"; +// import HomepageFeatures from '@site/src/components/HomepageFeatures'; +import HomepageWelcome from "@site/src/components/HomepageWelcome"; +import CoursesOfferedContent from "@site/src/components/CoursesOfferedContent"; +import FeaturedCourses from "@site/src/components/FeaturedCoursesWrapper"; +import OurInstructors from "@site/src/components/OurInstructors"; +import UpcomingEvents from "@site/src/components/UpcomingEvents"; +import GiscusComponent from "@site/src/components/GiscusComponent"; -import Heading from '@theme/Heading'; -import styles from './index.module.css'; +import Heading from "@theme/Heading"; +import styles from "./index.module.css"; function HomepageHeader() { - const {siteConfig} = useDocusaurusContext(); + const { siteConfig } = useDocusaurusContext(); return ( -
+
{siteConfig.title} + + {/*

{siteConfig.tagline}

*/} - - {/*
+ {/* */} +
- Documentation - Get Started + to="/docs/intro" + > + Documentation - Get Started -
*/} +
); } export default function Home() { - const {siteConfig} = useDocusaurusContext(); + const { siteConfig } = useDocusaurusContext(); return ( + description="CodeHarbor is a platform for developers to share their knowledge and experience with the community." + > -
- -
- -
- -
- -
- -
-
+
+ {/* */} +
+ +
+
+ +
+
+ +
+
+ +
+ +
diff --git a/src/pages/index.module.css b/src/pages/index.module.css index 17c7174e1a..48b8e318a4 100644 --- a/src/pages/index.module.css +++ b/src/pages/index.module.css @@ -3,7 +3,9 @@ text-align: center; position: relative; overflow: hidden; - background: linear-gradient(90deg, #ff0000 0%, #137e0a 50%, #17e4ff 100%); + background: linear-gradient(90deg, #172800 0%, #539200 35%, #02e41c 100%); + /* background: rgb(2,9,57); */ +/* background: linear-gradient(90deg, rgba(2,9,57,1) 0%, rgba(0,159,255,1) 100%); */ } @media screen and (max-width: 996px) { @@ -12,8 +14,130 @@ } } -/* .buttons { +.buttons { display: flex; align-items: center; justify-content: center; -} */ +} + +.hero { + background-color: #2b3137; + padding: 48px; +} + +.heroInner { + margin: 0 auto; + max-width: 1100px; + padding: 0 20px; +} + +.heroProjectTagline { + color: #fff; + font-size: 60px; + margin: 0; +} + +.heroTitleTextHtml b { + color: var(--ifm-color-primary); +} + +@keyframes jackInTheBox { + from { + opacity: 0; + transform: scale(0.1) rotate(30deg); + transform-origin: center bottom; + } + + 50% { + transform: rotate(-10deg); + } + + 70% { + transform: rotate(3deg); + } + + to { + opacity: 1; + transform: scale(1); + } +} + +.heroLogo { + animation-duration: 2s; + animation-name: jackInTheBox; + float: right; + margin-top: 20px; + padding: 0 20px 20px; +} + +.indexCtas { + display: flex; + align-items: center; + margin-top: 24px; +} + +.indexCtasGetStartedButton { + border: 2px solid var(--ifm-color-primary); + line-height: 1.2em; + text-decoration: none !important; + text-transform: uppercase; + transition: background 0.3s, color 0.3s; + border-radius: 8px; + color: #fff; + font-size: 24px; + font-weight: bold; + padding: 18px 36px; +} + +.indexCtasGitHubButtonWrapper { + display: flex; +} + +.indexCtasGitHubButton { + border: none; + margin-left: 24px; + overflow: hidden; +} + +@media only screen and (max-width: 768px) { + .hero { + padding-left: 20px; + padding-right: 20px; + } + + .heroInner { + padding: 0; + } + + .heroProjectTagline { + font-size: 36px; + text-align: center; + } + + .heroLogo { + display: block; + float: none; + margin: 0 auto; + } + + .indexCtas { + justify-content: center; + } + + .indexCtasGitHubButton { + display: none; + } +} + +.home__divider { + margin: 0 auto; + padding: 0 20px; +} + +.home__divider:nth-child(even) { + background-color: #bc0a9e50; +} + +.home__divider:nth-child(odd) { + background-color: #cefb0850; +} \ No newline at end of file From c9889fa95e09e594785f7c025fcb9da0ca5376c2 Mon Sep 17 00:00:00 2001 From: ajay-dhangar Date: Fri, 1 Mar 2024 21:14:48 +0530 Subject: [PATCH 2/2] update home page --- src/components/HomepageHero/index.js | 79 ------------------- src/components/HomepageHero/styles.module.css | 3 - 2 files changed, 82 deletions(-) delete mode 100644 src/components/HomepageHero/index.js delete mode 100644 src/components/HomepageHero/styles.module.css diff --git a/src/components/HomepageHero/index.js b/src/components/HomepageHero/index.js deleted file mode 100644 index c9bf461482..0000000000 --- a/src/components/HomepageHero/index.js +++ /dev/null @@ -1,79 +0,0 @@ -import styles from "./styles.module.css"; - -const svgList = [ - { - title: 'discord', - Svg: require('../../static/icons/discord.svg').default, - link: 'https://discord.com/invite/BFkPKMsfuZ', - }, - // { - // title: 'linkedin', - // Svg: require('../../static/icons/linkedin.svg').default, - // color: 'black', - // link: 'https://www.linkedin.com/groups/14232119/', - // }, - { - title: 'whats-app', - Svg: require('../../static/icons/whatsapp.svg').default, - color: 'black', - link: 'https://whatsapp.com/channel/0029VaBbYitJUM2aOYiCd83O', - }, - { - title: 'slack', - Svg: require('../../static/icons/slack.svg').default, - color: '#2979ff', - link: 'https://join.slack.com/t/codemastermindhq/shared_invite/zt-23wom4i3m-FOFl4BLtceOdeVOXQKxfLw', - }, - { - title: 'stackoverflow', - Svg: require('../../static/icons/stack-overflow.svg').default, - color: '#2979ff', - link: 'https://stackoverflow.com/users/18530900/ajay-dhangar', - }, -]; - -const SvgImg = ({Svg, color, link}) => { - return ( - - - - ); -}; - - - -export default function HomepageHero() { - return ( -
-
-
-

Code Mastery

-

- Welcome to CodeMastermindHQ. Where innovation meets elegance in web - development. -
- Join us for the future of coding excellence -

- - -
- -
- HeroImg -
-
-
- ); -} diff --git a/src/components/HomepageHero/styles.module.css b/src/components/HomepageHero/styles.module.css deleted file mode 100644 index 5604c24950..0000000000 --- a/src/components/HomepageHero/styles.module.css +++ /dev/null @@ -1,3 +0,0 @@ -.hero_section { - background-color: blue; -} \ No newline at end of file