index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Bryan Altman - Portfolio</title>
    <link rel="stylesheet" href="./style.css"/>
    <script src="./script.js"></script>
  </head>
  <body>
    <!-- Navigation Bar -->
    <nav>
      <div id="home">
        <div class="profile_name">
          Bryan Altman
          <div class="contact_info">
            <img src="html_finalprojimages/envelope.png" alt="https://icons8.com/icon/124377/circled-envelope"/>
          bryanantaltman@gmail.com
        </div>
        <div style="clear:both;"></div>
        <div class="contact_info">
          <img src="html_finalprojimages/phone.png" alt="https://icons8.com/icon/124377/circled-envelope"/>
          +2292065161

        </div>
        </div>
        <div class="topdiv">
          <a class="topmenu" href="#about-me">About Me</a>
          <a class="topmenu" href="#skills">Skills</a>
          <a class="topmenu" href="#projects">Completed Training</a>
          <a class="topmenu" href="#recommendations">Recommendations</a>
          <!-- Add the links for Skills, Projects and Recommendation here -->

        </div>
      </div>    
    </nav>

    <!-- About Me -->
    <section id="about-me" class="container">
      <div>
        <img src="https://th.bing.com/th/id/OIP.RtY25YYiwVo2MQ-RSs_uGgHaE8?w=250&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7" class="profile_image"/>
      </div>

      <div>
          <h1>
            Hi, I'm Bryan Altman! <img src="html_finalprojimages/icons8-waving-hand-emoji-40.png" width="60px"/>
          </h1>
          <p>
            I am 39 years old, I am married to a wonderful woman and we have 3 amazing boys, and I love CrossFit.
            I want to be a full stack developer who works in both application and presentation layers and I also want to work in Cybersecurity.
            I have worked on applications and microservices deployed on IBM Cloud through my course of study.
            I have also worked on numerous labs dealing with programming, cybersecurity, and Cloud services.
            I am currently studying IT Support, software development, and cybersecurity.
          </p>
      </div>
    </section>
              
    <!-- Skills -->
    <section id="skills">
      <h2>Skills</h2>
      <div style="clear:both;"></div>

      <div class="all_skills">
        <div class="skill">
          <img src="html_finalprojimages/html5.png"/>
          <h6>HTML</h6>
          <!--<p></p>-->
        </div>  

        <div class="skill">
          <img src="html_finalprojimages/js.jpeg"/>
          <h6>JavaScript</h6>
          <!--<p></p>-->
        </div>  

        <div class="skill">
          <img src="html_finalprojimages/CSS3.png"/>
          <h6>CSS</h6>
         <!--<p></p>-->
        </div>

        <div class="skill">
          <img src="html_finalprojimages/node.png"/>
          <h6>node.js</h6>
          <!--<p></p>-->
        </div>

        <div class="skill">
          <img src="html_finalprojimages/java.png"/>
          <h6>Java</h6>
          <!--<p></p>-->
        </div>

        <div class="skill">
          <img src="html_finalprojimages/Microsoft-logo-500x220.jpg"/>
          <h6>Microsoft</h6>
          <p>Windows 7, 8, 10, 11, Server</p>
          <p>Office 365</p>
          <p>Command Line</p>
          <p>PowerShell</p>
        </div>

        <div class="skill">
          <img src="html_finalprojimages/Linux-Logo-2008-500x315.png"/>
          <h6>LINUX</h6>
          <p>Ubuntu, Kali, BlackArch</p>
          <p>Bash</p>
        </div>

        <div class="skill">
          <img src="html_finalprojimages/Apple-Logo-500x281.jpg"/>
          <h6>Apple</h6>
          <p>MacOS</p>
          <p>Bash/Zsh</p>
        </div>

        <div class="skill">
          <img src="html_finalprojimages/GitHub-logo-500x289.jpg"/>
          <h6>GITHUB</h6>
          <p>Repositories</p>
        </div>

        <div class="skill">
          <img src="html_finalprojimages/IBM-logo-500x281.jpg"/>
          <h6>IBM</h6>
          <p>Cloud Services</p>
        </div>

        <div class="skill">
          <img src="html_finalprojimages/CompTIA.png"/>
          <h6>COMPTIA</h6>
          <p>A+</p>
        </div>

        <!-- Add more skills here -->

      </div>
    </section>
          
    <!-- Projects -->
    <section class="projects" id="projects">
      <h2>
        Completed Training
      </h2>
      <div style="clear:both;"></div>

        <div id="projects-container" class="projects-container">
          <div class="project-card">
            <h3>Coursera</h3>
            <ul>
              <li>Intro to Cloud Computing</li>
              <li>Foundations of Cybersecurtiy</li>
              <li>Introduction to Web Development with HTML, CSS, and JavaScript</li>
              <li>Introduction to Containers with Docker, Kubernetes, and OpenShift</li>
              <li>Getting Started with Git and GitHub</li>
              <li>Technical Support Fundamentals</li>
              <li>The Bits and Bytes of Computer Networking</li>
            </ul>
          </div>
          <hr>
          <div class="project-card">
            <h3>EC-Council</h3>
            <ul>
              <li>Security Automation with Ansible</li>
              <li>Troubleshooting Slow Network with Wireshark</li>
              <li>Hands-on JavaScript for Ethical Hacking</li>
              <li>Real-time Threat Detection with Elastic Stack</li>
            </ul>
          </div>
          <hr>
          <div class="project-card">
            <h3>Codecademy</h3>
            <ul>
              <li>Learn Bash Scripting</li>
              <li>Learn the Command Line</li>
              <li>Learn to Prevent XSS with Node.js</li>
              <li>Learn to Prevent SQli with Node.js</li>
              <li>Analyze Data with SQL</li>
              <li>Learn about XSRF Attacks</li>
              <li>Learn PowerShell</li>
              <li>Scan Systems with Nmap</li>
              <li>Learn C: Introduction</li>
            </ul>
          </div>
          <hr>
          <div class="project-card">
            <h3>Training Currently Attending</h3>
            <ul>
              <li>Web Security Academy</li>
              <li>Learn C#</li>
              <li>Python 3</li>
              <li>Intro to Python</li>
              <li>Data Structure Stack Series #1 - JAVA</li> 
              <li>Ethical Hacking in 15 Hours - 2023 Edition</li>
            </ul>
          </div>
    </div>
    </section>
    <div style="clear:both;"></div>

    <!-- Recommendations -->
    <section id="recommendations">
      <h2>Recommendations</h2>
      <div style="clear:both;"></div>
      <div class="all_recommendations" id="all_recommendations">
        <div class="recommendation">
          <span>&#8220;</span>
          Bryan is a very quick learner and quickly grasps key concepts of Web development. 
          He got a great attitude & he is an excellent team player. 
          He has a curious mind and asks the right question. 
          He takes initiative within a team and has potentials to lead the team.
          <span>&#8221;</span>
        </div>
        <div class="recommendation">
          <span>&#8220;</span>
          Working with Bryan has been an awesome experience. 
          He is highly knowledgable and always goes the extra step to make sure everything is right. 
          For any future projects that need his expertise I would definitely want to work with him again.
          <span>&#8221;</span>
        </div>
        <div class="recommendation">
          <span>&#8220;</span>
          I had worked along with Bryan during the initial phase of our venture which needed Web development. 
          He is a committed resource who has in depth knowledge about the domain. 
          He will be an asset for any organisation! 
          <span>&#8221;</span>
        </div>
      </div>
    </section>

    <!-- Recommendation Form -->
    <section id="contact">
      <div class="flex_center">
        <fieldset>
          <legend class="introduction">Leave a Recommendation</legend>          
          <input type="text" placeholder="Name (Optional)"> <br/>
          <textarea id="new_recommendation" cols="500" rows="10" placeholder="Message"></textarea>
          <div class="flex_center">
            <button id="recommend_btn" onclick="addRecommendation()">Submit</button>
          </div>
        </fieldset>
      </div>
    </section>

    <div class="iconbutton">
      <a href="#home">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="white" width="63px">
            <path stroke-linecap="round" stroke-linejoin="round" d="M15 11.25l-3-3m0 0l-3 3m3-3v7.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
        <!--Add the code here for the logo to appear and the icon to be actionable-->
      </a>
    </div>

    <div class="popup" id="popup" class="flex_center">
      <img src="html_finalprojimages/checkmark--outline.svg"/>
      <h3>Thanks for leaving a recommendation!<!-- Add appropriate text here--></h3>
      <button onclick="showPopup(false)">Ok</button>
    </div>
  </body>
</html>