start to ressembler a quelque chose
This commit is contained in:
parent
e65bc0754c
commit
7bb743e479
125
my-app/package-lock.json
generated
125
my-app/package-lock.json
generated
@ -11,6 +11,7 @@
|
||||
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
|
||||
"@emotion/styled": "^11.11.5",
|
||||
"@mui/base": "^5.0.0-beta.40",
|
||||
"@mui/material": "^5.15.16",
|
||||
"@mui/system": "^5.15.15",
|
||||
"@testing-library/jest-dom": "^5.17.0",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
@ -20,9 +21,11 @@
|
||||
"@types/react": "^18.3.1",
|
||||
"@types/react-dom": "^18.3.0",
|
||||
"country-flag-icons": "^1.5.11",
|
||||
"framer-motion": "^11.1.7",
|
||||
"react": "^18.3.1",
|
||||
"react-country-flag": "^3.1.0",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-icons": "^5.2.0",
|
||||
"react-scripts": "^5.0.1",
|
||||
"typescript": "^4.9.5",
|
||||
"web-vitals": "^2.1.4"
|
||||
@ -3427,6 +3430,64 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@mui/core-downloads-tracker": {
|
||||
"version": "5.15.16",
|
||||
"resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.16.tgz",
|
||||
"integrity": "sha512-PTIbMJs5C/vYMfyJNW8ArOezh4eyHkg2pTeA7bBxh2kLP1Uzs0Nm+krXWbWGJPwTWjM8EhnDrr4aCF26+2oleg==",
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/mui-org"
|
||||
}
|
||||
},
|
||||
"node_modules/@mui/material": {
|
||||
"version": "5.15.16",
|
||||
"resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.16.tgz",
|
||||
"integrity": "sha512-ery2hFReewko9gpDBqOr2VmXwQG9ifXofPhGzIx09/b9JqCQC/06kZXZDGGrOTpIddK9HlIf4yrS+G70jPAzUQ==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.23.9",
|
||||
"@mui/base": "5.0.0-beta.40",
|
||||
"@mui/core-downloads-tracker": "^5.15.16",
|
||||
"@mui/system": "^5.15.15",
|
||||
"@mui/types": "^7.2.14",
|
||||
"@mui/utils": "^5.15.14",
|
||||
"@types/react-transition-group": "^4.4.10",
|
||||
"clsx": "^2.1.0",
|
||||
"csstype": "^3.1.3",
|
||||
"prop-types": "^15.8.1",
|
||||
"react-is": "^18.2.0",
|
||||
"react-transition-group": "^4.4.5"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/mui-org"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@emotion/react": "^11.5.0",
|
||||
"@emotion/styled": "^11.3.0",
|
||||
"@types/react": "^17.0.0 || ^18.0.0",
|
||||
"react": "^17.0.0 || ^18.0.0",
|
||||
"react-dom": "^17.0.0 || ^18.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@emotion/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@emotion/styled": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@mui/material/node_modules/react-is": {
|
||||
"version": "18.3.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
|
||||
"integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="
|
||||
},
|
||||
"node_modules/@mui/private-theming": {
|
||||
"version": "5.15.14",
|
||||
"resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.15.14.tgz",
|
||||
@ -4572,6 +4633,14 @@
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/react-transition-group": {
|
||||
"version": "4.4.10",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.10.tgz",
|
||||
"integrity": "sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==",
|
||||
"dependencies": {
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/resolve": {
|
||||
"version": "1.17.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
|
||||
@ -7243,6 +7312,15 @@
|
||||
"utila": "~0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/dom-helpers": {
|
||||
"version": "5.2.1",
|
||||
"resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
|
||||
"integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.8.7",
|
||||
"csstype": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/dom-serializer": {
|
||||
"version": "1.4.1",
|
||||
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
|
||||
@ -8971,6 +9049,30 @@
|
||||
"url": "https://github.com/sponsors/rawify"
|
||||
}
|
||||
},
|
||||
"node_modules/framer-motion": {
|
||||
"version": "11.1.7",
|
||||
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.1.7.tgz",
|
||||
"integrity": "sha512-cW11Pu53eDAXUEhv5hEiWuIXWhfkbV32PlgVISn7jRdcAiVrJ1S03YQQ0/DzoswGYYwKi4qYmHHjCzAH52eSdQ==",
|
||||
"dependencies": {
|
||||
"tslib": "^2.4.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@emotion/is-prop-valid": "*",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@emotion/is-prop-valid": {
|
||||
"optional": true
|
||||
},
|
||||
"react": {
|
||||
"optional": true
|
||||
},
|
||||
"react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/fresh": {
|
||||
"version": "0.5.2",
|
||||
"resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
|
||||
@ -15274,6 +15376,14 @@
|
||||
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
|
||||
"integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
|
||||
},
|
||||
"node_modules/react-icons": {
|
||||
"version": "5.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.2.0.tgz",
|
||||
"integrity": "sha512-n52Y7Eb4MgQZHsSZOhSXv1zs2668/hBYKfSRIvKh42yExjyhZu0d1IK2CLLZ3BZB1oo13lDfwx2vOh2z9FTV6Q==",
|
||||
"peerDependencies": {
|
||||
"react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/react-is": {
|
||||
"version": "17.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
||||
@ -15359,6 +15469,21 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/react-transition-group": {
|
||||
"version": "4.4.5",
|
||||
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
|
||||
"integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.5.5",
|
||||
"dom-helpers": "^5.0.1",
|
||||
"loose-envify": "^1.4.0",
|
||||
"prop-types": "^15.6.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.6.0",
|
||||
"react-dom": ">=16.6.0"
|
||||
}
|
||||
},
|
||||
"node_modules/read-cache": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
|
||||
"@emotion/styled": "^11.11.5",
|
||||
"@mui/base": "^5.0.0-beta.40",
|
||||
"@mui/material": "^5.15.16",
|
||||
"@mui/system": "^5.15.15",
|
||||
"@testing-library/jest-dom": "^5.17.0",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
@ -15,9 +16,11 @@
|
||||
"@types/react": "^18.3.1",
|
||||
"@types/react-dom": "^18.3.0",
|
||||
"country-flag-icons": "^1.5.11",
|
||||
"framer-motion": "^11.1.7",
|
||||
"react": "^18.3.1",
|
||||
"react-country-flag": "^3.1.0",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-icons": "^5.2.0",
|
||||
"react-scripts": "^5.0.1",
|
||||
"typescript": "^4.9.5",
|
||||
"web-vitals": "^2.1.4"
|
||||
|
||||
@ -1,50 +1,107 @@
|
||||
|
||||
import React from 'react';
|
||||
import logo from './images/first.jpg';
|
||||
// import React from 'react';
|
||||
import logo from './img/first.jpg';
|
||||
import background from "./img/background.jpg";
|
||||
// import background_dark from "./img/background_dark.jpg";
|
||||
import './css/App.css';
|
||||
import './css/mine.css';
|
||||
|
||||
import MenuSimple from './components/language';
|
||||
import UnstyledButtonsSimple from './components/button'
|
||||
|
||||
import { Card, CardContent, CardMedia, Switch, Typography } from "@mui/material"
|
||||
import { ThemeProvider, createTheme } from '@mui/material/styles';
|
||||
import CssBaseline from '@mui/material/CssBaseline';
|
||||
import { dark } from '@mui/material/styles/createPalette';
|
||||
// import { Switch } from '@mui/base/Switch';
|
||||
import React, { useState } from "react";
|
||||
|
||||
function App() {
|
||||
import { FaArrowRightLong } from "react-icons/fa6";
|
||||
|
||||
function App()
|
||||
{
|
||||
|
||||
// state to manage the dark mode
|
||||
const [toggleDarkMode, setToggleDarkMode] = useState(true);
|
||||
|
||||
// function to toggle the dark mode as true or false
|
||||
const toggleDarkTheme = () => {
|
||||
console.log("changed");
|
||||
setToggleDarkMode(!toggleDarkMode);
|
||||
};
|
||||
|
||||
const darkTheme = createTheme({
|
||||
palette: {
|
||||
mode: toggleDarkMode ? 'dark' : 'light',
|
||||
primary: {
|
||||
main: '#90caf9',
|
||||
},
|
||||
secondary: {
|
||||
main: '#131052',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// function createHandleMenuClick(arg0: string): any {
|
||||
// // throw new Error('Function not implemented.');
|
||||
// }
|
||||
|
||||
return (
|
||||
<div>
|
||||
<body>
|
||||
<header>
|
||||
<div className="header-content">
|
||||
<ThemeProvider theme={darkTheme}>
|
||||
<CssBaseline />
|
||||
<div>
|
||||
<body>
|
||||
<header>
|
||||
<div className="header-content">
|
||||
{/* <h1 className="title">A.P</h1> */}
|
||||
<div className="logo">
|
||||
<img src={logo} alt="Logo" />
|
||||
<img src={logo} alt="Logo" />
|
||||
</div>
|
||||
<h1 className="title">A.P</h1>
|
||||
<MenuSimple/>
|
||||
<div className="language">
|
||||
<MenuSimple/>
|
||||
<Switch className="dark_mode" checked={toggleDarkMode} onChange={toggleDarkTheme} defaultChecked />
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div className='home'>
|
||||
<div className="presentation">
|
||||
<div className='hello'>Bienvenue.</div>
|
||||
<p className="description">É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.</p>
|
||||
<div className="cv_button">
|
||||
<UnstyledButtonsSimple/>
|
||||
</div>
|
||||
{/* <div className="project_button"> */}
|
||||
{/* <UnstyledButtonsSimple/> */}
|
||||
{/* </div> */}
|
||||
</div>
|
||||
</header>
|
||||
<div className='home'>
|
||||
<div className="presentation">
|
||||
<div className='hello'>Welcome.</div>
|
||||
<p>É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.</p>
|
||||
</div>
|
||||
<div className="project">
|
||||
<div className='project_txt'>Projects</div>
|
||||
<p>- capjwdalw</p>
|
||||
<p>- capjwdalw</p>
|
||||
<p>- capjwdalw</p>
|
||||
<p>- capjwdalw</p>
|
||||
<p>- capjwdalw</p>
|
||||
<div className="project">
|
||||
<div className='project_txt'>Projects</div>
|
||||
<div className = "project_group">
|
||||
<p className="project_list">- ft_transcendence</p>
|
||||
<FaArrowRightLong className="arrow"/>
|
||||
</div>
|
||||
<div className = "project_group">
|
||||
<p className="project_list">- cloud-1</p>
|
||||
<FaArrowRightLong className="arrow"/>
|
||||
</div>
|
||||
<div className = "project_group">
|
||||
<p className="project_list">- minishell</p>
|
||||
<FaArrowRightLong className="arrow"/>
|
||||
</div>
|
||||
<div className = "project_group">
|
||||
<p className="project_list">- cube3d</p>
|
||||
<FaArrowRightLong className="arrow"/>
|
||||
</div>
|
||||
<div className = "project_group">
|
||||
<p className="project_list">- Homemade NAS</p>
|
||||
<FaArrowRightLong className="arrow"/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</div>
|
||||
</body>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
78
my-app/src/components/button.tsx
Normal file
78
my-app/src/components/button.tsx
Normal file
@ -0,0 +1,78 @@
|
||||
import * as React from 'react';
|
||||
import { Button as BaseButton } from '@mui/base/Button';
|
||||
import { styled } from '@mui/system';
|
||||
import Stack from '@mui/material/Stack';
|
||||
|
||||
export default function UnstyledButtonsSimple() {
|
||||
return (
|
||||
<Stack spacing={2} direction="row">
|
||||
<Button>Mon CV</Button>
|
||||
{/* <Button disabled>Disabled</Button> */}
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
const blue = {
|
||||
200: '#99CCFF',
|
||||
300: '#66B2FF',
|
||||
400: '#3399FF',
|
||||
500: '#007FFF',
|
||||
600: '#0072E5',
|
||||
700: '#0066CC',
|
||||
};
|
||||
|
||||
const grey = {
|
||||
50: '#F3F6F9',
|
||||
100: '#E5EAF2',
|
||||
200: '#DAE2ED',
|
||||
300: '#C7D0DD',
|
||||
400: '#B0B8C4',
|
||||
500: '#9DA8B7',
|
||||
600: '#6B7A90',
|
||||
700: '#434D5B',
|
||||
800: '#303740',
|
||||
900: '#1C2025',
|
||||
};
|
||||
|
||||
const Button = styled(BaseButton)(
|
||||
({ theme }) => `
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.5;
|
||||
background-color: ${blue[500]};
|
||||
padding: 8px 16px;
|
||||
border-radius: 8px;
|
||||
color: white;
|
||||
transition: all 150ms 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 {
|
||||
background-color: ${blue[600]};
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: ${blue[700]};
|
||||
box-shadow: none;
|
||||
transform: scale(0.99);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&.base--disabled {
|
||||
background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
|
||||
color: ${theme.palette.mode === 'dark' ? grey[200] : grey[700]};
|
||||
border: 0;
|
||||
cursor: default;
|
||||
box-shadow: none;
|
||||
transform: scale(1);
|
||||
}
|
||||
`,
|
||||
);
|
||||
@ -1,48 +1,100 @@
|
||||
.app {
|
||||
height: 100%;
|
||||
background-size: 100% 100%;
|
||||
-webkit-text-stroke-width: 1px;
|
||||
-webkit-text-stroke-color: black;
|
||||
color: white;
|
||||
}
|
||||
|
||||
body {
|
||||
/* color:black; */
|
||||
font-family: "Fira Sans", Arial, sans-serif;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
header {
|
||||
height: 15vh;
|
||||
width: 100%;
|
||||
background-color: #f0f0f0;
|
||||
padding: 20px 0;
|
||||
/* background-color: #a4a4a4; */
|
||||
/* padding: 20px 0; */
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
width: 100%;
|
||||
width: 100vw;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* align-items: center; */
|
||||
justify-content: space-between; /* Align items horizontally */
|
||||
padding-left: 0px;
|
||||
/* padding-left: 0px; */
|
||||
}
|
||||
|
||||
.logo img {
|
||||
width: 50px; /* Adjust the size as needed */
|
||||
margin-left: 20px;
|
||||
.logo img{
|
||||
height: 15vh; /* Adjust the size as needed */
|
||||
/* margin-right: 32.5vw; */
|
||||
margin-left: 3vw;
|
||||
/* margin-left: 20px; */
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0;
|
||||
color:black;
|
||||
font-weight: 800;
|
||||
margin-left: 2vw;
|
||||
margin-right: 98vw;
|
||||
}
|
||||
|
||||
.menu {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.language {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 10vw;
|
||||
margin-top: 5vh;
|
||||
height: 6vh;
|
||||
/* margin-right: 2vw; */
|
||||
}
|
||||
|
||||
.css-15bhy65 {
|
||||
margin-right: 20px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.dark_mode {
|
||||
/* margin-top: 5vh; */
|
||||
margin-right: 2vw;
|
||||
width: 8vw;
|
||||
/* position: absolute; */
|
||||
/* margin: 0 */
|
||||
}
|
||||
|
||||
.hello {
|
||||
font-weight: 800;
|
||||
font-size: 700%;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
.project {
|
||||
margin-left: 10%;
|
||||
margin-top: 15%;
|
||||
max-width: 10%;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
margin-top: 30vh;
|
||||
margin-right: 10vw;
|
||||
|
||||
font-weight: 800;
|
||||
width: 50vh;
|
||||
height: 50%;
|
||||
align-self: start;
|
||||
/* margin-left: 30%; */
|
||||
/* margin-left: 10%; */
|
||||
/* margin-top: 15%; */
|
||||
/* max-width: 60%; */
|
||||
}
|
||||
|
||||
.presentation {
|
||||
@ -52,11 +104,69 @@ body {
|
||||
}
|
||||
|
||||
.home {
|
||||
/* height: 50%; */
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.project_txt {
|
||||
font-weight: 800;
|
||||
font-size: 200%;
|
||||
}
|
||||
|
||||
.cv_button {
|
||||
margin-top: 10%;
|
||||
margin-left: 70%;
|
||||
|
||||
}
|
||||
|
||||
.css-cg7pzv {
|
||||
transition-property: transform;
|
||||
transition-duration: 1s;
|
||||
&:hover {
|
||||
transform: scale(1.3);
|
||||
}
|
||||
}
|
||||
|
||||
.project_group {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
/* justify-content: center; */
|
||||
/* align-self: left; */
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.project_list {
|
||||
margin-right: 2vw;
|
||||
/* justify-content: space-between; */
|
||||
transition-property: transform;
|
||||
transition-duration: 700ms;
|
||||
&:hover {
|
||||
transform: scale(1.15);
|
||||
}
|
||||
}
|
||||
|
||||
.project_list:hover {
|
||||
color: rgb(0, 127, 255);
|
||||
}
|
||||
|
||||
.arrow {
|
||||
transition-property: transform;
|
||||
transition-duration: 700ms;
|
||||
transition: all 700ms ease;
|
||||
transform: scale(1.15);
|
||||
color: rgb(0, 127, 255);
|
||||
/* transition-property: transform; */
|
||||
/* transition-duration: 700ms; */
|
||||
/* padding-right: 10vh; */
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.project_list:hover + .arrow {
|
||||
/* color: rgb(0, 127, 255); */
|
||||
/* transition-property: transform; */
|
||||
/* transition-duration: 700ms; */
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
Before Width: | Height: | Size: 93 KiB After Width: | Height: | Size: 93 KiB |
@ -0,0 +1,3 @@
|
||||
[ZoneTransfer]
|
||||
ZoneId=3
|
||||
HostUrl=https://invert.imageonline.co/
|
||||
|
Before Width: | Height: | Size: 108 KiB After Width: | Height: | Size: 108 KiB |
BIN
my-app/src/img/background.jpg
Normal file
BIN
my-app/src/img/background.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 420 KiB |
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 26 KiB |
Loading…
Reference in New Issue
Block a user