From 0022c30d5ea4e63260393cb8ee376ca98add7d7d Mon Sep 17 00:00:00 2001 From: kinou-p Date: Sun, 5 May 2024 01:09:54 +0200 Subject: [PATCH] add responsive --- my-app/package-lock.json | 184 +++++++++++++++++++++++++++++++ my-app/package.json | 2 + my-app/src/App.tsx | 20 ++-- my-app/src/components/button.tsx | 10 +- my-app/src/components/switch.tsx | 70 ++++++++++++ my-app/src/css/mine.css | 68 +++++++----- my-app/src/css/mine_phone.css | 107 ++++++++++++++++++ 7 files changed, 420 insertions(+), 41 deletions(-) create mode 100644 my-app/src/components/switch.tsx create mode 100644 my-app/src/css/mine_phone.css diff --git a/my-app/package-lock.json b/my-app/package-lock.json index 7d04b0d..35c15ab 100644 --- a/my-app/package-lock.json +++ b/my-app/package-lock.json @@ -20,9 +20,11 @@ "@types/node": "^16.18.96", "@types/react": "^18.3.1", "@types/react-dom": "^18.3.0", + "bootstrap": "^4.6.0", "country-flag-icons": "^1.5.11", "framer-motion": "^11.1.7", "react": "^18.3.1", + "react-bootstrap": "^2.10.2", "react-country-flag": "^3.1.0", "react-dom": "^18.3.1", "react-icons": "^5.2.0", @@ -3754,6 +3756,59 @@ "url": "https://opencollective.com/popperjs" } }, + "node_modules/@react-aria/ssr": { + "version": "3.9.3", + "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.3.tgz", + "integrity": "sha512-5bUZ93dmvHFcmfUcEN7qzYe8yQQ8JY+nHN6m9/iSDCQ/QmCiE0kWXYwhurjw5ch6I8WokQzx66xKIMHBAa4NNA==", + "dependencies": { + "@swc/helpers": "^0.5.0" + }, + "engines": { + "node": ">= 12" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0" + } + }, + "node_modules/@restart/hooks": { + "version": "0.4.16", + "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.16.tgz", + "integrity": "sha512-f7aCv7c+nU/3mF7NWLtVVr0Ra80RqsO89hO72r+Y/nvQr5+q0UFGkocElTH6MJApvReVh6JHUFYn2cw1WdHF3w==", + "dependencies": { + "dequal": "^2.0.3" + }, + "peerDependencies": { + "react": ">=16.8.0" + } + }, + "node_modules/@restart/ui": { + "version": "1.6.8", + "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.6.8.tgz", + "integrity": "sha512-6ndCv3oZ7r9vuP1Ok9KH55TM1/UkdBnP/fSraW0DFDMbPMzWKhVKeFAIEUCRCSdzayjZDcFYK6xbMlipN9dmMA==", + "dependencies": { + "@babel/runtime": "^7.21.0", + "@popperjs/core": "^2.11.6", + "@react-aria/ssr": "^3.5.0", + "@restart/hooks": "^0.4.9", + "@types/warning": "^3.0.0", + "dequal": "^2.0.3", + "dom-helpers": "^5.2.0", + "uncontrollable": "^8.0.1", + "warning": "^4.0.3" + }, + "peerDependencies": { + "react": ">=16.14.0", + "react-dom": ">=16.14.0" + } + }, + "node_modules/@restart/ui/node_modules/uncontrollable": { + "version": "8.0.4", + "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-8.0.4.tgz", + "integrity": "sha512-ulRWYWHvscPFc0QQXvyJjY6LIXU56f0h8pQFvhxiKk5V1fcI8gp9Ht9leVAhrVjzqMw0BgjspBINx9r6oyJUvQ==", + "peerDependencies": { + "react": ">=16.14.0" + } + }, "node_modules/@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -4072,6 +4127,14 @@ "url": "https://github.com/sponsors/gregberge" } }, + "node_modules/@swc/helpers": { + "version": "0.5.11", + "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.11.tgz", + "integrity": "sha512-YNlnKRWF2sVojTpIyzwou9XoTNbzbzONwRhOoniEioF1AtaitTvVZblaQRrAzChWQ1bLYyYSWzM18y4WwgzJ+A==", + "dependencies": { + "tslib": "^2.4.0" + } + }, "node_modules/@testing-library/dom": { "version": "10.1.0", "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.1.0.tgz", @@ -4712,6 +4775,11 @@ "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz", "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==" }, + "node_modules/@types/warning": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.3.tgz", + "integrity": "sha512-D1XC7WK8K+zZEveUPY+cf4+kgauk8N4eHr/XIHXGlGYkHLud6hK9lYfZk1ry1TNh798cZUCgb6MqGEG8DkJt6Q==" + }, "node_modules/@types/ws": { "version": "8.5.10", "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.10.tgz", @@ -6017,6 +6085,19 @@ "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==" }, + "node_modules/bootstrap": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.0.tgz", + "integrity": "sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/bootstrap" + }, + "peerDependencies": { + "jquery": "1.9.1 - 3", + "popper.js": "^1.16.1" + } + }, "node_modules/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -6284,6 +6365,11 @@ "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.3.1.tgz", "integrity": "sha512-a3KdPAANPbNE4ZUv9h6LckSl9zLsYOP4MBmhIPkRaeyybt+r4UghLvq+xw/YwUcC1gqylCkL4rdVs3Lwupjm4Q==" }, + "node_modules/classnames": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz", + "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==" + }, "node_modules/clean-css": { "version": "5.3.3", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.3.tgz", @@ -9867,6 +9953,14 @@ "node": ">= 0.4" } }, + "node_modules/invariant": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", + "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==", + "dependencies": { + "loose-envify": "^1.0.0" + } + }, "node_modules/ipaddr.js": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.2.0.tgz", @@ -12443,6 +12537,12 @@ "jiti": "bin/jiti.js" } }, + "node_modules/jquery": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz", + "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==", + "peer": true + }, "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -13706,6 +13806,17 @@ "node": ">=4" } }, + "node_modules/popper.js": { + "version": "1.16.1", + "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz", + "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==", + "deprecated": "You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1", + "peer": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/possible-typed-array-names": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz", @@ -15000,6 +15111,23 @@ "react-is": "^16.13.1" } }, + "node_modules/prop-types-extra": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz", + "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==", + "dependencies": { + "react-is": "^16.3.2", + "warning": "^4.0.0" + }, + "peerDependencies": { + "react": ">=0.14.0" + } + }, + "node_modules/prop-types-extra/node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, "node_modules/prop-types/node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", @@ -15174,6 +15302,35 @@ "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz", "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==" }, + "node_modules/react-bootstrap": { + "version": "2.10.2", + "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.10.2.tgz", + "integrity": "sha512-UvB7mRqQjivdZNxJNEA2yOQRB7L9N43nBnKc33K47+cH90/ujmnMwatTCwQLu83gLhrzAl8fsa6Lqig/KLghaA==", + "dependencies": { + "@babel/runtime": "^7.22.5", + "@restart/hooks": "^0.4.9", + "@restart/ui": "^1.6.8", + "@types/react-transition-group": "^4.4.6", + "classnames": "^2.3.2", + "dom-helpers": "^5.2.1", + "invariant": "^2.2.4", + "prop-types": "^15.8.1", + "prop-types-extra": "^1.1.0", + "react-transition-group": "^4.4.5", + "uncontrollable": "^7.2.1", + "warning": "^4.0.3" + }, + "peerDependencies": { + "@types/react": ">=16.14.8", + "react": ">=16.14.0", + "react-dom": ">=16.14.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/react-country-flag": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/react-country-flag/-/react-country-flag-3.1.0.tgz", @@ -15389,6 +15546,11 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" }, + "node_modules/react-lifecycles-compat": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", + "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" + }, "node_modules/react-refresh": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", @@ -17514,6 +17676,20 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/uncontrollable": { + "version": "7.2.1", + "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz", + "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==", + "dependencies": { + "@babel/runtime": "^7.6.3", + "@types/react": ">=16.9.11", + "invariant": "^2.2.4", + "react-lifecycles-compat": "^3.0.4" + }, + "peerDependencies": { + "react": ">=15.0.0" + } + }, "node_modules/underscore": { "version": "1.12.1", "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.12.1.tgz", @@ -17736,6 +17912,14 @@ "makeerror": "1.0.12" } }, + "node_modules/warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "dependencies": { + "loose-envify": "^1.0.0" + } + }, "node_modules/watchpack": { "version": "2.4.1", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.1.tgz", diff --git a/my-app/package.json b/my-app/package.json index e8c1ed9..ebda695 100644 --- a/my-app/package.json +++ b/my-app/package.json @@ -15,9 +15,11 @@ "@types/node": "^16.18.96", "@types/react": "^18.3.1", "@types/react-dom": "^18.3.0", + "bootstrap": "^4.6.0", "country-flag-icons": "^1.5.11", "framer-motion": "^11.1.7", "react": "^18.3.1", + "react-bootstrap": "^2.10.2", "react-country-flag": "^3.1.0", "react-dom": "^18.3.1", "react-icons": "^5.2.0", diff --git a/my-app/src/App.tsx b/my-app/src/App.tsx index e29964f..d0c3c50 100644 --- a/my-app/src/App.tsx +++ b/my-app/src/App.tsx @@ -5,9 +5,11 @@ import background from "./img/background.jpg"; // import background_dark from "./img/background_dark.jpg"; import './css/App.css'; import './css/mine.css'; +import './css/mine_phone.css'; import MenuSimple from './components/language'; -import UnstyledButtonsSimple from './components/button' +import ButtonSimple from './components/button' +import MaterialUISwitch from './components/switch' import { Card, CardContent, CardMedia, Switch, Typography } from "@mui/material" import { ThemeProvider, createTheme } from '@mui/material/styles'; @@ -15,9 +17,10 @@ import CssBaseline from '@mui/material/CssBaseline'; import { dark } from '@mui/material/styles/createPalette'; // import { Switch } from '@mui/base/Switch'; import React, { useState } from "react"; - import { FaArrowRightLong } from "react-icons/fa6"; +import Button from '@mui/material/Button'; + function App() { @@ -42,7 +45,6 @@ function App() }, }); - return ( @@ -70,20 +72,22 @@ function App()
- - + + + {/* */}
Bienvenue.
-

Étudiant a 42 en informatique, je cherche un emploi afin de compléter +

Étudiant a 42 en informatique, je cherche un emploi afin de compléter ma formation académique par une expérience professionnelle qui a du sens. Je suis ouvert à de nombreuses propositions en rapport avec mes études - et suis prêt à discuter de mon parcours plus amplement lors d’un entretien.

+ et suis prêt à discuter de mon parcours plus amplement lors d’un entretien.
- + {/* */} +
{/*
*/} {/* */} diff --git a/my-app/src/components/button.tsx b/my-app/src/components/button.tsx index bd02882..43dbc01 100644 --- a/my-app/src/components/button.tsx +++ b/my-app/src/components/button.tsx @@ -3,12 +3,10 @@ import { Button as BaseButton } from '@mui/base/Button'; import { styled } from '@mui/system'; import Stack from '@mui/material/Stack'; -export default function UnstyledButtonsSimple() { +export default function ButtonSimple() { return ( - + // - {/* */} - ); } @@ -44,14 +42,16 @@ const Button = styled(BaseButton)( padding: 8px 16px; border-radius: 8px; color: white; - transition: all 150ms ease; + transition: all 200ms ease; cursor: pointer; border: 1px solid ${blue[500]}; box-shadow: 0 2px 1px ${ theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(45, 45, 60, 0.2)' }, inset 0 1.5px 1px ${blue[400]}, inset 0 -2px 1px ${blue[600]}; + &:hover { + transform: scale(1.1); background-color: ${blue[600]}; } diff --git a/my-app/src/components/switch.tsx b/my-app/src/components/switch.tsx new file mode 100644 index 0000000..bd43aca --- /dev/null +++ b/my-app/src/components/switch.tsx @@ -0,0 +1,70 @@ +import * as React from 'react'; +import { styled } from '@mui/material/styles'; +import Switch, { SwitchProps } from '@mui/material/Switch'; +import FormGroup from '@mui/material/FormGroup'; +import FormControlLabel from '@mui/material/FormControlLabel'; + +const MaterialUISwitch = styled(Switch)(({ theme }) => ({ + width: 62, + height: 34, + padding: 7, + '& .MuiSwitch-switchBase': { + margin: 1, + padding: 0, + transform: 'translateX(6px)', + '&.Mui-checked': { + color: '#fff', + transform: 'translateX(22px)', + '& .MuiSwitch-thumb:before': { + backgroundImage: `url('data:image/svg+xml;utf8,')`, + }, + '& + .MuiSwitch-track': { + opacity: 1, + backgroundColor: theme.palette.mode === 'dark' ? '#8796A5' : '#aab4be', + }, + }, + }, + '& .MuiSwitch-thumb': { + backgroundColor: theme.palette.mode === 'dark' ? '#003892' : '#001e3c', + width: 32, + height: 32, + '&::before': { + content: "''", + position: 'absolute', + width: '100%', + height: '100%', + left: 0, + top: 0, + backgroundRepeat: 'no-repeat', + backgroundPosition: 'center', + backgroundImage: `url('data:image/svg+xml;utf8,')`, + }, + }, + '& .MuiSwitch-track': { + opacity: 1, + backgroundColor: theme.palette.mode === 'dark' ? '#8796A5' : '#aab4be', + borderRadius: 20 / 2, + }, +})); + +export default function CustomizedSwitches({ onChange }: any) { + const handleSwitchChange = (event: any) => { + if (onChange) { + onChange(event.target.checked); + } + }; + + return ( + + } + label="" + onChange={handleSwitchChange} + /> + + ); + } diff --git a/my-app/src/css/mine.css b/my-app/src/css/mine.css index c3dc3be..0512711 100644 --- a/my-app/src/css/mine.css +++ b/my-app/src/css/mine.css @@ -1,5 +1,6 @@ .app { - height: 100%; + height: 100vh; + width: 100vw; background-size: 100% 100%; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: black; @@ -7,23 +8,24 @@ } body { - overflow: hidden; + /* overflow: hidden; */ /* color:black; */ + max-width: 100vw; font-family: "Fira Sans", Arial, sans-serif; - height: 100vh; + /* height: 100vh; */ + width: 100vw; margin: 0; + padding: 0; font-family: Arial, sans-serif; /* border: 1vh solide white; */ } header { - height: 15vh; width: 100%; /* background-color: #a4a4a4; */ /* padding: 20px 0; */ text-align: center; - - border-bottom: 4px solid + height: 15vh; /* border-bottom-width: 5px; */ /* border-bottom: 1cm; */ @@ -31,15 +33,17 @@ body { } .header-content { + border-bottom: 4px solid; width: 100vw; + height: 100%; display: flex; /* align-items: center; */ - justify-content: space-between; /* Align items horizontally */ + justify-content: space-between; /* padding-left: 0px; */ } .logo img{ - height: 14.5vh; /* Adjust the size as needed */ + height: 100%; /* Adjust the size as needed */ /* margin-right: 32.5vw; */ margin-left: 3vw; margin-right: 20vw; @@ -48,10 +52,12 @@ body { } .pages { + margin-left: 5vw; font-weight: 800; /* width: 5vw; */ - margin-top: 5vh; - height: 5vh; + /* margin-top: 5vh; */ + align-self: center; + /* height: 5vh; */ transition-property: transform; transition-duration: 1s; @@ -76,34 +82,38 @@ body { } .language { + align-items: center; display: flex; flex-direction: row; - width: 10vw; - margin-top: 5vh; - margin-left: 20vw; - height: 6vh; - /* margin-right: 2vw; */ + justify-content: right; + width: 50vw; + margin-top: 0vh; + margin-left: 0vw; + height: 100%; + margin-right: 0vw; } .css-15bhy65 { - margin-right: 20px; + /* margin-right: 20px; */ + } + + Button{ + font-weight: 800; } .dark_mode { - /* margin-top: 5vh; */ + /* font-weight: 800; */ margin-right: 2vw; width: 8vw; - /* position: absolute; */ - /* margin: 0 */ } .hello { font-weight: 800; - font-size: 700%; + font-size: 6vw; } .description { - font-size: 100%; + font-size: 1vw; } .project { @@ -142,6 +152,8 @@ body { justify-content: space-between; } + + @keyframes slideRight { 0% { right: -100vh; /* Position initiale */ @@ -153,33 +165,32 @@ body { .project_txt { font-weight: 800; - font-size: 200%; + font-size: 3vw; } .cv_button { + font-family: 'IBM Plex Sans', sans-serif; margin-top: 10%; margin-left: 70%; } .css-cg7pzv { - transition-property: transform; - transition-duration: 1s; - &:hover { - transform: scale(1.3); - } + width: 20vw; } .project_group { + font-size: 1vw; display: flex; flex-direction: row; - width: 100%; + /* width: 100vw; */ /* justify-content: center; */ /* align-self: left; */ align-items: center; } .project_list { + vertical-align: baseline; margin-right: 2vw; /* justify-content: space-between; */ transition-property: transform; @@ -194,6 +205,7 @@ body { } .arrow { + vertical-align: baseline; transition-property: transform; transition-duration: 700ms; transition: all 700ms ease; diff --git a/my-app/src/css/mine_phone.css b/my-app/src/css/mine_phone.css new file mode 100644 index 0000000..b43aaf2 --- /dev/null +++ b/my-app/src/css/mine_phone.css @@ -0,0 +1,107 @@ +@media screen and (max-width: 992px){ + .home { + flex-direction: column; + width: 100vw; + } + body { + max-width: 100vw; + /* max-width: 100%; */ + overflow: scroll; + } + header { + overflow: hidden; + /* margin: 0; */ + height: 8vh; + } + .logo img { + height: 100%; + margin-left: 0vw; + margin-right: 0vw; + } + .pages { + display: none; + } + .hello { + margin: auto; + margin-top: 10vw; + width: 100vw; + font-weight: 800; + font-size: 10vw; + /* align-items: center; */ + } + .presentation { + max-width: 100vw; + margin: auto; + width: 100vw; + text-align: center; + align-items: center; + /* align-self: center; */ + } + .description { + /* text-align: center; */ + /* max-width: 100vw; */ + /* margin-left: 10%; */ + display: inline-block; + width: 80%; + font-size: 4vw; + max-width: 100%; + } + .cv_button { + width: 20vw; + margin: 0; + margin-top: 5vw; + margin-right: 40vw; + margin-left: 40vw; + + /* align-module: center; */ + /* align-items: center; */ + /* display: inline-block; */ + } + .language { + align-items: center; + display: flex; + flex-direction: row; + justify-content: right; + width: 50vw; + margin-top: 0vh; + margin-left: 0vw; + height: 100%; + margin-right: 0vw; + } + .header-content { + width: 100vw; + display: flex; + /* align-items: center; */ + justify-content: space-between; + /* padding-left: 0px; */ + } + .dark_mode { + /* margin-top: 5vh; */ + margin-right: 0vw; + width: 0vw; + /* position: absolute; */ + /* margin: 0 */ + } + .project { + align-items: center; + /* font-size: 6vw; */ + width: 100%; + margin: 0; + margin-bottom: 40vw; + margin-top: 20vw; + align-content: center; + } + .arrow { + + } + .project_txt { + font-weight: 800; + font-size: 10vw; + margin-bottom: 5vw; + } + .project_list { + /* align-self: self-start; */ + font-size: 4vw; + margin: 0; + } + } \ No newline at end of file