├── .gitignore
├── README.md
├── package-lock.json
├── package.json
├── public
    ├── New_Ganesh_Ghadge_Resume.pdf
    ├── favicon.ico
    ├── index.html
    ├── manifest.json
    └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── ServiceContext.js
    ├── index.css
    ├── index.js
    └── pages
        ├── AboutPage.css
        ├── AboutPage.js
        ├── ContactPage.css
        ├── ContactPage.js
        ├── EducationCert.css
        ├── EducationCert.js
        ├── Frontpage.css
        ├── Frontpage.js
        ├── NewSkillsPage.css
        ├── NewSkillsPage.js
        ├── ProjectExPage.css
        ├── ProjectExPage.js
        └── components
            ├── EducationInterface
                ├── Certificates.css
                ├── Certificates.jsx
                ├── Education.css
                ├── Education.jsx
                ├── ProjHome.css
                └── ProjHome.jsx
            ├── FooterInterface
                ├── BottomNav.css
                ├── BottomNav.jsx
                ├── Footer.css
                ├── Footer.jsx
                ├── Githubcomp.css
                └── Githubcomp.jsx
            ├── Loaders
                ├── Skeleton.css
                ├── Skeleton.js
                ├── Spinner.css
                ├── Spinner.jsx
                ├── SvgBackground.css
                └── SvgBackground.jsx
            ├── LoginInterface
                ├── AdminUser.css
                ├── AdminUser.jsx
                ├── Login.css
                ├── Login.jsx
                └── PrivateRoutes.js
            ├── Navigation
                ├── Navbar.css
                └── Navbar.jsx
            └── SocialMediaLinks.jsx


/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Portfolio Web-Application
 2 | ## Screenshots 📸
 3 | 
 4 | Projects & Experiences 
 5 | 
 6 | <div>
 7 |  <img src="https://user-images.githubusercontent.com/89139437/214609604-e1263450-0e58-4da5-a7ce-7303aa374f9e.png"  width="100%"/>
 8 | </div>
 9 | <hr/>
10 | <h3 align="center"> DON'T FORGET TO ⭐ THIS REPOSITORY !!!
11 | </h3> 
12 | <hr/>
13 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "myportfolio",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@emotion/react": "^11.10.5",
 7 |     "@emotion/styled": "^11.10.5",
 8 |     "@mui/icons-material": "^5.10.16",
 9 |     "@mui/material": "^5.10.17",
10 |     "@react-icons/all-files": "^4.1.0",
11 |     "@testing-library/jest-dom": "^5.16.4",
12 |     "@testing-library/react": "^13.2.0",
13 |     "@testing-library/user-event": "^13.5.0",
14 |     "aos": "^3.0.0-beta.6",
15 |     "axios": "^1.2.1",
16 |     "cors": "^2.8.5",
17 |     "dotenv": "^16.4.5",
18 |     "emailjs-com": "^3.2.0",
19 |     "express": "^4.18.2",
20 |     "font-awesome": "^4.7.0",
21 |     "mongoose": "^6.8.0",
22 |     "nodemon": "^2.0.20",
23 |     "react": "^18.2.0",
24 |     "react-dom": "^18.2.0",
25 |     "react-icons": "^4.8.0",
26 |     "react-router-dom": "^6.4.3",
27 |     "react-router-hash-link": "^2.4.3",
28 |     "react-scripts": "5.0.1",
29 |     "react-spinners": "^0.13.8",
30 |     "react-toastify": "^9.1.1",
31 |     "react-typewriter-effect": "^1.1.0",
32 |     "web-vitals": "^2.1.4"
33 |   },
34 |   "scripts": {
35 |     "start": "react-scripts start",
36 |     "predeploy": "npm run build",
37 |     "deploy": "gh-pages -d build",
38 |     "build": "react-scripts build",
39 |     "test": "react-scripts test",
40 |     "eject": "react-scripts eject"
41 |   },
42 |   "eslintConfig": {
43 |     "extends": [
44 |       "react-app",
45 |       "react-app/jest"
46 |     ]
47 |   },
48 |   "browserslist": {
49 |     "production": [
50 |       ">0.2%",
51 |       "not dead",
52 |       "not op_mini all"
53 |     ],
54 |     "development": [
55 |       "last 1 chrome version",
56 |       "last 1 firefox version",
57 |       "last 1 safari version"
58 |     ]
59 |   }
60 | }
61 | 


--------------------------------------------------------------------------------
/public/New_Ganesh_Ghadge_Resume.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ganraj21/Portfolio-Web-Application/b287d30ac760fd2b0c73a4213ad0ac2dba7463c4/public/New_Ganesh_Ghadge_Resume.pdf


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ganraj21/Portfolio-Web-Application/b287d30ac760fd2b0c73a4213ad0ac2dba7463c4/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 | 
14 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
15 |     <link
16 |       rel="stylesheet"
17 |       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
18 |       integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A=="
19 |       crossorigin="anonymous"
20 |       referrerpolicy="no-referrer"
21 |     />
22 |     <title>Ganraj21 | Portfolio</title>
23 |     <script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>
24 |     <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
25 |   </head>
26 |   <body>
27 |     <noscript>You need to enable JavaScript to run this app.</noscript>
28 |     <div id="root"></div>
29 | 
30 |     <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
31 |     <script>
32 |       AOS.init();
33 |     </script>
34 |   </body>
35 | </html>
36 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "GB-Portfolio",
 3 |   "name": "Ganesh Ghadge Portfolio Web-Applications",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 |   --light-blue: #04c3ff;
 3 |   --light-blue-shadow: rgb(69 211 255 / 27%);
 4 |   --sea-green: #0abead;
 5 |   --sea-green-dark: #0cbfae;
 6 |   --sea-green-extra-dark: #09bead;
 7 |   --sea-green-shadow: rgba(11, 190, 173, 0.4);
 8 |   --header-hamburger-background: rgba(11, 190, 173, 0.8);
 9 |   --orange: #f57f17;
10 |   --dark-orange: #ff5823;
11 |   --orange-shadow: rgba(245, 127, 23, 0.2);
12 |   --white: #ffffff;
13 |   --black: #333333;
14 |   --dark-fans: #1f2235;
15 |   --disabled-btn: #09bead7a;
16 |   --error-message: #e44f4fd1;
17 |   --toast-error: #e44f4ffa;
18 |   --toast-shadow: #9c9c9ce3;
19 |   --toast-success: #0cbfae;
20 |   --loader-color: #0cbfae;
21 | }
22 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Routes, Route, Navigate } from 'react-router-dom';
 3 | import AboutPage from './pages/AboutPage';
 4 | import Frontpage from './pages/Frontpage';
 5 | import ContactPage from './pages/ContactPage';
 6 | import EducationCert from './pages/EducationCert';
 7 | import ProjectExPage from './pages/ProjectExPage';
 8 | import NewSkillsPage from './pages/NewSkillsPage';
 9 | import Navbar from './pages/components/Navigation/Navbar';
10 | import Footer from './pages/components/FooterInterface/Footer';
11 | import Login from './pages/components/LoginInterface/Login';
12 | import AdminUser from './pages/components/LoginInterface/AdminUser';
13 | import { PrivateRoutes } from './pages/components/LoginInterface/PrivateRoutes';
14 | 
15 | const App = () => {
16 |   return (
17 |     <>
18 |       <Navbar />
19 |       <Routes>
20 |         <Route
21 |           exact
22 |           path="/"
23 |           element={
24 |             <>
25 |               <Frontpage />
26 |               <AboutPage />
27 |               <ProjectExPage />
28 |             </>
29 |           }
30 |         />
31 |         <Route exact path="/tech/education" element={<EducationCert />} />
32 |         <Route exact path="/tech/skill" element={<NewSkillsPage />} />
33 |         <Route exact path="/contact-me" element={<ContactPage />} />
34 |         <Route exact path="/login" element={<Login />} />
35 |         <Route element={<PrivateRoutes />}>
36 |           <Route exact path="login/admin" element={<AdminUser />} />
37 |         </Route>
38 |         <Route path="*" element={<Navigate to="/" />} />
39 |       </Routes>
40 |       <Footer />
41 |     </>
42 |   );
43 | };
44 | 
45 | export default App;
46 | 


--------------------------------------------------------------------------------
/src/ServiceContext.js:
--------------------------------------------------------------------------------
 1 | import React, { createContext, useEffect, useState } from 'react';
 2 | const ServiceContext = createContext();
 3 | 
 4 | const ServiceProvider = ({ children }) => {
 5 |   // const [rootData, setRootData] = useState([]);
 6 |   const [utilData, setUtilData] = useState([]);
 7 |   const [imageStyle, setImageStyle] = useState([]);
 8 |   // const [csStyleData, setCSStyleData] = useState([]);
 9 |   const [isDarkMode, setIsDarkMode] = useState(1);
10 |   const [auth, setAuth] = useState();
11 | 
12 |   const uri = `${process.env.REACT_APP_WEB_SERVER}`;
13 | 
14 |   // const getStyleData = async (path) => {
15 |   //   const response = await fetch(
16 |   //     `${uri}/${process.env.REACT_APP_SERVICE_PATH}/${path}`
17 |   //   );
18 | 
19 |   //   if (response.ok) {
20 |   //     const result = await response.json();
21 |   //     // if (path === process.env.REACT_APP_ARP_IMAGE) setImageStyle(result);
22 | 
23 |   //     path === process.env.REACT_APP_ARP_CS
24 |   //       ? setCSStyleData(result)
25 |   //       : path === process.env.REACT_APP_ARP_ROOT
26 |   //       ? setRootData(result)
27 |   //       : setUtilData(result);
28 | 
29 |   //     console.log(csStyleData);
30 |   //   } else {
31 |   //     throw new Error('System Error');
32 |   //   }
33 |   // };
34 | 
35 |   const getPortfolioData = async () => {
36 |     const res = await fetch(`${uri}/${process.env.REACT_APP_PORTFOLIO}`);
37 |     if (res.ok) {
38 |       const result = await res.json();
39 | 
40 |       setUtilData(result);
41 |       console.log(result);
42 |     }
43 |   };
44 |   useEffect(() => {
45 |     getPortfolioData();
46 |     // setTimeout(() => {
47 |     //   if (utilData) getPortfolioData();
48 |     // }, 3000);
49 |     // getStyleData(process.env.REACT_APP_ARP_ROOT);
50 | 
51 |     // setTimeout(() => {
52 |     //   getStyleData(process.env.REACT_APP_ARP_IMAGE);
53 |     // }, 1000);
54 | 
55 |     // setTimeout(() => {
56 |     //   getStyleData(process.env.REACT_APP_ARP_ROOT);
57 |     // }, 2000);
58 | 
59 |     // setTimeout(() => {
60 |     //   getStyleData(process.env.REACT_APP_ARP_UTIL);
61 |     // }, 3800);
62 |   }, []);
63 | 
64 |   const toggleTheme = () => {
65 |     setIsDarkMode((prevMode) => !prevMode);
66 |   };
67 | 
68 |   const getAuth = () => {
69 |     setAuth(localStorage.getItem(process.env.REACT_APP_QUERY_KEYS));
70 |   };
71 | 
72 |   return (
73 |     <>
74 |       <ServiceContext.Provider
75 |         value={{
76 |           uri,
77 |           // rootData,
78 |           utilData,
79 |           imageStyle,
80 |           // csStyleData,
81 |           // getStyleData,
82 |           isDarkMode,
83 |           toggleTheme,
84 |           getAuth,
85 |           auth,
86 |         }}
87 |       >
88 |         {children}
89 |       </ServiceContext.Provider>
90 |     </>
91 |   );
92 | };
93 | 
94 | export { ServiceContext, ServiceProvider };
95 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,500;1,800&display=swap');
 2 | 
 3 | * {
 4 |   margin: 0;
 5 |   padding: 0;
 6 |   -ms-overflow-style: none;
 7 |   box-sizing: border-box;
 8 |   scroll-behavior: smooth;
 9 |   /* font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Helvetica,
10 |     Arial, sans-serif; */
11 |   font-family: 'Poppins', sans-serif;
12 |   transition: all 0.25s linear 0s;
13 |   -ms-overflow-style: none; /* IE and Edge */
14 |   scrollbar-width: none; /* Firefox */
15 | }
16 | ::-webkit-scrollbar {
17 |   display: none;
18 | }
19 | 
20 | body {
21 |   margin: 0px;
22 | }
23 | 
24 | .polygoncls {
25 |   clip-path: polygon(
26 |     34% 0%,
27 |     81% 3%,
28 |     99% 37%,
29 |     94% 80%,
30 |     61% 100%,
31 |     19% 92%,
32 |     5% 74%,
33 |     0% 46%,
34 |     7% 15%
35 |   );
36 | }
37 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import { createRoot } from 'react-dom/client';
 2 | import App from './App';
 3 | import './index.css';
 4 | import { BrowserRouter } from 'react-router-dom';
 5 | import { ServiceProvider } from './ServiceContext';
 6 | 
 7 | const root = createRoot(document.getElementById('root'));
 8 | 
 9 | root.render(
10 |   <ServiceProvider>
11 |     <BrowserRouter>
12 |       <App />
13 |     </BrowserRouter>
14 |   </ServiceProvider>
15 | );
16 | 


--------------------------------------------------------------------------------
/src/pages/AboutPage.css:
--------------------------------------------------------------------------------
  1 | .light {
  2 |   --about-background-color: #f7f5fb;
  3 |   --aboutsvg-background-color: #f7f5fb;
  4 |   --about-text-color: #000000;
  5 | }
  6 | 
  7 | .dark {
  8 |   --about-background-color: #1c2541;
  9 |   --aboutsvg-background-color: #1c2541;
 10 |   --about-text-color: #ffffff;
 11 | }
 12 | 
 13 | .about_me {
 14 |   width: 100%;
 15 |   background-color: var(--about-background-color);
 16 |   /* clip-path: polygon(100% 0, 100% 90%, 50% 100%, 0 90%, 0 0); */
 17 | }
 18 | .about_me,
 19 | .container_01,
 20 | .my_img,
 21 | .my_info,
 22 | .personal_info {
 23 |   display: flex;
 24 |   align-items: center;
 25 |   justify-content: center;
 26 |   align-content: center;
 27 | }
 28 | .container_01 {
 29 |   width: 100%;
 30 |   margin: 30px 0px;
 31 | }
 32 | .my_img {
 33 |   width: 50%;
 34 |   margin: 67px 0 35px 0;
 35 | }
 36 | #img {
 37 |   display: flex;
 38 | }
 39 | .my_info h2 {
 40 |   margin: 0px !important;
 41 |   color: var(--about-text-color);
 42 | }
 43 | h2 {
 44 |   margin: 10px;
 45 |   font-size: 42px;
 46 | }
 47 | h2 span {
 48 |   color: #ff5823;
 49 | }
 50 | .my_info {
 51 |   width: 50%;
 52 |   flex-direction: row;
 53 |   flex-wrap: wrap;
 54 |   line-height: 35px;
 55 |   font-family: system-ui;
 56 | }
 57 | .my_info p {
 58 |   width: 96%;
 59 |   margin: 3px;
 60 |   font-size: 18px;
 61 |   color: var(--about-text-color);
 62 |   padding: 2px 15px 20px 15px;
 63 | }
 64 | h4 {
 65 |   font-size: 17px;
 66 |   font-weight: 500;
 67 | }
 68 | h4 span {
 69 |   font-size: 18px;
 70 |   font-weight: 700;
 71 |   color: #ff5823;
 72 | }
 73 | .abc h4,
 74 | .xyz h4 {
 75 |   color: var(--about-text-color);
 76 | }
 77 | .personal_info {
 78 |   width: 90%;
 79 |   justify-content: space-around;
 80 |   flex-direction: row;
 81 | }
 82 | 
 83 | @media screen and (min-width: 1024px) {
 84 |   .my_info {
 85 |     gap: 21px;
 86 |   }
 87 |   .my_info p {
 88 |     font-size: 18px;
 89 |   }
 90 |   .my_img {
 91 |     width: 45%;
 92 |   }
 93 |   .my_img img {
 94 |     width: 567px;
 95 |   }
 96 | }
 97 | @media screen and (max-width: 1024px) {
 98 |   .my_img img {
 99 |     width: 523px;
100 |   }
101 |   .my_info {
102 |     gap: 27px;
103 |   }
104 | }
105 | @media screen and (max-width: 925px) {
106 |   .my_img img {
107 |     width: 500px;
108 |   }
109 | 
110 |   .my_img {
111 |     width: 100%;
112 |     margin: 0;
113 |   }
114 |   .container_01 {
115 |     flex-direction: column;
116 |   }
117 |   .my_info {
118 |     width: 100%;
119 |   }
120 | }
121 | @media screen and (max-width: 720px) {
122 |   .personal_info {
123 |     flex-direction: column;
124 |     margin: 1px 0px 15px 0px;
125 |   }
126 | }
127 | @media screen and (max-width: 580px) {
128 |   .my_img {
129 |     width: 90%;
130 |   }
131 | }
132 | @media screen and (max-width: 480px) {
133 |   .container_01 {
134 |     width: 100%;
135 |     flex-direction: column;
136 |     position: relative;
137 |     padding: 15px 0 25px 0;
138 |   }
139 |   .my_img img {
140 |     width: 100%;
141 |   }
142 |   .my_info {
143 |     width: 90%;
144 |   }
145 |   .my_info h2 {
146 |     margin: 10px;
147 |   }
148 |   .my_info p {
149 |     width: 100%;
150 |   }
151 |   .personal_info {
152 |     width: 100%;
153 |   }
154 | }
155 | 


--------------------------------------------------------------------------------
/src/pages/AboutPage.js:
--------------------------------------------------------------------------------
 1 | import React, { useContext } from 'react';
 2 | import { ServiceContext } from '../ServiceContext';
 3 | import Skeleton from './components/Loaders/Skeleton';
 4 | import './AboutPage.css';
 5 | 
 6 | const AboutPage = () => {
 7 |   const { utilData, isDarkMode } = useContext(ServiceContext);
 8 |   console.log(utilData);
 9 |   return (
10 |     <section
11 |       className={`about_me ${isDarkMode ? 'dark' : 'light'}`}
12 |       id="about_myself"
13 |     >
14 |       <div className="container_01">
15 |         <div className="my_img">
16 |           {utilData?.globalImages?.about_me_img ? (
17 |             <img
18 |               id="img"
19 |               src={utilData?.globalImages?.about_me_img}
20 |               alt="profile_image"
21 |             />
22 |           ) : (
23 |             <Skeleton props={{ width: '90%', height: '100%' }} />
24 |           )}
25 |         </div>
26 |         <div className="my_info">
27 |           <h2>
28 |             About <span>Me</span>
29 |           </h2>
30 |           <p>
31 |             I am a Developer and Designer based in Pune, India 🌍. I have always
32 |             been fascinated by Knowledge 🧠 and learning new things. Throughout
33 |             my life, I have spoken, read and written in English fluently.
34 |             Currently, I'm exploring Restful API's 👩🏾‍💻 as part of my skillset.
35 |             When not working on projects or spending time with family or
36 |             friends, you can usually find me watching YouTube videos 💻 or
37 |             listening to music 🎧. As an experienced Web developer who is
38 |             skilled in many areas of development 😎 (responsive design being
39 |             one),I would love to work with businesses both small and large!
40 |           </p>
41 |           <div className="personal_info">
42 |             {utilData?.HomeStyle?.personal_info_data?.map((data, index) => {
43 |               return (
44 |                 <>
45 |                   <div className="abc" key={index}>
46 |                     {data.section_one.map((e, index) => {
47 |                       return (
48 |                         <h4 key={index}>
49 |                           <span>{e.data_type} :</span> {e.data_value}
50 |                         </h4>
51 |                       );
52 |                     })}
53 |                   </div>
54 |                   <div className="xyz">
55 |                     {data.section_two.map((e, index) => {
56 |                       return (
57 |                         <h4>
58 |                           <span>{e.data_type} :</span> {e.data_value}
59 |                         </h4>
60 |                       );
61 |                     })}
62 |                   </div>
63 |                 </>
64 |               );
65 |             })}
66 |           </div>
67 |         </div>
68 |       </div>
69 |     </section>
70 |   );
71 | };
72 | 
73 | export default AboutPage;
74 | 


--------------------------------------------------------------------------------
/src/pages/ContactPage.css:
--------------------------------------------------------------------------------
  1 | .light {
  2 |   --contact-background-color: #d6dbd2;
  3 |   --contact-container: #8989891c;
  4 |   --contact-container-right: #0000001c;
  5 |   --text-color: #161616;
  6 |   --bg-shadow: #8f8f8f;
  7 |   --input-text: #202020;
  8 | }
  9 | 
 10 | .dark {
 11 |   --contact-background-color: #070600;
 12 |   --contact-container: #c5c2c21a;
 13 |   --contact-container-right: #6e6e6e1c;
 14 |   --text-color: #d9d9d9;
 15 |   --bg-shadow: #000;
 16 |   --input-text: #afafaf;
 17 | }
 18 | 
 19 | .contact_page_section {
 20 |   padding: 60px 0;
 21 |   background: var(--contact-background-color);
 22 | }
 23 | .contact_section {
 24 |   width: 90%;
 25 |   flex-direction: column;
 26 |   border-radius: 10px;
 27 | }
 28 | .contact_page_section,
 29 | .contact_section,
 30 | .contact_container,
 31 | .form_container_right,
 32 | .form_container_left,
 33 | .user_form,
 34 | .user_send_msg_button,
 35 | .submit_msg,
 36 | .user_message_form h3,
 37 | .user_message_form p,
 38 | .contact_data_class {
 39 |   display: flex;
 40 |   justify-content: center;
 41 |   align-items: center;
 42 |   align-content: center;
 43 | }
 44 | 
 45 | .contact_container,
 46 | .contact_page_section,
 47 | .user_form,
 48 | .user_message_form,
 49 | .your_info_data {
 50 |   width: 100%;
 51 | }
 52 | 
 53 | .form_container_right {
 54 |   width: 100%;
 55 |   background-color: var(--contact-container-right);
 56 | }
 57 | 
 58 | .user_message_form {
 59 |   padding: 15px 0;
 60 | }
 61 | .username_val,
 62 | .user_msg,
 63 | .name_val {
 64 |   display: flex;
 65 |   flex-direction: column;
 66 |   margin: 9px;
 67 |   color: var(--text-color);
 68 | }
 69 | input {
 70 |   height: 39px;
 71 |   line-height: 54px;
 72 | }
 73 | 
 74 | .submit_msg {
 75 |   height: 45px;
 76 |   width: 95%;
 77 |   gap: 9px;
 78 |   background: #9a24b9;
 79 |   border: 1px solid #9a24b9;
 80 |   color: #fff;
 81 |   margin: 9px 0 0 0;
 82 |   font-size: 18px;
 83 |   font-weight: 500;
 84 |   transition: ease-in-out 0.5s;
 85 |   border-radius: 3px;
 86 | }
 87 | .submit_msg:active {
 88 |   transform: scale(0.9);
 89 | }
 90 | input,
 91 | textarea {
 92 |   border: 1px solid #000000;
 93 |   border-radius: 3px;
 94 |   box-shadow: 0 0 2px 1px #ffffff9e;
 95 |   outline: none;
 96 |   padding-left: 20px;
 97 |   color: var(--input-text);
 98 |   background: #28282800;
 99 | }
100 | textarea {
101 |   padding-top: 12px;
102 |   height: 111px;
103 | }
104 | label {
105 |   font-size: 15px;
106 |   font-weight: 600;
107 | }
108 | label,
109 | input {
110 |   margin-bottom: 9px;
111 | }
112 | .user_message_form span {
113 |   color: #9a24b9;
114 |   margin-left: 5px;
115 | }
116 | .user_message_form span:hover {
117 |   color: #e32eff;
118 | }
119 | 
120 | .user_message_form h3 {
121 |   font-size: 39px;
122 | }
123 | .user_message_form p {
124 |   font-size: 18px;
125 |   color: var(--text-color);
126 | }
127 | .contact_data_class {
128 |   gap: 10px;
129 |   margin: 15px 0 21px 0;
130 |   font-size: 18px;
131 |   font-family: inherit;
132 |   padding: 10px 21px;
133 | }
134 | .form_container_left {
135 |   width: 90%;
136 | }
137 | .contact_container {
138 |   background: var(--contact-container);
139 |   box-shadow: 0px 0px 6px 1px var(--bg-shadow);
140 | }
141 | .user_message_form h3 {
142 |   color: var(--text-color);
143 | }
144 | @media screen and (min-width: 1024px) {
145 |   .contact_page_section {
146 |     padding-top: 115px !important;
147 |   }
148 | 
149 |   input,
150 |   textarea {
151 |     border: 1px solid #9a9a9a5e;
152 |     border-radius: 3px;
153 |     box-shadow: 0 0 2px 1px var(--bg-shadow);
154 |   }
155 |   .contact_container {
156 |     width: 100%;
157 |     overflow-x: hidden;
158 |     overflow-y: hidden;
159 |     border-radius: 10px;
160 |     flex-direction: row;
161 |   }
162 |   .form_container_left {
163 |     color: #9f9f9f;
164 |   }
165 | 
166 |   .contact_section {
167 |     width: 1042px;
168 |     background: none !important;
169 |   }
170 |   .user_form {
171 |     width: 80%;
172 |   }
173 |   .form_container_right {
174 |     background-size: cover;
175 |   }
176 |   .contact_data_class {
177 |     margin: 30px 0 30px 0;
178 |   }
179 |   .form_container_left .form_container_right {
180 |     width: 50%;
181 |   }
182 | 
183 |   .your_info_data {
184 |     margin: 0 0 0 10px;
185 |   }
186 | 
187 |   .contact_data_class {
188 |     gap: 14px;
189 |   }
190 |   .user_message_form h3,
191 |   .user_message_form p {
192 |     margin-left: 8px;
193 |     justify-content: flex-start;
194 |   }
195 | }
196 | 
197 | @media screen and (max-width: 1024px) {
198 |   .form_container_right {
199 |     width: 100%;
200 |   }
201 | 
202 |   .contact_container {
203 |     border-radius: 6px;
204 |   }
205 |   .contact_container {
206 |     justify-content: space-evenly;
207 |     flex-direction: column-reverse;
208 |   }
209 |   .contact_section {
210 |     height: 100%;
211 |     margin: 0;
212 |   }
213 | }
214 | @media screen and (max-width: 720px) {
215 |   .form_container_left {
216 |     width: 90%;
217 |     margin: 0px;
218 |     padding: 20px 0;
219 |   }
220 | }
221 | 
222 | @media screen and (max-width: 580px) {
223 |   .user_message_form h3,
224 |   .user_message_form p {
225 |     margin-left: 8px;
226 |     justify-content: flex-start;
227 |   }
228 |   .user_message_form {
229 |     padding: 0px !important;
230 |   }
231 |   .contact_page_section {
232 |     padding-top: 90px !important;
233 |   }
234 | }
235 | 


--------------------------------------------------------------------------------
/src/pages/ContactPage.js:
--------------------------------------------------------------------------------
  1 | import React, { useContext, useRef, useState } from 'react';
  2 | import Spinner from './components/Loaders/Spinner';
  3 | import { BiLogInCircle } from 'react-icons/bi';
  4 | import { ToastContainer, toast } from 'react-toastify';
  5 | import 'react-toastify/dist/ReactToastify.css';
  6 | import emailjs from 'emailjs-com';
  7 | import { ServiceContext } from '../ServiceContext';
  8 | import './ContactPage.css';
  9 | 
 10 | const ContactPage = (props) => {
 11 |   const { uri, isDarkMode, utilData } = useContext(ServiceContext);
 12 |   const url = `${uri}/${process.env.REACT_APP_CONTACT}`;
 13 |   const [pvalue, setPvalue] = useState(0);
 14 |   const [userMsg, setUserMsg] = useState({
 15 |     name: '',
 16 |     email: '',
 17 |     message: '',
 18 |   });
 19 | 
 20 |   const form = useRef();
 21 | 
 22 |   const toastOptions = {
 23 |     position: 'top-right',
 24 |     autoClose: 8000,
 25 |     pauseOnHover: true,
 26 |     theme: 'dark',
 27 |   };
 28 |   const handleInputs = (event) => {
 29 |     setUserMsg({ ...userMsg, [event.target.name]: event.target.value });
 30 |   };
 31 |   const handleValidation = () => {
 32 |     const { name, email, message } = userMsg;
 33 | 
 34 |     if (message.length < 5) {
 35 |       toast.error('Message is required', toastOptions);
 36 |       return false;
 37 |     } else if (name === '') {
 38 |       toast.error('Enter your name here.', toastOptions);
 39 |       return false;
 40 |     } else if (name.length < 2) {
 41 |       toast.error('Enter your full name', toastOptions);
 42 |       return false;
 43 |     } else if (email === '') {
 44 |       toast.error('Email is required', toastOptions);
 45 |       return false;
 46 |     }
 47 |     return true;
 48 |   };
 49 |   // const operator = async (e) => {
 50 |   //   e.preventDefault();
 51 |   //   const { name, email, message } = userMsg;
 52 |   //   const requestOptions = {
 53 |   //     name,
 54 |   //     email,
 55 |   //     message,
 56 |   //   };
 57 |   //   console.log(requestOptions);
 58 | 
 59 |   //   if (handleValidation()) {
 60 |   //     setPvalue(1);
 61 |   //     const res = await fetch(url, {
 62 |   //       method: 'POST',
 63 |   //       headers: {
 64 |   //         'Content-Type': 'application/json',
 65 |   //       },
 66 |   //       body: JSON.stringify(requestOptions),
 67 |   //     });
 68 | 
 69 |   //     const data = await res.json();
 70 | 
 71 |   //     if (data) {
 72 |   //       setPvalue(0);
 73 |   //       emailjs.send(
 74 |   //         'service_mcjo9r8',
 75 |   //         'template_bp5qxel',
 76 |   //         form.current,
 77 |   //         'vjE1B1bCwi4pnyP7J'
 78 |   //       );
 79 | 
 80 |   //       toast.success(data.message, toastOptions);
 81 |   //       e.stopPropagation();
 82 |   //     }
 83 |   //     console.log(data);
 84 |   //     toast.error(data.error, toastOptions);
 85 |   //   }
 86 |   // };
 87 | 
 88 |   const operator = async (e) => {
 89 |     e.preventDefault();
 90 |     const { name, email, message } = userMsg;
 91 |     const requestOptions = {
 92 |       name,
 93 |       email,
 94 |       message,
 95 |     };
 96 | 
 97 |     // Validate the form fields
 98 |     if (!handleValidation()) {
 99 |       return;
100 |     }
101 | 
102 |     setPvalue(1);
103 | 
104 |     try {
105 |       // Send POST request
106 |       const res = await fetch(url, {
107 |         method: 'POST',
108 |         headers: {
109 |           'Content-Type': 'application/json',
110 |         },
111 |         body: JSON.stringify(requestOptions),
112 |       });
113 | 
114 |       if (res.ok) {
115 |         // Email send operation
116 |         await emailjs.send(
117 |           'service_mcjo9r8',
118 |           'template_bp5qxel',
119 |           form.current,
120 |           'vjE1B1bCwi4pnyP7J'
121 |         );
122 | 
123 |         // Successful response
124 |         const data = await res.json();
125 |         setPvalue(0);
126 |         toast.success(data.message, toastOptions);
127 | 
128 |         // Clear the form fields
129 |         setUserMsg({
130 |           name: '',
131 |           email: '',
132 |           message: '',
133 |         });
134 |       } else {
135 |         // Handle fetch error
136 |         throw new Error('Failed to send data');
137 |       }
138 |     } catch (error) {
139 |       // Handle fetch and emailjs errors
140 |       console.error('Error sending data:', error);
141 |       setPvalue(0);
142 |       toast.error('An error occurred while sending data', toastOptions);
143 |     }
144 |   };
145 | 
146 |   return (
147 |     <section
148 |       className={`contact_page_section ${isDarkMode ? 'dark' : 'light'}`}
149 |       id="contact_page"
150 |     >
151 |       <div className="contact_section">
152 |         <div className="contact_container">
153 |           <div className="form_container_left">
154 |             <div className="user_form">
155 |               <ToastContainer />
156 |               <form
157 |                 className="user_message_form"
158 |                 method="POST"
159 |                 onSubmit={operator}
160 |               >
161 |                 <h3>
162 |                   Get in <span> Touch </span>
163 |                 </h3>
164 |                 <p>We're open for any suggestions</p>
165 |                 <div className="name_val">
166 |                   <label htmlFor="name">Name</label>
167 |                   <input
168 |                     type="text"
169 |                     name="name"
170 |                     value={userMsg.name}
171 |                     onChange={handleInputs}
172 |                     autoComplete="off"
173 |                   />
174 |                 </div>
175 |                 <div className="username_val">
176 |                   <label htmlFor="name">Email-id</label>
177 |                   <input
178 |                     type="email"
179 |                     name="email"
180 |                     value={userMsg.email}
181 |                     onChange={handleInputs}
182 |                     autoComplete="off"
183 |                   />
184 |                 </div>
185 |                 <div className="user_msg">
186 |                   <label htmlFor="msg">Message</label>
187 |                   <textarea
188 |                     type="text"
189 |                     name="message"
190 |                     id="user_text_area"
191 |                     cols="30"
192 |                     rows="6"
193 |                     value={userMsg.message}
194 |                     onChange={handleInputs}
195 |                   ></textarea>
196 |                 </div>
197 |                 <div className="user_send_msg_button">
198 |                   <button
199 |                     className="submit_msg"
200 |                     id="user_msg_btn"
201 |                     disabled={pvalue !== 0}
202 |                     style={{
203 |                       background: pvalue !== 0 ? '#d2b3e5' : '',
204 |                       border: pvalue !== 0 ? '#d2b3e5' : '',
205 |                     }}
206 |                   >
207 |                     {pvalue ? (
208 |                       <Spinner
209 |                         id="your_spinner_d"
210 |                         style={pvalue ? 'flex' : 'none'}
211 |                       />
212 |                     ) : (
213 |                       <BiLogInCircle />
214 |                     )}
215 |                     Send
216 |                   </button>
217 |                 </div>
218 |               </form>
219 |             </div>
220 |           </div>
221 |           <img
222 |             src={utilData?.globalImages?.contact_me_img}
223 |             className="form_container_right"
224 |             alt="contact images"
225 |           ></img>
226 |         </div>
227 |       </div>
228 |     </section>
229 |   );
230 | };
231 | 
232 | export default ContactPage;
233 | 


--------------------------------------------------------------------------------
/src/pages/EducationCert.css:
--------------------------------------------------------------------------------
 1 | .light {
 2 |   --educ-background-color: #d6dbd2;
 3 |   /* #f7d488; */
 4 |   --educ-container-color: #d6dbd2;
 5 |   --educ-shadow: #ff5d5d70;
 6 |   --educ-text-color: #000000;
 7 | }
 8 | 
 9 | .dark {
10 |   --educ-background-color: #070600;
11 |   --educ-container-color: #8f8f8f29;
12 |   --educ-shadow: #ff2727a8;
13 |   --educ-text-color: #ffffff;
14 | }
15 | .educ_cert {
16 |   display: flex;
17 |   justify-content: center;
18 |   flex-direction: column;
19 |   background-color: var(--educ-background-color);
20 |   height: 100%;
21 |   padding-top: 39px;
22 | }
23 | h2 {
24 |   margin: 100px;
25 | }
26 | .educ_cert h2 {
27 |   color: var(--about-text-color);
28 |   text-shadow: 0px 0px 50px #4343437a;
29 |   padding-bottom: 20px;
30 | }
31 | @media screen and (max-width: 1024px) {
32 |   .educ_cert {
33 |     padding-top: 64px;
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/src/pages/EducationCert.js:
--------------------------------------------------------------------------------
 1 | import React, { useContext } from 'react';
 2 | import Certificates from './components/EducationInterface/Certificates';
 3 | import Education from './components/EducationInterface/Education';
 4 | import { ServiceContext } from '../ServiceContext';
 5 | import './EducationCert.css';
 6 | 
 7 | const EducationCert = () => {
 8 |   const { isDarkMode } = useContext(ServiceContext);
 9 |   return (
10 |     <>
11 |       <div
12 |         className={`educ_cert ${isDarkMode ? 'dark' : 'light'}`}
13 |         id="my-background"
14 |       >
15 |         <Education />
16 |         <Certificates />
17 |       </div>
18 |     </>
19 |   );
20 | };
21 | 
22 | export default EducationCert;
23 | 


--------------------------------------------------------------------------------
/src/pages/Frontpage.css:
--------------------------------------------------------------------------------
  1 | /* ------------------- global styles  */
  2 | .profile-container,
  3 | .profile-parent {
  4 |   display: flex;
  5 |   text-align: center;
  6 | }
  7 | 
  8 | .light {
  9 |   --background-color: #302865;
 10 |   --text-f-color: #9f9f9f;
 11 |   --text-btn-color: #efefef29;
 12 | }
 13 | 
 14 | .dark {
 15 |   --background-color: #050517;
 16 |   --text-f-color: #9f9f9f;
 17 |   --text-btn-color: #0e55d8;
 18 | }
 19 | .primary-text h1 {
 20 |   color: var();
 21 | }
 22 | .btn {
 23 |   border-radius: 50px;
 24 |   padding: 14px 0;
 25 |   width: 160px;
 26 |   cursor: pointer;
 27 |   transition: 0.2s;
 28 |   outline: none;
 29 |   border: none;
 30 | }
 31 | 
 32 | .btn:active {
 33 |   transform: translateY(2px);
 34 | }
 35 | 
 36 | .primary-btn {
 37 |   border: 2px solid linen;
 38 |   font-size: 12px;
 39 |   background-color: var(--dark-fans);
 40 | }
 41 | .profile-details-name p {
 42 |   font-size: 54px;
 43 |   line-height: 63px;
 44 |   color: transparent;
 45 |   font-weight: 600;
 46 |   text-transform: uppercase;
 47 |   color: #041c34;
 48 |   -webkit-text-stroke: 1px #fff;
 49 |   text-shadow: 0px 0px 50px #3aaef77a;
 50 | }
 51 | .primary-btn:hover {
 52 |   color: aliceblue;
 53 |   border: 2px solid #3b80ff;
 54 |   background-color: #1f2235;
 55 | }
 56 | 
 57 | .highlighted-btn {
 58 |   color: var(--white);
 59 |   font-size: 12px;
 60 |   background-color: var(--text-btn-color);
 61 | }
 62 | 
 63 | @media only screen and (max-width: 568px) {
 64 |   .highlighted-btn {
 65 |     z-index: -900;
 66 |   }
 67 | }
 68 | 
 69 | .red-border {
 70 |   border: 1px solid var(--error-message) !important;
 71 | }
 72 | 
 73 | .fade-in {
 74 |   opacity: 0;
 75 |   transform: translateY(80px);
 76 |   transition: all 0.8s ease;
 77 | }
 78 | 
 79 | .profile-container {
 80 |   height: 100vh;
 81 |   justify-content: flex-start;
 82 |   background-color: var(--background-color);
 83 |   position: sticky;
 84 |   flex-direction: column;
 85 |   align-items: center;
 86 |   justify-content: center;
 87 | }
 88 | .profile-parent {
 89 |   width: 90%;
 90 |   text-align: left;
 91 |   justify-content: center;
 92 | }
 93 | .profile-details-name {
 94 |   font-size: 30px;
 95 |   line-height: 40px;
 96 | }
 97 | .profile-details-role {
 98 |   display: flex;
 99 |   flex-direction: column;
100 |   margin: 15px 0 18px 0;
101 | }
102 | .profile-details-role h1 {
103 |   font-size: 24px;
104 |   line-height: 32px;
105 |   margin: 0 0 6px 0;
106 |   text-shadow: 0px 0px 50px rgba(0, 133, 234, 0.5);
107 | }
108 | 
109 | .colz {
110 |   padding: 12px 0px;
111 | }
112 | .primary-text {
113 |   color: (--white);
114 |   font-size: 24px;
115 | }
116 | 
117 | .highlighted-text {
118 |   text-shadow: 0 0 9px #1d1122;
119 |   color: #ffffff;
120 |   margin-right: 9px;
121 |   margin-left: 12px;
122 |   font-weight: 600;
123 | }
124 | .profile-role-tagline {
125 |   font-size: 16px;
126 |   line-height: 24px;
127 |   margin: 5px 0 0 0;
128 |   color: var(--text-f-color);
129 | }
130 | .profile-options .highlighted-btn {
131 |   margin: 0 0 0 28px;
132 | }
133 | .profile-options .highlighted-btn:hover {
134 |   margin: 0 0 0 28px;
135 |   background-color: cornsilk;
136 |   color: #111;
137 | }
138 | .profile-picture {
139 |   display: flex;
140 |   align-items: center;
141 |   justify-content: center;
142 |   box-shadow: 0px 3px 0px 0px #ffffff;
143 |   height: 400px;
144 |   width: 400px;
145 |   border-radius: 50%;
146 | }
147 | 
148 | .profile-picture-background:hover {
149 |   animation: bounce_one 1s infinite;
150 |   transition-property: all;
151 |   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
152 |   transition-duration: 0.15s;
153 | }
154 | @keyframes bounce_one {
155 |   0% {
156 |     transform: translateY(0);
157 |   }
158 |   40%,
159 |   60% {
160 |     transform: translateY(-9px);
161 |   }
162 |   70% {
163 |     transform: translateY(-8px);
164 |   }
165 | }
166 | .profile-picture a {
167 |   display: flex;
168 |   align-items: center;
169 |   justify-content: center;
170 | }
171 | .profile-picture-background {
172 |   height: 90%;
173 |   width: 90%;
174 |   background-size: cover;
175 |   background-repeat: no-repeat;
176 |   background-position: center;
177 | }
178 | 
179 | .colz .colz-icon i {
180 |   color: #fff;
181 |   padding: 8px;
182 |   padding-left: 0px;
183 |   font-size: 18px;
184 | }
185 | 
186 | .colz .colz-icon i:hover {
187 |   transform: scale(1.5);
188 | }
189 | 
190 | @media screen and (min-width: 1024px) {
191 |   .profile-details {
192 |     width: 50%;
193 |   }
194 | 
195 |   .profile-picture {
196 |     margin: 0 0px 0 80px;
197 |   }
198 |   .profile-details-name {
199 |     font-size: 20px;
200 |   }
201 |   .profile-details-role .primary-text {
202 |     font-size: 12px;
203 |   }
204 |   .profile-options .btn {
205 |     width: 120px;
206 |     padding: 11px 0;
207 |     z-index: 700;
208 |     height: 47px;
209 |     color: #fff;
210 |   }
211 | }
212 | @media screen and (max-width: 1024px) {
213 |   .profile-details-name p {
214 |     font-size: 45px;
215 |     line-height: 54px;
216 |   }
217 |   .profile-parent {
218 |     height: 80vh;
219 |     align-items: center;
220 |   }
221 |   .profile-picture {
222 |     display: none;
223 |   }
224 | }
225 | @media screen and(max-width:910px) {
226 |   .profile-picture {
227 |     height: 320px;
228 |     width: 320px;
229 |     margin: 0 0 0 4px;
230 |   }
231 | }
232 | @media screen and (max-width: 810px) {
233 |   .profile-container {
234 |     height: 100% !important;
235 |     width: 100%;
236 |     padding: 18px 0 21px 0;
237 |     background-size: cover;
238 |     /* clip-path: polygon(100% 0, 100% 96%, 54% 100%, 0 94%, 0 0); */
239 |   }
240 |   .profile-picture {
241 |     margin-bottom: 30px;
242 |     display: flex;
243 |   }
244 |   .profile-details-role h1 {
245 |     height: 100px;
246 |     text-align: center;
247 |     display: none !important;
248 |   }
249 |   .profile-details-name p {
250 |     font-size: 30px;
251 |     line-height: 36px;
252 |     text-decoration-color: blueviolet;
253 |   }
254 |   .profile-parent {
255 |     padding-top: 60px !important;
256 |     flex-direction: column-reverse;
257 |     margin-bottom: 50px !important;
258 |     width: 90%;
259 |     height: 100% !important;
260 |     justify-content: center;
261 |     text-align: center;
262 |     align-items: center;
263 |   }
264 |   .profile-options {
265 |     display: flex;
266 |     justify-content: space-around;
267 |     margin-top: 10px;
268 |   }
269 |   .profile-deails {
270 |     display: flex;
271 |     margin-top: 15px;
272 |     margin: 25px 0 0;
273 |     justify-content: center;
274 |     text-align: center;
275 |   }
276 |   .primary-text {
277 |     line-height: 24px;
278 |   }
279 | 
280 |   .colz .colz-icon i {
281 |     color: #ffffff;
282 |     text-shadow: 0px 0px 1px #ffffff;
283 |   }
284 |   .profile-options .highlighted-btn {
285 |     margin: 0 !important;
286 |   }
287 |   .profile-options button {
288 |     font-size: 14px !important;
289 |   }
290 |   .profile-options,
291 |   .profile-details-role {
292 |     text-align: center;
293 |   }
294 |   .profile-options {
295 |     padding-bottom: 31px;
296 |   }
297 | }
298 | @media screen and (max-width: 480px) {
299 |   .primary-text {
300 |     width: 100%;
301 |   }
302 |   .profile-parent {
303 |     margin: 0 0 45px 0 !important;
304 |     padding-top: 60px;
305 |   }
306 |   .profile-deails {
307 |     margin-top: 12px;
308 |     display: flex;
309 |     flex-direction: column;
310 |     justify-content: center;
311 |   }
312 |   .profile-options {
313 |     z-index: 10;
314 |     position: relative;
315 |   }
316 | }
317 | @media screen and (max-width: 420px) {
318 |   .profile-picture {
319 |     height: 342px;
320 |     width: 342px;
321 |   }
322 |   .profile-picture-background {
323 |     height: 85%;
324 |     width: 85%;
325 |   }
326 |   .profile-details-name {
327 |     margin: 6px 0 0 0;
328 |   }
329 |   .profile-details-role h1 {
330 |     margin: 0 0 6px 0;
331 |     text-align: center;
332 |     height: 90px;
333 |   }
334 | }
335 | @media screen and (max-width: 375px) {
336 |   .profile-picture {
337 |     height: 325px;
338 |     width: 100%;
339 |   }
340 |   .profile-deails {
341 |     width: 90%;
342 |   }
343 | }
344 | @media screen and (max-width: 330px) {
345 |   .profile-options {
346 |     flex-direction: column;
347 |     gap: 20px;
348 |   }
349 | }
350 | 


--------------------------------------------------------------------------------
/src/pages/Frontpage.js:
--------------------------------------------------------------------------------
 1 | import React, { useContext } from 'react';
 2 | import SocialMediaLinks from './components/SocialMediaLinks';
 3 | import SvgBackground from '../pages/components/Loaders/SvgBackground.jsx';
 4 | import TypeWriterEffect from 'react-typewriter-effect';
 5 | import { ServiceContext } from '../ServiceContext';
 6 | import Skeleton from './components/Loaders/Skeleton';
 7 | import { HashLink } from 'react-router-hash-link';
 8 | import './Frontpage.css';
 9 | 
10 | const Frontpage = () => {
11 |   const { utilData, isDarkMode } = useContext(ServiceContext);
12 |   document.body.style = `background: ${isDarkMode ? '#1c2541' : '#f7d488'};`;
13 |   return (
14 |     <>
15 |       <div
16 |         className={`profile-container ${isDarkMode ? 'dark' : 'light'}`}
17 |         id="home_page"
18 |       >
19 |         <div className="profile-parent">
20 |           <div className="profile-details">
21 |             <div className="profile-details-name">
22 |               <p className="primary-text">
23 |                 Hello, I'M
24 |                 <span className="highlighted-text">Ganesh Ghadge</span>
25 |               </p>
26 |             </div>
27 |             <div className="profile-details-role">
28 |               <span className="primary-text">
29 |                 <h1
30 |                   style={{
31 |                     display: 'flex',
32 |                     gap: '6px',
33 |                     color: `#fff`,
34 |                   }}
35 |                 >
36 |                   I am into
37 |                   <span
38 |                     style={{ color: `${isDarkMode ? '#5198ff' : '#d6abff'}` }}
39 |                     className="type_effect"
40 |                   >
41 |                     <TypeWriterEffect
42 |                       multiTextLoop
43 |                       cursorColor="#f3f4f6"
44 |                       multiText={[
45 |                         'Frontend Development',
46 |                         'Backend Development',
47 |                         'Commpetitive Programmer',
48 |                         'Open-Source ',
49 |                       ]}
50 |                       multiTextDelay={1000}
51 |                       typeSpeed={100}
52 |                     />
53 |                   </span>
54 |                 </h1>
55 |                 <span className="profile-role-tagline">
56 |                   I make websites that are easy to use, meet the client's needs,
57 |                   and work well even as they grow. I pay close attention to
58 |                   every little thing to make sure they work fast and are
59 |                   reliable.
60 |                 </span>
61 |               </span>
62 |               <div className="colz">
63 |                 <SocialMediaLinks />
64 |               </div>
65 |             </div>
66 | 
67 |             <div className="profile-options">
68 |               <HashLink to="/contact-me">
69 |                 <button className="btn primary-btn">Hire Me</button>
70 |               </HashLink>
71 |               <a href="./New_Ganesh_Ghadge_Resume.pdf" download>
72 |                 <button className="btn highlighted-btn">Get Resume</button>
73 |               </a>
74 |             </div>
75 |           </div>
76 |           <div className="profile-picture">
77 |             {utilData?.globalImages?.profile_img ? (
78 |               <img
79 |                 className="profile-picture-background polygoncls"
80 |                 src={utilData?.globalImages?.profile_img}
81 |                 alt="profile-img"
82 |               />
83 |             ) : (
84 |               <Skeleton
85 |                 className="polygoncls"
86 |                 props={{ width: '90%', height: '90%' }}
87 |               />
88 |             )}
89 |           </div>
90 |         </div>
91 |         <SvgBackground />
92 |       </div>
93 |     </>
94 |   );
95 | };
96 | 
97 | export default Frontpage;
98 | 


--------------------------------------------------------------------------------
/src/pages/NewSkillsPage.css:
--------------------------------------------------------------------------------
  1 | .light {
  2 |   --skill-background-color: #c2afff;
  3 |   --skill-container-color: #dcdcdc69;
  4 |   --skill-hover: #dcdcdcaa;
  5 | }
  6 | 
  7 | .dark {
  8 |   --skill-background-color: #070600;
  9 |   --skill-container-color: #8f8f8f29;
 10 |   --skill-hover: #393939aa;
 11 | }
 12 | .my_skills {
 13 |   display: flex;
 14 |   justify-content: center;
 15 | }
 16 | 
 17 | .my_skills,
 18 | .section_container_skills_gif,
 19 | .contain_div {
 20 |   color: #dcdcdc;
 21 | }
 22 | section_container_skills_gif div {
 23 |   color: #626262;
 24 | }
 25 | .my_skills span {
 26 |   color: #ff5823;
 27 | }
 28 | h2 {
 29 |   width: 90% !important;
 30 |   margin: 0px !important;
 31 |   text-align: center !important;
 32 | }
 33 | .my_skills h2 {
 34 |   color: var(--work-text-color);
 35 |   text-shadow: 0px 0px 50px #a4a4a47a;
 36 | }
 37 | #my_skill {
 38 |   min-height: 100vh;
 39 |   padding: 109px 0 0 0;
 40 |   background: var(--skill-background-color);
 41 | }
 42 | .section_container_skills_gif {
 43 |   width: 100%;
 44 |   flex-direction: column;
 45 |   padding: 19px 0;
 46 | }
 47 | .skills_gif_container {
 48 |   width: 90%;
 49 |   gap: 12px;
 50 | }
 51 | .section_container_skills_gif,
 52 | .skills_gif_container div,
 53 | .skills_gif_container img,
 54 | .skill_box,
 55 | .content_img_container {
 56 |   display: flex;
 57 |   align-items: center;
 58 |   justify-content: center;
 59 |   align-content: center;
 60 | }
 61 | 
 62 | .skills_gif_container div {
 63 |   border-radius: 40px;
 64 |   height: 82px;
 65 |   flex-wrap: wrap;
 66 |   width: 64%;
 67 |   background-color: var(--skill-container-color);
 68 |   color: var(--educ-text-color);
 69 |   font-weight: 500;
 70 | }
 71 | .cards:hover {
 72 |   background-color: var(--skill-hover);
 73 | }
 74 | .skills_gif_container img {
 75 |   width: 100%;
 76 |   margin-bottom: 20px;
 77 | }
 78 | .contain_div {
 79 |   width: 100%;
 80 |   display: flex;
 81 |   justify-content: center;
 82 | }
 83 | .container_s {
 84 |   z-index: 50;
 85 |   width: 90%;
 86 |   display: flex;
 87 |   flex-direction: row;
 88 |   flex-wrap: wrap;
 89 |   justify-content: center;
 90 |   padding: 30px 0;
 91 | }
 92 | .skill_box {
 93 |   border: none;
 94 |   gap: 0.5rem;
 95 |   width: 200px;
 96 |   flex-direction: column;
 97 |   margin: 9px;
 98 |   transition: ease-in-out 0.2s;
 99 |   color: var(--educ-text-color);
100 | }
101 | .skill_box:hover {
102 |   border-radius: 12px;
103 | }
104 | .skill_box:active {
105 |   transform: scale(0.9);
106 | }
107 | 
108 | .svg_blobs {
109 |   position: relative;
110 |   z-index: 1;
111 |   top: 269px;
112 |   width: 100%;
113 |   height: 400px;
114 | }
115 | .content_img_container img {
116 |   width: 3.5rem;
117 |   height: 3.5rem;
118 | }
119 | .content_img_container {
120 |   flex-direction: column;
121 |   gap: 10px;
122 |   width: 6rem;
123 |   height: 6rem;
124 |   border-radius: 50%;
125 |   background-color: var(--skill-container-color);
126 | }
127 | .content_img_container:hover {
128 |   background-color: var(--skill-hover);
129 | }
130 | .content_img_container h3 {
131 |   font-size: 24px;
132 | }
133 | @media screen and (min-width: 1024px) {
134 |   .skills_gif_container {
135 |     display: flex;
136 |     justify-content: center;
137 |     margin: 10px 0 30px 0;
138 |   }
139 |   .skills_gif_container div {
140 |     padding: 9px;
141 |     font-size: 18px;
142 |     text-align: center;
143 |     height: 109px;
144 |   }
145 |   .skills_gif_container img {
146 |     width: 900px;
147 |     height: 500px !important;
148 |   }
149 | }
150 | 
151 | @media screen and (max-width: 1023px) {
152 |   .skills_gif_container {
153 |     display: flex;
154 |     justify-content: center;
155 |     margin: 10px 0 30px 0;
156 |     width: 100%;
157 |   }
158 |   .skills_gif_container div {
159 |     padding: 32px;
160 |     font-size: 18px;
161 |     text-align: center;
162 |     min-height: 109px;
163 |     height: 215px;
164 |   }
165 | }
166 | 
167 | @media screen and (max-width: 720px) {
168 |   .my_skills {
169 |     margin: 0;
170 |     padding: 15px 0;
171 |   }
172 |   .skills_gif_container {
173 |     flex-direction: column;
174 |     align-items: center;
175 |     gap: 33px;
176 |   }
177 |   .skills_gif_container div {
178 |     width: 90%;
179 |     padding: 74px;
180 |     font-size: 16px;
181 |     height: auto;
182 |   }
183 | }
184 | 
185 | @media screen and (max-width: 580px) {
186 |   .skills_gif_container div {
187 |     height: 106px;
188 |     padding: 26px;
189 |   }
190 |   .skill_box {
191 |     width: 150px;
192 |     height: 150px;
193 |   }
194 | }
195 | 


--------------------------------------------------------------------------------
/src/pages/NewSkillsPage.js:
--------------------------------------------------------------------------------
 1 | import React, { useContext } from 'react';
 2 | import './NewSkillsPage.css';
 3 | import { ServiceContext } from '../ServiceContext';
 4 | const NewSkillsPage = () => {
 5 |   const { utilData, isDarkMode } = useContext(ServiceContext);
 6 | 
 7 |   return (
 8 |     <>
 9 |       <section id="my_skill" className={`${isDarkMode ? 'dark' : 'light'}`}>
10 |         <div className="my_skills">
11 |           <h2>
12 |             My Skills <span>&</span> Abilities
13 |           </h2>
14 |         </div>
15 |         <div className="section_container_skills_gif">
16 |           <div className="skills_gif_container">
17 |             {utilData?.SkillsCertificatesStyle?.my_skill_description?.map(
18 |               (data, index) => (
19 |                 <div className="cards" key={index}>
20 |                   {data.info}
21 |                 </div>
22 |               )
23 |             )}
24 |           </div>
25 |         </div>
26 |         <div className="contain_div">
27 |           <div className="container_s">
28 |             {utilData?.SkillsCertificatesStyle?.my_skills_data?.map(
29 |               (e, index) => (
30 |                 <div
31 |                   className="skill_box"
32 |                   key={index}
33 |                   style={{ boxShadow: `0px 0px 12px ${e.bx_shadow}` }}
34 |                   data-aos="fade-right"
35 |                   data-aos-duration="2000"
36 |                 >
37 |                   <div className="content_img_container">
38 |                     <img
39 |                       src={e.img_link}
40 |                       alt={e.img_content}
41 |                       style={{ height: e.img_height, filter: e.img_styles }}
42 |                       loading="lazy"
43 |                     />
44 |                   </div>
45 |                   <h3>{e.skill_name}</h3>
46 |                 </div>
47 |               )
48 |             )}
49 |           </div>
50 |         </div>
51 |       </section>
52 |     </>
53 |   );
54 | };
55 | 
56 | export default NewSkillsPage;
57 | 


--------------------------------------------------------------------------------
/src/pages/ProjectExPage.css:
--------------------------------------------------------------------------------
  1 | .light {
  2 |   --work-background-color: #a7ccff;
  3 |   --work-text-color: #000000;
  4 |   --work-pcontainer: #ffffff;
  5 |   --work-code-btn: #eb00ffba;
  6 |   --work-live-btn: #000;
  7 | }
  8 | 
  9 | .dark {
 10 |   --work-background-color: #020f21;
 11 |   --work-text-color: #ffffff;
 12 |   --work-pcontainer: #ffffff14;
 13 |   --work-code-btn: #0eeb00ba;
 14 |   --work-live-btn: #41aaff;
 15 | }
 16 | 
 17 | .work_page {
 18 |   display: flex;
 19 |   justify-content: center;
 20 |   position: inherit;
 21 |   flex-direction: column;
 22 |   align-items: center;
 23 |   background-color: var(--work-background-color);
 24 |   padding: 20px 0;
 25 | }
 26 | 
 27 | h2 {
 28 |   margin-top: 100px;
 29 | }
 30 | .view__btn {
 31 |   width: 120px;
 32 |   height: 39px;
 33 |   background: transparent;
 34 |   color: var(--work-live-btn);
 35 |   border: 1px solid var(--work-live-btn);
 36 |   outline: none;
 37 |   border-radius: 6px;
 38 |   font-weight: 600;
 39 |   animation: bounce 1s infinite;
 40 |   transition-property: all;
 41 |   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 42 |   transition-duration: 0.15s;
 43 |   margin-top: 30px;
 44 |   display: flex;
 45 |   align-items: center;
 46 |   justify-content: center;
 47 |   text-decoration: none;
 48 |   cursor: pointer;
 49 | }
 50 | 
 51 | @keyframes bounce {
 52 |   0% {
 53 |     transform: translateY(0);
 54 |   }
 55 |   40%,
 56 |   60% {
 57 |     transform: translateY(-9px);
 58 |   }
 59 |   70% {
 60 |     transform: translateY(-8px);
 61 |   }
 62 | }
 63 | .section {
 64 |   display: flex;
 65 |   justify-content: center;
 66 |   flex-direction: row;
 67 |   align-content: center;
 68 |   align-items: center;
 69 | }
 70 | .pcontainer {
 71 |   width: 350px;
 72 |   display: flex;
 73 |   background-color: var(--work-pcontainer);
 74 |   color: var(--work-text-color);
 75 |   box-shadow: 0px 0px 3px 0px var(--work-background-color);
 76 |   padding: 0 0 21px 0;
 77 |   align-items: center;
 78 |   justify-content: space-evenly;
 79 |   font-size: 21px;
 80 |   font-weight: 600;
 81 |   border-radius: 9px;
 82 |   flex-direction: column;
 83 |   overflow: hidden;
 84 | }
 85 | .project_work_page {
 86 |   display: flex;
 87 |   width: 90%;
 88 |   align-items: center;
 89 |   justify-content: center;
 90 |   align-content: center;
 91 |   flex-wrap: wrap;
 92 |   gap: 33px;
 93 |   z-index: 33;
 94 | }
 95 | 
 96 | .proj_component {
 97 |   width: 100%;
 98 |   display: flex;
 99 |   align-items: center;
100 |   justify-content: center;
101 |   align-content: center;
102 | }
103 | 
104 | .proj_header {
105 |   display: flex;
106 |   align-items: center;
107 |   align-content: center;
108 |   justify-content: space-evenly;
109 |   gap: 20px;
110 |   padding: 12px 20px;
111 | }
112 | .proj_btns {
113 |   width: 100%;
114 |   gap: 12px;
115 |   display: flex;
116 |   align-items: center;
117 |   justify-content: center;
118 |   align-content: center;
119 | }
120 | .proj_code {
121 |   color: var(--work-code-btn);
122 | }
123 | 
124 | .proj_live {
125 |   color: var(--work-live-btn);
126 | }
127 | .proj_code,
128 | .proj_live {
129 |   width: 150px;
130 |   height: 45px;
131 |   font-size: 15px;
132 |   font-weight: 500;
133 |   outline: none;
134 |   border: none;
135 |   border-radius: 3px;
136 |   transition: ease-in-out 0.3s;
137 | }
138 | 
139 | .proj_code,
140 | .proj_live {
141 |   background-color: #807e6e26;
142 | }
143 | .proj_code:active,
144 | .proj_live:active {
145 |   transform: scale(0.6);
146 | }
147 | .proj_live:hover {
148 |   background: #5c6bc0;
149 |   color: #fff;
150 | }
151 | .proj_code:hover {
152 |   background: #ab47bc;
153 |   color: #fff;
154 | }
155 | .pcontainer img {
156 |   width: 352px;
157 |   height: 220px;
158 | }
159 | @media screen and (min-width: 1024px) {
160 |   .view__btn {
161 |     border: 1px solid #1e88e5;
162 |   }
163 |   .pcontainer {
164 |     box-shadow: none;
165 |   }
166 | }
167 | 
168 | @media screen and (max-width: 420px) {
169 |   .project_work_page {
170 |     width: 100%;
171 |     padding: 20px 0 25px 0;
172 |   }
173 | }
174 | 
175 | @media screen and (max-width: 370px) {
176 |   .pcontainer {
177 |     width: 90%;
178 |   }
179 |   .pcontainer img {
180 |     width: 100%;
181 |   }
182 | 
183 |   .proj_header h3 {
184 |     font-size: 18px;
185 |   }
186 |   .proj_header h4 {
187 |     font-size: 15px;
188 |   }
189 |   .proj_btns a {
190 |     text-decoration: none;
191 |     width: 90%;
192 |     display: flex;
193 |     align-items: center;
194 |     justify-content: center;
195 |   }
196 | }
197 | 
198 | @media screen and (max-width: 350px) {
199 |   .proj_btns {
200 |     flex-direction: column;
201 |   }
202 |   .proj_code,
203 |   .proj_live {
204 |     width: 250px;
205 |   }
206 | }
207 | 


--------------------------------------------------------------------------------
/src/pages/ProjectExPage.js:
--------------------------------------------------------------------------------
  1 | import React, { useContext, useState } from 'react';
  2 | import ProjHome from './components/EducationInterface/ProjHome';
  3 | import { ServiceContext } from '../ServiceContext';
  4 | import { HashLink } from 'react-router-hash-link';
  5 | import './ProjectExPage.css';
  6 | 
  7 | const ProjectExPage = () => {
  8 |   const { utilData, isDarkMode } = useContext(ServiceContext);
  9 |   const [showAllCards, setShowAllCards] = useState(false);
 10 |   const visibleCards = utilData?.ProjectStyle?.proj_data?.slice(0, 5);
 11 | 
 12 |   return (
 13 |     <div>
 14 |       <div
 15 |         className={`work_page ${isDarkMode ? 'dark' : 'light'}`}
 16 |         id="my-work"
 17 |       >
 18 |         <div className="proj_component">
 19 |           <ProjHome />
 20 |         </div>
 21 |         <div className="project_work_page">
 22 |           {visibleCards?.map((e, index) => (
 23 |             <div
 24 |               className="section"
 25 |               key={index}
 26 |               data-aos="fade-up"
 27 |               data-aos-duration="2000"
 28 |             >
 29 |               <div className="pcontainer">
 30 |                 <img src={e.project_image} alt="project Images" />
 31 |                 <div className="proj_header">
 32 |                   <h3>{e.project_name}</h3>
 33 |                   <h4>{e.proj_creation_date}</h4>
 34 |                 </div>
 35 |                 <div className="proj_descriptions">
 36 |                   <p>{e.proj_description}</p>
 37 |                 </div>
 38 |                 <div className="proj_btns">
 39 |                   <a
 40 |                     href={e.proj_code_like}
 41 |                     target={e.proj_code_like !== '#' ? '_blank' : ''}
 42 |                     rel="noreferrer"
 43 |                   >
 44 |                     <button className="proj_code">Project Code</button>
 45 |                   </a>
 46 |                   <a
 47 |                     href={e.proj_live_link}
 48 |                     target={e.proj_live_link !== '#' ? '_blank' : ''}
 49 |                     rel="noreferrer"
 50 |                   >
 51 |                     <button className="proj_live">Live Project</button>
 52 |                   </a>
 53 |                 </div>
 54 |               </div>
 55 |             </div>
 56 |           ))}
 57 | 
 58 |           {showAllCards && (
 59 |             <>
 60 |               {utilData?.ProjectStyle?.proj_data?.slice(6).map((e, index) => (
 61 |                 <div
 62 |                   className="section"
 63 |                   key={index}
 64 |                   data-aos="fade-up"
 65 |                   data-aos-duration="2000"
 66 |                 >
 67 |                   <div
 68 |                     className={`pcontainer ${isDarkMode ? 'dark' : 'light'}`}
 69 |                   >
 70 |                     <img src={e.project_image} alt="project Images" />
 71 |                     <div className="proj_header">
 72 |                       <h3>{e.project_name}</h3>
 73 |                       <h4>{e.proj_creation_date}</h4>
 74 |                     </div>
 75 |                     <div className="proj_descriptions">
 76 |                       <p>{e.proj_description}</p>
 77 |                     </div>
 78 |                     <div className="proj_btns">
 79 |                       <a href={e.proj_code_like}>
 80 |                         <button className="proj_code">Project Code</button>
 81 |                       </a>
 82 |                       <a href={e.proj_live_link}>
 83 |                         <button className="proj_live">Live Project</button>
 84 |                       </a>
 85 |                     </div>
 86 |                   </div>
 87 |                 </div>
 88 |               ))}
 89 |               <div
 90 |                 style={{
 91 |                   width: '350px',
 92 |                   display: 'flex',
 93 |                   justifyContent: 'center',
 94 |                 }}
 95 |               >
 96 |                 <HashLink
 97 |                   onClick={() => setShowAllCards(false)}
 98 |                   to={'/#my-work'}
 99 |                   data-aos="fade-down"
100 |                   data-aos-duration="2000"
101 |                   className="view__btn"
102 |                 >
103 |                   Okey,I got it
104 |                 </HashLink>
105 |               </div>
106 |             </>
107 |           )}
108 | 
109 |           {!showAllCards && (
110 |             <div
111 |               style={{
112 |                 width: '350px',
113 |                 display: 'flex',
114 |                 justifyContent: 'center',
115 |               }}
116 |             >
117 |               <button
118 |                 onClick={() => setShowAllCards(true)}
119 |                 data-aos="fade-down"
120 |                 data-aos-duration="2000"
121 |                 className="view__btn"
122 |               >
123 |                 View All
124 |               </button>
125 |             </div>
126 |           )}
127 |         </div>
128 |       </div>
129 |     </div>
130 |   );
131 | };
132 | 
133 | export default ProjectExPage;
134 | 


--------------------------------------------------------------------------------
/src/pages/components/EducationInterface/Certificates.css:
--------------------------------------------------------------------------------
 1 | .my_certificates_container {
 2 |   display: flex;
 3 |   justify-content: center;
 4 |   flex-wrap: wrap;
 5 |   width: 100%;
 6 | }
 7 | .certificates_header_container {
 8 |   width: 90%;
 9 |   margin-top: -30px;
10 |   display: flex;
11 |   flex-direction: column;
12 |   align-content: center;
13 |   align-items: center;
14 | }
15 | 
16 | .certificates_data_container {
17 |   display: flex;
18 |   width: 100%;
19 |   flex-wrap: wrap;
20 |   align-content: center;
21 |   justify-content: center;
22 |   align-items: center;
23 |   gap: 24px;
24 |   margin: 15px;
25 | }
26 | .cert_data_container {
27 |   display: flex;
28 |   align-items: center;
29 |   justify-content: center;
30 |   align-content: center;
31 |   background-color: var(--educ-container-color);
32 |   color: var(--educ-text-color);
33 |   flex-direction: column;
34 |   height: 250px;
35 |   width: 363px;
36 |   cursor: pointer;
37 |   border-radius: 3px;
38 |   text-decoration: none;
39 |   transition: ease-in-out 0.7s;
40 | }
41 | .cert_data_container:active {
42 |   transform: scale(0.4);
43 | }
44 | .overlay_section {
45 |   height: 100%;
46 |   width: 100%;
47 |   display: flex;
48 |   align-items: center;
49 |   padding: 21px;
50 |   justify-content: space-around;
51 | }
52 | .overlay_section h3 {
53 |   padding: 0 10px 0 0px;
54 | }
55 | 
56 | .cert_collection {
57 |   background: #e0e0e0;
58 |   border-radius: 6px;
59 |   width: 100%;
60 |   display: flex;
61 |   align-items: center;
62 |   justify-content: center;
63 |   align-content: center;
64 |   flex-wrap: wrap;
65 | }
66 | .cert_collection img {
67 |   height: 158px;
68 | }
69 | 
70 | @media screen and (max-width: 1024px) {
71 |   .certificates_header_container {
72 |     margin: 0 !important;
73 |   }
74 |   .cert_data_container {
75 |     box-shadow: none !important;
76 |   }
77 | }
78 | @media screen and (max-width: 580px) {
79 |   .certificates_header_container {
80 |     width: 100%;
81 |   }
82 |   .cert_data_container {
83 |     width: 90%;
84 |   }
85 | }
86 | 
87 | @media screen and (max-width: 410px) {
88 |   .educ_cert h2 {
89 |     font-size: 37px;
90 |     display: flex;
91 |     justify-content: center;
92 |     align-items: center;
93 |   }
94 | }
95 | 


--------------------------------------------------------------------------------
/src/pages/components/EducationInterface/Certificates.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useContext } from 'react';
 2 | import { ServiceContext } from '../../../ServiceContext';
 3 | import './Certificates.css';
 4 | 
 5 | const Certificates = () => {
 6 |   const { utilData } = useContext(ServiceContext);
 7 |   return (
 8 |     <>
 9 |       <div className="my_certificates_container">
10 |         <div className="certificates_header_container">
11 |           <h2>
12 |             All <span>Certifications</span>
13 |           </h2>
14 |           <div className="certificates_data_container">
15 |             {utilData?.SkillsCertificatesStyle?.my_certificates_data?.map(
16 |               (data, index) => {
17 |                 return (
18 |                   <a
19 |                     className="cert_data_container"
20 |                     key={index}
21 |                     style={{ boxShadow: `#9e9e9e 0px 0px 9px` }}
22 |                     href={data.cert_pdf_link}
23 |                     data-aos="zoom-in-up"
24 |                     data-aos-duration="2000"
25 |                     rel="noreferrer"
26 |                     target="_blank"
27 |                   >
28 |                     <div
29 |                       className="cert_collection"
30 |                       style={{
31 |                         background: data.back_grd_color,
32 |                       }}
33 |                     >
34 |                       <img
35 |                         src={data.cert_provider_img_link}
36 |                         alt="certificates"
37 |                       />
38 |                     </div>
39 |                     <div className="overlay_section">
40 |                       <h3>{data.cert_title_name}</h3>
41 |                       <h4>{data.cert_time_stamp}</h4>
42 |                     </div>
43 |                   </a>
44 |                 );
45 |               }
46 |             )}
47 |           </div>
48 |         </div>
49 |       </div>
50 |     </>
51 |   );
52 | };
53 | 
54 | export default Certificates;
55 | 


--------------------------------------------------------------------------------
/src/pages/components/EducationInterface/Education.css:
--------------------------------------------------------------------------------
  1 | .upper_left img {
  2 |   width: 100px;
  3 |   box-shadow: 0px 0px 4px var(--educ-shadow);
  4 | }
  5 | .educ_div_section,
  6 | .educ_container_one img {
  7 |   width: 100%;
  8 | }
  9 | .educ_container_one img {
 10 |   height: 418px;
 11 |   border-radius: 3px;
 12 |   box-shadow: 0px 0px 4px 0px rgb(68, 68, 68);
 13 | }
 14 | .educ_div_section {
 15 |   gap: 20px;
 16 |   width: 100%;
 17 | }
 18 | .educ_div_section,
 19 | .educ_upper_section,
 20 | .upper_container_section,
 21 | .educ_container_two,
 22 | .educ_lower_section {
 23 |   display: flex;
 24 |   align-content: center;
 25 |   justify-content: center;
 26 |   align-items: center;
 27 | }
 28 | .educ_upper_section,
 29 | .upper_container_section {
 30 |   flex-direction: row;
 31 | }
 32 | .upper_container_section {
 33 |   width: 100%;
 34 |   padding-left: 40px;
 35 |   justify-content: flex-start;
 36 |   gap: 20px;
 37 | }
 38 | .educ_container_two {
 39 |   border-radius: 12px;
 40 |   flex-direction: column;
 41 |   color: var(--educ-text-color);
 42 |   padding: 36px 6px;
 43 |   gap: 15px;
 44 |   width: 50%;
 45 | }
 46 | .educ_data_info {
 47 |   display: flex;
 48 |   align-content: center;
 49 |   align-items: center;
 50 | }
 51 | .educ_upper_section {
 52 |   width: 95%;
 53 |   background: var(--educ-container-color);
 54 |   padding: 18px 21px;
 55 |   justify-content: space-between;
 56 | }
 57 | .upper_middle {
 58 |   display: flex;
 59 |   flex-direction: column;
 60 |   justify-content: flex-start;
 61 |   padding-bottom: 15px;
 62 | }
 63 | .upper_middle h3 {
 64 |   font-size: 27px;
 65 | }
 66 | .educ_container_one {
 67 |   display: flex;
 68 | }
 69 | .educ_btn button {
 70 |   outline: none;
 71 |   border: none;
 72 |   width: 227px;
 73 |   height: 45px;
 74 |   font-size: 15px;
 75 |   transition: ease-in-out 0.5s;
 76 |   background: transparent;
 77 |   color: var(--educ-text-color);
 78 |   border: 1px solid var(--educ-text-color);
 79 |   box-shadow: 3px #1e88e5;
 80 |   border-radius: 3px;
 81 | }
 82 | .educ_btn button:active {
 83 |   transform: scale(0.9);
 84 | }
 85 | .educ_lower_section {
 86 |   flex-direction: column;
 87 |   align-items: stretch;
 88 |   gap: 15px;
 89 | }
 90 | .educ_lower_section {
 91 |   padding-left: 40px;
 92 | }
 93 | .educ_data_info {
 94 |   width: 90%;
 95 | }
 96 | .educ_data_info {
 97 |   line-height: 24px;
 98 | }
 99 | .educ_btn {
100 |   padding-top: 6px;
101 | }
102 | .educ_btn a button {
103 |   cursor: pointer;
104 |   box-shadow: #595959 0px 0px 6px 0px;
105 | }
106 | 
107 | @media screen and (min-width: 1024px) {
108 |   .educ_container_one {
109 |     width: 50%;
110 |   }
111 | 
112 |   .educ_div_section {
113 |     height: 600px;
114 |   }
115 | }
116 | 
117 | @media screen and (max-width: 1024px) {
118 |   .educ_upper_section {
119 |     flex-direction: column;
120 |     padding: 18px;
121 |   }
122 |   .educ_container_one img {
123 |     height: auto;
124 |   }
125 |   .educ_container_two {
126 |     width: 100%;
127 |   }
128 |   .educ_div_section {
129 |     padding: 36px 20px;
130 |   }
131 | }
132 | @media screen and (max-width: 880px) {
133 |   .educ_div_section {
134 |     padding: 27px 15px;
135 |   }
136 | }
137 | @media screen and (max-width: 720px) {
138 |   .educ_lower_section {
139 |     width: 100%;
140 |   }
141 |   .upper_container_section {
142 |     justify-content: space-between;
143 |   }
144 | }
145 | @media screen and (max-width: 480px) {
146 |   .upper_left img {
147 |     display: none;
148 |   }
149 |   .upper_container_section {
150 |     gap: 0px;
151 |   }
152 |   .educ_lower_section {
153 |     width: 100%;
154 |   }
155 |   .educ_data_info {
156 |     width: 100%;
157 |     text-align: left;
158 |   }
159 |   .upper_middle {
160 |     gap: 3px;
161 |   }
162 |   .upper_right {
163 |     gap: 6px;
164 |     display: flex;
165 |     flex-direction: column;
166 |   }
167 |   .upper_right h5 {
168 |     font-size: 13px;
169 |   }
170 | }
171 | 


--------------------------------------------------------------------------------
/src/pages/components/EducationInterface/Education.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useContext } from 'react';
 2 | import { ServiceContext } from '../../../ServiceContext';
 3 | import './Education.css';
 4 | 
 5 | const Education = () => {
 6 |   const { utilData, isDarkMode } = useContext(ServiceContext);
 7 | 
 8 |   return (
 9 |     <>
10 |       <div className={`educ_container ${isDarkMode ? 'dark' : 'light'}`}>
11 |         <div className="educ_div_section">
12 |           {utilData?.ProjectStyle?.my_education_data?.map((data, index) => {
13 |             return (
14 |               <>
15 |                 <div className="educ_upper_section" key={index}>
16 |                   <div className="educ_container_one">
17 |                     <img
18 |                       src={utilData?.globalImages?.dyp_college_img}
19 |                       alt="educ_image"
20 |                     />
21 |                   </div>
22 |                   <div className="educ_container_two">
23 |                     <div className="upper_container_section">
24 |                       <div className="upper_left">
25 |                         <img
26 |                           src={utilData?.globalImages?.college_logo}
27 |                           alt="college logo"
28 |                         />
29 |                       </div>
30 |                       <div className="upper_middle">
31 |                         <h3>{data.college_name}</h3>
32 |                         <div className="upper_right">
33 |                           <h4>{data.college_degree_name}</h4>
34 |                           <h5 style={{ color: 'green' }}>
35 |                             {data.education_spam}
36 |                           </h5>
37 |                         </div>
38 |                       </div>
39 |                     </div>
40 |                     <div className="educ_lower_section">
41 |                       {data.education_info.map((indata, index) => {
42 |                         return (
43 |                           <div className="educ_data_info" key={index}>
44 |                             <p>{indata.educ_info}</p>
45 |                           </div>
46 |                         );
47 |                       })}
48 |                       <div className="educ_btn">
49 |                         <a href={data.btn_link} target="_blank">
50 |                           <button>{data.btn_name}</button>
51 |                         </a>
52 |                       </div>
53 |                     </div>
54 |                   </div>
55 |                 </div>
56 |               </>
57 |             );
58 |           })}
59 |         </div>
60 |       </div>
61 |     </>
62 |   );
63 | };
64 | 
65 | export default Education;
66 | 


--------------------------------------------------------------------------------
/src/pages/components/EducationInterface/ProjHome.css:
--------------------------------------------------------------------------------
  1 | .proj_containar_section {
  2 |   width: 90%;
  3 |   padding: 20px 30px;
  4 | }
  5 | 
  6 | .proj_containar_section,
  7 | .proj_left,
  8 | .proj_right {
  9 |   display: flex;
 10 |   align-content: center;
 11 |   justify-content: center;
 12 | }
 13 | .proj_left,
 14 | .proj_right {
 15 |   flex-wrap: wrap;
 16 |   width: 50%;
 17 | }
 18 | .proj_left {
 19 |   text-align: left;
 20 |   gap: 12px;
 21 | }
 22 | .proj_left h3 {
 23 |   font-size: 36px;
 24 |   flex-wrap: wrap;
 25 |   display: flex;
 26 |   gap: 9px;
 27 | }
 28 | .proj_left p {
 29 |   line-height: 30px;
 30 |   font-size: 18px;
 31 |   width: 90%;
 32 | }
 33 | .proj_left h3 span {
 34 |   color: #ff5823;
 35 | }
 36 | .proj_left h3,
 37 | .proj_left p,
 38 | .bot_btn {
 39 |   width: 90%;
 40 |   color: var(--work-text-color);
 41 | }
 42 | .proj_right img {
 43 |   height: 550px;
 44 | }
 45 | 
 46 | @media screen and (min-width: 1024px) {
 47 |   .proj_left h3 {
 48 |     /* color: #fff; */
 49 |     padding-bottom: 3px;
 50 |     text-shadow: 0px 0px 3px #20b8ff7a;
 51 |   }
 52 |   .proj_left p {
 53 |     /* color: #9f9f9f; */
 54 |   }
 55 | }
 56 | 
 57 | @media screen and (max-width: 920px) {
 58 |   .proj_containar_section {
 59 |     flex-direction: column;
 60 |     width: 100%;
 61 |     align-items: center;
 62 |     justify-content: center;
 63 |   }
 64 |   .proj_left,
 65 |   .proj_right {
 66 |     width: 90%;
 67 |   }
 68 |   .bot_btn {
 69 |     margin: 0;
 70 |   }
 71 |   .proj_left h3,
 72 |   .proj_left p,
 73 |   .bot_btn {
 74 |     width: 100%;
 75 |   }
 76 |   .proj_left p {
 77 |     text-align: left;
 78 |   }
 79 | }
 80 | @media screen and (max-width: 720px) {
 81 |   .proj_containar_section {
 82 |     flex-direction: column;
 83 |   }
 84 |   .proj_right img {
 85 |     width: 100%;
 86 |     height: auto;
 87 |   }
 88 | }
 89 | 
 90 | @media screen and (max-width: 420px) {
 91 |   .proj_left h3 {
 92 |     font-size: 30px;
 93 |     text-align: left;
 94 |     padding-top: 18px;
 95 |   }
 96 |   .proj_containar_section {
 97 |     padding: 20px 18px;
 98 |   }
 99 | }
100 | 


--------------------------------------------------------------------------------
/src/pages/components/EducationInterface/ProjHome.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useContext } from 'react';
 2 | import Githubcomp from '../FooterInterface/Githubcomp';
 3 | import { ServiceContext } from '../../../ServiceContext';
 4 | import './ProjHome.css';
 5 | import Skeleton from '../Loaders/Skeleton';
 6 | 
 7 | const ProjHome = () => {
 8 |   const { utilData, isDarkMode } = useContext(ServiceContext);
 9 |   return (
10 |     <>
11 |       <div className="proj_containar_section">
12 |         <div className="proj_left">
13 |           <h3>
14 |             Projects <span> & </span> Experiences
15 |           </h3>
16 |           <p>
17 |             You can find all of my projects on my profile on Github. You can
18 |             view my activities, contributions and code on these projects. Some
19 |             of these are completed and some are in progress. You can also leave
20 |             comments on the profile and start a discussion. I am always looking
21 |             for new projects and Ideas. You can also reach out to me on any of
22 |             the social media channels mentioned below.
23 |           </p>
24 |           <Githubcomp
25 |             backgroundColor="#512da8"
26 |             shadow={`${isDarkMode ? '#482e87' : '#edededa8'} 0px 0px 9px`}
27 |             href="https://github.com/ganraj21/Portfolio-Web-Application"
28 |           />
29 |         </div>
30 |         <div className="proj_right">
31 |           {utilData?.globalImages?.proj_img ? (
32 |             <img src={utilData?.globalImages?.proj_img} alt="Project Img" />
33 |           ) : (
34 |             <Skeleton props={{ width: '80%', height: '90%' }} />
35 |           )}
36 |         </div>
37 |       </div>
38 |     </>
39 |   );
40 | };
41 | 
42 | export default ProjHome;
43 | 


--------------------------------------------------------------------------------
/src/pages/components/FooterInterface/BottomNav.css:
--------------------------------------------------------------------------------
  1 | .bottom_nav_container {
  2 |   width: 100%;
  3 |   display: flex;
  4 |   align-items: center;
  5 |   justify-content: center;
  6 | }
  7 | .bot_middle_info,
  8 | .bot_nav a,
  9 | .bot_contact_info p {
 10 |   color: var(--footer-text-color);
 11 | }
 12 | .bottom_nav_section {
 13 |   width: 90%;
 14 |   display: flex;
 15 |   justify-content: space-evenly;
 16 |   align-content: center;
 17 |   color: #fff;
 18 |   padding: 20px 0px;
 19 | }
 20 | .bot_nav-left {
 21 |   width: 365px;
 22 | }
 23 | 
 24 | .basic_info {
 25 |   display: flex;
 26 |   flex-wrap: wrap;
 27 |   width: 387px;
 28 |   padding: 10px 10px 10px 0;
 29 | }
 30 | 
 31 | .bot_nav {
 32 |   display: flex;
 33 |   flex-direction: column;
 34 |   padding: 10px 10px 10px 0;
 35 |   gap: 6px;
 36 | }
 37 | .bot_nav a {
 38 |   text-decoration: none;
 39 |   gap: 6px;
 40 |   display: flex;
 41 |   align-items: center;
 42 | }
 43 | .bot_nav a:hover {
 44 |   color: rgb(227, 236, 254);
 45 | }
 46 | .bot_nav a p {
 47 |   padding-bottom: 3px;
 48 | }
 49 | 
 50 | .bot_right_header,
 51 | .bot_middle_header,
 52 | .bot_left_header {
 53 |   text-align: left;
 54 | }
 55 | 
 56 | .bot_right_header h3,
 57 | .bot_middle_header h3,
 58 | .bot_left_header h3 {
 59 |   font-size: 25px;
 60 | }
 61 | 
 62 | .bot_contact_info {
 63 |   padding: 10px 10px 10px 0;
 64 |   gap: 6px;
 65 |   display: flex;
 66 |   flex-direction: column;
 67 | }
 68 | 
 69 | .bot_contact_info p {
 70 |   margin-bottom: 3px;
 71 | }
 72 | 
 73 | .contact_me_here {
 74 |   display: flex;
 75 |   gap: 9px;
 76 |   align-items: center;
 77 |   align-content: center;
 78 |   flex-wrap: wrap;
 79 | }
 80 | 
 81 | @media screen and (max-width: 920px) {
 82 |   .bottom_nav_section {
 83 |     flex-direction: column;
 84 |     gap: 21px;
 85 |   }
 86 | }
 87 | 
 88 | @media screen and (max-width: 420px) {
 89 |   .basic_info {
 90 |     width: 100%;
 91 |     line-height: 24px;
 92 |   }
 93 |   .bot_cdiv {
 94 |     gap: 10px;
 95 |     display: flex;
 96 |     flex-direction: column;
 97 |     margin-bottom: 5px;
 98 |   }
 99 | }
100 | 


--------------------------------------------------------------------------------
/src/pages/components/FooterInterface/BottomNav.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useContext } from 'react';
  2 | import SocialMediaLinks from '../SocialMediaLinks';
  3 | import { HashLink } from 'react-router-hash-link';
  4 | import Githubcomp from './Githubcomp';
  5 | import { ServiceContext } from '../../../ServiceContext';
  6 | import './BottomNav.css';
  7 | 
  8 | const BottomNav = () => {
  9 |   const { utilData, csStyleData, getStyleData, isDarkMode } =
 10 |     useContext(ServiceContext);
 11 |   return (
 12 |     <>
 13 |       <div className={`bottom_nav_container ${isDarkMode ? 'dark' : 'light'}`}>
 14 |         <div className="bottom_nav_section">
 15 |           <div className="bot_nav_left">
 16 |             <div className="bot_left_header">
 17 |               <HashLink
 18 |                 to="/login"
 19 |                 style={{ textDecoration: 'none', color: '#fff' }}
 20 |               >
 21 |                 <h3>Ganraj21 | Portfolio</h3>
 22 |               </HashLink>
 23 |             </div>
 24 |             <div className="bot_middle_info">
 25 |               <p className="basic_info">
 26 |                 Need any help with your projects? contact me at the places
 27 |                 mentioned below. I will try to get back to you as fast as I can.
 28 |               </p>
 29 |               <p className="f_info">Follow me for more such Projects.</p>
 30 |             </div>
 31 |             <div>
 32 |               <Githubcomp
 33 |                 href="https://github.com/ganraj21"
 34 |                 shadow={`${isDarkMode ? '#482e87' : '#a998d4'} 0px 0px 13px`}
 35 |               />
 36 |             </div>
 37 |           </div>
 38 |           <div className="bot_nav_middle">
 39 |             <div className="bot_middle_header">
 40 |               <h3>Quick Links</h3>
 41 |             </div>
 42 |             <div className="bot_nav">
 43 |               {utilData?.HomeStyle?.my_navbar_data?.map((data, index) => {
 44 |                 return (
 45 |                   <>
 46 |                     <HashLink
 47 |                       key={index}
 48 |                       to={data.nav_link}
 49 |                       onClick={() => {
 50 |                         if (index === 3 || index === 4) {
 51 |                           if (csStyleData.length === 0) {
 52 |                             getStyleData(process.env.REACT_APP_ARP_CS);
 53 |                           }
 54 |                         }
 55 | 
 56 |                         if (data.another_page === true)
 57 |                           window.scrollTo({
 58 |                             top: 0,
 59 |                             left: 0,
 60 |                             behavior: 'smooth',
 61 |                           });
 62 |                       }}
 63 |                     >
 64 |                       {index !== 6 ? (
 65 |                         <i className="fa-solid fa-angles-right"></i>
 66 |                       ) : (
 67 |                         <></>
 68 |                       )}
 69 |                       <p> {data.navbar_name}</p>
 70 |                     </HashLink>
 71 |                   </>
 72 |                 );
 73 |               })}
 74 |             </div>
 75 |           </div>
 76 |           <div className="bot_nav_right">
 77 |             <div className="bot_right_header">
 78 |               <h3>Contact Info</h3>
 79 |             </div>
 80 |             <div className="bot_contact_info">
 81 |               {utilData?.HomeStyle?.personal_info_data?.map((data, index) => {
 82 |                 return (
 83 |                   <div className="bot_cdiv" key={index}>
 84 |                     {data.section_two.map((e, i) => {
 85 |                       return (
 86 |                         <div className="contact_me_here" key={i}>
 87 |                           <i
 88 |                             className={e.icon_class}
 89 |                             style={{ color: e.ic_color }}
 90 |                           ></i>
 91 |                           <p>{e.data_value}</p>
 92 |                         </div>
 93 |                       );
 94 |                     })}
 95 |                   </div>
 96 |                 );
 97 |               })}
 98 |               <SocialMediaLinks style={{ gap: '6px', display: 'flex' }} />
 99 |             </div>
100 |           </div>
101 |         </div>
102 |       </div>
103 |     </>
104 |   );
105 | };
106 | 
107 | export default BottomNav;
108 | 


--------------------------------------------------------------------------------
/src/pages/components/FooterInterface/Footer.css:
--------------------------------------------------------------------------------
 1 | .light {
 2 |   --footer-background-color: #16144b;
 3 |   --footer-text-color: #7f8daa;
 4 | }
 5 | 
 6 | .dark {
 7 |   --footer-background-color: #070a28;
 8 |   --footer-text-color: #c5c5c5;
 9 | }
10 | .footer_section {
11 |   display: flex;
12 |   align-items: center;
13 |   justify-content: center;
14 |   align-content: center;
15 |   width: 100%;
16 |   flex-direction: column;
17 |   background-color: var(--footer-background-color);
18 |   padding: 15px 10px;
19 | }
20 | .footer_section h2 {
21 |   font-size: 21px !important;
22 |   width: 100%;
23 |   display: flex;
24 |   align-items: center;
25 |   justify-content: center;
26 |   align-content: center;
27 |   height: 52px;
28 |   color: #fff;
29 | }
30 | .line {
31 |   width: 90%;
32 |   color: #4d4d4d;
33 |   border-bottom: 1px solid;
34 | }
35 | 


--------------------------------------------------------------------------------
/src/pages/components/FooterInterface/Footer.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useContext } from 'react';
 2 | import BottomNav from './BottomNav';
 3 | import './Footer.css';
 4 | import { ServiceContext } from '../../../ServiceContext';
 5 | const Footer = () => {
 6 |   const { isDarkMode } = useContext(ServiceContext);
 7 |   return (
 8 |     <div>
 9 |       <div className={`footer_section ${isDarkMode ? 'dark' : 'light'}`}>
10 |         <BottomNav />
11 |         <div className="line"></div>
12 |         <h2>Made with ❤️ by Ganesh</h2>
13 |       </div>
14 |     </div>
15 |   );
16 | };
17 | 
18 | export default Footer;
19 | 


--------------------------------------------------------------------------------
/src/pages/components/FooterInterface/Githubcomp.css:
--------------------------------------------------------------------------------
 1 | .bot_btn {
 2 |   margin-top: 20px;
 3 | }
 4 | .bot_git_btn {
 5 |   box-shadow: 0px 0px 13px #55198b;
 6 |   color: #fff;
 7 |   font-weight: 500;
 8 |   line-height: 1.1;
 9 |   width: -webkit-max-content;
10 |   width: -moz-max-content;
11 |   width: max-content;
12 |   padding: 13px 22px;
13 |   margin-right: 0;
14 |   border-radius: 6px;
15 |   text-align: center;
16 |   text-decoration: none;
17 |   font-family: Google Sans Regular;
18 |   display: block;
19 |   margin-top: 20px;
20 |   font-size: 18px;
21 |   cursor: pointer;
22 |   letter-spacing: 2px;
23 | }
24 | .bot_git_btn:active {
25 |   transform: scale(0.9);
26 | }
27 | .bot_git_btn:hover {
28 |   background: #9c27b0;
29 |   box-shadow: 0px 0px 13px #251335;
30 | }
31 | 
32 | @media screen and (min-width: 1024px) {
33 |   .bot_git_btn {
34 |     box-shadow: #482e87 0px 0px 3px;
35 |   }
36 | }
37 | @media screen and (max-width: 375px) {
38 |   .bot_git_btn {
39 |     width: 100%;
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/src/pages/components/FooterInterface/Githubcomp.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import './Githubcomp.css';
 3 | /* eslint-disable react/jsx-no-target-blank */
 4 | 
 5 | /**
 6 |  * Safe link to own external websites only.
 7 |  */
 8 | function Githubcomp(props) {
 9 |   return (
10 |     <div className="bot_btn">
11 |       <a
12 |         href={props.href}
13 |         className="bot_git_btn"
14 |         style={{
15 |           backgroundColor: props.backgroundColor,
16 |           boxShadow: props.shadow,
17 |         }}
18 |         target="_blank"
19 |       >
20 |         ⭐ Star Me on Github
21 |       </a>
22 |     </div>
23 |   );
24 | }
25 | 
26 | export default Githubcomp;
27 | 


--------------------------------------------------------------------------------
/src/pages/components/Loaders/Skeleton.css:
--------------------------------------------------------------------------------
 1 | .main-item {
 2 |   padding: 10px;
 3 |   background-color: #fff;
 4 |   width: 700px;
 5 | }
 6 | 
 7 | .background-masker {
 8 |   background-color: #fff;
 9 |   position: absolute;
10 | }
11 | 
12 | .btn-divide-left {
13 |   top: 0;
14 |   left: 25%;
15 |   height: 100%;
16 | }
17 | 
18 | @keyframes placeHolderShimmer {
19 |   0% {
20 |     background-position: -800px 0;
21 |   }
22 |   100% {
23 |     background-position: 800px 0;
24 |   }
25 | }
26 | 
27 | .animated-background {
28 |   animation-duration: 2s;
29 |   animation-fill-mode: forwards;
30 |   animation-iteration-count: infinite;
31 |   animation-name: placeHolderShimmer;
32 |   animation-timing-function: linear;
33 |   background-color: #f6f7f8;
34 |   background: linear-gradient(to right, #eeeeee 8%, #bbbbbb 18%, #eeeeee 33%);
35 |   background-size: 800px 104px;
36 |   position: relative;
37 | }
38 | 
39 | .static-background {
40 |   background-color: #f6f7f8;
41 |   background-size: 800px 104px;
42 |   height: 70px;
43 |   position: relative;
44 |   margin-bottom: 20px;
45 | }
46 | 
47 | .shared-dom {
48 |   width: 800px;
49 |   height: 110px;
50 | }
51 | .sub-rect {
52 |   border-radius: 100%;
53 |   width: 70px;
54 |   height: 70px;
55 |   float: left;
56 |   margin: 20px 20px 20px 0;
57 | }
58 | .pure-background {
59 |   background-color: #eee;
60 | }
61 | 
62 | .css-dom:empty {
63 |   width: 280px;
64 |   height: 220px;
65 |   border-radius: 6px;
66 |   box-shadow: 0 10px 45px rgba(0, 0, 0, 0.2);
67 |   background-repeat: no-repeat;
68 | 
69 |   background-image: radial-gradient(circle 16px, lightgray 99%, transparent 0),
70 |     linear-gradient(lightgray, lightgray), linear-gradient(lightgray, lightgray),
71 |     linear-gradient(lightgray, lightgray), linear-gradient(lightgray, lightgray),
72 |     linear-gradient(#fff, #fff);
73 | 
74 |   background-size: 32px 32px, 200px 32px, 180px 32px, 230px 16px, 100% 40px,
75 |     280px 100%;
76 | 
77 |   background-position: 24px 30px, 66px 30px, 24px 90px, 24px 142px, 0 180px, 0 0;
78 | }
79 | 


--------------------------------------------------------------------------------
/src/pages/components/Loaders/Skeleton.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import './Skeleton.css';
 3 | 
 4 | const Skeleton = ({ className, props }) => {
 5 |   return (
 6 |     <>
 7 |       <div
 8 |         class={`animated-background ${className}`}
 9 |         style={{ width: props.width, height: props.height }}
10 |       >
11 |         <div class="background-masker btn-divide-left"></div>
12 |       </div>
13 |     </>
14 |   );
15 | };
16 | 
17 | export default Skeleton;
18 | 


--------------------------------------------------------------------------------
/src/pages/components/Loaders/Spinner.css:
--------------------------------------------------------------------------------
 1 | .spinner {
 2 |   width: 27px;
 3 |   height: 27px;
 4 |   border: 5px solid #fff;
 5 |   border-bottom-color: transparent;
 6 |   border-radius: 50%;
 7 |   display: inline-block;
 8 |   box-sizing: border-box;
 9 |   animation: rotation 1s linear infinite;
10 | }
11 | 
12 | @keyframes rotation {
13 |   0% {
14 |     transform: rotate(0deg);
15 |   }
16 |   100% {
17 |     transform: rotate(360deg);
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/src/pages/components/Loaders/Spinner.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import "./Spinner.css";
 3 | function Spinner(props) {
 4 |   return (
 5 |     <>
 6 |       <div className="spinner" style={{ display: props.style }}></div>
 7 |     </>
 8 |   );
 9 | }
10 | 
11 | export default Spinner;
12 | 


--------------------------------------------------------------------------------
/src/pages/components/Loaders/SvgBackground.css:
--------------------------------------------------------------------------------
 1 | .custom-shape-divider-bottom-1671001171 {
 2 |   position: absolute;
 3 |   bottom: -2px;
 4 |   left: 0;
 5 |   width: 100%;
 6 |   overflow: hidden;
 7 |   line-height: 0;
 8 |   transform: rotate(180deg);
 9 | }
10 | 
11 | .custom-shape-divider-bottom-1671001171 svg {
12 |   position: relative;
13 |   display: block;
14 |   width: calc(142% + 1.3px);
15 |   height: 132px;
16 | }
17 | 
18 | .custom-shape-divider-bottom-1671001171 .shape-fill {
19 |   fill: var(--aboutsvg-background-color);
20 | }
21 | 
22 | @media screen and (min-width: 1024px) {
23 |   .custom-shape-divider-bottom-1671001171 {
24 |     bottom: -1px;
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/src/pages/components/Loaders/SvgBackground.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import "./SvgBackground.css";
 3 | 
 4 | function SvgBackground() {
 5 |   return (
 6 |     <div>
 7 |       <div class="custom-shape-divider-bottom-1671001171">
 8 |         <svg
 9 |           data-name="Layer 1"
10 |           xmlns="http://www.w3.org/2000/svg"
11 |           viewBox="0 0 1200 120"
12 |           preserveAspectRatio="none"
13 |         >
14 |           <path
15 |             d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"
16 |             class="shape-fill"
17 |           ></path>
18 |         </svg>
19 |       </div>
20 |     </div>
21 |   );
22 | }
23 | 
24 | export default SvgBackground;
25 | 


--------------------------------------------------------------------------------
/src/pages/components/LoginInterface/AdminUser.css:
--------------------------------------------------------------------------------
 1 | .data_values {
 2 |   display: flex;
 3 |   align-items: flex-start;
 4 |   justify-content: center;
 5 |   background: #0f0f2cc7;
 6 |   width: 350px;
 7 |   padding: 12px;
 8 |   color: #fff;
 9 |   flex-direction: column-reverse;
10 | }
11 | 
12 | .card__info {
13 |   display: flex;
14 |   flex-direction: row;
15 |   flex-wrap: wrap;
16 |   justify-content: center;
17 |   gap: 20px;
18 |   padding: 90px 0;
19 | }
20 | 
21 | .card_btn {
22 |   width: 100%;
23 |   display: flex;
24 |   flex-direction: row-reverse;
25 | }
26 | 
27 | .delete_card {
28 |   width: 27px;
29 |   background: transparent;
30 |   border: none;
31 |   color: white;
32 |   outline: 1px solid gray;
33 | }
34 | 
35 | .user_mesg span,
36 | .user_email span,
37 | .user_name span,
38 | .msgCreation span {
39 |   font-weight: bold;
40 |   margin-right: 3px;
41 | }
42 | 
43 | .user_mesg,
44 | .user_email,
45 | .user_name,
46 | .msgCreation {
47 |   padding: 3px;
48 | }
49 | 
50 | .user_test_msg {
51 |   width: 300px;
52 |   overflow: hidden;
53 | }
54 | 
55 | .user_test_msg::after {
56 |   content: '...';
57 |   position: absolute;
58 |   top: 0;
59 |   right: 0;
60 |   padding: 0 5px;
61 |   background: white;
62 | }
63 | .admin__container {
64 |   display: flex;
65 |   align-items: center;
66 |   justify-content: center;
67 |   background-color: var(--skill-background-color);
68 | }
69 | .admin__card {
70 |   overflow: scroll;
71 |   height: 100vh;
72 | }
73 | 


--------------------------------------------------------------------------------
/src/pages/components/LoginInterface/AdminUser.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useContext, useEffect, useState } from 'react';
  2 | import { useNavigate } from 'react-router-dom';
  3 | import Spinner from '../Loaders/Spinner';
  4 | import { ToastContainer, toast } from 'react-toastify';
  5 | import './AdminUser.css';
  6 | import { ServiceContext } from '../../../ServiceContext';
  7 | 
  8 | const AdminUser = () => {
  9 |   const [apiData, setApiData] = useState([]);
 10 |   const [loading, setLoading] = useState(0);
 11 |   const [newapiData, setNewApiData] = useState(0);
 12 |   const { uri, isDarkMode } = useContext(ServiceContext);
 13 |   const url = `${uri}/${process.env.REACT_APP_ADMIN_QUERY}`;
 14 |   const navigate = useNavigate();
 15 | 
 16 |   useEffect(() => {
 17 |     // need to change this function  to optimized performance
 18 |     const userRes = localStorage.getItem(process.env.REACT_APP_QUERY_KEYS);
 19 | 
 20 |     const getDatas = async () => {
 21 |       const response = await fetch(url, {
 22 |         method: 'GET',
 23 |         headers: {
 24 |           'Content-Type': 'application/json',
 25 |         },
 26 |       });
 27 |       console.log(response);
 28 |       const data = await response.json();
 29 |       setApiData(data);
 30 |       setLoading(!loading);
 31 |       setNewApiData(0);
 32 |     };
 33 | 
 34 |     if (userRes === 'Admin User granted permissions') {
 35 |       setTimeout(() => {
 36 |         getDatas();
 37 |       }, 6000);
 38 |     } else {
 39 |       navigate('/login');
 40 |     }
 41 |   }, [newapiData]);
 42 | 
 43 |   const toastOptions = {
 44 |     position: 'top-right',
 45 |     autoClose: 8000,
 46 |     pauseOnHover: true,
 47 |     theme: 'dark',
 48 |   };
 49 | 
 50 |   const operator = async (id) => {
 51 |     console.log(id);
 52 |     try {
 53 |       const res = await fetch(
 54 |         `${uri}/${process.env.REACT_APP_DELETE_PATH}/${id}`,
 55 |         {
 56 |           method: 'DELETE',
 57 |           headers: {
 58 |             'Content-Type': 'application/json',
 59 |           },
 60 |         }
 61 |       );
 62 | 
 63 |       if (res.ok) {
 64 |         const data = await res.json();
 65 |         toast.success(data.message, toastOptions);
 66 |         setNewApiData(1);
 67 |         const updatedApiData = apiData.filter((user) => user.id !== id);
 68 |         setApiData(updatedApiData);
 69 |         toast.error(res.message, toastOptions);
 70 |       } else {
 71 |         // Handle error response
 72 |         const errorData = await res.json();
 73 |         toast.error(errorData.message, toastOptions);
 74 |       }
 75 |     } catch (error) {
 76 |       console.log(error);
 77 |     }
 78 |   };
 79 | 
 80 |   return (
 81 |     <div className={`admin__container ${isDarkMode ? 'dark' : 'light'}`}>
 82 |       <ToastContainer />
 83 |       <div className="admin__card">
 84 |         {loading ? (
 85 |           <div className="card__info">
 86 |             {apiData.map((val, key) => {
 87 |               return (
 88 |                 <div key={key} className="data_values">
 89 |                   <div className="card_btn">
 90 |                     <button
 91 |                       className="delete_card"
 92 |                       onClick={() => operator(val._id)}
 93 |                     >
 94 |                       X
 95 |                     </button>
 96 |                   </div>
 97 |                   <div className="card_val">
 98 |                     <p className="user_name">
 99 |                       <span style={{ color: 'green', fontweight: 'bold' }}>
100 |                         Name :
101 |                       </span>
102 |                       {val.name}
103 |                     </p>
104 |                     <p className="user_email">
105 |                       <span style={{ color: '#dbb800', fontweight: 'bold' }}>
106 |                         Email :
107 |                       </span>
108 |                       {val.email}
109 |                     </p>
110 |                     <p className="msgCreation">
111 |                       <span style={{ color: '#ff4584', fontweight: 'bold' }}>
112 |                         createdAt :
113 |                       </span>
114 |                       {val.createdAt}
115 |                     </p>
116 |                     <p className="user_mesg">
117 |                       <span style={{ color: '#d53500', fontweight: 'bold' }}>
118 |                         Msg :
119 |                       </span>
120 |                       <p className="user_test_msg">{val.message}</p>
121 |                     </p>
122 |                   </div>
123 |                 </div>
124 |               );
125 |             })}
126 |           </div>
127 |         ) : (
128 |           <div
129 |             style={{
130 |               height: '100vh',
131 |               display: 'flex',
132 |               alignItems: 'center',
133 |             }}
134 |           >
135 |             <Spinner />
136 |           </div>
137 |         )}
138 |       </div>
139 |     </div>
140 |   );
141 | };
142 | 
143 | export default AdminUser;
144 | 


--------------------------------------------------------------------------------
/src/pages/components/LoginInterface/Login.css:
--------------------------------------------------------------------------------
 1 | .login__container {
 2 |   height: 100vh;
 3 |   background-color: var(--skill-background-color);
 4 | }
 5 | 
 6 | .login__card,
 7 | .login__container {
 8 |   display: flex;
 9 |   align-items: center;
10 |   justify-content: center;
11 |   flex-direction: column;
12 |   width: 100%;
13 | }
14 | .login__card {
15 |   width: 500px;
16 |   height: 350px;
17 |   background: #3f3b354d;
18 | }
19 | .login__card h1 {
20 |   margin-bottom: 12px;
21 |   color: #adadad;
22 | }
23 | .login__card button {
24 |   width: 180px;
25 |   height: 40px;
26 |   margin-top: 14px;
27 |   padding: 6px;
28 |   font-size: 15px;
29 |   background: transparent;
30 |   outline: none;
31 |   border: 1px solid #fff;
32 |   border-radius: 6px;
33 |   color: #fff;
34 |   display: flex;
35 |   align-items: center;
36 |   justify-content: center;
37 |   gap: 12px;
38 | }
39 | .input__field {
40 |   display: flex;
41 |   flex-direction: column;
42 |   width: 80%;
43 | }
44 | 
45 | .input__field input {
46 |   background-color: #00000066;
47 |   color: #fff;
48 | }
49 | .input__field label {
50 |   color: #fff;
51 | }
52 | 
53 | @media screen and (max-width: 520px) {
54 |   .login__card {
55 |     width: 90%;
56 |   }
57 | }
58 | 


--------------------------------------------------------------------------------
/src/pages/components/LoginInterface/Login.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useContext, useState } from 'react';
  2 | import { useNavigate } from 'react-router-dom';
  3 | import { ToastContainer, toast } from 'react-toastify';
  4 | import 'react-toastify/dist/ReactToastify.css';
  5 | import { BiLogInCircle } from 'react-icons/bi';
  6 | import Spinner from '../Loaders/Spinner';
  7 | import { ServiceContext } from '../../../ServiceContext';
  8 | import './Login.css';
  9 | 
 10 | const Login = () => {
 11 |   const [pvalue, setPvalue] = useState(0);
 12 |   const [admin, setAdmin] = useState({
 13 |     username: '',
 14 |     password: '',
 15 |   });
 16 |   const { uri, isDarkMode, getAuth } = useContext(ServiceContext);
 17 |   const url = `${uri}/${process.env.REACT_APP_QUERY_LOG}/login`;
 18 |   const navigate = useNavigate();
 19 | 
 20 |   const toastOptions = {
 21 |     position: 'top-right',
 22 |     autoClose: 8000,
 23 |     pauseOnHover: true,
 24 |     theme: 'dark',
 25 |   };
 26 | 
 27 |   const handleInputs = (event) => {
 28 |     setAdmin({ ...admin, [event.target.name]: event.target.value });
 29 |   };
 30 | 
 31 |   const dataPost = async (event) => {
 32 |     event.preventDefault();
 33 |     setPvalue(1);
 34 |     const { username, password } = admin;
 35 |     const checkOptions = {
 36 |       username,
 37 |       password,
 38 |     };
 39 |     console.log(checkOptions);
 40 |     try {
 41 |       const res = await fetch(url, {
 42 |         method: 'POST',
 43 |         headers: {
 44 |           'Content-Type': 'application/json',
 45 |         },
 46 |         body: JSON.stringify(checkOptions),
 47 |       });
 48 | 
 49 |       console.log(res);
 50 |       const data = await res.json();
 51 | 
 52 |       setPvalue(0);
 53 |       if (res.status === 201) {
 54 |         toast.success(data.message, toastOptions);
 55 |         localStorage.setItem('AdminUser', data.message);
 56 |         getAuth();
 57 |         navigate('admin');
 58 |       } else {
 59 |         toast.error('Invalid credentials', toastOptions);
 60 |       }
 61 |     } catch (error) {
 62 |       console.error('Error:', error);
 63 |       toast.error('An error occurred. Please try again later.', toastOptions);
 64 |     }
 65 |   };
 66 | 
 67 |   return (
 68 |     <div className={`login__container ${isDarkMode ? 'dark' : 'light'}`}>
 69 |       <form className="login__card" onSubmit={dataPost}>
 70 |         <ToastContainer />
 71 |         <h1>Admin Contact info</h1>
 72 |         <div className="input__field">
 73 |           <label htmlFor="username">Your UserName</label>
 74 |           <input
 75 |             placeholder="Username"
 76 |             type="text"
 77 |             name="username"
 78 |             value={admin.username}
 79 |             onChange={handleInputs}
 80 |             required
 81 |           />
 82 |         </div>
 83 |         <div className="input__field">
 84 |           <label htmlFor="password">Correct Password</label>
 85 |           <input
 86 |             placeholder="Password"
 87 |             type="password"
 88 |             name="password"
 89 |             value={admin.password}
 90 |             onChange={handleInputs}
 91 |             required
 92 |           />
 93 |         </div>
 94 |         <button
 95 |           type="submit"
 96 |           disabled={pvalue !== 0}
 97 |           style={{
 98 |             background: pvalue !== 0 ? '#4a3c53' : '',
 99 |             border: pvalue !== 0 ? '#d2b3e5' : '',
100 |             color: pvalue !== 0 ? '#919191' : '',
101 |           }}
102 |         >
103 |           {pvalue ? (
104 |             <Spinner id="your_spinner_d" style={pvalue ? 'flex' : 'none'} />
105 |           ) : (
106 |             <BiLogInCircle />
107 |           )}
108 |           Check In
109 |         </button>
110 |       </form>
111 |     </div>
112 |   );
113 | };
114 | 
115 | export default Login;
116 | 


--------------------------------------------------------------------------------
/src/pages/components/LoginInterface/PrivateRoutes.js:
--------------------------------------------------------------------------------
1 | import { useContext } from 'react';
2 | import { Navigate, Outlet } from 'react-router-dom';
3 | import { ServiceContext } from '../../../ServiceContext';
4 | export const PrivateRoutes = () => {
5 |   const { auth } = useContext(ServiceContext);
6 | 
7 |   return auth ? <Outlet /> : <Navigate to="/login" />;
8 | };
9 | 


--------------------------------------------------------------------------------
/src/pages/components/Navigation/Navbar.css:
--------------------------------------------------------------------------------
  1 | .light {
  2 |   --nav-background-color: #ffffff50;
  3 |   --nav-mobile-color: #fff;
  4 |   --nav-text-color: #000000;
  5 |   --nav-light: #ffffff38;
  6 | }
  7 | 
  8 | .dark {
  9 |   --nav-background-color: #45444438;
 10 |   --nav-mobile-color: #000;
 11 |   --nav-text-color: #ffffff;
 12 | }
 13 | 
 14 | .container {
 15 |   margin: 1rem;
 16 |   text-align: center;
 17 | }
 18 | .nav-container,
 19 | .logo {
 20 |   display: flex;
 21 |   align-items: center;
 22 |   align-content: center;
 23 | }
 24 | .nav-container {
 25 |   flex-direction: row;
 26 |   justify-content: space-between;
 27 |   z-index: 100;
 28 |   top: 0;
 29 |   position: fixed;
 30 |   width: 100%;
 31 |   color: #000;
 32 |   height: 72px;
 33 |   backdrop-filter: blur(6px);
 34 |   background-color: var(--nav-background-color);
 35 | }
 36 | .logo {
 37 |   justify-content: space-evenly;
 38 |   padding: 0px 0 0 21px;
 39 | }
 40 | .logo a {
 41 |   text-decoration: none;
 42 |   font-size: 24px;
 43 |   height: 50px;
 44 |   color: black;
 45 |   font-weight: 600;
 46 | }
 47 | .logo a:hover {
 48 |   color: #ff8c09;
 49 | }
 50 | 
 51 | .logo img {
 52 |   width: 67px;
 53 | }
 54 | .links {
 55 |   transform-origin: 0% 0%;
 56 |   position: relative;
 57 |   z-index: 50;
 58 |   transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
 59 | }
 60 | .MenuItems,
 61 | .links,
 62 | .active_links {
 63 |   display: flex;
 64 |   align-items: center;
 65 |   align-content: center;
 66 |   justify-content: center;
 67 | }
 68 | .MenuItems {
 69 |   text-align: center;
 70 |   font-size: 18px;
 71 |   line-height: 39px;
 72 |   margin-right: 12px;
 73 | }
 74 | .MenuItems a {
 75 |   text-decoration: none;
 76 |   font-weight: 600;
 77 |   font-size: 16px;
 78 |   color: var(--nav-text-color) !important;
 79 |   line-height: 24px;
 80 |   text-align: center;
 81 | }
 82 | .MenuItems a:hover {
 83 |   color: var(--nav-text-color) !important;
 84 |   background: #a3a3a342;
 85 |   border-radius: 9px;
 86 | }
 87 | .active_navbtn {
 88 |   text-shadow: 0 0 3px #ddfffd34;
 89 |   font-size: 18px !important;
 90 |   background: #ffffff1c;
 91 |   border-radius: 9px;
 92 | }
 93 | .MenuItems a:active {
 94 |   transform: scale(0.9);
 95 | }
 96 | .logo h4 {
 97 |   color: #000;
 98 | }
 99 | .active_links {
100 |   position: absolute;
101 |   height: 100vh;
102 |   width: 100%;
103 |   top: 72px;
104 |   flex-direction: column;
105 |   z-index: 71;
106 |   background-color: var(--nav-background-color);
107 |   justify-content: flex-start;
108 |   transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
109 |   backdrop-filter: blur(15px);
110 | }
111 | .toggle_menu_icons {
112 |   display: none;
113 |   color: var(--nav-text-color);
114 | }
115 | .nav_a,
116 | .nav_c {
117 |   padding: 0 10px;
118 | }
119 | 
120 | @media screen and (min-width: 1024px) {
121 |   .nav-container {
122 |     height: 80px;
123 |   }
124 |   .active_navbtn,
125 |   .MenuItems a:hover {
126 |     font-size: 18px !important;
127 |     background: none !important;
128 |     border-radius: 3px;
129 |   }
130 |   .links a {
131 |     padding: 9px;
132 |   }
133 | }
134 | @media screen and (max-width: 1024px) {
135 |   .MenuItems {
136 |     flex-direction: column;
137 |     gap: 21px;
138 |     font-size: 21px;
139 |     height: 512px;
140 |     width: 90%;
141 |     transition: transform 0.4s ease-in-out;
142 |   }
143 |   .MenuItems a {
144 |     color: #000;
145 |     width: 100%;
146 |     height: 50px;
147 |     align-items: center;
148 |     justify-content: flex-start;
149 |     display: flex;
150 |     outline: none;
151 |     border: none;
152 |     border-radius: 3px;
153 |   }
154 |   .toggle_menu_icons {
155 |     display: flex;
156 |     height: 50px;
157 |     margin-right: 21px;
158 |     align-items: center;
159 |     justify-content: center;
160 |     align-content: center;
161 |     gap: 21px;
162 |   }
163 | 
164 |   .links {
165 |     width: 100%;
166 |     transform: translate(-100%, 0);
167 |     height: 100vh;
168 |     background-color: #fff;
169 |     justify-content: flex-start;
170 |     flex-direction: column;
171 |     display: flex;
172 |     top: 72px;
173 |     position: absolute;
174 |   }
175 |   .active_links {
176 |     transition: transform 0.4s ease-in-out;
177 |   }
178 |   .btn_active {
179 |     background: #00a5ee;
180 |     border-radius: 3px;
181 |     box-shadow: 0 0 2px #00a5ee;
182 |     color: #fff;
183 |   }
184 |   .btn {
185 |     color: #fff;
186 |   }
187 | }
188 | 
189 | @media screen and (max-width: 820px) {
190 |   .nav-bg {
191 |     background-color: var(--nav-mobile-color);
192 |   }
193 |   .your_links {
194 |     display: none;
195 |     transition: all 1.5s linear;
196 |     transform: translateX(-333px);
197 |     position: relative;
198 |     top: 190px;
199 |   }
200 |   .MenuItems a {
201 |     gap: 10px;
202 |     font-size: 18px;
203 |   }
204 |   .MenuItems span {
205 |     display: flex !important;
206 |     justify-content: center;
207 |   }
208 |   .active_navbtn {
209 |     color: #c200d0 !important;
210 |     transform: scale(0.99);
211 |   }
212 |   .MenuItems a:hover {
213 |     border-radius: 3px;
214 |     color: #ffffff;
215 |     box-shadow: 0 0 1px #fff;
216 |     outline: none;
217 |     background: transparent;
218 |   }
219 | }
220 | @media screen and (max-width: 580px) {
221 |   .MenuItems a {
222 |     color: #000;
223 |   }
224 |   .logo a {
225 |     font-size: 21px;
226 |   }
227 | }
228 | @media screen and (max-width: 480px) {
229 |   #navbar li {
230 |     width: 100%;
231 |     margin: 10px;
232 |   }
233 |   .nav {
234 |     background-color: #fff;
235 |     height: 82px;
236 |   }
237 |   #navbar {
238 |     flex-direction: column;
239 |   }
240 | 
241 |   .your_links {
242 |     display: none;
243 |     transition: all 1.5s linear;
244 |     transform: translateX(-333px);
245 |     position: relative;
246 |     top: 190px;
247 |   }
248 | 
249 |   .hamburger-menu {
250 |     display: flex;
251 |   }
252 | 
253 |   .hamburger-menu a {
254 |     font-size: 18px;
255 |     text-align: center;
256 |     width: 20px;
257 |     justify-content: center;
258 |   }
259 |   .mobile_menu_links,
260 |   .hamburger-menu a,
261 |   .nav {
262 |     display: flex;
263 |     align-items: center;
264 |     align-content: center;
265 |   }
266 |   .mobile_menu_links {
267 |     background-color: #fff;
268 |     height: 20rem;
269 |     padding-left: 3rem;
270 |     transition: all 1.5s linear;
271 |     position: relative;
272 |     top: 190px;
273 |     z-index: 99;
274 |     transform: translateX(-162px);
275 |     animation: fade-in 1s forwards;
276 |   }
277 |   @keyframes fade-in {
278 |     0% {
279 |       opacity: 0;
280 |     }
281 |     100% {
282 |       opacity: 1;
283 |     }
284 |   }
285 | }
286 | 


--------------------------------------------------------------------------------
/src/pages/components/Navigation/Navbar.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useContext, useState } from 'react';
  2 | import { ServiceContext } from '../../../ServiceContext';
  3 | import { HashLink } from 'react-router-hash-link';
  4 | import 'font-awesome/css/font-awesome.min.css';
  5 | import { AiOutlineHome, AiOutlineSafetyCertificate } from 'react-icons/ai';
  6 | import { RiCodeSSlashLine } from 'react-icons/ri';
  7 | import { BiConversation } from 'react-icons/bi';
  8 | import { TfiControlForward } from 'react-icons/tfi';
  9 | import { RxDashboard } from 'react-icons/rx';
 10 | import { MdLightMode, MdNightlight } from 'react-icons/md';
 11 | import './Navbar.css';
 12 | import Skeleton from '../Loaders/Skeleton';
 13 | 
 14 | const Navbar = () => {
 15 |   const { isDarkMode, toggleTheme, utilData } = useContext(ServiceContext);
 16 |   const [isActive, setActive] = useState(false);
 17 |   const [isbtnActive, setBtnActive] = useState(false);
 18 |   const [isBtnClick, setBtnClick] = useState(0);
 19 | 
 20 |   const handleClick = () => {
 21 |     setActive(!isActive);
 22 |     setBtnActive(!isbtnActive);
 23 |   };
 24 | 
 25 |   return (
 26 |     <>
 27 |       <div className={`nav-container ${isDarkMode ? 'dark' : 'light'}`}>
 28 |         <div className="logo">
 29 |           <HashLink to="/#home_page" className="nav__logo">
 30 |             {utilData?.globalImages?.nav_logo ? (
 31 |               <img src={utilData?.globalImages?.nav_logo} alt="logo" />
 32 |             ) : (
 33 |               <Skeleton props={{ width: '67px', height: '90%' }} />
 34 |             )}
 35 |           </HashLink>
 36 |         </div>
 37 |         <div
 38 |           className={`${isActive ? 'active_links  ' : 'links nav-bg'} nav-bg`}
 39 |         >
 40 |           <div className="MenuItems ">
 41 |             {utilData?.HomeStyle?.my_navbar_data?.map((data, index) => {
 42 |               const iconComponents = {
 43 |                 AiOutlineHome: AiOutlineHome,
 44 |                 TfiControlForward: TfiControlForward,
 45 |                 RxDashboard: RxDashboard,
 46 |                 RiCodeSSlashLine: RiCodeSSlashLine,
 47 |                 AiOutlineSafetyCertificate: AiOutlineSafetyCertificate,
 48 |                 BiConversation: BiConversation,
 49 |                 MdLightMode: MdLightMode,
 50 |               };
 51 |               const IconComponent = iconComponents[data.nav__icon];
 52 | 
 53 |               return (
 54 |                 <HashLink
 55 |                   className={isBtnClick === index ? 'active_navbtn' : 'navbtn'}
 56 |                   key={index}
 57 |                   to={data.nav_link}
 58 |                   onClick={() => {
 59 |                     if (index === 6) {
 60 |                       console.log('you clicked.. ');
 61 |                       toggleTheme();
 62 |                       return;
 63 |                     }
 64 |                     // if (index === 3 || index === 4) {
 65 |                     //   if (csStyleData.length === 0) {
 66 |                     //     getStyleData(process.env.REACT_APP_ARP_CS);
 67 |                     //   }
 68 |                     // }
 69 | 
 70 |                     if (data.another_page === true)
 71 |                       window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
 72 | 
 73 |                     setActive(false);
 74 |                     setBtnActive(false);
 75 |                     setBtnClick(index);
 76 |                   }}
 77 |                 >
 78 |                   <span
 79 |                     id="navIcons"
 80 |                     style={{
 81 |                       alignItems: 'center',
 82 |                       paddingBottom: '1px',
 83 |                       width: '39px',
 84 |                       height: '39px',
 85 |                       display: index === 6 ? 'flex' : 'none',
 86 |                     }}
 87 |                   >
 88 |                     {index === 6 && isDarkMode ? (
 89 |                       <MdNightlight />
 90 |                     ) : (
 91 |                       <IconComponent />
 92 |                     )}
 93 |                   </span>
 94 |                   {data.navbar_name}
 95 |                 </HashLink>
 96 |               );
 97 |             })}
 98 |           </div>
 99 |         </div>
100 |         <div className="toggle_menu_icons">
101 |           <span onClick={() => toggleTheme()} style={{ display: 'flex' }}>
102 |             {isDarkMode ? <MdNightlight /> : <MdLightMode />}
103 |           </span>
104 |           <i
105 |             className={isActive ? 'fas fa-times' : 'fas fa-bars-staggered'}
106 |             style={{
107 |               fontSize: '21px',
108 |               fontWeight: '600',
109 | 
110 |               width: '27px',
111 |             }}
112 |             onClick={handleClick}
113 |           ></i>
114 |         </div>
115 |       </div>
116 |     </>
117 |   );
118 | };
119 | 
120 | export default Navbar;
121 | 


--------------------------------------------------------------------------------
/src/pages/components/SocialMediaLinks.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useContext } from 'react';
 2 | import { ServiceContext } from '../../ServiceContext';
 3 | /* eslint-disable react/jsx-no-target-blank */
 4 | 
 5 | /**
 6 |  * Safe link to own external websites only.
 7 |  */
 8 | const SocialMediaLinks = (props) => {
 9 |   const { utilData } = useContext(ServiceContext);
10 |   return (
11 |     <>
12 |       <div className="colz-icon">
13 |         {utilData?.HomeStyle?.social_media_data?.map((data, index) => {
14 |           return (
15 |             <a
16 |               href={data.where_to_go_link}
17 |               key={index}
18 |               target="_blank"
19 |               style={{ margin: '6px', color: '#f8e2ff' }}
20 |             >
21 |               <i className={data.icon_class}></i>
22 |             </a>
23 |           );
24 |         })}
25 |       </div>
26 |     </>
27 |   );
28 | };
29 | 
30 | export default SocialMediaLinks;
31 | 


--------------------------------------------------------------------------------