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

about-update #92

Merged
samuel-p merged 2 commits from about-update into develop 2021-11-06 16:48:33 +00:00
Conversation 0 Commits 2 Files changed 11 +45 -277
4 changed files with 45 additions and 277 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 9d8758053b - Show all commits

2
gulpfile.js
View file

@ -71,7 +71,7 @@ var uglify = require('gulp-terser');
var optimizejs = require('gulp-optimize-js'); var optimizejs = require('gulp-optimize-js');
// Styles // Styles
var sass = require('gulp-sass'); var sass = require('gulp-sass')(require('node-sass'));
var postcss = require('gulp-postcss'); var postcss = require('gulp-postcss');
var prefix = require('autoprefixer'); var prefix = require('autoprefixer');
var minify = require('cssnano'); var minify = require('cssnano');

14
package.json
View file

@ -15,8 +15,8 @@
"browser-sync": "^2.27.6" "browser-sync": "^2.27.6"
}, },
"devDependencies": { "devDependencies": {
"autoprefixer": "10.3.7", "autoprefixer": "10.4.0",
"cssnano": "5.0.8", "cssnano": "5.0.9",
"del": "6.0.0", "del": "6.0.0",
"gulp": "4.0.2", "gulp": "4.0.2",
"gulp-concat": "2.6.1", "gulp-concat": "2.6.1",
@ -25,15 +25,15 @@
"gulp-optimize-js": "1.1.0", "gulp-optimize-js": "1.1.0",
"gulp-postcss": "9.0.1", "gulp-postcss": "9.0.1",
"gulp-rename": "2.0.0", "gulp-rename": "2.0.0",
"gulp-sass": "4.1.1", "gulp-sass": "5.0.0",
"gulp-terser": "2.1.0", "gulp-terser": "2.1.0",
"lazypipe": "1.0.2", "lazypipe": "1.0.2",
"node-sass": "^6.0.1",
"node-sass-tilde-importer": "^1.0.2", "node-sass-tilde-importer": "^1.0.2",
"postcss": "^8.3.11" "postcss": "^8.3.11",
"sass": "^1.43.4"
}, },
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-free": "^5.15.4", "bootstrap": "^5.1.3"
"bootstrap": "^4.6.0",
"jquery": "^3.6.0"
} }
} }

146
src/index.html
View file

@ -39,7 +39,7 @@
<div class="overlay"></div> <div class="overlay"></div>
<div class="container"> <div class="container">
<div class="row justify-content-md-center"> <div class="row justify-content-md-center">
<div class="col-md-8 text-center"> <div class="col-md-8 text-center position-relative">
<div class="d-flex flex-column vh-100 justify-content-center"> <div class="d-flex flex-column vh-100 justify-content-center">
<img class="profile-thumb mb-4" src="img/samuel.png"> <img class="profile-thumb mb-4" src="img/samuel.png">
<h1>Samuel Philipp</h1> <h1>Samuel Philipp</h1>
@ -202,7 +202,7 @@
<div class="services-padding"> <div class="services-padding">
<div class="row justify-content-md-center"> <div class="row justify-content-md-center">
<div class="col-md-8 text-center heading"> <div class="col-md-8 text-center heading">
<h1>My Services</h1> <h1>My Projects</h1>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
@ -217,7 +217,6 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-4 text-center"> <div class="col-md-4 text-center">
<div class="feature-left"> <div class="feature-left">
<span class="icon"> <span class="icon">
@ -228,7 +227,6 @@
<p>Facilis ipsum reprehenderit nemo molestias. Aut cum mollitia reprehenderit.</p> <p>Facilis ipsum reprehenderit nemo molestias. Aut cum mollitia reprehenderit.</p>
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-4 text-center"> <div class="col-md-4 text-center">
<div class="feature-left"> <div class="feature-left">
@ -242,47 +240,6 @@
</div> </div>
</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>
</div> </div>
</section> </section>
@ -411,67 +368,60 @@
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<div class="progress-wrap"> <div class="progress-wrap">
<h3><span class="name-left">Docker</span><span class="float-right">95%</span></h3> <div><span class="name-left">Docker</span><span class="float-end">95%</span></div>
<div class="progress"> <div class="progress">
<div class="progress-bar" style="width:95%"> <div class="progress-bar" style="width:95%">
</div> </div>
</div> </div>
</div> </div>
<div class="progress-wrap"> <div class="progress-wrap">
<h3><span class="name-left">Git</span><span class="float-right">90%</span></h3> <div><span class="name-left">Git</span><span class="float-end">90%</span></div>
<div class="progress"> <div class="progress">
<div class="progress-bar progress-bar-2 progress-bar-striped active" role="progressbar" <div class="progress-bar" style="width:90%">
aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width:90%">
</div> </div>
</div> </div>
</div> </div>
<div class="progress-wrap"> <div class="progress-wrap">
<h3><span class="name-left">Intellij IDEA</span><span class="float-right">80%</span></h3> <div><span class="name-left">Intellij IDEA</span><span class="float-end">80%</span></div>
<div class="progress"> <div class="progress">
<div class="progress-bar progress-bar-3 progress-bar-striped active" role="progressbar" <div class="progress-bar" style="width:80%">
aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width:80%">
</div> </div>
</div> </div>
</div> </div>
<div class="progress-wrap"> <div class="progress-wrap">
<h3><span class="name-left">Node.js</span><span class="float-right">85%</span></h3> <div><span class="name-left">Node.js</span><span class="float-end">85%</span></div>
<div class="progress"> <div class="progress">
<div class="progress-bar progress-bar-4 progress-bar-striped active" role="progressbar" <div class="progress-bar" style="width:85%">
aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width:85%">
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<div class="progress-wrap"> <div class="progress-wrap">
<h3><span class="name-left">Spring Framework</span><span class="float-right">100%</span></h3> <div><span class="name-left">Spring Framework</span><span class="float-end">100%</span></div>
<div class="progress"> <div class="progress">
<div class="progress-bar progress-bar-5 progress-bar-striped active" role="progressbar" <div class="progress-bar" style="width:100%">
aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width:100%">
</div> </div>
</div> </div>
</div> </div>
<div class="progress-wrap"> <div class="progress-wrap">
<h3><span class="name-left">Angular</span><span class="float-right">70%</span></h3> <div><span class="name-left">Angular</span><span class="float-end">70%</span></div>
<div class="progress"> <div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="70" <div class="progress-bar" style="width:70%">
aria-valuemin="0" aria-valuemax="100" style="width:70%">
</div> </div>
</div> </div>
</div> </div>
<div class="progress-wrap"> <div class="progress-wrap">
<h3><span class="name-left">CI/CD</span><span class="float-right">85%</span></h3> <div><span class="name-left">CI/CD</span><span class="float-end">85%</span></div>
<div class="progress"> <div class="progress">
<div class="progress-bar progress-bar-1 progress-bar-striped active" role="progressbar" <div class="progress-bar" style="width:85%">
aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width:85%">
</div> </div>
</div> </div>
</div> </div>
<div class="progress-wrap"> <div class="progress-wrap">
<h3><span class="name-left">tba</span><span class="float-right">75%</span></h3> <div><span class="name-left">tba</span><span class="float-end">75%</span></div>
<div class="progress"> <div class="progress">
<div class="progress-bar progress-bar-3 progress-bar-striped active" role="progressbar" <div class="progress-bar" style="width:75%">
aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width:75%">
</div> </div>
</div> </div>
</div> </div>
@ -519,69 +469,39 @@
</div> </div>
</a> </a>
</div> </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>
</div> </div>
</section> </section>
<section id="contact" class="p-0 d-flex"> <section id="contact" class="p-0 d-flex">
<div class="video fh5co-video" style="background-image: url(img/sp-magic.png);"> <div class="video" style="background-image: url(img/sp-magic.png);">
<div class="overlay"></div> <div class="overlay"></div>
</div> </div>
<div class="choose"> <div class="choose">
<h2>Contact</h2> <h2 class="mb-5">Contact</h2>
<form action="#"> <form action="#">
<div class="row form-group"> <div class="row mb-4">
<div class="col-md-12"> <div class="col-md-12">
<input type="text" id="name" class="form-control" placeholder="Your name"> <input type="text" id="name" class="form-control" placeholder="Your name">
</div> </div>
</div> </div>
<div class="row form-group"> <div class="row mb-4">
<div class="col-md-12"> <div class="col-md-12">
<input type="text" id="email" class="form-control" placeholder="Your email address"> <input type="text" id="email" class="form-control" placeholder="Your email address">
</div> </div>
</div> </div>
<div class="row form-group"> <div class="row mb-4">
<div class="col-md-12"> <div class="col-md-12">
<textarea name="message" id="message" cols="30" rows="10" class="form-control" <textarea name="message" id="message" cols="30" rows="5" class="form-control h-auto"
placeholder="Say something about us"></textarea> placeholder="Say something about us"></textarea>
</div> </div>
</div> </div>
<div class="form-group"> <div class="row mb-4">
<div class="col-md-12">
<input type="submit" value="Send Message" class="btn btn-primary"> <input type="submit" value="Send Message" class="btn btn-primary">
</div> </div>
</div>
</form> </form>
</div> </div>
@ -591,18 +511,18 @@
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<div class="d-flex justify-content-start flex-wrap"> <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="me-3">Made with <span class="i-heart highlight"></span> in Germany</div>
<div class="mr-3"><span class="far fa-copyright mr-2"></span>Samuel Philipp</div> <div class="me-3"><span class="i-copyright me-2"></span>Samuel Philipp</div>
</div> </div>
<div class="d-flex justify-content-sm-start flex-wrap"> <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 class="me-3"><a href="//sp-codes.de/de/imprint"><span class="i-info-circle me-2"></span>Imprint</a>
</div> </div>
<div class="mr-3"><a href="//sp-codes.de/de/privacy"><span class="fas fa-user-secret mr-2"></span>Privacy</a> <div class="me-3"><a href="//sp-codes.de/de/privacy"><span class="i-user-secret me-2"></span>Privacy</a>
</div> </div>
<div class="mr-3"><a target="_blank" href="https://git.sp-codes.de/samuel-p/samuel-philipp.de"><span <div class="me-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> class="i-code me-2"></span>Code</a></div>
<div><a target="_blank" href="https://umami.sp-codes.de/share/kBdKS5vR/samuel-philipp.de"><span <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> class="i-chart-line me-2"></span>Stats</a></div>
</div> </div>
</div> </div>
</div> </div>

156
src/scss/main.scss
View file

@ -1,162 +1,10 @@
@import "~bootstrap/scss/bootstrap-grid"; $primary: #fea500;
@import "~bootstrap/scss/bootstrap-reboot";
@import "~bootstrap/scss/utilities/align";
@import "~bootstrap/scss/utilities/spacing";
@import "~bootstrap/scss/utilities/display";
@import "~bootstrap/scss/utilities/text";
@import "~bootstrap/scss/utilities/float";
@import "~bootstrap/scss/forms";
@import "~bootstrap/scss/buttons";
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "~@fortawesome/fontawesome-free/scss/solid";
@import "~@fortawesome/fontawesome-free/scss/brands";
@import "~@fortawesome/fontawesome-free/scss/regular";
@font-face { @import "~bootstrap/scss/bootstrap";
font-family: 'Minotaur';
src: local('Minotaur Phatte'), url(../font/minotaur.ttf) format('truetype');
}
body {
color: #fff;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
padding: 0;
margin: 0;
}
.site-container {
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
overflow: hidden;
.content {
position: relative;
flex: 1 1 auto;
}
.footer {
background-image: url("../img/bg.png");
color: #ffffff;
z-index: 1;
}
}
.image {
display: block;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
position: absolute;
top: -25px;
left: -25px;
width: calc(100% + 50px);
height: calc(100% + 50px);
z-index: 0;
}
.follow {
position: absolute;
top: 0;
right: 0;
padding: 1rem;
z-index: 1;
}
#developer {
background-image: url('../img/sp-codes.png');
}
#magician {
background-image: url('../img/sp-magic_overlay.png');
}
.headers {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: stretch;
text-align: center;
}
.headers .magician {
color: #000000;
font-family: "Minotaur", cursive;
font-weight: normal;
font-size: 5rem;
text-shadow: 0 0 1rem #ffffff;
}
.headers .developer {
color: #ffffff;
font-family: "Minotaur", monospace;
font-weight: bold;
font-size: 5rem;
text-shadow: 0 0 1rem #000000;
}
@include media-breakpoint-down(md) {
.headers .magician,
.headers .developer {
font-size: 4rem;
}
}
@include media-breakpoint-down(sm) {
.headers .magician,
.headers .developer {
font-size: 3rem;
}
}
.headers a {
text-decoration: none;
}
.headers .codes {
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
}
.headers .magic {
flex-grow: 0.6;
display: flex;
align-items: center;
justify-content: center;
}
.headers .padding {
flex-grow: 1.3;
}
.menu {
border-top: 1px solid #ffffff;
a {
color: #ffffff;
}
}
.full-size {
width: 100%;
height: 100%;
}
// ------------------------------ NEW ------------------------------
$icomoon-font-path: "../font"; $icomoon-font-path: "../font";
@import "icons/style"; @import "icons/style";
$primary: #fea500;
body { body {
color: #000; color: #000;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);