feature : mobile version

package.json

@@ -14,6 +14,7 @@
     "@react-three/drei": "^9.89.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-media": "^1.10.0",
     "react-router": "^6.20.0",
     "react-router-dom": "^6.20.0",
     "react-three-fiber": "^6.0.13",

src/components/banner.jsx

@@ -1,11 +1,15 @@
 // import { Canvas } from '@react-three/fiber';
 import '../styles/banner.scss';
 import Name3d from './name3d';
+import HeroMobile from './hero-mobile';
+import Media from 'react-media';
 
-const Banner = (props) => {
+const Banner = () => {
   return (
     <section className='banner'>
-      <Name3d />
+      <Media queries={{ small: '(max-width : 720px)' }}>
+        {(matches) => (matches.small ? <HeroMobile /> : <Name3d />)}
+      </Media>
     </section>
   );
 };

src/components/hero-mobile.jsx

@@ -0,0 +1,11 @@
+import '../styles/hero-mobile.scss';
+
+const HeroMobile = () => {
+  return (
+    <section className='logo'>
+      <p>Johan Nilsson</p>
+    </section>
+  );
+};
+
+export default HeroMobile;

src/components/name3d.jsx

@@ -4,21 +4,31 @@ import { Center, Text3D, Float } from '@react-three/drei';
 import { useRef } from 'react';
 
 const CustomMesh = () => {
-  const ref = useRef();
   const { pointer } = useThree();
+  const meshRef = useRef();
+
+  useFrame(({ size }) => {
+    const { width } = size;
+    const scaleFactor = 2000;
+    const newScale = width / scaleFactor;
+    meshRef.current.scale.set(newScale, newScale);
+
+    const newGroupPosition = 1.5 * (2 / newScale);
+    meshRef.current.position.set(newGroupPosition, 2, 2);
 
-  useFrame(() => {
     if (pointer) {
       const { x, y } = pointer;
-      ref.current.rotation.x = y / -15;
-      ref.current.rotation.y = x / 15;
+      meshRef.current.rotation.x = y / -15;
+      meshRef.current.rotation.y = x / 15;
     }
   });
 
+  console.log(meshRef);
+
   return (
     <>
       <Center>
-        <group ref={ref} position={(-8, -10, 2)}>
+        <group ref={meshRef} position={(-8, -10, 2)}>
           <Float
             speed={2} // Animation speed, defaults to 1
             rotationIntensity={0.8} // XYZ rotation intensity, defaults to 1
@@ -107,11 +117,11 @@ const Scene = () => {
 
 const Name3d = () => {
   return (
-    <>
+    <div className='canvas-container'>
       <Canvas orthographic camera={{ position: [-1, 0, 5], zoom: 50 }}>
         <Scene />
       </Canvas>
-    </>
+    </div>
   );
 };
 

src/components/nav.jsx

@@ -3,6 +3,7 @@ import { NavLink } from 'react-router-dom';
 import { useState } from 'react';
 import github from '../img/github.png';
 import linkedin from '../img/linkedin.png';
+import Media from 'react-media';
 
 const Nav = () => {
   const [showNav, setShowNav] = useState(false);
@@ -13,37 +14,49 @@ const Nav = () => {
 
   return (
     <header className={`header ${showNav ? 'active' : 'inactive'}`}>
-      <section className='logo-header'>
-        <p className='name-header'>Johan Nilsson</p>
-      </section>
+      <Media queries={{ small: '(max-width : 720px)' }}>
+        {(matches) =>
+          matches.small ? (
+            ''
+          ) : (
+            <section className='logo-header'>
+              <p className='name-header'>Johan Nilsson</p>
+            </section>
+          )
+        }
+      </Media>
       <button className='mobile-burger' onClick={handleShowNav}></button>
       <nav className={`navbar ${showNav ? 'active' : 'inactive'}`}>
         <NavLink
           to='/'
           className={({ isActive, isPending }) =>
             isPending ? 'pending' : isActive ? 'active' : ''
-          }>
+          }
+          onClick={handleShowNav}>
           Accueil
         </NavLink>
         <NavLink
           to='/stack'
           className={({ isActive, isPending }) =>
             isPending ? 'pending' : isActive ? 'active' : ''
-          }>
+          }
+          onClick={handleShowNav}>
           Stack
         </NavLink>
         <NavLink
           to='/projets'
           className={({ isActive, isPending }) =>
             isPending ? 'pending' : isActive ? 'active' : ''
-          }>
+          }
+          onClick={handleShowNav}>
           Projets
         </NavLink>
         <NavLink
           to='/a-propos'
           className={({ isActive, isPending }) =>
             isPending ? 'pending' : isActive ? 'active' : ''
-          }>
+          }
+          onClick={handleShowNav}>
           À Propos
         </NavLink>
         <a

src/styles/aPropos.scss

@@ -56,18 +56,55 @@
 }
 @media (max-width: $layout-bp-small) {
   .apropos-container {
+    padding: 2rem;
     .apropos {
       display: flex;
       flex-direction: column;
-      padding: 1rem;
+      padding: 5rem 2rem;
       width: 90%;
-
+      max-width: 40rem;
+      gap: 1rem;
       .pp {
-        height: 25rem;
+        height: 30rem;
+        width: 30rem;
       }
     }
+    .apropos-content {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+      max-width: 30rem;
+    }
+    .apropos-description {
+      line-height: 2rem;
+    }
+  }
+}
+@media (max-width: $layout-bp-xsmall) {
+  .apropos-container {
+    .apropos {
+      display: flex;
+      flex-direction: column;
+      padding: 2rem 1rem;
+      width: 90%;
+      max-width: 40rem;
+      gap: 1rem;
+      .pp {
+        width: 100%;
+        height: 100%;
+        aspect-ratio: 1;
+        max-height: 30rem;
+        max-width: 30rem;
+      }
+    }
+    .apropos-content {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+      max-width: 30rem;
+    }
     .apropos-description {
-      line-height: 1.8rem;
+      line-height: 2rem;
     }
   }
 }

src/styles/accueil.scss

@@ -10,3 +10,11 @@
     height: 100%;
   }
 }
+
+@media (max-width: $layout-bp-small) {
+  .accueil {
+    .container {
+      width: 100vw;
+    }
+  }
+}

src/styles/banner.scss

@@ -8,4 +8,20 @@
   width: 100%;
   justify-items: center;
   align-items: center;
+  .canvas-container {
+    width: 100vw;
+    height: 100%;
+  }
+}
+
+@media (max-width: $layout-bp-xsmall) {
+  .banner {
+    display: flex;
+    color: #fffffa;
+    font-size: 4rem;
+    height: 100%;
+    width: 100%;
+    justify-items: center;
+    align-items: center;
+  }
 }

src/styles/hero-mobile.scss

@@ -0,0 +1,7 @@
+@import './settings.scss';
+
+.logo {
+  width: 100%;
+  text-align: center;
+  font-family: Jonathan Hetegral;
+}

src/styles/nav.scss

@@ -6,8 +6,8 @@
 
 .header {
   display: grid;
-  grid-template-columns: 50% 1fr;
-  grid-template-areas: 'vide navbar';
+  grid-template-columns: 1fr;
+  grid-template-areas: 'logo navbar';
   align-content: center;
   width: 100%;
   height: 100%;
@@ -39,6 +39,7 @@
   gap: 1rem;
   align-items: center;
   padding-left: 2rem;
+  grid-area: logo;
   .name-header {
     font-family: Jonathan Hetegral;
     color: white;

src/styles/projet-card.scss

@@ -68,3 +68,9 @@
     filter: grayscale(0%);
   }
 }
+
+@media (max-width: $layout-bp-small) {
+  .projet-card {
+    height: 30rem;
+  }
+}

src/styles/projets.scss

@@ -7,6 +7,31 @@
   justify-items: center;
   align-items: center;
   justify-self: center;
-  padding: 2rem 10rem;
+  padding: 2rem;
   gap: 2rem;
 }
+
+@media (max-width: $layout-bp-small) {
+  .projets-container {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    width: 100%;
+    justify-items: center;
+    align-items: center;
+    justify-self: center;
+    padding: 2rem;
+    gap: 2rem;
+  }
+}
+
+@media (max-width: $layout-bp-xsmall) {
+  .projets-container {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (min-width: $layout-bp-xxlarge) {
+  .projets-container {
+    max-width: 100rem;
+  }
+}

src/styles/settings.scss

@@ -14,8 +14,8 @@ $x-large: 6rem;
 
 // Layout //
 
-$layout-bp-small: 576px;
-$layout-bp-medium: 768px;
+$layout-bp-xsmall: 720px;
+$layout-bp-small: 1200px;
 $layout-bp-large: 992px;
 $layout-bp-xlarge: 1200px;
 $layout-bp-xxlarge: 1400px;

src/styles/stack-card.scss

@@ -31,6 +31,7 @@
 
     .logo {
       height: 100%;
+      object-fit: contain;
     }
   }
   .stack-name {
@@ -74,3 +75,20 @@
     color: $primaryColor; // Couleur par défaut
   }
 }
+
+@media (max-width: $layout-bp-xsmall) {
+  .card {
+    .logo-container {
+      width: 100%;
+      height: 50%;
+      object-fit: cover;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      .logo {
+        object-fit: contain;
+      }
+    }
+  }
+}

src/styles/stack.scss

@@ -5,9 +5,25 @@
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: repeat(3, 1fr);
   width: 100%;
+  max-width: 100rem;
   justify-items: center;
   align-items: center;
   justify-self: center;
   column-gap: 1rem;
-  padding: 2rem 10rem;
+  row-gap: 1rem;
+  padding: 2rem 2rem;
+}
+@media (max-width: $layout-bp-small) {
+  .stack-container {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    row-gap: 1rem;
+    padding: 2rem 2rem;
+  }
+}
+
+@media (max-width: $layout-bp-xsmall) {
+  .stack-container {
+    grid-template-columns: 1fr;
+  }
 }