[Projeto] Projeto Portfolio | Front-end

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="./CSS/styles.css" />
    <title>Portfolio</title>
  </head>
  <body>
    <header></header>
    <main class="container">
      <section class="container-conteudo">
        <h1 class="container-title">
          Eleve seu negócio digital a outro nível
          <strong>com um Full Stack de qualidade!</strong>
        </h1>
        <p>
          Olá! Sou
          <strong class="main-name">Guilherme Ancheschi Werneck Pereira</strong
          >, desenvolvedor Full Stack com especialidade em
          <strong class="main-especials"
            >React, HTML, CSS, JavaScript, Python e Vue.JS .</strong
          >
          Atualmente faço Engenharia de Software no ICev 5° Período, fazendo
          estágio na Nazária Distribuidora. Vamos conversar?
        </p>
        <div class="btn-link">
          <a
            href="https://www.instagram.com/guigohwerneck/"
            class="apresentacao-links-link"
            >Instagram</a
          >
          <a
            href="https://github.com/GuigohC0D3"
            class="apresentacao-links-link"
            >Github</a
          >
        </div>
      </section>
      <img
        src="./img/Imagem (1).png
      "
        alt="Joana Santos Programando em Python!"
      />
    </main>
    <footer></footer>
  </body>
</html>

CSS:

* {
  margin: 0;
  padding: 0;
}

body {
  box-sizing: border-box;
  height: 100vh;
  background-color: #ac9c9c;
}

.container {
  margin: 10% 15%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.container-conteudo {
  width: 615px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.container-title {
  color: aliceblue;
  font-size: 36px;
  font-family: "Krona One", serif;
}

.main-especials,
.main-name {
  color: #2e4057;
}

.apresentacao-links-link {
  text-decoration: none;
  width: 280px;
  text-align: center;
  font-size: 24px;
  padding: 21.5px 0;
  background-color: #a63446;
  border-radius: 16px;
  color: black;
  font-family: "Montserrat", serif;
  font-weight: 600;
}

p {
  color: aliceblue;
  font-size: 24px;
  font-family: "Montserrat", serif;
  font-weight: 400;
}

.btn-link {
  display: flex;
  justify-content: space-between;
}

Resultado:

Primeiro projeto realizado na Alura!

Hoje é um dia muito especial para mim! Estou publicando meu primeiro projeto na Alura e não poderia estar mais feliz com essa conquista. Depois de muita dedicação, desafios e aprendizado, finalmente dei esse passo e quero continuar evoluindo cada vez mais no mundo do frontend.

Cada linha de código escrita foi uma oportunidade de aprendizado, e sei que ainda há um longo caminho pela frente. Estou muito empolgado para aprimorar minhas habilidades, explorar novas tecnologias e compartilhar essa jornada com a comunidade.

Sei que errar faz parte do processo, e é exatamente isso que torna o aprendizado tão valioso. Mal posso esperar para receber feedbacks e aprender ainda mais com vocês. Vamos juntos nessa caminhada rumo ao conhecimento.

Se alguém quiser trocar ideias ou compartilhar experiências, será um prazer conversar. Obrigado, Alura, por proporcionar esse espaço incrível para quem ama tecnologia.

Oi, Guilherme! Como vai?

Obrigada por compartilhar seu código com a comunidade Alura.

Gostei de como você estruturou o HTML do seu portfólio, principalmente a organização dos elementos dentro da main, deixando o conteúdo bem distribuído. A escolha da tipografia com Krona One e Montserrat também traz um ótimo contraste visual.

Muito legal ver sua empolgação ao publicar o primeiro projeto! A tecnologia é uma jornada de aprendizado contínuo, e compartilhar suas conquistas faz toda a diferença. É ótimo saber que você está aberto a feedbacks e sempre buscando evoluir.

Para melhorar a responsividade do layout, você pode considerar utilizar flex-wrap: wrap; no .container, garantindo que os elementos fiquem alinhados corretamente em telas menores. Veja este exemplo:

<style>
  .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
</style>

Isso ajudará na adaptação do conteúdo sem comprometer a estética do site.

Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!