Mudar os links de posição

Olá Guilherme, tudo bem contigo?

Primeiro eu devo dizer que elaborei um design baseado no que você descreveu em seu post, mas pode ser que ele não seja exatamente como você deseja. E eu já peço que caso não seja isso forneça mais detalhes para que eu possa lhe auxiliar da melhor forma tá, mas vamos lá.

Então para fazer essas mudanças você não precisa necessariamente mudar toda a página, somente algumas alterações serão suficientes.

Portanto, eu vou deixar uma passo-a-passo abaixo que você deve seguir estritamente para conseguir resolver chegar no resultado desejado.

1. Englobe toda a seção com os textos dentro de outra div junto dá imagem, dessa forma:

       <main class="apresentacao">
           <!-- Essa div tem essa classe mas você pode dar o nome que desejar -->
           <div class="apresentacao__separacao">
              <section class="apresentacao__conteudo">
                  <h1 class="apresentacao__conteudo__titulo">Eleve seu negócio digital a outro nível <strong class="destaque-titulo">com um Front-end de qualidade!</strong></h1>
                  <p class="apresentacao__conteudo__texto">Olá! Sou Guilherme Roledo, desenvolvedor Front-end com especialidade em <span>React, HTML e CSS</span>. Ajudo pequenos negócios e designers a colocarem em prática boas ideias. Vamos conversar?</p>
              </section>
               <img src="profile-pic.png"  width="400" alt="foto do Guilherme em um fundo laranja.">
           </div>
           <!-- Essa tag abaixo eu adicionei pois percebi que você não tinha, estilize ela como desejar. É importante que ela fique fora da div para não ser "atingida" pelo flexbox caso você decida usar ele no passo 5 -->
           <h2 class="apresentacao__links__subtitulo">Acesse Minhas Redes:</h2>
          <div class="apresentacao__links">
              <a class="apresentacao__links__botoes" href="https://instagram.com/guilhermeroledo/">Instagram</a>
              <a class="apresentacao__links__botoes" href="https://github.com/GuilhermeRoledo">GitHub</a>
          </div>
      </main>
   

2. Após isso parte do problema será resolvido, tendo isso devemos ir à classe .apresentacao que é a classe da tag <main>, lá você deve adicionar a propriedade flex-direction: column;, isso irá deixar as div´s alinhadas corretamente.

   Só um aviso, você deve diminuir na classe apresentacao da tag <main> o espaçamento entre as seções para que este layout fique bom, portanto o gap: 82px; que está configurado no momento troque por gap: 3rem;, é só fazer essa mudança que você no final vai ter um resultado bem melhor.

3. Feito isso você deve abrir o arquivo CSS e iniciar os estilos da classe apresentacao__separacao (ou seja qual for a classe da nova div criada), e dentro dos estilos dessa classe adicione isso:

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

   Só um adendo, mesmo com isso a imagem vai ficar grudada nos textos, portanto seria bom adicionar uma margem de mais ou menos um 1rem nela para eles não ficarem grudados.

4. Isso irá centralizar a imagem e os textos, bem como deixar eles lado-a-lado.
5. Após isso você deve fazer uma escolha, se deseja manter o layout assim ou se deseja aplicar Flexbox e deixar os botões de links um do lado do outro dessa forma:

       .apresentacao__links {
           display: flex;
           /* flex-direction: column; */
           justify-content: space-between;
           align-items: center;
           gap: 32px;
       }
   

6. Como você pode ver eu removi o alinhamento em colunas da div. Se você desejar pode até colocar um flex-wrap: wrap;, para caso deseje adicionar mais links, mas aviso desde já que isso pode e muito provavelmente vai quebrar o estilo, mas aí é uma escolha sua decidir o que fazer agora.

Assim você já vai ter concluído o layout que consegui imaginar, o resultado aproximado deveria ser algo nesse sentido aqui:

E foi esse o layout que eu consegui imaginar baseado no que você falou, e como você pode ver esse projeto que eu usei para me basear foi o meu que eu personalizei com uma paleta de cores e alguns outros gostos pessoais meus, mas a estrutura aplicada aqui deve ser originada se você seguir o passo à passo que eu lhe passei.

Em suma era isso, caso tenha alguma dúvida eu fico à disposição para responder e ajudar.

E se tiver problemas com o passo-a-passo, ou não entender algo que pedi para você fazer é só avisar que eu explico com todo o prazer.

Espero ter ajudado, abraços e bons estudos.

Eai Renan, blz? Cara eu agradeço muito, vendo sua explicação nem é tão complicado assim. Agora eu estou praticando com outros projetos e ainda não fiz essa alteração mas, se surgir novas duvidas tento entrar em contato contigo hahah. Minha ideia era deixar os links mais no cantinho da página, mas visualizando o seu projeto, sua ideia ficou melhor. Obrigado novamente.

Olá Guilherme, tudo bem contigo?

No caso eu realmente gosto muito de trabalhar com HTML e CSS, mas no começo para mim também era muito complicado, eu não conseguia entender de jeito nenhum o que era flexbox, e o tal do "justify" então, sempre que ele aparecia era o meu terror. Se metia grid então, aí sim o bicho pegava, era confusão atrás de confusão, mas com o tempo, a prática e fazendo alguns projetinhos para praticar eu consegui aos poucos me desenvolver até entender essas linguagens e me familiarizar com elas e seus métodos, então não se preocupe, com o tempo e prática tudo se resolve.

E lembre-se, caso não entenda algo, ou tenha algum problema, "BUG", ou empecilho em relação aos conteúdos e/ou os cursos, conte com o fórum, estaremos todos aqui muito felizes em ajudar.

Era isso, abraços e boa sorte na sua carreira como DEV, e se precisar eu estarei por aqui!

;)