Week 1 - Project Management

In this section I will show you some steps to create a similar website to this one. You will also learn how to use GitLab the web-based Git-repository which comes with wiki, issue-tracking and CI/CD pipeline features.

  1. GitLab & Git
  2. Website HTML
  3. Website animation

GitLab & Git

First of all I will show you how to use GitLab on your computer. For this step you need to download git.

  1. Windows: https://gitforwindows.org/
  2. Linux: "apt-get install git" or "yum install git"
  3. Mac OS: https://git-scm.com/download/mac

After downloading and successfully installing git you need to open Git Bash to do some basic setup.

  1. Setup Username
  2. Setup Email
  3. Generate and enable a ssh key
  4. Creating a Git repository
  5. Usefull Git commands
Setup Username

First you will setup a username. You can do this by typing the following command into the Git Bash. You can insert your forename and surname if you want otherwise you can use a made up name if you want.

 
  git config --global user.name "forename surname"


Setup Email

After you setup a username you need to do the same for your email. The command is very similar. Type the below command in the Git Bash to setup your email.

   
  git config --global user.email johndoe@example.com


Generate and enable a ssh key

The next step is to create a ssh key. If you create the key for example on your laptop than you can upload your files to your repository without typing your login data for every commit and push you do. Type the below command in the Git Bash to create your personal ssh key. After typing the command you need to press enter two times. You need to enter the email address you used in the setup email section.

  
  sh-keygen -t rsa -C "your_email"

 

After creating the ssh key stay in the directory where you are and copy your public key with the following command. Replace this ~ with the directory you are currently in. After that you can copy your public key shown in the Git Bash and upload it on GitLab through the following link: https://gitlab.com/profile/keys

     
  cat ~/.ssh/id_rsa.pub

 
Creating a Git repository

After successfully creating a new project copy your project URL in the project overview and copy your repository to a directory of your choice with the Git commands below.

   
    cd < Insert your Directory >
    git clone git@gitlab.com:PanagiotisT/panagiotis.tsitsos.git

    cd panagiotis.tsitsos


After this two commands you will have a local copy of your project on your computer. Under the Usefull Git commands section you will learn how to upload the local changes you did to your online repository.

Usefull Git commands

Your local repository consists of three "trees" maintained by git. The first one is your Working Directory; which holds the actual files. The second one is the Index; which acts as a staging area and finally the HEAD which points to the last commit you've made. To add the changes you made to the Index you can use the following commands. With the first command you can see the status of your files in your Working Directory.

   
  git status

  git add < filename >  --> for adding one file at a time

  git add -A .  --> for adding all files at a time


After that the changes you made in your Working Directory are now in the Indexarea and you completed the first step of the basic git workflow. The next step is to commit the changes to the HEAD section. Insert a powerful comment as message for example "Initial commit" so later on you will be able to identify what changes you made in older commits.

   
  git commit -m "commit message"


After those steps you just need to push the changes you made to your repository with the command below.

   
  git push


Website HTML

In this section I will write about some steps done in the creation progress of this Website. From the beginning I wanted a clean and simple design. It can be helpful to create a paper prototype of the design you have in mind. In my case I didn't use a paper prototype.

From the beginning I knew that I did not want to create the page from scratch, so I searched for some frameworks I could use and ended up using mdBootstrap. You can download a basic structure from the following link: https://mdbootstrap.com/getting-started/ including CSS designs, animations and much more stuff you can use. The index file looks like this at the start.

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

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Material Design Bootstrap</title>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- Material Design Bootstrap -->
    <link href="css/mdb.min.css" rel="stylesheet">
    <!-- Your custom styles (optional) -->
    <link href="css/style.css" rel="stylesheet">
  </head>

  <body>

    <!-- Start your project here-->
    <div style="height: 100vh">
      <div class="flex-center flex-column">
        <h1 class="animated fadeIn mb-4">Material Design for Bootstrap</h1>

        <h5 class="animated fadeIn mb-3">Thank you for using our product. We're glad you're with us.</h5>

        <p class="animated fadeIn text-muted">MDB Team</p>
      </div>
    </div>
    <!-- /Start your project here-->

    <!-- SCRIPTS -->
    <!-- JQuery -->
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <!-- Bootstrap tooltips -->
    <script type="text/javascript" src="js/popper.min.js"></script>
    <!-- Bootstrap core JavaScript -->
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <!-- MDB core JavaScript -->
    <script type="text/javascript" src="js/mdb.min.js"></script>
  </body>

  </html>  


As you can see there are some helpful scripts already included so you have "less" work to do. Bootstrap is like a construction kit. You can visit the site and get the components you want for example a navigation bar and implement it into your website. https://mdbootstrap.com/ If you find a component that suits you than you can simply paste it into your code and modify it until you think its good to go. Since I wanted to keep this site as clean as possible I kept the navigation bar and the footer really simple.

  
  <!-- Nav Bar -->
  <ul class="nav justify-content-center cyan darken-3 py-4 hidden">
      <li class="nav-item">
        <a class="nav-link text-white active" href="home.html">Home</a>
      </li>
  
      <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle text-white" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
            aria-expanded="false">Projects</a>
          <div class="dropdown-menu">
            <a class="dropdown-item" href="project1.html">Project Management</a>
            <a class="dropdown-item" href="#">2D and 3D Design</a>
            <a class="dropdown-item" href="#">Laser Cutting</a>
            <!-- <div class="dropdown-divider"></div> -->
            <a class="dropdown-item" href="#">3D Printing</a>
            <a class="dropdown-item" href="#">Electronics production</a>
            <a class="dropdown-item" href="#">Electronics design</a>
            <a class="dropdown-item" href="#">Embedded programming</a>
            <a class="dropdown-item" href="#">Input devices</a>
            <a class="dropdown-item" href="#">Output devices</a>
            <a class="dropdown-item" href="#">Final Project</a>
          </div>
        </li>
  
  </ul>
  
    
  <!-- Footer -->
  <footer class="page-footer font-small cyan darken-3">
      <!-- Footer Elements -->
      <div class="container">
  
        <!-- Grid row-->
        <div class="row">
  
          <!-- Grid column -->
          <div class="col-md-12 py-4">
            <div class="flex-center">
              <!-- fa-2 für die größe des Icons -->
              <!-- Facebook -->
              <a class="fb-ic">
                <i class="fa fa-facebook fa-lg white-text mr-md-3 mr-3 ml-3 fa-2x"> </i>
              </a>
              <!-- Twitter -->
              <a class="tw-ic">
                <i class="fa fa-twitter fa-lg white-text mr-md-3 mr-3 ml-3 fa-2x"> </i>
              </a>
              <!--Instagram-->
              <a class="ins-ic">
                <i class="fa fa-instagram fa-lg white-text mr-md-3 mr-3 ml-3 fa-2x"> </i>
              </a>
            </div>
          </div>
          <!-- Grid column -->
  
        </div>
        <!-- Grid row-->
  
      </div>
      <!-- Footer Elements -->
  
      <!-- Copyright -->
      <div class="footer-copyright text-center py-3">© 2018 Copyright: Panagiotis Tsitsos</div>
      <!-- Copyright -->
    </footer>
    <!-- Footer -->
    
  

To display the source code I am using the highlight.js library. It allows me to show HTML, JavaScript and other code snippets in blocks like you saw till now. Here I encountered one little problem. Below you see how to use highlight.js. You need a pre tag and a code tag within it. After that you need to give the code tag a class with the code snipped you want to display for example class="JavaScript", "HTML" and so on.

    
  <pre>
    <code class="[insert class]">
      //code snippet here
    <code>
  </pre>
    
  

Here is where I encountered my first problem but which I could luckily get rid of really quickly. You can't just type HTML tags <h2> between the code section because the compiler will interpret it as HTML and will show you this tag as header2. You can use the following syntax to show your code properly.

Now I will show you how this site is structured. I use the <section> tag and inside it I use p tags and the highlight.js syntax.

    
  <section>
    <p> This is a paragraph insert more content please.</p>
    <pre>
      <code class="[insert class]">
        //code snippet here
      <code>
    </pre>
  </section>
    
  

Website animation

In this section I will show you how to create the welcome animation you saw when you entered this website. You can achieve this effect very easily. Bootstrap comes with a set of 70+ animations. You can find all the available animations here: https://mdbootstrap.com/css/animations/

To use the different animations that bootstrap provides you just need to do this simple steps. You need to add the animated class to the element you want to animate. As an example I will show you the welcome header which faded in and then out to the left. After adding the animated class the title looked like this

   
  <main role="main" class="container text-center" id="bereich">
    <h1 class="animated" id="title">Welcome</h1>
  </main>


By just adding the animated tag nothing happens. Now you need to choose an effect you want to use there are plenty effects to choose from for example the ones I used for the welcome effect:

You can additionally use the following classes so the element you apply the animation to is fading in faster for example.

After adding the other necessary classes to my title it looked like this

   
  <main role="main" class="container text-center" id="bereich">
    <h1 class="animated fadeIn delay-1s" id="title">Welcome</h1>
  </main>


With this code the title will fade in after a delay of one second. To have this clean effect and to just display the title I had to hide the navigation and the footer when the page is loaded. I achieved this by creating a class called hidden and then attached it to the footer and the navigation bar.

     
  .hidden {
    display: none;
  }
  
  
     
  <!-- Nav Bar -->
  <ul class="nav justify-content-center cyan darken-3 py-4 hidden">
    <!-- Nav Bar Content -->
  </ul>

  <!-- Main Content -->
  <main role="main" class="container text-center" id="bereich">
    <h1 class="animated fadeIn delay-1s" id="title">Wellcome</h1>
  </main>

  <!-- Footer -->
  <footer class="page-footer font-small cyan darken-3 hidden">
    <!-- Footer Elements -->

    <!-- Copyright -->
    <div class="footer-copyright text-center py-3">© 2018 Copyright: Panagiotis Tsitsos</div>
    <!-- Copyright -->
  </footer>

  
  

When you look at your page now you will see how the title fades in and the navigation bar and the footer are hidden. The next step includes to let the navigation bars bounce in and then to let the title fade out to the left. To achieve this effect we simply need to use the CSS classes bounceInUp, bounceInDown and fadeOutLeft. You can't add for example the fadeIn and the fadeOutLeft class to one element at the time, because only one of both animations would trigger. To have both animations on the same element I used jQuery to add the fadeOutLeft class after the fadeIn animation is completed.

   
  $( document ).ready(function() {
    console.log( "ready!" );

    $(".nav").addClass('animated bounceInDown delay-2s');
    $(".nav").removeClass("hidden");

    $(".page-footer").addClass('animated bounceInUp delay-2s');
    $(".page-footer").removeClass("hidden");

    setTimeout(function(){
        $("#title").addClass('fadeOutLeft');
        }, 2000);
  });


After the document is loaded I add the bounceInDown and the bouceInUp class to my navigation bar and footer with a delay of two seconds so the title animation is finished before the navigation bars bounce in. The title fades out to the left after two seconds.

The next and final step is to show the About me text after the navigation bars bounced in and the title faded out. I simply gave the body tag a onload function with a timer of 3,5 seconds so it will execute the function after the title is gone and the navigation elements are displayed.

     
  <body onload="setTimeout(myFunction, 3500);" id="indexBody"> 
  

After the body is loaded the function below is called after 3,5 seconds. The function deletes the title which faded out so the new content shown can be displayed properly. The about me text is getting inserted via jQuery to the main content area.

    
  function myFunction() {  
    $("#bereich").addClass('animated fadeIn');
    $('#title').remove(); 
    
    
    $('#bereich').append("
    <div container>
    <div class='row'>
      <div class='col-sm'>
        <h2>Hey there!</h2>
      </div>
    </div>
    
    <p>Welcome to this website. My name is Panagiotis Tsitsos 
    and I am 21 years old. <br> I'm studying Media Communication and Computer Science
    at the university in Kamp-Lintfort. <br> Currently im in the fifth semester.</p> 
    <p>Here you will find different projects which got realised over severel weeks <br> 
    for the module ''Fundamentals of Digital Fabrication''. There is a documentation for 
    every project so you can easily do it yourself. Have Fun!
    </p>
  </div>