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..673c10f 100644 --- a/src/index.html +++ b/src/index.html @@ -31,76 +31,582 @@ - + -
-
- -
-
-
-
-

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 Services

+
+
+
+
+
+ + + +
+

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.

+
+
+
+
+ + +
+
+ +
+ + + +
+

Web Developent

+

Facilis ipsum reprehenderit nemo molestias. Aut cum mollitia reprehenderit.

+
+
+ +
+ +
+
+ + + +
+

Web Marketing

+

Facilis ipsum reprehenderit nemo molestias. Aut cum mollitia reprehenderit.

+
+
+ +
+
+
+ + + +
+

Support

+

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

Project Name

+ Website +
+ +
+
+ +
+

Project Name

+ Illustration +
+ +
+
+ +
+

Project Name

+ Brading +
+ +
+
+ +
+

Project Name

+ Illustration +
+ +
+
+
+
+
+
+
+
+
+

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..db986fe 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -4,6 +4,9 @@ @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"; @@ -145,3 +148,424 @@ body { width: 100%; height: 100%; } + +// ------------------------------ NEW ------------------------------ + +$icomoon-font-path: "../font"; +@import "icons/style"; + + +$primary: #fea500; + +body { + color: #000; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + padding: 0; + margin: 0; +} + +header { + position: relative; + height: 100vh; + 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; + 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); + } + } + } +} + +.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-wrap: wrap; +} + +.choose { + width: 50%; + padding: 4em; +} + +.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: #000 !important; + background-color: $primary !important; + border-color: $primary !important; +} + +footer { + padding: 50px 0; + + a { + color: #000; + } +}