Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!DOCTYPE html>
<html lang="en">

<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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
  <link rel="stylesheet" href="app.css">
  <script src="https://kit.fontawesome.com/26d92eb9a8.js" crossorigin="anonymous"></script>
  <title>Vince Abuyuan</title>
</head>

<body>

  <div class="bg-dark text-light">

    <div class="container">
      <div class="top text-center">
        <h1 class="text-info">Vince Abuyuan,</h1>
        <h2 class="user-select-none position-relative">
          <span id="myTitle">Front End Developer</span>
          <span id="counterKeeper" class="position-absolute top-0 start-100 translate-middle badge bg-danger fs-6">
            0
            <span class="visually-hidden">unread messages</span>
          </span>
        </h2> <br>
        <a href="mailto:abuyuanvince@gmail.com"><button type="button" class="btn btn-outline-light">Contact Me</button></a>
        <div class="top__socials mt-5">
          <a href="https://www.linkedin.com/in/vince-abuyuan-59252b16a/"><i class="fab fa-linkedin fa-3x mx-1 text-info"></i></a>
          <a href="https://codepen.io/booyouon"><i class="fab fa-codepen fa-3x mx-1 text-info"></i></a>
          <a href="https://github.com/booyouon"><i class="fab fa-github-square fa-3x mx-1 text-info"></i></a>
          <a href=""><i class="fab fa-dev fa-3x mx-1 text-info"></i></a>
        </div>
      </div>
    </div>
  </div>      



  <div class="bottom bg-light text-dark">
    <div class="container middle">
      <nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top opacity-75">
        <div class="container-fluid">
          <div class="navBrand__bg bg-info rounded-circle">
            <a class="navbar-brand text-light font-weight-bold mx-auto my-auto" href="#">VA</a>
          </div>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ml-auto mr-0">
              <li class="nav-item">
                <a class="nav-link" href="#"><i class="far fa-envelope"></i> Contact</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#about"><i class="fas fa-address-card"></i> About Me</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#projects"><i class="fas fa-hammer"></i> Projects</a>
              </li>
              <li>
                <a href="https://docs.google.com/document/d/e/2PACX-1vSWZDNl4ByHViaUuWlwSyvrtJAz1IZObI3uTj2prPtogckpTkNy0dK5u2pcPHX7DNmLGEzYV2yg0Yti/pub"><button type="button" class="btn btn-outline-info">Resume</button></a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
      <div id="about" class="middle__about">
        <h2 class="text-secondary my-4 border-bottom border-secondary pb-4 text-center">
          About Me.
        </h2>
        <div id="about" class="d-flex align-items-center">
          <div class="middle_aboutPhoto">
            <img class="about__myPic rounded" src="./img/me.jpg" alt="picture of me">
          </div>
          <div class="middle__aboutText">

            <p class="middle_">
              I am a self-taught web developer specializing in building responsive websites with the use of <span class="text-info">MongoDB, ExpressJS, and NodeJS</span> on the backend and <span class="text-info">HTML, CSS, and Javascript</span> on the frontend. My educational background includes two Associate degrees (Kinesiology and Biological Sciences) from community college and a Bachelors of Science degree in Biopsychology from University of California, Santa Barbara. <br><br>
              I took my first coding course my senior year of high school. A TEALS course was being offered at my high school for the first time that was being taught by volunteers from the community. We were taught the fundamentals of computer science using Snap! I then was given the opportunity to be a teacher’s aide for the class the following semester. My interest was piqued so during community college I took Hardvard’s CS50 on edx.org. Afterwards there was a gap in my learning due to school taking up the majority of my time. During the lockdown, the interest was reignited and in March 2021 I decided to take Colt Steele’s 2021 Web Developer Bootcamp on Udemy. The course taught the MEN stack and has been the stack that I have since been primarily using. Today, I am trying to learn as much as I can and build up more skills to become a great software engineer in the future.
            </p>
          </div>
        </div>

      </div>
      <div id="projects" class="middle__projects container-fluid">
        <h2 class="text-secondary my-5 border-bottom border-secondary pb-4 text-center">Projects.</h2>
        <div class="projects__figureContainer d-flex flex-row justify-content-center align-items-center flex-wrap">
          <div class="projects__figure mx-1 my-1">
            <figure>
              <img src="./img/uo.png" class="figure__img">
              <figcaption>
                <div class="figcaption__noHover">
                  <h3 class="figcaption__noHover__h2 text-light">UO Website Clone</h3>
                </div>
                <div class="figcaption__hover">
                  <h5 class="text-info">UO Website Clone</h5>
                  <p>Javascript, EJS, Node.js, MongoDB, Express, AJAX</p>
                  <a href="https://github.com/booyouon/urbanOutfittersClone" class="text-info"><i class="fab fa-github fa-2x mx-2 text-info"></i></a>
                </div>

              </figcaption>
            </figure>
          </div>
          <div class="projects__figure mx-1 my-1">
            <figure>
              <img src="https://images.unsplash.com/photo-1514933651103-005eec06c04b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80" class="figure__img">
              <figcaption>
                <div class="figcaption__noHover">
                  <h3 class="figcaption__noHover__h2 text-light">Fake Restaurant</h3>
                </div>
                <div class="figcaption__hover">
                  <h5 class="text-info">Fake Restaurant</h5>
                  <p>Javascript, Punk API, EJS, Node.js, MongoDB, Express</p>
                  <a href="https://github.com/booyouon/urbanOutfittersClone" class="text-info"><i class="fab fa-github fa-2x mx-2 text-info"></i></a>
                </div>
              </figcaption>
            </figure>
          </div>
          <div class="projects__figure mx-1 my-1">
            <figure>
              <img src="./img/portfolio.png" class="figure__img">
              <figcaption>
                <div class="figcaption__noHover">
                  <h3 class="figcaption__noHover__h2 text-light">Personal Portfolio</h3>
                </div>
                <div class="figcaption__hover">
                  <h5 class="text-info">Personal Portfolio</h5>
                  <p>HTML, CSS, Bootstrap</p>
                  <a href="https://codepen.io/booyouon/pen/VwbEOYp" class="text-info"><i class="fab fa-codepen fa-2x mx-2 text-info"></i></a>
                </div>
              </figcaption>
            </figure>
          </div>
        </div>
      </div>
    </div>
  </div>
      
  <footer class="text-center bg-dark text-light">
    <p>Vince Abuyuan&copy;2021</p>
    <a href="#" class="text-info">Back to Top</a>
  </footer>
  
  <script src="index.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
</body>

</html>

              
            
!

CSS

              
                h1 {
  font-size: 3.5rem;
}

h2 {
  font-size: 2.5rem;
}

h3 {
  font-size: 2rem;
}

p {
  font-size: 1.15rem;
}

.top {
  padding: 350px 250px;
}

.bottom {
  padding-bottom: 200px;
}

.about__myPic {
  width: 400px; 
  height: auto; 
  margin: 50px 50px 0;
}

.navBrand__bg {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
}

.navbar-brand {
  font-size: 1.5rem;
}

#myTitle {
  cursor: pointer;
}

#myTitle:hover {
  opacity: 0.9;
}

#counterKeeper {
  display: none;
}

footer {
  padding: 100px 0px;
}

a, .navBrand__bg {
  transition: 0.45s ease-in-out;
}

a:hover, .navBrand__bg:hover {
  opacity: 0.6;
}

figure {
  display: block;
  position: relative;
  max-width: 400px;
  margin: auto;
}

figcaption {
  display: flex;
  position: absolute;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  transition: 0.45s ease-in-out;
}

.figcaption__hover {
    display: none;
    opacity: 0;
}

.figure__img {
  width: 400px;
  height: 260px;
  border-radius: 12px;
}

figure:hover .figure__img {
  opacity: 0.3;
}

figure:hover .figcaption__hover {
  display: block; 
  opacity: 100%;
}

figure:hover .figcaption__noHover {
  display: none;
}

.nav-link:hover {
  color: cyan !important;
}

.navbar-nav {
  margin-left: auto;
}

.middle__about {
  margin-bottom: 100px;
}

.figcaption__noHover__h2 {
  text-shadow: 2px 2px 2px black;
}

@media only screen and (max-width: 990px) {
  .figure__img {
    width: 70vw;
    height: 45vw;
  }
  figure {
    max-width: 70vw;
  }
  .top {
    padding: 400px 0px;
  }
  #about {
    flex-direction: column;
  }
}

              
            
!

JS

              
                const myTitle = document.querySelector("#myTitle");
const counterKeeper = document.querySelector("#counterKeeper");
var counter = 0;

//function below detects whenever the title on top is clicked to trigger the text, color, and counter value to change
myTitle.addEventListener("click", () => {
  //text of #myTitle is determined on click
  if (myTitle.textContent == "Front End Developer") {
    myTitle.textContent = "Full-Stack Developer";
  } else if (myTitle.textContent == "Full-Stack Developer") {
    myTitle.textContent = "MEN Stack Developer";
  } else {
    myTitle.textContent = "Front End Developer";
  }
  //random color generated and applied to #myTitle
  const randomColor = Math.floor(Math.random() * 16777215).toString(16);
  myTitle.style.color = "#" + randomColor;
  //counter display value increased and counterKeeper becomes visible and updated
  counter++;
  counterKeeper.textContent = counter.toString();
  if (counterKeeper.style.display !== "block") {
    counterKeeper.style.display = "block";
  }
});

              
            
!
999px

Console