From 4f7384c43943644b742f4cb5a84ee4a539b8ac9a Mon Sep 17 00:00:00 2001 From: shrey802 Date: Tue, 3 Oct 2023 22:41:53 +0530 Subject: [PATCH 1/4] some changes --- src/CSS/python-basics/intro-to-python.css | 81 +++++++++++++++++++ src/Constants/index.js | 74 ++++++++++++++++- .../Python_Basics/Introduction-to-Python.jsx | 55 ++++++++++++- 3 files changed, 206 insertions(+), 4 deletions(-) create mode 100644 src/CSS/python-basics/intro-to-python.css diff --git a/src/CSS/python-basics/intro-to-python.css b/src/CSS/python-basics/intro-to-python.css new file mode 100644 index 0000000..e338439 --- /dev/null +++ b/src/CSS/python-basics/intro-to-python.css @@ -0,0 +1,81 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&family=Source+Serif+4:opsz,wght@8..60,300&display=swap'); + +/* Global Styles */ +body { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Poppins', sans-serif; + overflow-x: hidden; /* Prevent horizontal scrolling */ +} + +/* Container Styles */ +.container { + max-width: 100%; /* Ensure content fits within the viewport */ + margin-left: -20px; /* Center align the container horizontally */ + padding: 10px; /* Reduced padding */ + +} + +.main-heading { + color: #8800ff; + font-size: 20px; /* Reduced font size */ + margin-bottom: 5px; /* Reduced spacing */ + text-align: center; +} + +.sub-heading { + font-family: 'Source Serif 4', serif; + font-size: 18px; /* Reduced font size */ + font-weight: bolder; + margin-bottom: 3px; /* Reduced spacing */ + color: #000000; +} + +.unordered-list { + list-style-type: circle; + margin-left: 0; + padding-left: 15px; /* Slightly reduced left padding */ + text-align: left; + margin-bottom: 10px; +} + +.unordered-list li { + font-weight: lighter; + color: #000000; + font-size: 12px; /* Reduced font size */ + overflow-wrap: break-word; /* Allow text to wrap */ + text-align: left; +} + +/* Responsive Styles */ +@media screen and (max-width: 768px) { + .main-heading { + font-size: 16px; /* Further reduced font size for smaller screens */ + margin-bottom: 3px; /* Adjusted spacing */ + } + + .sub-heading { + font-size: 14px; /* Further reduced font size for smaller screens */ + margin-bottom: 3px; /* Adjusted spacing */ + } + + .unordered-list li { + font-size: 10px; /* Further reduced font size for smaller screens */ + margin-bottom: 3px; /* Adjusted spacing */ + } + + .container p { + font-size: 10px; /* Reduced font size for paragraphs */ + margin-bottom: 3px; /* Adjusted spacing */ + overflow-wrap: break-word; /* Allow text to wrap */ + text-align: left; + } + + /* Reduce the video iframe size */ + .video-container iframe { + width: 100%; /* Make it full width of container */ + height: auto; /* Automatically adjust the height */ + } +} diff --git a/src/Constants/index.js b/src/Constants/index.js index 9330ed6..093a858 100644 --- a/src/Constants/index.js +++ b/src/Constants/index.js @@ -7,7 +7,46 @@ export const subMenusList = [ { title: "Introduction to Python", name: "Introduction-to-Python", - + }, + { + title: "Install Python", + name: "Install Python", + }, + { + title: "Basic Python Program", + name: "Basic Python Program", + }, + { + title: "Variables & Data types", + name: "Variables & Data Types", + }, + { + title: "Basic Input & Output", + name: "Basic Input & Output", + }, + { + title: "Conditional Statements", + name: "Conditional Statements", + }, + { + title: "Loops", + name: "Loops", + }, + { + title: "Functions", + name: "Functions", + }, + { + title: "Data structures in Python", + name: "Data structures in Python", + }, + { + title: "Modules & Libraries", + name: "Modules & Libraries", + }, + { + title: "Advance Topics", + name: "Advance Topics", } ], }, @@ -33,5 +72,38 @@ export const subMenusList = [ } ], }, + { + name: "Matplotlib-Library", + title: "4. Intro-to-Matplotlib", + children: [ + { + title: "Introduction to Matplotlib", + name: "Introduction-to-Matplotlib", + + } + ], + }, + { + name: "Scikit-Library", + title: "5. Intro-to-Scikit-Learn", + children: [ + { + title: "Introduction to Scikit-Learn", + name: "Introduction-to-Scikit-Learn", + + } + ], + }, + { + name: "Seaborn-Library", + title: "6. Intro-to-Seaborn", + children: [ + { + title: "Introduction to Seaborn", + name: "Introduction to Seaborn", + + } + ], + }, /* remaining contents*/ ]; diff --git a/src/Python_Library_Pages/Python_Basics/Introduction-to-Python.jsx b/src/Python_Library_Pages/Python_Basics/Introduction-to-Python.jsx index 4e1d7ef..a3a9b4a 100644 --- a/src/Python_Library_Pages/Python_Basics/Introduction-to-Python.jsx +++ b/src/Python_Library_Pages/Python_Basics/Introduction-to-Python.jsx @@ -1,11 +1,60 @@ import React from "react"; +import '../../CSS/python-basics/intro-to-python.css'; const PythonBasics = () => { return ( -
-

Introduction to Python

+
+

Introduction to Python

-

Development can start for Python from here

+

Python is a versatile and popular programming language created by Guido van Rossum in 1991. It is widely used for various purposes, including:

+ +
    +
  • Web Development (server-side)
    • +
  • Software Development
    • +
  • Mathematics
    • +
  • System Scripting
    • +
+ +

Key Capabilities of Python

+ +

Python's flexibility and capabilities make it a preferred choice for many developers:

+ +
    +
  • Creating Web Applications
    • +
  • Automating Workflows
    • +
  • Database Connectivity
    • +
  • Data Manipulation and Analysis
    • +
  • Rapid Prototyping
    • +
  • Production-Ready Software Development
    • +
+ +

Why Choose Python?

+ +
    +
  • Multi-Platform Support (Windows, Mac, Linux, Raspberry Pi, etc.)
    • +
  • Simple and Readable Syntax (Similar to English)
    • +
  • Concise Code (Fewer Lines Compared to Other Languages)
    • +
  • Interpreted Language (Quick Prototyping)
    • +
  • Support for Procedural, Object-Oriented, and Functional Programming
    • +
+ +

Learn More About Python

+ +

If you'd like to learn more about Python, here's a video introduction to Python programming:

+ + {/* Embed the YouTube video */} +
+ +
+
+

As you explore this guide, you'll dive deeper into Python's core concepts and practical applications. Whether you're a beginner or an experienced developer, Python offers a wide range of possibilities for your programming journey.

); }; From b6bac3af5ca6c507bed8e290b4590f7ec69d48a9 Mon Sep 17 00:00:00 2001 From: shrey802 Date: Wed, 4 Oct 2023 22:52:57 +0530 Subject: [PATCH 2/4] sidebar issue fixed --- src/CSS/python-basics/intro-to-python.css | 3 +- src/layouts/sidebar/index.jsx | 146 +++++++++------------- 2 files changed, 62 insertions(+), 87 deletions(-) diff --git a/src/CSS/python-basics/intro-to-python.css b/src/CSS/python-basics/intro-to-python.css index e338439..624653f 100644 --- a/src/CSS/python-basics/intro-to-python.css +++ b/src/CSS/python-basics/intro-to-python.css @@ -15,7 +15,8 @@ body { max-width: 100%; /* Ensure content fits within the viewport */ margin-left: -20px; /* Center align the container horizontally */ padding: 10px; /* Reduced padding */ - + max-height: max-content; + overflow-y: scroll; } .main-heading { diff --git a/src/layouts/sidebar/index.jsx b/src/layouts/sidebar/index.jsx index ed41fb1..12ff17d 100644 --- a/src/layouts/sidebar/index.jsx +++ b/src/layouts/sidebar/index.jsx @@ -2,26 +2,15 @@ import { useEffect, useState } from "react"; import { useRef } from "react"; import SubMenu from "./SubMenu"; import { motion } from "framer-motion"; - -// * React icons -import { IoIosArrowBack } from "react-icons/io"; -import { SlSettings } from "react-icons/sl"; -// import {CiSearch } from "react-icons/ci"; -import { BsPerson } from "react-icons/bs"; -import { HiOutlineDatabase } from "react-icons/hi"; -import { TbReportAnalytics } from "react-icons/tb"; -import { RiBuilding3Line } from "react-icons/ri"; import { useMediaQuery } from "react-responsive"; import { MdMenu } from "react-icons/md"; -import { NavLink, useLocation, useRoutes } from "react-router-dom"; import { subMenusList } from "../../Constants"; import Search from "../../Components/Search"; const Sidebar = () => { - let isTabletMid = useMediaQuery({ query: "(max-width: 768px)" }); + const isTabletMid = useMediaQuery({ query: "(max-width: 768px)" }); const [open, setOpen] = useState(isTabletMid ? false : true); const sidebarRef = useRef(); - const { pathname } = useLocation(); useEffect(() => { if (isTabletMid) { @@ -31,101 +20,88 @@ const Sidebar = () => { } }, [isTabletMid]); - useEffect(() => { - isTabletMid && setOpen(false); - }, [pathname]); - const Nav_animation = isTabletMid ? { - open: { - x: 0, - width: "16rem", - transition: { - damping: 40, - }, + open: { + x: 0, + width: "16rem", + transition: { + damping: 40, }, - closed: { - x: -250, - width: 0, - transition: { - damping: 40, - delay: 0.15, - }, + }, + closed: { + x: -250, + width: 0, + transition: { + damping: 40, + delay: 0.15, }, - } + }, + } : { - open: { - width: "24rem", - transition: { - damping: 40, - }, + open: { + width: "24rem", + transition: { + damping: 40, }, - closed: { - width: "4rem", - transition: { - damping: 40, - }, + }, + closed: { + width: "4rem", + transition: { + damping: 40, }, - }; -// subMenusList.map(menu => { -// console.log(menu); -// }) + }, + }; + + const stylesidebar = { + position: "sticky", + top: "0", + "maxHeight": "100vh", + bottom: "0", + }; + return ( -
+
setOpen(false)} - className={`md:hidden fixed inset-0 max-h-screen z-[998] bg-black/50 ${ - open ? "block" : "hidden" - } `} + className={`md:hidden fixed inset-0 max-h-screen z-[998] bg-black/50 ${open ? "block" : "hidden" + }`} >
-
- {/* */} -

LEARN DOCKER

- +
+

LEARN PYTHON

+
- -
-
    - + +
    +
      {(open || isTabletMid) && ( -
      - {/* - Product categories - */} - {subMenusList?.map((data,i) => ( +
      + {subMenusList?.map((data, i) => (
      ))}
      )} -
    {open && ( -
    -
    +
    +

    Clear History

    No-cost $0/month
    - {/*

    - Upgrade -

    */}
    + )}
    { animate={ open ? { - x: 0, - y: 0, - rotate: 0, - } + x: 0, + y: 0, + rotate: 0, + } : { - x: -10, - y: -200, - rotate: 180, - } + x: -10, + y: -200, + rotate: 180, + } } transition={{ duration: 0 }} className="absolute w-fit h-fit md:block z-50 hidden right-2 bottom-3 cursor-pointer" - > - {/* */} - + > -
    setOpen(true)}> +
    setOpen(true)}>
    From e8e491be18e13b5912821899eeae0b7aeb17579b Mon Sep 17 00:00:00 2001 From: shrey802 Date: Wed, 4 Oct 2023 23:28:09 +0530 Subject: [PATCH 3/4] Revert "sidebar issue fixed" This reverts commit b6bac3af5ca6c507bed8e290b4590f7ec69d48a9. --- src/CSS/python-basics/intro-to-python.css | 3 +- src/layouts/sidebar/index.jsx | 146 +++++++++++++--------- 2 files changed, 87 insertions(+), 62 deletions(-) diff --git a/src/CSS/python-basics/intro-to-python.css b/src/CSS/python-basics/intro-to-python.css index 624653f..e338439 100644 --- a/src/CSS/python-basics/intro-to-python.css +++ b/src/CSS/python-basics/intro-to-python.css @@ -15,8 +15,7 @@ body { max-width: 100%; /* Ensure content fits within the viewport */ margin-left: -20px; /* Center align the container horizontally */ padding: 10px; /* Reduced padding */ - max-height: max-content; - overflow-y: scroll; + } .main-heading { diff --git a/src/layouts/sidebar/index.jsx b/src/layouts/sidebar/index.jsx index 12ff17d..ed41fb1 100644 --- a/src/layouts/sidebar/index.jsx +++ b/src/layouts/sidebar/index.jsx @@ -2,15 +2,26 @@ import { useEffect, useState } from "react"; import { useRef } from "react"; import SubMenu from "./SubMenu"; import { motion } from "framer-motion"; + +// * React icons +import { IoIosArrowBack } from "react-icons/io"; +import { SlSettings } from "react-icons/sl"; +// import {CiSearch } from "react-icons/ci"; +import { BsPerson } from "react-icons/bs"; +import { HiOutlineDatabase } from "react-icons/hi"; +import { TbReportAnalytics } from "react-icons/tb"; +import { RiBuilding3Line } from "react-icons/ri"; import { useMediaQuery } from "react-responsive"; import { MdMenu } from "react-icons/md"; +import { NavLink, useLocation, useRoutes } from "react-router-dom"; import { subMenusList } from "../../Constants"; import Search from "../../Components/Search"; const Sidebar = () => { - const isTabletMid = useMediaQuery({ query: "(max-width: 768px)" }); + let isTabletMid = useMediaQuery({ query: "(max-width: 768px)" }); const [open, setOpen] = useState(isTabletMid ? false : true); const sidebarRef = useRef(); + const { pathname } = useLocation(); useEffect(() => { if (isTabletMid) { @@ -20,88 +31,101 @@ const Sidebar = () => { } }, [isTabletMid]); + useEffect(() => { + isTabletMid && setOpen(false); + }, [pathname]); + const Nav_animation = isTabletMid ? { - open: { - x: 0, - width: "16rem", - transition: { - damping: 40, + open: { + x: 0, + width: "16rem", + transition: { + damping: 40, + }, }, - }, - closed: { - x: -250, - width: 0, - transition: { - damping: 40, - delay: 0.15, + closed: { + x: -250, + width: 0, + transition: { + damping: 40, + delay: 0.15, + }, }, - }, - } + } : { - open: { - width: "24rem", - transition: { - damping: 40, + open: { + width: "24rem", + transition: { + damping: 40, + }, }, - }, - closed: { - width: "4rem", - transition: { - damping: 40, + closed: { + width: "4rem", + transition: { + damping: 40, + }, }, - }, - }; - - const stylesidebar = { - position: "sticky", - top: "0", - "maxHeight": "100vh", - bottom: "0", - }; - + }; +// subMenusList.map(menu => { +// console.log(menu); +// }) return ( -
    +
    setOpen(false)} - className={`md:hidden fixed inset-0 max-h-screen z-[998] bg-black/50 ${open ? "block" : "hidden" - }`} + className={`md:hidden fixed inset-0 max-h-screen z-[998] bg-black/50 ${ + open ? "block" : "hidden" + } `} >
    -
    -

    LEARN PYTHON

    - +
    + {/* */} +

    LEARN DOCKER

    +
    - -
    -
      + +
      +
        + {(open || isTabletMid) && ( -
        - {subMenusList?.map((data, i) => ( +
        + {/* + Product categories + */} + {subMenusList?.map((data,i) => (
        ))}
        )} +
      {open && ( -
      -
      +
      +

      Clear History

      No-cost $0/month
      + {/*

      + Upgrade +

      */}
      - )}
      { animate={ open ? { - x: 0, - y: 0, - rotate: 0, - } + x: 0, + y: 0, + rotate: 0, + } : { - x: -10, - y: -200, - rotate: 180, - } + x: -10, + y: -200, + rotate: 180, + } } transition={{ duration: 0 }} className="absolute w-fit h-fit md:block z-50 hidden right-2 bottom-3 cursor-pointer" - > + > + {/* */} + -
      setOpen(true)}> +
      setOpen(true)}>
      From bd41159ded9a1327c05d906427393a165ce9cf9c Mon Sep 17 00:00:00 2001 From: shrey802 Date: Sun, 8 Oct 2023 15:12:41 +0530 Subject: [PATCH 4/4] sidebar issue fixed --- src/layouts/sidebar/index.jsx | 119 +++++++++++++++++----------------- 1 file changed, 61 insertions(+), 58 deletions(-) diff --git a/src/layouts/sidebar/index.jsx b/src/layouts/sidebar/index.jsx index ed41fb1..9a786c4 100644 --- a/src/layouts/sidebar/index.jsx +++ b/src/layouts/sidebar/index.jsx @@ -37,93 +37,96 @@ const Sidebar = () => { const Nav_animation = isTabletMid ? { - open: { - x: 0, - width: "16rem", - transition: { - damping: 40, - }, + open: { + x: 0, + width: "16rem", + transition: { + damping: 40, }, - closed: { - x: -250, - width: 0, - transition: { - damping: 40, - delay: 0.15, - }, + }, + closed: { + x: -250, + width: 0, + transition: { + damping: 40, + delay: 0.15, }, - } + }, + } : { - open: { - width: "24rem", - transition: { - damping: 40, - }, + open: { + width: "24rem", + transition: { + damping: 40, }, - closed: { - width: "4rem", - transition: { - damping: 40, - }, + }, + closed: { + width: "4rem", + transition: { + damping: 40, }, - }; -// subMenusList.map(menu => { -// console.log(menu); -// }) + }, + }; + // subMenusList.map(menu => { + // console.log(menu); + // }) + const styleSidebar = { + "position": "sticky", + "top": "0", + "maxHeight": "100vh" + } return ( -
      +
      setOpen(false)} - className={`md:hidden fixed inset-0 max-h-screen z-[998] bg-black/50 ${ - open ? "block" : "hidden" - } `} + className={`md:hidden fixed inset-0 max-h-screen z-[998] bg-black/50 ${open ? "block" : "hidden" + } `} >
      -
      + overflow-hidden md:relative fixed h-screen "> +
      {/* */} -

      LEARN DOCKER

      - +

      + PyLibLog +

      +
      - +
        - {(open || isTabletMid) && (
        {/* Product categories */} - {subMenusList?.map((data,i) => ( + {subMenusList?.map((data, i) => (
        ))}
        )} -
      {open && ( -
      -
      +
      +
      -

      Clear History

      - No-cost $0/month +

      PyLibLog

      + From The Curious Community
      - {/*

      - Upgrade -

      */}
      )} @@ -135,15 +138,15 @@ const Sidebar = () => { animate={ open ? { - x: 0, - y: 0, - rotate: 0, - } + x: 0, + y: 0, + rotate: 0, + } : { - x: -10, - y: -200, - rotate: 180, - } + x: -10, + y: -200, + rotate: 180, + } } transition={{ duration: 0 }} className="absolute w-fit h-fit md:block z-50 hidden right-2 bottom-3 cursor-pointer" @@ -158,4 +161,4 @@ const Sidebar = () => { ); }; -export default Sidebar; +export default Sidebar; \ No newline at end of file