BreizhHardware/portfolio
1
0
Fork 0
mirror of https://github.com/BreizhHardware/portfolio.git synced 2026-01-18 16:37:22 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix margin on mobile

Browse Source
This commit is contained in:
Félix MARQUET
2024-11-29 14:57:01 +01:00
parent 3def8ab24b
commit 9c4f189006
3 changed files with 31 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/App.jsx
View File

@@ -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>
);
}

2
src/components/Menu.tsx
View File

@@ -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>

8
src/other.css Normal file
View File

@@ -0,0 +1,8 @@
@media (max-width: 768px) {
.menu-hidden {
display: none;
}
.mobile-margin {
margin: 10px;
}
}