index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Richard (RJ) Valencia - Portfolio</title>
    <meta charset="UTF-8">
    <meta name="description" content="The portfolio of RJ Valencia! Come adore his instructional design prowess!">
    <meta name="keywords" content="RJ, Richard, Valencia, Richard Valencia, RJ Valencia, instructional design, instructional designer, voiceover, RJ voiceover, portfolio, Richard portfolio, Valencia portfolio, Richard Valencia portfolio, RJ Valencia portfolio">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta name="author" content="Richard (RJ) Valencia"><meta name="google-site-verification" content="6h1L7J8T34bJO7fIq3S23QrtuKEejSrrX7mOp3YhLaE" />
<link rel="icon" href="../img/valencia-favicon.svg" sizes="any" type="image/svg+xml">
<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=Space+Grotesk:wght@300&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
    <style>
      html {
  scroll-behavior: auto !important;
  -webkit-transition-delay: 1000ms;
          transition-delay: 1000ms;
}

body {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#010b19), color-stop(#010b19), color-stop(#010b19), to(#05377b));
  background-image: linear-gradient(#010b19, #010b19, #010b19, #05377b);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100vh;
  color: white;
  font-family: "Space Grotesk", sans-serif;
}

h1 {
  font-size: 500%;
  margin-bottom: 0.25em;
}

h2 {
  font-size: 400%;
  margin-bottom: -0.38em;
}

td, th {
  color: white;
}

li:last-child {
  margin-bottom: 0.5em;
}

a:link {
  color: white;
}
a:hover {
  color: white;
}
a:visited {
  color: white;
}

.row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#main-content {
  width: 88%;
  margin: 0 auto;
  padding: 2em;
  background: rgba(0, 0, 0, 0.3);
  z-index: -1;
}

nav {
  border-bottom: 2px solid #9c9494;
}
nav a:focus {
  color: white !important;
}

#hero-section {
  margin-top: 96px;
}
#hero-section h2 {
  font-size: 300%;
  margin-bottom: 3rem;
}
#hero-section p {
  font-size: 150%;
}
#hero-section a.scroll-target:link {
  text-decoration: none;
}
#hero-section a.scroll-target:hover {
  color: black;
  background-color: white;
}
#hero-section #hero-img {
  width: 35%;
  float: right;
  margin-left: 2rem;
  border: 1px solid white;
}

#portfolio, #about-me, #resume {
  padding-top: 6em;
  margin-bottom: 7em;
}

#pos {
  padding-top: 13em;
  margin-bottom: 13em;
}

#contact {
  width: 100%;
}
#contact h2 {
  font-size: 300%;
}

.p-container {
  max-width: 1000px;
  margin: 0 auto;
  font-size: 1.25em;
}

.table {
  color: white !important;
  overflow-x: auto;
}

.card-text {
  text-align: center;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  border-radius: 0.25rem;
}

.card {
  background-color: rgba(0, 0, 0, 0) !important;
  border: 1px solid white;
  border-radius: 1em;
  padding: 1em;
  height: 100%;
}
.card .card-body {
  display: none;
}
.card .card-text {
  text-align: center;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  border-radius: 0.25rem;
}
.card .card-title {
  font-weight: bold;
}
.card a {
  margin-top: auto;
}
.card a button {
  width: -webkit-fill-available;
}

.modal-content {
  background-color: #042c62 !important;
  width: auto !important;
  margin: 0 auto;
}

.modal-dialog {
  max-width: 1000px !important;
}

.modal-body.anno {
  padding: 2em;
  height: auto;
}

button, #voiceover button, #voiceover a {
  margin-top: 0.75em;
}

#portfolio > .row:not(:first-child) {
  margin-bottom: 3em;
}

.navbar {
  background-color: black !important;
  position: fixed;
  top: 0;
  z-index: 1020;
  width: 100%;
}

.current {
  color: white !important;
}

.navbar-nav {
  width: 100%;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
}

.navbar-brand {
  border-right: 1px solid white;
  padding-right: 2em;
}

#favicon {
  width: 70px;
  height: 70px;
}

.icon-center {
  text-align: center;
}
.icon-center .btn {
  background-color: rgba(0, 0, 0, 0);
  padding: 0.5em;
  margin: 2em auto 0;
  max-width: 60%;
}

.modal {
  -webkit-transform: scale(0.5) translateY(30px);
          transform: scale(0.5) translateY(30px);
  -webkit-transform-origin: 0% 0%;
          transform-origin: 0% 0%;
  opacity: 0;
  -webkit-transition: all 0.35s;
  transition: all 0.35s;
}
.modal.show {
  -webkit-transform: scale(1) translateY(0);
          transform: scale(1) translateY(0);
  opacity: 1;
}

.w50 {
  width: 50%;
}

td, th {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

td, .indent {
  padding-left: 1.5em !important;
}

.row-space-bottom > td {
  padding-bottom: 2.5em !important;
}

#footer {
  background-color: black;
  padding: 2em;
  width: 100%;
  height: 100%;
  text-align: center;
}
#footer h2 {
  margin: 0;
}
#footer .row {
  margin-bottom: 0;
}

#special-details {
  margin: 0 0 1em 0;
}

@media (max-width: 900px) {
  #mobile-hide {
    display: none;
  }
  #main-content, .container {
    width: 100%;
    padding: 0.5rem;
  }
  #favicon {
    width: 50px;
    height: 50px;
  }
  #hero-section h2 {
    font-size: 170%;
    text-align: left;
  }
  h1 {
    font-size: 350%;
  }
  h2 {
    font-size: 300%;
    text-align: center;
  }
  table {
    font-size: small;
  }
  #footer .col-2 {
    width: 50%;
  }
  iframe {
    width: 100% !important;
    height: 100%;
  }
  .modal-content {
    margin: 0 auto;
  }
  .mobile-view {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 100%;
  }
  .mobile-view .col {
    max-width: 90%;
    margin: 0 auto;
    --bs-gutter-y: 1rem;
    padding-top: calc(var(--bs-gutter-y) * 0.5);
    padding-bottom: calc(var(--bs-gutter-y) * 0.5);
  }
  .mobile-view #special-details {
    margin: 0 auto;
  }
  .mobile-view embed {
    scale: 0.1;
  }
  .mobile-view .modal-content {
    width: 90% !important;
    height: 100% !important;
    margin: 0 auto;
  }
  .mobile-view .modal-content embed {
    width: 100%;
  }
  .mobile-view iframe {
    position: absolute;
    width: 100% !important;
    height: 100% !important;
  }
  .mobile-view#articulate #modal_1 .modal-body, .mobile-view#articulate #modal_2 .modal-body {
    height: 600px;
    padding: 0 !important;
  }
}#stars-background {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: 100vh;
  background: radial-gradient(ellipse at bottom, #0d1d31 0%, #0c0d13 100%);
  overflow: hidden;
}

.stars {
  position: fixed;
  top: 0;
  left: 0;
  width: 120%;
  height: 120%;
  margin-left: 20em;
  -webkit-transform: rotate(354deg);
          transform: rotate(354deg);
  z-index: -1;
}

.star {
  --star-color: var(--primary-color);
  --star-tail-length: 6em;
  --star-tail-height: 2px;
  --star-width: calc(var(--star-tail-length) / 6);
  --fall-duration: 9s;
  --tail-fade-duration: var(--fall-duration);
  position: absolute;
  top: var(--top-offset);
  left: 0;
  width: var(--star-tail-length);
  height: var(--star-tail-height);
  color: var(--star-color);
  background: linear-gradient(45deg, currentColor, transparent);
  border-radius: 50%;
  -webkit-filter: drop-shadow(0 0 6px currentColor);
          filter: drop-shadow(0 0 6px currentColor);
  -webkit-transform: translate3d(104em, 0, 0);
          transform: translate3d(104em, 0, 0);
  -webkit-animation: fall var(--fall-duration) var(--fall-delay) linear infinite, tail-fade var(--tail-fade-duration) var(--fall-delay) ease-out infinite;
          animation: fall var(--fall-duration) var(--fall-delay) linear infinite, tail-fade var(--tail-fade-duration) var(--fall-delay) ease-out infinite;
}
@media screen and (max-width: 1080px) {
  .star {
    -webkit-animation: fall var(--fall-duration) var(--fall-delay) linear infinite;
            animation: fall var(--fall-duration) var(--fall-delay) linear infinite;
  }
}
.star:nth-child(1) {
  --star-tail-length: 5.49em;
  --top-offset: 73.96vh;
  --fall-duration: 6.269s;
  --fall-delay: 8.274s;
}
.star:nth-child(2) {
  --star-tail-length: 6.5em;
  --top-offset: 61.89vh;
  --fall-duration: 7.533s;
  --fall-delay: 8.111s;
}
.star:nth-child(3) {
  --star-tail-length: 7.14em;
  --top-offset: 82.77vh;
  --fall-duration: 10.417s;
  --fall-delay: 7.454s;
}
.star:nth-child(4) {
  --star-tail-length: 6.98em;
  --top-offset: 71.35vh;
  --fall-duration: 10.514s;
  --fall-delay: 9.147s;
}
.star:nth-child(5) {
  --star-tail-length: 7.45em;
  --top-offset: 99.38vh;
  --fall-duration: 10.986s;
  --fall-delay: 3.778s;
}
.star:nth-child(6) {
  --star-tail-length: 6.23em;
  --top-offset: 20.68vh;
  --fall-duration: 6.756s;
  --fall-delay: 3.404s;
}
.star:nth-child(7) {
  --star-tail-length: 6.03em;
  --top-offset: 2.91vh;
  --fall-duration: 9.271s;
  --fall-delay: 2.193s;
}
.star:nth-child(8) {
  --star-tail-length: 5.89em;
  --top-offset: 80.14vh;
  --fall-duration: 11.705s;
  --fall-delay: 7.955s;
}
.star:nth-child(9) {
  --star-tail-length: 6.71em;
  --top-offset: 61.79vh;
  --fall-duration: 11.072s;
  --fall-delay: 8.702s;
}
.star:nth-child(10) {
  --star-tail-length: 6.97em;
  --top-offset: 54.23vh;
  --fall-duration: 11.962s;
  --fall-delay: 2.44s;
}
.star:nth-child(11) {
  --star-tail-length: 7.12em;
  --top-offset: 47.4vh;
  --fall-duration: 8.01s;
  --fall-delay: 1.599s;
}
.star:nth-child(12) {
  --star-tail-length: 6.09em;
  --top-offset: 45.73vh;
  --fall-duration: 11.343s;
  --fall-delay: 9.13s;
}
.star:nth-child(13) {
  --star-tail-length: 5.12em;
  --top-offset: 48.92vh;
  --fall-duration: 11.961s;
  --fall-delay: 6.446s;
}
.star:nth-child(14) {
  --star-tail-length: 6.31em;
  --top-offset: 33.68vh;
  --fall-duration: 9.274s;
  --fall-delay: 5.074s;
}
.star:nth-child(15) {
  --star-tail-length: 6.2em;
  --top-offset: 91.79vh;
  --fall-duration: 7.284s;
  --fall-delay: 2.132s;
}
.star:nth-child(16) {
  --star-tail-length: 6.86em;
  --top-offset: 91.63vh;
  --fall-duration: 11.225s;
  --fall-delay: 8.158s;
}
.star:nth-child(17) {
  --star-tail-length: 7.07em;
  --top-offset: 2.21vh;
  --fall-duration: 10.821s;
  --fall-delay: 3.63s;
}
.star:nth-child(18) {
  --star-tail-length: 6.03em;
  --top-offset: 95.94vh;
  --fall-duration: 11.116s;
  --fall-delay: 2.65s;
}
.star:nth-child(19) {
  --star-tail-length: 5.02em;
  --top-offset: 81.48vh;
  --fall-duration: 8.428s;
  --fall-delay: 8.154s;
}
.star:nth-child(20) {
  --star-tail-length: 7.23em;
  --top-offset: 38.38vh;
  --fall-duration: 10.105s;
  --fall-delay: 6.115s;
}
.star:nth-child(21) {
  --star-tail-length: 6.95em;
  --top-offset: 89.8vh;
  --fall-duration: 9.601s;
  --fall-delay: 8.267s;
}
.star:nth-child(22) {
  --star-tail-length: 7.06em;
  --top-offset: 22.63vh;
  --fall-duration: 12s;
  --fall-delay: 2.241s;
}
.star:nth-child(23) {
  --star-tail-length: 7.22em;
  --top-offset: 39.07vh;
  --fall-duration: 11.821s;
  --fall-delay: 0.472s;
}
.star:nth-child(24) {
  --star-tail-length: 5.76em;
  --top-offset: 63.38vh;
  --fall-duration: 9.919s;
  --fall-delay: 7.348s;
}
.star:nth-child(25) {
  --star-tail-length: 7.37em;
  --top-offset: 8.31vh;
  --fall-duration: 7.567s;
  --fall-delay: 2.112s;
}
.star:nth-child(26) {
  --star-tail-length: 7.12em;
  --top-offset: 67.23vh;
  --fall-duration: 10.648s;
  --fall-delay: 4.013s;
}
.star:nth-child(27) {
  --star-tail-length: 6.38em;
  --top-offset: 29.71vh;
  --fall-duration: 11.093s;
  --fall-delay: 7.206s;
}
.star:nth-child(28) {
  --star-tail-length: 7.33em;
  --top-offset: 18.78vh;
  --fall-duration: 8.798s;
  --fall-delay: 8.281s;
}
.star:nth-child(29) {
  --star-tail-length: 6.66em;
  --top-offset: 45.61vh;
  --fall-duration: 8.279s;
  --fall-delay: 1.216s;
}
.star:nth-child(30) {
  --star-tail-length: 6.14em;
  --top-offset: 0.19vh;
  --fall-duration: 8.877s;
  --fall-delay: 2.91s;
}
.star:nth-child(31) {
  --star-tail-length: 5.68em;
  --top-offset: 42.57vh;
  --fall-duration: 7.09s;
  --fall-delay: 8.192s;
}
.star:nth-child(32) {
  --star-tail-length: 6.38em;
  --top-offset: 7.53vh;
  --fall-duration: 8.301s;
  --fall-delay: 2.609s;
}
.star:nth-child(33) {
  --star-tail-length: 6.97em;
  --top-offset: 43.67vh;
  --fall-duration: 11.205s;
  --fall-delay: 5.986s;
}
.star:nth-child(34) {
  --star-tail-length: 6.81em;
  --top-offset: 85.83vh;
  --fall-duration: 6.989s;
  --fall-delay: 3.813s;
}
.star:nth-child(35) {
  --star-tail-length: 5.34em;
  --top-offset: 42.83vh;
  --fall-duration: 7.44s;
  --fall-delay: 4.58s;
}
.star:nth-child(36) {
  --star-tail-length: 6.98em;
  --top-offset: 97.08vh;
  --fall-duration: 6.091s;
  --fall-delay: 0.641s;
}
.star:nth-child(37) {
  --star-tail-length: 6.76em;
  --top-offset: 21.17vh;
  --fall-duration: 10.445s;
  --fall-delay: 4.343s;
}
.star:nth-child(38) {
  --star-tail-length: 5.86em;
  --top-offset: 51.82vh;
  --fall-duration: 9.251s;
  --fall-delay: 9.652s;
}
.star:nth-child(39) {
  --star-tail-length: 5.63em;
  --top-offset: 6.05vh;
  --fall-duration: 10.544s;
  --fall-delay: 1.966s;
}
.star:nth-child(40) {
  --star-tail-length: 5.94em;
  --top-offset: 90.44vh;
  --fall-duration: 10.632s;
  --fall-delay: 1.223s;
}
.star:nth-child(41) {
  --star-tail-length: 6.33em;
  --top-offset: 32.18vh;
  --fall-duration: 6.82s;
  --fall-delay: 3.35s;
}
.star:nth-child(42) {
  --star-tail-length: 5.79em;
  --top-offset: 8.81vh;
  --fall-duration: 11.486s;
  --fall-delay: 8.556s;
}
.star:nth-child(43) {
  --star-tail-length: 5.71em;
  --top-offset: 89.94vh;
  --fall-duration: 11.546s;
  --fall-delay: 8.7s;
}
.star:nth-child(44) {
  --star-tail-length: 5.17em;
  --top-offset: 82.07vh;
  --fall-duration: 6.75s;
  --fall-delay: 8.213s;
}
.star:nth-child(45) {
  --star-tail-length: 6.77em;
  --top-offset: 7.35vh;
  --fall-duration: 8.356s;
  --fall-delay: 8.382s;
}
.star:nth-child(46) {
  --star-tail-length: 7.41em;
  --top-offset: 24.42vh;
  --fall-duration: 6.93s;
  --fall-delay: 4.271s;
}
.star:nth-child(47) {
  --star-tail-length: 5.65em;
  --top-offset: 73.31vh;
  --fall-duration: 9.958s;
  --fall-delay: 5.571s;
}
.star:nth-child(48) {
  --star-tail-length: 5.37em;
  --top-offset: 3.1vh;
  --fall-duration: 9.975s;
  --fall-delay: 0.816s;
}
.star:nth-child(49) {
  --star-tail-length: 6.04em;
  --top-offset: 96.99vh;
  --fall-duration: 9.881s;
  --fall-delay: 1.109s;
}
.star:nth-child(50) {
  --star-tail-length: 7.18em;
  --top-offset: 12.68vh;
  --fall-duration: 6.283s;
  --fall-delay: 7.588s;
}
.star::before, .star::after {
  position: absolute;
  content: "";
  top: 0;
  left: calc(var(--star-width) / -2);
  width: var(--star-width);
  height: 100%;
  background: linear-gradient(45deg, transparent, currentColor, transparent);
  border-radius: inherit;
  -webkit-animation: blink 2s linear infinite;
          animation: blink 2s linear infinite;
}
.star::before {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.star::after {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

@-webkit-keyframes fall {
  to {
    -webkit-transform: translate3d(-30em, 0, 0);
            transform: translate3d(-30em, 0, 0);
  }
}

@keyframes fall {
  to {
    -webkit-transform: translate3d(-30em, 0, 0);
            transform: translate3d(-30em, 0, 0);
  }
}
@-webkit-keyframes tail-fade {
  0%, 50% {
    width: var(--star-tail-length);
    opacity: 1;
  }
  70%, 80% {
    width: 0;
    opacity: 0.4;
  }
  100% {
    width: 0;
    opacity: 0;
  }
}
@keyframes tail-fade {
  0%, 50% {
    width: var(--star-tail-length);
    opacity: 1;
  }
  70%, 80% {
    width: 0;
    opacity: 0.4;
  }
  100% {
    width: 0;
    opacity: 0;
  }
}
@-webkit-keyframes blink {
  50% {
    opacity: 0.6;
  }
}
@keyframes blink {
  50% {
    opacity: 0.6;
  }
}
    </style><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/09da3df8e6.js" crossorigin="anonymous"></script>
  </head>
  <body><nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div id="test" class="navbar-nav">
<a class="nav-link scroll-target" href="#portfolio">Portfolio</a>
<a class="nav-link scroll-target" href="#resume">Resume</a>
<a class="nav-link scroll-target" href="#contact">Contact</a>
</div>
</div>
</div>
</nav>
    <div id="main-content">
      <div id="overlay">
        <div class="container">
          <div class="row" id="hero-section">
            <div class="col">
              <h1>RJ Valencia<a href="https://www.linkedin.com/in/richard-rj-valencia/" target="_blank"><img id="hero-img" src="img\hero-img2.JPG"></a></h1>
              <hr>
              <h2>
                 The name’s Richard Valencia, but please call me RJ! </h2>
              <div class="indent">
                <h2> <a class="scroll-target" href="#portfolio"><em>instructional designer,</em></a> <br><a class="scroll-target" href="#resume"><em>front-end web developer,</em></a><br><a class="scroll-target" href="#voiceover"><em>and aspiring voiceover artist.</em> </a> </h2>
              </div>
            </div>
          </div>
          <div class="row icon-center">
            <button class="btn btn-primary col"><a class="nav-link scroll-target" href="#portfolio"><i class="fas fa-angle-double-down fa-3x"></i></a></button>
          </div><br><br><br><br>
          <div id="portfolio">
            <div class="row">
              <div class="col-12">
                <h2>Portfolio</h2>
                <hr>
              </div>
            </div>
            <div class="row mobile-view" id="articulate">
              <div class="subtitle col-12">
                <h3>Articulate Storyline 360</h3>
              </div>
              <div class="col">
                <div class="card">
                  <div class="card-body"> </div>
                  <h5 class="card-title">Basics to Music</h5>
                  <button class="card-text mt-auto" data-bs-toggle="modal" data-bs-target="#modal_10">More Details...  <i class="fas fa-chevron-right fa-xs"></i></button><a href="https://valencia-portfolio-items.s3.eu-north-1.amazonaws.com/Articulate+360/Valencia_BasicsToMusic_ver2+-+Storyline+output/story.html" target="_blank">
                    <button class="btn btn-primary">Click Here to View</button></a>
                </div>
                <div class="modal" id="modal_10" tabindex="-1" role="dialog">
                  <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h5 class="modal-title">Basics of Music - Details</h5>
                        <button class="close" type="button" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                      </div>
                      <div class="modal-body anno">
                        <h6><em>Context</em>
                          <p class="indent">This class assignment had us follow the whole instructional design process using the ADDIE model. I used Articulate 360 to create the lesson, implementing the work prior to determine the design.</p>
                        </h6>
                        <h6><em>Conditions</em> 
                          <p class="indent">This was the culmination of a semester's work. Prior to this, we conducted front-end analysis of the topic, audience and context, deconstructed the topic's subordinate skills and entry behavior, and created assessment and evaluation methods.</p>
                        </h6>
                        <h6><em>Scope</em> 
                          <p class="indent">This was the first time I used Storyline 360, which I utilized the variable, triggers, and quiz pool functionality. I also created vector assets using Adobe Illustrator for the music symbols, as well as provided the voiceover.</p>
                        </h6>
                        <h6><em>Role</em> 
                          <p class="indent">Solo work; completed analysis, design and development.</p>
                        </h6>
                        <h6><em>Displayed Competencies</em> 
                          <ul>
                            <li>Analysis Skills</li>
                            <ul>
                              <li>Analyze learning and performance problems to recommend appropriate solutions. </li>
                              <li>Determine subordinate and prerequisite knowledge and skills. </li>
                            </ul>
                            <li>Design Skills
                              <ul>
                                <li>Apply learning theory and systems thinking to design practice.</li>
                                <li>Identify the scope and sequence for instructional solutions.</li>
                                <li>Use visual design principles appropriately.</li>
                                <li>Align outcomes, strategies, and assessments.</li>
                                <li>Generate appropriate instructional strategies and activities.</li>
                              </ul>
                            </li>
                            <li>Technology and Media Skills
                              <ul>
                                <li>Develop instructional materials using a variety of media (interactive activities, audio-visual).</li>
                                <li>Develop and use web-based instruction/e-learning tools.</li>
                              </ul>
                            </li>
                          </ul>
                        </h6>
                      </div>
                      <div class="modal-footer">
                        <button class="btn btn-secondary" type="button" data-bs-dismiss="modal">Close</button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col">
                <div class="card">
                  <div class="card-body"> </div>
                  <h5 class="card-title">Music Clefs</h5>
                  <button class="card-text mt-auto" data-bs-toggle="modal" data-bs-target="#modal_11">More Details...  <i class="fas fa-chevron-right fa-xs"></i></button><a href="https://valencia-portfolio-items.s3.eu-north-1.amazonaws.com/Articulate+360/Valencia_MusicClefs+-+Storyline+output/story.html" target="_blank">
                    <button class="btn btn-primary">Click Here to View</button></a>
                </div>
                <div class="modal" id="modal_2" tabindex="-1" role="dialog">
                  <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h5 class="modal-title">Music Clefs</h5>
                        <button class="close" type="button" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                      </div>
                      <div class="modal-body"><iframe id="pause-target-2" src="..\portfolio\Articulate 360\Valencia_MusicClefs - Storyline output\Valencia_MusicClefs - Storyline output\story.html" width="1000" height="658"></iframe></div>
                      <div class="modal-footer">
                        <button class="btn btn-secondary" type="button" data-bs-dismiss="modal">Close</button>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="modal" id="modal_11" tabindex="-1" role="dialog">
                  <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h5 class="modal-title">Music Clefs - Details</h5>
                        <button class="close" type="button" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                      </div>
                      <div class="modal-body anno">
                        <h6><em>Context</em>
                          <p class="indent">This class assignment had us create a simple lesson using a technology of our choosing. I selected Articulate Storyline 360 to further improve my skills. </p>
                        </h6>
                        <h6><em>Conditions</em> 
                          <p class="indent">For this, I decided to focus on making the development process simpler, as well as focus on better visual design and usability. I also provided the voiceover for this project as well.</p>
                        </h6>
                        <h6><em>Scope</em> 
                          <p class="indent">Final product; I reedited some of the triggers to make the lesson more user-friendly.</p>
                        </h6>
                        <h6><em>Role</em> 
                          <p class="indent">Solo work; designed and developed. Provided voiceover.</p>
                        </h6>
                        <h6><em>Displayed Competencies</em> 
                          <ul>
                            <li>Design Skills
                              <ul>
                                <li>Apply learning theory and systems thinking to design practice.</li>
                                <li>Use visual design principles appropriately.</li>
                              </ul>
                            </li>
                            <li>Technology and Media Skills
                              <ul>
                                <li>Develop instructional materials using a variety of media (interactive activities, audio-visual).</li>
                                <li>Develop and use web-based instruction/e-learning tools.</li>
                              </ul>
                            </li>
                          </ul>
                        </h6>
                      </div>
                      <div class="modal-footer">
                        <button class="btn btn-secondary" type="button" data-bs-dismiss="modal">Close</button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="row mobile-view">
              <div class="subtitle col-12">
                <h3>Instructional Documents</h3>
              </div>
              <div class="col">
                <div class="card">
                  <div class="card-body"> </div>
                  <h5 class="card-title">eBook - The school drummer's manual</h5>
                  <button class="card-text mt-auto" data-bs-toggle="modal" data-bs-target="#modal_12">More Details...  <i class="fas fa-chevron-right fa-xs"></i></button><a href="https://valencia-portfolio-items.s3.eu-north-1.amazonaws.com/Instructional+Documents/Valencia_eBook.pdf" target="_blank">
                    <button class="btn btn-primary">Click Here to View</button></a>
                </div>
                <div class="modal" id="modal_3" tabindex="-1" role="dialog">
                  <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h5 class="modal-title">eBook - The school drummer's mannual</h5>
                        <button class="close" type="button" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                      </div>
                      <div class="modal-body"><embed src="..\portfolio\Instructional Documents\Valencia_eBook.pdf#toolbar=0" type="application/pdf" width="1000" height="658"></div>
                      <div class="modal-footer">
                        <button class="btn btn-secondary" type="button" data-bs-dismiss="modal">Close</button>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="modal" id="modal_12" tabindex="-1" role="dialog">
                  <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h5 class="modal-title">eBook - The school drummer's manual - Details</h5>
                        <button class="close" type="button" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                      </div>
                      <div class="modal-body anno">
                        <h6><em>Context</em>
                          <p class="indent">For a class assignment, we had to design an ebook using existing content, in which we provide more interactivity such as hyperlinks to specific resources or knowledge checks within the book. I decided to use an old percussion book, and focused on embedding resources and video demonstrations to make the content more applicable and approachable. </p>
                        </h6>
                        <h6><em>Conditions</em> 
                          <p class="indent">I used Adobe InDesign (first time using) to create the ebook.</p>
                        </h6>
                        <h6><em>Scope</em> 
                          <p class="indent">Final product; school assignment.</p>
                        </h6>
                        <h6><em>Role</em> 
                          <p class="indent">Solo work; designed and developed.</p>
                        </h6>
                        <h6><em>Displayed Competencies</em> 
                          <ul>
                            <li>Design Skills
                              <ul>
                                <li>Apply learning theory and systems thinking to design practice.</li>
                                <li>Use visual design principles appropriately.</li>
                              </ul>
                            </li>
                            <li>Technology and Media Skills
                              <ul>
                                <li>Develop instructional materials using a variety of media.</li>
                                <li>Use technology tools in the design process.</li>
                                <li>Develop and use web-based instruction/e-learning tools.</li>
                              </ul>
                            </li>
                          </ul>
                        </h6>
                      </div>
                      <div class="modal-footer">
                        <button class="btn btn-secondary" type="button" data-bs-dismiss="modal">Close</button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col">
                <div class="card">
                  <div class="card-body"> </div>
                  <h5 class="card-title">How to Read HTML</h5>
                  <button class="card-text mt-auto" data-bs-toggle="modal" data-bs-target="#modal_13">More Details...  <i class="fas fa-chevron-right fa-xs"></i></button><a href="https://valencia-portfolio-items.s3.eu-north-1.amazonaws.com/Instructional+Documents/Valencia_How+to+Read+HTML.pdf" target="_blank">
                    <button class="btn btn-primary">Click Here to View</button></a>
                </div>
                <div class="modal" id="modal_4" tabindex="-1" role="dialog">
                  <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h5 class="modal-title">How to Read HTML</h5>
                        <button class="close" type="button" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                      </div>
                      <div class="modal-body"><embed src="..\portfolio\Instructional Documents\Valencia_How to Read HTML.pdf#toolbar=0" width="1000" height="658"></div>
                      <div class="modal-footer">
                        <button class="btn btn-secondary" type="button" data-bs-dismiss="modal">Close</button>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="modal" id="modal_13" tabindex="-1" role="dialog">
                  <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h5 class="modal-title">How to Read HTML - Details</h5>
                        <button class="close" type="button" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                      </div>
                      <div class="modal-body anno">
                        <h6><em>Context</em>
                          <p class="indent">This was for assignment to make an infographic that served as a effective job aid. The design choice I am most proud of is the "Grammar" and "Basic Structure for a Webpage", for I made each element a specific color in so the "Grammar" could be used as a tool to decipher the example in the "Basic Structure for a Webpage" section.</p>
                        </h6>
                        <h6><em>Conditions</em> 
                          <p class="indent">For this, I used Canva to create the infographic, and utilized my Information Technology skills to provide the context. The focus is a basic introduction to HTML, providing what it is, how it's used, an example, and vocabulary for foundational understanding.</p>
                        </h6>
                        <h6><em>Scope</em> 
                          <p class="indent">Final draft.</p>
                        </h6>
                        <h6><em>Role</em> 
                          <p class="indent">Solo work; designed and developed.</p>
                        </h6>
                        <h6><em>Displayed Competencies</em> 
                          <ul>
                            <li>Design Skills
                              <ul>
                                <li>Apply learning theory and systems thinking to design practice.</li>
                                <li>Use visual design principles appropriately.</li>
                              </ul>
                            </li>
                            <li>Technology and Media Skills
                              <ul>
                                <li>Use technology tools in the design process.</li>
                              </ul>
                            </li>
                          </ul>
                        </h6>
                      </div>
                      <div class="modal-footer">
                        <button class="btn btn-secondary" type="button" data-bs-dismiss="modal">Close</button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col">
                <div class="card">
                  <div class="card-body"> </div>
                  <h5 class="card-title">Tenor Drums Easy Guide</h5>
                  <button class="card-text mt-auto" data-bs-toggle="modal" data-bs-target="#modal_14">More Details...  <i class="fas fa-chevron-right fa-xs"></i></button><a href="https://valencia-portfolio-items.s3.eu-north-1.amazonaws.com/Instructional+Documents/ValenciaRichard_JobAid.pdf" target="_blank">
                    <button class="btn btn-primary">Click Here to View</button></a>
                </div>
                <div class="modal" id="modal_5" tabindex="-1" role="dialog">
                  <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h5 class="modal-title">Tenor Drums Easy Guide</h5>
                        <button class="close" type="button" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                      </div>
                      <div class="modal-body"><embed src="..\portfolio\Instructional Documents\ValenciaRichard_JobAid.pdf#toolbar=0" width="1000" height="658"></div>
                      <div class="modal-footer">
                        <button class="btn btn-secondary" type="button" data-bs-dismiss="modal">Close</button>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="modal" id="modal_14" tabindex="-1" role="dialog">
                  <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h5 class="modal-title">Tenor Drums Easy Guide - Details</h5>
                        <button class="close" type="button" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                      </div>
                      <div class="modal-body anno">
                        <h6><em>Context</em>
                          <p class="indent">This class assignment had us make a simple job aid using a Word document. The topic of my job aid is how to play the tenor drums, focusing on what tenor drums are, how to play, and emphasizing specific techniques needed to play the instrument. </p>
                        </h6>
                        <h6><em>Conditions</em> 
                          <p class="indent">The drums were created using Word's shapes function. I decided to utilize Adobe Illustrator to create vector assets for the document; I created the drummers' hands in that software.</p>
                        </h6>
                        <h6><em>Scope</em> 
                          <p class="indent">Final product.</p>
                        </h6>
                        <h6><em>Role</em> 
                          <p class="indent">Solo work; designed and developed.</p>
                        </h6>
                        <h6><em>Displayed Competencies</em> 
                          <ul>
                            <li>Design Skills
                              <ul>
                                <li>Apply learning theory and systems thinking to design practice.</li>
                                <li>Use visual design principles appropriately.</li>
                              </ul>
                            </li>
                            <li>Technology and Media Skills
                              <ul>
                                <li>Use technology tools in the design process.</li>
                              </ul>
                            </li>
                          </ul>
                        </h6>
                      </div>
                      <div class="modal-footer">
                        <button class="btn btn-secondary" type="button" data-bs-dismiss="modal">Close</button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="row mobile-view">
              <div class="subtitle col-12">
                <h3>Tribecca - Using Canva</h3>
              </div>
              <div class="col-12">
                <button class="card-text" id="special-details" data-bs-toggle="modal" data-bs-target="#modal_15">More Details...  <i class="fas fa-chevron-right fa-xs"></i></button>
                <div class="modal" id="modal_15" tabindex="-1" role="dialog">
                  <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h5 class="modal-title">Tribecca - Details</h5>
                        <button class="close" type="button" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                      </div>
                      <div class="modal-body anno">
                        <h6><em>Context</em>
                          <p class="indent">When I interned for Tribecca Language in early 2021, I was tasked with creating worksheets from a given curriculum. These worksheets were designed for young children (ages 3-7), and developed using Canva. These worksheets focus on giving information, as well as providing activities to apply that said information. I created at least 100 worksheets using the given template. </p>
                        </h6>
                        <h6><em>Conditions</em> 
                          <p class="indent">The worksheet were developed halfway in the internship; it took about a month and a half to complete all the worksheets. I worked with the director to understand for the format and content of the worksheets.</p>
                        </h6>
                        <h6><em>Scope</em> 
                          <p class="indent">The format of the worksheets were based on past templates of Tribecca Language worksheets, but were revamped by me. These were the final draft to be used.</p>
                        </h6>
                        <h6><em>Role</em> 
                          <p class="indent">Solo work; designed and developed.</p>
                        </h6>
                        <h6><em>Displayed Competencies</em> 
                          <ul>
                            <li>Design Skills
                              <ul>
                                <li>Apply learning theory and systems thinking to design practice.</li>
                                <li>Use visual design principles appropriately.</li>
                                <li>Identify the scope and sequence for instructional solutions.</li>
                                <li>Provide a rationale for design decisions.</li>
                              </ul>
                            </li>
                            <li>Technology and Media Skills
                              <ul>
                                <li>Select and use appropriate technology and media for specific outcomes. </li>
                                <li>Use technology tools in the design process.</li>
                              </ul>
                            </li>
                            <li>Personal & Interpersonal Skills
                              <ul> 
                                <li>Collaborate effectively with others.</li>
                                <li>Received constructive feedback.</li>
                                <li>Build positive relationships with manager.</li>
                              </ul>
                            </li>
                          </ul>
                        </h6>
                      </div>
                      <div class="modal-footer">
                        <button class="btn btn-secondary" type="button" data-bs-dismiss="modal">Close</button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col">
                <div class="card">
                  <div class="card-body"> </div>
                  <h5 class="card-title">Clothes - Japanese</h5><a href="https://valencia-portfolio-items.s3.eu-north-1.amazonaws.com/Tribecca+-+Using+Canva/Clothes+-+Japanese.pdf" target="_blank">
                    <button class="btn btn-primary mt-auto">Click Here to View</button></a>
                </div>
                <div class="modal" id="modal_6" tabindex="-1" role="dialog">
                  <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h5 class="modal-title">Clothes - Japanese</h5>
                        <button class="close" type="button" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                      </div>
                      <div class="modal-body"><embed src="..\portfolio\Tribecca - Using Canva\Clothes - Japanese.pdf#toolbar=0" width="1000" height="658"></div>
                      <div class="modal-footer">
                        <button class="btn btn-secondary" type="button" data-bs-dismiss="modal">Close</button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col">
                <div class="card">
                  <div class="card-body"> </div>
                  <h5 class="card-title">Clothes - Spanish</h5><a href="https://valencia-portfolio-items.s3.eu-north-1.amazonaws.com/Tribecca+-+Using+Canva/Clothes+-+Spanish.pdf" target="_blank">
                    <button class="btn btn-primary mt-auto">Click Here to View</button></a>
                </div>
                <div class="modal" id="modal_7" tabindex="-1" role="dialog">
                  <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h5 class="modal-title">Clothes - Spanish</h5>
                        <button class="close" type="button" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                      </div>
                      <div class="modal-body"><embed src="..\portfolio\Tribecca - Using Canva\Clothes - Spanish.pdf#toolbar=0" width="1000" height="658"></div>
                      <div class="modal-footer">
                        <button class="btn btn-secondary" type="button" data-bs-dismiss="modal">Close</button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col">
                <div class="card">
                  <div class="card-body"> </div>
                  <h5 class="card-title">Winter Clothes - Japanese</h5><a href="https://valencia-portfolio-items.s3.eu-north-1.amazonaws.com/Tribecca+-+Using+Canva/Winter+Clothes+-+Japanese.pdf" target="_blank">
                    <button class="btn btn-primary mt-auto">Click Here to View</button></a>
                </div>
                <div class="modal" id="modal_8" tabindex="-1" role="dialog">
                  <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h5 class="modal-title">Winter Clothes - Japanese</h5>
                        <button class="close" type="button" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                      </div>
                      <div class="modal-body"><embed src="..\portfolio\Tribecca - Using Canva\Winter Clothes - Japanese.pdf#toolbar=0" width="1000" height="658"></div>
                      <div class="modal-footer">
                        <button class="btn btn-secondary" type="button" data-bs-dismiss="modal">Close</button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col">
                <div class="card">
                  <div class="card-body"> </div>
                  <h5 class="card-title">Winter Clothes - Spanish</h5><a href="https://valencia-portfolio-items.s3.eu-north-1.amazonaws.com/Tribecca+-+Using+Canva/Winter+Clothes+-+Spanish.pdf" target="_blank">
                    <button class="btn btn-primary mt-auto">Click Here to View</button></a>
                </div>
                <div class="modal" id="modal_9" tabindex="-1" role="dialog">
                  <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h5 class="modal-title">Winter Clothes - Spanish</h5>
                        <button class="close" type="button" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                      </div>
                      <div class="modal-body"><embed src="..\portfolio\Tribecca - Using Canva\Winter Clothes - Spanish.pdf#toolbar=0" width="1000" height="658"></div>
                      <div class="modal-footer">
                        <button class="btn btn-secondary" type="button" data-bs-dismiss="modal">Close</button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="row mobile-view" id="voiceover">
              <div class="subtitle col-12">
                <h3>Videos (Adobe Premiere and Voiceover)</h3>
              </div>
              <div class="col">
                <div class="card">
                  <div class="card-body"> </div>
                  <h5 class="card-title">Case 15 - Gap Inc.</h5>
                  <button class="card-text" data-bs-toggle="modal" data-bs-target="#modal_19">More Details...  <i class="fas fa-chevron-right fa-xs"></i></button><a class="btn btn-primary" href="https://youtu.be/QPAzw43cnYM" target="_blank">Click Here to View</a>
                </div>
                <div class="modal" id="modal_19" tabindex="-1" role="dialog">
                  <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h5 class="modal-title">Case 15 - Gap Inc. - Details</h5>
                        <button class="close" type="button" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                      </div>
                      <div class="modal-body anno">
                        <h6><em>Context</em>
                          <p class="indent">This class assignment was a group project, in which we need to presented a evaluation case study in an organized manner that makes the information digestible. As a group, we decided to make a video that utilized voiceover and slides. </p>
                        </h6>
                        <h6><em>Conditions</em> 
                          <p class="indent">This assignment was due early in the semester, so the biggest hurdle was working with a new team. We quickly worked together to manage meetings, and coordinate how we would approach the assignment.</p>
                        </h6>
                        <h6><em>Scope</em> 
                          <p class="indent">Final product. I used an Audio-Technica AT4040 microphone to record the voiceovers, and Adobe Premiere to combine the visual and audio files.</p>
                        </h6>
                        <h6><em>Role</em> 
                          <p class="indent">I was responsible for writing the script and providing the voiceover. My teammates were responsible for reviewing the complete draft of the script and the visuals (utilizing Canva).</p>
                        </h6>
                        <h6><em>Displayed Competencies</em> 
                          <ul>
                            <li>Communication Skills
                              <ul>
                                <li>Facilitate meetings to achieve agenda and goals.</li>
                                <li>Use appropriate tools to communicate with learners, clients, and other stakeholders.</li>
                                <li>Practice active listening.</li>
                              </ul>
                            </li>
                            <li>Technology and Media Skills
                              <ul>
                                <li>Select and use appropriate technology and media for specific outcomes. </li>
                                <li>Use technology tools in the design process.</li>
                              </ul>
                            </li>
                            <li>Personal & Interpersonal Skills
                              <ul> 
                                <li>Collaborate effectively with others.</li>
                                <li>Give and receive constructive feedback</li>
                                <li>Build positive relationships with team members, clients, and other stakeholders</li>
                                <li>Recognize and accommodate individual and cultural differences.</li>
                              </ul>
                            </li>
                          </ul>
                        </h6>
                      </div>
                      <div class="modal-footer">
                        <button class="btn btn-secondary" type="button" data-bs-dismiss="modal">Close</button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col">
                <div class="card">
                  <div class="card-body"> </div>
                  <h5 class="card-title">How to Make Flan</h5>
                  <button class="card-text" data-bs-toggle="modal" data-bs-target="#modal_20">More Details...  <i class="fas fa-chevron-right fa-xs"></i></button><a class="btn btn-primary" href="https://youtu.be/T4Du_aPvoVQ" target="_blank">Click Here to View</a>
                </div>
              </div>
              <div class="modal" id="modal_20" tabindex="-1" role="dialog">
                <div class="modal-dialog modal-dialog-centered" role="document">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title">How to Make Flan - Details</h5>
                      <button class="close" type="button" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    </div>
                    <div class="modal-body anno">
                      <h6><em>Context</em>
                        <p class="indent">This class assignment was to make a video using any software we wanted, and provide a voiceover. I decided make a live-action video of how to make dessert.</p>
                      </h6>
                      <h6><em>Conditions</em> 
                        <p class="indent">I created a script for the voiceover, and created an outline for how the video will be shot. I used a Yeti Pro microphone for the voiceover. I used Adobe Premiere for the first time to combine the audio and visual files.</p>
                      </h6>
                      <h6><em>Scope</em> 
                        <p class="indent">Final product; it is published on YouTube.</p>
                      </h6>
                      <h6><em>Role</em> 
                        <p class="indent">Solo work; designed and developed.</p>
                      </h6>
                      <h6><em>Displayed Competencies</em> 
                        <ul>
                          <li>Design Skills
                            <ul>
                              <li>Apply learning theory and systems thinking to design practice.</li>
                              <li>Use visual design principles appropriately.</li>
                            </ul>
                          </li>
                          <li>Technology and Media Skills
                            <ul>
                              <li>Use technology tools in the design process.</li>
                            </ul>
                          </li>
                        </ul>
                      </h6>
                    </div>
                    <div class="modal-footer">
                      <button class="btn btn-secondary" type="button" data-bs-dismiss="modal">Close</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div id="resume">
            <div class="row">
              <div class="col-12">
                <h2>Resume</h2>
                <hr>
              </div>
            </div><embed id="mobile-hide" src="..\portfolio\Valencia_2023.pdf#toolbar=0" width="100%" height="600">
            <div class="row mobile-view"><a class="btn btn-primary mt-auto" href="../portfolio/Valencia_2023.pdf" download="Valencia_2023.pdf">Click Here to Download <i class="fas fa-file-download"></i></a></div>
          </div>
        </div>
      </div>
    </div>
    <div id="footer">
      <div class="container" id="contact">
        <div class="row">
          <div class="subtitle col-12">
            <h2>Contact</h2>
            <hr>
          </div>
        </div>
        <div class="row icon-center justify-content-center">
          <div class="col-2"><a href="https://www.linkedin.com/in/richard-rj-valencia/" target="_blank"><i class="fab fa-linkedin fa-4x"></i></a></div>
          <div class="col-2"><a href="mailto:valenciar524@gmail.com"><i class="far fa-envelope fa-4x"></i></a></div>
        </div>
        <div class="stars">
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
        </div>
      </div>
    </div>
    <script>
      $("#modal_1").on('hidden.bs.modal', function (e) {
	$("#pause-target-1").attr("src", $("#pause-target-1").attr("src"));
});

$("#modal_2").on('hidden.bs.modal', function (e) {
	$("#pause-target-2").attr("src", $("#pause-target-2").attr("src"));
});$(document).ready(function() {
	$('.scroll-target').on('click', function() {
		$('#overlay').animate({
			opacity: 0,
		}, 1, function() {
			// Animation complete.
		});
		$('#overlay').animate({
			opacity: 1,
		}, 400, function() {
			// Animation complete.
		});
	}); 

});
    </script>
  </body>
</html>