index.html

<!doctype html>
<html lang="ko">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta property="og:title" content="Joona Yoon">
  <meta property="og:description" content="Hi, I'm joonas.">
  <meta property="og:image" content="images/thumbnail.png">
  <meta property="og:url" content="https://www.joonas.io">
  <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
  <!--[if IE]><link rel="shortcut icon" href="images/favicons/favicon.ico"><![endif]-->
  <link rel="icon" type="image/png" href="images/favicons/favicon.png">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
  <link rel="stylesheet" href="assets/css/main.css" />

  <title>Joona Yoon (joonas)</title>
</head>
<body>
  <div id="cursor"></div>
  <div class="sidebar navigator">
    <ul>
      <li><a href="#home"><span class="circle"></span></a></li>
      <li><a href="#career"><span class="circle"></span></a></li>
      <li><a href="#awards"><span class="circle"></span></a></li>
      <li><a href="#skills"><span class="circle"></span></a></li>
      <li><a href="#apps"><span class="circle"></span></a></li>
      <li><a href="#teams"><span class="circle"></span></a></li>
      <li><a href="#footer"><span class="circle"></span></a></li>
    </ul>
  </div>
  <div class="sidebar socials">
    <ul>
      <li>
        <a href="https://www.linkedin.com/in/joona-yoon/" class="icon fa-linkedin alt" target="_blank"><span class="label">LinkedIn</span></a>
      </li>
      <li>
        <a href="https://github.com/joonas-yoon" class="icon fa-github alt" target="_blank"><span class="label">github</span></a>
      </li>
      <li>
        <a href="https://stackoverflow.com/users/13677554/joona-yoon" class="icon fa-stack-overflow alt" target="_blank"><span class="label">stackoverflow</span></a>
      </li>
      <li>
        <a href="mailto:joonas.yoon@gmail.com" class="icon fa-envelope alt" target="_blank"><span class="label">mail</span></a>
      </li>
    </ul>
  </div>
  <div id="top">
    <a class="overlay-button overlay-close">
      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path></svg>
    </a>
    <p class="subjects">
      <a href="#" modal-href="metrics.html" modal-fg="#222" modal-bg="#fff" class="title">About</a>
      <a href="#career" class="title">Career</a>
      <a href="#awards" class="title">Award</a>
      <a href="#skills" class="title">Skill</a>
      <a href="#apps" class="title">Toys</a>
      <a href="#design" class="title">Design</a>
      <!-- dummy for fill -->
      <a href="#" modal-href="metrics.html" modal-fg="#222" modal-bg="#fff" class="title">About</a><a href="#career" class="title">Career</a><a href="#awards" class="title">Award</a><a href="#skills" class="title">Skill</a><a href="#toys" class="title">Toys</a><a href="#design" class="title">Design</a><a href="#" modal-href="metrics.html" modal-fg="#222" modal-bg="#fff" class="title">About</a><a href="#career" class="title">Career</a><a href="#awards" class="title">Award</a><a href="#skills" class="title">Skill</a><a href="#toys" class="title">Toys</a><a href="#design" class="title">Design</a><a href="#" modal-href="metrics.html" modal-fg="#222" modal-bg="#fff" class="title">About</a><a href="#career" class="title">Career</a><a href="#awards" class="title">Award</a><a href="#skills" class="title">Skill</a><a href="#toys" class="title">Toys</a><a href="#design" class="title">Design</a>
    </p>
  </div>
  <a class="overlay-button overlay-show">
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path d="M2 13.5h14V12H2v1.5zm0-4h14V8H2v1.5zM2 4v1.5h14V4H2z"></path></svg>
  </a>
  <div role="cover" id="home" class="position-absoulte overflow-visible text-center w-100 main-cover">
    <div class="p-3 w-100 h-100 mx-auto d-flex flex-column">
      <div class="mb-auto"></div>
      <div class="container">
        <a id="logo-anim" modal-href="metrics.html" modal-fg="#222" modal-bg="#fff">
          <img src="files/anim.svg" alt="Logo"/>
        </a>
      </div>
      <div class="mt-auto">
      </div>
    </div>
    <div class="" style="position: absolute; top: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none;">
      <canvas id="canvas-bg"></canvas>
    </div>
    <div class="dividing-hill dividing-hill-start" style="z-index: 3;">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" preserveAspectRatio="none" viewBox="0 0 1680 40" class="position-absolute" style="left:0;bottom:0;">
        <path d="M0 40h1680V30S1340 0 840 0 0 30 0 30z" fill="black"></path>
      </svg>
    </div>
  </div>

  <div role="main" style="margin-top: 100vh; padding-top: 2em;">
    <section id="career-awards">
      <div class="container">
        <div class="row row-cols-1 row-cols-lg-2">
          <div class="col" id="career" style="padding-top: 2em;">
            <h1 class="heading">Career &amp; Education</h1>
            <div class="timeline">
              <div class="timeline-event">
                <label class="timeline-event-icon"></label>
                <div class="timeline-event-copy">
                  <p class="company">Samsung Electonics Co,. Ltd.</p>
                  <p class="year">2019 &ndash;</p>
                  <p class="desc">
                    <strong>AR Avatar, AR platform lab., Mobile Division</strong>
                    <br>
                    <i>Software Engineer, 2020.04 &ndash;</i>
                  </p>
                  <p>
                    <strong>Algorithm Train T/F, Samsung Advanced Technology Training Institute</strong>
                    <br>
                    <i>Competitive Programmer, 2019.07 &ndash; 2020.03</i>
                  </p>
                </div>
              </div>
              <div class="timeline-event">
                <label class="timeline-event-icon"></label>
                <div class="timeline-event-copy">
                  <p class="company">Chonbuk National University</p>
                  <p class="year">2012 &ndash; 2019</p>
                  <p class="desc">
                    <i>Bachelor's degree, Computer Science in Engineering</i>
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div class="col" id="awards" style="padding-top: 2em;">
            <h1 class="heading">Awards & Honors</h1>
            <div class="timeline right">
              <div class="timeline-event">
                <label class="timeline-event-icon"></label>
                <div class="timeline-event-copy">
                  <h3>
                    <a href="https://github.com/naver/ai-hackathon-2018" target="_blank">
                      2nd Prize, NAVER A.I. Hackathon
                    </a>
                  </h3>
                  <h4>
                    <a href="https://www.navercorp.com/" target="_blank">NAVER Corp.</a>
                    <br>
                    <small>2018.04.27.</small>
                  </h4>
                  <p>
                    QA system using <a href="https://ai.nsml.navercorp.com/intro" target="_blank">NSML</a> with Dataset from NAVER
                    <br>
                    <small>지식인 유사도 부문 (error 모르게따 팀)</small>
                    <br>
                    <small>
                      <a href="https://github.com/naver/ai-hackathon/blob/ai_hackathon_1st/res/result_kin_final.png" target="_blank">
                        <i class="icon fa fa-link"></i>
                      </a>
                    </small>
                  </p>
                </div>
              </div>
              <div class="timeline-event">
                <label class="timeline-event-icon"></label>
                <div class="timeline-event-copy">
                  <h3>ACM-ICPC Asia Regional</h3>
                  <h4></h4>
                  <p>
                    68th Place(H/M), Daejeon Regional<br>
                    <small>2017.11.11.</small>
                  </p>
                  <p>
                    36th Place, Daejeon Regional<br>
                    <small>2013.11.02.</small>
                  </p>
                </div>
              </div>
              <div class="timeline-event">
                <label class="timeline-event-icon"></label>
                <div class="timeline-event-copy">
                  <h3>Chonbuk National University</h3>
                  <h4></h4>
                  <p>
                    Programming Contest
                    <br>
                    <small>1st Prize, 2017.10.18.</small>
                    <br>
                    <small>1st Prize, 2013.10.14.</small>
                  </p>
                  <p>
                    Idea Hackathon<br>
                    <small>3rd Prize, 2017.05.14.</small>
                  </p>
                  <p>
                    and 5 more &hellip;
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    
    <section id="skills" class="position-relative overflow-hidden">
      <div class="container">
        <div class="text-center">
          <h1 class="heading">Skills</h1>
          <div class="small-divider"></div>
        </div>
        <div class="cards">
          <div class="item">
              <div class="img html5"></div>
              <div class="title"><p>HTML5</p></div>
          </div>
          <div class="item">
              <div class="img css3"></div>
              <div class="title"><p>CSS3</p></div>
          </div>
          <div class="item">
              <div class="img js"></div>
              <div class="title"><p>JavaScript</p></div>
          </div>
          <div class="item">
              <div class="img es6"></div>
              <div class="title"><p style="font-size: 80%;margin-top: 3px;">ECMAScript 6</p></div>
          </div>
          <div class="item">
              <div class="img bootstrap"></div>
              <div class="title"><p>Bootstrap5</p></div>
          </div>
          <div class="item">
              <div class="img babel"></div>
              <div class="title"><p>Babel</p></div>
          </div>
          <div class="item">
              <div class="img chrome"></div>
              <div class="title"><p>chrome<br>extension</p></div>
          </div>
        </div>
        <div class="cards">
          <div class="item">
              <div class="img docker"></div>
              <div class="title"><p>Docker</p></div>
          </div>
          <div class="item">
              <div class="img nodejs"></div>
              <div class="title"><p>Node.js</p></div>
          </div>
          <div class="item">
              <div class="img express"></div>
              <div class="title"><p>express.js</p></div>
          </div>
          <div class="item">
              <div class="img python"></div>
              <div class="title"><p>python</p></div>
          </div>
          <div class="item">
              <div class="img django"></div>
              <div class="title"><p>django</p></div>
          </div>
          <div class="item">
              <div class="img java"></div>
              <div class="title"><p>Java</p></div>
          </div>
          <div class="item">
              <div class="img git"></div>
              <div class="title"><p>git</p></div>
          </div>
        </div>
      </div>
    </section>

    <section id="apps" class="position-relative overflow-hidden">
      <div class="container">
        <div class="text-center">
          <h1 class="heading">Apps &amp; Projects</h1>
          <div class="small-divider"></div>
        </div>
        <div class="row row-cols-2 row-cols-md-3 row-cols-lg-5">
          <div class="col app-wrapper">
            <a href="#apps" class="app display-block" style="background-color: #000000; border: 1px solid #848484;" >
              <img src="images/threedots.svg" alt="more" />
            </a>
            <div class="details">
              <p>What's next&hellip;?</p>
            </div>
          </div>
          <div class="col app-wrapper">
            <a href="#" modal-href="quick-draw-clone.html" class="app display-block" style="background-color: transparent;">
              <img src="images/logos/quick-draw.png" alt="quick-draw-clone" />
            </a>
            <div class="details">
              <p>Quick, Draw! Clone</p>
            </div>
          </div>
          <div class="col app-wrapper">
            <a href="#" modal-href="boj-extended.html" class="app display-block" style="background-color: transparent;">
              <img src="https://github.com/joonas-yoon/boj-extended/raw/main/src/icons/icon128.png" alt="BOJ Extended" />
            </a>
            <div class="details">
              <p>BOJ Extended</p>
            </div>
          </div>
          <div class="col app-wrapper">
            <a href="#" modal-href="json-as-db.html" class="app display-block" style="background-color: transparent;">
              <img src="images/logos/python-package.svg" alt="json-as-db">
            </a>
            <div class="details">
              <p>json-as-db</p>
            </div>
          </div>
          <div class="col app-wrapper">
            <a href="#" modal-href="hangul-noli.html" class="app display-block" style="background-color: #036;">
              <img src="images/logos/hangul-noli.svg" alt="hangul" />
            </a>
            <div class="details">
              <p>Obfuscated Korean</p>
            </div>
          </div>
          <div class="col app-wrapper">
            <a href="#" modal-href="speech-translator.html" modal-fg="#222" modal-bg="#fff" class="app display-block" style="border-radius: 50%;">
              <img src="images/logos/wagon.png" alt="speech translator" />
            </a>
            <div class="details">
              <p>Speech Translator</p>
            </div>
          </div>
          <div class="col app-wrapper">
            <a href="#" modal-href="buffalo-chess.html" modal-bg="#ffe0a5" modal-fg="#3d393a" class="app display-block">
              <img src="images/logos/buffalo-chess.png" alt="" />
            </a>
            <div class="details">
              <p>Buffalo Chess</p>
            </div>
          </div>
          <div class="col app-wrapper">
            <a href="#" modal-href="ytcf.html" modal-bg="#f9f9f9" modal-fg="#222" class="app display-block">
              <img src="images/logos/ytcf.png" alt="" />
            </a>
            <div class="details">
              <p>YouTube&trade; Comment Filter</p>
            </div>
          </div>
          <div class="col app-wrapper">
            <a href="#" modal-href="twitch-tldr.html" class="app display-block">
              <img src="images/logos/twitch-tldr.png" alt="" />
            </a>
            <div class="details">
              <p>Twitch tl;dr</p>
            </div>
          </div>
          <div class="col app-wrapper">
            <a href="#" modal-href="rubiks-race.html" class="app display-block">
              <img src="images/logos/rubiks-race.png" alt="" />
            </a>
            <div class="details">
              <p>Rubik's Race</p>
            </div>
          </div>
          <div class="col app-wrapper">
            <a href="#" modal-href="tbd.html" class="app display-block">
              <img src="images/logos/jcloud.png" alt="" />
            </a>
            <div class="details">
              <p>JCloud</p>
            </div>
          </div>
        </div>
      </div>
    </section>
    
    <section id="teams" class="position-relative overflow-hidden">
      <div class="container">
        <div class="text-center">
          <h1 class="heading">Teams</h1>
          <div class="small-divider"></div>
        </div>
        <div class="row row-cols-1 row-cols-sm-3">
          <div class="col app-wrapper">
            <a href="https://github.com/joonas-yoon" class="app display-block">
              <img src="images/joonas.jpg" alt="profile" />
            </a>
            <div class="details">
              <p><strong>Joonas</strong></p>
              <p>Yes, It's me.</p>
            </div>
          </div>
          <div class="col app-wrapper">
            <a class="app display-block" style="background-color: #EA2C49;">
              <img src="images/logos/team533.svg" alt="team533" />
            </a>
            <div class="details">
              <p><strong>Team 533</strong></p>
              <p>People from Lab 533</p>
            </div>
          </div>
          <div class="col app-wrapper">
            <a class="app display-block">
              <img src="images/logos/double-hooks.png" alt="team-doublehooks" />
            </a>
            <div class="details">
              <p><strong>Double hooks</strong></p>
              <p>??</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>

  <footer id="footer" class="position-relative">
    <div class="dividing-hill dividing-hill-end">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" preserveAspectRatio="none" viewBox="0 0 1680 40" class="position-absolute" style="top:0; transform: scaleY(-1);">
        <path d="M0 40h1680V30S1340 0 840 0 0 30 0 30z" fill="#000"></path>
      </svg>
    </div>
    <div class="container">
      <div class="row">
        <div class="col-12 col-md">
          <small class="d-block mb-3 text-muted">
            &copy; Joona Yoon 2021-2022
          </small>
        </div>
        <div class="col-6 col-md">
          <h5>Contacts</h5>
          <ul class="list-unstyled text-small">
            <li><a class="text-muted" href="mailto:joonas.yoon@gmail.com">E-mail</a></li>
            <li><a class="text-muted" href="https://www.linkedin.com/in/joona-yoon/" target="_blank">LinkedIn</a></li>
            <li><a class="text-muted" href="https://stackoverflow.com/users/13677554/joona-yoon" target="_blank">StackOverflow</a></li>
            <li><a class="text-muted" href="https://github.com/joonas-yoon" target="_blank">GitHub</a></li>
            <li><a class="disabled">Facebook</a></li>
            <li><a class="disabled">Instagram</a></li>
          </ul>
        </div>
        <div class="col-6 col-md">
          <h5>Links</h5>
          <ul class="list-unstyled text-small">
            <li><a class="text-muted" href="http://joonas-yoon.blogspot.com/" target="_blank">Blogger <i>(legacy)</i></a></li>
            <li><a class="text-muted" href="https://joonas.tistory.com/" target="_blank">Tistory</a></li>
          </ul>
        </div>
      </div>
    </div>
  </footer>

  <div id="modal" class="hide">
    <div class="modal-bg">
      <div class="modal-close">
        <a class="modal-close-button">
          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="#fff" style="width: 2rem;height: 2rem;" viewBox="0 0 18 18">
            <path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path>
          </svg>
        </a>
      </div>
    </div>
    <div class="modal-wrapper">
      <div class="inner">
        <div class="text-center" id="modal-spinner" style="padding: 3em 0;">
          <div class="spinner-grow" style="width: 1rem; height: 1rem; animation-delay: 0ms;" role="status">
            <span class="sr-only">Loading...</span>
          </div>
          <div class="spinner-grow" style="width: 1rem; height: 1rem; animation-delay: 100ms; margin-left: 1rem;" role="status"></div>
          <div class="spinner-grow" style="width: 1rem; height: 1rem; animation-delay: 200ms; margin-left: 1rem;" role="status"></div>
        </div>
        <div class="container my-md-3 my-lg-4" id="modal-content"></div>
      </div>
      <div class="footer">
        <a class="modal-close-button">
          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" style="width: 2rem;height: 2rem;" viewBox="0 0 18 18">
            <path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path>
          </svg>
        </a>
      </div>
    </div>
  </div>

  <div role="loader" class="is-loading-overlay position-fixed w-100 h-100">
    <div class="d-flex justify-content-center align-items-center h-100">
      <div class="spinner-border" role="status" style="width: 5em;height: 5em;">
        <span class="sr-only">Loading...</span>
      </div>
    </div>
  </div>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="assets/js/jquery.min.js"></script>

  <!-- Polyfill.io will load polyfills your browser needs -->
  <script src="assets/js/ie/polyfill.min.js"></script>

  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>

  <!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
  <script src="assets/js/build/main.js"></script>
</body>
</html>