diff --git a/docusaurus.config.js b/docusaurus.config.js index 774d8a9c1..5ba0d39fe 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -169,10 +169,10 @@ const config = { value: `
Docs
- HTML - CSS - JavaScript - React + HTML + CSS + JavaScript + React TypeScript Python Tailwind diff --git a/src/components/Aboutpage/animations/motionVariants.ts b/src/components/Aboutpage/animations/motionVariants.ts new file mode 100644 index 000000000..4fc647ae8 --- /dev/null +++ b/src/components/Aboutpage/animations/motionVariants.ts @@ -0,0 +1,18 @@ +export const fadeInUp = { + initial: { opacity: 0, y: 60 }, + animate: { opacity: 1, y: 0 }, + transition: { duration: 0.6, ease: "easeOut" }, +}; + +export const staggerChildren = { + animate: { + transition: { + staggerChildren: 0.1, + }, + }, +}; + +export const scaleOnHover = { + whileHover: { scale: 1.05 }, + whileTap: { scale: 0.95 }, +}; diff --git a/src/components/Aboutpage/chart.tsx b/src/components/Aboutpage/chart.tsx deleted file mode 100644 index 8187f965e..000000000 --- a/src/components/Aboutpage/chart.tsx +++ /dev/null @@ -1,171 +0,0 @@ -import React from 'react'; -import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Cell, Legend, ResponsiveContainer, TooltipProps } from 'recharts'; - -const data = [ - { name: 'Community', team: 80 }, - { name: 'Courses', team: 78 }, - { name: 'Tutorials', team: 70 }, - { name: 'Problems', team: 67 }, - { name: 'Solutions', team: 65 } -]; - -const colors = [ - 'rgba(239,216,29,0.9)', - 'rgba(49,105,148,0.9)', - 'rgba(234,140,16,0.9)', - 'rgba(42,1,100,0.9)', - 'rgba(115,119,173,0.9)' -]; - -const CustomTooltip: React.FC> = ({ active, payload, label }) => { - if (active && payload && payload.length) { - return ( -
-

{label}

-
- ); - } - return null; -}; - -const Community: React.FC = () => { - return ( - - - - - - - - - {data.map((entry, index) => ( - - ))} - - - - ); -}; - -const Courses: React.FC = () => { - return ( - - - - - - - - - {data.map((entry, index) => ( - - ))} - - - - ); -}; - -const Tutorials: React.FC = () => { - return ( - - - - - - - - - {data.map((entry, index) => ( - - ))} - - - - ); -}; - -const Problems: React.FC = () => { - return ( - - - - - - - - - {data.map((entry, index) => ( - - ))} - - - - ); -}; - -const Solutions: React.FC = () => { - return ( - - - - - - - - - {data.map((entry, index) => ( - - ))} - - - - ); -}; - -const Chart: React.FC = () => { - return ( - <> -

Join our Dynamic team to learn and succeed.

- - - - - - } /> - - - {data.map((entry, index) => ( - - ))} - - - - - ); -}; - -export { Chart, Community, Courses, Tutorials, Problems, Solutions }; diff --git a/src/components/Aboutpage/data/contributors.ts b/src/components/Aboutpage/data/contributors.ts new file mode 100644 index 000000000..118599325 --- /dev/null +++ b/src/components/Aboutpage/data/contributors.ts @@ -0,0 +1,10 @@ +export const contributors = [ + { name: "Ajay Dhangar", avatar: "https://github.com/ajay-dhangar.png" }, + { + name: "Ishita Mukherjee", + avatar: "https://github.com/Ishitamukherjee2004.png", + }, + { name: "Pavitraa G", avatar: "https://github.com/pavitraag.png" }, + { name: "Sivaprasath", avatar: "https://github.com/sivaprasath2004.png" }, + { name: "Hema Sree", avatar: "https://github.com/Hemav009.png" }, +]; diff --git a/src/components/Aboutpage/data/coreValues.ts b/src/components/Aboutpage/data/coreValues.ts new file mode 100644 index 000000000..5c9380b95 --- /dev/null +++ b/src/components/Aboutpage/data/coreValues.ts @@ -0,0 +1,24 @@ +import { Users, Lightbulb, Globe, TrendingUp } from "lucide-react"; + +export const coreValues = [ + { + icon: Users, + title: "Collaboration", + description: "Learning together, growing together.", + }, + { + icon: Lightbulb, + title: "Innovation", + description: "Embracing new technologies and ideas.", + }, + { + icon: Globe, + title: "Accessibility", + description: "Education for everyone, everywhere.", + }, + { + icon: TrendingUp, + title: "Growth", + description: "Continuous learning and development.", + }, +]; diff --git a/src/components/Aboutpage/data/offerings.ts b/src/components/Aboutpage/data/offerings.ts new file mode 100644 index 000000000..7e1b129f0 --- /dev/null +++ b/src/components/Aboutpage/data/offerings.ts @@ -0,0 +1,35 @@ +import { BookOpen, FolderOpen, Code2, Map, MessageCircle, Zap } from "lucide-react"; + +export const offerings = [ + { + icon: BookOpen, + title: "Interactive Courses", + description: "Comprehensive programming courses for all skill levels.", + }, + { + icon: FolderOpen, + title: "Real-world Projects", + description: "Hands-on projects mirroring industry standards.", + }, + { + icon: Code2, + title: "Code Tutorials", + description: "Step-by-step tutorials on modern technologies.", + }, + { + icon: Map, + title: "Learning Roadmaps", + description: "Structured paths to guide your growth.", + }, + { + icon: MessageCircle, + title: "Vibrant Community", + description: "Collaborate with peers, mentors, and professionals.", + }, + { + icon: Zap, + title: "Quick References", + description: "Cheat sheets for instant access to essentials.", + }, +]; + diff --git a/src/components/Aboutpage/data/teamMembers.ts b/src/components/Aboutpage/data/teamMembers.ts new file mode 100644 index 000000000..781f91098 --- /dev/null +++ b/src/components/Aboutpage/data/teamMembers.ts @@ -0,0 +1,30 @@ +export const teamMembers = [ + { + name: "Ajay Dhangar", + role: "Founder & CEO", + avatar: "https://github.com/ajay-dhangar.png", + social: { + github: "https://github.com/ajay-dhangar", + twitter: "https://twitter.com/CodesWithAjay", + linkedin: "https://linkedin.com/in/ajay-dhangar", + }, + }, + { + name: "Mike Chen", + role: "Community Manager", + avatar: "https://images.pexels.com/photos/2379004/pexels-photo-2379004.jpeg?auto=compress&cs=tinysrgb&w=150&h=150&fit=crop", + social: { github: "#", twitter: "#", linkedin: "#" }, + }, + { + name: "Elena Rodriguez", + role: "Content Creator", + avatar: "https://images.pexels.com/photos/3851253/pexels-photo-3851253.jpeg?auto=compress&cs=tinysrgb&w=150&h=150&fit=crop", + social: { github: "#", twitter: "#", linkedin: "#" }, + }, + { + name: "David Kim", + role: "Technical Mentor", + avatar: "https://images.pexels.com/photos/3756681/pexels-photo-3756681.jpeg?auto=compress&cs=tinysrgb&w=150&h=150&fit=crop", + social: { github: "#", twitter: "#", linkedin: "#" }, + }, +]; diff --git a/src/components/Aboutpage/index.tsx b/src/components/Aboutpage/index.tsx index c09892849..a4682d8a3 100644 --- a/src/components/Aboutpage/index.tsx +++ b/src/components/Aboutpage/index.tsx @@ -1,325 +1,23 @@ -import React from "react"; -import { motion } from "framer-motion"; -import { - Chart, - Community, - Courses, - Tutorials, - Problems, - Solutions, -} from "./chart"; - -const aboutImg = "/img/svg/about_me.svg"; -const ourmission = "/img/svg/our_mission.png"; - -export default function AboutUsSection() { +import HeroSection from "./sections/Hero"; +import MissionVision from "./sections/MissionVision"; +import WhoWeAre from "./sections/WhoWeAre"; +import Offerings from "./sections/Offerings"; +import CoreValues from "./sections/CoreValues"; +import TeamSection from "./sections/TeamSection"; +import CallToAction from "./sections/CallToAction"; + +const About = () => { return ( -
-
-
- -
- -

About Us

- - - Welcome to CodeHarborHub, your go-to destination for quality tech - education. We are a team of passionate developers and tech - enthusiasts who are dedicated to providing the best learning - experience for our students. - - - Our mission is to provide accessible and comprehensive educational - resources to help you achieve your tech goals. Whether you are a - beginner or an experienced developer, we have something for - everyone. - - - With a team of experienced instructors and industry experts, we - offer a diverse range of courses and tutorials to help you stay - ahead in the tech industry. Join us today and start your journey - to becoming a tech pro! - -
- - - About Us - -
- -
- - Our Mission - - -
- -

Our Mission

- - - At Codeharborhub, our mission is to empower every student to - enhance their tech skills and achieve their goals. We are - committed to providing high-quality educational resources that are - accessible to everyone. Our goal is to help you succeed in the - tech industry and build a successful career. - -
-
- -
-
- -

Our Learning Path

- - - We believe in a structured and comprehensive approach to learning. - Our learning path is designed to help you build a strong - foundation in tech and advance your skills. - -

Community

- - Our vibrant community is at the heart of our learning experience - - a place where you can connect with fellow students, share ideas, - and collaborate on projects. Join our community and be a part of - something great! - - -

Courses

- - Our courses are designed to help you learn new skills and stay - updated with the latest technologies. From web development to data - science, we offer a wide range of courses to suit your interests - and career goals. - - -

Tutorials

- - - Our tutorials are a great way to learn new concepts and improve - your skills. Whether you are a beginner or an experienced - developer, our tutorials cover a wide range of topics to help you - grow as a tech professional. - - -

Problems

- - - Our problems section is designed to help you practice your coding - skills and prepare for technical interviews. With a wide range of - problems to choose from, you can challenge yourself and improve - your problem-solving abilities. - - -

Solutions

- - - Our solutions section provides detailed explanations and - step-by-step solutions to help you understand complex problems and - concepts. With our solutions, you can learn new techniques and - improve your problem-solving skills. - -
- -
- - - - - - - - - - -
-
-
-
+
+ + + + + + + +
); -} +}; + +export default About; \ No newline at end of file diff --git a/src/components/Aboutpage/sections/CallToAction.tsx b/src/components/Aboutpage/sections/CallToAction.tsx new file mode 100644 index 000000000..24a55364f --- /dev/null +++ b/src/components/Aboutpage/sections/CallToAction.tsx @@ -0,0 +1,79 @@ +import React from "react"; +import { motion } from "framer-motion"; +import { ArrowRight, Users, Star } from "lucide-react"; +import { contributors } from "../data/contributors"; +import { fadeInUp, scaleOnHover } from "../animations/motionVariants"; + +const CallToAction = () => ( + +
+ +

+ Ready to Start Your +
+ Coding Journey? +

+

+ Join thousands of learners transforming their careers with + CodeHarborHub. Your future in tech starts here. +

+ +
+ + Start Learning Today + + + + + + Join Our Community + +
+ + {/* Contributors */} + +
+ {contributors.map((c, i) => ( + + {c.name} + + ))} +
+
+
+ {[...Array(5)].map((_, i) => ( + + ))} +
+

Trusted by 50,000+ learners

+
+ + +
+ +); + +export default CallToAction; diff --git a/src/components/Aboutpage/sections/CoreValues.tsx b/src/components/Aboutpage/sections/CoreValues.tsx new file mode 100644 index 000000000..e464a2606 --- /dev/null +++ b/src/components/Aboutpage/sections/CoreValues.tsx @@ -0,0 +1,60 @@ +import React from "react"; +import { motion } from "framer-motion"; +import { coreValues } from "../data/coreValues"; +import { fadeInUp, staggerChildren } from "../animations/motionVariants"; + +const CoreValues = () => ( + +
+ +

+ Our Core Values +

+

+ The principles that guide everything we do +

+ + + + {coreValues.map((value, index) => { + const Icon = value.icon; + return ( + + +
+ +
+ +

+ {value.title} +

+

{value.description}

+ + ); + })} + +
+ +); + +export default CoreValues; diff --git a/src/components/Aboutpage/sections/Hero.tsx b/src/components/Aboutpage/sections/Hero.tsx new file mode 100644 index 000000000..e3d9f50cf --- /dev/null +++ b/src/components/Aboutpage/sections/Hero.tsx @@ -0,0 +1,54 @@ +import React from "react"; +import { motion } from "framer-motion"; +import { Code2, Users, Rocket, BookOpen } from "lucide-react"; +import { fadeInUp } from "../animations/motionVariants"; + +const Hero = () => ( + +
+ + + + + Welcome to CodeHarborHub + + + +

+ About CodeHarborHub +

+

+ Empowering Learners, Building Future Innovators +

+ + +
+ {[Code2, Users, Rocket, BookOpen].map((Icon, index) => ( + + + + ))} +
+
+ +); + +export default Hero; diff --git a/src/components/Aboutpage/sections/MissionVision.tsx b/src/components/Aboutpage/sections/MissionVision.tsx new file mode 100644 index 000000000..f1f77fda1 --- /dev/null +++ b/src/components/Aboutpage/sections/MissionVision.tsx @@ -0,0 +1,81 @@ +import React from "react"; +import { motion } from "framer-motion"; +import { Target, Rocket } from "lucide-react"; +import { fadeInUp } from "../animations/motionVariants"; + +const MissionVision = () => { + return ( + +
+ +

+ Our Mission & Vision +

+

+ Driven by purpose, guided by innovation +

+ + +
+ {/* Mission */} + +
+
+
+ +
+

+ Our Mission +

+
+

+ To democratize quality programming education by providing + accessible, comprehensive, and practical learning resources + that empower individuals to transform their careers and + contribute to the tech community. +

+
+ + + {/* Vision */} + +
+
+
+ +
+

+ Our Vision +

+
+

+ To become the world’s most trusted platform for learning + programming, fostering a global community where knowledge is + shared freely and every learner has the opportunity to reach + their full potential. +

+
+ +
+
+ + ); +}; + +export default MissionVision; \ No newline at end of file diff --git a/src/components/Aboutpage/sections/Offerings.tsx b/src/components/Aboutpage/sections/Offerings.tsx new file mode 100644 index 000000000..57f4b20db --- /dev/null +++ b/src/components/Aboutpage/sections/Offerings.tsx @@ -0,0 +1,57 @@ +import React from "react"; +import { motion } from "framer-motion"; +import { offerings } from "../data/offerings"; +import { fadeInUp, scaleOnHover, staggerChildren } from "../animations/motionVariants"; + +const Offerings = () => ( + +
+ +

+ What We Offer +

+

+ Comprehensive resources designed to accelerate your learning journey +

+ + + + {offerings.map((item, index) => { + const Icon = item.icon; + return ( + +
+
+ +
+

+ {item.title} +

+

{item.description}

+
+ + ); + })} + +
+ +); + +export default Offerings; diff --git a/src/components/Aboutpage/sections/TeamSection.tsx b/src/components/Aboutpage/sections/TeamSection.tsx new file mode 100644 index 000000000..3d7764a8b --- /dev/null +++ b/src/components/Aboutpage/sections/TeamSection.tsx @@ -0,0 +1,70 @@ +import React from "react"; +import { motion } from "framer-motion"; +import { Github, Twitter, Linkedin } from "lucide-react"; +import { teamMembers } from "../data/teamMembers"; +import { fadeInUp, staggerChildren } from "../animations/motionVariants"; + +const TeamSection = () => ( + +
+ +

+ Meet Our Team +

+

+ Passionate educators and developers dedicated to your success +

+ + + + {teamMembers.map((member, index) => ( + +
+ {member.name} +
+

+ {member.name} +

+

+ {member.role} +

+ + + ))} + +
+ +); + +export default TeamSection; diff --git a/src/components/Aboutpage/sections/WhoWeAre.tsx b/src/components/Aboutpage/sections/WhoWeAre.tsx new file mode 100644 index 000000000..a62f5fc0f --- /dev/null +++ b/src/components/Aboutpage/sections/WhoWeAre.tsx @@ -0,0 +1,71 @@ +import React from "react"; +import { motion } from "framer-motion"; +import { Code2 } from "lucide-react"; +import { fadeInUp } from "../animations/motionVariants"; + +const WhoWeAre = () => { + return ( + +
+ {/* Text */} + +

+ Who We Are +

+
+

+ CodeHarborHub was founded with one vision: everyone deserves access + to high-quality programming education. Built by passionate developers + and educators, we aim to bridge the gap between learning and real-world + industry skills. +

+

+ Our community welcomes learners from all backgrounds — from complete + beginners taking their first step to seasoned professionals refining + their craft. +

+

+ What sets us apart? A commitment to hands-on learning, open-source + collaboration, and building real-world projects that truly make a + difference. +

+
+ + + {/* Animated Graphic */} + +
+
+ +
+ +
+

+ Empowering Learners Worldwide +

+ +
+
+ +
+ + ); +}; + +export default WhoWeAre; diff --git a/src/components/DSA/arrays/ArrayVisualizations/index.tsx b/src/components/DSA/arrays/ArrayVisualizations/index.tsx deleted file mode 100644 index 1212809c8..000000000 --- a/src/components/DSA/arrays/ArrayVisualizations/index.tsx +++ /dev/null @@ -1,107 +0,0 @@ -import React, { useState, useEffect } from "react"; - -const ArrayVisualizations: React.FC = () => { - const [array, setArray] = useState([]); - const [delay, setDelay] = useState(300); - const [minIndex, setMinIndex] = useState(null); - const [isDisabled, setIsDisabled] = useState(false); - const [currentIndex, setCurrentIndex] = useState(null); - const [isSorting, setIsSorting] = useState(false); - - useEffect(() => { - generateArray(); - }, []); - - const generateArray = () => { - const newArray = Array.from( - { length: 12 }, - () => Math.ceil(Math.random() * 90) + 10 - ); - setArray(newArray); - }; - - const findLowest = async () => { - setIsDisabled(true); - setIsSorting(true); - let minVal = array[0]; - let minIdx = 0; - for (let j = 1; j < array.length; j++) { - setCurrentIndex(j); - if (array[j] < minVal) { - minVal = array[j]; - minIdx = j; - } - await new Promise((resolve) => setTimeout(resolve, delay)); - } - setMinIndex(minIdx); - setIsSorting(false); - setIsDisabled(false); - }; - - const resetArray = () => { - generateArray(); - setMinIndex(null); - }; - - return ( -
-
-

- Speed:{" "} - setDelay(Number(e.target.value))} - className="ml-2" - /> -

-
- - -
-
-

- Lowest value of{" "} - - [ - {array.map( - (value, index) => - `${value}${index === array.length - 1 ? "" : ", "}` - )} - ]{" "} - - :   - - {minIndex !== null ? array[minIndex] : null} - -

-
- {array.map((value, index) => ( -
- ))} -
-
- ); -}; - -export default ArrayVisualizations; diff --git a/src/components/DSA/arrays/BubbleSortVisualization/BubbleSortVisualization.css b/src/components/DSA/arrays/BubbleSortVisualization/BubbleSortVisualization.css deleted file mode 100644 index 80407e7ab..000000000 --- a/src/components/DSA/arrays/BubbleSortVisualization/BubbleSortVisualization.css +++ /dev/null @@ -1,24 +0,0 @@ -.bubble-sort-visualization { - padding: 20px; - border: 1px solid #3498db; - border-radius: 5px; - } - - .array-container { - display: flex; - justify-content: center; - align-items: flex-end; - height: 300px; - } - - .array-bar { - width: 20px; - margin: 0 2px; - background-color: #3498db; - transition: height 0.3s, background-color 0.3s; /* Added background-color transition */ - } - - .array-bar.comparing { - background-color: yellow; - } - \ No newline at end of file diff --git a/src/components/DSA/arrays/BubbleSortVisualization/index.tsx b/src/components/DSA/arrays/BubbleSortVisualization/index.tsx deleted file mode 100644 index cdc72f11a..000000000 --- a/src/components/DSA/arrays/BubbleSortVisualization/index.tsx +++ /dev/null @@ -1,101 +0,0 @@ -import React, { useState, useEffect } from 'react'; -import './BubbleSortVisualization.css'; - -/** - * BubbleSortVisualization Component - * This component visualizes the Bubble Sort algorithm. - * - * @returns {JSX.Element} The rendered component - */ -const BubbleSortVisualization: React.FC = () => { - // State to store the array of numbers to be sorted - const [array, setArray] = useState([]); - // State to control the delay for visualization speed - const [delay, setDelay] = useState(200); - // State to indicate if sorting is in progress - const [isSorting, setIsSorting] = useState(false); - // State to store the indices of elements being compared - const [comparingIndices, setComparingIndices] = useState([]); - - // Effect to generate a new array when the component mounts - useEffect(() => { - generateArray(); - }, []); - - // Effect to update the CSS transition duration when the delay changes - useEffect(() => { - updateMoveDuration(); - }, [delay]); - - /** - * Generates a new array of random numbers and updates the state. - */ - const generateArray = () => { - const newArray = Array.from({ length: 50 }, () => Math.ceil(Math.random() * 100)); - setArray(newArray); - }; - - /** - * Updates the CSS transition duration for the sorting visualization. - */ - const updateMoveDuration = () => { - const stylesheets = document.styleSheets; - for (let i = 0; i < stylesheets.length; i++) { - const rules = (stylesheets[i] as CSSStyleSheet).cssRules || (stylesheets[i] as CSSStyleSheet).rules; - for (let j = 0; j < rules.length; j++) { - if ((rules[j] as CSSStyleRule).selectorText === '.v-move') { - (rules[j] as CSSStyleRule).style.transitionDuration = `${delay}ms`; - break; - } - } - } - }; - - /** - * Performs the Bubble Sort algorithm on the array with visualization. - */ - const bubbleSort = async () => { - setIsSorting(true); - let tempArray = [...array]; - for (let i = 0; i < tempArray.length - 1; i++) { - for (let j = 0; j < tempArray.length - i - 1; j++) { - setComparingIndices([j, j + 1]); - await new Promise(resolve => setTimeout(resolve, delay)); - if (tempArray[j] > tempArray[j + 1]) { - let temp = tempArray[j]; - tempArray[j] = tempArray[j + 1]; - tempArray[j + 1] = temp; - setArray([...tempArray]); - } - } - } - setComparingIndices([]); - setIsSorting(false); - }; - - return ( -
-

- Speed: setDelay(Number(e.target.value))} /> -

- -   - -

-

- Instructions: Click the "Sort" button to visualize the Bubble Sort algorithm. You can also adjust the speed of the visualization using the slider. -

-
- {array.map((value, index) => ( -
- ))} -
-
- ); -}; - -export default BubbleSortVisualization; diff --git a/src/components/DSA/arrays/InsertionSortVisualization/index.tsx b/src/components/DSA/arrays/InsertionSortVisualization/index.tsx deleted file mode 100644 index 5b58e9920..000000000 --- a/src/components/DSA/arrays/InsertionSortVisualization/index.tsx +++ /dev/null @@ -1,94 +0,0 @@ -import React, { useState, useEffect } from 'react'; -import './style.css'; - -const InsertionSortVisualization: React.FC = () => { - // State variables - const [array, setArray] = useState([]); // Holds the array of numbers - const [delay, setDelay] = useState(300); // Controls the delay for visualization - const [minIndex, setMinIndex] = useState(null); // Index of the last inserted position - const [currentIndex, setCurrentIndex] = useState(null); // Current index being evaluated - const [isSorting, setIsSorting] = useState(false); // Indicates if the array is being sorted - - // Generates a new array when the component mounts - useEffect(() => { - generateArray(); - }, []); - - // Updates the transition duration whenever the delay changes - useEffect(() => { - updateMoveDuration(); - }, [delay]); - - // Function to generate a new array with random values - const generateArray = () => { - const newArray = Array.from({ length: 40 }, () => Math.ceil(Math.random() * 90) + 10); - setArray(newArray); - }; - - // Function to update the transition duration for CSS animations - const updateMoveDuration = () => { - const stylesheets = document.styleSheets; - for (const stylesheet of stylesheets) { - const rules = (stylesheet as CSSStyleSheet).cssRules; - for (const rule of rules) { - if ((rule as CSSStyleRule).selectorText === '.v-move') { - (rule as CSSStyleRule).style.transitionDuration = `${delay}ms`; - break; - } - } - } - }; - - // Function to perform insertion sort on the array - const insertionSort = async () => { - setIsSorting(true); - for (let i = 1; i < array.length; i++) { - let key = array[i]; - let j = i - 1; - setCurrentIndex(i); - while (j >= 0 && array[j] > key) { - await delayFunction(delay); - array[j + 1] = array[j]; - setArray([...array]); - j = j - 1; - } - array[j + 1] = key; - setArray([...array]); - setMinIndex(j + 1); - } - setIsSorting(false); - }; - - // Function to reset the array to new random values - const resetArray = () => { - generateArray(); - setMinIndex(null); - setCurrentIndex(null); - }; - - // Helper function to create a delay - const delayFunction = (ms: number) => { - return new Promise(resolve => setTimeout(resolve, ms)); - }; - - return ( -
-

Speed: setDelay(Number(e.target.value))} />

- -   - -

-
- {array.map((value, index) => ( -
- ))} -
-
- ); -}; - -export default InsertionSortVisualization; diff --git a/src/components/DSA/arrays/InsertionSortVisualization/style.css b/src/components/DSA/arrays/InsertionSortVisualization/style.css deleted file mode 100644 index b4044250b..000000000 --- a/src/components/DSA/arrays/InsertionSortVisualization/style.css +++ /dev/null @@ -1,36 +0,0 @@ -.insertion-sort-visualization { - padding: 20px; - border: 1px solid #3498db; - border-radius: 5px; -} - -.insertion-sort-visualization button { - margin: 5px; - padding: 5px 10px; - font-size: 16px; - border-radius: 0.5; - cursor: pointer; -} - -.insertion-sort-visualization button:disabled { - opacity: 0.5; - cursor: not-allowed; -} - -.insertion-sort-visualization .array-bar { - width: 15px; - margin: 0 2px; - background-color: #4caf50; - display: inline-block; - transition: background-color 0.3s ease-in-out; - border-top-left-radius: 0.2rem; - border-top-right-radius: 0.2rem; -} - -.insertion-sort-visualization .array-bar.current-index { - background-color: #2196f3; -} - -.insertion-sort-visualization .array-bar.min-index { - background-color: #ffeb3b; -} diff --git a/src/components/DSA/arrays/SelectionSortVisualization/SelectionSortVisualization.css b/src/components/DSA/arrays/SelectionSortVisualization/SelectionSortVisualization.css deleted file mode 100644 index 61c35fa0f..000000000 --- a/src/components/DSA/arrays/SelectionSortVisualization/SelectionSortVisualization.css +++ /dev/null @@ -1,24 +0,0 @@ -.selection-sort-visualization { - padding: 20px; - border: 1px solid #3498db; - border-radius: 5px; - } - - .array-container { - display: flex; - justify-content: center; - align-items: flex-end; - height: 300px; - } - - .array-bar { - width: 20px; - margin: 0 2px; - background-color: #3498db; - transition: height 0.3s, background-color 0.3s; /* Added background-color transition */ - } - - .array-bar.comparing { - background-color: yellow; - } - \ No newline at end of file diff --git a/src/components/DSA/arrays/SelectionSortVisualization/index.tsx b/src/components/DSA/arrays/SelectionSortVisualization/index.tsx deleted file mode 100644 index 4cdd51987..000000000 --- a/src/components/DSA/arrays/SelectionSortVisualization/index.tsx +++ /dev/null @@ -1,102 +0,0 @@ -import React, { useState, useEffect } from 'react'; -import './SelectionSortVisualization.css'; - -/** - * SelectionSortVisualization Component - * This component visualizes the Selection Sort algorithm. - * - * @returns {JSX.Element} The rendered component - */ -const SelectionSortVisualization: React.FC = () => { - // State to store the array of numbers to be sorted - const [array, setArray] = useState([]); - // State to control the delay for visualization speed - const [delay, setDelay] = useState(300); - // State to indicate if sorting is in progress - const [isSorting, setIsSorting] = useState(false); - // State to store the indices of elements being compared - const [comparingIndices, setComparingIndices] = useState([]); - - // Effect to generate a new array when the component mounts - useEffect(() => { - generateArray(); - }, []); - - // Effect to update the CSS transition duration when the delay changes - useEffect(() => { - updateMoveDuration(); - }, [delay]); - - /** - * Generates a new array of random numbers and updates the state. - */ - const generateArray = () => { - const newArray = Array.from({ length: 30 }, () => Math.ceil(Math.random() * 100)); - setArray(newArray); - }; - - /** - * Updates the CSS transition duration for the sorting visualization. - */ - const updateMoveDuration = () => { - const stylesheets = document.styleSheets; - for (let i = 0; i < stylesheets.length; i++) { - const rules = (stylesheets[i] as CSSStyleSheet).cssRules || (stylesheets[i] as CSSStyleSheet).rules; - for (let j = 0; j < rules.length; j++) { - if ((rules[j] as CSSStyleRule).selectorText === '.v-move') { - (rules[j] as CSSStyleRule).style.transitionDuration = `${delay}ms`; - break; - } - } - } - }; - - /** - * Performs the Selection Sort algorithm on the array with visualization. - */ - const selectionSort = async () => { - setIsSorting(true); - let tempArray = [...array]; - for (let i = 0; i < tempArray.length - 1; i++) { - let minIndex = i; - for (let j = i + 1; j < tempArray.length; j++) { - setComparingIndices([minIndex, j]); - await new Promise(resolve => setTimeout(resolve, delay)); - if (tempArray[j] < tempArray[minIndex]) { - minIndex = j; - } - } - if (minIndex !== i) { - let temp = tempArray[i]; - tempArray[i] = tempArray[minIndex]; - tempArray[minIndex] = temp; - setArray([...tempArray]); - } - } - setComparingIndices([]); - setIsSorting(false); - }; - - return ( -
-

- Speed: setDelay(Number(e.target.value))} /> -

- -   - -

-
- {array.map((value, index) => ( -
- ))} -
-
- ); -}; - -export default SelectionSortVisualization; diff --git a/src/components/TutorialAuthors/index.tsx b/src/components/TutorialAuthors/index.tsx deleted file mode 100644 index e260a3e2f..000000000 --- a/src/components/TutorialAuthors/index.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from "react"; - -export default function TutorialAuthors({ names }) { - const authors = names.split(","); - return ( -
- {authors.length > 1 ? "Authors: " : "Author: "} - {authors.map((author, idx) => { - return ( - - {author} - - ); - })} -
- ); -} diff --git a/src/theme/Blog/Pages/BlogAuthorsPostsPage/index.js b/src/theme/Blog/Pages/BlogAuthorsPostsPage/index.js deleted file mode 100644 index 83122954b..000000000 --- a/src/theme/Blog/Pages/BlogAuthorsPostsPage/index.js +++ /dev/null @@ -1,72 +0,0 @@ -import React from 'react' -import clsx from 'clsx' -import { PageMetadata, HtmlClassNameProvider, ThemeClassNames } from '@docusaurus/theme-common' -import { - useBlogAuthorPageTitle, - BlogAuthorsListViewAllLabel -} from '@docusaurus/theme-common/internal' -import Link from '@docusaurus/Link' -import { useBlogMetadata } from '@docusaurus/plugin-content-blog/client' -import BlogLayout from '@theme/BlogLayout' -import BlogListPaginator from '@theme/BlogListPaginator' -import SearchMetadata from '@theme/SearchMetadata' -import BlogPostItems from '@theme/BlogPostItems' -import Author from '@theme/Blog/Components/Author' -import Head from "@docusaurus/Head"; - -function Metadata({ author }) { - const title = useBlogAuthorPageTitle(author) - return ( - <> - - - - ) -} - -function ViewAllAuthorsLink() { - const { authorsListPath } = useBlogMetadata() - return ( - - - - ) -} - -function Content({ author, items, sidebar, listMetadata }) { - return ( - -
- - {author.description &&

{author.description}

} - -
- - - - ) -} - -export default function BlogAuthorsPostsPage(props) { - return ( - - -