WELCOME
- - - -
- 
-
-
- Hey there. Iβm Joseph. - Iβm a software developer -
- -I can help you build a product , feature or website Look through some of my work and experience! If you like what you see and have a project you need coded, - donβt hestiate to contact me.
- --
-
- 
- 
- 
- 
-
-
- 
';
-btnLive.innerHTML = 'See source 
';
-
-// creation list of big buttons
-for (let i = 0; i < 2; i += 1) {
- liElt[i] = document.createElement('li');
-}
-// click on x bouton
-xButton.addEventListener('click', () => {
- box.classList.add('popupProjectDetail');
- contenainer.textContent = '';// erase containts in the container
- listTechnologie.textContent = '';// erase avery bottons in the list
-});
-
-// build detail box
-function buildDetails(index) {
- box.classList.remove('popupProjectDetail');
- // add values to element
- imageProject.src = arrProjects[index].image;
- titleProject.textContent = arrProjects[index].title;
- descriptionProject.textContent = arrProjects[index].description;
- for (let i = 0; i < arrProjects[index].technologie.length; i += 1) {
- listTechnologie.innerHTML += ``;
- }
- btnLive.formaction = arrProjects[index].linkLive;
- btnSource.formaction = arrProjects[index].linkSource;
- // add to body
- liElt[0].appendChild(btnSource);
- liElt[1].appendChild(btnLive);
- listLiveSource.append(liElt[0]);
- listLiveSource.append(liElt[1]);
- // add elt to parent
- const arrChild = [xButton, imageProject, titleProject,
- listTechnologie, descriptionProject, listLiveSource];
- for (let i = 0; i < arrChild.length; i += 1) {
- contenainer.appendChild(arrChild[i]);
- }
-}
-// put project section in a variable to add a listener
-const projectSection = document.querySelector('.box-articles');
-projectSection.addEventListener('click', (event) => {
- const index = event.target.id;
- buildDetails(index);
-});
diff --git a/src/App.css b/src/App.css
new file mode 100644
index 0000000..db0bc75
--- /dev/null
+++ b/src/App.css
@@ -0,0 +1,98 @@
+.main-container {
+ background: url(https://res.cloudinary.com/dhko6cdgf/image/upload/v1704894432/josephIo/Images/background/stars-3750824_fpotsm.png) no-repeat fixed;
+ background-size: cover;
+}
+
+.nav-mobil {
+ background-color: aquamarine;
+}
+
+.ul-works {
+ height: 75vh;
+ overflow: hidden;
+ overflow-y: auto;
+ background-color: rgb(2, 55, 115, 0.1);
+ padding: 1.5rem 0.8rem;
+ border-radius: 0.2rem;
+}
+
+::-webkit-scrollbar {
+ width: 10px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+ background: #f1f1f1;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+ background: #888;
+ border-radius: 5px;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+ background: #555;
+}
+
+.full-container {
+ height: 100vh;
+}
+
+.section-technologies {
+ background:
+ url(https://res.cloudinary.com/dhko6cdgf/image/upload/v1704552054/josephIo/Images/Decoration/Desktop/rorazu3dmq1c1qnzrlwa.png) 0% 100% no-repeat,
+ url(https://res.cloudinary.com/dhko6cdgf/image/upload/v1704552052/josephIo/Images/Decoration/Desktop/rszgf9fmxizuj2pahcrc.svg) 100% 0% no-repeat;
+ background-size: 20%;
+}
+
+.section-works {
+ background:
+ url(https://res.cloudinary.com/dhko6cdgf/image/upload/v1704552051/josephIo/Images/Decoration/Desktop/d3vfrzhxre3sawpm0z2k.svg) 0% 110% no-repeat,
+ url(https://res.cloudinary.com/dhko6cdgf/image/upload/v1704556807/josephIo/Images/Decoration/Desktop/kttadlef6o87r9lcyr0k.png) 50% 50% no-repeat,
+ url(https://res.cloudinary.com/dhko6cdgf/image/upload/v1704552054/josephIo/Images/Decoration/Desktop/mpsnvpigqmelwpkmht5r.svg) 68% 75% no-repeat;
+}
+
+.section-main {
+ position: relative;
+ overflow: visible;
+ background: url(https://res.cloudinary.com/dhko6cdgf/image/upload/v1704552059/josephIo/Images/Decoration/Desktop/ouofvpzrpyh4tdw1i8xs.png) 7% 50% repeat;
+ background-size: 150%;
+}
+
+.section-about {
+ background: url(https://res.cloudinary.com/dhko6cdgf/image/upload/v1704552059/josephIo/Images/Decoration/Desktop/ouofvpzrpyh4tdw1i8xs.png);
+}
+
+.hideMenuNav {
+ left: 500%;
+ transition: 0.4s;
+}
+
+.showMenuNav {
+ position: fixed;
+ width: 100%;
+ height: 100vh;
+ top: 0;
+ left: 0;
+ background: white;
+ z-index: 10;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-evenly;
+ align-items: center;
+ transition: 0.4s;
+}
+
+.showWorkModal {
+ display: block;
+ z-index: 10;
+ position: fixed;
+ width: 100%;
+ height: 100vh;
+ top: 0;
+ left: 0;
+ overflow: hidden;
+ overflow-y: auto;
+}
diff --git a/src/App.js b/src/App.js
new file mode 100644
index 0000000..fe3c71c
--- /dev/null
+++ b/src/App.js
@@ -0,0 +1,43 @@
+import './App.css';
+import { RouterProvider, createBrowserRouter } from 'react-router-dom';
+import Root from './root/Root';
+import MainPage from './components/MainPage';
+import ErrorPage from './components/ErrorPage';
+import Technologies from './components/Technologies/Technologies';
+import Works from './components/Works/Works';
+import About from './components/About/About';
+
+const router = createBrowserRouter([
+ {
+ path: '/',
+ element: