samuel-p/samuel-philipp.de
samuel-p/samuel-philipp.de
1
0
Fork 0
Code Issues Pull requests 10 Releases Activity Actions

added initial template

Browse source
This commit is contained in:
Samuel Philipp 2021-11-06 00:34:00 +01:00
parent 94f5eb33fa
commit 1a168decab
9 changed files with 1311 additions and 65 deletions
Download patch file Download diff file Expand all files Collapse all files

636
src/index.html
View file

@ -31,76 +31,582 @@
<meta name="twitter:image" content="https://samuel-philipp.de/img/samuel-philipp.jpg">
<link rel="shortcut icon" href="img/samuel.png">
<link rel="stylesheet" href="css/main.min.css">
<script async defer data-website-id="594e86a6-02bb-407d-98e0-73e31827a785" data-domains="samuel-philipp.de" src="https://umami.sp-codes.de/umami.js"></script>
<script async defer data-website-id="594e86a6-02bb-407d-98e0-73e31827a785" data-domains="samuel-philipp.de"
src="https://umami.sp-codes.de/umami.js"></script>
</head>
<body>
<div class="site-container">
<div class="content">
<div class="follow text-right">
<div class="mb-3">
<a rel="me" href="https://social.sp-codes.de/@samuel_p">
<img alt="Mastodon Follow"
src="https://shields.sp-codes.de/mastodon/follow/106249673823954342?domain=https%3A%2F%2Fsocial.sp-codes.de&logoColor=black&style=social">
</a>
</div>
<div>
<a rel="me" href="https://pixel.tchncs.de/samuel-p">
<img alt="Pixelfed Follow"
src="https://shields.sp-codes.de/mastodon/follow/233656854528528384?domain=https%3A%2F%2Fpixel.tchncs.de&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwSDI0VjI0SDB6Ii8%2BPHBhdGggZD0iTTEyIDJjNS41MjMgMCAxMCA0LjQ3NyAxMCAxMHMtNC40NzcgMTAtMTAgMTBTMiAxNy41MjMgMiAxMiA2LjQ3NyAyIDEyIDJ6bTEuMDMxIDYuMDk5aC0yLjYyNGMtLjk4OCAwLTEuNzg5Ljc3Ni0xLjc4OSAxLjczM3Y2Ljc0OGwyLjU5NS0yLjQ3MWgxLjgxOGMxLjcxMyAwIDMuMTAxLTEuMzQ1IDMuMTAxLTMuMDA1cy0xLjM4OC0zLjAwNS0zLjEtMy4wMDV6Ii8%2BPC9zdmc%2B&logoColor=black&style=social">
</a>
</div>
</div>
<div id="developer" class="image"></div>
<div id="magician" class="image"></div>
<div class="headers">
<div class="codes">
<h1 class="developer">Software Engineer</h1>
</div>
<div class="padding"></div>
<div class="magic">
<h1 class="magician">Magician</h1>
</div>
</div>
<code id="links" class="image">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1" width="100%" height="100%" viewBox="0 0 2560 1440" preserveAspectRatio="xMidYMid slice">
<a xlink:href="//sp-codes.de" class="full-size">
<path d="M 0,796 C 0,796 1330,480 2560,460 L 2560,0 L 0,0 Z" fill-opacity="0"></path>
</a>
<a xlink:href="//sp-magic.de" class="full-size">
<path d="M 0,796 C 0,796 1330,480 2560,460 L 2560,1440 L 0,1440 Z" fill-opacity="0"></path>
</a>
</svg>
</code>
<div class="menu py-2 px-3">
<div><a href="https://sp-codes.de/de/imprint"><span
class="fas fa-info-circle mr-2"></span>Imprint</a></div>
<div><a href="https://sp-codes.de/de/privacy"><span
class="fas fa-user-secret mr-2"></span>Privacy</a></div>
<div><a target="_blank" href="https://git.sp-codes.de/samuel-p/samuel-philipp.de"><span
class="fas fa-code mr-2"></span>Code</a></div>
</div>
</div>
<div class="footer">
<div class="d-flex justify-content-start flex-wrap p-2 menu border-top">
<div class="d-flex justify-content-start flex-wrap">
<div class="mr-3">Made with <span class="fas fa-heart highlight"></span> in Germany</div>
<div class="mr-3"><span class="far fa-copyright mr-2"></span>Samuel Philipp</div>
</div>
<div class="flex-sm-grow-1"></div>
<div class="d-flex justify-content-sm-start flex-wrap">
<div class="mr-3"><a href="//sp-codes.de/de/imprint"><span class="fas fa-info-circle mr-2"></span>Imprint</a>
<header class="vh-100">
<div class="overlay"></div>
<div class="container">
<div class="row justify-content-md-center">
<div class="col-md-8 text-center">
<div class="d-flex flex-column vh-100 justify-content-center">
<img class="profile-thumb mb-4" src="img/samuel.png">
<h1>Samuel Philipp</h1>
<h3>Full-Stack Developer / SysAdmin / Magician</h3>
<ul class="social-icons mt-4">
<li><a href="#"><i class="i-envelope i-2x i-fw"></i></a></li>
<li><a href="#"><i class="i-matrix i-2x i-fw"></i></a></li>
<li><a href="#"><i class="i-mastodon i-2x i-fw"></i></a></li>
<li><a href="#"><i class="i-stackoverflow i-2x i-fw"></i></a></li>
<li><a href="#"><i class="i-gitea i-2x i-fw"></i></a></li>
<li><a href="#"><i class="i-github i-2x i-fw"></i></a></li>
</ul>
</div>
<div class="mr-3"><a href="//sp-codes.de/de/privacy"><span class="fas fa-user-secret mr-2"></span>Privacy</a>
</div>
<div class="mr-3"><a target="_blank" href="https://git.sp-codes.de/samuel-p/samuel-philipp.de"><span
class="fas fa-code mr-2"></span>Code</a></div>
<div><a target="_blank" href="https://umami.sp-codes.de/share/kBdKS5vR/samuel-philipp.de"><span
class="fas fa-chart-line mr-2"></span>Stats</a></div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/main.min.js"></script>
</header>
<section id="about">
<div class="container">
<div class="row justify-content-md-center">
<div class="col-md-8 text-center heading">
<h1>About Me</h1>
</div>
</div>
<div class="row">
<div class="col-md-4">
<ul class="info">
<li><span class="first-block">Full Name:</span><span class="second-block">Louie Jie Mahusay</span>
</li>
<li><span class="first-block">Phone:</span><span class="second-block">+ 1235 2355 98</span></li>
<li><span class="first-block">Email:</span><span class="second-block">info@yoursite.com</span></li>
<li><span class="first-block">Website:</span><span class="second-block">www.yoursite.com</span></li>
<li><span class="first-block">Address:</span><span class="second-block">198 West 21th Street, Suite 721 New York NY 10016</span>
</li>
</ul>
</div>
<div class="col-md-8">
<h2>Hello There!</h2>
<p>There live the blind texts far from the countries Vokalia and Consonantia, there live the blind
texts. Separated they live in bookmarksgrove there live the blind texts far from the countries.</p>
<p>Far far away, behind the word mountains, Quos quia provident consequuntur culpa facere ratione maxime
commodi voluptates id repellat velit eaque aspernatur expedita. Possimus itaque adipisci there live
the blind texts from the countries Vokalia and Consonantia, there live the blind texts. Quos quia
provident consequuntur culpa facere ratione maxime commodi voluptates id repellat velit eaque
aspernatur expedita. Possimus itaque adipisci.</p>
<ul class="social-icons mt-4">
<li><a href="#"><i class="i-envelope i-2x i-fw"></i></a></li>
<li><a href="#"><i class="i-matrix i-2x i-fw"></i></a></li>
<li><a href="#"><i class="i-mastodon i-2x i-fw"></i></a></li>
<li><a href="#"><i class="i-stackoverflow i-2x i-fw"></i></a></li>
<li><a href="#"><i class="i-gitea i-2x i-fw"></i></a></li>
<li><a href="#"><i class="i-github i-2x i-fw"></i></a></li>
</ul>
</div>
</div>
</div>
</section>
<section id="resume">
<div class="container">
<div class="row justify-content-md-center">
<div class="col-md-8 text-center heading">
<h1>My Resume</h1>
</div>
</div>
<div class="row">
<div class="col-md-12">
<ul class="timeline">
<li class="timeline-heading text-center">
<div><h3>Work Experience</h3></div>
</li>
<li class="timeline-inverted">
<div class="timeline-badge"><i class="icon-suitcase"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h3 class="timeline-title">Software Engineer</h3>
<span class="company">AV-TEST GmbH - Jan. 2018 - present</span>
</div>
<div class="timeline-body">
<p>Far far away, behind the word mountains, far from the countries Vokalia and
Consonantia, there live the blind texts.</p>
</div>
</div>
</li>
<li class="timeline-unverted">
<div class="timeline-badge"><i class="icon-suitcase"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h3 class="timeline-title">Software Engineer</h3>
<span class="company">Fiducia & GAD IT AG - Oct. 2017 - Dec. 2018</span>
</div>
<div class="timeline-body">
<p>Far far away, behind the word mountains, they live in Bookmarksgrove right at the
coast of the Semantics, a large language ocean.</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-badge"><i class="icon-suitcase"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h3 class="timeline-title">Dual Student Applied Computer Science</h3>
<span class="company">Fiducia & GAD IT AG - Sept. 2014 - Sept. 2017</span>
</div>
<div class="timeline-body">
<p>Far far away, behind the word mountains, far from the countries Vokalia and
Consonantia, there live the blind texts.</p>
</div>
</div>
</li>
<br>
<li class="timeline-heading text-center">
<div><h3>Education</h3></div>
</li>
<li class="timeline-unverted">
<div class="timeline-badge"><i class="icon-graduation-cap"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h3 class="timeline-title">Master of Engineering</h3>
<span class="company">Wismar University - Sept. 2018 - June 2021</span>
</div>
<div class="timeline-body">
<p>Far far away, behind the word mountains, they live in Bookmarksgrove right at the
coast of the Semantics, a large language ocean.</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-badge"><i class="icon-graduation-cap"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h3 class="timeline-title">Bachelor of Science</h3>
<span class="company">Baden-Württemberg Cooperative State University - Oct. 2014 - Sept. 2017</span>
</div>
<div class="timeline-body">
<p>Far far away, behind the word mountains, far from the countries Vokalia and
Consonantia, there live the blind texts.</p>
</div>
</div>
</li>
<li class="timeline-unverted">
<div class="timeline-badge"><i class="icon-graduation-cap"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h3 class="timeline-title">Abitur (A-Level)</h3>
<span class="company">Albert-Einstein School - Sept. 2011 - June 2014</span>
</div>
<div class="timeline-body">
<p>Far far away, behind the word mountains, they live in Bookmarksgrove right at the
coast of the Semantics, a large language ocean.</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<section id="services" class="bg-primary">
<div class="container">
<div class="services-padding">
<div class="row justify-content-md-center">
<div class="col-md-8 text-center heading">
<h1>My Services</h1>
</div>
</div>
<div class="row">
<div class="col-md-4 text-center">
<div class="feature-left">
<span class="icon">
<i class="icon-paintbrush"></i>
</span>
<div class="feature-copy">
<h3>Web Design</h3>
<p>Facilis ipsum reprehenderit nemo molestias. Aut cum mollitia reprehenderit.</p>
</div>
</div>
</div>
<div class="col-md-4 text-center">
<div class="feature-left">
<span class="icon">
<i class="icon-briefcase"></i>
</span>
<div class="feature-copy">
<h3>Branding</h3>
<p>Facilis ipsum reprehenderit nemo molestias. Aut cum mollitia reprehenderit.</p>
</div>
</div>
</div>
<div class="col-md-4 text-center">
<div class="feature-left">
<span class="icon">
<i class="icon-search"></i>
</span>
<div class="feature-copy">
<h3>Analytics</h3>
<p>Facilis ipsum reprehenderit nemo molestias. Aut cum mollitia reprehenderit.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 text-center">
<div class="feature-left">
<span class="icon">
<i class="icon-bargraph"></i>
</span>
<div class="feature-copy">
<h3>Web Developent</h3>
<p>Facilis ipsum reprehenderit nemo molestias. Aut cum mollitia reprehenderit.</p>
</div>
</div>
</div>
<div class="col-md-4 text-center">
<div class="feature-left">
<span class="icon">
<i class="icon-genius"></i>
</span>
<div class="feature-copy">
<h3>Web Marketing</h3>
<p>Facilis ipsum reprehenderit nemo molestias. Aut cum mollitia reprehenderit.</p>
</div>
</div>
</div>
<div class="col-md-4 text-center">
<div class="feature-left">
<span class="icon">
<i class="icon-chat"></i>
</span>
<div class="feature-copy">
<h3>Support</h3>
<p>Facilis ipsum reprehenderit nemo molestias. Aut cum mollitia reprehenderit.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="skills">
<div class="container">
<div class="row justify-content-md-center">
<div class="col-md-8 text-center heading">
<h1>Skills</h1>
</div>
</div>
<div class="row mb-4">
<div class="col-md-3 col-sm-6 col-xs-12 d-flex justify-content-center">
<div class="circular">
<div class="inner"></div>
<div class="number"><strong>Java</strong><span>95%</span></div>
<div class="circle">
<div class="bar left">
<div class="progress"></div>
</div>
<div class="bar right">
<div class="progress"></div>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 d-flex justify-content-center">
<div class="circular">
<div class="inner"></div>
<div class="number"><strong>JavaScript</strong><span>93%</span></div>
<div class="circle">
<div class="bar left">
<div class="progress"></div>
</div>
<div class="bar right">
<div class="progress"></div>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 d-flex justify-content-center">
<div class="circular">
<div class="inner"></div>
<div class="number"><strong>TypeScript</strong><span>90%</span></div>
<div class="circle">
<div class="bar left">
<div class="progress"></div>
</div>
<div class="bar right">
<div class="progress"></div>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 d-flex justify-content-center">
<div class="circular">
<div class="inner"></div>
<div class="number"><strong>Python</strong><span>90%</span></div>
<div class="circle">
<div class="bar left">
<div class="progress"></div>
</div>
<div class="bar right">
<div class="progress"></div>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 d-flex justify-content-center">
<div class="circular">
<div class="inner"></div>
<div class="number"><strong>HTML</strong><span>89%</span></div>
<div class="circle">
<div class="bar left">
<div class="progress"></div>
</div>
<div class="bar right">
<div class="progress"></div>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 d-flex justify-content-center">
<div class="circular">
<div class="inner"></div>
<div class="number"><strong>CSS</strong><span>85%</span></div>
<div class="circle">
<div class="bar left">
<div class="progress"></div>
</div>
<div class="bar right">
<div class="progress"></div>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 d-flex justify-content-center">
<div class="circular">
<div class="inner"></div>
<div class="number"><strong>SQL</strong><span>90%</span></div>
<div class="circle">
<div class="bar left">
<div class="progress"></div>
</div>
<div class="bar right">
<div class="progress"></div>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 d-flex justify-content-center">
<div class="circular">
<div class="inner"></div>
<div class="number"><strong>Bash</strong><span>85%</span></div>
<div class="circle">
<div class="bar left">
<div class="progress"></div>
</div>
<div class="bar right">
<div class="progress"></div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="progress-wrap">
<h3><span class="name-left">Docker</span><span class="float-right">95%</span></h3>
<div class="progress">
<div class="progress-bar" style="width:95%">
</div>
</div>
</div>
<div class="progress-wrap">
<h3><span class="name-left">Git</span><span class="float-right">90%</span></h3>
<div class="progress">
<div class="progress-bar progress-bar-2 progress-bar-striped active" role="progressbar"
aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width:90%">
</div>
</div>
</div>
<div class="progress-wrap">
<h3><span class="name-left">Intellij IDEA</span><span class="float-right">80%</span></h3>
<div class="progress">
<div class="progress-bar progress-bar-3 progress-bar-striped active" role="progressbar"
aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width:80%">
</div>
</div>
</div>
<div class="progress-wrap">
<h3><span class="name-left">Node.js</span><span class="float-right">85%</span></h3>
<div class="progress">
<div class="progress-bar progress-bar-4 progress-bar-striped active" role="progressbar"
aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width:85%">
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="progress-wrap">
<h3><span class="name-left">Spring Framework</span><span class="float-right">100%</span></h3>
<div class="progress">
<div class="progress-bar progress-bar-5 progress-bar-striped active" role="progressbar"
aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width:100%">
</div>
</div>
</div>
<div class="progress-wrap">
<h3><span class="name-left">Angular</span><span class="float-right">70%</span></h3>
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%">
</div>
</div>
</div>
<div class="progress-wrap">
<h3><span class="name-left">CI/CD</span><span class="float-right">85%</span></h3>
<div class="progress">
<div class="progress-bar progress-bar-1 progress-bar-striped active" role="progressbar"
aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width:85%">
</div>
</div>
</div>
<div class="progress-wrap">
<h3><span class="name-left">tba</span><span class="float-right">75%</span></h3>
<div class="progress">
<div class="progress-bar progress-bar-3 progress-bar-striped active" role="progressbar"
aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width:75%">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="interests" class="bg-primary">
<div class="container">
<div class="row justify-content-md-center">
<div class="col-md-8 text-center heading">
<h1>Interests</h1>
</div>
</div>
<div class="row">
<div class="col-md-3 text-center p-3">
<a href="#" class="work" style="background-image: url(images/portfolio-1.jpg);">
<div class="desc">
<h3>Project Name</h3>
<span>Illustration</span>
</div>
</a>
</div>
<div class="col-md-3 text-center p-3">
<a href="#" class="work" style="background-image: url(images/portfolio-2.jpg);">
<div class="desc">
<h3>Project Name</h3>
<span>Brading</span>
</div>
</a>
</div>
<div class="col-md-3 text-center p-3">
<a href="#" class="work" style="background-image: url(images/portfolio-3.jpg);">
<div class="desc">
<h3>Project Name</h3>
<span>Illustration</span>
</div>
</a>
</div>
<div class="col-md-3 text-center p-3">
<a href="#" class="work" style="background-image: url(images/portfolio-4.jpg);">
<div class="desc">
<h3>Project Name</h3>
<span>Design</span>
</div>
</a>
</div>
<div class="col-md-3 text-center p-3">
<a href="#" class="work" style="background-image: url(images/portfolio-5.jpg);">
<div class="desc">
<h3>Project Name</h3>
<span>Website</span>
</div>
</a>
</div>
<div class="col-md-3 text-center p-3">
<a href="#" class="work" style="background-image: url(images/portfolio-6.jpg);">
<div class="desc">
<h3>Project Name</h3>
<span>Illustration</span>
</div>
</a>
</div>
<div class="col-md-3 text-center p-3">
<a href="#" class="work" style="background-image: url(images/portfolio-7.jpg);">
<div class="desc">
<h3>Project Name</h3>
<span>Brading</span>
</div>
</a>
</div>
<div class="col-md-3 text-center p-3">
<a href="#" class="work" style="background-image: url(images/portfolio-8.jpg);">
<div class="desc">
<h3>Project Name</h3>
<span>Illustration</span>
</div>
</a>
</div>
</div>
</div>
</section>
<section id="contact" class="p-0 d-flex">
<div class="video fh5co-video" style="background-image: url(img/sp-magic.png);">
<div class="overlay"></div>
</div>
<div class="choose">
<h2>Contact</h2>
<form action="#">
<div class="row form-group">
<div class="col-md-12">
<input type="text" id="name" class="form-control" placeholder="Your name">
</div>
</div>
<div class="row form-group">
<div class="col-md-12">
<input type="text" id="email" class="form-control" placeholder="Your email address">
</div>
</div>
<div class="row form-group">
<div class="col-md-12">
<textarea name="message" id="message" cols="30" rows="10" class="form-control"
placeholder="Say something about us"></textarea>
</div>
</div>
<div class="form-group">
<input type="submit" value="Send Message" class="btn btn-primary">
</div>
</form>
</div>
</section>
<footer id="footer">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="d-flex justify-content-start flex-wrap">
<div class="mr-3">Made with <span class="fas fa-heart highlight"></span> in Germany</div>
<div class="mr-3"><span class="far fa-copyright mr-2"></span>Samuel Philipp</div>
</div>
<div class="d-flex justify-content-sm-start flex-wrap">
<div class="mr-3"><a href="//sp-codes.de/de/imprint"><span class="fas fa-info-circle mr-2"></span>Imprint</a>
</div>
<div class="mr-3"><a href="//sp-codes.de/de/privacy"><span class="fas fa-user-secret mr-2"></span>Privacy</a>
</div>
<div class="mr-3"><a target="_blank" href="https://git.sp-codes.de/samuel-p/samuel-philipp.de"><span
class="fas fa-code mr-2"></span>Code</a></div>
<div><a target="_blank" href="https://umami.sp-codes.de/share/kBdKS5vR/samuel-philipp.de"><span
class="fas fa-chart-line mr-2"></span>Stats</a></div>
</div>
</div>
</div>
</div>
</footer>
</body>
</html>