project1.html

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <meta name="author" content="Edwin Lang">

      <title>Project | Portfolio Website Template | CODEGRID | modified by Edwin Lang</title>

      <!-- stylesheet -->
      <link rel="stylesheet" href="style.css">

      <!-- bootstrap cdns -->
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

      <!-- google fonts -->
      <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:100,100i,300,300i,400,400i,500,500i,700,700i" rel="stylesheet">

      <!-- ionicons cdn -->
      <script src="https://unpkg.com/ionicons@4.5.10-0/dist/ionicons.js"></script>


      <!-- for on scroll animations -->
      <link rel="stylesheet" href="animate.css">
      <script src="wow.min.js"></script>

</head>
<body>
      <div class="wrapper project-page">

            <!--------------- navbar starts here --------------->
            <nav>
                  <span id="brand">
                        <a href="index.html">Edwin Lang</a>
                  </span>

                  <ul id="menu">
                        <li><a href="index.html">home<span>.</span></a></li>
                        <li><a href="about.html">about me<span>.</span></a></li>
                        <li><a href="contact.html">contact<span>.</span></a></li>
                  </ul>

                  <div id="toggle">
                        <div class="span">menu</div>
                  </div>

            </nav>

            <div id="resize">
                  <div class="close-btn">close</div>

                  <ul id="menu">
                        <li><a href="index.html">home<span>.</span></a></li>
                        <li><a href="about.html">about me<span>.</span></a></li>
                        <li><a href="contact.html">contact<span>.</span></a></li>
                  </ul>
            </div>

            <!--------------- navbar ends here --------------->

            <div class="whitespace"></div>

            <!--------------- hero section starts here --------------->
            <div class="container">
                  <div class="hero-content">
                        <br><br>
                        <div class="row">
                              <div class="col-lg-12">
                                    <br>

                                    <h1 class="wow fadeInUp">Kinect Sensor</h1><br><br>

                                    <div class="row">
                                          <div class="col-lg-4">
                                                <p class="wow fadeInUp">Nummer :</p>
                                                <h6 class="wow fadeInUp">1</h6>
                                          </div>

                                          <div class="col-lg-4">
                                                <p class="wow fadeInUp">Plattform :</p>
                                                <h6 class="wow fadeInUp code">Processing</h6>
                                          </div>

                                          <div class="col-lg-4">
                                                <p class="wow fadeInUp">Schlagwörter :</p>
                                                <h6 class="wow fadeInUp code">Kinect Depthcamera Pointtracing library</h6>
                                          </div>
                                    </div>
                                    <br>
                                    <p class="wow fadeInUp">Mittels eines “Kinect Sensor” und der Entwicklungsumgebung Processing, wurde ein Programm geschrieben, welches ein Tiefenbild ausliest und in einem vordefinierten Intervall den am nächsten entfernten Punkt mit einem roten Rechteck markiert. Das definierte Intervall wird in der Aufnahme in Echtzeit blau markiert.</p>
                              </div>
                        </div>
                  </div>
            </div>
            <!--------------- hero section ends here --------------->


            <!--------------- project image section starts here --------------->

            <div class="project-img">
                  <div class="container">
                        <br><br>
                        <div class="row">
                              <div class="col-md-12">
                                    <div class="project project1-image1 wow fadeInUp"></div>
                                    <p class="wow fadeInUp credits">c Simon Penn</p>
                              </div>
                        </div>
                  </div>
            </div>

            <!--------------- project image section ends here --------------->

            <br>

            <!--------------- hero section geht weiter ---------------------->

            <div class="container">
                  <div class="hero-content">
                        <div class="row">
                              <div class="col-lg-12">
                                    <p class="wow fadeInUp">Durch Gestensteuerung können Besucher:innen von Museen berührungslos Informationsportale oder Bildschirme nutzen und durch die Inhalte navigieren. Weiters besteht die Möglichkeit, durch Body-Tracking interaktive Spiele zu realisieren.</p>
                              </div>
                        </div>
                  </div>
            </div>


            <!--------------- Ende der hero section ------------------------->

            
            <!--------------- project image section starts here --------------->

            <div class="project-img">
                  <div class="container">
                        <br><br>
                        <div class="row">
                              <div class="col-md-12">
                                    <div class="project project1-image2 wow fadeInUp"></div>
                              </div>
                        </div>
                  </div>
            </div>

            <!--------------- project image section ends here --------------->
            
            <br><br>

            <!--------------- project nav starts here --------------->
            <div class="project-nav">
                  <div class="container">
                        <div class="row">
                              <div class="col-lg-6 prev">
                                    <!-- <a href="project1.html"><ion-icon name="arrow-back"></ion-icon>previous</a> -->
                              </div>
                              <div class="col-lg-6 next">
                                    <a href="project2.html">next<ion-icon name="arrow-forward"></ion-icon></a>
                              </div>
                        </div>
                  </div>
            </div>

            <!--------------- project nav ends here --------------->

            <div class="whitespace"></div>


            <!--------------- footer starts here --------------->
            <div class="footer">
                  <div class="container">
                        <br><br>
                        <br>

                        <div class="hr">
                              <div class="row"></div>
                        </div>

                        <br><br>

                        <div class="info">
                              <div class="col-lg-12">
                                    <div class="row">
                                          <div class="col-lg-6" id="personal">
                                                <p class="wow fadeInUp">connect with me</p>
                                                <h4 class="wow fadeInUp" data-wow-delay="0.2s">Let's drink a coffee...</h4>
                                                <br><br>
                                          </div>
      
                                          <div class="col-lg-6" id="address">
                                                
                                                <p class="wow fadeInUp" data-wow-delay="0s">made with <ion-icon name="heart"></ion-icon> for</p>
                                                <p class="wow fadeInUp" data-wow-delay="0.2s">
                                                      <ion-icon name="desktop" size="large"></ion-icon>
                                                      <ion-icon name="tablet-portrait" size="large"></ion-icon>
                                                      <ion-icon name="phone-portrait" size="large"></ion-icon>
                                                </p>
                                                <br><br>
      
                                          </div>
                                    </div>
                              </div>
                        </div>
                  </div>
            </div>

            <!--------------- footer ends here --------------->

            <br><br><br><br>

      </div>

      <!-- greensock cdn -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>

      <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
      <script type="text/javascript">

      // navigation starts here
      $("#toggle").click(function() {
            $(this).toggleClass('on');
            $("#resize").toggleClass("active");
      });

      $("#resize ul li a").click(function() {
            $(this).toggleClass('on');
            $("#resize").toggleClass("active");
      });

      $(".close-btn").click(function() {
            $(this).toggleClass('on');
            $("#resize").toggleClass("active");
      });

      // navigation ends here

      // nav animation

      TweenMax.from("#brand", 1, {
            delay: 0.4,
            y: 10,
            opacity: 0,
            ease: Expo.easeInOut
      })

      TweenMax.staggerFrom("#menu li a", 1, {
            delay: 0.4,
            opacity: 0,
            ease: Expo.easeInOut
      }, 0.1);

      // nav animation ends


      new WOW().init();


      </script>
</body>
</html>