-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
1071 lines (951 loc) · 53.9 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Private Webseite von Florian Kolb">
<meta name="author" content="Florian Kolb">
<title>Portfolio - Florian Kolb</title>
<!--favicon-->
<link rel="icon" href="img/favicon.ico" type="image/ico">
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/agency.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet'
type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body id="page-top" class="index">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand page-scroll" href="#page-top">Florian Kolb</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
<a href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#services">Services</a>
</li>
<li>
<a class="page-scroll" href="#portfolio">Portfolio</a>
</li>
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<!--<li>
<a class="page-scroll" href="#profile">Profile</a>
</li>-->
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
<li>
<a class="portfolio-link" data-toggle="modal" href="#impressum">Impressum</a>
</li>
<li>
<a href="http://www.floriankolb.de/wordpress" target="_blank">Blog</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- Header -->
<header>
<div class="container">
<div class="intro-text">
<div class="intro-lead-in">Welcome To My Website!</div>
<div class="intro-heading">It's Nice To Meet You</div>
<!--<a href="#services" class="page-scroll btn btn-xl">Tell Me More</a>-->
</div>
</div>
</header>
<!-- Services Section -->
<section id="services">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Services</h2>
<h3 class="section-subheading text-muted">Meine Fähigkeiten und Fertigkeiten werden stetig
erweitert.</h3>
</div>
</div>
<div class="row text-center">
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-phone fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">Mobile Apps</h4>
<p class="text-muted">Mobile Apps programmiere ich mit einem Framework namens Ionic. Der Vorteil von
Hybrid-Apps ist das man diese einmal programmiert und dann auf verschiedenen Platformen
veröffentlichen kann.</p>
</div>
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-laptop fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">Websites</h4>
<p class="text-muted">Websiten erstelle ich mit Bootstrap und JS. Dazu kommen noch einige nützliche
Tools
wie SemanticUI oder AngularUI.</p>
</div>
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-desktop fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">Desktop Software</h4>
<p class="text-muted">Die meiste Erfahrung in der Software Programmierung habe ich mit Java und C#.
Des weiteren verfüge ich über Kenntnisse in C.</p>
</div>
</div>
</div>
</section>
<!-- Portfolio Grid Section -->
<section id="portfolio" class="bg-light-gray">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Portfolio</h2>
<h3 class="section-subheading text-muted">Dies sind einige Projekte die ich alleine oder mit anderen
Programmierern realisiert habe. Einige davon sind noch immer noch aktiv.</h3>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-6 portfolio-item">
<a href="#portfolioModal1" class="portfolio-link" data-toggle="modal">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="img/portfolio/Imagequizz.png" class="img-responsive" alt="">
</a>
<div class="portfolio-caption">
<h4>Imagequizz</h4>
<p class="text-muted">Hybrid App</p>
</div>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<a href="#portfolioModal2" class="portfolio-link" data-toggle="modal">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="img/portfolio/RecordsApp.png" class="img-responsive" alt="">
</a>
<div class="portfolio-caption">
<h4>Leistungssammler</h4>
<p class="text-muted">Hybrid App</p>
</div>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<a href="#portfolioModal3" class="portfolio-link" data-toggle="modal">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="img/portfolio/vr-cars_index.png" class="img-responsive" alt="">
</a>
<div class="portfolio-caption">
<h4>VR Cars - Autovermietung</h4>
<p class="text-muted">Website</p>
</div>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<a href="#portfolioModal4" class="portfolio-link" data-toggle="modal">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="img/portfolio/BadeseeApp_Preview.png" class="img-responsive" alt="">
</a>
<div class="portfolio-caption">
<h4>Badesee App</h4>
<p class="text-muted">Hybrid App</p>
</div>
</div>
<!--<div class="col-md-4 col-sm-6 portfolio-item">
<a href="#portfolioModal5" class="portfolio-link" data-toggle="modal">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="img/portfolio/dreams.png" class="img-responsive" alt="">
</a>
<div class="portfolio-caption">
<h4>Activitylogger</h4>
<p class="text-muted">Android App</p>
</div>
</div>-->
</div>
</div>
</section>
<!-- About Section -->
<section id="about">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">About</h2>
<h3 class="section-subheading text-muted">Ein kleiner Überblick meiner wichtigsten
Stationen.</h3>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<ul class="timeline">
<li class="timeline-inverted">
<div class="timeline-image">
<img class="img-circle img-responsive" src="img/about/1.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>2006 - 2009</h4>
<h4 class="subheading">Ausbildung zum Industriekaufmann</h4>
</div>
<div class="timeline-body">
<p class="text-muted">Von August 2006 bis Juli 2009 habe ich erfolgreich meine Ausbildung
zum Industriekaufmann bei der Firma Zimmermann Fenster & Türen abgeschlossen.</p>
</div>
</div>
</li>
<li>
<div class="timeline-image">
<img class="img-circle img-responsive" src="img/about/2.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>2011-2013</h4>
<h4 class="subheading">Studium Maschinenbau</h4>
</div>
<div class="timeline-body">
<p class="text-muted">Von 2011-2013 habe ich drei Semster Maschinbau an der FH Hannover studiert.
Leider lag mir dieser Studiengang nicht besonders aber ich habe viel Erfahrung mit
genommen.</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-image">
<img class="img-circle img-responsive" src="img/about/3.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>März 2013 - März 2017</h4>
<h4 class="subheading">Studium Informatik</h4>
</div>
<div class="timeline-body">
<p class="text-muted">Von 2013 bis 2017 studierte ich an der Technischen Hochschule Mittelhessen in
Gießen Informatik.</p>
</div>
</div>
</li>
<li>
<div class="timeline-image">
<img class="img-circle img-responsive" src="img/about/4.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>März 2013 - November 2015</h4>
<h4 class="subheading">Kletterwald Gießen</h4>
</div>
<div class="timeline-body">
<p class="text-muted">Ebenfalls seit 2013 bin ich im Kletterwald Gießen als Trainer und
seit 2014 als Sicherheitstrainer angestellt gewesen.</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-image">
<img class="img-circle img-responsive" src="img/about/CodeFor.png" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>Januar 2015</h4>
<h4 class="subheading">Code for Germany</h4>
</div>
<div class="timeline-body">
<p class="text-muted">Im Januar 2015 bin ich der gemeinnützigen Organisation von Code for Germany beigetreten. Speziell im OK Lab Gießen entwickeln wir mit offenen Daten für unsere Stadt.</p>
</div>
</div>
</li>
<li>
<div class="timeline-image">
<img class="img-circle img-responsive" src="img/about/3.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>Oktober 2015 - März 2017</h4>
<h4 class="subheading">Uniklinik Gießen - Anästhesie</h4>
</div>
<div class="timeline-body">
<p class="text-muted">Von Oktober 2015 bis März 2017 war ich studentische Hilfskraft in der Sektion Medizinische Informatik
der Anästhesie am UKGM. Ich war zuständig für den reibungslosen Ablauf des PDMS und für den Second-Level Support
der Anwender.</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-image">
<img class="img-circle img-responsive" src="img/about/3.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>Februar 2017</h4>
<h4 class="subheading">MCN Max - (Youtube Partner Management)</h4>
</div>
<div class="timeline-body">
<p class="text-muted">Nach erfolgreicher Beendigung meines Studiums, winkte auch gleich eine vielversprechende neue Stelle auf mich.
Seit Februar 2017 habe ich meine Stelle als Full-Stack Developer bei einer kleinen Firma Namens MCN Max angetreten.
Herzstück der Unternehmens ist eine Verwaltungssoftware für Youtube Netzwerke. Mit Hilfe dieser Software ist es für die Netzwerkbetreiber
leicht ihre Kunden (Content-Creator) zu verwalten und zu betreuen.</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-image">
<h4>And my
<br>career
<br>goes on!</h4>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Profile Section
<section id="profile" class="bg-light-gray">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Profile</h2>
<h3 class="section-subheading text-muted">That's me</h3>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="team-member">
<img src="img/team/3.jpg" class="img-responsive img-circle" alt="">
<h4>Diana Pertersen</h4>
<p class="text-muted">Lead Developer</p>
<ul class="list-inline social-buttons">
<li><a href="#"><i class="fa fa-twitter"></i></a>
</li>
<li><a href="#"><i class="fa fa-facebook"></i></a>
</li>
<li><a href="#"><i class="fa fa-linkedin"></i></a>
</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-8 col-lg-offset-2 text-center">
<p class="large text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut eaque,
laboriosam veritatis, quos non quis ad perspiciatis, totam corporis ea, alias ut unde.</p>
</div>
</div>
</div>
</section>-->
<!-- Clients Aside
<aside class="clients">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<a href="#">
<img src="img/logos/envato.jpg" class="img-responsive img-centered" alt="">
</a>
</div>
<div class="col-md-3 col-sm-6">
<a href="#">
<img src="img/logos/designmodo.jpg" class="img-responsive img-centered" alt="">
</a>
</div>
<div class="col-md-3 col-sm-6">
<a href="#">
<img src="img/logos/themeforest.jpg" class="img-responsive img-centered" alt="">
</a>
</div>
<div class="col-md-3 col-sm-6">
<a href="#">
<img src="img/logos/creative-market.jpg" class="img-responsive img-centered" alt="">
</a>
</div>
</div>
</div>
</aside>-->
<section id="contact">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Contact Me</h2>
<h3 class="section-subheading text-muted">Bitte zögern Sie nicht mich zu kontaktieren.</h3>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<form name="sentMessage" id="contactForm" novalidate>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control" placeholder="Ihr Name *" id="name" required
data-validation-required-message="Bitte geben Sie ihren Namen ein.">
<p class="help-block text-danger"></p>
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Ihre Email *" id="email" required
data-validation-required-message="Bitte geben Sie ihre email Adresse ein.">
<p class="help-block text-danger"></p>
</div>
<div class="form-group">
<input type="tel" class="form-control" placeholder="Ihr Telefon *" id="phone" required
data-validation-required-message="Bitte geben Sie ihre Telefonnummer ein.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<textarea class="form-control" placeholder="Ihre Nachricht an mich *" id="message"
required
data-validation-required-message="Bitten geben Sie eine Nachricht ein."></textarea>
<p class="help-block text-danger"></p>
</div>
</div>
<div class="clearfix"></div>
<div class="col-lg-12 text-center">
<div id="success"></div>
<button type="submit" class="btn btn-xl">Send Message</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="row">
<div class="col-md-4">
<span class="copyright">Copyright © floriankolb.de 2015</span>
</div>
<!--<div class="col-md-4">
<span class="copyright">Template by <a href="http://startbootstrap.com/">StartBootstrap</a> </span>
</div>-->
<div class="col-md-4">
<ul class="list-inline social-buttons">
<li><a href="https://plus.google.com/u/0/102702546256856726088/about/p/pub" target="_blank"><i
class="fa fa-google-plus"></i></a>
</li>
<li><a href="https://www.facebook.com/florian.kolb.75" target="_blank"><i class="fa fa-facebook"></i></a>
</li>
<li><a href="http://de.linkedin.com/pub/florian-kolb/84/859/394" target="_blank"><i
class="fa fa-linkedin"></i></a>
</li>
</ul>
</div>
<div class="col-md-4">
<ul class="list-inline quicklinks">
<li><a class="portfolio-link" href="#impressum" data-toggle="modal">Impressum</a>
</li>
<li><a class="portfolio-link" href="#license" data-toggle="modal">License</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
<!-- Portfolio Modals -->
<!-- Use the modals below to showcase details about your portfolio projects! -->
<!-- Portfolio Modal 1 -->
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<!-- Project Details Go Here -->
<h2>Imagequizz</h2>
<p class="item-intro text-muted">Bilderrätsel App im Rahmen eines Praktikums der Technische
Hochschule Mittelhessen.</p>
<img class="img-responsive" src="img/portfolio/Imagequizz_Preview.png" alt="">
<strong>Views</strong>
<ul class="list-unstyled">
<li>MainView</li>
<li>QuizzView</li>
<li>StatistikView</li>
</ul>
<ul class="list-inline">
<li>Date: January 2015</li>
<li>Client: THM Gießen</li>
<li>Category: Mobile App</li>
</ul>
<button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i>
Close Project
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Portfolio Modal 2 -->
<div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<!-- Project Details Go Here -->
<h2>Leistungssammler</h2>
<p class="item-intro text-muted">App im Rahmen eines Praktikums der Technische
Hochschule Mittelhessen</p>
<img class="img-responsive img-centered" src="img/portfolio/RecordsApp_Preview.png" alt="">
<p>Dies ist eine Hybrid-App geschrieben mit dem ionicFramework und AngularJS. Man kann seine
Leistungen der TH Mittelhessen speichern und sich die Statistiken ausgeben lassen.
RecordListView: anzeigen der gespeicherten Module
RecordFormView: anlegen, ändern und löschen von Modulen(Leistungen)</p>
<p><strong>Implementierte Features</strong></p>
<ul class="list-unstyled">
<li>Statistiken anzeigen lassen</li>
<li>Leistungen in der RecordListView und RecordFormView löschen</li>
<li>Leistungen ändern</li>
<li>Leistungen per Email versenden</li>
<li>Leistungen sortieren und suchen</li>
<li>Modul-Picker</li>
<li>Modulkatalog aktualisieren</li>
<li>App-Icon</li>
<li>optimierte listenansicht</li>
<li>Cloud-Storage</li>
</ul>
<ul class="list-inline">
<li>Date: December 2014</li>
<li>Client: THM Gießen</li>
<li>Category: Mobile App</li>
</ul>
<button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i>
Close Project
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Portfolio Modal 3-->
<div class="portfolio-modal modal fade" id="portfolioModal3" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<!-- Project Details Go Here -->
<h2>Autovermietung</h2>
<p class="item-intro text-muted">Webseite für eine studentische Autovermietung</p>
<img class="img-responsive img-centered" src="img/portfolio/vr-cars_cars.png" alt="">
<p>Dieses Projekt realisiert eine Website für eine Autovermietung. Anders als bei anderen
Vermietungen richtet sich hierbei der Fokus auf Studenten. Das Projekt wurde mit Twitter Bootstrap und einem United Template umgesetzt.</p>
<ul class="list-inline">
<li>Date: March 2015</li>
<li>Client: VR Cars Gießen</li>
<li>Category: Website</li>
</ul>
<button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i>
Close Project
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Portfolio Modal 4 -->
<div class="portfolio-modal modal fade" id="portfolioModal4" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>Badesee App</h2>
<p class="item-intro text-muted">Badesee App für das Land Hessen</p>
<img class="img-responsive img-centered" src="img/portfolio/BadeseeApp_Preview.png" alt="">
<p>Das Projekt der Badesee App ist im Rahmen meiner Tätigkeit als ehrenamtlicher Entwickler beim <a href="http://codefor.de/giessen/" target="_blank">OK Lab Gießen</a> entstanden. Zur Zeit befindet sich das Projekt in der Endphase und soll voraussichtlich im August 2015 herausgebracht werden.</p>
<p>Weitere Infos zur App und zum Release <a href="http://codefor.de/projekte/2014-08-19-badeseen.html" target="_blank">hier klicken.</a></p>
<ul class="list-inline">
<li>Date: August 2015</li>
<li>Client: HLUG Hessen</li>
<li>Category: Mobile App</li>
</ul>
<button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!--<!– Portfolio Modal 5 –>
<div class="portfolio-modal modal fade" id="portfolioModal6" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<!– Project Details Go Here –>
<h2>Activitylogger</h2>
<p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>
<img class="img-responsive img-centered" src="img/portfolio/dreams-preview.png" alt="">
<p>Dreams is a free PSD web template built by <a href="https://www.behance.net/MathavanJaya">Mathavan Jaya</a>. Dreams is a modern one page web template designed for almost any purpose. It’s a beautiful template that’s designed with the Bootstrap framework in mind.</p>
<p>You can download the PSD template in this portfolio sample item at <a href="http://freebiesxpress.com/gallery/dreams-free-one-page-web-template/">FreebiesXpress.com</a>.</p>
<button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button>
</div>
</div>
</div>
</div>
</div>
</div>
-->
<!-- Impressum Modal -->
<div class="portfolio-modal modal fade" id="impressum" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>Impressum</h2>
Für diese Website ist verantwortlich gemäß
Teledienstgesetz:
<p>
<br/> <span style="font-weight: bold;">Florian Kolb</span><br/> <br/>
Zweck der Website: Website einer Privatperson; sämtliche Inhalte
dienen ausdrücklich nicht der politischen, kulturellen,
ethischen, moralischen oder öffentlichen Meinungsbildung
gemäß MDSTv
</p>
<p>E-Mail</p>
<p>
E-Mail: <a href="mailto:flo@floriankolb.de"><span>flo@floriankolb.de</span></a>
</p>
<h2 class="center aligned ui header">
Nutzungsbedingungen
</h2>
<p>Die Benutzung des Online-Angebotes
(floriankolb.de inklusive aller Unterseiten) von
Florian Kolb- (im Folgenden "Anbieter" genannt) erfolgt
ausschließlich auf Gefahr des Benutzers/Besuchers. Weder der
Anbieter noch eine andere, an der Erstellung des Online-Angebotes
beteiligte Partei übernimmt eine Haftung für direkte,
indirekte oder Folgeschäden jeglicher Art. Insbesondere
übernimmt der Anbieter keinerlei Haftung für eventuelle
Schäden, die auf Viren, mögliche
Kompatibilitätsprobleme des Systems und/oder technische
Störungen zurückzuführen sind.</p>
<p>
Alle Texte und Informationen dieses Online-Angebotes (Website) wurden
sorgfältigst zusammengestellt, etwaige Fehler oder Unklarheiten
können jedoch nicht ausgeschlossen werden. Daher übernimmt
weder der Anbieter, noch eine andere an der Erstellung oder
Administration des Online-Angebotes beteiligte Partei, eine Haftung
hinsichtlich der Richtigkeit und/oder Vollständigkeit der
Informationen dieser Website. Dies gilt auch für
direkte/indirekte Schäden, die durch Missbrauch der angebotenen
Informationen entstehen könnten.<br/> Für die Inhalte,
Funktionstüchtigkeit und Technik von Websites, auf die im Rahmen
dieses Online-Angebotes per Hyperlink (Link) verwiesen wird, wird
keine Haftung übernommen. Die auf verlinkten Websites
vertretenen Meinungen und Ansichten sind Meinungen/Ansichten des
jeweiligen Betreibers und entsprechen nicht notwendigerweise den
Meinungen/Ansichten des Anbieters (oder einer anderen an der
Erstellung oder Administration des Online-Angebotes beteiligten
Partei). Der Anbieter distanziert sich ausdrücklich von rechts-
und sittenwidrigen Inhalten auf verlinkten Websites!
</p>
<p>SALVATORISCHE KLAUSEL:</p>
<p>Sofern eine Bestimmung dieser Nutzungsbedingungen unwirksam ist
oder wird, oder in ihrer Form unvollständig ist, tritt an ihre
Stelle die gültige Bestimmung, die dem Rechtsgedanken der
unwirksamen Bestimmung am nächsten kommt.</p>
<p>Giessen, 11.01.2015</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!--License Modal -->
<div class="portfolio-modal modal fade" id="license" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>Apache License</h2>
<p>Version 2.0, January 2004<br/>
http://www.apache.org/licenses/<br/></p>
<p>TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION</p>
<p>1. Definitions.</p>
<p>"License" shall mean the terms and conditions for use, reproduction,
and distribution as defined by Sections 1 through 9 of this document.</p>
<p>"Licensor" shall mean the copyright owner or entity authorized by
the copyright owner that is granting the License.</p>
<p>"Legal Entity" shall mean the union of the acting entity and all
other entities that control, are controlled by, or are under common
control with that entity. For the purposes of this definition,
"control" means (i) the power, direct or indirect, to cause the
direction or management of such entity, whether by contract or
otherwise, or (ii) ownership of fifty percent (50%) or more of the
outstanding shares, or (iii) beneficial ownership of such entity.</p>
<p>"You" (or "Your") shall mean an individual or Legal Entity
exercising permissions granted by this License.</p>
<p>"Source" form shall mean the preferred form for making modifications,
including but not limited to software source code, documentation
source, and configuration files.</p>
<p>"Object" form shall mean any form resulting from mechanical
transformation or translation of a Source form, including but
not limited to compiled object code, generated documentation,
and conversions to other media types.</p>
<p>"Work" shall mean the work of authorship, whether in Source or
Object form, made available under the License, as indicated by a
copyright notice that is included in or attached to the work
(an example is provided in the Appendix below).</p>
<p>"Derivative Works" shall mean any work, whether in Source or Object
form, that is based on (or derived from) the Work and for which the
editorial revisions, annotations, elaborations, or other modifications
represent, as a whole, an original work of authorship. For the purposes
of this License, Derivative Works shall not include works that remain
separable from, or merely link (or bind by name) to the interfaces of,
the Work and Derivative Works thereof.</p>
<p>"Contribution" shall mean any work of authorship, including
the original version of the Work and any modifications or additions
to that Work or Derivative Works thereof, that is intentionally
submitted to Licensor for inclusion in the Work by the copyright owner
or by an individual or Legal Entity authorized to submit on behalf of
the copyright owner. For the purposes of this definition, "submitted"
means any form of electronic, verbal, or written communication sent
to the Licensor or its representatives, including but not limited to
communication on electronic mailing lists, source code control systems,
and issue tracking systems that are managed by, or on behalf of, the
Licensor for the purpose of discussing and improving the Work, but
excluding communication that is conspicuously marked or otherwise
designated in writing by the copyright owner as "Not a Contribution."</p>
<p>"Contributor" shall mean Licensor and any individual or Legal Entity
on behalf of whom a Contribution has been received by Licensor and
subsequently incorporated within the Work.</p>
<p>2. Grant of Copyright License.</p>
<p>Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
copyright license to reproduce, prepare Derivative Works of,
publicly display, publicly perform, sublicense, and distribute the
Work and such Derivative Works in Source or Object form.</p>
<p>3. Grant of Patent License.</p>
<p>Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
(except as stated in this section) patent license to make, have made,
use, offer to sell, sell, import, and otherwise transfer the Work,
where such license applies only to those patent claims licensable
by such Contributor that are necessarily infringed by their
Contribution(s) alone or by combination of their Contribution(s)
with the Work to which such Contribution(s) was submitted. If You
institute patent litigation against any entity (including a
cross-claim or counterclaim in a lawsuit) alleging that the Work
or a Contribution incorporated within the Work constitutes direct
or contributory patent infringement, then any patent licenses
granted to You under this License for that Work shall terminate
as of the date such litigation is filed.</p>
<p>4. Redistribution.</p>
<p>You may reproduce and distribute copies of the
Work or Derivative Works thereof in any medium, with or without
modifications, and in Source or Object form, provided that You
meet the following conditions:</p>
<p>(a) You must give any other recipients of the Work or
Derivative Works a copy of this License; and</p>
<p>(b) You must cause any modified files to carry prominent notices
stating that You changed the files; and</p>
<p>(c) You must retain, in the Source form of any Derivative Works
that You distribute, all copyright, patent, trademark, and
attribution notices from the Source form of the Work,
excluding those notices that do not pertain to any part of
the Derivative Works; and</p>
<p>(d) If the Work includes a "NOTICE" text file as part of its
distribution, then any Derivative Works that You distribute must
include a readable copy of the attribution notices contained
within such NOTICE file, excluding those notices that do not
pertain to any part of the Derivative Works, in at least one
of the following places: within a NOTICE text file distributed
as part of the Derivative Works; within the Source form or
documentation, if provided along with the Derivative Works; or,
within a display generated by the Derivative Works, if and
wherever such third-party notices normally appear. The contents
of the NOTICE file are for informational purposes only and
do not modify the License. You may add Your own attribution
notices within Derivative Works that You distribute, alongside
or as an addendum to the NOTICE text from the Work, provided
that such additional attribution notices cannot be construed
as modifying the License.</p>
<p>You may add Your own copyright statement to Your modifications and
may provide additional or different license terms and conditions
for use, reproduction, or distribution of Your modifications, or
for any such Derivative Works as a whole, provided Your use,
reproduction, and distribution of the Work otherwise complies with
the conditions stated in this License.</p>
<p>5. Submission of Contributions.</p>
<p>Unless You explicitly state otherwise,
any Contribution intentionally submitted for inclusion in the Work
by You to the Licensor shall be under the terms and conditions of
this License, without any additional terms or conditions.
Notwithstanding the above, nothing herein shall supersede or modify
the terms of any separate license agreement you may have executed
with Licensor regarding such Contributions.</p>
<p>6. Trademarks.</p>
<p>This License does not grant permission to use the trade
names, trademarks, service marks, or product names of the Licensor,
except as required for reasonable and customary use in describing the
origin of the Work and reproducing the content of the NOTICE file.</p>
<p>7. Disclaimer of Warranty.</p>
<p>Unless required by applicable law or
agreed to in writing, Licensor provides the Work (and each
Contributor provides its Contributions) on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
implied, including, without limitation, any warranties or conditions
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
PARTICULAR PURPOSE. You are solely responsible for determining the
appropriateness of using or redistributing the Work and assume any
risks associated with Your exercise of permissions under this License.</p>
<p>8. Limitation of Liability.</p>
<p>In no event and under no legal theory,
whether in tort (including negligence), contract, or otherwise,
unless required by applicable law (such as deliberate and grossly
negligent acts) or agreed to in writing, shall any Contributor be
liable to You for damages, including any direct, indirect, special,
incidental, or consequential damages of any character arising as a
result of this License or out of the use or inability to use the
Work (including but not limited to damages for loss of goodwill,