├── .gitignore
├── README.md
├── package-lock.json
├── package.json
├── public
├── _redirects
├── favicon.ico
├── index.html
├── logo192.png
├── logo512.png
├── manifest.json
└── robots.txt
├── readmeResources
├── aboutme.PNG
├── addEducation.PNG
├── adminDashboead.PNG
├── adminlogin.PNG
├── contact.PNG
├── contactAdmin.PNG
├── editEdication.PNG
├── education.PNG
├── educationAdmin.PNG
├── experience.PNG
├── experienceAdmin.PNG
├── footer.PNG
├── home.PNG
├── projectAdmin.PNG
├── projects.PNG
├── skills.PNG
└── skilsAdmin.PNG
└── src
├── App.js
├── actions
├── educationAction.js
├── experienceAction.js
├── loginAction.js
├── messageAction.js
├── projectAction.js
└── skillAction.js
├── apis
├── educationApi.js
├── experienceApi.js
├── messageApi.js
├── projectApi.js
├── serverApi.js
├── skillApi.js
└── userApi.js
├── assets
└── images
│ ├── basry-logo.png
│ ├── dev.png
│ ├── dev.svg
│ ├── education.png
│ ├── experience.png
│ └── profil.png
├── components
├── Admin
│ ├── EducationModal.js
│ ├── ExperienceModal.js
│ ├── Modal.js
│ ├── ProjectModal.js
│ ├── SideBar
│ │ ├── SideBar.css
│ │ ├── SideBar.js
│ │ └── SidebarData.js
│ ├── SkillModal.js
│ └── Table.js
└── User
│ ├── About
│ ├── About.css
│ └── About.js
│ ├── Contacts
│ └── Contacts.js
│ ├── Education
│ └── Education.js
│ ├── Experience
│ └── Experience.js
│ ├── Footer
│ ├── Footer.css
│ └── Footer.js
│ ├── Login
│ ├── Login.js
│ └── styles.css
│ ├── Navbar
│ ├── Navbar.js
│ └── styles.css
│ ├── PageIntro
│ ├── PageIntro.js
│ └── styles.css
│ ├── Projects
│ └── Projects.js
│ └── Skills
│ └── Skills.js
├── index.css
├── index.js
├── pages
├── EducationAdmin.js
├── ExperienceAdmin.js
├── Home.js
├── MessageAdmin.js
├── NotFound.js
├── PortfolioUI.js
├── ProjectAdmin.js
└── SkillAdmin.js
├── reducers
├── education.js
├── experience.js
├── index.js
├── isLogged.js
├── message.js
├── project.js
└── skill.js
├── reportWebVitals.js
└── shared
├── SecureRoute.js
├── authorization.js
├── history.js
└── toast.js
/.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 | ## Basry Portfolio Frontend Part
2 |
3 | Dynamic personal website with admin panel which contains educations, experiences, skills, projects, contact fields.
4 | ## Technologies
5 | ##### MERN STACK: Mongo DB, ExpressJS, ReactJS, NodeJS.
6 |
7 | ## Dependancies
8 | * react
9 | * redux
10 | * react-redux
11 | * redux-thunk
12 | * react-router-dom
13 | * react-hook-form
14 | * axios
15 | * moment
16 | * react-datepicker
17 | * react-dom
18 | * react-icons
19 | * react-modal-image
20 | * react-scripts
21 | * react-skillbars
22 | * react-toastify
23 | * web-vitals
24 |
25 |
26 | ## Project Screen Shots
27 | ### Intro
28 | 
29 | ### About Me
30 | 
31 | ### Educations
32 | 
33 | ### Experiences
34 | 
35 | ### Skills
36 | 
37 | ### Projects
38 | 
39 | ### Contact Me
40 | 
41 | ### Footer
42 | 
43 | ### Login Admin Page
44 | 
45 | ### Dashboard Admin
46 | 
47 | ### Educations Admin
48 | 
49 | ### Add Education
50 | 
51 | ### Edit Education
52 | 
53 | ### Experiences Admin
54 | 
55 | ### Skills Admin
56 | 
57 | ### Project Admin
58 | 
59 | ### Contact Admin
60 | 
61 |
62 |
63 | ## Demo
64 | Click [Demo](https://basry.herokuapp.com/) to go to the demonstration page.
65 |
66 | ## Installation and Setup Instructions
67 |
68 | Clone down this repository. You will need `node` and `npm` installed globally on your machine.
69 |
70 | Installation:
71 |
72 | `npm install`
73 |
74 |
75 | To Start Server:
76 |
77 | `npm start`
78 |
79 | To Visit App:
80 |
81 | `localhost:3000/`
82 |
83 | ## Notes
84 | * please note that the application will not work before colone the API express, click [here](https://github.com/oussamabasry/portfolio-backend) to go to backend repository.
85 | * Change the server IP address in /src/app/serverApi.js file.
86 |
87 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "portfolio-frontend",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@testing-library/jest-dom": "^5.12.0",
7 | "@testing-library/react": "^11.2.6",
8 | "@testing-library/user-event": "^12.8.3",
9 | "axios": "^0.21.1",
10 | "jquery": "^3.6.0",
11 | "moment": "^2.29.1",
12 | "react": "^17.0.2",
13 | "react-datepicker": "^3.8.0",
14 | "react-dom": "^17.0.2",
15 | "react-hook-form": "^7.3.6",
16 | "react-icons": "^4.2.0",
17 | "react-modal-image": "^2.5.0",
18 | "react-redux": "^7.2.4",
19 | "react-router-dom": "^5.2.0",
20 | "react-scripts": "4.0.3",
21 | "react-skillbars": "^1.6.1",
22 | "react-toastify": "^7.0.4",
23 | "redux": "^4.1.0",
24 | "redux-thunk": "^2.3.0",
25 | "web-vitals": "^1.1.1"
26 | },
27 | "scripts": {
28 | "start": "react-scripts start",
29 | "build": "react-scripts build",
30 | "test": "react-scripts test",
31 | "eject": "react-scripts eject"
32 | },
33 | "eslintConfig": {
34 | "extends": [
35 | "react-app",
36 | "react-app/jest"
37 | ]
38 | },
39 | "browserslist": {
40 | "production": [
41 | ">0.2%",
42 | "not dead",
43 | "not op_mini all"
44 | ],
45 | "development": [
46 | "last 1 chrome version",
47 | "last 1 firefox version",
48 | "last 1 safari version"
49 | ]
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/public/_redirects:
--------------------------------------------------------------------------------
1 | /* /index.html 200
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oussamabasry/portfolio-frontend-react/f20796f0cb938cce010cb3a83eb2f75c08139bd0/public/favicon.ico
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Basry
46 |
47 |
48 | You need to enable JavaScript to run this app.
49 |
50 |
60 |
65 |
66 |
67 |
--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oussamabasry/portfolio-frontend-react/f20796f0cb938cce010cb3a83eb2f75c08139bd0/public/logo192.png
--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oussamabasry/portfolio-frontend-react/f20796f0cb938cce010cb3a83eb2f75c08139bd0/public/logo512.png
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
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 |
--------------------------------------------------------------------------------
/readmeResources/aboutme.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oussamabasry/portfolio-frontend-react/f20796f0cb938cce010cb3a83eb2f75c08139bd0/readmeResources/aboutme.PNG
--------------------------------------------------------------------------------
/readmeResources/addEducation.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oussamabasry/portfolio-frontend-react/f20796f0cb938cce010cb3a83eb2f75c08139bd0/readmeResources/addEducation.PNG
--------------------------------------------------------------------------------
/readmeResources/adminDashboead.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oussamabasry/portfolio-frontend-react/f20796f0cb938cce010cb3a83eb2f75c08139bd0/readmeResources/adminDashboead.PNG
--------------------------------------------------------------------------------
/readmeResources/adminlogin.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oussamabasry/portfolio-frontend-react/f20796f0cb938cce010cb3a83eb2f75c08139bd0/readmeResources/adminlogin.PNG
--------------------------------------------------------------------------------
/readmeResources/contact.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oussamabasry/portfolio-frontend-react/f20796f0cb938cce010cb3a83eb2f75c08139bd0/readmeResources/contact.PNG
--------------------------------------------------------------------------------
/readmeResources/contactAdmin.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oussamabasry/portfolio-frontend-react/f20796f0cb938cce010cb3a83eb2f75c08139bd0/readmeResources/contactAdmin.PNG
--------------------------------------------------------------------------------
/readmeResources/editEdication.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oussamabasry/portfolio-frontend-react/f20796f0cb938cce010cb3a83eb2f75c08139bd0/readmeResources/editEdication.PNG
--------------------------------------------------------------------------------
/readmeResources/education.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oussamabasry/portfolio-frontend-react/f20796f0cb938cce010cb3a83eb2f75c08139bd0/readmeResources/education.PNG
--------------------------------------------------------------------------------
/readmeResources/educationAdmin.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oussamabasry/portfolio-frontend-react/f20796f0cb938cce010cb3a83eb2f75c08139bd0/readmeResources/educationAdmin.PNG
--------------------------------------------------------------------------------
/readmeResources/experience.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oussamabasry/portfolio-frontend-react/f20796f0cb938cce010cb3a83eb2f75c08139bd0/readmeResources/experience.PNG
--------------------------------------------------------------------------------
/readmeResources/experienceAdmin.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oussamabasry/portfolio-frontend-react/f20796f0cb938cce010cb3a83eb2f75c08139bd0/readmeResources/experienceAdmin.PNG
--------------------------------------------------------------------------------
/readmeResources/footer.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oussamabasry/portfolio-frontend-react/f20796f0cb938cce010cb3a83eb2f75c08139bd0/readmeResources/footer.PNG
--------------------------------------------------------------------------------
/readmeResources/home.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oussamabasry/portfolio-frontend-react/f20796f0cb938cce010cb3a83eb2f75c08139bd0/readmeResources/home.PNG
--------------------------------------------------------------------------------
/readmeResources/projectAdmin.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oussamabasry/portfolio-frontend-react/f20796f0cb938cce010cb3a83eb2f75c08139bd0/readmeResources/projectAdmin.PNG
--------------------------------------------------------------------------------
/readmeResources/projects.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oussamabasry/portfolio-frontend-react/f20796f0cb938cce010cb3a83eb2f75c08139bd0/readmeResources/projects.PNG
--------------------------------------------------------------------------------
/readmeResources/skills.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oussamabasry/portfolio-frontend-react/f20796f0cb938cce010cb3a83eb2f75c08139bd0/readmeResources/skills.PNG
--------------------------------------------------------------------------------
/readmeResources/skilsAdmin.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oussamabasry/portfolio-frontend-react/f20796f0cb938cce010cb3a83eb2f75c08139bd0/readmeResources/skilsAdmin.PNG
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from "react";
2 | import { Router, Route, Switch } from "react-router-dom";
3 | import { useSelector } from "react-redux";
4 | import PortfolioUI from "./pages/PortfolioUI";
5 | import Login from "./components/User/Login/Login";
6 | import SideBar from "./components/Admin/SideBar/SideBar";
7 | import EducationAdmin from "./pages/EducationAdmin";
8 | import { ToastContainer } from "react-toastify";
9 | import history from "./shared/history";
10 | import SecureRoute from "./shared/SecureRoute";
11 | import ExperienceAdmin from "./pages/ExperienceAdmin";
12 | import SkillAdmin from "./pages/SkillAdmin";
13 | import MessageAdmin from "./pages/MessageAdmin";
14 | import isLogin from "./shared/authorization";
15 | import ProjectAdmin from "./pages/ProjectAdmin";
16 | import NotFound from "./pages/NotFound";
17 |
18 | function App() {
19 | const [isLogged, setIsLogged] = useState(isLogin);
20 | const login = useSelector((state) => state.login.isLogin);
21 |
22 | useEffect(() => {
23 | setIsLogged(isLogin);
24 | }, [login]);
25 |
26 | return (
27 |
28 |
29 | {isLogged &&
31 |
40 |
41 |
53 | );
54 | }
55 |
56 | export default App;
57 |
--------------------------------------------------------------------------------
/src/actions/educationAction.js:
--------------------------------------------------------------------------------
1 | import {
2 | addEducationApi,
3 | getEducationsApi,
4 | deleteEducationApi,
5 | updateEducationApi,
6 | } from "../apis/educationApi";
7 | import { toastSuccess, toastError } from "../shared/toast";
8 |
9 | export const getEducations = () => async (dispatch) => {
10 | try {
11 | const { data } = await getEducationsApi();
12 | dispatch({ type: "GET_EDUCATIONS", payload: data });
13 | } catch (error) {
14 | console.log(error);
15 | }
16 | };
17 |
18 | export const addEducation = (education) => async (dispatch) => {
19 | try {
20 | const { data } = await addEducationApi(education);
21 | dispatch({ type: "ADD_EDUCATION", payload: data });
22 | toastSuccess("Education Added Successfully");
23 | } catch (error) {
24 | console.log(error);
25 | toastError("Error while adding education");
26 | }
27 | };
28 |
29 | export const deleteEducation = (id) => async (dispatch) => {
30 | try {
31 | await deleteEducationApi(id);
32 | toastSuccess("Education Deleted Successfully");
33 | dispatch({ type: "DELETE_EDUCATION", payload: id });
34 | } catch (error) {
35 | console.log(error);
36 | toastError("Error while deleting education");
37 | }
38 | };
39 |
40 | export const updateEducation = (id, education) => async (dispatch) => {
41 | try {
42 | const { data } = await updateEducationApi(id, education);
43 | dispatch({
44 | type: "UPDATE_EDUCATION",
45 | payload: {...education,_id: data.education._id}
46 | });
47 | toastSuccess("Education Updated Successfully");
48 | } catch (error) {
49 | console.log(error);
50 | toastError("Error while Updated education");
51 | }
52 | };
53 |
--------------------------------------------------------------------------------
/src/actions/experienceAction.js:
--------------------------------------------------------------------------------
1 | import {
2 | addExperienceApi,
3 | getExperiencesApi,
4 | deleteExperienceApi,
5 | updateExperienceApi,
6 | } from "../apis/experienceApi";
7 | import { toastSuccess, toastError } from "../shared/toast";
8 |
9 | export const getExperiences = () => async (dispatch) => {
10 | try {
11 | const { data } = await getExperiencesApi();
12 | dispatch({ type: "GET_EXPERIENCES", payload: data });
13 | } catch (error) {
14 | console.log(error);
15 | }
16 | };
17 |
18 | export const addExperience = (experience) => async (dispatch) => {
19 | try {
20 | const { data } = await addExperienceApi(experience);
21 | dispatch({ type: "ADD_EXEPERIENCE", payload: data });
22 | toastSuccess("Experience Added Successfully");
23 | } catch (error) {
24 | console.log(error);
25 | toastError("Error while adding experience");
26 | }
27 | };
28 |
29 | export const deleteExperience = (id) => async (dispatch) => {
30 | try {
31 | await deleteExperienceApi(id);
32 | dispatch({ type: "DELETE_EXEPERIENCE", payload: id });
33 | toastSuccess("Experience deleted Successfully");
34 | } catch (error) {
35 | console.log(error);
36 | toastError("Error while deleting experience");
37 | }
38 | };
39 |
40 | export const updateExperience = (id, experience) => async (dispatch) => {
41 | try {
42 | const { data } = await updateExperienceApi(id, experience);
43 | dispatch({
44 | type: "UPDATE_EXEPERIENCE",
45 | payload:{...experience,_id: data.experience._id},
46 | });
47 | toastSuccess("Experience Updated Successfully");
48 | } catch (error) {
49 | console.log(error);
50 | toastError("Error while updating experience");
51 | }
52 | };
53 |
--------------------------------------------------------------------------------
/src/actions/loginAction.js:
--------------------------------------------------------------------------------
1 | import { loginApi } from "../apis/userApi";
2 | import { toastSuccess, toastError } from "../shared/toast";
3 | import history from "../shared/history";
4 | import api from "../apis/serverApi";
5 |
6 | export const loginUser = (authData) => async (dispatch) => {
7 | try {
8 | const { data } = await loginApi(authData);
9 | api.defaults.headers.common["Authorization"] = `Bearer ${data.token}`;
10 | localStorage.setItem(
11 | "userData",
12 | JSON.stringify({
13 | token: data.token,
14 | isLogged: true,
15 | })
16 | );
17 | toastSuccess("Login Successfully");
18 | dispatch({
19 | type: "SIGN_IN",
20 | payload: { isLogin: true, token: data.token },
21 | });
22 | history.push("/education");
23 | } catch (error) {
24 | console.log(error);
25 | toastError("Incorrect email or password");
26 | }
27 | };
28 |
29 | export const logoutUser = () => {
30 | delete api.defaults.headers.common["Authorization"];
31 | localStorage.setItem(
32 | "userData",
33 | JSON.stringify({
34 | token: null,
35 | isLogged: false,
36 | })
37 | );
38 | return {
39 | type: "LOGOUT",
40 | payload: { isLogin: false, token: null },
41 | };
42 | };
43 |
--------------------------------------------------------------------------------
/src/actions/messageAction.js:
--------------------------------------------------------------------------------
1 | import { getMessagesApi, updateMessageApi } from "../apis/messageApi";
2 |
3 | export const getMessages = () => async (dispatch) => {
4 | try {
5 | const { data } = await getMessagesApi();
6 | dispatch({ type: "GET_MESSAGES", payload: data });
7 | } catch (error) {
8 | console.log(error);
9 | }
10 | };
11 |
12 | export const updateMessage = (id, message) => async (dispatch) => {
13 | try {
14 | const { data } = await updateMessageApi(id, message);
15 | dispatch({
16 | type: "UPDATE_MESSAGE",
17 | payload: { ...message, _id: data.message._id },
18 | });
19 | } catch (error) {
20 | console.log(error);
21 | }
22 | };
23 |
--------------------------------------------------------------------------------
/src/actions/projectAction.js:
--------------------------------------------------------------------------------
1 | import {
2 | addProjectApi,
3 | getProjectsApi,
4 | deleteProjectApi,
5 | updateProjectApi,
6 | } from "../apis/projectApi";
7 | import { toastSuccess, toastError } from "../shared/toast";
8 |
9 | export const getprojects = () => async (dispatch) => {
10 | try {
11 | const { data } = await getProjectsApi();
12 | dispatch({ type: "GET_PROJECTS", payload: data });
13 | } catch (error) {
14 | console.log(error);
15 | }
16 | };
17 |
18 | export const addProject = (project) => async (dispatch) => {
19 | try {
20 | const { data } = await addProjectApi(project);
21 | dispatch({ type: "ADD_PROJECT", payload: data });
22 | toastSuccess("Project Added Successfully");
23 | } catch (error) {
24 | console.log(error);
25 | toastError("Error while adding project");
26 | }
27 | };
28 |
29 | export const deleteProject = (id) => async (dispatch) => {
30 | try {
31 | await deleteProjectApi(id);
32 | dispatch({ type: "DELETE_PROJECT", payload: id });
33 | toastSuccess("Project deleted Successfully");
34 | } catch (error) {
35 | console.log(error);
36 | toastError("Error while deleting project");
37 | }
38 | };
39 |
40 | export const updateProject = (id, project) => async (dispatch) => {
41 | try {
42 | const { data } = await updateProjectApi(id, project);
43 | dispatch({
44 | type: "UPDATE_PROJECT",
45 | payload: data.project,
46 | //payload:{...project,_id: data.project._id},
47 | });
48 | toastSuccess("Project Updated Successfully");
49 | } catch (error) {
50 | console.log(error);
51 | toastError("Error while updating project");
52 | }
53 | };
54 |
--------------------------------------------------------------------------------
/src/actions/skillAction.js:
--------------------------------------------------------------------------------
1 | import {
2 | addSkillApi,
3 | getSkillsApi,
4 | deleteSkillApi,
5 | updateSkillApi,
6 | } from "../apis/skillApi";
7 | import { toastSuccess, toastError } from "../shared/toast";
8 |
9 | export const getSkills = () => async (dispatch) => {
10 | try {
11 | const { data } = await getSkillsApi();
12 | dispatch({ type: "GET_SKILLS", payload: data });
13 | } catch (error) {
14 | console.log(error);
15 | }
16 | };
17 |
18 | export const addSkill = (skill) => async (dispatch) => {
19 | try {
20 | const { data } = await addSkillApi(skill);
21 | dispatch({ type: "ADD_SKILL", payload: data });
22 | toastSuccess("Skill Added Successfully");
23 | } catch (error) {
24 | console.log(error);
25 | toastError("Error while adding Skill");
26 | }
27 | };
28 |
29 | export const deleteSkill = (id) => async (dispatch) => {
30 | try {
31 | await deleteSkillApi(id);
32 | dispatch({ type: "DELETE_SKILL", payload: id });
33 | toastSuccess("Skill deleted successfully");
34 | } catch (error) {
35 | console.log(error);
36 | toastError("Error while deleting Skill");
37 | }
38 | };
39 |
40 | export const updateSkill = (id, skill) => async (dispatch) => {
41 | try {
42 | const { data } = await updateSkillApi(id, skill);
43 | dispatch({
44 | type: "UPDATE_SKILL",
45 | payload: { ...skill, _id: data.skill._id },
46 | });
47 | toastSuccess("Skill updated successfully");
48 | } catch (error) {
49 | console.log(error);
50 | toastError("Error while updating Skill");
51 | }
52 | };
53 |
--------------------------------------------------------------------------------
/src/apis/educationApi.js:
--------------------------------------------------------------------------------
1 | import api from "./serverApi";
2 |
3 | export const addEducationApi = (education) => {
4 | return api.post("/educations/", education);
5 | };
6 |
7 | export const getEducationsApi = () => {
8 | return api.get("/educations/");
9 | };
10 |
11 | export const deleteEducationApi = (educationId) => {
12 | return api.delete(`/educations/${educationId}`);
13 | };
14 |
15 | export const updateEducationApi = (educationId, education) => {
16 | return api.put(`/educations/${educationId}`, education);
17 | };
18 |
--------------------------------------------------------------------------------
/src/apis/experienceApi.js:
--------------------------------------------------------------------------------
1 | import api from "./serverApi";
2 |
3 | export const addExperienceApi = (experience) => {
4 | return api.post("/experiences/", experience);
5 | };
6 |
7 | export const getExperiencesApi = () => {
8 | return api.get("/experiences/");
9 | };
10 |
11 | export const deleteExperienceApi = (experienceId) => {
12 | return api.delete(`/experiences/${experienceId}`);
13 | };
14 |
15 | export const updateExperienceApi = (experienceId, experience) => {
16 | return api.put(`/experiences/${experienceId}`, experience);
17 | };
18 |
--------------------------------------------------------------------------------
/src/apis/messageApi.js:
--------------------------------------------------------------------------------
1 | import api from "./serverApi";
2 |
3 | export const getMessagesApi = () => {
4 | return api.get("/messages/", {
5 | headers: {
6 | Authorization: `Bearer ${
7 | JSON.parse(localStorage.getItem("userData")).token
8 | }`,
9 | },
10 | });
11 | };
12 |
13 | export const updateMessageApi = (messageId, message) => {
14 | return api.put(`/messages/${messageId}`, message);
15 | };
16 |
--------------------------------------------------------------------------------
/src/apis/projectApi.js:
--------------------------------------------------------------------------------
1 | import api from "./serverApi";
2 |
3 | export const addProjectApi = (project) => {
4 | return api.post("/projects/", project);
5 | };
6 |
7 | export const getProjectsApi = () => {
8 | return api.get("/projects/");
9 | };
10 |
11 | export const deleteProjectApi = (projectId) => {
12 | return api.delete(`/projects/${projectId}`);
13 | };
14 |
15 | export const updateProjectApi = (projectId, project) => {
16 | return api.put(`/projects/${projectId}`, project);
17 | };
18 |
--------------------------------------------------------------------------------
/src/apis/serverApi.js:
--------------------------------------------------------------------------------
1 | import axios from "axios";
2 |
3 | const api = axios.create({
4 | baseURL: "https://basryback.herokuapp.com",
5 | });
6 |
7 | export const setAuthorizationToken = (token) => {
8 | if (token) {
9 | axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;
10 | } else {
11 | delete axios.defaults.headers.common["Authorization"];
12 | }
13 | };
14 |
15 | export default api;
16 |
17 | export const domainName= "https://basryback.herokuapp.com/";
18 |
--------------------------------------------------------------------------------
/src/apis/skillApi.js:
--------------------------------------------------------------------------------
1 | import api from "./serverApi";
2 |
3 | export const addSkillApi = (skill) => {
4 | return api.post("/skills/", skill);
5 | };
6 |
7 | export const getSkillsApi = () => {
8 | return api.get("/skills/");
9 | };
10 |
11 | export const deleteSkillApi = (skillId) => {
12 | return api.delete(`/skills/${skillId}`);
13 | };
14 |
15 | export const updateSkillApi = (skillId, skill) => {
16 | return api.put(`/skills/${skillId}`, skill);
17 | };
18 |
--------------------------------------------------------------------------------
/src/apis/userApi.js:
--------------------------------------------------------------------------------
1 | import api from "./serverApi";
2 |
3 | export const loginApi = (authData) => {
4 | return api.post("/users/login", authData);
5 | };
6 |
7 |
8 |
--------------------------------------------------------------------------------
/src/assets/images/basry-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oussamabasry/portfolio-frontend-react/f20796f0cb938cce010cb3a83eb2f75c08139bd0/src/assets/images/basry-logo.png
--------------------------------------------------------------------------------
/src/assets/images/dev.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oussamabasry/portfolio-frontend-react/f20796f0cb938cce010cb3a83eb2f75c08139bd0/src/assets/images/dev.png
--------------------------------------------------------------------------------
/src/assets/images/dev.svg:
--------------------------------------------------------------------------------
1 |
2 | image/svg+xml
36 |
43 |
44 |
45 |
46 |
47 | {header}
48 |
49 |
56 |
133 |
134 |
139 | Close
140 |
141 |
147 | {submitValue}
148 |
149 |
150 |
151 |
152 |
153 |
41 |
48 |
49 |
50 |
51 |
52 | {header}
53 |
54 |
61 |
165 |
166 |
171 | Close
172 |
173 |
179 | {submitValue}
180 |
181 |
182 |
183 |
184 |
185 |
6 |
13 |
14 |
15 |
16 |
17 | {header}
18 |
19 |
26 |
{children}
27 |
28 |
33 | Close
34 |
35 | onClick()}
40 | >
41 | {submitValue}
42 |
43 |
44 |
45 |
46 |
47 |
37 |
44 |
45 |
46 |
47 |
48 | {header}
49 |
50 |
57 |
161 |
162 |
167 | Close
168 |
169 |
175 | {submitValue}
176 |
177 |
178 |
179 |
180 |
181 |
26 |
27 |
31 |
32 |
33 |
34 |
38 | {SidebarData.map((item, index) => {
39 | return (
40 |
41 | {item.title === "Logout" ? (
42 | {item.title}
45 |
46 | ) : (
47 | {item.title}
50 |
51 | )}
52 |
53 | );
54 | })}
55 |
56 |
57 |
58 |
59 | );
60 | }
61 |
62 | export default SideBar;
63 |
--------------------------------------------------------------------------------
/src/components/Admin/SideBar/SidebarData.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import * as FaIcons from "react-icons/fa";
3 | import * as AiIcons from "react-icons/ai";
4 | import * as IoIcons from "react-icons/io";
5 | import * as FcIcons from "react-icons/fc";
6 | import * as GoIcons from "react-icons/go";
7 |
8 | export const SidebarData = [
9 | {
10 | title: "Home",
11 | path: "/",
12 | icon:
32 |
39 |
40 |
41 |
42 |
43 | {header}
44 |
45 |
52 |
93 |
94 |
99 | Close
100 |
101 |
107 | {submitValue}
108 |
109 |
110 |
111 |
112 |
113 |
18 | {headerProprities.map((prop, index) => {
19 | return (
20 |
21 | {(prop === "startDate" || prop === "endDate") &&
22 | moment(data[prop]).format("MMM YYYY")}
23 | {prop === "projectImage" && (
24 |
36 | );
37 | })}
38 |
39 | ondelteClick(data)}
43 | >
44 | Delete
45 |
46 |
47 |
48 | onEditClick(data)}
54 | >
55 | Edit
56 |
57 |
58 |
59 | );
60 | });
61 |
62 | const headersRow = headerText.map((head, index) => {
63 | return (
64 |
65 | {head}
66 |
67 | );
68 | });
69 |
70 | return (
71 |
72 |
73 |
{title}
74 |
80 | Add {title}
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 | {headersRow}
89 |
92 |
93 | {dataRows}
94 |
95 |
96 |
13 |
14 |
15 | About Me
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 | I am an engineering student in the second year of Software
25 | Engineering and Distributed Computer Systems at the Higher Normal
26 | School of Technical Education Mohammedia (ENSET-M).
27 |
34 |
35 |
36 |
38 | );
39 | };
40 |
41 | export default About;
42 |
--------------------------------------------------------------------------------
/src/components/User/Contacts/Contacts.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import { useForm } from "react-hook-form";
3 | import { toast } from "react-toastify";
4 | import serverApi from "../../../apis/serverApi";
5 | import { getMessages } from "../../../actions/messageAction";
6 | import { useDispatch } from "react-redux";
7 |
8 | const Contacts = ({ reff }) => {
9 | const {
10 | register,
11 | handleSubmit,
12 | reset,
13 | formState: { errors },
14 | } = useForm();
15 |
16 | const [loading, setloading] = useState(false);
17 |
18 | const dispatch = useDispatch();
19 |
20 | const onSubmit = async (data) => {
21 | try {
22 | setloading(true);
23 | await serverApi.post("/messages", data);
24 | setloading(false);
25 | toast.success("Sent Successfully", {
26 | position: "top-right",
27 | autoClose: 7000,
28 | hideProgressBar: false,
29 | closeOnClick: true,
30 | pauseOnHover: true,
31 | draggable: true,
32 | progress: undefined,
33 | });
34 | reset();
35 | dispatch(getMessages());
36 | } catch (error) {
37 | toast.error("an error happened while sending the message", {
38 | position: "top-right",
39 | autoClose: 7000,
40 | hideProgressBar: false,
41 | closeOnClick: true,
42 | pauseOnHover: true,
43 | draggable: true,
44 | progress: undefined,
45 | });
46 | }
47 | setloading(false);
48 | };
49 |
50 |
51 | return (
52 |
240 | );
241 | };
242 |
243 | export default Contacts;
244 |
--------------------------------------------------------------------------------
/src/components/User/Education/Education.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from "react";
2 | import educationImage from "../../../assets/images/education.png";
3 | import { useSelector, useDispatch } from "react-redux";
4 | import { getEducations } from "../../../actions/educationAction";
5 | import moment from "moment";
6 |
7 | const Education = ({ reff }) => {
8 | const dispatch = useDispatch();
9 | const educations = useSelector((state) => state.educations);
10 |
11 | useEffect(() => {
12 | dispatch(getEducations());
13 | }, [dispatch]);
14 |
15 | const education = educations.map((edu) => {
16 | return (
17 |
18 |
19 | {edu.title}
20 |
21 |
22 | {edu.school}, {edu.city}
23 |
24 |
25 | {moment(edu.startDate).format("MMM YYYY")} -{" "}
26 | {moment(edu.endDate).format("MMM YYYY")}
27 |
28 |
29 |
40 |
41 |
42 | Education
43 |
44 |
45 |
46 |
47 |
52 |
53 |
54 |
57 |
58 |
60 | );
61 | };
62 |
63 | export default Education;
64 |
--------------------------------------------------------------------------------
/src/components/User/Experience/Experience.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from "react";
2 | import experienceImage from "../../../assets/images/experience.png";
3 | import { useSelector, useDispatch } from "react-redux";
4 | import { getExperiences } from "../../../actions/experienceAction";
5 | import moment from "moment";
6 |
7 | const Experience = ({ reff }) => {
8 | const experiences = useSelector((state) => state.experiences);
9 | const dispatch = useDispatch();
10 |
11 | useEffect(() => {
12 | dispatch(getExperiences());
13 | }, [dispatch]);
14 |
15 | const experience = experiences.map((exp) => {
16 | return (
17 |
18 |
19 |
20 |
21 | {exp.title}
22 |
23 |
24 | {exp.company}, {exp.city}
25 |
26 |
27 | {moment(exp.startDate).format("MMM YYYY")} -{" "}
28 | {moment(exp.endDate).format("MMM YYYY")}
29 |
30 |
31 | {exp.description}
32 |
33 |
41 | Technologies:
42 |
43 |
44 | {" "}
45 | {exp.technologies}
46 |
47 |
48 |
49 |
50 |
61 |
62 |
63 | Experience
64 |
65 |
66 |
67 |
68 |
73 |
74 |
75 |
78 |
79 |
81 | );
82 | };
83 |
84 | export default Experience;
85 |
--------------------------------------------------------------------------------
/src/components/User/Footer/Footer.css:
--------------------------------------------------------------------------------
1 | .foot {
2 | background-color: #282d32;
3 | }
4 |
5 | .title {
6 | color: white;
7 | }
8 |
9 | .sub-title {
10 | color: #dddddd;
11 | }
12 |
13 | .icons-color {
14 | color: #fff;
15 | }
16 |
17 | .link-hover :hover {
18 | color: #00ffd4;
19 | }
20 |
--------------------------------------------------------------------------------
/src/components/User/Footer/Footer.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import "./Footer.css";
3 | import { Link } from "react-router-dom";
4 |
5 | const Footer = ({ onLinkClick }) => {
6 | return (
7 |
8 |
9 |
10 |
11 |
12 | Oussama Basry
13 |
14 |
15 | I am an engineering student in the second year of Software
16 | Engineering and Distributed Computer Systems at the Higher Normal
17 | School of Technical Education Mohammedia (ENSET-M).
18 |
19 |
20 |
21 |
22 |
23 | Liens
24 |
25 |
26 |
36 |
37 |
46 |
47 |
48 |
57 |
58 |
67 |
68 |
69 |
70 |
71 | Contact
72 |
73 |
Morocco, Casablanca, Mohammedia
74 |
obasry@gmail.com
75 |
+212 6 50 56 38 27
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 | {" "}
85 | Copyright ©2021 All rights reserved by:
86 |
87 | Oussama Basry
88 |
89 |
90 |
91 |
92 |
142 |
143 |
145 | );
146 | };
147 |
148 | export default Footer;
149 |
--------------------------------------------------------------------------------
/src/components/User/Login/Login.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import "./styles.css";
3 | import { useForm } from "react-hook-form";
4 | import { useDispatch } from "react-redux";
5 | import { loginUser } from "../../../actions/loginAction";
6 |
7 | const Login = () => {
8 | const {
9 | register,
10 | handleSubmit,
11 | formState: { errors },
12 | } = useForm();
13 |
14 | const dispatch = useDispatch();
15 |
16 | const onSubmit = async (data) => {
17 | dispatch(loginUser(data));
18 | };
19 |
20 | return (
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 | Login only for administrator !{" "}
30 |
31 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
23 |
24 |
25 |
26 |
27 |
setToggler(!toggler)}
36 | >
37 |
42 |
43 |
44 |
45 |
53 |
54 |
63 |
64 |
73 |
74 |
83 |
84 |
93 |
94 |
103 |
104 |
113 |
114 |
115 |
116 |
117 |
121 |
122 |
123 |
125 | );
126 | };
127 |
128 | export default Navbar;
129 |
--------------------------------------------------------------------------------
/src/components/User/Navbar/styles.css:
--------------------------------------------------------------------------------
1 |
2 | .rgba-gradient-nav {
3 | background-color: #eee !important;
4 | }
5 | .navbar-scroll-color{
6 | background-color: #fff !important;
7 | }
8 |
9 | .rgba-gradient {
10 | background-color: #eee;
11 | }
12 |
13 |
14 | ul li {
15 | text-align: center;
16 | padding: 0 10px 0 0;
17 | }
18 |
19 | ul li a {
20 | color: #fff !important;
21 | font-size: 13px;
22 | }
23 |
24 | .navbar .navbar-nav > li > a:hover,
25 | .navbar-default .navbar-nav > li > a:focus {
26 | color: #0275d8 !important;
27 | }
28 |
29 | .navbar {
30 | background-color: #fff;
31 | }
32 |
33 | .nav-link,
34 | .navbar-brand {
35 | color: black !important;
36 | font-size: 15px;
37 | }
38 |
39 |
--------------------------------------------------------------------------------
/src/components/User/PageIntro/PageIntro.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import "./styles.css";
3 | import homeImage from "../../../assets/images/dev.svg";
4 |
5 | const PageIntro = ({ reff }) => {
6 | return (
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
19 | Full Stack Web Developper
20 |
21 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
45 | );
46 | };
47 |
48 | export default PageIntro;
49 |
--------------------------------------------------------------------------------
/src/components/User/PageIntro/styles.css:
--------------------------------------------------------------------------------
1 | .rgba-gradient {
2 | background-color: #eee;
3 | }
4 |
5 | .header {
6 | height: 100vh;
7 | color: #fff;
8 | }
9 |
10 | .dev-img {
11 | animation: move 2.5s ease-in-out infinite;
12 | }
13 |
14 | @keyframes move {
15 | 0%,
16 | 100% {
17 | transform: translateY(0);
18 | }
19 | 50% {
20 | transform: translateY(40px);
21 | transform: translateX(20px);
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/src/components/User/Projects/Projects.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from "react";
2 | import { useSelector, useDispatch } from "react-redux";
3 | import { getprojects } from "../../../actions/projectAction";
4 | import ModalImage from "react-modal-image";
5 | import { domainName } from "../../../apis/serverApi";
6 |
7 | const Projects = ({ reff }) => {
8 | const projects = useSelector((state) => state.projects);
9 | const dispatch = useDispatch();
10 |
11 | useEffect(() => {
12 | dispatch(getprojects());
13 | }, [dispatch]);
14 |
15 | const project = projects.map((proj) => {
16 | return (
17 |
21 |
22 |
28 |
29 |
{proj.title}
30 |
{proj.description}
31 |
39 | Technologies:
40 |
41 |
{proj.technologies}
42 | {proj.haveLink && (
43 |
49 |
51 | )}
52 |
53 |
64 |
65 |
Projects
66 |
67 |
{project}
68 |
70 | );
71 | };
72 |
73 | export default Projects;
74 |
--------------------------------------------------------------------------------
/src/components/User/Skills/Skills.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from "react";
2 | import SkillBar from "react-skillbars";
3 | import { useSelector, useDispatch } from "react-redux";
4 | import { getSkills } from "../../../actions/skillAction";
5 |
6 | const Skills = ({ reff }) => {
7 | const skills = useSelector((state) => state.skills);
8 | const dispatch = useDispatch();
9 |
10 | useEffect(() => {
11 | dispatch(getSkills());
12 | }, [dispatch]);
13 |
14 | const colors = {
15 | bar: "#3498db",
16 | title: {
17 | text: "#fff",
18 | background: "#2980b9",
19 | },
20 | };
21 |
22 | return (
23 |
24 |
25 |
26 | Skills
27 |
28 |
34 |
33 |
34 |
36 | ,
37 | document.getElementById("root")
38 | );
39 |
40 | // If you want to start measuring performance in your app, pass a function
41 | // to log results (for example: reportWebVitals(console.log))
42 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
43 | reportWebVitals();
44 |
--------------------------------------------------------------------------------
/src/pages/EducationAdmin.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import { useSelector, useDispatch } from "react-redux";
3 | import { deleteEducation } from "../actions/educationAction";
4 | import EducationModal from "../components/Admin/EducationModal";
5 | import Table from "../components/Admin/Table";
6 |
7 | function EducationAdmin() {
8 | const educations = useSelector((state) => state.educations);
9 | const dispatch = useDispatch();
10 | const [selectedEduca, setSelectedEduca] = useState({
11 | title: "",
12 | school: "",
13 | city: "",
14 | startDate: "",
15 | endDate: "",
16 | });
17 |
18 | const ondelteClick = (education) => {
19 | dispatch(deleteEducation(education._id));
20 | };
21 |
22 | const onEditClick = (data) => {
23 | setSelectedEduca(data);
24 | };
25 |
26 | return (
27 |
54 | );
55 | }
56 |
57 | export default EducationAdmin;
58 |
--------------------------------------------------------------------------------
/src/pages/ExperienceAdmin.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import { useSelector, useDispatch } from "react-redux";
3 | import { deleteExperience } from "../actions/experienceAction";
4 | import ExperienceModal from "../components/Admin/ExperienceModal";
5 | import Table from "../components/Admin/Table";
6 |
7 | const ExperienceAdmin = () => {
8 | const experiences = useSelector((state) => state.experiences);
9 | const dispatch = useDispatch();
10 | const [selectedExperience, setSelectedExperience] = useState({
11 | title: "",
12 | company: "",
13 | city: "",
14 | startDate: "",
15 | endDate: "",
16 | description: "",
17 | technologies: "",
18 | });
19 |
20 | const ondelteClick = (experience) => {
21 | dispatch(deleteExperience(experience._id));
22 | };
23 |
24 | const onEditClick = (experience) => {
25 | setSelectedExperience(experience);
26 | };
27 |
28 | return (
29 |
73 | );
74 | };
75 |
76 | export default ExperienceAdmin;
77 |
--------------------------------------------------------------------------------
/src/pages/Home.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | function Home() {
4 | return (
5 |
6 |
Home
7 |
8 | );
9 | }
10 |
11 | export default Home;
12 |
--------------------------------------------------------------------------------
/src/pages/MessageAdmin.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from "react";
2 | import { useSelector, useDispatch } from "react-redux";
3 | import moment from "moment";
4 | import { updateMessage, getMessages } from "../actions/messageAction";
5 |
6 | const MessageAdmin = () => {
7 | const messages = useSelector((state) => state.messages);
8 | const dispatch = useDispatch();
9 | const [selectedMessage, setSelectedMessage] = useState(null);
10 |
11 | useEffect(() => {
12 | dispatch(getMessages());
13 | }, [dispatch]);
14 |
15 | const onMessageClick = (message) => {
16 | if (!message.isSeen) {
17 | dispatch(updateMessage(message._id, { ...message, isSeen: true }));
18 | }
19 | setSelectedMessage(message);
20 | };
21 |
22 | const listMessages = messages.map((msg) => {
23 | return (
24 | onMessageClick(msg)}
30 | >
31 |
32 |
{msg.subject}
33 | {moment(msg.date).format("MMMM Do YYYY, h:mm:ss a")}
34 |
35 |
36 | {msg.message.substring(0, 100)}
37 | {" . . ."}
38 |
39 |
See More
40 |
41 |
42 | Send by:
43 | {msg.name}
44 |
45 | {!msg.isSeen && (
46 |
1
47 | )}
48 |
49 |
54 |
55 |
56 |
Message Details
57 | {selectedMessage && (
58 |
62 |
63 |
From:
64 | {selectedMessage.name}
65 |
66 | Date:
67 | {moment(selectedMessage.date).format(
68 | "MMMM Do YYYY, h:mm:ss a"
69 | )}
70 |
71 |
72 |
73 |
74 |
Email:
75 |
{selectedMessage.email}
76 |
77 |
78 | Subject:
79 |
80 | {selectedMessage.subject}
81 |
82 |
83 |
84 |
Message:
85 |
{selectedMessage.message}
86 |
87 |
88 |
89 | )}
90 |
91 |
92 |
Conversations
93 |
{listMessages}
94 |
95 |
96 |
6 |
Error 404 :{" "}Page Not Found
7 |
8 | );
9 | };
10 |
11 | export default NotFound;
12 |
--------------------------------------------------------------------------------
/src/pages/PortfolioUI.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect, useRef } from "react";
2 | import Contacts from "../components/User/Contacts/Contacts";
3 | import Education from "../components/User/Education/Education";
4 | import Experience from "../components/User/Experience/Experience";
5 | import About from "../components/User/About/About";
6 | import Footer from "../components/User/Footer/Footer";
7 | import PageIntro from "../components/User/PageIntro/PageIntro";
8 | import Projects from "../components/User/Projects/Projects";
9 | import Skills from "../components/User/Skills/Skills";
10 | import isLogin from "../shared/authorization";
11 | import { useSelector } from "react-redux";
12 | import Navbar from "../components/User/Navbar/Navbar";
13 |
14 | const PortfolioUI = () => {
15 | const [isLogged, setIsLogged] = useState(isLogin);
16 | const login = useSelector((state) => state.login.isLogin);
17 | const projectSection = useRef(null);
18 | const educationSection = useRef(null);
19 | const experienceSection = useRef(null);
20 | const skillSection = useRef(null);
21 | const contactSection = useRef(null);
22 | const homeSection = useRef(null);
23 | const aboutSection = useRef(null);
24 |
25 | useEffect(() => {
26 | setIsLogged(isLogin);
27 | }, [login]);
28 |
29 | const scrollUtil = (section) => {
30 | window.scrollTo({
31 | top: section.current.offsetTop,
32 | behavior: "smooth",
33 | });
34 | };
35 | const onLinkClick = (section) => {
36 | switch (section) {
37 | case "projectSection":
38 | scrollUtil(projectSection);
39 | break;
40 | case "aboutSection":
41 | scrollUtil(aboutSection);
42 | break;
43 | case "educationSection":
44 | scrollUtil(educationSection);
45 | break;
46 | case "experienceSection":
47 | scrollUtil(experienceSection);
48 | break;
49 | case "skillSection":
50 | scrollUtil(skillSection);
51 | break;
52 | case "contactSection":
53 | scrollUtil(contactSection);
54 | break;
55 | case "homeSection":
56 | scrollUtil(homeSection);
57 | break;
58 | default:
59 | scrollUtil(homeSection);
60 | }
61 | };
62 |
63 | return (
64 |
65 | {!isLogged &&
}
66 |
67 |
68 |
11 | isLogged ? (
12 |
20 | );
21 | };
22 |
23 | export default SecureRoute;
24 |
--------------------------------------------------------------------------------
/src/shared/authorization.js:
--------------------------------------------------------------------------------
1 | const auth = () => {
2 | const user = JSON.parse(localStorage.getItem("userData"));
3 | if (user && user.isLogged) {
4 | return user.isLogged;
5 | }
6 | return false;
7 | };
8 |
9 | export default auth;
10 |
--------------------------------------------------------------------------------
/src/shared/history.js:
--------------------------------------------------------------------------------
1 | import {createBrowserHistory} from 'history'
2 |
3 | export default createBrowserHistory();
--------------------------------------------------------------------------------
/src/shared/toast.js:
--------------------------------------------------------------------------------
1 | import { toast } from "react-toastify";
2 |
3 | export const toastSuccess = (message) => {
4 | toast.success(message, {
5 | position: "top-right",
6 | autoClose: 7000,
7 | hideProgressBar: false,
8 | closeOnClick: true,
9 | pauseOnHover: true,
10 | draggable: true,
11 | progress: undefined,
12 | });
13 | };
14 |
15 | export const toastError = (message) => {
16 | toast.error(message, {
17 | position: "top-right",
18 | autoClose: 7000,
19 | hideProgressBar: false,
20 | closeOnClick: true,
21 | pauseOnHover: true,
22 | draggable: true,
23 | progress: undefined,
24 | });
25 | };
26 |
--------------------------------------------------------------------------------