diff --git a/gulpfile.js b/gulpfile.js index dcc353a..a74af0d 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -71,7 +71,7 @@ var uglify = require('gulp-terser'); var optimizejs = require('gulp-optimize-js'); // Styles -var sass = require('gulp-sass')(require('node-sass')); +var sass = require('gulp-sass'); var postcss = require('gulp-postcss'); var prefix = require('autoprefixer'); var minify = require('cssnano'); @@ -251,4 +251,4 @@ exports.watch = series( exports.default, startServer, watchSource -); +); \ No newline at end of file diff --git a/package.json b/package.json index 09d9226..5c66949 100644 --- a/package.json +++ b/package.json @@ -15,8 +15,8 @@ "browser-sync": "^2.27.6" }, "devDependencies": { - "autoprefixer": "10.4.0", - "cssnano": "5.0.9", + "autoprefixer": "10.3.7", + "cssnano": "5.0.8", "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": "5.0.0", + "gulp-sass": "4.1.1", "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", - "sass": "^1.43.4" + "postcss": "^8.3.11" }, "dependencies": { - "bootstrap": "^5.1.3" + "@fortawesome/fontawesome-free": "^5.15.4", + "bootstrap": "^4.6.0", + "jquery": "^3.6.0" } } diff --git a/src/font/icomoon.eot b/src/font/icomoon.eot deleted file mode 100644 index ba40dd9..0000000 Binary files a/src/font/icomoon.eot and /dev/null differ diff --git a/src/font/icomoon.svg b/src/font/icomoon.svg deleted file mode 100644 index 70fa188..0000000 --- a/src/font/icomoon.svg +++ /dev/null @@ -1,46 +0,0 @@ - - - -Generated by IcoMoon - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/src/font/icomoon.ttf b/src/font/icomoon.ttf deleted file mode 100644 index 799c7fa..0000000 Binary files a/src/font/icomoon.ttf and /dev/null differ diff --git a/src/font/icomoon.woff b/src/font/icomoon.woff deleted file mode 100644 index 31cd055..0000000 Binary files a/src/font/icomoon.woff and /dev/null differ diff --git a/src/font/icomoon.woff2 b/src/font/icomoon.woff2 deleted file mode 100644 index e984702..0000000 Binary files a/src/font/icomoon.woff2 and /dev/null differ diff --git a/src/index.html b/src/index.html index 08900cc..184096d 100644 --- a/src/index.html +++ b/src/index.html @@ -31,502 +31,76 @@ - + -
-
-
-
-
-
- -

Samuel Philipp

-

Full-Stack Developer / SysAdmin / Magician

- -
-
-
-
-
-
-
-
-
-

About Me

-
-
-
-
-
    -
  • Full Name:Louie Jie Mahusay -
    • -
  • Phone:+ 1235 2355 98
    • -
  • Email:info@yoursite.com
    • -
  • Website:www.yoursite.com
    • -
  • Address:198 West 21th Street, Suite 721 New York NY 10016 -
    • -
-
-
-

Hello There!

-

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.

-

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.

- -
-
-
-
-
-
-
-
-

My Resume

-
-
-
-
-
    -
  • -

    Work Experience

    -
    • -
  • -
    -
    -
    -

    Software Engineer

    - AV-TEST GmbH - Jan. 2018 - present -
    -
    -

    Far far away, behind the word mountains, far from the countries Vokalia and - Consonantia, there live the blind texts.

    -
    -
    -
    • -
  • -
    -
    -
    -

    Software Engineer

    - Fiducia & GAD IT AG - Oct. 2017 - Dec. 2018 -
    -
    -

    Far far away, behind the word mountains, they live in Bookmarksgrove right at the - coast of the Semantics, a large language ocean.

    -
    -
    -
    • -
  • -
    -
    -
    -

    Dual Student Applied Computer Science

    - Fiducia & GAD IT AG - Sept. 2014 - Sept. 2017 -
    -
    -

    Far far away, behind the word mountains, far from the countries Vokalia and - Consonantia, there live the blind texts.

    -
    -
    -
    • -
    -
  • -

    Education

    -
    • -
  • -
    -
    -
    -

    Master of Engineering

    - Wismar University - Sept. 2018 - June 2021 -
    -
    -

    Far far away, behind the word mountains, they live in Bookmarksgrove right at the - coast of the Semantics, a large language ocean.

    -
    -
    -
    • -
  • -
    -
    -
    -

    Bachelor of Science

    - Baden-Württemberg Cooperative State University - Oct. 2014 - Sept. 2017 -
    -
    -

    Far far away, behind the word mountains, far from the countries Vokalia and - Consonantia, there live the blind texts.

    -
    -
    -
    • -
  • -
    -
    -
    -

    Abitur (A-Level)

    - Albert-Einstein School - Sept. 2011 - June 2014 -
    -
    -

    Far far away, behind the word mountains, they live in Bookmarksgrove right at the - coast of the Semantics, a large language ocean.

    -
    -
    -
    • -
-
-
-
-
-
-
-
-
-
-

My Projects

-
-
-
-
-
- - - -
-

Web Design

-

Facilis ipsum reprehenderit nemo molestias. Aut cum mollitia reprehenderit.

-
-
-
-
-
- - - -
-

Branding

-

Facilis ipsum reprehenderit nemo molestias. Aut cum mollitia reprehenderit.

-
-
-
-
-
- - - -
-

Analytics

-

Facilis ipsum reprehenderit nemo molestias. Aut cum mollitia reprehenderit.

-
-
-
-
-
-
-
-
-
-
-
-

Skills

-
-
-
-
-
-
-
Java95%
-
-
-
-
-
-
-
-
-
-
-
-
-
-
JavaScript93%
-
-
-
-
-
-
-
-
-
-
-
-
-
-
TypeScript90%
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Python90%
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
HTML89%
-
-
-
-
-
-
-
-
-
-
-
-
-
-
CSS85%
-
-
-
-
-
-
-
-
-
-
-
-
-
-
SQL90%
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Bash85%
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Docker95%
-
-
-
-
-
-
-
Git90%
-
-
-
-
-
-
-
Intellij IDEA80%
-
-
-
-
-
-
-
Node.js85%
-
-
-
-
-
-
-
-
-
Spring Framework100%
-
-
-
-
-
-
-
Angular70%
-
-
-
-
-
-
-
CI/CD85%
-
-
-
-
-
-
-
tba75%
-
-
-
-
-
-
-
-
-
-
-
-
-
-

Interests

-
-
-
-
- -
-

Project Name

- Illustration -
+
+
+ -
-
-
-
-
-
-

Contact

-
-
-
- -
+
+
+
+
Made with in Germany
+
Samuel Philipp
- -
-
- +
+
+
Imprint
-
- -
-
- -
-
-
-
- -
-
- - -
-
- + + diff --git a/src/scss/icons/style.scss b/src/scss/icons/style.scss deleted file mode 100644 index c27057b..0000000 --- a/src/scss/icons/style.scss +++ /dev/null @@ -1,230 +0,0 @@ -@import "variables"; - -@font-face { - font-family: '#{$icomoon-font-family}'; - src: url('#{$icomoon-font-path}/#{$icomoon-font-family}.eot?9r0igb'); - src: url('#{$icomoon-font-path}/#{$icomoon-font-family}.eot?9r0igb#iefix') format('embedded-opentype'), - url('#{$icomoon-font-path}/#{$icomoon-font-family}.woff2?9r0igb') format('woff2'), - url('#{$icomoon-font-path}/#{$icomoon-font-family}.woff?9r0igb') format('woff'), - url('#{$icomoon-font-path}/#{$icomoon-font-family}.ttf?9r0igb') format('truetype'), - url('#{$icomoon-font-path}/#{$icomoon-font-family}.svg?9r0igb##{$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-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-opencollective { - &:before { - content: $i-opencollective; - } -} -.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-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 deleted file mode 100644 index 9911eea..0000000 --- a/src/scss/icons/variables.scss +++ /dev/null @@ -1,40 +0,0 @@ -$icomoon-font-family: "icomoon" !default; -$icomoon-font-path: "fonts" !default; - -$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-opencollective: "\e90f"; -$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-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 8c09922..8ab923c 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -1,419 +1,147 @@ -$primary: #fea500; +@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"; -@import "~bootstrap/scss/bootstrap"; - -$icomoon-font-path: "../font"; -@import "icons/style"; +@font-face { + font-family: 'Minotaur'; + src: local('Minotaur Phatte'), url(../font/minotaur.ttf) format('truetype'); +} body { - color: #000; + color: #fff; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0; margin: 0; } -header { - position: relative; - height: 100vh; +.site-container { width: 100%; - background-image: url(../img/sp-codes.png); - background-color: transparent; - background-size: cover; - background-attachment: fixed; - background-position: 0 0; - - .overlay { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - background: rgba(254, 165, 0, 0.9); - } - - .profile-thumb { - height: 200px; - width: 200px; - margin: 0 auto; - border-radius: 50%; - background-color: #fff; - } -} - -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; -} - -.bg-primary { - background: $primary; -} - -.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: 40%; - display: inline-block; - float: left; - color: #000; - font-weight: bold; - } - - .second-block { - width: 60%; - 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-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; - - .timeline-title { - margin-top: 0; - } - - .company { - display: block; - margin-bottom: 20px; - font-size: 16px; - font-weight: normal; - color: #aaaaaa; - } - - .timeline-body > p, .timeline-body > ul { - margin-bottom: 0; - } - } - - &::before, &::after { - content: " "; - display: table; - } - - &::after { - clear: both; - } - } -} - -.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; -} - -.icon { display: flex; - text-align: center; - width: 100px; - height: 100px; - background: #000; - 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; - //font-size: 18px; - //font-weight: 500; - 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 { - z-index: 1; - animation: left 200ms linear both; - } - - @keyframes left { - 100% { - transform: rotate(180deg); - } - } - - .circle .right { - transform: rotate(180deg); - z-index: 3; - - } - - .circle .right .progress { - animation: right 160ms linear both; - animation-delay: 200ms; - } - - @keyframes right { - 100% { - transform: rotate(144deg); - } - } -} - -.progress-wrap { - width: 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; - } - } -} - -.work { - background-size: cover; - background-position: center center; - background-repeat: no-repeat; - background-color: #fff; - position: relative; - height: 270px; - width: 100%; - display: table; + flex-direction: column; overflow: hidden; - text-decoration: none !important; - color: #000; - .desc { - display: table-cell; - vertical-align: middle; - height: 270px; - background: #fff; - opacity: 0; - -webkit-transition: 0.3s; - -o-transition: 0.3s; - transition: 0.3s; - - h3 { - font-size: 20px; - -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; - transition: transform 0.3s, opacity 0.3s; - -webkit-transform: translate3d(0, -15px, 0); - transform: translate3d(0, -15px, 0); - } - - span { - display: block; - color: lighten(#000, 60%); - font-size: 14px; - -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; - transition: transform 0.3s, opacity 0.3s; - -webkit-transform: translate3d(0, 15px, 0); - transform: translate3d(0, 15px, 0); - } + .content { + position: relative; + flex: 1 1 auto; } - &:hover{ - .desc{ - opacity: 1; - h3{ - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } - span{ - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } - } + + .footer { + background-image: url("../img/bg.png"); + color: #ffffff; + z-index: 1; } } -.video { - display: table; - width: 50%; - background-size: cover; - background-position: center center; +.image { + display: block; background-repeat: no-repeat; - position: relative; - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; + 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-wrap: wrap; + flex-direction: column; + align-items: stretch; + text-align: center; } -.choose { - width: 50%; - padding: 4em; +.headers .magician { + color: #000000; + font-family: "Minotaur", cursive; + font-weight: normal; + font-size: 5rem; + text-shadow: 0 0 1rem #ffffff; } -.form-control { - box-shadow: none; - background: transparent; - border: 2px solid rgba(0, 0, 0, 0.1); - height: 54px; - font-size: 18px; - font-weight: 300; +.headers .developer { + color: #ffffff; + font-family: "Minotaur", monospace; + font-weight: bold; + font-size: 5rem; + text-shadow: 0 0 1rem #000000; +} - &:active, &:focus { - outline: none; - box-shadow: none; - border-color: $primary; +@include media-breakpoint-down(md) { + .headers .magician, + .headers .developer { + font-size: 4rem; } } -.btn { - border-radius: 30px; - box-shadow: none !important; - outline: none !important; +@include media-breakpoint-down(sm) { + .headers .magician, + .headers .developer { + font-size: 3rem; + } } -.btn-primary { - color: #000 !important; - background-color: $primary !important; - border-color: $primary !important; +.headers a { + text-decoration: none; } -footer { - padding: 50px 0; +.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: #000; + color: #ffffff; } } + +.full-size { + width: 100%; + height: 100%; +}