Menu interativo!

Oi bom dia como fazer para quando eu clicar no meu menu, ele me redirecionar para para área de contato, abilidades, locais, etc?

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="normalize.css">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>

<body>
    <header>
        <h1>Geovane <br>
            <div class="espaço-titulo">
                <div class="desenvolvedor"> desenvolvedor front-end</div>
            </div>

        </h1>

        <nav class="menu-navegação">
            <a class="menu-link" href="#">Sobre</a>
            <a class="menu-link" href="#">Projetos</a>
            <a class="menu-link" href="#">Habilidades</a>
            <a class="menu-link" href="#">Contato</a>
        </nav>

    </header>
    <hr class="hr-header">
    <main>
        <h2>
            Sobre
        </h2>
        <div class="sobre">
            <p class="descrição">Meu nome é Geovane tenho 25 anos, estudo linguagem de programação na escola online Alura e gosto de tecnologia em geral. <br> Tenho conhecimento em html, css e estou estudando java script e web responsivo. <br> <br> Procuro estágio na área
                e será muito bom fazer parte da sua equipe. <br> Se quiser saber um pouco mais sobre meu trabalho ou bater um bom papo entre em contato logo abaixo!
            </p>
            <img class="foto-escritório" src="escritório.png" alt="escritório">
        </div>
        <h3 class="Projetos">
            Projetos
        </h3>
        <p class="informações-de-projetos">
            Ops! Por enquanto não tenho nenhum projeto, mais está em construção!
        </p>
        <h4>
            Habilidades
        </h4>
        <div class="Skills">
            <img id="html" class="fotos" src="html.png" alt="">
            <img id="css" class="fotos" src="css.png" alt="">
            <img id="git" class="fotos" src="git.png" alt="">
            <img id="figma" class="fotos" src="figma.png" alt="">
        </div>
        <h5 class="Contatos">
            Contato
        </h5>

        <form action="">
            <div class="box-form">
                <div class="form">
                    <div class="nome-sobrenome">
                        <label class="formulário" for="nome">Nome completo</label>
                        <div class="nome-sobrenome-input">
                            <input class="formulário" type="text" placeholder="Nome e sobrenome">
                        </div>
                    </div>
                    <div class="e-mail">
                        <label class="formulário" for="e-mail">E-mail</label>
                        <div class="e-mail-input">
                            <input class="formulário" type="email" id="e-mail" placeholder="Exem:email@gmail.com">
                        </div>
                    </div>
                    <div class="numero">
                        <label class="formulário" for="numero">Telefone</label>
                        <div class="numero-input">
                            <input class="formulário" type="tel" placeholder="(  )">
                        </div>
                    </div>
                    <div class="assunto">
                        <label class="formulário" for="text">Assunto</label>
                        <div class="assunto-input">
                            <textarea class="formulário" name="" id="" cols="30" rows="10"></textarea>
                        </div>
                    </div>
                    <div class="enviar-button">
                        <button class="formulário">enviar</button>
                    </div>

                </div>
                <div class="img-form">
                    <img class="foto" src="formulário.jpg" alt="">
                </div>
            </div>
        </form>

    </main>
    <footer>
        <hr class="hr-footer">
        <div class="footer-social-midia">

            <div class="social-midia">
                <a class="linkedin" href="https://www.linkedin.com/in/geovaneferreira10/"><img src="linkedin.png" alt=""></a>
                <a class="instagram" href="https://www.instagram.com/geovane8724/"><img src="instagram (2).png" alt=""></a>
                <a class="facebook" href="https://m.facebook.com/geovane.santana.925059"><img src="facebook.png" alt=""></a>
            </div>
        </div>

    </footer>

</body>

</html>
header {
    position: fixed;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    top: 0;
    left: 0;
    right: 0;
    height: 62px;
    border-bottom: 1px solid #000;
    padding: 0 2em;
}

hr {
    width: 98%;
}

h1 {
    font-size: 40px;
    margin-left: 3%;
}

.sobre {
    display: flex;
    align-items: center;
}

h2 {
    color: #7d7dde;
    font-size: 57px;
    margin-left: 6%;
}

.Projetos {
    text-align: center;
    color: #7d7dde;
    font-size: 57px;
}

h4 {
    text-align: center;
    color: #7d7dde;
    font-size: 57px;
}

.Skills {
    text-align: center;
}

.Contatos {
    text-align: center;
    color: #7d7dde;
    font-size: 57px;
}

.fotos {
    margin-left: 110px;
}

#git {
    width: 180px;
}

.descrição {
    text-align: left;
    font-size: 26px;
    margin-left: 79px;
}

.desenvolvedor {
    font-size: 28px;
}

.foto-escritório {
    width: 991px;
}

.informações-de-projetos {
    text-align: center;
    font-size: 27px;
    margin-left: 50px;
}

.formulário {
    display: flex;
    margin-left: 230px;
    margin-top: 10px;
}

input {
    border-radius: 50px;
    border-color: #7d7dde;
}

textarea {
    border-radius: 10px;
    border-color: #7d7dde;
}

.box-form {
    display: flex;
}

.formulário button {
    margin-right: 50px;
}

.enviar-button {
    display: flex;
    justify-content: center;
    margin-bottom: 5px;
}

.foto {
    width: 497px;
    margin-top: 10px;
    margin-left: 200px;
}

.espaço-titulo {
    margin-left: 40px;
}

.menu-link {
    margin-right: 20px;
    color: #BBBBBB;
    text-decoration: none;
    font-size: 210%;
}

.menu-link:hover {
    color: black;
}

.social-midia img {
    width: 30px;
    margin-left: 1%;
}

.p-social-midia {
    color: #BBBBBB;
    margin-left: 5%;
    margin-bottom: 4%;
}

.footer-social-midia {
    margin-left: 90%;
}

.hr-social-midia {
    margin-bottom: 6%;
    margin-left: 7%;
    width: 80px;
}

.p-div-copyright {
    margin-top: -6%;
    margin-left: 5%;
    font-size: 39px;
}

.hr-copyright {
    width: 19%;
    margin-right: 83%;
    margin-top: 1%;
}

@media screen and (max-width:480px) {
    h1 {
        margin-left: 50px;
        font-size: 100px;
    }
    .espaço-titulo {
        margin-left: 0px;
    }
    .menu-link {
        background-image: url(menu-amburguer.png);
        background-repeat: no-repeat;
        background-size: cover;
    }
}

vc tem q ter outra pagina/arquivo html.

contato.html;
habilidades.html;

aí usando a tag: a, vc faz (supondo que esteja tudo na mesma pasta):

<a href="skills.html">Habilidades</a>

e pra voltar pra a index, vc usa:

<a href="index.html">Tela Inicial</a>

Se o outro arquivo estiver em pasta diferente, é só colocar o nome da pasta antes, exemplo:

<a href="loja/carrinho.html">Ir para o carrinho</a>

tipo eu estou querendo saber é tipo eu clicar no menu e a pagina rolar automaticamente para o conteudo que cliquei, eu só quero ter 1 arquivo entendeu?

Ahhhh, entendi, desculpa.

É só vc colocar um id no seu componente:

<div id="skills">
  ...
</div>

e pra ir até lá:

<a href="#skills"> Skills </a>