Add lfs tracking and add some projects

.gitattributes

@@ -0,0 +1,3 @@
+*.gif filter=lfs diff=lfs merge=lfs -text
+*.png filter=lfs diff=lfs merge=lfs -text
+*.jpg filter=lfs diff=lfs merge=lfs -text

css/style.css

@@ -6,6 +6,17 @@ body {
 .card {
     background-color: #006494;
     margin-top: 5%;
+    min-height: 520px;
+    max-height: 520px;
+    padding-bottom: 50px;
+}
+
+.card-footer {
+    display: flex;
+    justify-content: space-between;
+    position: absolute;
+    bottom: 0;
+    width: 100%;
 }
 
 .fixs {

images/darkrpserver.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d14f5da5ec7821adf3a24bf69a44bf4e9cd713e1d7a25611d19cdba1fd069e21
+size 26280

images/phong-shading.gif

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3dc33c9e44f82a460f49b0d3e88f25564519a5f6aef6193cf7cbe7c49dc6a592
+size 762073

images/webOcean.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:fd27e7cdc2f34ef1ea16c904455d90e4e5b70c71a3be54e920eb312467735ecd
+size 42636

index.html

@@ -42,23 +42,26 @@
         </tr>
       </table>
     </div>
-    <h4 class="position-absolute font-italic text-secondary" style="bottom:5px;right:25px;">ebenfalls ein Hobby von mir ist Fotografie.</h4>
+    <h4 class="position-absolute font-italic text-secondary" style="bottom:5px;right:25px;">ebenfalls ein Hobby von mir
+      ist Fotografie.</h4>
   </div>
 
   <div class="container-fluid p-2">
     <div class="row row-cols-1 mx-auto">
       <div class="col fixs">
         <div class="card">
-          <img class="card-img-top" height="200" src="https://via.placeholder.com/400x200" alt="Card image cap">
+          <img class="card-img-top" height="200" src="images/webOcean.png" alt="Card image cap">
           <div class="card-body">
             <h5 class="card-title text-light">Web-Ocean</h5>
-            <p class="card-text text-light">Ein Typescript-Port des C-Ocean Projekts. Herausfordernd ist die Einschränkung von OpenGL auf webgl wodurch keine compute Shader zur Verfügung stehen.</p>
+            <p class="card-text text-light">Ein Typescript-Port des C-Ocean Projekts aktuell beschränkt auf ein
-            <p class="card-text text-light">#Typescript, #webGL, #Simulation</p>
+              Wasser-Patch. Interessant ist die Aufteilung in zwei Render-Phasen unter Verwendung von Displacement-Maps
+              im Gegensatz zum ursprünglichen Projekt.</p>
+            <p class="card-text text-light">#Typescript, #webGL2, #CG</p>
+          </div>
+          <div class="card-footer">
             <i class="fa fa-2x fa-play text-success"></i>
-            <i class="fa fa-2x fa-pause text-warning"></i>
-            <i class="fa fa-2x fa-stop text-danger"></i>
             <a href="web-ocean">Live-Demo</a>
-            <i class="fa fa-2x fa-git-square float-right"></i>
+            <a href="https://git.rismer.de/gulum/web-ocean"><i class="fa fa-2x fa-git-square float-right"></i></a>
           </div>
         </div>
       </div>
@@ -67,19 +70,28 @@
           <img class="card-img-top" height="200" src="images/bsc.png" alt="Card image cap">
           <div class="card-body">
             <h5 class="card-title text-light">C-Ocean</h5>
-            <p class="card-text text-light">Erste Implementation des Ozeans in C während meiner Bachelorarbeit. Für die Wellenbewebung wurde Perlin Noise eingesetzt. In der Frustum Culling-Ansicht.</p>
+            <p class="card-text text-light"> Simulation eines Ozeans in C. Für die Wellenbewebung wurde Perlin Noise
+              eingesetzt. In der Frustum Culling-Ansicht.</p>
+            <p class="card-text text-light">#C, #OpenGL, #CG</p>
+          </div>
+          <div class="card-footer">
             <i class="fa fa-2x fa-check text-success"></i>
             <a href="data/bsc.pdf"><i class="fa fa-2x fa-file-pdf-o float-right"></i></a>
-            <a href="https://git.rismer.de/gulum/c-ocean"><i class="fa fa-2x fa-git-square float-right" ></i></a>
+            <a href="https://git.rismer.de/gulum/c-ocean"><i class="fa fa-2x fa-git-square float-right"></i></a>
           </div>
         </div>
       </div>
       <div class="col fixs">
         <div class="card">
-          <img class="card-img-top" src="https://via.placeholder.com/150x80" alt="Card image cap">
+          <img class="card-img-top" height="200" src="https://via.placeholder.com/400x200" alt="Card image cap">
           <div class="card-body">
-            <h5 class="card-title text-light">Verbesserung der Textur eines 3D-Modells erzeugt durch einen 3D-Scanner</h5>
+            <h5 class="card-title text-light">Verbesserung der Textur eines 3D-Modells erzeugt durch einen 3D-Scanner
-            <p class="card-text text-light">Ein Projekt welches ich während meiner Masterarbeit bei der Firma Vitronic bearbeitet habe. C++, maschinelles Sehen, Photogrametrie </p>
+            </h5>
+            <p class="card-text text-light">Ein Projekt welches ich während meiner Masterarbeit bei der Firma Vitronic
+              bearbeitet habe. </p>
+            <p class="card-text text-light">#C++, #OpenGL, #Photogrammetrie</p>
+          </div>
+          <div class="card-footer">
             <i class="fa fa-2x fa-check text-success"></i>
             <i class="fa fa-2x fa-file-pdf-o float-right"></i>
           </div>
@@ -90,8 +102,11 @@
           <img class="card-img-top" height="200" src="images/darkrp.png" alt="Card image cap">
           <div class="card-body">
             <h5 class="card-title text-light">DarkRP2D</h5>
-            <p class="card-text text-light">Ein Hobby-Projekt von mir an dem ich arbeite wenn sonst keine Projekte anstehen.</p>
+            <p class="card-text text-light">Ein Hobby-Projekt von mir an dem ich arbeite wenn sonst keine Projekte
+              anstehen.</p>
             <p class="card-text text-light">#C++, #OpenGL, #Godot</p>
+          </div>
+          <div class="card-footer">
             <i class="fa fa-2x fa-pause text-warning"></i>
             <i class="fa fa-2x fa-git-square float-right"></i>
           </div>
@@ -99,11 +114,13 @@
       </div>
       <div class="col fixs">
         <div class="card">
-          <img class="card-img-top" src="https://via.placeholder.com/150x80" alt="Card image cap">
+          <img class="card-img-top" height="200" src="images/darkrpserver.png" alt="Card image cap">
           <div class="card-body">
             <h5 class="card-title text-light">DarkRP2D-Server</h5>
             <p class="card-text text-light">Physic over network Box2d</p>
             <p class="card-text text-light">#C++, #OpenGL, #Network</p>
+          </div>
+          <div class="card-footer">
             <i class="fa fa-2x fa-pause text-warning"></i>
             <i class="fa fa-2x fa-git-square float-right"></i>
           </div>
@@ -114,30 +131,57 @@
           <img class="card-img-top" height="200" src="images/leaflet.png" alt="Card image cap">
           <div class="card-body">
             <h5 class="card-title text-light">Leaflet-3D Plugin</h5>
-            <p class="card-text text-light"></p>
+            <p class="card-text text-light">Das Leaflet 3D-Plugin ermöglicht die perspektivisch korrekte Darstellung von
+              3D-Gebäuden auf einer Open Street Map Karte innerhalb von Leaflet. Zur performanten Darstellung der
+              3D-Gebäude wird eine Eigenimplementierung unter Einsatz von WebGL2 verwendet.</p>
+            <p class="card-text text-light">3D-Gebäude werden in Blender modelliert, können jedoch auch als Fallback
+              anhand des OSM Gebäude-Grundrisses generiert werden. Bei der 3D-Ansicht ist es möglich die Gebäude mit
+              unterschiedlichen Farben und Features darzustellen.</p>
+          </div>
+          <div class="card-footer">
             <i class="fa fa-2x fa-check text-success"></i>
             <a href="https://mocainfo.thm.de/building-3d/">Live-Demo</a>
-            <i class="fa fa-2x fa-git-square float-right"></i>
+            <a href="https://git.rismer.de/gulum/leaflet3d"><i class="fa fa-2x fa-git-square float-right"></i></a>
           </div>
         </div>
       </div>
       <div class="col fixs">
         <div class="card">
-          <img class="card-img-top" src="https://via.placeholder.com/150x80" alt="Card image cap">
+          <img class="card-img-top" height="200" src="https://via.placeholder.com/400x200" alt="Card image cap">
           <div class="card-body">
             <h5 class="card-title text-light">C++-Ocean-FFT</h5>
             <p class="card-text text-light"></p>
-            <i class="fa fa-2x fa-check text-success"></i>
+          </div>
+          <div class="card-footer">
+            <i class="fa fa-2x fa-pause text-warning"></i>
             <i class="fa fa-2x fa-git-square float-right"></i>
           </div>
         </div>
       </div>
       <div class="col fixs">
         <div class="card">
-          <img class="card-img-top" src="https://via.placeholder.com/150x80" alt="Card image cap">
+          <img class="card-img-top" height="200" src="images/phong-shading.gif" alt="Card image cap">
           <div class="card-body">
-            <h5 class="card-title text-light">Phong-Shading Studie</h5>
+            <h5 class="card-title text-light">Blinn-Phong-Shading Seminar</h5>
+            <p class="card-text text-light">Im Rahmen des Masterseminar meines Masterstudiums hatte ich mich mit Beleuchtungsmodellen (BRDF) beschäftigt. Hierzu gibt es eine Ausarbeitung sowie ein ausführbares Web-Version.</p>
+            <p class="card-text text-light">#JavaScript, #webGL, #CG</p>
+          </div>
+          <div class="card-footer">
+            <i class="fa fa-2x fa-check text-success"></i>
+            <a href="blinn-phong">Live-Demo</a>
+            <i class="fa fa-2x fa-git-square float-right"></i>
+            <i class="fa fa-2x fa-file-pdf-o float-right"></i>
+          </div>
+        </div>
+      </div>
+      <div class="col fixs">
+        <div class="card">
+          <img class="card-img-top" height="200" src="https://via.placeholder.com/400x200" alt="Card image cap">
+          <div class="card-body">
+            <h5 class="card-title text-light">Fraktale-Welt Seminar</h5>
             <p class="card-text text-light"></p>
+          </div>
+          <div class="card-footer">
             <i class="fa fa-2x fa-check text-success"></i>
             <i class="fa fa-2x fa-git-square float-right"></i>
             <i class="fa fa-2x fa-file-pdf-o float-right"></i>
@@ -146,25 +190,14 @@
       </div>
       <div class="col fixs">
         <div class="card">
-          <img class="card-img-top" src="https://via.placeholder.com/150x80" alt="Card image cap">
+          <img class="card-img-top" height="200" src="https://via.placeholder.com/400x200" alt="Card image cap">
-          <div class="card-body">
-            <h5 class="card-title text-light">Fraktale-Welt Studie</h5>
-            <p class="card-text text-light"></p>
-            <i class="fa fa-2x fa-check text-success"></i>
-            <i class="fa fa-2x fa-git-square float-right"></i>
-            <i class="fa fa-2x fa-file-pdf-o float-right"></i>
-          </div>
-        </div>
-      </div>
-      <div class="col fixs">
-        <div class="card">
-          <img class="card-img-top" src="https://via.placeholder.com/150x80" alt="Card image cap">
           <div class="card-body">
             <h5 class="card-title text-light">Arcade-Shooter</h5>
             <p class="card-text text-light">Hausarbeit aus dem 1-Semester</p>
+          </div>
+          <div class="card-footer">
             <i class="fa fa-2x fa-check text-success"></i>
             <i class="fa fa-2x fa-git-square float-right"></i>
-            <i class="fa fa-2x fa-file-pdf-o float-right"></i>
           </div>
         </div>
       </div>