hmothershed.html

<article>
    <h3>hmothershed</h3>
    <p>Hi, my name is Harmony! I'm a recent Computer Engineering graduate who's currently working as a Junior Programmer Analyst. Recently, I've grown more interest in software development over hardware and have been trying to find more ways to build up my skills. I would like to start contributing to more projects and hopefully collaborate with others!</p>
    <h4>Programming languages I use</h4>
    <section class="container">
      <div class="badge" style="background-color: #74d3ae; color: black">
        Python
      </div>
      <div class="badge" style="background-color: #678d58; color: black;">
        JavaScript
      </div>
      <div class="badge" style="background-color: #a6c48a; color: black;">
        HTML & CSS
      </div>
      <div class="badge" style="background-color: #f6e7cb; color: black;">
        C++
      </div>
      <div class="badge" style="background-color: #eabfa9; color: black;">
        SQL
      </div>
      <div class="badge" style="background-color: #dd9787; color: black;">
        Java
      </div>
    </section>
  
    <h4>Tools I use</h4>
    <section class="container">
        <!-- Arduino -->
      <img
        class="icon"
        src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/arduino/arduino-original.svg"
      />
      <!-- Figma -->
      <img
        class="icon"
        src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/figma/figma-original.svg"
      />
      <!-- Git -->
      <img
      class="icon"
      src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/git/git-original.svg"
    />
      <!-- Github -->
      <img
      class="icon"
      src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/github/github-original.svg"
    />
       <!-- MySQL -->
       <img
       class="icon"
       src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/mysql/mysql-original.svg"
     />
       <!-- PostgreSQL -->
      <img
       class="icon"
       src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/postgresql/postgresql-original.svg"
     />
      <!-- VS Code -->
      <img
      class="icon"
      src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/vscode/vscode-plain.svg"
    />
       <!--Visual Studio -->
       <img
        class="icon"
        src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/visualstudio/visualstudio-plain.svg"
      />
    </section>
  </article>
  <style>
    body {
      font-family: sans-serif;
    }
    .container {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
    }
    .badge {
      padding: 0.5rem;
      border-radius: 0.25rem;
    }
    .icon {
      width: 2rem;
    }
  </style>