diff --git a/gulpfile.js b/gulpfile.js index a74af0d..dcc353a 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'); +var sass = require('gulp-sass')(require('node-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 5c66949..09d9226 100644 --- a/package.json +++ b/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" } } diff --git a/src/font/icomoon.eot b/src/font/icomoon.eot new file mode 100644 index 0000000..ba40dd9 Binary files /dev/null and b/src/font/icomoon.eot differ diff --git a/src/font/icomoon.svg b/src/font/icomoon.svg new file mode 100644 index 0000000..70fa188 --- /dev/null +++ b/src/font/icomoon.svg @@ -0,0 +1,46 @@ + + + +Generated by IcoMoon + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/font/icomoon.ttf b/src/font/icomoon.ttf new file mode 100644 index 0000000..799c7fa Binary files /dev/null and b/src/font/icomoon.ttf differ diff --git a/src/font/icomoon.woff b/src/font/icomoon.woff new file mode 100644 index 0000000..31cd055 Binary files /dev/null and b/src/font/icomoon.woff differ diff --git a/src/font/icomoon.woff2 b/src/font/icomoon.woff2 new file mode 100644 index 0000000..e984702 Binary files /dev/null and b/src/font/icomoon.woff2 differ diff --git a/src/index.html b/src/index.html index 184096d..08900cc 100644 --- a/src/index.html +++ b/src/index.html @@ -31,76 +31,502 @@ - + -
-
- -
-
-
-
-

Software Engineer

-
-
-
-

Magician

-
-
- - - - - - - - - - -
-
Imprint
-
Privacy
-
Code
-
-
-
-
-
-
Made with in Germany
-
Samuel Philipp
-
-
-
-
Imprint +
+
+
+
+
+
+ +

Samuel Philipp

+

Full-Stack Developer / SysAdmin / Magician

+
-
Privacy -
-
Code
-
-
- + +
+
+
+
+

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 +
+ +
+
+ +
+

Project Name

+ Brading +
+ +
+
+ +
+

Project Name

+ Illustration +
+ +
+
+ +
+

Project Name

+ Design +
+ +
+
+
+
+
+
+
+
+
+

Contact

+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+ diff --git a/src/scss/icons/style.scss b/src/scss/icons/style.scss new file mode 100644 index 0000000..c27057b --- /dev/null +++ b/src/scss/icons/style.scss @@ -0,0 +1,230 @@ +@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 new file mode 100644 index 0000000..9911eea --- /dev/null +++ b/src/scss/icons/variables.scss @@ -0,0 +1,40 @@ +$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 8ab923c..8c09922 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -1,147 +1,419 @@ -@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: #fea500; -@font-face { - font-family: 'Minotaur'; - src: local('Minotaur Phatte'), url(../font/minotaur.ttf) format('truetype'); -} +@import "~bootstrap/scss/bootstrap"; + +$icomoon-font-path: "../font"; +@import "icons/style"; 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; - - .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; + 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; + } } -.headers .magician { - color: #000000; - font-family: "Minotaur", cursive; - font-weight: normal; - font-size: 5rem; - text-shadow: 0 0 1rem #ffffff; +ul.social-icons { + margin: 0; + padding: 0; + + li { + margin: 0; + padding: 0; + list-style: none; + display: inline-block; + + a { + color: #000; + } + } } -.headers .developer { - color: #ffffff; - font-family: "Minotaur", monospace; +.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; - font-size: 5rem; - text-shadow: 0 0 1rem #000000; + background: #e6e6e6; + border-radius: 4px; } -@include media-breakpoint-down(md) { - .headers .magician, - .headers .developer { - font-size: 4rem; +.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); + } } } -@include media-breakpoint-down(sm) { - .headers .magician, - .headers .developer { - font-size: 3rem; +.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; + } } } -.headers a { - text-decoration: none; +.work { + 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; + + .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); + } + } + &: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); + } + } + } } -.headers .codes { - flex-grow: 1; +.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; - align-items: center; - justify-content: center; + flex-wrap: wrap; } -.headers .magic { - flex-grow: 0.6; - display: flex; - align-items: center; - justify-content: center; +.choose { + width: 50%; + padding: 4em; } -.headers .padding { - flex-grow: 1.3; +.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; + } } -.menu { - border-top: 1px solid #ffffff; +.btn { + border-radius: 30px; + box-shadow: none !important; + outline: none !important; +} + +.btn-primary { + color: #000 !important; + background-color: $primary !important; + border-color: $primary !important; +} + +footer { + padding: 50px 0; a { - color: #ffffff; + color: #000; } } - -.full-size { - width: 100%; - height: 100%; -}