develop #149
4 changed files with 45 additions and 277 deletions
|
|
@ -71,7 +71,7 @@ var uglify = require('gulp-terser');
|
|||
var optimizejs = require('gulp-optimize-js');
|
||||
|
||||
// Styles
|
||||
var sass = require('gulp-sass');
|
||||
var sass = require('gulp-sass')(require('node-sass'));
|
||||
var postcss = require('gulp-postcss');
|
||||
var prefix = require('autoprefixer');
|
||||
var minify = require('cssnano');
|
||||
|
|
|
|||
14
package.json
14
package.json
|
|
@ -15,8 +15,8 @@
|
|||
"browser-sync": "^2.27.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "10.3.7",
|
||||
"cssnano": "5.0.8",
|
||||
"autoprefixer": "10.4.0",
|
||||
"cssnano": "5.0.9",
|
||||
"del": "6.0.0",
|
||||
"gulp": "4.0.2",
|
||||
"gulp-concat": "2.6.1",
|
||||
|
|
@ -25,15 +25,15 @@
|
|||
"gulp-optimize-js": "1.1.0",
|
||||
"gulp-postcss": "9.0.1",
|
||||
"gulp-rename": "2.0.0",
|
||||
"gulp-sass": "4.1.1",
|
||||
"gulp-sass": "5.0.0",
|
||||
"gulp-terser": "2.1.0",
|
||||
"lazypipe": "1.0.2",
|
||||
"node-sass": "^6.0.1",
|
||||
"node-sass-tilde-importer": "^1.0.2",
|
||||
"postcss": "^8.3.11"
|
||||
"postcss": "^8.3.11",
|
||||
"sass": "^1.43.4"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-free": "^5.15.4",
|
||||
"bootstrap": "^4.6.0",
|
||||
"jquery": "^3.6.0"
|
||||
"bootstrap": "^5.1.3"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
146
src/index.html
146
src/index.html
|
|
@ -39,7 +39,7 @@
|
|||
<div class="overlay"></div>
|
||||
<div class="container">
|
||||
<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">
|
||||
<img class="profile-thumb mb-4" src="img/samuel.png">
|
||||
<h1>Samuel Philipp</h1>
|
||||
|
|
@ -202,7 +202,7 @@
|
|||
<div class="services-padding">
|
||||
<div class="row justify-content-md-center">
|
||||
<div class="col-md-8 text-center heading">
|
||||
<h1>My Services</h1>
|
||||
<h1>My Projects</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
|
|
@ -217,7 +217,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4 text-center">
|
||||
<div class="feature-left">
|
||||
<span class="icon">
|
||||
|
|
@ -228,7 +227,6 @@
|
|||
<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">
|
||||
|
|
@ -242,47 +240,6 @@
|
|||
</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>
|
||||
|
|
@ -411,67 +368,60 @@
|
|||
<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><span class="name-left">Docker</span><span class="float-end">95%</span></div>
|
||||
<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><span class="name-left">Git</span><span class="float-end">90%</span></div>
|
||||
<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 class="progress-bar" 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><span class="name-left">Intellij IDEA</span><span class="float-end">80%</span></div>
|
||||
<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 class="progress-bar" 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><span class="name-left">Node.js</span><span class="float-end">85%</span></div>
|
||||
<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 class="progress-bar" 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><span class="name-left">Spring Framework</span><span class="float-end">100%</span></div>
|
||||
<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 class="progress-bar" 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><span class="name-left">Angular</span><span class="float-end">70%</span></div>
|
||||
<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 class="progress-bar" 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><span class="name-left">CI/CD</span><span class="float-end">85%</span></div>
|
||||
<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 class="progress-bar" 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><span class="name-left">tba</span><span class="float-end">75%</span></div>
|
||||
<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 class="progress-bar" style="width:75%">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -519,69 +469,39 @@
|
|||
</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="video" style="background-image: url(img/sp-magic.png);">
|
||||
<div class="overlay"></div>
|
||||
</div>
|
||||
<div class="choose">
|
||||
<h2>Contact</h2>
|
||||
<h2 class="mb-5">Contact</h2>
|
||||
<form action="#">
|
||||
<div class="row form-group">
|
||||
<div class="row mb-4">
|
||||
<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="row mb-4">
|
||||
<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="row mb-4">
|
||||
<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>
|
||||
</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">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
|
|
@ -591,18 +511,18 @@
|
|||
<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 class="me-3">Made with <span class="i-heart highlight"></span> in Germany</div>
|
||||
<div class="me-3"><span class="i-copyright me-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 class="me-3"><a href="//sp-codes.de/de/imprint"><span class="i-info-circle me-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 class="me-3"><a href="//sp-codes.de/de/privacy"><span class="i-user-secret me-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 class="me-3"><a target="_blank" href="https://git.sp-codes.de/samuel-p/samuel-philipp.de"><span
|
||||
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
|
||||
class="fas fa-chart-line mr-2"></span>Stats</a></div>
|
||||
class="i-chart-line me-2"></span>Stats</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,162 +1,10 @@
|
|||
@import "~bootstrap/scss/bootstrap-grid";
|
||||
@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";
|
||||
$primary: #fea500;
|
||||
|
||||
@font-face {
|
||||
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 ------------------------------
|
||||
@import "~bootstrap/scss/bootstrap";
|
||||
|
||||
$icomoon-font-path: "../font";
|
||||
@import "icons/style";
|
||||
|
||||
|
||||
$primary: #fea500;
|
||||
|
||||
body {
|
||||
color: #000;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
|
|
|
|||
Loading…
Reference in a new issue