-
-
-
-
- Software Engineer
-
-
- Magician
-
-
-
-
-
-
-
-
-
- Made with in Germany
- Samuel Philipp
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/scss/icons/style.scss b/src/scss/icons/style.scss
new file mode 100644
index 0000000..4492702
--- /dev/null
+++ b/src/scss/icons/style.scss
@@ -0,0 +1,278 @@
+@import "variables";
+
+@font-face {
+ font-family: '#{$icomoon-font-family}';
+ src: url('#{$icomoon-font-path}/#{$icomoon-font-family}.eot?4egyec');
+ src: url('#{$icomoon-font-path}/#{$icomoon-font-family}.eot?4egyec#iefix') format('embedded-opentype'),
+ url('#{$icomoon-font-path}/#{$icomoon-font-family}.woff2?4egyec') format('woff2'),
+ url('#{$icomoon-font-path}/#{$icomoon-font-family}.ttf?4egyec') format('truetype'),
+ url('#{$icomoon-font-path}/#{$icomoon-font-family}.woff?4egyec') format('woff'),
+ url('#{$icomoon-font-path}/#{$icomoon-font-family}.svg?4egyec##{$icomoon-font-family}') format('svg');
+ font-weight: normal;
+ font-style: normal;
+ font-display: block;
+}
+
+[class^="i-"], [class*=" i-"] {
+ /* use !important to prevent issues with browser extensions that change fonts */
+ font-family: '#{$icomoon-font-family}' !important;
+ speak: never;
+ font-style: normal;
+ font-weight: normal;
+ font-variant: normal;
+ text-transform: none;
+ line-height: 1;
+
+ /* Better Font Rendering =========== */
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+
+ /* own changes */
+ display: inline-block;
+}
+
+.i-fw {
+ width: 1.25em;
+ text-align: center;
+}
+
+.i-2x {
+ font-size: 2em;
+}
+
+.i-3x {
+ font-size: 3em;
+}
+
+.i-4x {
+ font-size: 4em;
+}
+
+.i-linkedin {
+ &:before {
+ content: $i-linkedin;
+ }
+}
+
+.i-xing {
+ &:before {
+ content: $i-xing;
+ }
+}
+
+.i-peertube {
+ &:before {
+ content: $i-peertube;
+ }
+}
+
+.i-network-wired {
+ &:before {
+ content: $i-network-wired;
+ }
+}
+
+.i-money-bill {
+ &:before {
+ content: $i-money-bill;
+ }
+}
+
+.i-chart-line {
+ &:before {
+ content: $i-chart-line;
+ }
+}
+
+.i-info-circle {
+ &:before {
+ content: $i-info-circle;
+ }
+}
+
+.i-code {
+ &:before {
+ content: $i-code;
+ }
+}
+
+.i-xmpp {
+ &:before {
+ content: $i-xmpp;
+ }
+}
+
+.i-wifi {
+ &:before {
+ content: $i-wifi;
+ }
+}
+
+.i-youtube {
+ &:before {
+ content: $i-youtube;
+ }
+}
+
+.i-twitter {
+ &:before {
+ content: $i-twitter;
+ }
+}
+
+.i-threema {
+ &:before {
+ content: $i-threema;
+ }
+}
+
+.i-stackoverflow {
+ &:before {
+ content: $i-stackoverflow;
+ }
+}
+
+.i-search {
+ &:before {
+ content: $i-search;
+ }
+}
+
+.i-mastodon {
+ &:before {
+ content: $i-mastodon;
+ }
+}
+
+.i-hand-holding-heart {
+ &:before {
+ content: $i-hand-holding-heart;
+ }
+}
+
+.i-github {
+ &:before {
+ content: $i-github;
+ }
+}
+
+.i-gitea {
+ &:before {
+ content: $i-gitea;
+ }
+}
+
+.i-firefox {
+ &:before {
+ content: $i-firefox;
+ }
+}
+
+.i-copyright {
+ &:before {
+ content: $i-copyright;
+ }
+}
+
+.i-book {
+ &:before {
+ content: $i-book;
+ }
+}
+
+.i-matrix {
+ &:before {
+ content: $i-matrix;
+ }
+}
+
+.i-pixelfed {
+ &:before {
+ content: $i-pixelfed;
+ }
+}
+
+.i-server {
+ &:before {
+ content: $i-server;
+ }
+}
+
+.i-credit-card {
+ &:before {
+ content: $i-credit-card;
+ }
+}
+
+.i-external-link {
+ &:before {
+ content: $i-external-link;
+ }
+}
+
+.i-heart {
+ &:before {
+ content: $i-heart;
+ }
+}
+
+.i-home {
+ &:before {
+ content: $i-home;
+ }
+}
+
+.i-tags {
+ &:before {
+ content: $i-tags;
+ }
+}
+
+.i-comments {
+ &:before {
+ content: $i-comments;
+ }
+}
+
+.i-users {
+ &:before {
+ content: $i-users;
+ }
+}
+
+.i-bars {
+ &:before {
+ content: $i-bars;
+ }
+}
+
+.i-envelope {
+ &:before {
+ content: $i-envelope;
+ }
+}
+
+.i-language {
+ &:before {
+ content: $i-language;
+ }
+}
+
+.i-user-secret {
+ &:before {
+ content: $i-user-secret;
+ }
+}
+
+.i-heartbeat {
+ &:before {
+ content: $i-heartbeat;
+ }
+}
+
+.i-commenting {
+ &:before {
+ content: $i-commenting;
+ }
+}
+
diff --git a/src/scss/icons/variables.scss b/src/scss/icons/variables.scss
new file mode 100644
index 0000000..3e6cb4f
--- /dev/null
+++ b/src/scss/icons/variables.scss
@@ -0,0 +1,42 @@
+$icomoon-font-family: "icomoon" !default;
+$icomoon-font-path: "fonts" !default;
+
+$i-linkedin: "\e919";
+$i-xing: "\e91a";
+$i-peertube: "\e918";
+$i-network-wired: "\e903";
+$i-money-bill: "\e904";
+$i-chart-line: "\e905";
+$i-info-circle: "\e906";
+$i-code: "\e907";
+$i-xmpp: "\e908";
+$i-wifi: "\e909";
+$i-youtube: "\e90a";
+$i-twitter: "\e90b";
+$i-threema: "\e90c";
+$i-stackoverflow: "\e90d";
+$i-search: "\e90e";
+$i-mastodon: "\e910";
+$i-hand-holding-heart: "\e911";
+$i-github: "\e912";
+$i-gitea: "\e913";
+$i-firefox: "\e914";
+$i-copyright: "\e915";
+$i-book: "\e916";
+$i-matrix: "\e900";
+$i-pixelfed: "\e90f";
+$i-server: "\e901";
+$i-credit-card: "\e902";
+$i-external-link: "\e917";
+$i-heart: "\f004";
+$i-home: "\f015";
+$i-tags: "\f02c";
+$i-comments: "\f086";
+$i-users: "\f0c0";
+$i-bars: "\f0c9";
+$i-envelope: "\f0e0";
+$i-language: "\f1ab";
+$i-user-secret: "\f21b";
+$i-heartbeat: "\f21e";
+$i-commenting: "\f27a";
+
diff --git a/src/scss/main.scss b/src/scss/main.scss
index 8ab923c..883b271 100644
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -1,147 +1,561 @@
-@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 "~@fortawesome/fontawesome-free/scss/fontawesome";
-@import "~@fortawesome/fontawesome-free/scss/solid";
-@import "~@fortawesome/fontawesome-free/scss/brands";
-@import "~@fortawesome/fontawesome-free/scss/regular";
+$primary: #006269;
+$secondary: #444;
+@import "bootstrap/scss/bootstrap-grid";
+@import "bootstrap/scss/bootstrap-reboot";
+@import "bootstrap/scss/bootstrap-utilities";
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/mixins/_breakpoints";
-@font-face {
- font-family: 'Minotaur';
- src: local('Minotaur Phatte'), url(../font/minotaur.ttf) format('truetype');
-}
+$icomoon-font-path: "../font";
+@import "icons/style";
+
+$flag-icons-path: "../flags";
+@import "flag-icons/sass/flag-icons";
body {
- color: #fff;
+ color: #000;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
padding: 0;
margin: 0;
}
-.site-container {
- width: 100%;
+header {
+ position: relative;
height: 100vh;
- display: flex;
- flex-direction: column;
- overflow: hidden;
+ width: 100%;
+ background-image: url(../img/sp-codes.jpg);
+ background-color: transparent;
+ background-size: cover;
+ background-attachment: fixed;
+ background-position: 0 0;
+ color: #fff;
- .content {
- position: relative;
- flex: 1 1 auto;
+ .overlay {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background-color: rgba($secondary, 0.9);
}
- .footer {
- background-image: url("../img/bg.png");
- color: #ffffff;
+ .profile-thumb {
+ height: 300px;
+ width: 300px;
+ margin: 0 auto;
+ border: 2px solid #fff;
+ border-radius: 50%;
+ background-color: #fff;
+ }
+
+ a {
+ color: #fff !important;
+ }
+}
+
+ul.social-icons {
+ margin: 0;
+ padding: 0;
+
+ li {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ display: inline-block;
+
+ a {
+ color: #000;
+ }
+ }
+}
+
+.vh-100 {
+ height: 100vh;
+}
+
+section {
+ padding: 7em 0;
+ clear: both;
+}
+
+.heading {
+ margin-bottom: 5em;
+}
+
+.info {
+ margin: 0;
+ padding: 0;
+ width: 90%;
+ float: left;
+
+ li {
+ width: 100%;
+ float: left;
+ list-style: none;
+ padding: 10px 0;
+
+ &:first-child {
+ padding-top: 0;
+ }
+
+ .first-block {
+ width: 30%;
+ display: inline-block;
+ float: left;
+ color: #000;
+ font-weight: bold;
+ }
+
+ .second-block {
+ width: 70%;
+ display: inline-block;
+ color: rgba(0, 0, 0, 0.5);
+ }
+ }
+}
+
+.timeline {
+ list-style: none;
+ padding: 20px 0 20px;
+ position: relative;
+
+ &::before {
+ top: 20px;
+ bottom: 0;
+ position: absolute;
+ content: " ";
+ width: 2px;
+ background-color: #e6e6e6;
+ left: 50%;
+ margin-left: 0;
+ }
+
+ li {
+ margin-bottom: 20px;
+ position: relative;
+
+ &.timeline-heading > div h3 {
+ display: inline-block;
+ padding: 7px 15px;
+ font-size: 18px;
+ text-transform: uppercase;
+ letter-spacing: 5px;
+ font-weight: bold;
+ background: #e6e6e6;
+ border-radius: 4px;
+ }
+
+ &.timeline-unverted {
+ text-align: right;
+ }
+
+ &.timeline-inverted > .timeline-panel {
+ float: right;
+ }
+
+ .timeline-badge {
+ color: #fff;
+ width: 44px;
+ height: 44px;
+ line-height: 50px;
+ font-size: 1.4em;
+ text-align: center;
+ position: absolute;
+ top: 40px;
+ left: 50%;
+ margin-left: -21px;
+ background-color: $primary;
+ z-index: 100;
+ display: table;
+ border-radius: 50%;
+ }
+
+ .timeline-panel {
+ width: 45%;
+ float: left;
+ margin-bottom: 0;
+ position: relative;
+ border-radius: 4px;
+
+ .duration {
+ display: block;
+ font-size: 16px;
+ font-weight: normal;
+ color: #888;
+ }
+
+ .timeline-title {
+ margin-top: 0;
+
+ .degree {
+ display: block;
+ font-size: 20px;
+ font-weight: bold;
+ color: $primary;
+ }
+ }
+
+ .company {
+ display: block;
+ margin-bottom: 20px;
+ font-size: 16px;
+ font-weight: normal;
+ color: #888;
+ }
+
+ .timeline-body > p, .timeline-body > ul {
+ margin-bottom: 0;
+ }
+ }
+
+ &::before, &::after {
+ content: " ";
+ display: table;
+ }
+
+ &::after {
+ clear: both;
+ }
+ }
+}
+
+.feature-left {
+ color: #fff !important;
+ text-decoration: none !important;
+}
+
+.icon {
+ display: flex;
+ text-align: center;
+ width: 100px;
+ height: 100px;
+ background: #fff;
+ margin: 0 auto 20px;
+ border-radius: 50%;
+}
+
+.circular {
+ height: 160px;
+ width: 160px;
+ position: relative;
+ margin-bottom: 2rem;
+
+ .inner {
+ position: absolute;
+ z-index: 6;
+ top: 50%;
+ left: 50%;
+ height: 150px;
+ width: 150px;
+ margin: -75px 0 0 -75px;
+ background: #ffffff;
+ border-radius: 100%;
+ }
+
+ .number {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ z-index: 10;
+ color: #000;
+ display: flex;
+ flex-direction: column;
+ text-align: center;
+ }
+
+ .bar {
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ background: #eeeeee;
+ -webkit-border-radius: 100%;
+ clip: rect(0px, 160px, 160px, 80px);
+ }
+
+ .circle .bar .progress {
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ -webkit-border-radius: 100%;
+ clip: rect(0px, 80px, 160px, 0px);
+ background: $primary;
+ }
+
+ .circle .left .progress {
+ transform: rotate(180deg);
z-index: 1;
}
+
+ .circle .right {
+ transform: rotate(180deg);
+ z-index: 3;
+ }
+
+ .circle .right .progress-95 {
+ transform: rotate(162deg);
+ }
+
+ .circle .right .progress-90 {
+ transform: rotate(144deg);
+ }
+
+ .circle .right .progress-85 {
+ transform: rotate(126deg);
+ }
+
+ .circle .right .progress-80 {
+ transform: rotate(108deg);
+ }
+
+ .circle .right .progress-75 {
+ transform: rotate(90deg);
+ }
+
+ .circle .right .progress-70 {
+ transform: rotate(72deg);
+ }
+
+ .circle .right .progress-65 {
+ transform: rotate(54deg);
+ }
+
+ .circle .right .progress-60 {
+ transform: rotate(36deg);
+ }
+
+ .circle .right .progress-55 {
+ transform: rotate(18deg);
+ }
+
+ .circle .right .progress-50 {
+ transform: rotate(0deg);
+ }
}
-.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;
+.progress-wrap {
width: 100%;
- height: 100%;
+ float: left;
+ margin-bottom: 10px;
+
+ .progress {
+ overflow: hidden;
+ margin-bottom: 20px;
+ background-color: #eeeeee;
+ //border-radius: 4px;
+ width: 100%;
+ height: 5px;
+
+ .progress-bar {
+ background-color: $primary !important;
+ height: 5px;
+ display: block;
+ box-shadow: none;
+
+ &.progress-95 {
+ width: 95%;
+ }
+
+ &.progress-90 {
+ width: 90%;
+ }
+
+ &.progress-85 {
+ width: 85%;
+ }
+
+ &.progress-80 {
+ width: 80%;
+ }
+
+ &.progress-75 {
+ width: 75%;
+ }
+
+ &.progress-70 {
+ width: 70%;
+ }
+
+ &.progress-65 {
+ width: 65%;
+ }
+
+ &.progress-60 {
+ width: 60%;
+ }
+
+ &.progress-55 {
+ width: 55%;
+ }
+
+ &.progress-50 {
+ width: 50%;
+ }
+
+ &.progress-45 {
+ width: 45%;
+ }
+
+ &.progress-40 {
+ width: 40%;
+ }
+ }
+ }
+}
+
+#services, #interests {
+ color: #fff;
+ background-image: url(../img/bg.jpg);
+}
+
+.interest {
+ background-size: cover;
+ background-position: center center;
+ background-repeat: no-repeat;
+ background-color: #fff;
+ position: relative;
+ height: 270px;
+ width: 100%;
+ display: table;
+ overflow: hidden;
+ text-decoration: none !important;
+ color: #000;
+
+ &:hover {
+ color: #000;
+ }
+
+ .desc {
+ display: table-cell;
+ height: 270px;
+ padding: 15px;
+
+ h3 {
+ font-size: 20px;
+ }
+
+ span {
+ display: block;
+ color: lighten(#000, 60%);
+ font-size: 14px;
+ }
+ }
+
+ &.interest-softwerke {
+ background-image: url(../img/magdeburg.jpg);
+
+ .desc {
+ vertical-align: top;
+ color: #000;
+ }
+ }
+
+ &.interest-magic {
+ background-image: url(../img/sp-magic.jpg);
+
+ .desc {
+ vertical-align: bottom;
+ color: #000;
+ }
+ }
+
+ &.interest-sports {
+ background-image: url(../img/dumbbell.jpg);
+
+ .desc {
+ vertical-align: middle;
+ color: #fff;
+ }
+ }
+
+ &.interest-photography {
+ background-image: url(../img/photography.jpg);
+
+ .desc {
+ vertical-align: top;
+ color: #000;
+ }
+ }
+}
+
+.video {
+ display: table;
+ width: 50%;
+ background-size: cover;
+ background-position: center center;
+ background-repeat: no-repeat;
+ position: relative;
+ display: -webkit-box;
+ display: -moz-box;
+ display: -ms-flexbox;
+ display: -webkit-flex;
display: flex;
- flex-direction: column;
- align-items: stretch;
- text-align: center;
+ flex-wrap: wrap;
}
-.headers .magician {
- color: #000000;
- font-family: "Minotaur", cursive;
- font-weight: normal;
- font-size: 5rem;
- text-shadow: 0 0 1rem #ffffff;
+.choose {
+ width: 50%;
+ padding: 4em;
}
-.headers .developer {
- color: #ffffff;
- font-family: "Minotaur", monospace;
- font-weight: bold;
- font-size: 5rem;
- text-shadow: 0 0 1rem #000000;
+.form-control {
+ box-shadow: none;
+ background: transparent;
+ border: 2px solid rgba(0, 0, 0, 0.1);
+ height: 54px;
+ font-size: 18px;
+ font-weight: 300;
+
+ &:active, &:focus {
+ outline: none;
+ box-shadow: none;
+ border-color: $primary;
+ }
+}
+
+.btn {
+ border-radius: 30px;
+ box-shadow: none !important;
+ outline: none !important;
+}
+
+.btn-primary {
+ color: #fff !important;
+ background-color: $primary !important;
+ border-color: $primary !important;
+}
+
+footer {
+ padding: 50px 0;
+
+ a {
+ color: #000;
+ }
}
@include media-breakpoint-down(md) {
- .headers .magician,
- .headers .developer {
- font-size: 4rem;
+ .timeline {
+ &::before {
+ left: 10%;
+ }
+
+ li {
+ &.timeline-heading > div h3 {
+ display: block;
+ }
+
+ .timeline-badge {
+ top: 30px;
+ left: 10%;
+ }
+
+ .timeline-panel {
+ width: auto;
+ float: none !important;
+ margin-left: 20%;
+ text-align: left;
+ }
+ }
}
}
-
-@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%;
-}
+
+
+
+
+
+
+ {{site.strings.about.title}}
+
+
+
+
+ -
+
- {{site.strings.about.overview.name}}:Samuel Philipp + +
- {{site.strings.about.overview.mail}}:info@samuel-philipp.de +
- {{site.strings.about.overview.site}}:{{site.strings.about.overview.url}} + +
- {{site.strings.about.overview.address}}:Otto-von-Guericke-Straße 40a
39104 Magdeburg +
+
+
+ {{site.strings.about.hello}}
+{{site.strings.about.text}}
+ +
+
+
+
+
+
+ {{site.strings.resume.title}}
+
+
+
+
+ -
+
-
+ +
{{site.strings.resume.work.title}}
+
+ {%- for item in site.strings.resume.work.positions %}
+ -
+ ++++ {{item.start}} - {{item.end}} ++
{{item.position | safe}}
+ {{item.company}} - {{item.city}}{% if item.country %}, {{item.country}}{% endif %} ++ {%- for description in item.descriptions %} ++{{description | safe}}
+ {%- endfor %} +
+ {%- endfor %}
+
-
+
-
+ +
{{site.strings.resume.education.title}}
+ {%- for item in site.strings.resume.education.positions %}
+ -
+ ++++ {{item.start}} - {{item.end}} + {% if item.course %} ++
{{item.course}}{{item.degree}}
+ {% else %} +{{item.degree}}
+ {% endif %} + {{item.institution}} - {{item.city}} ++ {%- for description in item.descriptions %} ++{{description | safe}}
+ {%- endfor %} +
+ {%- endfor %}
+
+
+
+
+
+
+
+
+ {{site.strings.projects.title}}
+
+ {%- for item in site.strings.projects.list %}
+
+ {%- endfor %}
+
+ 
+
+
+
+
+
+
+ {{site.strings.skills.title}}
+
+ {%- for item in site.strings.skills.languages %}
+
+
+
+ {%- endfor %}
+
+
+
+ {{item.name}}{{item.percent}}%
+
+
+
+
+
+ {%- for item in site.strings.skills.technologies %}
+
+
+
+ {%- endfor %}
+
+
+ {{item.name}}{{item.percent}}%
+
+
+
+
+
+
+
+
+
+ {{site.strings.interests.title}}
+
+ {%- for item in site.strings.interests.list %}
+
+ {%- endfor %}
+
+