diff --git a/src/components/Aboutpage/chart.tsx b/src/components/Aboutpage/chart.tsx index d01b51e49..090c059eb 100644 --- a/src/components/Aboutpage/chart.tsx +++ b/src/components/Aboutpage/chart.tsx @@ -3,198 +3,171 @@ import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Cell, Legend, Resp const data = [ { name: 'Community', team: 80 }, - { name: 'Courses', team: 78 }, - { name: 'Tutorials', team: 70 }, - { name: 'Problems', team: 67 }, - { name: 'Solutions', team: 65 } + { 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)' + '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 = ({ active, payload, label }) => { - if (active && payload && payload.length) { - return ( -
-

{label}

-
- ); - } - return null; +import { TooltipProps } from 'recharts'; + +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) => ( - - ))} - - - + + + + + + + + + {data.map((entry, index) => ( + + ))} + + + ); - }; +}; - const Courses: React.FC = () => { +const Courses: React.FC = () => { return ( - - - - - - - - - {data.map((entry, index) => ( - - ))} - - - + + + + + + + + + {data.map((entry, index) => ( + + ))} + + + ); - }; +}; - const Tutorials: React.FC = () => { +const Tutorials: React.FC = () => { return ( - - - - - - - - - {data.map((entry, index) => ( - - ))} - - - + + + + + + + + + {data.map((entry, index) => ( + + ))} + + + ); - }; - const Problems: React.FC = () => { +}; + +const Problems: React.FC = () => { return ( - - - - - - - - - {data.map((entry, index) => ( - - ))} - - - + + + + + + + + + {data.map((entry, index) => ( + + ))} + + + ); - }; - const Solutions: React.FC = () => { +}; + +const Solutions: React.FC = () => { return ( - - - - - - - - - {data.map((entry, index) => ( - - ))} - - - + + + + + + + + + {data.map((entry, index) => ( + + ))} + + + ); - }; +}; + const Chart: React.FC = () => { - return ( - <> -

Join our Dynamic team to learn and success of our .

- - - - - - } /> - - - {data.map((entry, index) => ( - - ))} - - - - - ); + return ( + <> +

Join our Dynamic team to learn and succeed.

+ + + + + + } /> + + + {data.map((entry, index) => ( + + ))} + + + + + ); }; -export { Chart,Community,Courses,Tutorials,Problems,Solutions}; +export { Chart, Community, Courses, Tutorials, Problems, Solutions }; diff --git a/src/components/Aboutpage/index.tsx b/src/components/Aboutpage/index.tsx index f032b1fd0..e126bff63 100644 --- a/src/components/Aboutpage/index.tsx +++ b/src/components/Aboutpage/index.tsx @@ -1,324 +1,324 @@ import React from "react"; -import clsx from "clsx"; -import Heading from "@theme/Heading"; -import styles from "./styles.module.css"; import { motion } from "framer-motion"; -import {Chart,Community,Courses,Tutorials,Problems,Solutions} from "./chart"; -const ourmission= "/img/svg/our_mission.png"; +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() { return ( -
-
-
-
- - About Us +
+
+
+ +
+ +

About Us

 - Welcome to Code Harbor Hub, your go-to destination for quality tech education. At Code Harbor Hub, we are passionate about empowering individuals with the knowledge and skills needed to thrive in the ever-evolving world of technology. + initial={{ opacity: 0, y: -150 }} + whileInView={{ opacity: 1, y: 0 }} + viewport={{ once: true }} + transition={{ + duration: 1, + type: "spring", + stiffness: 100, + delay: 0.5, + }} + className="text-lg mb-4" + > + 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 learners of all levels, from beginners to advanced professionals. Whether you're looking to kickstart your career in web development, master a new programming language, or stay updated on the latest tech trends, we've got you covered. + initial={{ opacity: 0, y: -150 }} + whileInView={{ opacity: 1, y: 0 }} + viewport={{ once: true }} + transition={{ + duration: 1, + type: "spring", + stiffness: 100, + delay: 0.5, + }} + className="text-lg mb-4" + > + 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 learning paths tailored to meet your specific goals and interests. Join our community today and embark on your journey towards success in the tech industry! + initial={{ opacity: 0, y: -150 }} + whileInView={{ opacity: 1, y: 0 }} + viewport={{ once: true }} + transition={{ + duration: 1, + type: "spring", + stiffness: 100, + delay: 0.5, + }} + className="text-lg mb-4" + > + 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!
+ - {/* Placeholder for an about us image */} - About Us - + initial={{ scale: 0, y: -150 }} + whileInView={{ scale: 0.8, y: 0 }} + viewport={{ once: true }} + transition={{ + duration: 1, + type: "spring", + stiffness: 100, + delay: 0.5, + }} + className="flex justify-center" + > + About Us +
-
- - {/* Placeholder for an about us image */} - About Us - -
+ +
+ + Our Mission + + +
- Our Mission + initial={{ opacity: 0, x: -150 }} + whileInView={{ opacity: 1, x: 0 }} + viewport={{ once: true }} + transition={{ + duration: 1, + type: "spring", + stiffness: 100, + delay: 0.2, + }} + > +

Our Mission

 - At Codeharborhub, our mission is to empower every student to enhance their career opportunities and achieve their goals. We are committed to providing high-quality educational resources and courses that foster growth, learning, and success. Through our comprehensive and engaging curriculum, we aim to equip students with the knowledge and skills they need to excel in their chosen fields. Our goal is to create a supportive and inclusive learning environment that inspires and motivates students to reach their full potential. Together, we strive to make a positive impact on the future of education and the professional success of our learners. - -
+ initial={{ opacity: 0, y: -150 }} + whileInView={{ opacity: 1, y: 0 }} + viewport={{ once: true }} + transition={{ + duration: 1, + type: "spring", + stiffness: 100, + delay: 0.5, + }} + className="text-lg mb-4" + > + 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 + +
+
+ +

Our Learning Path

 -we believe in a structured and comprehensive approach to learning. Our learning paths are meticulously designed to guide you through a progressive journey, ensuring you master the skills you need. Each path is tailored to different levels of expertise, from beginners to advanced learners, with a blend of theoretical knowledge and practical experience. - - Community - -Our vibrant community is at the heart of our learning experience. Join a diverse group of learners, educators, and industry professionals who are passionate about sharing knowledge and helping each other grow. Participate in discussions, share your progress, ask questions, and get feedback. Our community is here to support you every step of the way. - - Courses - -Our courses are crafted by industry experts and experienced educators to provide you with in-depth knowledge and practical skills. Each course is divided into easily digestible modules, allowing you to learn at your own pace. From foundational concepts to advanced techniques, our courses cover a wide range of topics to cater to your learning needs. + initial={{ opacity: 0, y: -150 }} + whileInView={{ opacity: 1, y: 0 }} + viewport={{ once: true }} + transition={{ + duration: 1, + type: "spring", + stiffness: 100, + delay: 0.5, + }} + className="text-lg mb-4" + > + 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! + - - Tutorials - -Dive into our extensive library of tutorials designed to help you understand specific concepts and tools. Whether you're looking to master a programming language, learn a new framework, or understand a complex algorithm, our tutorials offer step-by-step guidance to help you achieve your goals. +

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. + - - Problems +

Solutions

- -Challenge yourself with our collection of problems designed to test your understanding and improve your problem-solving skills. Our problems range from beginner to advanced levels, covering various topics and difficulty levels. Each problem comes with detailed instructions and hints to help you along the way. + + 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. + +
- - Solutions - -Learn from detailed solutions provided for each problem. Our solutions not only give you the correct answer but also explain the thought process and logic behind them. This helps you understand different approaches to solving problems and enhances your critical thinking skills. - -
-
+
- - - - - - - - - - - - - - - -
-
+ initial={{ opacity: 0, x: -150 }} + whileInView={{ opacity: 1, x: 0 }} + viewport={{ once: true }} + transition={{ + duration: 1, + type: "spring", + stiffness: 100, + delay: 0.2, + }} + > + + + + + + + + + +
+
); diff --git a/src/components/Aboutpage/styles.module.css b/src/components/Aboutpage/styles.module.css deleted file mode 100644 index 053815785..000000000 --- a/src/components/Aboutpage/styles.module.css +++ /dev/null @@ -1,3 +0,0 @@ -.aboutUsSection { - padding: 50px 0; -} \ No newline at end of file diff --git a/src/components/AdsComponent/index.tsx b/src/components/AdsComponent/index.tsx index b93cac133..806123acb 100644 --- a/src/components/AdsComponent/index.tsx +++ b/src/components/AdsComponent/index.tsx @@ -1,7 +1,13 @@ import React, { useEffect } from "react"; import Head from "@docusaurus/Head"; -const AdsComponent = () => { +declare global { + interface Window { + adsbygoogle: any[]; + } +} + +const AdsComponent: React.FC = () => { useEffect(() => { try { (window.adsbygoogle = window.adsbygoogle || []).push({}); diff --git a/src/components/Author/index.tsx b/src/components/Author/index.tsx index 82da41230..fe2354ed4 100644 --- a/src/components/Author/index.tsx +++ b/src/components/Author/index.tsx @@ -1,48 +1,9 @@ import React, { useState, useEffect } from 'react'; -import styled from 'styled-components'; interface AuthorProps { username: string; } -const AuthorContainer = styled.div` - display: flex; - align-items: center; - margin-bottom: 1rem; -`; - -const AuthorLink = styled.a` - text-decoration: none; - color: inherit; - display: flex; - align-items: center; - - &:hover { - opacity: 0.8; - } -`; - -const Avatar = styled.img` - width: 50px; - height: 50px; - border-radius: 50%; - margin-right: 10px; -`; - -const AuthorName = styled.span` - font-weight: bold; -`; - -const Loading = styled.div` - font-style: italic; - color: #666; -`; - -const Error = styled.div` - color: red; - font-weight: bold; -`; - const Author: React.FC = ({ username }) => { const [authorData, setAuthorData] = useState(null); const [isLoading, setIsLoading] = useState(true); @@ -50,38 +11,47 @@ const Author: React.FC = ({ username }) => { useEffect(() => { fetch(`https://api.github.com/users/${username}`) - .then(response => { + .then((response) => { if (!response.ok) { throw new Error('Failed to fetch author data'); } return response.json(); }) - .then(data => { + .then((data) => { setAuthorData(data); setIsLoading(false); }) - .catch(error => { + .catch((error) => { setError(error.message); setIsLoading(false); }); }, [username]); if (isLoading) { - return Loading...; + return
Loading...
; } if (error) { - return Error: {error}; + return
Error: {error}
; } return ( - - - - {authorData.name || authorData.login} - - + ); }; -export default Author; \ No newline at end of file +export default Author; diff --git a/src/components/CareerPage/index.tsx b/src/components/CareerPage/index.tsx index a290679b7..55b8c3be1 100644 --- a/src/components/CareerPage/index.tsx +++ b/src/components/CareerPage/index.tsx @@ -1,7 +1,6 @@ import React, { useState, useEffect } from "react"; import { motion } from "framer-motion"; import Link from "@docusaurus/Link"; -import "./styles.css"; import careersData, { CareerCardProps } from "../../data/careersData"; const CareerCard: React.FC = ({ @@ -17,39 +16,40 @@ const CareerCard: React.FC = ({ }) => { return ( -
- {title} +
+ {title}
-
-

{title}

-

{description}

+
+

{title}

+

{description}

-
-
+
+ {/*

- Duration: {duration}{" "} + Duration: {duration}

- Location: {location}{" "} + Location: {location}

- Category: {category}{" "} + Category: {category}

- {/*
- Tags: - {tags.map((tag, index) => ( - - {tag} - - ))} -
*/} -
- +
*/} + Learn More
@@ -93,37 +93,41 @@ const CareerPage: React.FC = () => { }; return ( -
-

Career Opportunities for You

-
-

+

+

+ Career Opportunities for You +

+
+

We are looking for talented individuals to join our team. Check out the available career opportunities below and apply now.

-
-
- - -
+
+ +
-
+
{filteredCareers.map((career) => ( ))} diff --git a/src/components/CareerPage/styles.css b/src/components/CareerPage/styles.css deleted file mode 100644 index 0c8e70126..000000000 --- a/src/components/CareerPage/styles.css +++ /dev/null @@ -1,141 +0,0 @@ -.career-page { - padding: 1rem; -} - -.career-page h1 { - margin: 1rem 0; - background: linear-gradient( - 90deg, - rgb(152 0 255) 0%, - rgb(246 41 41) 50%, - rgb(255 169 8) 100% - ); - background-clip: text; - -webkit-text-fill-color: transparent; - text-align: center; -} - -.career-page .career-intro { - margin: 1rem 0; - text-align: center; - font-size: 1.2rem; -} - -.career-page .career-filters { - margin: 2.5rem 0; -} - -.career-page .search-bar { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 1rem; -} - -.career-page .search-bar input[type="search"] { - width: 50%; - padding: 10px; - border: 1px solid #ccc; - border-radius: 10px; -} - -.career-page .search-bar select { - width: 20%; - padding: 10px; - border: 1px solid #ccc; - border-radius: 10px; -} - -.career-page .career-cards { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); - gap: 20px; -} - -.career-page .career-card { - padding: 1px; - border: 1px solid #ddd; - border-radius: 10px; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); - transition: transform 0.2s; -} - -.career-page .career-card:hover { - transform: translateY(-10px); -} - -@keyframes fadeIn { - from { - opacity: 0; - } - to { - opacity: 1; - } -} - -.career-page .career-card .image-container { - position: relative; - overflow: hidden; - border-radius: 10px 10px 0 0; - animation: fadeIn 0.5s; -} - -.career-page .career-card img { - width: 100%; - height: 200px; - object-fit: cover; - border-radius: 10px 10px 0 0; -} - -.career-page .career-card .image-container:hover img { - transform: scale(1.1); -} - -.career-page .career-card h3 { - font-weight: 600; - margin-bottom: 8px; - padding: 0.5rem; -} - -.career-page .career-card .career-description { - padding: 0.5rem; -} - -.career-page .career-card .career-footer { - padding: 10px; - border-top: 1px solid #dddddd72; - margin-top: 5px; -} - -.career-footer .career-details { - display: flex; - flex-direction: column; -} - -.career-footer .career-details p { - margin: 5px 0; -} - -.career-footer .career-tags { - display: flex; - flex-wrap: wrap; - margin-top: 5px; -} - -.career-footer .career-tags .tag { - border: 1px solid var(--ifm-color-primary); - margin: 2px 5px; - border-radius: 5px; -} - -.career-footer .career-link { - color: var(--ifm-color-primary); - text-decoration: none; - font-weight: 600; - margin: 1rem 0; - display: inline-block; -} - -.career-footer .career-link:hover { - text-decoration: underline; -} diff --git a/src/components/FAQs/index.tsx b/src/components/FAQs.tsx similarity index 99% rename from src/components/FAQs/index.tsx rename to src/components/FAQs.tsx index 6e3441099..51e29f9b5 100644 --- a/src/components/FAQs/index.tsx +++ b/src/components/FAQs.tsx @@ -95,4 +95,4 @@ const FAQs: React.FC = () => { ); }; -export default FAQs; \ No newline at end of file +export default FAQs; diff --git a/src/components/GlowingCursor.js b/src/components/GlowingCursor.js deleted file mode 100644 index f95b2a630..000000000 --- a/src/components/GlowingCursor.js +++ /dev/null @@ -1,27 +0,0 @@ -import React, { useEffect } from 'react'; -import '../css/custom.css'; - -const CursorComponent = () => { - useEffect(() => { - const cursor = document.querySelector('.cursor'); - - const moveCursor = (e) => { - cursor.style.left = e.pageX + 'px'; - cursor.style.top = e.pageY + 'px'; - }; - - document.addEventListener('mousemove', moveCursor); - - return () => { - document.removeEventListener('mousemove', moveCursor); - }; - }, []); - - return ( -
-
-
- ); -}; - -export default CursorComponent;