From 9c4f189006ef7891f4e5c0771402df0e85cccc58 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A9lix=20MARQUET?= <fpmovie4@gmail.com>
Date: Fri, 29 Nov 2024 14:57:01 +0100
Subject: [PATCH] Fix margin on mobile

---
 src/App.jsx             | 41 ++++++++++++++++++++++-------------------
 src/components/Menu.tsx |  2 +-
 src/other.css           |  8 ++++++++
 3 files changed, 31 insertions(+), 20 deletions(-)
 create mode 100644 src/other.css

diff --git a/src/App.jsx b/src/App.jsx
index 722912b..45297d1 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { FaSun, FaMoon} from "react-icons/fa";
 import ReactDOM from "react-dom";
 import './output.css';
+import './other.css';
 import Card from "./components/Card.tsx";
 import About from "./components/About.tsx";
 import Skills from "./components/Skills.tsx";
@@ -40,26 +41,28 @@ function App() {
 
     return (
         <div className="min-h-screen py-10 bg-gray-100 dark:bg-gray-900 m-0" data-testid="root">
-            <Menu />
-            <div data-aos="face-down" data-aos-duration="800" id="top">
-                <Card name={data.name} title={data.title} social={data.social} />
+            <div className="mobile-margin">
+                <Menu />
+                <div data-aos="face-down" data-aos-duration="800" id="top">
+                    <Card name={data.name} title={data.title} social={data.social} />
+                </div>
+                <hr className="text-gray-800 dark:text-gray-200 mt-4"  id="about"/>
+                <div data-aos="fade-up" data-aos-duration="800" data-aos-delay="400">
+                    <About />
+                    <Skills skills={data.skills} />
+                    <hr className="text-gray-800 dark:text-gray-200 mt-4" id="projects" />
+                    <Project projects={data.projects} />
+                    <hr className="text-gray-800 dark:text-gray-200 mt-4" id="cv" />
+                    <CV />
+                    <Footer />
+                </div>
+                <button onClick={toggleTheme} className="fixed bottom-5 right-5 p-2 rounded-full bg-gray-100 dark:bg-gray-900 shadow-md">
+                    {theme === "light" ? <FaMoon size={20} className="text-gray-800" /> : <FaSun size={20} className="text-gray-200" />}
+                </button>
+                <button onClick={toggleLanguage} className="fixed bottom-5 right-16 p-2 rounded-full bg-gray-100 dark:bg-gray-900 shadow-md text-gray-800 dark:text-gray-200">
+                    {i18n.language === "fr" ? "EN" : "FR"}
+                </button>
             </div>
-            <hr className="text-gray-800 dark:text-gray-200 mt-4"  id="about"/>
-            <div data-aos="fade-up" data-aos-duration="800" data-aos-delay="400">
-                <About />
-                <Skills skills={data.skills} />
-                <hr className="text-gray-800 dark:text-gray-200 mt-4" id="projects" />
-                <Project projects={data.projects} />
-                <hr className="text-gray-800 dark:text-gray-200 mt-4" id="cv" />
-                <CV />
-                <Footer />
-            </div>
-            <button onClick={toggleTheme} className="fixed bottom-5 right-5 p-2 rounded-full bg-gray-100 dark:bg-gray-900 shadow-md">
-                {theme === "light" ? <FaMoon size={20} className="text-gray-800" /> : <FaSun size={20} className="text-gray-200" />}
-            </button>
-            <button onClick={toggleLanguage} className="fixed bottom-5 right-16 p-2 rounded-full bg-gray-100 dark:bg-gray-900 shadow-md text-gray-800 dark:text-gray-200">
-                {i18n.language === "fr" ? "EN" : "FR"}
-            </button>
         </div>
     );
 }
diff --git a/src/components/Menu.tsx b/src/components/Menu.tsx
index 30c8005..ac9aaf2 100644
--- a/src/components/Menu.tsx
+++ b/src/components/Menu.tsx
@@ -5,7 +5,7 @@ import {useTranslation} from "react-i18next";
 function Menu() {
     const { t } = useTranslation();
     return (
-        <nav className="fixed top-0 w-full bg-gray-100 dark:bg-gray-900 z-50 shadow-md shadow-gray-800 dark:shadow-gray-200">
+        <nav className="fixed top-0 w-full bg-gray-100 dark:bg-gray-900 z-50 shadow-md shadow-gray-800 dark:shadow-gray-200 menu-hidden">
             <ul className="flex justify-around">
                 <li><a href="#top" className="text-gray-800 dark:text-gray-200">Félix MARQUET</a></li>
                 <li><a href="#about" className="text-gray-800 dark:text-gray-200">{t('nav.about')}</a></li>
diff --git a/src/other.css b/src/other.css
new file mode 100644
index 0000000..16546aa
--- /dev/null
+++ b/src/other.css
@@ -0,0 +1,8 @@
+@media (max-width: 768px) {
+    .menu-hidden {
+        display: none;
+    }
+    .mobile-margin {
+        margin: 10px;
+    }
+}
\ No newline at end of file