floating thing

src/components/HomeInfo.jsx

@@ -17,7 +17,7 @@ const HomeInfo = ({ currentStage, canvasExpansion }) => {
                 <p className='font-medium sm:text-xl text-center'>
                     Je suis un étudiant en première année d&#8217;un BUT en Informatique.Vous trouverez ci-dessous mon CV.
                 </p>
-                <a href='../assets/CV_PHAN_Theo.pdf' download="CV_PHAN_Theo.pdf" className='neo-brutalism-white neo-btn'>
+                <a href='../../public/CV_PHAN_Theo.pdf' download="CV_PHAN_Theo.pdf" className='neo-brutalism-white neo-btn'>
                     Mon CV
                     <img src={download} alt='download' className='w-4 h-4 object-contain' />
                 </a>

src/components/MapConst.jsx

@@ -29,25 +29,25 @@ export const projects = [
     {
         name: 'Projet Quadtree',
         description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
-        link: '',
-        image: ''
+        link: 'https://gitlab.univ-nantes.fr/E238665T/dev-sae-nvggyu',
+        image: 'https://images.pexels.com/photos/20830185/pexels-photo-20830185/free-photo-of-ville-rue-building-batiment.jpeg'
     },
     {
         name: 'Site web banane',
         description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
         link: 'https://reactest-e231342j-01d7d1316b84b390a01d1448aefbc660d1bc4760dcde2.univ-nantes.io/',
-        image: ''
+        image: 'https://images.pexels.com/photos/20830185/pexels-photo-20830185/free-photo-of-ville-rue-building-batiment.jpeg'
     },
     {
         name: 'Pong',
         description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
         link: 'https://github.com/Aer-3888/pong',
-        image: ''
+        image: 'https://images.pexels.com/photos/20830185/pexels-photo-20830185/free-photo-of-ville-rue-building-batiment.jpeg'
     },
     {
         name: '',
         description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
         link: '',
-        image: ''
+        image: 'https://images.pexels.com/photos/20830185/pexels-photo-20830185/free-photo-of-ville-rue-building-batiment.jpeg'
     }
 ];
\ No newline at end of file

src/models/Balloon.jsx

-
-import { useEffect, useRef } from 'react';
-import balloonScene from '../assets/3d/hot_air_balloon_-_low_poly.glb'
-import { useGLTF } from '@react-three/drei'
+import { useEffect, useRef, useState } from 'react';
+import balloonScene from '../assets/3d/hot_air_balloon_-_low_poly.glb';
+import { useGLTF } from '@react-three/drei';
 import { useFrame } from '@react-three/fiber';
 
 const Balloon = ({ isRotating, ...props }) => {
-    const balloonRef = useRef()
-    const  {scene, _} = useGLTF(balloonScene);
-    
+    const balloonRef = useRef();
+    const { scene, _ } = useGLTF(balloonScene);
+    const [time, setTime] = useState(0);
+    const amplitude = 0.25; // Adjust this value to change the float height
+    const speed = 0.01; // Adjust this value to change the float speed
+
+    useFrame(() => {
+        // Update time
+        setTime((prev) => (prev + speed) % (Math.PI * 2));
+        // Update position
+        balloonRef.current.position.y = Math.sin(time) * amplitude;
+    });
+
     return (
-        <mesh {...props}>
+        <mesh ref={balloonRef} {...props}>
             <primitive object={scene} />
         </mesh>
-    )
-}
+    );
+};
 
-export default Balloon
\ No newline at end of file
+export default Balloon;

src/models/Character.jsx

-import React from 'react'
-import characterScene from '../assets/3d/skelleton_character.glb'
-import { useGLTF } from '@react-three/drei'
+import React, { useEffect, useRef, useState } from 'react';
+import characterScene from '../assets/3d/skelleton_character.glb';
+import { useGLTF } from '@react-three/drei';
+import { useFrame } from '@react-three/fiber';
+
 const Character = ({ isRotating, ...props }) => {
-    const  {scene, animations} = useGLTF(characterScene)
+    const characterRef = useRef();
+    const { scene, animations } = useGLTF(characterScene);
+    const [time, setTime] = useState(0);
+    const amplitude = 0.25; // Adjust this value to change the float height
+    const speed = 0.01; // Adjust this value to change the float speed
+
+    useFrame(() => {
+        // Update time
+        setTime((prev) => (prev + speed) % (Math.PI * 2));
+        // Update position
+        characterRef.current.position.y = Math.sin(time) * amplitude;
+    });
+
     return (
-        <mesh {...props}>
+        <mesh ref={characterRef} {...props}>
             <primitive object={scene} />
         </mesh>
-    )
-}
+    );
+};
 
-export default Character;
\ No newline at end of file
+export default Character;

src/pages/AboutMe.jsx

@@ -4,6 +4,7 @@ import { projects } from '../components/MapConst';
 import { arrow } from "../assets/icons";
 
 const AboutMe = () => {
+
   return (
     <section className='max-container'>
       <div className='head-text'>
@@ -17,39 +18,45 @@ const AboutMe = () => {
       </div>
       <div>
         <span  className='head-text'>Compétences</span>
-        <div className='flex'>
-          <div className='w-1/2 m-1'>
+        <div className='flex flex-wrap'>
+          <div className='m-1' style={{width: '400px'}}>
             <div className='m-1'>Python</div>
             <div className='h-6 w-3/5' style={{borderColor: 'black', borderWidth : 1, borderRadius : 7}}>
               <div className='w-3/4 h-4 m-1 rounded' style={{backgroundColor : 'black'}}></div>
             </div>
           </div>
-          <div className='w-1/2 m-1'>
+          <div className='m-1' style={{width: '400px'}}>
             <div className='m-1'>Kotlin/Java</div>
             <div className='h-6 w-3/5' style={{borderColor: 'black', borderWidth : 1, borderRadius : 7}}>
               <div className='w-4/6 h-4 m-1 rounded' style={{backgroundColor : 'black'}}></div>
             </div>
           </div>
         </div>
-        <div className='flex'>
-          <div className='w-1/2 m-1'>
+        <div className='flex flex-wrap'>
+          <div className='m-1' style={{width: '400px'}}>
             <div className='m-1'>Html/Css</div>
             <div className='h-6 w-3/5' style={{borderColor: 'black', borderWidth : 1, borderRadius : 7}}>
               <div className='w-3/5 h-4 m-1 rounded' style={{backgroundColor : 'black'}}></div>
             </div>
           </div>
-          <div className='w-1/2 m-1'>
+          <div className='m-1' style={{width: '400px'}}>
             <div className='m-1'>JavaScript</div>
             <div className='h-6 w-3/5' style={{borderColor: 'black', borderWidth : 1, borderRadius : 7}}>
               <div className='w-1/2 h-4 m-1 rounded' style={{backgroundColor : 'black'}}></div>
             </div>
           </div>
         </div>
-        <div className='flex'>
-          <div className='w-1/2 m-1'>
+        <div className='flex flex-wrap'>
+          <div className='m-1' style={{width: '400px'}}>
             <div className='m-1'>Golang</div>
             <div className='h-6 w-3/5' style={{borderColor: 'black', borderWidth : 1, borderRadius : 7}}>
-              <div className='w-3/4 h-4 m-1 rounded' style={{backgroundColor : 'black'}}></div>
+              <div className='w-3/5 h-4 m-1 rounded' style={{backgroundColor : 'black'}}></div>
+            </div>
+          </div>
+          <div className='m-1' style={{width: '400px'}}>
+            <div className='m-1'>SQL</div>
+            <div className='h-6 w-3/5' style={{borderColor: 'black', borderWidth : 1, borderRadius : 7}}>
+              <div className='w-3/5 h-4 m-1 rounded' style={{backgroundColor : 'black'}}></div>
             </div>
           </div>
         </div>
@@ -57,7 +64,7 @@ const AboutMe = () => {
         <div className='flex flex-wrap my-20 gap-16'>
         {projects.map((project) => (
           <div className='lg:w-[400px] w-full' key={project.name}>
-            <img className='rounded '  key={project.image}/>
+            <img className='rounded '  src={project.image}/>
 
             <div className='mt-5 flex flex-col'>
               <h4 className='text-2xl font-poppins font-semibold'>