diff --git a/docusaurus.config.js b/docusaurus.config.js index 0b88baca6..3f4a3eba4 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -83,9 +83,9 @@ const config = { announcementBar: { id: "announcementBar", content: - '🔗 Check out our latest post: Docusaurus 3.5 Released! Like, comment, and share! 🚀', + '🐐 Check out our latest project Goat Farming! Learn more about sustainable farming practices. 🌱', isCloseable: true, - backgroundColor: "var(--ifm-color-primary)", + backgroundColor: "#4d5061", }, metadata: [ diff --git a/src/components/popup/popup.tsx b/src/components/popup/popup.tsx new file mode 100644 index 000000000..6dfb11c91 --- /dev/null +++ b/src/components/popup/popup.tsx @@ -0,0 +1,14 @@ +import React from "react"; +import styles from "./style.module.css"; + +const Popup = ({ status, message }) => { + return ( +
+

+ {status} + {message} +

+
+ ); +}; +export default Popup; diff --git a/src/components/popup/style.module.css b/src/components/popup/style.module.css new file mode 100644 index 000000000..972797df0 --- /dev/null +++ b/src/components/popup/style.module.css @@ -0,0 +1,38 @@ +.popup_message { + position: fixed; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + top: 15%; + z-index: 1; +} +.popup_message .success, +.popup_message .error { + padding: 1rem 3rem; + font-family: monospace; + font-weight: 600; + border-radius: 0.6rem; + font-size: 0.8rem; +} +.popup_message .success { + background: rgba(6, 235, 6, 0.749); + color: #fff; +} +.popup_message .error { + background: rgba(235, 6, 6, 0.749); + color: #fff; + padding: 1rem 2.5rem; +} + +.popup_message p{ + font-family: monospace; + font-weight: 600; + +} + +.popup_message span { + position: relative; + top: 0.2rem; + margin-right: 0.3rem; +} diff --git a/src/css/custom.css b/src/css/custom.css index 899819f4a..5dd1185cb 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -32,6 +32,7 @@ --ifm-bg-color: #f8f9fa; --image-filter:invert(0); --site-color-svg-icon-favorite: #ff1100cb; + --ifm-text-color: #000; } [data-theme="dark"] { @@ -48,6 +49,7 @@ --ifm-bg-color: #1a202c; --image-filter:invert(1); --site-color-svg-icon-favorite: #ff9100e5; + --ifm-text-color: #fff; } .header-github-link::before { @@ -69,7 +71,6 @@ } div[class^="announcementBar_"] { - background: #06e06fb4; color: #fff; border-bottom: 1.8px dotted rgb(37, 184, 11); font-weight: bold; @@ -84,15 +85,16 @@ div[class^="announcementBar_"] { div[class^="announcementBar_"] a { font-size: 1.2em; padding: 1px 4px; - background: linear-gradient( + /* background: linear-gradient( 90deg, rgb(252 176 69 / 100%) 0%, rgb(253 29 29 / 100%) 50%, - rgb(131 58 180 / 100%) 100% + rgb(229, 223, 232) 100% ); background-clip: text; - -webkit-text-fill-color: transparent; - text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 2px #ff00de, 0 0 1px #ff00de; + -webkit-text-fill-color: transparent; */ + text-decoration: none; + color: #48df84; } div[class^="announcementBar_"] a:hover { @@ -100,8 +102,8 @@ div[class^="announcementBar_"] a:hover { padding: 1px 4px; background: linear-gradient( 90deg, - rgb(131 58 180 / 100%) 0%, - rgb(253 29 29 / 100%) 50%, + rgb(235, 244, 243) 0%, + #7ab3c8 50%, rgb(252 176 69 / 100%) 100% ); background-clip: text; @@ -111,14 +113,16 @@ div[class^="announcementBar_"] a:hover { [data-theme="dark"] div[class^="announcementBar_"] a { font-size: 1.2em; padding: 1px 4px; - background: linear-gradient( + /* background: linear-gradient( 90deg, rgb(131 58 180 / 100%) 0%, rgb(253 29 29 / 100%) 50%, rgb(252 176 69 / 100%) 100% ); background-clip: text; - -webkit-text-fill-color: transparent; + -webkit-text-fill-color: transparent; */ + text-decoration: none; + color: #48df84; } [data-theme="dark"] div[class^="announcementBar_"] a:hover { @@ -128,7 +132,7 @@ div[class^="announcementBar_"] a:hover { 90deg, rgb(252 176 69 / 100%) 0%, rgb(253 29 29 / 100%) 50%, - rgb(131 58 180 / 100%) 100% + rgb(220, 203, 232) 100% ); background-clip: text; -webkit-text-fill-color: transparent; diff --git a/src/data/showcase/3d-0scrolling-animation.png b/src/data/showcase/3d-0scrolling-animation.png new file mode 100644 index 000000000..988d5bef4 Binary files /dev/null and b/src/data/showcase/3d-0scrolling-animation.png differ diff --git a/src/data/showcase/anime.png b/src/data/showcase/anime.png new file mode 100644 index 000000000..663444762 Binary files /dev/null and b/src/data/showcase/anime.png differ diff --git a/src/data/showcase/array-explorer.png b/src/data/showcase/array-explorer.png new file mode 100644 index 000000000..e36591726 Binary files /dev/null and b/src/data/showcase/array-explorer.png differ diff --git a/src/data/showcase/budget.png b/src/data/showcase/budget.png new file mode 100644 index 000000000..30e9ff3d5 Binary files /dev/null and b/src/data/showcase/budget.png differ diff --git a/src/data/showcase/chatbot.png b/src/data/showcase/chatbot.png new file mode 100644 index 000000000..fbbe055b9 Binary files /dev/null and b/src/data/showcase/chatbot.png differ diff --git a/src/data/userData.tsx b/src/data/userData.tsx index 9b38dea48..19132e207 100644 --- a/src/data/userData.tsx +++ b/src/data/userData.tsx @@ -99,26 +99,26 @@ export const Users: User[] = [ // Random Meme Generator Clone - { - title: "Random Meme Generator", - description: - "It generates random memes by using the technique of API Fetching and also supports the feature of sharing the memes.", - preview: require("./showcase/meme.png"), - website: "https://giggle-hub.vercel.app/", - source: "https://github.com/komal-agarwal5/Giggle-Hub------Meme-Generator", - tags: ["opensource", "product", "html", "css", "javascript"], - }, + // { + // title: "Random Meme Generator", + // description: + // "It generates random memes by using the technique of API Fetching and also supports the feature of sharing the memes.", + // preview: require("./showcase/meme.png"), + // website: "https://giggle-hub.vercel.app/", + // source: "https://github.com/komal-agarwal5/Giggle-Hub------Meme-Generator", + // tags: ["opensource", "product", "html", "css", "javascript"], + // }, // URL Shortner - { - title: "URL Shortner", - description: - "It Short URL by using the technique of API Fetching and also supports the feature of copy url.", - preview: require("./showcase/URLShortner.png"), - website: "https://url-shortner-tau-woad.vercel.app/", - source: "https://github.com/kartikmehta18/URLshortner", - tags: ["opensource", "product", "html", "css", "javascript"], - }, + // { + // title: "URL Shortner", + // description: + // "It Short URL by using the technique of API Fetching and also supports the feature of copy url.", + // preview: require("./showcase/URLShortner.png"), + // website: "https://url-shortner-tau-woad.vercel.app/", + // source: "https://github.com/kartikmehta18/URLshortner", + // tags: ["opensource", "product", "html", "css", "javascript"], + // }, // Age Calculator Clone @@ -134,17 +134,17 @@ export const Users: User[] = [ // To Do List App Clone - { - title: "To Do List App", - description: - "A simple To-Do List App using HTML CSS JS . Add your tasks and manage them easily , mark your task as completed or incomplete ", - preview: require("./showcase/todolist.png"), - website: - "https://50-days-50-web-project.vercel.app/TO_DO_LIST/todolist.html", - source: - "https://github.com/dhairyagothi/50_days_50_web_project/tree/Main/public/TO_DO_LIST", - tags: ["html", "css", "javascript"], - }, + // { + // title: "To Do List App", + // description: + // "A simple To-Do List App using HTML CSS JS . Add your tasks and manage them easily , mark your task as completed or incomplete ", + // preview: require("./showcase/todolist.png"), + // website: + // "https://50-days-50-web-project.vercel.app/TO_DO_LIST/todolist.html", + // source: + // "https://github.com/dhairyagothi/50_days_50_web_project/tree/Main/public/TO_DO_LIST", + // tags: ["html", "css", "javascript"], + // }, // Dictonary app @@ -181,18 +181,6 @@ export const Users: User[] = [ tags: ["opensource", "product", "react", "css", "javascript"], }, - // Guess The Number Game Clone - - { - title: "Guess The Number Game", - description: - "It allows users to play the Guess The Number Game based on the choice of Easy(3 rounds), Intermediate(5 rounds) and Hard(7 rounds).", - preview: require("./showcase/guessnumber-ss.png"), - website: "https://guess-me-tau.vercel.app/", - source: "https://github.com/ParnaRoyChowdhury777/Guess_The_Number_Game", - tags: ["opensource", "product", "html", "css", "javascript", "vanilla"], - }, - // QR Generator Clone { @@ -206,16 +194,16 @@ export const Users: User[] = [ // captcha code generator - { - title: "Captcha-Code Generator", - description: - "It generates a Captcha code based on the user's input and validates the user's input with the generated Captcha code.", - preview: require("./showcase/captcha-code.png"), - website: "https://50-days-50-web-project.vercel.app/captcha/captcha.html", - source: - "https://github.com/dhairyagothi/50_days_50_web_project/tree/Main/public/captcha", - tags: ["html", "css", "javascript"], - }, + // { + // title: "Captcha-Code Generator", + // description: + // "It generates a Captcha code based on the user's input and validates the user's input with the generated Captcha code.", + // preview: require("./showcase/captcha-code.png"), + // website: "https://50-days-50-web-project.vercel.app/captcha/captcha.html", + // source: + // "https://github.com/dhairyagothi/50_days_50_web_project/tree/Main/public/captcha", + // tags: ["html", "css", "javascript"], + // }, // Algo: Algorithm Learning Platform @@ -262,15 +250,15 @@ export const Users: User[] = [ // BMI Calculator - { - title: "BMI Calculator", - description: - "A BMI Calculator is a tool that quickly determines body mass index from a person's weight and height, categorizing results into underweight, normal weight, overweight .", - preview: require("./showcase/BMI-calculator.png"), - website: "https://bmi-calculator-liart-five.vercel.app", - source: "https://github.com/parikhitritgithub/BMI-Calculator", - tags: ["opensource", "javascript", "html", "css"], - }, + // { + // title: "BMI Calculator", + // description: + // "A BMI Calculator is a tool that quickly determines body mass index from a person's weight and height, categorizing results into underweight, normal weight, overweight .", + // preview: require("./showcase/BMI-calculator.png"), + // website: "https://bmi-calculator-liart-five.vercel.app", + // source: "https://github.com/parikhitritgithub/BMI-Calculator", + // tags: ["opensource", "javascript", "html", "css"], + // }, // Gemini AI Chatbot @@ -335,19 +323,20 @@ export const Users: User[] = [ "https://github.com/Ajay-Dhangar/zacson", tags: ["opensource", "html", "css", "javascript", "gym", "templates", "scss", "php"], }, - // Crossfits GYM Template + + // Array Explorer { - title: "Crossfits", + title: "Array Explorer", description: - "Crossfits is a responsive landing page for GYM and Fitness.", - preview: require("./showcase/crossfits.png"), - website: "https://ridhima10.github.io/Crossfits/", - source: - "https://github.com/Ridhima10/Crossfits", - tags: ["opensource", "html", "css", "gym", "templates"], + "A web application for exploring JavaScript array methods. It provides a visual representation of the array methods.", + preview: require("./showcase/array-explorer.png"), + website: "https://ajay-dhangar.github.io/array-explorer/", + source: "https://github.com/Ajay-Dhangar/array-explorer", + tags: ["opensource", "html", "javascript", "product", "css"], }, + // Activitar GYM Template { @@ -376,6 +365,21 @@ export const Users: User[] = [ tags: ["opensource", "html", "css", "javascript", "game"], }, + // 3D Scrolling Animation portfolio + + { + title: "3D Scrolling Animation portfolio", + description: + "3D Scrolling Animation portfolio using HTML, CSS and JavaScript, React.js with Vite. Scroll down to see the magic.", + preview: require("./showcase/3d-0scrolling-animation.png"), + website: + "https://3d-0scrolling-animation.vercel.app/", + source: + "", + tags: ["portfolio", "html", "css", "javascript", "react"], + }, + + // horse ride booking system { @@ -386,17 +390,9 @@ export const Users: User[] = [ source: null, tags: ["opensource", "react", "redux", "motion", "javascript"], }, - //The Pull - { - title: "The Pull", - description: "Ecommerce wesbite template from where we can buy variety of shoes", - preview: require("./showcase/pull.png"), - website:"https://ridhima10.github.io/The_Pull/", - source: "https://github.com/Ridhima10/The_Pull", - tags: ["html", "css", "javascript"], - }, // QR Generator + { title: "QR Generator", description: "Simple QR generator made with HTML, CSS and Javacsript", @@ -405,13 +401,38 @@ export const Users: User[] = [ source: "https://github.com/Ridhima10/Js-mini-projects/tree/main/QR%20code%20generator", tags: ["html", "css", "javascript"], }, - // CSS Buttons sample + + // Anime Template + { - title: "Custom made CSS Buttons", - description: "Variety of custom made CSS Buttons.Hover on it to get more insight of the buttons. Customize it , use it and have fun ", - preview: require("./showcase/buttons.png"), - website: "https://github.com/Ridhima10/complete-web-dev.-boot-camp/tree/master/Buttons/Styling%20of%20buttons", - source: "https://github.com/Ridhima10/complete-web-dev.-boot-camp/tree/master/Buttons/Styling%20of%20buttons", + title: "Anime Template", + description: "A simple Anime template made with HTML, CSS and Javascript for anime lovers.", + preview: require("./showcase/anime.png"), + website: "https://ajay-dhangar.github.io/anime/", + source: "https://github.com/Ajay-Dhangar/anime", + tags: ["html", "css", "javascript", "templates", "scss"], + }, + + // Budget App + + { + title: "Budget App", + description: "A simple budget app made with HTML, CSS and Javascript. It helps you to manage your budget.", + preview: require("./showcase/budget.png"), + website: "https://ajay-dhangar.github.io/budget-app/", + source: "https://github.com/Ajay-Dhangar/budget-app", tags: ["html", "css", "javascript"], - } + }, + + // Chat Bot + + { + title: "Chat Bot", + description: "A simple chat bot made with HTML, CSS and Javascript. It helps you to chat with the bot.", + preview: require("./showcase/chatbot.png"), + website: "https://ajay-dhangar.github.io/chatbot/", + source: "https://github.com/Ajay-Dhangar/chatbot", + tags: ["html", "css", "javascript"], + }, + ]; diff --git a/src/pages/contact/Contact.module.css b/src/pages/contact/Contact.module.css index c0fda8a24..6f44a5992 100644 --- a/src/pages/contact/Contact.module.css +++ b/src/pages/contact/Contact.module.css @@ -35,7 +35,7 @@ .main__contact_ud_wrapper { margin-top: 1rem; - align-items: center; + align-items: center; } .ud_contact_title { @@ -62,7 +62,7 @@ flex-wrap: wrap; gap: 10px; margin: 8rem auto auto auto; - + } .contact_info_item { @@ -76,7 +76,7 @@ } .contact_info .icon .fill_current { - fill: #816bd1; + fill: var(--ifm-color-primary); } .contact_info .contact_info_item .location_heading, .contact_info .contact_info_item .help_heading { @@ -122,10 +122,13 @@ padding: 0.5rem; border: 1px solid #ccc; border-radius: 5px; + background: transparent; + color: var(--ifm-text-color); } .main__contact_contains_right .form_container .form_group .phone_input { - background-color: transparent; + background-color: transparent; + color: var(--ifm-text-color); } .main__contact_contains_right .form_container .form_group .form_select { @@ -140,6 +143,8 @@ padding: 0.5rem; border: 1px solid #ccc; border-radius: 5px; + background: transparent; + color: var(--ifm-text-color); } .main__contact_contains_right .form_container .form_group .form_button { @@ -147,7 +152,7 @@ padding: 0.5rem; border: none; border-radius: 5px; - background-color: #816bd1; + background-color: var(--ifm-color-primary); color: #fff; font-size: 1rem; font-weight: 600; @@ -155,7 +160,7 @@ } .main__contact_contains_right .form_container .form_group .form_button:hover{ - background-color: #816bd1b5; + background-color: var(--ifm-color-primary-dark); } @media screen and (max-width: 768px) { @@ -169,7 +174,7 @@ } .social_media_icons{ - color: #816bd1 !important; + color: var(--ifm-color-primary) !important; font-size: 34px; display: flex; flex-direction: row; @@ -181,7 +186,7 @@ .social_media_icons a{ list-style: none; - color: #816bd1 !important; + color: var(--ifm-color-primary) !important; } .social_media_heading{ @@ -199,6 +204,6 @@ animation: spinner 1s infinite linear; margin: auto; } -@keyframes spinner{ +@keyframes spinner{ 100%{transform: rotate(1turn)} -} \ No newline at end of file +} diff --git a/src/pages/contact/index.tsx b/src/pages/contact/index.tsx index 25d7d8398..3af6f71bc 100644 --- a/src/pages/contact/index.tsx +++ b/src/pages/contact/index.tsx @@ -6,7 +6,7 @@ import PhoneInput from "react-phone-input-2"; import "react-phone-input-2/lib/style.css"; import { FaYoutube, FaDiscord, FaLinkedin } from "react-icons/fa"; import { FaXTwitter } from "react-icons/fa6"; -import Popup from "../popup/popup"; +import Popup from "../../components/popup/popup"; import axios from 'axios' // import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; import { log } from "console"; @@ -60,9 +60,9 @@ export default function Contact(): JSX.Element { // Function to handle form submission const handleSubmit = async (e: FormEvent) => { e.preventDefault(); - + setChecker((prev) => ({ ...prev, loading: true })); - + try { // Sending form data to the backend with correct headers const response = await axios.post( @@ -77,11 +77,11 @@ export default function Contact(): JSX.Element { }, { headers: { - "Content-Type": "application/json", // Ensuring JSON format + "Content-Type": "application/json", }, } ); - + // Resetting form values after submission setFormValues({ fullName: "", @@ -91,8 +91,7 @@ export default function Contact(): JSX.Element { feedbackType: "Question", otherFeedback: "", }); - - // Handling response based on the server's reply + if (response.data.ok) { setChecker((prev) => ({ ...prev, @@ -110,7 +109,6 @@ export default function Contact(): JSX.Element { } } catch (error) { console.error("Error submitting the form:", error); - // Set error state if request fails setChecker((prev) => ({ ...prev, popup: true, @@ -118,7 +116,7 @@ export default function Contact(): JSX.Element { loading: false, })); } - + // Hide popup after 2 seconds setTimeout(() => { setChecker((prev) => ({ @@ -237,7 +235,7 @@ export default function Contact(): JSX.Element {
How Can We Help?

- ajaydhyangar49@gmail.com + codeharborhub@gmail.com

diff --git a/src/pages/popup/popup.module.css b/src/pages/popup/popup.module.css deleted file mode 100644 index 4156f84a9..000000000 --- a/src/pages/popup/popup.module.css +++ /dev/null @@ -1,28 +0,0 @@ -.popup_message{ - position:fixed; - width:100%; - display:flex; - justify-content: center; - align-items: center; - top:15%; - z-index:1; -} -.popup_message .success,.popup_message .error{ - padding: 1rem 3rem; - font-family: monospace; - font-weight: 600; - border-radius:0.6rem; - font-size: 0.8rem; -} -.popup_message .success{ - background: rgb(60 189 60); -} -.popup_message .error{ - background:rgb(237 39 39); -} -.popup_message span{ - font-size:1.5rem; - position:relative; - top:0.2rem; - margin-right: 0.3rem; -} \ No newline at end of file diff --git a/src/pages/popup/popup.tsx b/src/pages/popup/popup.tsx deleted file mode 100644 index 067fc147c..000000000 --- a/src/pages/popup/popup.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react' -import styles from "./popup.module.css" -const Popup=({status,message})=>{ - return( -
-

{status}{message}

-
- ) -} -export default Popup \ No newline at end of file diff --git a/src/sw.js b/src/sw.js index 0dff9c8f6..1c6d630dd 100644 --- a/src/sw.js +++ b/src/sw.js @@ -1,9 +1,9 @@ -import {registerRoute} from 'workbox-routing'; -import {StaleWhileRevalidate} from 'workbox-strategies'; +import { registerRoute } from "workbox-routing"; +import { StaleWhileRevalidate } from "workbox-strategies"; export default function swCustom(params) { if (params.debug) { - console.log('[CodeMastermindHQ-PWA][SW]: running swCustom code', params); + console.log("[CodeHarborHub-PWA][SW]: running swCustom code", params); } // Cache responses from external resources @@ -14,4 +14,4 @@ export default function swCustom(params) { /avatars1\.githubusercontent/, ].some((regex) => context.url.href.match(regex)); }, new StaleWhileRevalidate()); -} \ No newline at end of file +}