Esse é o Index:

Matheus Carvalho Da Silva

Front-End developer

Esse é o CSS: 

@import url('https://fonts.googlepis.com/css2?family=Poppins:wght@300;400;500;700&display=swap');

body{ margin: 0; padding: 0; font-family: 'Poppins', sans-serif; color: #1e1e2a; }

/* HEADER */

.header-container { height: 100vh; width: 100vw; background-color: #434b4b; background-image: url('./fundo-portfolio.jpg'); background-repeat: no-repeat; background-position: center; background-size: contain; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; box-sizing: border-box; padding: 0 112px; position: relative; }

h1 { font-size: 50px; text-transform: uppercase; letter-spacing: 4px; }

h2 { text-transform: uppercase; letter-spacing: 4px; }

.social-media{ margin-top: 1rem; display: flex; }

.social-media a { text-decoration: none; color: #1e1e2a; padding: 1rem 4rem; border: 5px solid #000000; min-width: 4rem; display: flex; align-items: center; justify-content: center; transition: .5s ease-in-out; }

a:hover { background-color: #ffffff; }

/* menu 1 */

.checkbox-container { display: flex; justify-content: center; align-items: center; }

.checkbox { height: 100px; width: 100px; position: absolute; right: 0; top: 0; display: flex; justify-content: center; cursor: pointer; z-index: 9999; transition: 400ms ease-in-out 0s; }

.checkbox .trace { width: 50px; height: 2px; background-color: #1e1e2a; position: absolute; border-radius: 4px; transition: 0.5s ease-in-out; }

.checkbox .trace:nth-child(1){ top: 26px; transform: rotate(0); }

.checkbox .trace:nth-child(2){ top: 46px; transform: rotate(0); }

.checkbox .trace:nth-child(3){ top: 66px; transform: rotate(0); }

#toggle { display: none; }

/* menu */

.menu { position: absolute; top: 28px; right: 30px; background-color: transparent; height: 4px; width: 10px; border-radius: 50%; box-shadow: 0px 0px 0px 0px #ffffff; z-index: -1; transition: 400ms ease-in-out0s; }

.menu-itens { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; z-index: 2; opacity: hidden; transition: 400ms ease-in-out 0s; }

.menu-itens ul { list-style-type: none; }

.menu-itens ul li a { margin: 10px 0; color: #1e1e2a; text-decoration: none; text-transform: uppercase; letter-spacing: 4px; font-size: 40px; }

/* animação */

#toggle:checked + .checkbox .trace:nth-child(1){ transform: rotate(45deg); top: 47px; }

#toggle:checked + .checkbox .trace:nth-child(2){ transform: translate(-100px); width: 30px; visibility: hidden; opacity: 0; }

#toggle:checked + .checkbox .trace:nth-child(3){ transform: rotate(-45deg); top: 48px; }