feature : version mobile WIP

src/components/name3d.jsx

@@ -1,5 +1,6 @@
+/* eslint-disable react/no-unknown-property */
 import { Canvas, useFrame, useThree } from '@react-three/fiber';
-import { Center, Text3D, Float } from '@react-three/drei';
+import { Center, Text3D, Float, Resize } from '@react-three/drei';
 import { useRef } from 'react';
 
 const CustomMesh = () => {
@@ -16,53 +17,55 @@ const CustomMesh = () => {
 
   return (
     <>
-      <Center>
-        <group ref={ref} position={(-8, -10, 2)}>
-          <Float
-            speed={2} // Animation speed, defaults to 1
-            rotationIntensity={0.8} // XYZ rotation intensity, defaults to 1
-            floatIntensity={0.1} // Up/down float intensity, works like a multiplier with floatingRange,defaults to 1
-            floatingRange={[2, 1.5]} // Range of y-axis values the object will float within, defaults to [-0.1,0.1]
-          >
-            <mesh>
-              <Text3D
-                bevelSegments={1}
-                bevelThickness={0.3}
-                bevelEnabled
-                curveSegments={10}
-                size={2.5}
-                lineHeight={1}
-                letterSpacing={0.1}
-                font={'./JHreverse.json'}>
-                {`Johan Nilsson`}
-                <meshPhysicalMaterial
-                  roughness={0.1}
-                  transmission={0.05}
-                  thickness={5}
-                />
-              </Text3D>
-            </mesh>
-            <mesh position={[9.5, -3, -1.5]}>
-              <Text3D
-                bevelSegments={1}
-                bevelThickness={0.3}
-                bevelEnabled
-                curveSegments={10}
-                size={1}
-                lineHeight={0.5}
-                letterSpacing={0.1}
-                font={'./Payback.json'}>
-                {`Portfolio`}
-                <meshPhysicalMaterial
-                  roughness={0.1}
-                  transmission={0.05}
-                  thickness={5}
-                />
-              </Text3D>
-            </mesh>
-          </Float>
-        </group>
-      </Center>
+      <Resize>
+        <Center>
+          <group ref={ref} position={(-8, -10, 2)}>
+            <Float
+              speed={2} // Animation speed, defaults to 1
+              rotationIntensity={0.8} // XYZ rotation intensity, defaults to 1
+              floatIntensity={0.1} // Up/down float intensity, works like a multiplier with floatingRange,defaults to 1
+              floatingRange={[2, 1.5]} // Range of y-axis values the object will float within, defaults to [-0.1,0.1]
+            >
+              <mesh>
+                <Text3D
+                  bevelSegments={1}
+                  bevelThickness={0.3}
+                  bevelEnabled
+                  curveSegments={10}
+                  size={2.5}
+                  lineHeight={1}
+                  letterSpacing={0.1}
+                  font={'./JHreverse.json'}>
+                  {`Johan Nilsson`}
+                  <meshPhysicalMaterial
+                    roughness={0.1}
+                    transmission={0.05}
+                    thickness={5}
+                  />
+                </Text3D>
+              </mesh>
+              <mesh position={[9.5, -3, -1.5]}>
+                <Text3D
+                  bevelSegments={1}
+                  bevelThickness={0.3}
+                  bevelEnabled
+                  curveSegments={10}
+                  size={1}
+                  lineHeight={0.5}
+                  letterSpacing={0.1}
+                  font={'./Payback.json'}>
+                  {`Portfolio`}
+                  <meshPhysicalMaterial
+                    roughness={0.1}
+                    transmission={0.05}
+                    thickness={5}
+                  />
+                </Text3D>
+              </mesh>
+            </Float>
+          </group>
+        </Center>
+      </Resize>
     </>
   );
 };

src/components/nav.jsx

@@ -1,15 +1,23 @@
 import '../styles/nav.scss';
 import { NavLink } from 'react-router-dom';
+import { useState } from 'react';
 import github from '../img/github.png';
 import linkedin from '../img/linkedin.png';
 
 const Nav = () => {
+  const [showNav, setShowNav] = useState(false);
+
+  const handleShowNav = () => {
+    setShowNav(!showNav);
+  };
+
   return (
-    <header className='header'>
+    <header className={`header ${showNav ? 'active' : 'inactive'}`}>
       <section className='logo-header'>
         <p className='name-header'>Johan Nilsson</p>
       </section>
-      <nav className='navbar'>
+      <button className='mobile-burger' onClick={handleShowNav}></button>
+      <nav className={`navbar ${showNav ? 'active' : 'inactive'}`}>
         <NavLink
           to='/'
           className={({ isActive, isPending }) =>

src/components/projet-card.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 import '../styles/projet-card.scss';
 
 const ProjetCard = (props) => {

src/components/stack-card.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 import '../styles/stack-card.scss';
 
 const getColorClass = (tag) => {

src/styles/aPropos.scss

@@ -54,3 +54,20 @@
     }
   }
 }
+@media (max-width: $layout-bp-small) {
+  .apropos-container {
+    .apropos {
+      display: flex;
+      flex-direction: column;
+      padding: 1rem;
+      width: 90%;
+
+      .pp {
+        height: 25rem;
+      }
+    }
+    .apropos-description {
+      line-height: 1.8rem;
+    }
+  }
+}

src/styles/nav.scss

@@ -30,6 +30,9 @@
     left: 0px;
     z-index: -1;
   }
+  .mobile-burger {
+    display: none;
+  }
 }
 .logo-header {
   display: flex;
@@ -101,3 +104,81 @@
     }
   }
 }
+
+@media (max-width: $layout-bp-small) {
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    padding: 0 2rem;
+    height: 10vh;
+    transition: all 1s ease;
+    background-color: rgba(0, 0, 0, 0.504);
+    &.header::before {
+      content: '';
+      background-image: none;
+    }
+    .navbar.inactive {
+      display: flex;
+      position: fixed;
+      flex-direction: column;
+      justify-content: center;
+      right: 0;
+      top: -100vh;
+      width: 100vw;
+      z-index: 3;
+      opacity: 0 {
+        font-size: 5vw;
+        height: auto;
+      }
+    }
+    .navbar.active {
+      display: flex;
+      position: fixed;
+      flex-direction: column;
+      justify-content: center;
+      right: 0;
+      width: 100vw;
+      opacity: 1;
+      transition: all 1.5s ease-in-out;
+    }
+    .mobile-burger {
+      height: 3rem;
+      width: 3rem;
+      display: flex;
+      position: fixed;
+      z-index: 4;
+      top: 1rem;
+      right: 2rem;
+      background: transparent;
+      border: none;
+      background-image: url('../img/burger.png');
+      background-size: cover;
+    }
+    .mobile-burger:hover {
+      cursor: pointer;
+      background-image: url('../img/selectedBurger.png');
+      background-size: cover;
+    }
+    .logo-header {
+      display: flex;
+      position: absolute;
+      top: 1rem;
+      padding-left: 0;
+      .name-header {
+        font-family: Jonathan Hetegral;
+        color: white;
+        font-size: 2rem;
+      }
+    }
+  }
+  .header.inactive {
+    transition: background-color 1.3s ease-in-out height 1s ease-in-out;
+  }
+  .header.active {
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.633);
+    transition: background-color 1.3s ease-in-out height 1s ease-in-out;
+  }
+}

src/styles/settings.scss

@@ -11,3 +11,11 @@ $titleFont: 'Josefin Sans', sans-serif;
 $small: 1rem;
 $large: 3rem;
 $x-large: 6rem;
+
+// Layout //
+
+$layout-bp-small: 576px;
+$layout-bp-medium: 768px;
+$layout-bp-large: 992px;
+$layout-bp-xlarge: 1200px;
+$layout-bp-xxlarge: 1400px;