1514 lines
53 KiB
HTML
1514 lines
53 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en" class="no-js">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>beWerbung</title>
|
||
<meta name="description" content="beWerbung" />
|
||
<meta name="keywords" content="title, header, effect, scroll, inspiration, medium, web design" />
|
||
<meta name="Sebastian Fröhlich" content="beWerbung" />
|
||
<link rel="shortcut icon" href="../favicon.ico">
|
||
|
||
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
|
||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
|
||
|
||
<!-- Waypoint & Modernizr-->
|
||
<script src="js/waypoints.min.js"></script>
|
||
<script src="js/modernizr.js"></script>
|
||
|
||
<!--gcharts Load the AJAX API-->
|
||
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
|
||
|
||
<!-- Bootstrap -->
|
||
<link href="css/bootstrap.min.css" rel="stylesheet">
|
||
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
|
||
|
||
<!-- Styles -->
|
||
<link rel="stylesheet" type="text/css" href="css/component-new.css" />
|
||
<link href="css/styles.css" rel="stylesheet">
|
||
<link href="css/magic.css" rel="stylesheet">
|
||
|
||
<link href="css/queries.css" rel="stylesheet">
|
||
<link href="css/animate.css" rel="stylesheet">
|
||
<link href="css/flexslider.css" rel="stylesheet">
|
||
|
||
|
||
<!--[if IE]>
|
||
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
|
||
|
||
<![endif]-->
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<div id="container-fluid" class="intro-effect-push">
|
||
|
||
<!-- Header bg -->
|
||
<header class="header">
|
||
<div class="bg-img"></div>
|
||
<section id="hero" class="hero" style="margin-top: 1%">
|
||
<div class="container">
|
||
<div class="row" style="position: absolute; z-index: 3333">
|
||
<div class="col-md-12 col-md-offset-4 text-center inner">
|
||
<h1 class="animated fadeInDown">be<span>Werbung</span></h1>
|
||
<p class="animated fadeInUp delay-05s">Die Bewerberwebseite von <em><br/>Sebastian Fröhlich</em></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<div><button class="trigger" data-info="Bitte runter scrollen"><span>Trigger</span></button></div>
|
||
|
||
</header>
|
||
|
||
<div class="row">
|
||
<div class="col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-8 col-xs-offset-2">
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
<!-- Intro-Text -->
|
||
<section class="intro text-center section-padding article" id="intro">
|
||
<div class="container">
|
||
<div style="height: 5em"></div>
|
||
<div class="row">
|
||
<div class="col-md-8 col-md-offset-2 wp1">
|
||
<h1 class="arrow">Über mich</h1>
|
||
<p>Ich bin 42 Jahre alt und seit ich mit 11 Jahren einen Homecomputer geschenkt bekam, hat mich die Faszination nicht mehr losgelassen. Mein Werdegang war ganz klassisch vom Commodore C64 über Amiga bis hin zum PC und Mac.</p>
|
||
<p>Heute beschäftige ich mich u.a. mit PHP Frameworks, Shop- und CMS Systemen, Datenbanken, Programmierung und Architektur.</p>
|
||
<p>Mit meinem Wissen und meiner Affinität zum Internet und Webbasierten Lösungen arbeitete ich in den vergangenen Jahren nebenberuflich auch als Freelancer mit Kunden aus unterschiedlichen Branchen zusammen. <a href="#portfolioSlider">Hier</a> eine Auswahl meiner bisherigen Arbeiten.</p>
|
||
<p>Zum Ausgleich mache ich in meiner Freizeit, neben der Beschäfitung mit neuen Technologien, gerne Sport, wie z.B. Radfahren, Inlineskaten und Segeln. Außerdem fotografiere und lese ich gerne.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Download-Lebenslauf -->
|
||
<section class="swag text-center bg1">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-md-8 col-md-offset-2">
|
||
<h1>Sebastian Fröhlich<span>Mein <em>Lebenslauf</em> herunterladen</span></h1>
|
||
<a class="ignite-btn" target="_blank" href="downloads/Lebenslauf2020.pdf">Jetzt downloaden</a>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<!--Letzte Tätigkeit - Responsive Slider -->
|
||
<section class="text-center" id="responsive">
|
||
<div class="container-fluid nopadding responsive-services">
|
||
<div class="wrapper">
|
||
<div class="iphone">
|
||
<div class="wp3"></div>
|
||
</div>
|
||
<div class="fluid-white"></div>
|
||
</div>
|
||
<div class="container designs">
|
||
<div class="row">
|
||
<div class="col-md-5 col-md-offset-7">
|
||
<div id="servicesSlider">
|
||
<ul class="slides">
|
||
<li>
|
||
<h1 class="arrow">Letzte Tätigkeit</h1>
|
||
<p>Bis Feb 2019 war ich als Leiter der IT in einem internationalen Unternehmen im Bereich Fahrzeugtechnik in Georgensgmünd tätig. Hier war ich für folgende Bereiche verantwortlich:</p>
|
||
|
||
<ul style="list-style-type: disc; text-align: left">
|
||
<li><p>Programmierung & Weiterentwicklung der Online Shops</p></li>
|
||
<li><p>Anbindung der Warenwirtschaft</p></p></li>
|
||
<li><p>Aufbau und Entwicklung eines Intranets</p></li>
|
||
<li><p>Architektur der Datenbanken</p></li>
|
||
<li><p>API Schnittstellenprogrammierung</p></li>
|
||
<li><p>Migration/ Neuaufbau und Entwicklung der Linux Server</p></li>
|
||
</ul>
|
||
|
||
<li>
|
||
<h1 class="arrow">Letzte Tätigkeiten</h1>
|
||
<p>Ab Februar 2019 war ich als Product Owner in einem Nürnberger Unternehmen, dass mobile Applikationen zur Digitalisierung von Prozessen hergestellt hat. Hier war ich für folgende Bereich zuständig: </p>
|
||
|
||
<ul style="list-style-type: disc; text-align: left">
|
||
<li><p>Abklärung der Anforderungen zwischen Stakeholdern und Entwicklern</p></li>
|
||
<li><p>Planung und Priorisierung der Ressourcen & Aufgaben</p></li>
|
||
<li><p>Technische Kommunikation und Architektur</p></li>
|
||
<li><p>Migration der bestehenden Infrastruktur in die MagentaCloud (Kubernetes)</p></li>
|
||
<li><p>Weiterentwicklung des Produktes</p></li>
|
||
</ul>
|
||
|
||
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Fähigkeiten -->
|
||
<section class="team text-center section-padding hidden-xs" id="team">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-md-12">
|
||
<h1 class="arrow">Kompetenzdarium</h1>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="team-wrapper">
|
||
<div id="teamSlider">
|
||
<ul class="slides">
|
||
<li>
|
||
<div class="col-md-4 wp5">
|
||
<img src="img/icons-os.png" alt="OS">
|
||
<h2>Betriebsysteme</h2>
|
||
<p>Unabhängig welches Betriebssystem Sie in Ihrem Betrieb einsetzen, ich bin gewappnet.</p>
|
||
<div class="social">
|
||
<ul class="social-buttons">
|
||
<li><p>mehr erfahren...</p><a href="#kompetenz1Modal" class="social-btn" id="kompetenz1"><i class="fa fa-search"></i></a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-4 wp5">
|
||
<img src="img/icons-cms.png" alt="CMS Systeme">
|
||
<h2>CMS Systeme</h2>
|
||
<p>Unabhängig welches CMS-System Sie in Ihrem Betrieb einsetzen, ich bin gewappnet.</p>
|
||
<div class="social">
|
||
<ul class="social-buttons">
|
||
<li><p>mehr erfahren...</p><a href="#kompetenz4Modal" class="social-btn" id="kompetenz4"><i class="fa fa-search"></i></a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-4 wp5 delay-05s">
|
||
<img src="img/icons-web.png" alt="Web Code">
|
||
<h2>Programmieren</h2>
|
||
<p>Unabhängig welche Programmiersprache Sie in Ihrem Betrieb fordern, ich bin gewappnet.</p>
|
||
<div class="social">
|
||
<ul class="social-buttons">
|
||
<li><p>mehr erfahren...</p><a href="#kompetenz5Modal" class="social-btn" id="kompetenz5"><i class="fa fa-search"></i></a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<div class="col-md-4 wp5 delay-05s">
|
||
<img src="img/icons-office.png" alt="Office">
|
||
<h2>Officeprogramme</h2>
|
||
<p>Unabhängig welche Office Programme Sie in Ihrem Betrieb einsetzen, ich bin gewappnet.</p>
|
||
<div class="social">
|
||
<ul class="social-buttons">
|
||
<li><p>mehr erfahren...</p><a href="#kompetenz2Modal" class="social-btn" id="kompetenz2"><i class="fa fa-search"></i></a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4 wp5 delay-1s">
|
||
<img src="img/icons-gfx.png" alt="grafikprogramme">
|
||
<h2>Grafikprogramme</h2>
|
||
<p>Unabhängig welche Grafiksoftware Sie in Ihrem Betrieb einsetzen, ich bin gewappnet.</p>
|
||
<div class="social">
|
||
<ul class="social-buttons">
|
||
<li><p>mehr erfahren...</p><a href="#kompetenz3Modal" class="social-btn" id="kompetenz3"><i class="fa fa-search"></i></a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-4 wp5 delay-1s">
|
||
<img src="img/icons-marketing.png" alt="Web Marketing">
|
||
<h2>Marketing</h2>
|
||
<p>Unabhängig welche Marketingtools Sie in Ihrem Betrieb einsetzen, ich bin gewappnet.</p>
|
||
<div class="social">
|
||
<ul class="social-buttons">
|
||
<li><p>mehr erfahren...</p><a href="#kompetenz6Modal" class="social-btn" id="kompetenz6"><i class="fa fa-search"></i></a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Modal - Kompetenz1 -->
|
||
<div class="modal fade" id="kompetenz1Modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
|
||
<h4><strong>Betriebssysteme</strong></h4>
|
||
</div>
|
||
|
||
<div class="modal-body">
|
||
<!--
|
||
<div style="background: white; height: 5px"></div>
|
||
<div id="kompetenz1slider">
|
||
<ul class="slides">
|
||
<li>
|
||
|
||
<div id="chart_os"></div>
|
||
|
||
<p align="center" style="max-height: 200px">Egal auf welche Plattform Sie in Ihrem Betrieb setzen, <strong>Sebastian Fröhlich</strong> kennt sich auf den 3 weitverbreitesten aus!</p>
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
-->
|
||
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
|
||
<!-- Indicators -->
|
||
<ol class="carousel-indicators">
|
||
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
|
||
</ol>
|
||
|
||
<!-- Wrapper for slides -->
|
||
<div class="carousel-inner">
|
||
<div class="item active">
|
||
<div id="chart_os"></div>
|
||
<div class="carousel-caption">
|
||
<p>Egal auf welche Plattform Sie in Ihrem Betrieb setzen, <strong>Sebastian Fröhlich</strong> kennt sich auf den 3 weitverbreitesten aus!</p>
|
||
</div>
|
||
</div><!-- Ende Active Item -->
|
||
|
||
<!--
|
||
<div class="item">
|
||
|
||
<div class="carousel-caption">
|
||
...
|
||
</div>
|
||
</div>
|
||
--><!-- Ende Item -->
|
||
|
||
</div>
|
||
|
||
</div><!-- Ende Carousel -->
|
||
|
||
</div><!-- Ende Modal Body -->
|
||
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Modal - Kompetenz2 -->
|
||
<div class="modal fade" id="kompetenz2Modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
|
||
<h4><strong>Office Software</strong></h4>
|
||
</div>
|
||
|
||
<div class="modal-body">
|
||
<!--
|
||
<div id="kompetenz2slider">
|
||
<ul class="slides">
|
||
<li>
|
||
<div id="chart_office"></div>
|
||
<p>Bürosoftware ist aus keinem Betrieb wegzudenken. Unabhängig von der eingesetzen Lösung in Ihrem Betrieb, kennt sich <strong>Sebastian Fröhlich</strong> mit den meisten eingesetzten Lösungen aus.</p>
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
|
||
-->
|
||
|
||
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
|
||
<!-- Indicators -->
|
||
<ol class="carousel-indicators">
|
||
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
|
||
</ol>
|
||
|
||
<!-- Wrapper for slides -->
|
||
<div class="carousel-inner">
|
||
<div class="item active">
|
||
<div id="chart_office"></div>
|
||
<div class="carousel-caption">
|
||
<p>Bürosoftware ist aus keinem Betrieb wegzudenken. Unabhängig von der eingesetzen Lösung in Ihrem Betrieb, kennt sich <strong>Sebastian Fröhlich</strong> mit den meisten eingesetzten Lösungen aus.</p>
|
||
</div>
|
||
</div><!-- Ende Active Item -->
|
||
|
||
<!--
|
||
<div class="item">
|
||
|
||
<div class="carousel-caption">
|
||
...
|
||
</div>
|
||
</div>
|
||
--><!-- Ende Item -->
|
||
|
||
</div>
|
||
|
||
</div><!-- Ende Carousel -->
|
||
|
||
</div><!-- Ende Modal Body -->
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Modal - Kompetenz3 -->
|
||
<div class="modal fade" id="kompetenz3Modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
|
||
<h4><strong>Grafik Software</strong></h4>
|
||
</div>
|
||
|
||
<div class="modal-body">
|
||
<!--
|
||
<div id="kompetenz3slider">
|
||
<ul class="slides">
|
||
<li>
|
||
<div id="chart_DTP"></div>
|
||
<div style="height: 20px"></div>
|
||
<p>Desktop Publishing Software setzt <strong>Sebastian Fröhlich </strong>bereits seit seiner Lehre ein (damals Corel Ventura). Und kann auf eine Vielzahl an Programmen zurückgreifen mit denen er bereits gearbeitet hat.</p>
|
||
</li>
|
||
<li>
|
||
<div id="chart_bitmap"></div>
|
||
<div style="height: 20px"></div>
|
||
<p>Bitmap Programme wie Photoshop oder auch aus Freeware Programme wie Gimp gehören zum Alltag in der Mediengestaltung. <strong>Sebastian Fröhlich</strong> kennt die meisten, unabhängig welches Sie in Ihrem Betrieb einsetzen.</p>
|
||
</li>
|
||
<li>
|
||
<div id="chart_vektor"></div>
|
||
<div style="height: 20px"></div>
|
||
<p>Unabhängig vom eingesetzen Vektorprogramm in Ihrem Betrieb <strong>Sebastian Fröhlich</strong> kennt sich aus.</p>
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
-->
|
||
|
||
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
|
||
<!-- Indicators -->
|
||
<ol class="carousel-indicators">
|
||
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
|
||
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
|
||
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
|
||
</ol>
|
||
|
||
<!-- Wrapper for slides -->
|
||
<div class="carousel-inner">
|
||
<div class="item active">
|
||
<div id="chart_DTP"></div>
|
||
<div class="carousel-caption">
|
||
<p>Desktop Publishing Software setzt <strong>Sebastian Fröhlich </strong>bereits seit seiner Lehre ein (damals Corel Ventura). Und kann auf eine Vielzahl an Programmen zurückgreifen mit denen er bereits gearbeitet hat.</p>
|
||
</div>
|
||
</div><!-- Ende Active Item -->
|
||
|
||
<div class="item">
|
||
<div id="chart_bitmap"></div>
|
||
<div class="carousel-caption">
|
||
<p>Bitmap Programme wie Photoshop oder auch aus Freeware Programme wie Gimp gehören zum Alltag in der Mediengestaltung. <strong>Sebastian Fröhlich</strong> kennt die meisten, unabhängig welches Sie in Ihrem Betrieb einsetzen.</p>
|
||
</div>
|
||
</div><!-- Ende Item -->
|
||
|
||
<div class="item">
|
||
<div id="chart_vektor"></div>
|
||
<div class="carousel-caption">
|
||
<p>Unabhängig vom eingesetzen Vektorprogramm in Ihrem Betrieb <strong>Sebastian Fröhlich</strong> kennt sich aus.</p>
|
||
</div>
|
||
</div><!-- Ende Item -->
|
||
|
||
|
||
</div>
|
||
|
||
</div><!-- Ende Carousel -->
|
||
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Modal - Kompetenz4 -->
|
||
<div class="modal fade" id="kompetenz4Modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
|
||
<h4><strong>CMS-Systeme</strong></h4>
|
||
</div>
|
||
|
||
<div class="modal-body">
|
||
<!--
|
||
<div id="kompetenz4slider">
|
||
<ul class="slides">
|
||
<li>
|
||
<div id="chart_cms"></div>
|
||
<p>Ganz gleich ob es Ihnen um die Pflege oder Weiterentwicklung ihrer Webseite bzw. Onlineshops geht. <strong>Sebastian Fröhlich</strong> kennt sich mit vielen beliebten CMS-Systemen aus.</p>
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
-->
|
||
|
||
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
|
||
<!-- Indicators -->
|
||
<ol class="carousel-indicators">
|
||
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
|
||
</ol>
|
||
|
||
<!-- Wrapper for slides -->
|
||
<div class="carousel-inner">
|
||
<div class="item active">
|
||
<div id="chart_cms"></div>
|
||
<div class="carousel-caption">
|
||
<p>Ganz gleich ob es Ihnen um die Pflege oder Weiterentwicklung ihrer Webseite bzw. Onlineshops geht. <strong>Sebastian Fröhlich</strong> kennt sich mit vielen beliebten CMS-Systemen aus.</p>
|
||
</div>
|
||
</div><!-- Ende Active Item -->
|
||
|
||
<!--
|
||
<div class="item">
|
||
|
||
<div class="carousel-caption">
|
||
...
|
||
</div>
|
||
</div>
|
||
--><!-- Ende Item -->
|
||
|
||
</div>
|
||
|
||
</div><!-- Ende Carousel -->
|
||
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Modal - Kompetenz5 -->
|
||
<div class="modal fade" id="kompetenz5Modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
|
||
<h4><strong>Programmierkenntnisse</strong></h4>
|
||
</div>
|
||
|
||
<div class="modal-body">
|
||
<!--
|
||
<div id="kompetenz5slider">
|
||
<ul class="slides">
|
||
<li>
|
||
<div id="chart_code"></div>
|
||
<p>Die Pflege oder Weiterentwicklung moderner Webseites fordert eine Vielzahl an Programmier- bzw. Scriptsprachen. <strong>Sebastian Fröhlich</strong> kennt die wichtigsten.</p>
|
||
</li>
|
||
<li>
|
||
<div id="chart_frameworks"></div>
|
||
<p>Ergänzt wird das Wissen um Frameworks und Content Construction Kits (CCK), die ein schnelle und angepasste Modellierung moderner Webapplikationen möglich macht.
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
-->
|
||
|
||
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
|
||
<!-- Indicators -->
|
||
<ol class="carousel-indicators">
|
||
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
|
||
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
|
||
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
|
||
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
|
||
</ol>
|
||
|
||
<!-- Wrapper for slides -->
|
||
<div class="carousel-inner">
|
||
<div class="item active">
|
||
|
||
<div id="chart_code"></div>
|
||
<div class="carousel-caption">
|
||
<p><strong>Frontend:</strong> Die Pflege und Weiterentwicklung moderner Webseites fordert eine Vielzahl an Programmier- und Scriptsprachen. <strong>Sebastian Fröhlich</strong> kennt die wichtigsten.</p>
|
||
</div>
|
||
</div><!-- Ende Active Item -->
|
||
|
||
<div class="item">
|
||
<div id="chart_frameworks"></div>
|
||
<div class="carousel-caption">
|
||
<p>Backend: Die Modelierung und Architektur moderner Webapplikationen benötigen ein starken Backendservice. Gut das <strong>Sebastian Fröhlich</strong> die wichtigsten kennt.</p>
|
||
</div>
|
||
</div><!-- Ende Item -->
|
||
|
||
<div class="item">
|
||
<div id="chart_databases"></div>
|
||
<div class="carousel-caption">
|
||
<p>DevOp: Deployments auf Servern, einrichten von Services, Datenbanken und API´s. Gut das <strong>Sebastian Fröhlich</strong> die wichtigsten kennt.</p>
|
||
</div>
|
||
</div><!-- Ende Item -->
|
||
|
||
<div class="item">
|
||
<div id="chart_tools"></div>
|
||
<div class="carousel-caption">
|
||
<p>Tools für ein modernes agiles Arbeiten und zur Entwicklung. Gut das <strong>Sebastian Fröhlich</strong> die wichtigsten kennt.</p>
|
||
</div>
|
||
</div><!-- Ende Item -->
|
||
|
||
</div>
|
||
|
||
|
||
|
||
</div><!-- Ende Carousel -->
|
||
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Modal - Kompetenz6 -->
|
||
<div class="modal fade" id="kompetenz6Modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
|
||
<h4><strong>Marketing & Online Tools</strong></h4>
|
||
</div>
|
||
|
||
<div class="modal-body">
|
||
<!--
|
||
<div id="kompetenz6slider">
|
||
<ul class="slides">
|
||
<li>
|
||
<div id="chart_marketing"></div>
|
||
<p>Zahlen, Daten, Fakten - Measurement im Onlinebereich und Pageranking sind für <strong>Sebastian Fröhlich</strong> keine Fremdworte.</p>
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
-->
|
||
|
||
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
|
||
<!-- Indicators -->
|
||
<ol class="carousel-indicators">
|
||
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
|
||
</ol>
|
||
|
||
<!-- Wrapper for slides -->
|
||
<div class="carousel-inner">
|
||
<div class="item active">
|
||
<div id="chart_marketing"></div>
|
||
<div class="carousel-caption">
|
||
<p>Zahlen, Daten, Fakten - Measurement im Onlinebereich und Pageranking sind für <strong>Sebastian Fröhlich</strong> keine Fremdworte.</p>
|
||
</div>
|
||
</div><!-- Ende Active Item -->
|
||
|
||
<!--
|
||
<div class="item">
|
||
|
||
<div class="carousel-caption">
|
||
...
|
||
</div>
|
||
</div>
|
||
--><!-- Ende Item -->
|
||
|
||
</div>
|
||
|
||
</div><!-- Ende Carousel -->
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
|
||
<!-- Download-Zeugnisse -->
|
||
<section class="swag text-center bg2">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-md-8 col-md-offset-2">
|
||
<h1>Sebastian Fröhlich<span>Meine <em>Arbeitszeugnisse</em> herunterladen</span></h1>
|
||
<a class="ignite-btn" target="_blank" href="downloads/Zeugnisse.pdf">Jetzt downloaden</a>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
|
||
|
||
<!-- Freelancer Tätigkeiten -->
|
||
<section class="features text-center section-padding" id="features">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-md-12">
|
||
<h1 class="arrow">Freelancer Tätigkeiten</h1>
|
||
<p>Zwischen ca. 2005 bis ca. 2015 war ich auch als Freelancer tätig und arbeitete mit Kunden und Agenturen zusammen. Eine Auswahl meiner Arbeiten aus diesem Zeitraum habe ich Ihnen hier zusammengestellt.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!--
|
||
<section class="swag text-center">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-md-8 col-md-offset-2">
|
||
<h1>I got 99 Problems<span>but <em>design</em> 'aint one</span></h1>
|
||
<a href="#portfolio" class="down-arrow-btn"><i class="fa fa-chevron-down"></i></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
-->
|
||
|
||
<!-- Portfolio -->
|
||
<section class="portfolio text-center section-padding" id="portfolio">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div id="portfolioSlider">
|
||
<ul class="slides">
|
||
<li>
|
||
<div class="col-md-4 wp4">
|
||
<div class="overlay-effect effects clearfix">
|
||
<div class="img">
|
||
<img src="img/Referenz - e-stev -Web.jpg" alt="Portfolio Item">
|
||
<div class="overlay">
|
||
<a href="#myModal" class="expand" id="web1"><i class="fa fa-search"></i><br>View More</a>
|
||
<a class="close-overlay hidden">x</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<h2>Creative Web</h2>
|
||
<p>2013 wurde für die neugegründete <strong>STEV Radport GmbH</strong> in Gunzenhausen die Webseite e-stev von Grund auf neu geschaffen und für ein CMS umgesetzt.</p>
|
||
</div>
|
||
<div class="col-md-4 wp4 delay-05s">
|
||
<div class="overlay-effect effects clearfix">
|
||
<div class="img">
|
||
<img src="img/Referenz---Planet-Touristik---web.jpg" alt="Portfolio Item">
|
||
<div class="overlay">
|
||
<a href="#myModal" class="expand" id="web2"><i class="fa fa-search"></i><br>View More</a>
|
||
<a class="close-overlay hidden">x</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<h2>Creative web</h2>
|
||
<p>Für <strong>Planet-Touristik</strong> das Reisebüro im Nürnberger Norden wurde die Startseite 2014 einem Redesign unterworfen. Die Implementierung in das bereits vorhandene Ökosystem wird von deren Partner <strong>effective-shops</strong> vorgenommen.</p>
|
||
</div>
|
||
<div class="col-md-4 wp4 delay-1s">
|
||
<div class="overlay-effect effects clearfix">
|
||
<div class="img">
|
||
<img src="img/Referenz---handstaubsauger---web.jpg" alt="Portfolio Item">
|
||
<div class="overlay">
|
||
<a href="#myModal" class="expand" id="web3"><i class="fa fa-search"></i><br>View More</a>
|
||
<a class="close-overlay hidden">x</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<h2>Creative Web</h2>
|
||
<p>Für <strong>handstaubsauger24.de</strong> wurde ein Magento e-commerce Template gestaltet. Die Umsetzung wurde von deren ausländischen Partnern vorgenommen.</p>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="col-md-4 wp4">
|
||
<div class="overlay-effect effects clearfix">
|
||
<div class="img">
|
||
<img src="img/Referenz---Illy---Print.jpg" alt="Portfolio Item">
|
||
<div class="overlay">
|
||
|
||
<a href="#myModal" class="expand" id="print1"><i class="fa fa-search"></i><br>View More</a>
|
||
<a class="close-overlay hidden">x</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<h2>Creative Print</h2>
|
||
<p>2006 für das <strong>Illy Caffe</strong> in Ansbach entstandener Trifolder als Menükarte.</p>
|
||
</div>
|
||
<div class="col-md-4 wp4 delay-05s">
|
||
<div class="overlay-effect effects clearfix">
|
||
<div class="img">
|
||
<img src="img/Referenz---SZ---Print.jpg" alt="Portfolio Item">
|
||
<div class="overlay">
|
||
<a href="#myModal" class="expand" id="print2"><i class="fa fa-search"></i><br>View More</a>
|
||
<a class="close-overlay hidden">x</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<h2>Creative Print</h2>
|
||
<p>2008 wurde für die SZ Kierchbirlingen dieser DINLang Flyer als Wurfsendung konzipiert.</p>
|
||
</div>
|
||
<div class="col-md-4 wp4 delay-1s">
|
||
<div class="overlay-effect effects clearfix">
|
||
<div class="img">
|
||
<img src="img/Referenz---Planet-Touristik---print.jpg" alt="Portfolio Item">
|
||
<div class="overlay">
|
||
<a href="#myModal" class="expand" id="print3"><i class="fa fa-search"></i><br>View More</a>
|
||
<a class="close-overlay hidden">x</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<h2>Creative Print</h2>
|
||
<p>2014 wurde ein neuer Flyer für Planet Touristik geschaffen. Gedacht als Verteiler und zur Auslage in verschiedenen Geschäften in Nürnberg.</p>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Modal - Web1 -->
|
||
<div class="modal fade" id="web1Modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
|
||
<h4><strong>e-stev</strong></h4>
|
||
</div>
|
||
|
||
<div class="modal-body">
|
||
<div id="web1slider">
|
||
<ul class="slides">
|
||
<li>
|
||
<img src="img/Referenz - e-stev -Web.jpg" alt="Portfolio Item">
|
||
<p><strong>2013</strong> für e-stev Radsport GmbH in Großlellenfeld konzipierte Webseite.</p>
|
||
</li>
|
||
<li>
|
||
<img src="img/Referenz---e-stev--Web2.jpg" alt="Portfolio Item">
|
||
<p>Das Ziel eine Webpräsenz für E-Bikes zu schaffen, die aktuellen Modelle optimal zu präsentieren und vielfältige Kontaktmöglichkeiten zu bieten wurde perfekt für den Kunden umgesetzt.</p>
|
||
<p> Die Webseite finden Sie hier: <a href="https://goo.gl/fCt0ac" target="_blank">Zur Webseite</a></p>
|
||
<p>Die Webseite zum Zeitpunkt der Übergabe finden Sie hier: <a href="https://goo.gl/g7DJHW" target="_blank">Zur Webseite</a></p>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
<!-- Modal - Web2 -->
|
||
<div class="modal fade" id="web2Modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
|
||
<h4><strong>Planet-Touristik</strong></h4>
|
||
</div>
|
||
|
||
<div class="modal-body">
|
||
<div id="web2slider">
|
||
<ul class="slides">
|
||
<li>
|
||
<img src="img/Referenz---Planet-Touristik---web.jpg" alt="Portfolio Item">
|
||
<p><strong>2013</strong> für Planet-Touristik in Nürnberg entworfene Vorschlag für die Startseite der Webseite.</p>
|
||
<p>Das Redesign wurde bisher noch nicht auf die Hauptseite übernommen. Die Live-Preview kann hier angeschaut werden: <a href="https://goo.gl/1l8nEC" target="_blank">Zur Webseite</a></p>
|
||
|
||
</li>
|
||
<li>
|
||
<img src="img/Referenz - Planet-Touristik - web01.jpg" alt="Portfolio Item">
|
||
<p>Das Redesign wurde bisher noch nicht auf die Hauptseite übernommen. Die Live-Preview kann hier angeschaut werden: <a href="https://goo.gl/1l8nEC" target="_blank">Zur Webseite</a></p>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Modal - Web3 -->
|
||
<div class="modal fade" id="web3Modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
|
||
<h4><strong>Planet-Touristik</strong></h4>
|
||
</div>
|
||
|
||
<div class="modal-body">
|
||
<div id="web3slider">
|
||
<ul class="slides">
|
||
<li>
|
||
<img src="img/Referenz---handstaubsauger---web.jpg" alt="Portfolio Item">
|
||
<p><strong>2012</strong> für handstaubsauger24 entworfener Vorschlag für die Startseite des Magento Onlineshops.</p>
|
||
</li>
|
||
<li>
|
||
<img src="img/Referenz---handstaubsauger---web2.jpg" alt="Portfolio Item">
|
||
<p>Die Umsetzung der Webseite können Sie hier sehen: <a href="https://goo.gl/9bCHh" target="_blank">Zur Webseite</a></p>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
<!-- Modal - Print1 -->
|
||
<div class="modal fade" id="print1Modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
|
||
<h4><strong>Illy Caffee Ansbach</strong></h4>
|
||
</div>
|
||
|
||
<div class="modal-body">
|
||
<div id="print1slider">
|
||
<ul class="slides">
|
||
<li>
|
||
<img src="img/Referenz---Illy---Print.jpg" alt="Portfolio Item">
|
||
<p><strong>2007</strong> für das Illy Caffe in Ansbach entworfene Menükarte, ist dieser Trifolder eine meiner ältesten Arbeiten als Freelancer. Gerade deswegen sollte er in diesem Showcase nicht fehlen.</p>
|
||
|
||
</li>
|
||
<li>
|
||
<img src="img/Referenz---Illy---Außenansicht.jpg" alt="Portfolio Item">
|
||
<p>Als Tri-folder konzipiert, hier die Außenansicht.</p>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- Modal - Print2 -->
|
||
<div class="modal fade" id="print2Modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
|
||
<h4><strong>SZ Kierchbirlingen</strong></h4>
|
||
</div>
|
||
|
||
<div class="modal-body">
|
||
<div id="print2slider">
|
||
<ul class="slides">
|
||
<li>
|
||
<img src="img/Referenz---SZ---Print.jpg" alt="Portfolio Item">
|
||
<p><strong>2008</strong> für die SZ in Kierichbirlingen entworfener Flyer</p>
|
||
</li>
|
||
<li>
|
||
<img src="img/Referenz---SZ---Frontansicht.jpg" alt="Portfolio Item">
|
||
<p>Als Wurfsendung im DINLang Format entworfen.</p>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Modal - Print3 -->
|
||
<div class="modal fade" id="print3Modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
|
||
<h4><strong>Planet Touristik</strong></h4>
|
||
</div>
|
||
|
||
<div class="modal-body">
|
||
<div id="print3slider">
|
||
<ul class="slides">
|
||
<li>
|
||
<img src="img/Referenz---Planet-Touristik---print.jpg" alt="Portfolio Item">
|
||
<p><strong>2014</strong> für Planet Touristik in Nürnberg entworfener Flyer</p>
|
||
</li>
|
||
<li>
|
||
<img src="img/Referenz---Planet-Touristik---Frontansicht.jpg" alt="Portfolio Item">
|
||
<p>Als Wurfsendung im DIN A5 Format entworfen.</p>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
<!--
|
||
<div class="ignite-cta text-center">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-md-12">
|
||
<a href="#" class="ignite-btn">Ignite Your Passion</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
-->
|
||
|
||
|
||
|
||
|
||
|
||
<section class="swag text-center bg3">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-md-8 col-md-offset-2">
|
||
<h1>Sebastian Fröhlich<span>Meine <em>Referenzen</em> herunterladen</span></h1>
|
||
<a class="ignite-btn" target="_blank" href="downloads/Referenzen.pdf">Jetzt downloaden</a>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
<section class="dark-bg text-center section-padding contact-wrap" id="contact">
|
||
<a href="#top" class="up-btn"><i class="fa fa-chevron-up"></i></a>
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-md-12">
|
||
<h1 class="arrow">Jetzt Kontakt aufnehmen</h1>
|
||
</div>
|
||
</div>
|
||
<div class="row contact-details">
|
||
<div class="col-md-4">
|
||
<div class="light-box box-hover">
|
||
<h2><i class="fa fa-map-marker"></i><span>Addresse</span></h2>
|
||
<p>Rosenstraße 4, 91564 Neuendettelsau</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="light-box box-hover">
|
||
<h2><i class="fa fa-mobile"></i><span>Telefon</span></h2>
|
||
<p>+49 9874 322 429</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="light-box box-hover">
|
||
<h2><i class="fa fa-paper-plane"></i><span>Email</span></h2>
|
||
<p><a href="mailto:froehlich.sebastian@gmail.com?subject=Antwort - Ihre Bewerbung" target="_top">froehlich.sebastian@gmail.com</a></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--
|
||
<div class="row">
|
||
<div class="col-md-12">
|
||
<ul class="social-buttons">
|
||
<li><a href="#" class="social-btn"><i class="fa fa-dribbble"></i></a></li>
|
||
<li><a href="#" class="social-btn"><i class="fa fa-twitter"></i></a></li>
|
||
<li><a href="#" class="social-btn"><i class="fa fa-envelope"></i></a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
-->
|
||
</div>
|
||
</section>
|
||
<footer>
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<h3 style="color: white">Sebastian Fröhlich</h2>
|
||
</div>
|
||
<div class="col-md-6 credit">
|
||
<div id="footerSlides" class="nobg" style="color: white">
|
||
<ul class="slides">
|
||
<li><h3>Nicht alles hat ein Ende...</h3></li>
|
||
<li><h3><a href="mailto:froehlich.sebastian@gmail.com?subject=Antwort - Ihre Bewerbung" target="_top" style="color: white">JETZT KONTAKT AUFNEHMEN</a></h3></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
</div><!-- /container -->
|
||
</div>
|
||
|
||
<!-- <script src="js/bootstrap.min.js"></script> -->
|
||
<script src="js/jquery.flexslider.js"></script>
|
||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
|
||
|
||
<!-- Eigene Scripte -->
|
||
<script src="js/scripts.js"></script>
|
||
|
||
<!-- Google Charts -->
|
||
<script type="text/javascript">
|
||
// Betriebssysteme
|
||
|
||
// Load the Visualization API and the piechart package.
|
||
google.load('visualization', '1.0', {'packages':['corechart']});
|
||
|
||
// Set a callback to run when the Google Visualization API is loaded.
|
||
google.setOnLoadCallback(drawChart);
|
||
|
||
// Callback that creates and populates a data table,
|
||
// instantiates the pie chart, passes in the data and
|
||
// draws it.
|
||
function drawChart() {
|
||
|
||
// Create the data table.
|
||
var data = new google.visualization.DataTable();
|
||
data.addColumn('string', 'Topping');
|
||
data.addColumn('number', 'Slices');
|
||
data.addRows([
|
||
['Mac OSX', 2],
|
||
['Linux', 2],
|
||
['Windows', 2]
|
||
|
||
]);
|
||
|
||
// Set chart options
|
||
var options = {
|
||
'width': 600,
|
||
'height': 450,
|
||
'is3D': true,
|
||
'colors': ['#696969','#808080','#A9A9A9','#C0C0C0','#D3D3D3','#DCDCDC','#2F4F4F','#708090','#778899']
|
||
};
|
||
|
||
// Instantiate and draw our chart, passing in some options.
|
||
|
||
var chart = new google.visualization.PieChart(document.getElementById('chart_os'));
|
||
chart.draw(data, options);
|
||
|
||
|
||
}
|
||
</script>
|
||
|
||
<script type="text/javascript">
|
||
// Office
|
||
|
||
// Load the Visualization API and the piechart package.
|
||
google.load('visualization', '1.0', {'packages':['corechart']});
|
||
|
||
// Set a callback to run when the Google Visualization API is loaded.
|
||
google.setOnLoadCallback(drawChart);
|
||
|
||
// Callback that creates and populates a data table,
|
||
// instantiates the pie chart, passes in the data and
|
||
// draws it.
|
||
function drawChart() {
|
||
|
||
// Create the data table.
|
||
var data = new google.visualization.DataTable();
|
||
data.addColumn('string', 'Topping');
|
||
data.addColumn('number', 'Slices');
|
||
data.addRows([
|
||
['MS-Office', 1],
|
||
['Libre Office/ Open Office', 2],
|
||
['Pages/ Numbers/ Keynote', 2],
|
||
['Google Docs', 1]
|
||
]);
|
||
|
||
// Set chart options
|
||
var options = {
|
||
'width': 600,
|
||
'height': 450,
|
||
'is3D': true,
|
||
'colors': ['#696969','#808080','#A9A9A9','#C0C0C0','#D3D3D3','#DCDCDC','#2F4F4F','#708090','#778899']
|
||
};
|
||
|
||
// Instantiate and draw our chart, passing in some options.
|
||
var chart = new google.visualization.PieChart(document.getElementById('chart_office'));
|
||
chart.draw(data, options);
|
||
}
|
||
</script>
|
||
|
||
<script type="text/javascript">
|
||
// DTP
|
||
|
||
// Load the Visualization API and the piechart package.
|
||
google.load('visualization', '1.0', {'packages':['corechart']});
|
||
|
||
// Set a callback to run when the Google Visualization API is loaded.
|
||
google.setOnLoadCallback(drawChart);
|
||
|
||
// Callback that creates and populates a data table,
|
||
// instantiates the pie chart, passes in the data and
|
||
// draws it.
|
||
function drawChart() {
|
||
|
||
// Create the data table.
|
||
var data = new google.visualization.DataTable();
|
||
data.addColumn('string', 'Topping');
|
||
data.addColumn('number', 'Slices');
|
||
data.addRows([
|
||
['Adobe InDesign', 3],
|
||
['Affinity Puplisher', 1],
|
||
['Scribus', 2]
|
||
]);
|
||
|
||
// Set chart options
|
||
var options = {
|
||
'width': 600,
|
||
'height': 450,
|
||
'is3D': true,
|
||
'colors': ['#696969','#808080','#A9A9A9','#C0C0C0','#D3D3D3','#DCDCDC','#2F4F4F','#708090','#778899']};
|
||
|
||
// Instantiate and draw our chart, passing in some options.
|
||
var chart = new google.visualization.PieChart(document.getElementById('chart_DTP'));
|
||
chart.draw(data, options);
|
||
}
|
||
</script>
|
||
|
||
<script type="text/javascript">
|
||
// Bitmap
|
||
|
||
// Load the Visualization API and the piechart package.
|
||
google.load('visualization', '1.0', {'packages':['corechart']});
|
||
|
||
// Set a callback to run when the Google Visualization API is loaded.
|
||
google.setOnLoadCallback(drawChart);
|
||
|
||
// Callback that creates and populates a data table,
|
||
// instantiates the pie chart, passes in the data and
|
||
// draws it.
|
||
function drawChart() {
|
||
|
||
// Create the data table.
|
||
var data = new google.visualization.DataTable();
|
||
data.addColumn('string', 'Topping');
|
||
data.addColumn('number', 'Slices');
|
||
data.addRows([
|
||
['Adobe Photoshop', 4],
|
||
['Gimp', 4],
|
||
['Pixelmator', 2],
|
||
['Affinity Photo', 2]
|
||
]);
|
||
|
||
// Set chart options
|
||
var options = {
|
||
'width': 600,
|
||
'height': 450,
|
||
'is3D': true,
|
||
'colors': ['#696969','#808080','#A9A9A9','#C0C0C0','#D3D3D3','#DCDCDC','#2F4F4F','#708090','#778899']
|
||
};
|
||
|
||
// Instantiate and draw our chart, passing in some options.
|
||
var chart = new google.visualization.PieChart(document.getElementById('chart_bitmap'));
|
||
chart.draw(data, options);
|
||
}
|
||
</script>
|
||
|
||
<script type="text/javascript">
|
||
// Vektor
|
||
|
||
// Load the Visualization API and the piechart package.
|
||
google.load('visualization', '1.0', {'packages':['corechart']});
|
||
|
||
// Set a callback to run when the Google Visualization API is loaded.
|
||
google.setOnLoadCallback(drawChart);
|
||
|
||
// Callback that creates and populates a data table,
|
||
// instantiates the pie chart, passes in the data and
|
||
// draws it.
|
||
function drawChart() {
|
||
|
||
// Create the data table.
|
||
var data = new google.visualization.DataTable();
|
||
data.addColumn('string', 'Topping');
|
||
data.addColumn('number', 'Slices');
|
||
data.addRows([
|
||
['Adobe Illustrator', 4],
|
||
['Adobe XD', 4],
|
||
['Inkscape', 4],
|
||
['Corel Draw', 1],
|
||
['Freehand', 1]
|
||
]);
|
||
|
||
// Set chart options
|
||
var options = {
|
||
'width': 600,
|
||
'height': 450,
|
||
'is3D': true,
|
||
'colors': ['#696969','#808080','#A9A9A9','#C0C0C0','#D3D3D3','#DCDCDC','#2F4F4F','#708090','#778899']};
|
||
|
||
// Instantiate and draw our chart, passing in some options.
|
||
var chart = new google.visualization.PieChart(document.getElementById('chart_vektor'));
|
||
chart.draw(data, options);
|
||
}
|
||
</script>
|
||
|
||
<script type="text/javascript">
|
||
// CMS
|
||
|
||
// Load the Visualization API and the piechart package.
|
||
google.load('visualization', '1.0', {'packages':['corechart']});
|
||
|
||
// Set a callback to run when the Google Visualization API is loaded.
|
||
google.setOnLoadCallback(drawChart);
|
||
|
||
// Callback that creates and populates a data table,
|
||
// instantiates the pie chart, passes in the data and
|
||
// draws it.
|
||
function drawChart() {
|
||
|
||
// Create the data table.
|
||
var data = new google.visualization.DataTable();
|
||
data.addColumn('string', 'Topping');
|
||
data.addColumn('number', 'Slices');
|
||
data.addRows([
|
||
['CMS: Joomla', 3],
|
||
['CMS: Wordpress', 3],
|
||
['CCK: Seblod', 3],
|
||
['Shop: Gambio/ XTCommerce', 4],
|
||
['Shop: Magento', 1]
|
||
]);
|
||
|
||
// Set chart options
|
||
var options = {
|
||
'width': 600,
|
||
'height': 450,
|
||
'is3D': true,
|
||
'colors': ['#696969','#808080','#A9A9A9','#C0C0C0','#D3D3D3','#DCDCDC','#2F4F4F','#708090','#778899']
|
||
};
|
||
|
||
// Instantiate and draw our chart, passing in some options.
|
||
var chart = new google.visualization.PieChart(document.getElementById('chart_cms'));
|
||
chart.draw(data, options);
|
||
}
|
||
</script>
|
||
|
||
<script type="text/javascript">
|
||
// Code Frontend
|
||
|
||
// Load the Visualization API and the piechart package.
|
||
google.load('visualization', '1.0', {'packages':['corechart']});
|
||
|
||
// Set a callback to run when the Google Visualization API is loaded.
|
||
google.setOnLoadCallback(drawChart);
|
||
|
||
// Callback that creates and populates a data table,
|
||
// instantiates the pie chart, passes in the data and
|
||
// draws it.
|
||
function drawChart() {
|
||
|
||
// Create the data table.
|
||
var data = new google.visualization.DataTable();
|
||
data.addColumn('string', 'Topping');
|
||
data.addColumn('number', 'Slices');
|
||
data.addRows([
|
||
['HTML5', 2],
|
||
['CSS & Frameworks', 2],
|
||
['SASS/ LESS', 2],
|
||
['Javascript', 2],
|
||
['Vue.js', 2],
|
||
['Angular2', 1]
|
||
]);
|
||
|
||
// Set chart options
|
||
var options = {
|
||
'width': 600,
|
||
'height': 450,
|
||
'is3D': true,
|
||
'colors': ['#696969','#808080','#A9A9A9','#C0C0C0','#D3D3D3','#DCDCDC','#2F4F4F','#708090','#778899']
|
||
};
|
||
|
||
// Instantiate and draw our chart, passing in some options.
|
||
var chart = new google.visualization.PieChart(document.getElementById('chart_code'));
|
||
chart.draw(data, options);
|
||
}
|
||
</script>
|
||
|
||
<script type="text/javascript">
|
||
// Code Backend
|
||
|
||
// Load the Visualization API and the piechart package.
|
||
google.load('visualization', '1.0', {'packages':['corechart']});
|
||
|
||
// Set a callback to run when the Google Visualization API is loaded.
|
||
google.setOnLoadCallback(drawChart);
|
||
|
||
// Callback that creates and populates a data table,
|
||
// instantiates the pie chart, passes in the data and
|
||
// draws it.
|
||
function drawChart() {
|
||
|
||
// Create the data table.
|
||
var data = new google.visualization.DataTable();
|
||
data.addColumn('string', 'Topping');
|
||
data.addColumn('number', 'Slices');
|
||
data.addRows([
|
||
['PHP', 3],
|
||
['Laravel ', 3],
|
||
['NodeJS', 1]
|
||
]);
|
||
|
||
// Set chart options
|
||
var options = {
|
||
'width': 600,
|
||
'height': 450,
|
||
'is3D': true,
|
||
'colors': ['#696969','#808080','#A9A9A9','#C0C0C0','#D3D3D3','#DCDCDC','#2F4F4F','#708090','#778899']
|
||
};
|
||
|
||
// Instantiate and draw our chart, passing in some options.
|
||
var chart = new google.visualization.PieChart(document.getElementById('chart_frameworks'));
|
||
chart.draw(data, options);
|
||
}
|
||
</script>
|
||
|
||
<script type="text/javascript">
|
||
// DevOp
|
||
|
||
// Load the Visualization API and the piechart package.
|
||
google.load('visualization', '1.0', {'packages':['corechart']});
|
||
|
||
// Set a callback to run when the Google Visualization API is loaded.
|
||
google.setOnLoadCallback(drawChart);
|
||
|
||
// Callback that creates and populates a data table,
|
||
// instantiates the pie chart, passes in the data and
|
||
// draws it.
|
||
function drawChart() {
|
||
|
||
// Create the data table.
|
||
var data = new google.visualization.DataTable();
|
||
data.addColumn('string', 'Topping');
|
||
data.addColumn('number', 'Slices');
|
||
data.addRows([
|
||
['Docker', 2],
|
||
['Git', 2],
|
||
['Bash', 2],
|
||
['MySql', 3],
|
||
['MS-SQL', 2],
|
||
['Redis', 3],
|
||
['MongoDB', 1],
|
||
['CouchDB', 2],
|
||
['Firebase', 1]
|
||
]);
|
||
|
||
// Set chart options
|
||
var options = {
|
||
'width': 600,
|
||
'height': 450,
|
||
'is3D': true,
|
||
'colors': ['#696969','#808080','#A9A9A9','#C0C0C0','#D3D3D3','#DCDCDC','#2F4F4F','#708090','#778899']
|
||
};
|
||
|
||
// Instantiate and draw our chart, passing in some options.
|
||
var chart = new google.visualization.PieChart(document.getElementById('chart_databases'));
|
||
chart.draw(data, options);
|
||
}
|
||
</script>
|
||
|
||
<script type="text/javascript">
|
||
// Tools
|
||
|
||
// Load the Visualization API and the piechart package.
|
||
google.load('visualization', '1.0', {'packages':['corechart']});
|
||
|
||
// Set a callback to run when the Google Visualization API is loaded.
|
||
google.setOnLoadCallback(drawChart);
|
||
|
||
// Callback that creates and populates a data table,
|
||
// instantiates the pie chart, passes in the data and
|
||
// draws it.
|
||
function drawChart() {
|
||
|
||
// Create the data table.
|
||
var data = new google.visualization.DataTable();
|
||
data.addColumn('string', 'Topping');
|
||
data.addColumn('number', 'Slices');
|
||
data.addRows([
|
||
['Jira', 2],
|
||
['Confluence', 2],
|
||
['Code Editoren (z.B.: VS-Code)', 3],
|
||
['Terminal/ Console', 3],
|
||
['Postman/ Insomnia', 2],
|
||
['Artillery', 3],
|
||
['DB (z.B. SequelPro', 1]
|
||
]);
|
||
|
||
// Set chart options
|
||
var options = {
|
||
'width': 600,
|
||
'height': 450,
|
||
'is3D': true,
|
||
'colors': ['#696969','#808080','#A9A9A9','#C0C0C0','#D3D3D3','#DCDCDC','#2F4F4F','#708090','#778899']
|
||
};
|
||
|
||
// Instantiate and draw our chart, passing in some options.
|
||
var chart = new google.visualization.PieChart(document.getElementById('chart_tools'));
|
||
chart.draw(data, options);
|
||
}
|
||
</script>
|
||
|
||
<script type="text/javascript">
|
||
// Marketing & Onlinetools
|
||
|
||
// Load the Visualization API and the piechart package.
|
||
google.load('visualization', '1.0', {'packages':['corechart']});
|
||
|
||
// Set a callback to run when the Google Visualization API is loaded.
|
||
google.setOnLoadCallback(drawChart);
|
||
|
||
// Callback that creates and populates a data table,
|
||
// instantiates the pie chart, passes in the data and
|
||
// draws it.
|
||
function drawChart() {
|
||
|
||
// Create the data table.
|
||
var data = new google.visualization.DataTable();
|
||
data.addColumn('string', 'Topping');
|
||
data.addColumn('number', 'Slices');
|
||
data.addRows([
|
||
['Google Analytics', 2],
|
||
['Google API´s', 2],
|
||
['Facebook Graph API', 1],
|
||
['Amazon AWS', 1],
|
||
['Mailchimp', 2]
|
||
]);
|
||
|
||
// Set chart options
|
||
var options = {
|
||
'width': 600,
|
||
'height': 450,
|
||
'is3D': true,
|
||
'colors': ['#696969','#808080','#A9A9A9','#C0C0C0','#D3D3D3','#DCDCDC','#2F4F4F','#708090','#778899']
|
||
};
|
||
|
||
// Instantiate and draw our chart, passing in some options.
|
||
var chart = new google.visualization.PieChart(document.getElementById('chart_marketing'));
|
||
chart.draw(data, options);
|
||
}
|
||
</script>
|
||
|
||
</body>
|
||
</html> |