From dccbaa320e0ee2d9713284e4885fbba91ef4c009 Mon Sep 17 00:00:00 2001 From: elida Date: Sun, 15 Oct 2023 02:46:27 +0300 Subject: [PATCH] ` --- portfolio-inspo/README.md | 29 - portfolio-inspo/assets/css/style.css | 2781 ---------------- portfolio-inspo/assets/img/logo.png | Bin 10345 -> 0 bytes portfolio-inspo/assets/js/render.js | 92 - .../assets/css/fancybox.css | 0 .../assets/css/responsive.css | 0 portfolio-main/assets/css/style.css | 2800 +++++++++++++++++ .../img/Elida_wanjiku_profile_image.jpg | Bin .../assets/img/app1.png | Bin .../assets/img/avatar.jpg | Bin .../assets/img/coding.gif | Bin .../assets/img/experience.png | Bin portfolio-main/assets/img/logo.png | Bin 0 -> 14168 bytes .../assets/img/shape/border.png | Bin .../assets/img/shape/shape-01.png | Bin .../assets/img/shape/shape-02.png | Bin .../assets/img/shape/shape-03.png | Bin .../assets/img/shape/shape-04.png | Bin .../assets/img/shape/shape-05.png | Bin .../assets/img/shape/shape-circle1.png | Bin .../assets/img/shape/shape-statistics2.png | Bin .../assets/img/shape/shape-what-i-do1.png | Bin .../assets/img/shape/shape-what-i-do2.png | Bin .../assets/img/shape/shape-what-i-do4.png | Bin .../assets/img/shape/star.png | Bin .../assets/img/skills.png | Bin .../assets/js/app.js | 0 .../assets/js/fancybox.umd.js | 0 .../assets/js/form.js | 0 .../assets/js/jquery-3.6.0.min.js | 0 .../assets/js/kursor.js | 0 .../assets/js/mixitup.min.js | 0 .../assets/js/portfolio.js | 143 +- portfolio-main/assets/js/render.js | 91 + .../assets/js/swiper-bundle.min.js | 0 .../index.html | 47 +- .../README.md | 32 +- .../Text mini portfolio Gianell.txt | 196 +- .../assets/img/EL Gordo.png | Bin .../assets/img/favicon.png | Bin .../assets/img/lottery_1.png | Bin .../assets/img/lottopawa.jpg | Bin .../assets/img/perfil.jpg | Bin .../assets/js/kursor.js | 0 .../assets/js/main.js | 114 +- .../assets/js/scrollreveal.min.js | 24 +- .../assets/pdf/Gianell-Cv.pdf | Bin .../css/index.css | 218 +- .../css/index.css.map | 0 .../css/styles.css | 0 .../index.html | 0 .../preview.png | Bin .../JS/script.js | 0 responsive-portfolio(html-js-css)/index.html | 23 - responsive-portfolio(html-js-css)/style.scss | 0 55 files changed, 3293 insertions(+), 3297 deletions(-) delete mode 100644 portfolio-inspo/README.md delete mode 100644 portfolio-inspo/assets/css/style.css delete mode 100644 portfolio-inspo/assets/img/logo.png delete mode 100644 portfolio-inspo/assets/js/render.js rename {portfolio-inspo => portfolio-main}/assets/css/fancybox.css (100%) rename {portfolio-inspo => portfolio-main}/assets/css/responsive.css (100%) create mode 100644 portfolio-main/assets/css/style.css rename {portfolio-inspo => portfolio-main}/assets/img/Elida_wanjiku_profile_image.jpg (100%) rename {portfolio-inspo => portfolio-main}/assets/img/app1.png (100%) rename {portfolio-inspo => portfolio-main}/assets/img/avatar.jpg (100%) rename {portfolio-inspo => portfolio-main}/assets/img/coding.gif (100%) rename {portfolio-inspo => portfolio-main}/assets/img/experience.png (100%) create mode 100644 portfolio-main/assets/img/logo.png rename {portfolio-inspo => portfolio-main}/assets/img/shape/border.png (100%) rename {portfolio-inspo => portfolio-main}/assets/img/shape/shape-01.png (100%) rename {portfolio-inspo => portfolio-main}/assets/img/shape/shape-02.png (100%) rename {portfolio-inspo => portfolio-main}/assets/img/shape/shape-03.png (100%) rename {portfolio-inspo => portfolio-main}/assets/img/shape/shape-04.png (100%) rename {portfolio-inspo => portfolio-main}/assets/img/shape/shape-05.png (100%) rename {portfolio-inspo => portfolio-main}/assets/img/shape/shape-circle1.png (100%) rename {portfolio-inspo => portfolio-main}/assets/img/shape/shape-statistics2.png (100%) rename {portfolio-inspo => portfolio-main}/assets/img/shape/shape-what-i-do1.png (100%) rename {portfolio-inspo => portfolio-main}/assets/img/shape/shape-what-i-do2.png (100%) rename {portfolio-inspo => portfolio-main}/assets/img/shape/shape-what-i-do4.png (100%) rename {portfolio-inspo => portfolio-main}/assets/img/shape/star.png (100%) rename {portfolio-inspo => portfolio-main}/assets/img/skills.png (100%) rename {portfolio-inspo => portfolio-main}/assets/js/app.js (100%) rename {portfolio-inspo => portfolio-main}/assets/js/fancybox.umd.js (100%) rename {portfolio-inspo => portfolio-main}/assets/js/form.js (100%) rename {portfolio-inspo => portfolio-main}/assets/js/jquery-3.6.0.min.js (100%) rename {portfolio-inspo => portfolio-main}/assets/js/kursor.js (100%) rename {portfolio-inspo => portfolio-main}/assets/js/mixitup.min.js (100%) rename {portfolio-inspo => portfolio-main}/assets/js/portfolio.js (75%) create mode 100644 portfolio-main/assets/js/render.js rename {portfolio-inspo => portfolio-main}/assets/js/swiper-bundle.min.js (100%) rename {portfolio-inspo => portfolio-main}/index.html (85%) rename {responsive-mini-portfolio(html-css-js) => portfolio-mini}/README.md (96%) rename {responsive-mini-portfolio(html-css-js) => portfolio-mini}/Text mini portfolio Gianell.txt (92%) rename {responsive-mini-portfolio(html-css-js) => portfolio-mini}/assets/img/EL Gordo.png (100%) rename {responsive-mini-portfolio(html-css-js) => portfolio-mini}/assets/img/favicon.png (100%) rename {responsive-mini-portfolio(html-css-js) => portfolio-mini}/assets/img/lottery_1.png (100%) rename {responsive-mini-portfolio(html-css-js) => portfolio-mini}/assets/img/lottopawa.jpg (100%) rename {responsive-mini-portfolio(html-css-js) => portfolio-mini}/assets/img/perfil.jpg (100%) rename {responsive-mini-portfolio(html-css-js) => portfolio-mini}/assets/js/kursor.js (100%) rename {responsive-mini-portfolio(html-css-js) => portfolio-mini}/assets/js/main.js (97%) rename {responsive-mini-portfolio(html-css-js) => portfolio-mini}/assets/js/scrollreveal.min.js (99%) rename {responsive-mini-portfolio(html-css-js) => portfolio-mini}/assets/pdf/Gianell-Cv.pdf (100%) rename {responsive-mini-portfolio(html-css-js) => portfolio-mini}/css/index.css (96%) rename {responsive-mini-portfolio(html-css-js) => portfolio-mini}/css/index.css.map (100%) rename {responsive-mini-portfolio(html-css-js) => portfolio-mini}/css/styles.css (100%) rename {responsive-mini-portfolio(html-css-js) => portfolio-mini}/index.html (100%) rename {responsive-mini-portfolio(html-css-js) => portfolio-mini}/preview.png (100%) delete mode 100644 responsive-portfolio(html-js-css)/JS/script.js delete mode 100644 responsive-portfolio(html-js-css)/index.html delete mode 100644 responsive-portfolio(html-js-css)/style.scss diff --git a/portfolio-inspo/README.md b/portfolio-inspo/README.md deleted file mode 100644 index a94a89b..0000000 --- a/portfolio-inspo/README.md +++ /dev/null @@ -1,29 +0,0 @@ - - -![Purple Pink Modern Programmer LinkedIn Banner](https://user-images.githubusercontent.com/101924220/211615060-0153728d-e91d-42b0-a823-80f1d2c80da8.gif) - -As a software developer, I am dedicated to increasing the accessibility of open source technologies, creating tools that empower individuals, and fostering a sense of community. My areas of expertise include utilizing technologies such as React, Next, TypeScript, Redux, Ruby, Ruby on Rails, JavaScript, PHP, APIs, PostgreSQL, and MySQL. - -- 🔭 I recently finish the redesign of [CANAL+ Afrique](https://canalplus-afrique.vercel.app/) with Nextjs, Typescript and Taiwindcss. -- 🌱 I'm currently performing Nextjs and TypeScript while learning [WEB3](https://learnweb3.io/). -- 👯 Looking to collaborate on Ruby, Ruby on Rails, Redux, React, Nextjs, TypeScript and JavaScript. -- 💬 Ask me anything about HTML, CSS, JavaScript, Reactjs, Typescript, NextJs, Redux, Ruby, Ruby on Rails, Tailwindcss and other Web technologies. -
- -## âš¡ Take a look at My Stats : - - - | Chris's Github Stats | | -| ------------- | ------------- | - -

- -

Visitor's Count

-

visitor badge

- - - - - - - diff --git a/portfolio-inspo/assets/css/style.css b/portfolio-inspo/assets/css/style.css deleted file mode 100644 index d7fff3e..0000000 --- a/portfolio-inspo/assets/css/style.css +++ /dev/null @@ -1,2781 +0,0 @@ -@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;700&display=swap"); - -* { - margin: 0; - padding: 0; - box-sizing: border-box; - font-family: "Quicksand", sans-serif; -} - -body { - background: var(--primary) url(../images/shape/border.png) fixed center; - background-size: 17%; - color: var(--gray); - font-size: 17px; - position: relative; - text-transform: capitalize; -} - -:root { - --primary: #0e1630; - --secondary: #eb4a4a; - --tertiary: #171f38; - --gray: #808dad; - --white: #ffffff; - --secondary-02: rgba(235, 74, 74, 0.1); - --tertiary-02: rgba(23, 31, 56, 0.5); -} -/*=============== THEME ===============*/ -.change-theme { - /* position: absolute; - top: 1.5rem; - right: 0; */ - font-size: 1.55rem; - color: var(--title-color); - cursor: pointer; - transition: .3s; - padding: 0 10px; -} - -.change-theme:hover { - color: var(--first-color); -} - -.section { - position: relative; - padding: 6rem 0; - border-top: 2px solid var(--tertiary-02); -} - -.heading-title { - margin-bottom: 2rem; -} - -.heading-title h3 { - position: relative; - padding-left: 35px; -} - -.heading-title h3::before { - position: absolute; - content: ""; - background: var(--secondary); - height: 2px; - width: 30px; - left: 0; - top: 50%; -} - -.heading-title h2 { - color: var(--white); - margin-top: 10px; -} - -/* Animation*/ -@-webkit-keyframes navbar-animation { - 0% { - opacity: 0; - -webkit-transform: translateY(-100%); - transform: translateY(-100%); - } - - 100% { - opacity: 1; - -webkit-transform: translateY(0); - transform: translateY(0); - } -} - -@keyframes navbar-animation { - 0% { - opacity: 0; - -webkit-transform: translateY(-100%); - transform: translateY(-100%); - } - - 100% { - opacity: 1; - -webkit-transform: translateY(0); - transform: translateY(0); - } -} - -/*=============== dropdown animation ===============*/ -@-webkit-keyframes dropdown-animation { - 0% { - -webkit-transform: scaleY(0); - transform: scaleY(0); - } - - 50% { - -webkit-transform: scaleY(1.1); - transform: scaleY(1.1); - } - - 100% { - -webkit-transform: scaleY(1); - transform: scaleY(1); - } -} - -@keyframes dropdown-animation { - 0% { - -webkit-transform: scaleY(0); - transform: scaleY(0); - } - - 50% { - -webkit-transform: scaleY(1.1); - transform: scaleY(1.1); - } - - 100% { - -webkit-transform: scaleY(1); - transform: scaleY(1); - } -} - -/*=============== img-up-down-animation ===============*/ -@-webkit-keyframes img-up-down-animation { - 0% { - -webkit-transform: translateY(0); - transform: translateY(0); - } - - 50% { - -webkit-transform: translateY(25px); - transform: translateY(25px); - } - - 100% { - -webkit-transform: translateY(0); - transform: translateY(0); - } -} - -@keyframes img-up-down-animation { - 0% { - -webkit-transform: translateY(0); - transform: translateY(0); - } - - 50% { - -webkit-transform: translateY(25px); - transform: translateY(25px); - } - - 100% { - -webkit-transform: translateY(0); - transform: translateY(0); - } -} - -/*=============== dropdown animation ===============*/ -@-webkit-keyframes img-right-left-animation { - 0% { - -webkit-transform: translateX(0); - transform: translateX(0); - } - - 50% { - -webkit-transform: translateX(25px); - transform: translateX(25px); - } - - 100% { - -webkit-transform: translateX(0); - transform: translateX(0); - } -} - -@keyframes img-right-left-animation { - 0% { - -webkit-transform: translateX(0); - transform: translateX(0); - } - - 50% { - -webkit-transform: translateX(25px); - transform: translateX(25px); - } - - 100% { - -webkit-transform: translateX(0); - transform: translateX(0); - } -} - -/* To top button */ -#progress { - position: fixed; - bottom: 1rem; - right: 1rem; - height: 45px; - width: 45px; - display: none; - place-items: center; - border-radius: 50%; - -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); - box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); - cursor: pointer; -} - -#progress-value { - display: block; - height: calc(100% - 5px); - width: calc(100% - 5px); - background-color: var(--tertiary); - border-radius: 50%; - display: -ms-grid; - display: grid; - place-items: center; - font-size: 24px; - color: var(--gray); - -webkit-transition: 0.3s ease; - transition: 0.3s ease; -} - -#progress-value:hover { - color: var(--white); -} - -/* Shape */ -.shape .shape-01, -.shape .shape-02, -.shape .shape-03, -.shape .shape-04, -.shape .shape-05, -.shape .shape-06, -.shape .shape-07, -.shape .shape-08, -.shape .shape-09, -.shape .shape-10 { - position: absolute; - z-index: -1; -} - -/* hr-01 */ -hr.hr-01 { - margin: 1.5rem 0; - background: var(--gray); - opacity: 0.1; -} - -* { - -webkit-box-sizing: border-box; - box-sizing: border-box; - padding: 0; - margin: 0; -} - -html { - scroll-behavior: smooth; -} - -a { - text-decoration: none; - -webkit-transition: 0.3s ease-in-out; - transition: 0.3s ease-in-out; -} - -ul { - list-style: none; -} - -img { - max-width: 100%; - height: auto; -} - -ul, -li, -p, -h1, -h2, -h3, -h4, -h5 { - margin: 0; - padding: 0; -} - -p, -h3, -h4 { - font-weight: 500; -} - -h1, -h2 { - font-weight: 700; -} - -h1 { - font-size: 85px; - line-height: 1em; -} - -h2 { - font-size: 34px; - line-height: 1.5em; -} - -h3 { - color: var(--secondary); - font-size: 24px; - line-height: 1.5em; -} - -h4 { - color: var(--white); - font-size: 19px; - line-height: 1.4em; -} - -p { - font-size: 17px; - line-height: 1.7em; -} - -.notCursor { - cursor: none; -} - -.notCursor * { - cursor: none; -} - -#kursorWrapper { - position: fixed; - z-index: 99999; - overflow: hidden; - pointer-events: none; - top: 0; - left: 0; - width: 100%; - height: 100%; - overflow: hidden; -} - -div[class*="kursor"] { - position: fixed; - pointer-events: none; - -webkit-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); - z-index: 10000; -} - -div[class*="kursor"].kursor--hidden { - opacity: 0; - width: 0px; - height: 0px; -} - -div[class*="kursor"].kursor--1 { - left: 0px; - top: 0px; - width: 25px; - height: 25px; - border-radius: 50%; - border: 2px solid rgba(var(--k-color), 1); - -webkit-transition: all 0.2s ease, top 0.18s ease-out, left 0.18s ease-out; - transition: all 0.2s ease, top 0.18s ease-out, left 0.18s ease-out; -} - -div[class*="kursor"].kursor--1+.kursorChild { - display: block; - width: 4px; - height: 4px; - background: rgba(var(--k-color), 1); - border-radius: 50%; - -webkit-transition: all 0.2s ease, top 0s ease-out, left 0s ease-out; - transition: all 0.2s ease, top 0s ease-out, left 0s ease-out; -} - -div[class*="kursor"].kursor--1.--hover { - width: 40px; - height: 40px; - border: 2px solid rgba(var(--k-color), 0); - background: rgba(var(--k-color), 0.1); -} - -div[class*="kursor"].kursor--1.--hover+.kursorChild { - background: rgba(var(--k-color), 0.3); -} - -div[class*="kursor"].kursor--1.kursor--down { - width: 20px; - height: 20px; -} - -div[class*="kursor"].kursor--1.kursor--down+.kursorChild:after { - width: 40px !important; - height: 40px !important; - opacity: 0; - border: 1px solid; - border-radius: 50%; - border-color: rgba(var(--k-color), 1); - -webkit-transition: all 0.4s ease; - transition: all 0.4s ease; -} - -div[class*="kursor"].kursor--2 { - left: 0px; - top: 0px; - width: 20px; - height: 20px; - border-radius: 50%; - background: rgba(var(--k-color), 1); - -webkit-transition: all 0.2s ease, top 0.1s ease-out, left 0.1s ease-out; - transition: all 0.2s ease, top 0.1s ease-out, left 0.1s ease-out; -} - -div[class*="kursor"].kursor--2+.kursorChild { - display: block; - width: 4px; - height: 4px; - background: rgba(var(--k-color), 1); - border-radius: 50%; - -webkit-transition: all 0.2s ease, top 0.2s ease-out, left 0.2s ease-out; - transition: all 0.2s ease, top 0.2s ease-out, left 0.2s ease-out; -} - -div[class*="kursor"].kursor--2.--hover { - width: 40px; - height: 40px; - background: rgba(var(--k-color), 0.1); -} - -div[class*="kursor"].kursor--2.--hover+.kursorChild { - background: rgba(var(--k-color), 0.3); -} - -div[class*="kursor"].kursor--2.kursor--down { - width: 10px; - height: 10px; -} - -div[class*="kursor"].kursor--2.kursor--down+.kursorChild:after { - width: 40px !important; - height: 40px !important; - opacity: 0; - border: 1px solid; - border-radius: 50%; - border-color: rgba(var(--k-color), 1); - -webkit-transition: all 0.4s ease; - transition: all 0.4s ease; -} - -div[class*="kursor"].kursor--3 { - left: 0px; - top: 0px; - width: 20px; - height: 20px; - border: 1px solid rgba(var(--k-color), 1); - -webkit-transition: all 0.2s ease, top 0.05s ease-out, left 0.05s ease-out; - transition: all 0.2s ease, top 0.05s ease-out, left 0.05s ease-out; -} - -div[class*="kursor"].kursor--3+.kursorChild { - display: block; - width: 4px; - height: 4px; - background: rgba(var(--k-color), 1); - -webkit-transition: all 0.2s ease, top 0.2s ease-out, left 0.2s ease-out; - transition: all 0.2s ease, top 0.2s ease-out, left 0.2s ease-out; -} - -div[class*="kursor"].kursor--3.--hover { - width: 40px; - height: 40px; - background: rgba(var(--k-color), 0.1); - border: 1px solid rgba(var(--k-color), 0); -} - -div[class*="kursor"].kursor--3.--hover+.kursorChild { - background: rgba(var(--k-color), 0.3); -} - -div[class*="kursor"].kursor--3.kursor--down { - width: 5px; - height: 5px; - border: 1px solid rgba(var(--k-color), 0); -} - -div[class*="kursor"].kursor--3.kursor--down+.kursorChild { - width: 10px; - height: 10px; -} - -div[class*="kursor"].kursor--3.kursor--down+.kursorChild:after { - width: 40px !important; - height: 40px !important; - opacity: 0; - border: 1px solid; - border-color: rgba(var(--k-color), 1); - -webkit-transition: all 0.4s ease; - transition: all 0.4s ease; -} - -div[class*="kursor"].kursor--4 { - left: 0px; - top: 0px; - width: 50px; - height: 50px; - border: 1px solid rgba(var(--k-color), 0.3); - border-radius: 50%; - -webkit-transition: all 0.2s ease, top 0.2s ease-out, left 0.2s ease-out; - transition: all 0.2s ease, top 0.2s ease-out, left 0.2s ease-out; -} - -div[class*="kursor"].kursor--4+.kursorChild { - display: block; - width: 6px; - height: 6px; - background: rgba(var(--k-color), 1); - border-radius: 50%; - -webkit-transition: all 0.2s ease, top 0.03s ease-out, left 0.03s ease-out; - transition: all 0.2s ease, top 0.03s ease-out, left 0.03s ease-out; -} - -div[class*="kursor"].kursor--4.--hover { - width: 30px; - height: 30px; - background: rgba(var(--k-color), 0.1); - border: 3px solid rgba(var(--k-color), 0); -} - -div[class*="kursor"].kursor--4.--hover+.kursorChild { - width: 25px; - height: 25px; - background: rgba(var(--k-color), 0.1); -} - -div[class*="kursor"].kursor--4.kursor--down { - width: 5px; - height: 5px; -} - -div[class*="kursor"].kursor--4.kursor--down+.kursorChild { - width: 10px; - height: 10px; -} - -div[class*="kursor"].kursor--4.kursor--down+.kursorChild:after { - width: 40px !important; - height: 40px !important; - opacity: 0; - border-radius: 50%; - border: 1px solid; - border-color: rgba(var(--k-color), 1); - -webkit-transition: all 0.4s ease; - transition: all 0.4s ease; -} - -div[class*="kursor"].kursor--5 { - left: 0px; - top: 0px; - width: 10px; - height: 10px; - border: 1px solid rgba(var(--k-color), 0.5); - border-radius: 50%; - -webkit-transition: all 0.2s ease, top 0.2s ease-out, left 0.2s ease-out; - transition: all 0.2s ease, top 0.2s ease-out, left 0.2s ease-out; -} - -div[class*="kursor"].kursor--5.--hover { - width: 26px; - height: 26px; - background: rgba(var(--k-color), 0.1); - border: 3px solid rgba(var(--k-color), 0); -} - -div[class*="kursor"].kursor--5.kursor--down { - width: 15px; - height: 15px; -} - -div[class*="kursorChild"] { - position: fixed; - pointer-events: none; - -webkit-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); - display: none; - overflow: hidden; -} - -div[class*="kursorChild"].kursorChild[class*="--hidden"] { - opacity: 0; - width: 0px; - height: 0px; -} - -div[class*="kursorChild"].kursorChild:after { - content: ""; - pointer-events: none; - width: 0px; - height: 0px; - position: absolute; - left: 50%; - top: 50%; - opacity: 1; - border: 0px solid rgba(var(--k-color), 0.5); - -webkit-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); -} - -.kursor--absolute { - position: absolute !important; - z-index: 2000; -} - -.btn { - color: var(--secondary); - border: 2px solid transparent; - padding: 15px 25px; - text-decoration: none; - border-radius: 0.5rem; - min-width: 160px; - font-size: 17px; - font-weight: 500; - -webkit-transform: scale(1); - transform: scale(1); - -webkit-transition: 0.3s ease-in-out; - transition: 0.3s ease-in-out; -} - -.btn:hover { - color: var(--quaternary); - -webkit-transform: scale(1.03) translateY(-5px); - transform: scale(1.03) translateY(-5px); -} - -.btn-generic { - color: var(--secondary); - border: 1px solid var(--secondary); - background: var(--tertiary); -} - -.btn-generic:hover { - color: var(--gray); - border: 1px solid var(--gray); -} - -.btn-link { - text-decoration: underline; - text-decoration-thickness: 2px; -} - -.btn-link:hover { - color: var(--gray); -} - -.pulse { - width: 65px; - height: 65px; - /* background: rgba(235, 74, 74, 0.3); */ - background: #0101014d; - color: white !important; - border-radius: 50%; - position: relative; - -webkit-animation: pulsar 1.5s infinite linear; - animation: pulsar 1.5s infinite linear; -} - -@-webkit-keyframes pulsar { - 0% { - -webkit-box-shadow: 0 0 0 0 white, - 0 0 0 2px white, 0 0 0 20px white; - box-shadow: 0 0 0 0 white, 0 0 0 2px rgba(255, 255, 255, 0.1), - 0 0 0 20px rgba(255, 255, 255, 0.1); - } - - 100% { - -webkit-box-shadow: 0 0 0 2px white 0 0 0 20px white 0 0 0 40px white; - box-shadow : 0 0 0 2px white - 0 0 0 20px white, 0 0 0 40px white; - } -} - -@keyframes pulsar { - 0% { - -webkit-box-shadow: 0 0 0 0 white, - 0 0 0 2px white, 0 0 0 20px white; - box-shadow: 0 0 0 0 white, 0 0 0 2px rgba(255, 255, 255, 0.1), - 0 0 0 20px rgba(255, 255, 255, 0.1); - } - - 100% { - -webkit-box-shadow: 0 0 0 2px white 0 0 0 20px white 0 0 0 40px white; - box-shadow : 0 0 0 2px white - 0 0 0 20px white, 0 0 0 40px white; - } - /* 0% { - -webkit-box-shadow: 0 0 0 0 rgba(235, 74, 74, 0.1), - 0 0 0 2px rgba(235, 74, 74, 0.1), 0 0 0 20px rgba(235, 74, 74, 0.1); - box-shadow: 0 0 0 0 rgba(235, 74, 74, 0.1), 0 0 0 2px rgba(235, 74, 74, 0.1), - 0 0 0 20px rgba(235, 74, 74, 0.1); - } - - 100% { - -webkit-box-shadow: 0 0 0 2px rgba(235, 74, 74, 0.1), - 0 0 0 20px rgba(235, 74, 74, 0.1), 0 0 0 40px rgba(255, 255, 255, 0); - box-shadow: 0 0 0 2px rgba(235, 74, 74, 0.1), - 0 0 0 20px rgba(235, 74, 74, 0.1), 0 0 0 40px rgba(255, 255, 255, 0); - } */ -} - -header.has-style-01 { - padding: 10rem 0 5rem; - position: relative; - overflow: hidden; -} - -header.has-style-01 .shape-01 { - left: 25%; - top: 150px; - width: auto; -} - -header.has-style-01 .shape-02 { - left: 50%; - top: 150px; - width: auto; - opacity: 0.5; -} - -header.has-style-01 .shape-10 { - right: 8%; - top: 150px; - width: 100px; - z-index: 50; -} - -header.has-style-01 .shape-07 { - left: 10%; - bottom: 50px; - width: auto; -} - -header.has-style-01 .shape-03 { - left: 55%; - top: 400px; - width: auto; -} - -header.has-style-01 .hero-content { - position: relative; - margin-bottom: 40px; -} - -header.has-style-01 .hero-content h3.title-welcome { - color: var(--secondary); - position: relative; - padding-left: 45px; -} - -header.has-style-01 .hero-content h3.title-welcome::before { - position: absolute; - content: ""; - background: var(--secondary); - height: 3px; - width: 40px; - left: 0; - top: 50%; -} - -header.has-style-01 .hero-content h1 { - color: var(--white); - margin: 20px 0; -} - -header.has-style-01 .hero-content ul.link { - margin: 40px 0; -} - -header.has-style-01 .hero-thumb { - position: relative; - text-align: center; -} - -header.has-style-01 .hero-thumb .skills, -header.has-style-01 .hero-thumb .experience, -header.has-style-01 .hero-thumb .play { - position: absolute; - z-index: 100; -} - -header.has-style-01 .hero-thumb .skills { - top: 40%; - left: -5.5rem; - width: 150px; - border-radius: 15px; - -webkit-animation: img-up-down-animation 3s infinite; - animation: img-up-down-animation 3s infinite; - -webkit-box-shadow: -15px -15px 25px rgba(0, 0, 0, 0.1); - box-shadow: -15px -15px 25px rgba(0, 0, 0, 0.1); -} - -header.has-style-01 .hero-thumb .experience { - bottom: -3rem; - right: -1rem; - width: 150px; - border-radius: 15px; - -webkit-animation: img-right-left-animation 3s infinite; - animation: img-right-left-animation 3s infinite; - -webkit-box-shadow: -15px -15px 25px rgba(0, 0, 0, 0.1); - box-shadow: -15px -15px 25px rgba(0, 0, 0, 0.1); -} - -header.has-style-01 .hero-thumb .play { - color: var(--secondary); - display: -webkit-box; - display: -ms-flexbox; - display: flex; - height: 50px; - width: 50px; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - border-radius: 50%; - bottom: 0px; - left: 1rem; -} - -header.has-style-01 .hero-thumb .thumb { - -webkit-box-shadow: -15px -15px 25px rgba(0, 0, 0, 0.1); - box-shadow: -15px -15px 25px rgba(0, 0, 0, 0.1); - border-radius: 5rem; -} - -header.has-style-01 ul.social { - position: absolute; - right: -8rem; - top: 50%; - -webkit-transform: translateX(-50%); - transform: translateX(-50%); - -webkit-transform: rotate(-90deg); - transform: rotate(-90deg); -} - -header.has-style-01 ul.social li { - display: inline-block; - padding: 0 0.5rem; -} - -header.has-style-01 ul.social li a { - color: var(--gray); - position: relative; - -webkit-transition: 0.3s ease-in-out; - transition: 0.3s ease-in-out; -} - -header.has-style-01 ul.social li a:hover { - color: var(--secondary); -} - -header.has-style-02 { - padding: 10rem 0 4rem; - position: relative; - overflow: hidden; -} - -header.has-style-02 .shape-10 { - right: 0; - bottom: 0; - width: 300px; -} - -header.has-style-02 .shape-03 { - left: 5rem; - top: 40%; - width: 80px; -} - -/* end header has-style-02 */ -/* start navbar */ -.navbar { - background: var(--primary) !important; - border-bottom: 2px solid var(--tertiary); - position: absolute; - left: 0; - top: 0; - width: 100%; - z-index: 1010; - height: 90px; - -webkit-transition: 0.3s ease-in-out; - transition: 0.3s ease-in-out; - /* start media all and min-width: 992px */ - /* end media all and min-width: 992px */ - /* start media all and max-width: 992px */ - /* end media all and max-width: 992px */ -} - -.navbar.fixed-top { - position: fixed; - -webkit-animation: navbar-animation 0.6s; - animation: navbar-animation 0.6s; -} - -.navbar .navbar-nav li a { - -webkit-transition: 0.3s ease-in-out; - transition: 0.3s ease-in-out; -} - -.navbar .navbar-nav li a.active, -.navbar .navbar-nav li a:hover { - color: var(--secondary) !important; -} - -/* end navbar */ -/* start what-do */ -.what-do.has-style-01 .shape-03 { - left: 38%; - top: -50px; - width: 100px; -} - -.what-do.has-style-01 .shape-04 { - left: 33%; - top: 80px; - width: 50px; -} - -.what-do.has-style-01 .shape-05 { - right: 0; - top: 0px; - width: auto; -} - -.what-do.has-style-01 .shape-06 { - right: 0; - top: 100px; - width: auto; -} - -.what-do.has-style-01 .box { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - background: var(--tertiary); - border: 1px solid transparent; - border-radius: 15px; - padding: 1.5rem; - margin: 1rem 0; - -webkit-transition: 0.3s ease-in-out; - transition: 0.3s ease-in-out; -} - -.what-do.has-style-01 .box:hover { - cursor: pointer; - border: 1px solid var(--primary); - -webkit-transform: translateY(-10px); - transform: translateY(-10px); - -webkit-box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1); - box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1); -} - -.what-do.has-style-01 .box .icon { - margin-right: 15px; - position: relative; - padding: 1rem 1rem 1rem 0; -} - -.what-do.has-style-01 .box .icon i { - color: var(--secondary); - font-size: 45px; - -webkit-transition: 0.3s ease-in-out; - transition: 0.3s ease-in-out; -} - -.what-do.has-style-01 .box .icon::before { - content: ""; - position: absolute; - top: 0; - right: 0; - background: var(--secondary); - opacity: 0.1; - height: 45px; - width: 45px; - border-radius: 50%; - -webkit-transition: 0.3s ease-in-out; - transition: 0.3s ease-in-out; -} - -.what-do.has-style-01 .box:hover i { - -webkit-transform: translateY(-15px); - transform: translateY(-15px); -} - -.what-do.has-style-01 .box:hover .icon::before { - -webkit-transform: translateY(15px); - transform: translateY(15px); - background: var(--gray); -} -#about .hero-content img{ -border-radius: 5rem; -} -.profile-img{ - -webkit-filter: grayscale(100%); - filter: grayscale(100%); - /* z-index: -1; */ -} -/* end what-do */ -/* start about me */ -.about-me.has-style-01 .shape-04 { - left: 30%; - top: 100px; - width: auto; -} - -.about-me.has-style-01 .shape-07 { - left: 30%; - bottom: 50px; - width: 100px; -} - -.about-me.has-style-01 ul.info { - margin-bottom: 20px; -} - -.about-me.has-style-01 ul.info li { - color: var(--white); - margin-bottom: 20px; -} - -.about-me.has-style-01 ul.info li i { - color: var(--secondary); - position: relative; - top: 5px; - margin-right: 0.5rem; -} - -/* end about me */ -/* start portfolio */ -.portfolio.has-style-01 .shape-03 { - left: 50%; - top: -50px; - width: 100px; -} - -.portfolio.has-style-01 .shape-07 { - left: 25%; - bottom: 50px; - width: 100px; -} - -.portfolio.has-style-01 .controls { - margin-bottom: 1rem; - text-align: right; -} - -.portfolio.has-style-01 .controls button { - background: transparent; - border: none; - color: var(--gray); - margin-right: 1.5rem; - position: relative; - text-transform: capitalize; - font-weight: 500; - font-size: 17px; - -webkit-transition: 0.3s ease-in-out; - transition: 0.3s ease-in-out; -} - -.portfolio.has-style-01 .controls button:last-child { - margin-right: 0; -} - -.portfolio.has-style-01 .controls button:hover { - color: var(--secondary); -} - -.portfolio.has-style-01 .controls button.mixitup-control-active { - color: var(--secondary); -} - -.portfolio.has-style-01 .controls button.mixitup-control-active::before { - position: absolute; - content: ""; - bottom: -0.5rem; - left: 0; - height: 2px; - width: 15px; - background: var(--secondary); -} - -.portfolio.has-style-01 .item-card { - background: var(--tertiary); - border-radius: 15px; - padding: 1.5rem; - margin-bottom: 2rem; - border: 2px solid transparent; - -webkit-transition: 0.3s ease-in-out; - transition: 0.3s ease-in-out; -} - -.portfolio.has-style-01 .item-card:hover { - border: 2px solid var(--gray); - -webkit-box-shadow: 0 25px 45px rgba(0, 0, 0, 0.3); - box-shadow: 0 25px 45px rgba(0, 0, 0, 0.3); -} - -.portfolio.has-style-01 .item-card:hover .title-link { - color: var(--white); -} - -.portfolio.has-style-01 .item-card .title-link { - color: var(--secondary); - margin-bottom: 10px; - display: block; - -webkit-transition: 0.3s ease-in-out; - transition: 0.3s ease-in-out; -} - -.portfolio.has-style-01 .item-card .tag-link { - margin: 1rem 0; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - gap: 5px; - -ms-flex-wrap: wrap; - flex-wrap: wrap; -} - -.portfolio.has-style-01 .item-card .tag-link li { - display: inline-block; -} - -.portfolio.has-style-01 .item-card .tag-link li a { - background: var(--primary); - color: var(--gray); - padding: 0.5rem; - display: inline-block; - border-radius: 0.5rem; - font-size: 14px; -} - -.portfolio.has-style-01 .item-card .tag-link li a:hover { - color: var(--white); -} - -.portfolio.has-style-01 .item-card .item-image { - border-radius: 1rem; - overflow: hidden; - position: relative; -} - -.portfolio.has-style-01 .item-card .item-image .link-image, -.portfolio.has-style-01 .item-card .item-image .link-view { - position: absolute; - bottom: -50px; - right: -50px; - background: var(--secondary); - color: var(--white); - border-radius: 0.3rem 0 0 0; - font-size: 18px; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - height: 50px; - width: 80px; - -webkit-transition: 0.3s ease-in-out; - transition: 0.3s ease-in-out; -} - - -.portfolio.has-style-01 .item-card .item-image img { - width: 100%; - height: 100%; -} - -.portfolio.has-style-01 .item-card:hover .link-image { - bottom: 0; - right: 0; -} - -.portfolio.has-style-01 .item-card:hover .link-view { - bottom: 0; - left: 0; -} - -.portfolio.has-style-01 .item-card:hover .link-image:hover, -.portfolio.has-style-01 .item-card:hover .link-view:hover { - background: var(--tertiary); -} - -/* start skils */ -.skils.has-style-01 .shape-03 { - right: 10%; - top: -40px; - width: 80px; -} - -.skils.has-style-01 .shape-06 { - right: 0; - bottom: 50px; - width: auto; -} - -.skils.has-style-01 .shape-08 { - left: 0; - top: 50px; - width: auto; -} - -.skils.has-style-01 .progress { - width: 120px; - height: 120px; - text-align: center; - background: var(--tertiary); - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - border-radius: 50%; - position: relative; - margin: 30px auto; - overflow: visible; -} - -.skils.has-style-01 .progress::before { - position: absolute; - content: ""; - top: -5px; - left: -5px; - border: 2px dashed var(--secondary); - height: 130px; - width: 130px; - border-radius: 50%; - opacity: 0.4; -} - -.skils.has-style-01 .progress>span { - width: 50%; - height: 100%; - overflow: hidden; - position: absolute; - top: 0; - z-index: 1; -} - -.skils.has-style-01 .progress .progress-left { - left: 0; -} - -.skils.has-style-01 .progress .progress-bar { - width: 100%; - height: 100%; - background: none; - position: absolute; - top: 0; - border: 5px solid var(--secondary); -} - -.skils.has-style-01 .progress .progress-left .progress-bar { - left: 100%; - border-top-right-radius: 90px; - border-bottom-right-radius: 90px; - border-left: 0; - -webkit-transform-origin: center left; - transform-origin: center left; -} - -.skils.has-style-01 .progress .progress-right { - right: 0; -} - -.skils.has-style-01 .progress .progress-right .progress-bar { - left: -100%; - border-top-left-radius: 90px; - border-bottom-left-radius: 90px; - border-right: 0; - -webkit-transform-origin: center right; - transform-origin: center right; -} - -.skils.has-style-01 .progress .progress-value { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; -} - -.skils.has-style-01 .progress .progress-value h3 { - color: var(--white); - font-size: 15px; -} - -.skils.has-style-01 .progress[data-percentage="1.66667"] .progress-right .progress-bar { - -webkit-animation: loading-1 1s linear forwards; - animation: loading-1 1s linear forwards; -} - -.skils.has-style-01 .progress[data-percentage="1.66667"] .progress-left .progress-bar { - -webkit-animation: 0; - animation: 0; -} - -.skils.has-style-01 .progress[data-percentage="3.33333"] .progress-right .progress-bar { - -webkit-animation: loading-2 1s linear forwards; - animation: loading-2 1s linear forwards; -} - -.skils.has-style-01 .progress[data-percentage="3.33333"] .progress-left .progress-bar { - -webkit-animation: 0; - animation: 0; -} - -.skils.has-style-01 .progress[data-percentage="5"] .progress-right .progress-bar { - -webkit-animation: loading-3 1s linear forwards; - animation: loading-3 1s linear forwards; -} - -.skils.has-style-01 .progress[data-percentage="5"] .progress-left .progress-bar { - -webkit-animation: 0; - animation: 0; -} - -.skils.has-style-01 .progress[data-percentage="6.66667"] .progress-right .progress-bar { - -webkit-animation: loading-4 1s linear forwards; - animation: loading-4 1s linear forwards; -} - -.skils.has-style-01 .progress[data-percentage="6.66667"] .progress-left .progress-bar { - -webkit-animation: 0; - animation: 0; -} - -.skils.has-style-01 .progress[data-percentage="8.33333"] .progress-right .progress-bar { - -webkit-animation: loading-5 1s linear forwards; - animation: loading-5 1s linear forwards; -} - -.skils.has-style-01 .progress[data-percentage="8.33333"] .progress-left .progress-bar { - -webkit-animation: 0; - animation: 0; -} - -.skils.has-style-01 .progress[data-percentage="10"] .progress-right .progress-bar { - -webkit-animation: loading-6 1s linear forwards; - animation: loading-6 1s linear forwards; -} - -.skils.has-style-01 .progress[data-percentage="10"] .progress-left .progress-bar { - -webkit-animation: 0; - animation: 0; -} - -.skils.has-style-01 .progress[data-percentage="11.66667"] .progress-right .progress-bar { - -webkit-animation: loading-7 1s linear forwards; - animation: loading-7 1s linear forwards; -} - -.skils.has-style-01 .progress[data-percentage="11.66667"] .progress-left .progress-bar { - -webkit-animation: 0; - animation: 0; -} - -.skils.has-style-01 .progress[data-percentage="13.33333"] .progress-right .progress-bar { - -webkit-animation: loading-8 1s linear forwards; - animation: loading-8 1s linear forwards; -} - -.skils.has-style-01 .progress[data-percentage="13.33333"] .progress-left .progress-bar { - -webkit-animation: 0; - animation: 0; -} - -.skils.has-style-01 .progress[data-percentage="15"] .progress-right .progress-bar { - -webkit-animation: loading-9 1s linear forwards; - animation: loading-9 1s linear forwards; -} - -.skils.has-style-01 .progress[data-percentage="15"] .progress-left .progress-bar { - -webkit-animation: 0; - animation: 0; -} - -.skils.has-style-01 .progress[data-percentage="16.66667"] .progress-right .progress-bar { - -webkit-animation: loading-10 1s linear forwards; - animation: loading-10 1s linear forwards; -} - -.skils.has-style-01 .progress[data-percentage="16.66667"] .progress-left .progress-bar { - -webkit-animation: 0; - animation: 0; -} - -.skils.has-style-01 .progress[data-percentage="18.33333"] .progress-right .progress-bar { - -webkit-animation: loading-11 1s linear forwards; - animation: loading-11 1s linear forwards; -} - -.skils.has-style-01 .progress[data-percentage="18.33333"] .progress-left .progress-bar { - -webkit-animation: 0; - animation: 0; -} - -.skils.has-style-01 .progress[data-percentage="20"] .progress-right .progress-bar { - -webkit-animation: loading-12 1s linear forwards; - animation: loading-12 1s linear forwards; -} - -.skils.has-style-01 .progress[data-percentage="20"] .progress-left .progress-bar { - -webkit-animation: 0; - animation: 0; -} - -.skils.has-style-01 .progress[data-percentage="21.66667"] .progress-right .progress-bar { - -webkit-animation: loading-13 1s linear forwards; - animation: loading-13 1s linear forwards; -} - -.skils.has-style-01 .progress[data-percentage="21.66667"] .progress-left .progress-bar { - -webkit-animation: 0; - animation: 0; -} - -.skils.has-style-01 .progress[data-percentage="23.33333"] .progress-right .progress-bar { - -webkit-animation: loading-14 1s linear forwards; - animation: loading-14 1s linear forwards; -} - -.skils.has-style-01 .progress[data-percentage="23.33333"] .progress-left .progress-bar { - -webkit-animation: 0; - animation: 0; -} - -.skils.has-style-01 .progress[data-percentage="25"] .progress-right .progress-bar { - -webkit-animation: loading-15 1s linear forwards; - animation: loading-15 1s linear forwards; -} - -.skils.has-style-01 .progress[data-percentage="25"] .progress-left .progress-bar { - -webkit-animation: 0; - animation: 0; -} - -.skils.has-style-01 .progress[data-percentage="26.66667"] .progress-right .progress-bar { - -webkit-animation: loading-16 1s linear forwards; - animation: loading-16 1s linear forwards; -} - -.skils.has-style-01 .progress[data-percentage="26.66667"] .progress-left .progress-bar { - -webkit-animation: 0; - animation: 0; -} - -.skils.has-style-01 .progress[data-percentage="28.33333"] .progress-right .progress-bar { - -webkit-animation: loading-17 1s linear forwards; - animation: loading-17 1s linear forwards; -} - -.skils.has-style-01 .progress[data-percentage="28.33333"] .progress-left .progress-bar { - -webkit-animation: 0; - animation: 0; -} - -.skils.has-style-01 .progress[data-percentage="30"] .progress-right .progress-bar { - -webkit-animation: loading-18 1s linear forwards; - animation: loading-18 1s linear forwards; -} - -.skils.has-style-01 .progress[data-percentage="30"] .progress-left .progress-bar { - -webkit-animation: 0; - animation: 0; -} - -.skils.has-style-01 .progress[data-percentage="31.66667"] .progress-right .progress-bar { - -webkit-animation: loading-19 1s linear forwards; - animation: loading-19 1s linear forwards; -} - -.skils.has-style-01 .progress[data-percentage="31.66667"] .progress-left .progress-bar { - -webkit-animation: 0; - animation: 0; -} - -.skils.has-style-01 .progress[data-percentage="33.33333"] .progress-right .progress-bar { - -webkit-animation: loading-20 1s linear forwards; - animation: loading-20 1s linear forwards; -} - -.skils.has-style-01 .progress[data-percentage="33.33333"] .progress-left .progress-bar { - -webkit-animation: 0; - animation: 0; -} - -.skils.has-style-01 .progress[data-percentage="35"] .progress-right .progress-bar { - -webkit-animation: loading-21 1s linear forwards; - animation: loading-21 1s linear forwards; -} - -.skils.has-style-01 .progress[data-percentage="35"] .progress-left .progress-bar { - -webkit-animation: 0; - animation: 0; -} - -.skils.has-style-01 .progress[data-percentage="36.66667"] .progress-right .progress-bar { - -webkit-animation: loading-22 1s linear forwards; - animation: loading-22 1s linear forwards; -} - -.skils.has-style-01 .progress[data-percentage="36.66667"] .progress-left .progress-bar { - -webkit-animation: 0; - animation: 0; -} - -.skils.has-style-01 .progress[data-percentage="38.33333"] .progress-right .progress-bar { - -webkit-animation: loading-23 1s linear forwards; - animation: loading-23 1s linear forwards; -} - -.skils.has-style-01 .progress[data-percentage="38.33333"] .progress-left .progress-bar { - -webkit-animation: 0; - animation: 0; -} - -.skils.has-style-01 .progress[data-percentage="40"] .progress-right .progress-bar { - -webkit-animation: loading-24 1s linear forwards; - animation: loading-24 1s linear forwards; -} - -.skils.has-style-01 .progress[data-percentage="40"] .progress-left .progress-bar { - -webkit-animation: 0; - animation: 0; -} - -.skils.has-style-01 .progress[data-percentage="41.66667"] .progress-right .progress-bar { - -webkit-animation: loading-25 1s linear forwards; - animation: loading-25 1s linear forwards; -} - -.skils.has-style-01 .progress[data-percentage="41.66667"] .progress-left .progress-bar { - -webkit-animation: 0; - animation: 0; -} - -.skils.has-style-01 .progress[data-percentage="43.33333"] .progress-right .progress-bar { - -webkit-animation: loading-26 1s linear forwards; - animation: loading-26 1s linear forwards; -} - -.skils.has-style-01 .progress[data-percentage="43.33333"] .progress-left .progress-bar { - -webkit-animation: 0; - animation: 0; -} - -.skils.has-style-01 .progress[data-percentage="45"] .progress-right .progress-bar { - -webkit-animation: loading-27 1s linear forwards; - animation: loading-27 1s linear forwards; -} - -.skils.has-style-01 .progress[data-percentage="45"] .progress-left .progress-bar { - -webkit-animation: 0; - animation: 0; -} - -.skils.has-style-01 .progress[data-percentage="46.66667"] .progress-right .progress-bar { - -webkit-animation: loading-28 1s linear forwards; - animation: loading-28 1s linear forwards; -} - -.skils.has-style-01 .progress[data-percentage="46.66667"] .progress-left .progress-bar { - -webkit-animation: 0; - animation: 0; -} - -.skils.has-style-01 .progress[data-percentage="48.33333"] .progress-right .progress-bar { - -webkit-animation: loading-29 1s linear forwards; - animation: loading-29 1s linear forwards; -} - -.skils.has-style-01 .progress[data-percentage="48.33333"] .progress-left .progress-bar { - -webkit-animation: 0; - animation: 0; -} - -.skils.has-style-01 .progress[data-percentage="50"] .progress-right .progress-bar { - -webkit-animation: loading-30 1s linear forwards; - animation: loading-30 1s linear forwards; -} - -.skils.has-style-01 .progress[data-percentage="50"] .progress-left .progress-bar { - -webkit-animation: 0; - animation: 0; -} - -.skils.has-style-01 .progress[data-percentage="51.66667"] .progress-right .progress-bar { - -webkit-animation: loading-30 1s linear forwards; - animation: loading-30 1s linear forwards; -} - -.skils.has-style-01 .progress[data-percentage="51.66667"] .progress-left .progress-bar { - -webkit-animation: loading-1 1s linear forwards 1s; - animation: loading-1 1s linear forwards 1s; -} - -.skils.has-style-01 .progress[data-percentage="53.33333"] .progress-right .progress-bar { - -webkit-animation: loading-30 1s linear forwards; - animation: loading-30 1s linear forwards; -} - -.skils.has-style-01 .progress[data-percentage="53.33333"] .progress-left .progress-bar { - -webkit-animation: loading-2 1s linear forwards 1s; - animation: loading-2 1s linear forwards 1s; -} - -.skils.has-style-01 .progress[data-percentage="55"] .progress-right .progress-bar { - -webkit-animation: loading-30 1s linear forwards; - animation: loading-30 1s linear forwards; -} - -.skils.has-style-01 .progress[data-percentage="55"] .progress-left .progress-bar { - -webkit-animation: loading-3 1s linear forwards 1s; - animation: loading-3 1s linear forwards 1s; -} - -.skils.has-style-01 .progress[data-percentage="56.66667"] .progress-right .progress-bar { - -webkit-animation: loading-30 1s linear forwards; - animation: loading-30 1s linear forwards; -} - -.skils.has-style-01 .progress[data-percentage="56.66667"] .progress-left .progress-bar { - -webkit-animation: loading-4 1s linear forwards 1s; - animation: loading-4 1s linear forwards 1s; -} - -.skils.has-style-01 .progress[data-percentage="58.33333"] .progress-right .progress-bar { - -webkit-animation: loading-30 1s linear forwards; - animation: loading-30 1s linear forwards; -} - -.skils.has-style-01 .progress[data-percentage="58.33333"] .progress-left .progress-bar { - -webkit-animation: loading-5 1s linear forwards 1s; - animation: loading-5 1s linear forwards 1s; -} - -.skils.has-style-01 .progress[data-percentage="60"] .progress-right .progress-bar { - -webkit-animation: loading-30 1s linear forwards; - animation: loading-30 1s linear forwards; -} - -.skils.has-style-01 .progress[data-percentage="60"] .progress-left .progress-bar { - -webkit-animation: loading-6 1s linear forwards 1s; - animation: loading-6 1s linear forwards 1s; -} - -.skils.has-style-01 .progress[data-percentage="61.66667"] .progress-right .progress-bar { - -webkit-animation: loading-30 1s linear forwards; - animation: loading-30 1s linear forwards; -} - -.skils.has-style-01 .progress[data-percentage="61.66667"] .progress-left .progress-bar { - -webkit-animation: loading-7 1s linear forwards 1s; - animation: loading-7 1s linear forwards 1s; -} - -.skils.has-style-01 .progress[data-percentage="63.33333"] .progress-right .progress-bar { - -webkit-animation: loading-30 1s linear forwards; - animation: loading-30 1s linear forwards; -} - -.skils.has-style-01 .progress[data-percentage="63.33333"] .progress-left .progress-bar { - -webkit-animation: loading-8 1s linear forwards 1s; - animation: loading-8 1s linear forwards 1s; -} - -.skils.has-style-01 .progress[data-percentage="65"] .progress-right .progress-bar { - -webkit-animation: loading-30 1s linear forwards; - animation: loading-30 1s linear forwards; -} - -.skils.has-style-01 .progress[data-percentage="65"] .progress-left .progress-bar { - -webkit-animation: loading-9 1s linear forwards 1s; - animation: loading-9 1s linear forwards 1s; -} - -.skils.has-style-01 .progress[data-percentage="66.66667"] .progress-right .progress-bar { - -webkit-animation: loading-30 1s linear forwards; - animation: loading-30 1s linear forwards; -} - -.skils.has-style-01 .progress[data-percentage="66.66667"] .progress-left .progress-bar { - -webkit-animation: loading-10 1s linear forwards 1s; - animation: loading-10 1s linear forwards 1s; -} - -.skils.has-style-01 .progress[data-percentage="68.33333"] .progress-right .progress-bar { - -webkit-animation: loading-30 1s linear forwards; - animation: loading-30 1s linear forwards; -} - -.skils.has-style-01 .progress[data-percentage="68.33333"] .progress-left .progress-bar { - -webkit-animation: loading-11 1s linear forwards 1s; - animation: loading-11 1s linear forwards 1s; -} - -.skils.has-style-01 .progress[data-percentage="70"] .progress-right .progress-bar { - -webkit-animation: loading-30 1s linear forwards; - animation: loading-30 1s linear forwards; -} - -.skils.has-style-01 .progress[data-percentage="70"] .progress-left .progress-bar { - -webkit-animation: loading-12 1s linear forwards 1s; - animation: loading-12 1s linear forwards 1s; -} - -.skils.has-style-01 .progress[data-percentage="71.66667"] .progress-right .progress-bar { - -webkit-animation: loading-30 1s linear forwards; - animation: loading-30 1s linear forwards; -} - -.skils.has-style-01 .progress[data-percentage="71.66667"] .progress-left .progress-bar { - -webkit-animation: loading-13 1s linear forwards 1s; - animation: loading-13 1s linear forwards 1s; -} - -.skils.has-style-01 .progress[data-percentage="73.33333"] .progress-right .progress-bar { - -webkit-animation: loading-30 1s linear forwards; - animation: loading-30 1s linear forwards; -} - -.skils.has-style-01 .progress[data-percentage="73.33333"] .progress-left .progress-bar { - -webkit-animation: loading-14 1s linear forwards 1s; - animation: loading-14 1s linear forwards 1s; -} - -.skils.has-style-01 .progress[data-percentage="75"] .progress-right .progress-bar { - -webkit-animation: loading-30 1s linear forwards; - animation: loading-30 1s linear forwards; -} - -.skils.has-style-01 .progress[data-percentage="75"] .progress-left .progress-bar { - -webkit-animation: loading-15 1s linear forwards 1s; - animation: loading-15 1s linear forwards 1s; -} - -.skils.has-style-01 .progress[data-percentage="76.66667"] .progress-right .progress-bar { - -webkit-animation: loading-30 1s linear forwards; - animation: loading-30 1s linear forwards; -} - -.skils.has-style-01 .progress[data-percentage="76.66667"] .progress-left .progress-bar { - -webkit-animation: loading-16 1s linear forwards 1s; - animation: loading-16 1s linear forwards 1s; -} - -.skils.has-style-01 .progress[data-percentage="78.33333"] .progress-right .progress-bar { - -webkit-animation: loading-30 1s linear forwards; - animation: loading-30 1s linear forwards; -} - -.skils.has-style-01 .progress[data-percentage="78.33333"] .progress-left .progress-bar { - -webkit-animation: loading-17 1s linear forwards 1s; - animation: loading-17 1s linear forwards 1s; -} - -.skils.has-style-01 .progress[data-percentage="80"] .progress-right .progress-bar { - -webkit-animation: loading-30 1s linear forwards; - animation: loading-30 1s linear forwards; -} - -.skils.has-style-01 .progress[data-percentage="80"] .progress-left .progress-bar { - -webkit-animation: loading-18 1s linear forwards 1s; - animation: loading-18 1s linear forwards 1s; -} - -.skils.has-style-01 .progress[data-percentage="81.66667"] .progress-right .progress-bar { - -webkit-animation: loading-30 1s linear forwards; - animation: loading-30 1s linear forwards; -} - -.skils.has-style-01 .progress[data-percentage="81.66667"] .progress-left .progress-bar { - -webkit-animation: loading-19 1s linear forwards 1s; - animation: loading-19 1s linear forwards 1s; -} - -.skils.has-style-01 .progress[data-percentage="83.33333"] .progress-right .progress-bar { - -webkit-animation: loading-30 1s linear forwards; - animation: loading-30 1s linear forwards; -} - -.skils.has-style-01 .progress[data-percentage="83.33333"] .progress-left .progress-bar { - -webkit-animation: loading-20 1s linear forwards 1s; - animation: loading-20 1s linear forwards 1s; -} - -.skils.has-style-01 .progress[data-percentage="85"] .progress-right .progress-bar { - -webkit-animation: loading-30 1s linear forwards; - animation: loading-30 1s linear forwards; -} - -.skils.has-style-01 .progress[data-percentage="85"] .progress-left .progress-bar { - -webkit-animation: loading-21 1s linear forwards 1s; - animation: loading-21 1s linear forwards 1s; -} - -.skils.has-style-01 .progress[data-percentage="86.66667"] .progress-right .progress-bar { - -webkit-animation: loading-30 1s linear forwards; - animation: loading-30 1s linear forwards; -} - -.skils.has-style-01 .progress[data-percentage="86.66667"] .progress-left .progress-bar { - -webkit-animation: loading-22 1s linear forwards 1s; - animation: loading-22 1s linear forwards 1s; -} - -.skils.has-style-01 .progress[data-percentage="88.33333"] .progress-right .progress-bar { - -webkit-animation: loading-30 1s linear forwards; - animation: loading-30 1s linear forwards; -} - -.skils.has-style-01 .progress[data-percentage="88.33333"] .progress-left .progress-bar { - -webkit-animation: loading-23 1s linear forwards 1s; - animation: loading-23 1s linear forwards 1s; -} - -.skils.has-style-01 .progress[data-percentage="90"] .progress-right .progress-bar { - -webkit-animation: loading-30 1s linear forwards; - animation: loading-30 1s linear forwards; -} - -.skils.has-style-01 .progress[data-percentage="90"] .progress-left .progress-bar { - -webkit-animation: loading-24 1s linear forwards 1s; - animation: loading-24 1s linear forwards 1s; -} - -.skils.has-style-01 .progress[data-percentage="91.66667"] .progress-right .progress-bar { - -webkit-animation: loading-30 1s linear forwards; - animation: loading-30 1s linear forwards; -} - -.skils.has-style-01 .progress[data-percentage="91.66667"] .progress-left .progress-bar { - -webkit-animation: loading-25 1s linear forwards 1s; - animation: loading-25 1s linear forwards 1s; -} - -.skils.has-style-01 .progress[data-percentage="93.33333"] .progress-right .progress-bar { - -webkit-animation: loading-30 1s linear forwards; - animation: loading-30 1s linear forwards; -} - -.skils.has-style-01 .progress[data-percentage="93.33333"] .progress-left .progress-bar { - -webkit-animation: loading-26 1s linear forwards 1s; - animation: loading-26 1s linear forwards 1s; -} - -.skils.has-style-01 .progress[data-percentage="95"] .progress-right .progress-bar { - -webkit-animation: loading-30 1s linear forwards; - animation: loading-30 1s linear forwards; -} - -.skils.has-style-01 .progress[data-percentage="95"] .progress-left .progress-bar { - -webkit-animation: loading-27 1s linear forwards 1s; - animation: loading-27 1s linear forwards 1s; -} - -.skils.has-style-01 .progress[data-percentage="96.66667"] .progress-right .progress-bar { - -webkit-animation: loading-30 1s linear forwards; - animation: loading-30 1s linear forwards; -} - -.skils.has-style-01 .progress[data-percentage="96.66667"] .progress-left .progress-bar { - -webkit-animation: loading-28 1s linear forwards 1s; - animation: loading-28 1s linear forwards 1s; -} - -.skils.has-style-01 .progress[data-percentage="98.33333"] .progress-right .progress-bar { - -webkit-animation: loading-30 1s linear forwards; - animation: loading-30 1s linear forwards; -} - -.skils.has-style-01 .progress[data-percentage="98.33333"] .progress-left .progress-bar { - -webkit-animation: loading-29 1s linear forwards 1s; - animation: loading-29 1s linear forwards 1s; -} - -.skils.has-style-01 .progress[data-percentage="100"] .progress-right .progress-bar { - -webkit-animation: loading-30 1s linear forwards; - animation: loading-30 1s linear forwards; -} - -.skils.has-style-01 .progress[data-percentage="100"] .progress-left .progress-bar { - -webkit-animation: loading-30 1s linear forwards 1s; - animation: loading-30 1s linear forwards 1s; -} - -@-webkit-keyframes loading-1 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(6); - transform: rotate(6deg); - } -} - -@keyframes loading-1 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(6); - transform: rotate(6deg); - } -} - -@-webkit-keyframes loading-2 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(12); - transform: rotate(12deg); - } -} - -@keyframes loading-2 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(12); - transform: rotate(12deg); - } -} - -@-webkit-keyframes loading-3 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(18); - transform: rotate(18deg); - } -} - -@keyframes loading-3 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(18); - transform: rotate(18deg); - } -} - -@-webkit-keyframes loading-4 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(24); - transform: rotate(24deg); - } -} - -@keyframes loading-4 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(24); - transform: rotate(24deg); - } -} - -@-webkit-keyframes loading-5 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(30); - transform: rotate(30deg); - } -} - -@keyframes loading-5 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(30); - transform: rotate(30deg); - } -} - -@-webkit-keyframes loading-6 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(36); - transform: rotate(36deg); - } -} - -@keyframes loading-6 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(36); - transform: rotate(36deg); - } -} - -@-webkit-keyframes loading-7 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(42); - transform: rotate(42deg); - } -} - -@keyframes loading-7 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(42); - transform: rotate(42deg); - } -} - -@-webkit-keyframes loading-8 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(48); - transform: rotate(48deg); - } -} - -@keyframes loading-8 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(48); - transform: rotate(48deg); - } -} - -@-webkit-keyframes loading-9 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(54); - transform: rotate(54deg); - } -} - -@keyframes loading-9 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(54); - transform: rotate(54deg); - } -} - -@-webkit-keyframes loading-10 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(60); - transform: rotate(60deg); - } -} - -@keyframes loading-10 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(60); - transform: rotate(60deg); - } -} - -@-webkit-keyframes loading-11 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(66); - transform: rotate(66deg); - } -} - -@keyframes loading-11 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(66); - transform: rotate(66deg); - } -} - -@-webkit-keyframes loading-12 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(72); - transform: rotate(72deg); - } -} - -@keyframes loading-12 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(72); - transform: rotate(72deg); - } -} - -@-webkit-keyframes loading-13 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(78); - transform: rotate(78deg); - } -} - -@keyframes loading-13 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(78); - transform: rotate(78deg); - } -} - -@-webkit-keyframes loading-14 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(84); - transform: rotate(84deg); - } -} - -@keyframes loading-14 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(84); - transform: rotate(84deg); - } -} - -@-webkit-keyframes loading-15 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(90); - transform: rotate(90deg); - } -} - -@keyframes loading-15 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(90); - transform: rotate(90deg); - } -} - -@-webkit-keyframes loading-16 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(96); - transform: rotate(96deg); - } -} - -@keyframes loading-16 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(96); - transform: rotate(96deg); - } -} - -@-webkit-keyframes loading-17 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(102); - transform: rotate(102deg); - } -} - -@keyframes loading-17 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(102); - transform: rotate(102deg); - } -} - -@-webkit-keyframes loading-18 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(108); - transform: rotate(108deg); - } -} - -@keyframes loading-18 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(108); - transform: rotate(108deg); - } -} - -@-webkit-keyframes loading-19 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(114); - transform: rotate(114deg); - } -} - -@keyframes loading-19 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(114); - transform: rotate(114deg); - } -} - -@-webkit-keyframes loading-20 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(120); - transform: rotate(120deg); - } -} - -@keyframes loading-20 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(120); - transform: rotate(120deg); - } -} - -@-webkit-keyframes loading-21 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(126); - transform: rotate(126deg); - } -} - -@keyframes loading-21 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(126); - transform: rotate(126deg); - } -} - -@-webkit-keyframes loading-22 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(132); - transform: rotate(132deg); - } -} - -@keyframes loading-22 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(132); - transform: rotate(132deg); - } -} - -@-webkit-keyframes loading-23 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(138); - transform: rotate(138deg); - } -} - -@keyframes loading-23 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(138); - transform: rotate(138deg); - } -} - -@-webkit-keyframes loading-24 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(144); - transform: rotate(144deg); - } -} - -@keyframes loading-24 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(144); - transform: rotate(144deg); - } -} - -@-webkit-keyframes loading-25 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(150); - transform: rotate(150deg); - } -} - -@keyframes loading-25 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(150); - transform: rotate(150deg); - } -} - -@-webkit-keyframes loading-26 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(156); - transform: rotate(156deg); - } -} - -@keyframes loading-26 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(156); - transform: rotate(156deg); - } -} - -@-webkit-keyframes loading-27 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(162); - transform: rotate(162deg); - } -} - -@keyframes loading-27 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(162); - transform: rotate(162deg); - } -} - -@-webkit-keyframes loading-28 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(168); - transform: rotate(168deg); - } -} - -@keyframes loading-28 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(168); - transform: rotate(168deg); - } -} - -@-webkit-keyframes loading-29 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(174); - transform: rotate(174deg); - } -} - -@keyframes loading-29 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(174); - transform: rotate(174deg); - } -} - -@-webkit-keyframes loading-30 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(180); - transform: rotate(180deg); - } -} - -@keyframes loading-30 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(180); - transform: rotate(180deg); - } -} - -/* start contact-me */ -.contact-me.has-style-01 .shape-03 { - left: 38%; - top: -50px; - width: 100px; -} - -.contact-me.has-style-01 .shape-07 { - left: 30%; - bottom: 50px; - width: auto; -} - -.contact-me.has-style-01 .shape-09 { - right: 5%; - bottom: 15%; - width: auto; -} - -.contact-me.has-style-01 ul.info { - margin-top: 40px; -} - -.contact-me.has-style-01 ul.info li { - margin-top: 20px; -} - -.contact-me.has-style-01 ul.info li a { - color: var(--gray); - -webkit-transition: 0.3s ease-in-out; - transition: 0.3s ease-in-out; - text-transform: none; -} - -.contact-me.has-style-01 ul.info li a:hover { - color: var(--secondary); -} - -.contact-me.has-style-01 ul.info li i { - margin-right: 15px; - background: var(--secondary-02); - color: var(--secondary); - display: -webkit-inline-box; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - height: 35px; - width: 35px; - border-radius: 0.3rem; -} - -.contact-me.has-style-01 ul.social { - margin-top: 40px; -} - -.contact-me.has-style-01 ul.social li a { - color: var(--gray); - margin-right: 1rem; - font-size: 18px; - display: -webkit-inline-box; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - height: 35px; - width: 35px; - border-radius: 0.3rem; - -webkit-transition: 0.3s ease-in-out; - transition: 0.3s ease-in-out; -} - -.contact-me.has-style-01 ul.social li a:hover { - color: var(--secondary); - background: var(--secondary-02); -} - -.contact-me.has-style-01 .contact_form .form-group { - margin-bottom: 20px; - position: relative; -} - -.contact-me.has-style-01 .contact_form .form-group i { - position: absolute; - top: 1.7rem; - right: 1.5rem; - opacity: 0.5; -} - -.contact-me.has-style-01 .contact_form .form-group input, -.contact-me.has-style-01 .contact_form .form-group textarea { - border: none; - background: var(--tertiary-02); - color: var(--white); - border: 1px solid transparent; - padding: 1.5rem 1rem; - border-radius: 0.3rem; - -webkit-box-shadow: none; - box-shadow: none; - -webkit-transition: 0.3s ease-in-out; - transition: 0.3s ease-in-out; -} - -.contact-me.has-style-01 .contact_form .form-group input:focus, -.contact-me.has-style-01 .contact_form .form-group textarea:focus { - background: var(--tertiary); - border: 1px solid var(--tertiary); - -webkit-box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1); - box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1); -} - -/* start footer */ -footer.has-style-01 { - position: relative; - border-top: 2px solid var(--tertiary); - padding: 4rem 0 1.5rem; - background: var(--primary); -} \ No newline at end of file diff --git a/portfolio-inspo/assets/img/logo.png b/portfolio-inspo/assets/img/logo.png deleted file mode 100644 index f3e2dcb8f0db308863bf5a836ece342e419c46bd..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 10345 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 a0O!hBJU4P4qkrB(IJvLNQneB$!T$q^Wn+{8 diff --git a/portfolio-inspo/assets/js/render.js b/portfolio-inspo/assets/js/render.js deleted file mode 100644 index 804cf6d..0000000 --- a/portfolio-inspo/assets/js/render.js +++ /dev/null @@ -1,92 +0,0 @@ -const skills = document.querySelector("#render-skills"); -const social = document.querySelectorAll("#social"); -const topic = document.querySelector("#topic"); - -// Skills - -const allSkills = [ - { skill_name: "JavaScript", percentage: 90 }, - { skill_name: "HTML", percentage: 100 }, - { skill_name: "CSS", percentage: 100 }, - { skill_name: "Bootstrap", percentage: 100 }, - { skill_name: "Tailwind css", percentage: 80 }, - { skill_name: "Material UI", percentage: 70 }, - { skill_name: "React.js", percentage: 80 }, - { skill_name: "Redux", percentage: 80 }, - { skill_name: "Next.js", percentage: 70 }, - { skill_name: "Typescript", percentage: 70 }, - { skill_name: "Ruby", percentage: 80 }, - { skill_name: "Rails", percentage: 80 }, - { skill_name: "Stimulus", percentage: 55 }, - { skill_name: "PHP", percentage: 70 }, - { skill_name: "SQL", percentage: 95 }, -]; - -allSkills.map((skill) => { - html = ` -
-
- - - - - -
-

${skill.skill_name}

-
-
-
- `; - skills.innerHTML += html; -}); - -// Social link - -const social_link = [ - { - link: "https://github.com/Chrissiku/", - icon: "fa-brands fa-github", - }, - { - link: "https://www.linkedin.com/in/christian-siku/", - icon: "fa-brands fa-linkedin-in", - }, - { - link: "https://twitter.com/christian_siku/", - icon: "fa-brands fa-twitter", - }, - { - link: "https://angel.co/u/chris-siku", - icon: "fa-brands fa-angellist", - }, -]; - -social_link.map((item) => { - html = ` -
  • - -
    • - `; - - for (const element of social) { - element.innerHTML += html; - } -}); - -// Topic - -const allTopics = [ - { title: "All works", class: "all" }, - { title: "Web design", class: ".web" }, - { title: "Responsive", class: ".responsive" }, - { title: "Features", class: ".feature" }, -]; - -allTopics.map((item) => { - html = ` - - `; - topic.innerHTML += html; -}); - diff --git a/portfolio-inspo/assets/css/fancybox.css b/portfolio-main/assets/css/fancybox.css similarity index 100% rename from portfolio-inspo/assets/css/fancybox.css rename to portfolio-main/assets/css/fancybox.css diff --git a/portfolio-inspo/assets/css/responsive.css b/portfolio-main/assets/css/responsive.css similarity index 100% rename from portfolio-inspo/assets/css/responsive.css rename to portfolio-main/assets/css/responsive.css diff --git a/portfolio-main/assets/css/style.css b/portfolio-main/assets/css/style.css new file mode 100644 index 0000000..7a12623 --- /dev/null +++ b/portfolio-main/assets/css/style.css @@ -0,0 +1,2800 @@ +@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;700&display=swap'); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Quicksand', sans-serif; +} + +body { + background: var(--primary) url(../images/shape/border.png) fixed center; + background-size: 17%; + color: var(--gray); + font-size: 17px; + position: relative; + text-transform: capitalize; +} + +:root { + --primary: #0e1630; + --secondary: #eb4a4a; + --tertiary: #171f38; + --gray: #808dad; + --white: #ffffff; + --secondary-02: rgba(235, 74, 74, 0.1); + --tertiary-02: rgba(23, 31, 56, 0.5); +} +/* modal */ +.modal-title{ + color: var(--primary); +} +.btn-setPrimary{ + background-color: var(--primary); +} +.modal-content .btn-close{ + color: var(--primary); +} +/*=============== THEME ===============*/ +.change-theme { + /* position: absolute; + top: 1.5rem; + right: 0; */ + font-size: 1.55rem; + color: var(--title-color); + cursor: pointer; + transition: 0.3s; + padding: 0 10px; +} + +.change-theme:hover { + color: var(--first-color); +} +body.dark-theme { + --primary: #272078; + --secondary: #eb4a9b; +} +.section { + position: relative; + padding: 6rem 0; + border-top: 2px solid var(--tertiary-02); +} + +.heading-title { + margin-bottom: 2rem; +} + +.heading-title h3 { + position: relative; + padding-left: 35px; +} + +.heading-title h3::before { + position: absolute; + content: ''; + background: var(--secondary); + height: 2px; + width: 30px; + left: 0; + top: 50%; +} + +.heading-title h2 { + color: var(--white); + margin-top: 10px; +} + +/* Animation*/ +@-webkit-keyframes navbar-animation { + 0% { + opacity: 0; + -webkit-transform: translateY(-100%); + transform: translateY(-100%); + } + + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } +} + +@keyframes navbar-animation { + 0% { + opacity: 0; + -webkit-transform: translateY(-100%); + transform: translateY(-100%); + } + + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } +} + +/*=============== dropdown animation ===============*/ +@-webkit-keyframes dropdown-animation { + 0% { + -webkit-transform: scaleY(0); + transform: scaleY(0); + } + + 50% { + -webkit-transform: scaleY(1.1); + transform: scaleY(1.1); + } + + 100% { + -webkit-transform: scaleY(1); + transform: scaleY(1); + } +} + +@keyframes dropdown-animation { + 0% { + -webkit-transform: scaleY(0); + transform: scaleY(0); + } + + 50% { + -webkit-transform: scaleY(1.1); + transform: scaleY(1.1); + } + + 100% { + -webkit-transform: scaleY(1); + transform: scaleY(1); + } +} + +/*=============== img-up-down-animation ===============*/ +@-webkit-keyframes img-up-down-animation { + 0% { + -webkit-transform: translateY(0); + transform: translateY(0); + } + + 50% { + -webkit-transform: translateY(25px); + transform: translateY(25px); + } + + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + } +} + +@keyframes img-up-down-animation { + 0% { + -webkit-transform: translateY(0); + transform: translateY(0); + } + + 50% { + -webkit-transform: translateY(25px); + transform: translateY(25px); + } + + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + } +} + +/*=============== dropdown animation ===============*/ +@-webkit-keyframes img-right-left-animation { + 0% { + -webkit-transform: translateX(0); + transform: translateX(0); + } + + 50% { + -webkit-transform: translateX(25px); + transform: translateX(25px); + } + + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } +} + +@keyframes img-right-left-animation { + 0% { + -webkit-transform: translateX(0); + transform: translateX(0); + } + + 50% { + -webkit-transform: translateX(25px); + transform: translateX(25px); + } + + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } +} + +/* To top button */ +#progress { + position: fixed; + bottom: 1rem; + right: 1rem; + height: 45px; + width: 45px; + display: none; + place-items: center; + border-radius: 50%; + -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); + box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); + cursor: pointer; +} + +#progress-value { + display: block; + height: calc(100% - 5px); + width: calc(100% - 5px); + background-color: var(--tertiary); + border-radius: 50%; + display: -ms-grid; + display: grid; + place-items: center; + font-size: 24px; + color: var(--gray); + -webkit-transition: 0.3s ease; + transition: 0.3s ease; +} + +#progress-value:hover { + color: var(--white); +} + +/* Shape */ +.shape .shape-01, +.shape .shape-02, +.shape .shape-03, +.shape .shape-04, +.shape .shape-05, +.shape .shape-06, +.shape .shape-07, +.shape .shape-08, +.shape .shape-09, +.shape .shape-10 { + position: absolute; + z-index: -1; +} + +/* hr-01 */ +hr.hr-01 { + margin: 1.5rem 0; + background: var(--gray); + opacity: 0.1; +} + +* { + -webkit-box-sizing: border-box; + box-sizing: border-box; + padding: 0; + margin: 0; +} + +html { + scroll-behavior: smooth; +} + +a { + text-decoration: none; + -webkit-transition: 0.3s ease-in-out; + transition: 0.3s ease-in-out; +} + +ul { + list-style: none; +} + +img { + max-width: 100%; + height: auto; +} + +ul, +li, +p, +h1, +h2, +h3, +h4, +h5 { + margin: 0; + padding: 0; +} + +p, +h3, +h4 { + font-weight: 500; +} + +h1, +h2 { + font-weight: 700; +} + +h1 { + font-size: 85px; + line-height: 1em; +} + +h2 { + font-size: 34px; + line-height: 1.5em; +} + +h3 { + color: var(--secondary); + font-size: 24px; + line-height: 1.5em; +} + +h4 { + color: var(--white); + font-size: 19px; + line-height: 1.4em; +} + +p { + font-size: 17px; + line-height: 1.7em; +} + +.notCursor { + cursor: none; +} + +.notCursor * { + cursor: none; +} + +#kursorWrapper { + position: fixed; + z-index: 99999; + overflow: hidden; + pointer-events: none; + top: 0; + left: 0; + width: 100%; + height: 100%; + overflow: hidden; +} + +div[class*='kursor'] { + position: fixed; + pointer-events: none; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + z-index: 10000; +} + +div[class*='kursor'].kursor--hidden { + opacity: 0; + width: 0px; + height: 0px; +} + +div[class*='kursor'].kursor--1 { + left: 0px; + top: 0px; + width: 25px; + height: 25px; + border-radius: 50%; + border: 2px solid rgba(var(--k-color), 1); + -webkit-transition: all 0.2s ease, top 0.18s ease-out, left 0.18s ease-out; + transition: all 0.2s ease, top 0.18s ease-out, left 0.18s ease-out; +} + +div[class*='kursor'].kursor--1 + .kursorChild { + display: block; + width: 4px; + height: 4px; + background: rgba(var(--k-color), 1); + border-radius: 50%; + -webkit-transition: all 0.2s ease, top 0s ease-out, left 0s ease-out; + transition: all 0.2s ease, top 0s ease-out, left 0s ease-out; +} + +div[class*='kursor'].kursor--1.--hover { + width: 40px; + height: 40px; + border: 2px solid rgba(var(--k-color), 0); + background: rgba(var(--k-color), 0.1); +} + +div[class*='kursor'].kursor--1.--hover + .kursorChild { + background: rgba(var(--k-color), 0.3); +} + +div[class*='kursor'].kursor--1.kursor--down { + width: 20px; + height: 20px; +} + +div[class*='kursor'].kursor--1.kursor--down + .kursorChild:after { + width: 40px !important; + height: 40px !important; + opacity: 0; + border: 1px solid; + border-radius: 50%; + border-color: rgba(var(--k-color), 1); + -webkit-transition: all 0.4s ease; + transition: all 0.4s ease; +} + +div[class*='kursor'].kursor--2 { + left: 0px; + top: 0px; + width: 20px; + height: 20px; + border-radius: 50%; + background: rgba(var(--k-color), 1); + -webkit-transition: all 0.2s ease, top 0.1s ease-out, left 0.1s ease-out; + transition: all 0.2s ease, top 0.1s ease-out, left 0.1s ease-out; +} + +div[class*='kursor'].kursor--2 + .kursorChild { + display: block; + width: 4px; + height: 4px; + background: rgba(var(--k-color), 1); + border-radius: 50%; + -webkit-transition: all 0.2s ease, top 0.2s ease-out, left 0.2s ease-out; + transition: all 0.2s ease, top 0.2s ease-out, left 0.2s ease-out; +} + +div[class*='kursor'].kursor--2.--hover { + width: 40px; + height: 40px; + background: rgba(var(--k-color), 0.1); +} + +div[class*='kursor'].kursor--2.--hover + .kursorChild { + background: rgba(var(--k-color), 0.3); +} + +div[class*='kursor'].kursor--2.kursor--down { + width: 10px; + height: 10px; +} + +div[class*='kursor'].kursor--2.kursor--down + .kursorChild:after { + width: 40px !important; + height: 40px !important; + opacity: 0; + border: 1px solid; + border-radius: 50%; + border-color: rgba(var(--k-color), 1); + -webkit-transition: all 0.4s ease; + transition: all 0.4s ease; +} + +div[class*='kursor'].kursor--3 { + left: 0px; + top: 0px; + width: 20px; + height: 20px; + border: 1px solid rgba(var(--k-color), 1); + -webkit-transition: all 0.2s ease, top 0.05s ease-out, left 0.05s ease-out; + transition: all 0.2s ease, top 0.05s ease-out, left 0.05s ease-out; +} + +div[class*='kursor'].kursor--3 + .kursorChild { + display: block; + width: 4px; + height: 4px; + background: rgba(var(--k-color), 1); + -webkit-transition: all 0.2s ease, top 0.2s ease-out, left 0.2s ease-out; + transition: all 0.2s ease, top 0.2s ease-out, left 0.2s ease-out; +} + +div[class*='kursor'].kursor--3.--hover { + width: 40px; + height: 40px; + background: rgba(var(--k-color), 0.1); + border: 1px solid rgba(var(--k-color), 0); +} + +div[class*='kursor'].kursor--3.--hover + .kursorChild { + background: rgba(var(--k-color), 0.3); +} + +div[class*='kursor'].kursor--3.kursor--down { + width: 5px; + height: 5px; + border: 1px solid rgba(var(--k-color), 0); +} + +div[class*='kursor'].kursor--3.kursor--down + .kursorChild { + width: 10px; + height: 10px; +} + +div[class*='kursor'].kursor--3.kursor--down + .kursorChild:after { + width: 40px !important; + height: 40px !important; + opacity: 0; + border: 1px solid; + border-color: rgba(var(--k-color), 1); + -webkit-transition: all 0.4s ease; + transition: all 0.4s ease; +} + +div[class*='kursor'].kursor--4 { + left: 0px; + top: 0px; + width: 50px; + height: 50px; + border: 1px solid rgba(var(--k-color), 0.3); + border-radius: 50%; + -webkit-transition: all 0.2s ease, top 0.2s ease-out, left 0.2s ease-out; + transition: all 0.2s ease, top 0.2s ease-out, left 0.2s ease-out; +} + +div[class*='kursor'].kursor--4 + .kursorChild { + display: block; + width: 6px; + height: 6px; + background: rgba(var(--k-color), 1); + border-radius: 50%; + -webkit-transition: all 0.2s ease, top 0.03s ease-out, left 0.03s ease-out; + transition: all 0.2s ease, top 0.03s ease-out, left 0.03s ease-out; +} + +div[class*='kursor'].kursor--4.--hover { + width: 30px; + height: 30px; + background: rgba(var(--k-color), 0.1); + border: 3px solid rgba(var(--k-color), 0); +} + +div[class*='kursor'].kursor--4.--hover + .kursorChild { + width: 25px; + height: 25px; + background: rgba(var(--k-color), 0.1); +} + +div[class*='kursor'].kursor--4.kursor--down { + width: 5px; + height: 5px; +} + +div[class*='kursor'].kursor--4.kursor--down + .kursorChild { + width: 10px; + height: 10px; +} + +div[class*='kursor'].kursor--4.kursor--down + .kursorChild:after { + width: 40px !important; + height: 40px !important; + opacity: 0; + border-radius: 50%; + border: 1px solid; + border-color: rgba(var(--k-color), 1); + -webkit-transition: all 0.4s ease; + transition: all 0.4s ease; +} + +div[class*='kursor'].kursor--5 { + left: 0px; + top: 0px; + width: 10px; + height: 10px; + border: 1px solid rgba(var(--k-color), 0.5); + border-radius: 50%; + -webkit-transition: all 0.2s ease, top 0.2s ease-out, left 0.2s ease-out; + transition: all 0.2s ease, top 0.2s ease-out, left 0.2s ease-out; +} + +div[class*='kursor'].kursor--5.--hover { + width: 26px; + height: 26px; + background: rgba(var(--k-color), 0.1); + border: 3px solid rgba(var(--k-color), 0); +} + +div[class*='kursor'].kursor--5.kursor--down { + width: 15px; + height: 15px; +} + +div[class*='kursorChild'] { + position: fixed; + pointer-events: none; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + display: none; + overflow: hidden; +} + +div[class*='kursorChild'].kursorChild[class*='--hidden'] { + opacity: 0; + width: 0px; + height: 0px; +} + +div[class*='kursorChild'].kursorChild:after { + content: ''; + pointer-events: none; + width: 0px; + height: 0px; + position: absolute; + left: 50%; + top: 50%; + opacity: 1; + border: 0px solid rgba(var(--k-color), 0.5); + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); +} + +.kursor--absolute { + position: absolute !important; + z-index: 2000; +} + +.btn { + color: var(--secondary); + border: 2px solid transparent; + padding: 15px 25px; + text-decoration: none; + border-radius: 0.5rem; + min-width: 160px; + font-size: 17px; + font-weight: 500; + -webkit-transform: scale(1); + transform: scale(1); + -webkit-transition: 0.3s ease-in-out; + transition: 0.3s ease-in-out; +} +.btn-special { + color: #fff; + border: 2px solid transparent; + padding: .275rem .75rem; + text-decoration: none; + border-radius: 0.5rem; + min-width: 0 !important; + font-size: 17px; + font-weight: 500; + -webkit-transform: scale(1); + transform: scale(1); + -webkit-transition: 0.3s ease-in-out; + transition: 0.3s ease-in-out; +} +.btn:hover { + color: var(--quaternary); + -webkit-transform: scale(1.03) translateY(-5px); + transform: scale(1.03) translateY(-5px); +} + +.btn-generic { + color: var(--secondary); + border: 1px solid var(--secondary); + background: var(--tertiary); +} + +.btn-generic:hover { + color: var(--gray); + border: 1px solid var(--gray); +} + +.btn-link { + text-decoration: underline; + text-decoration-thickness: 2px; +} + +.btn-link:hover { + color: var(--gray); +} + +.pulse { + width: 65px; + height: 65px; + /* background: rgba(235, 74, 74, 0.3); */ + background: #0101014d; + color: white !important; + border-radius: 50%; + position: relative; + -webkit-animation: pulsar 1.5s infinite linear; + animation: pulsar 1.5s infinite linear; +} + +@-webkit-keyframes pulsar { + 0% { + -webkit-box-shadow: 0 0 0 0 white, 0 0 0 2px white, 0 0 0 20px white; + box-shadow: 0 0 0 0 white, 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 0 20px rgba(255, 255, 255, 0.1); + } + + 100% { + -webkit-box-shadow: 0 0 0 2px white 0 0 0 20px white 0 0 0 40px white; + box-shadow: 0 0 0 2px white 0 0 0 20px white, 0 0 0 40px white; + } +} + +@keyframes pulsar { + 0% { + -webkit-box-shadow: 0 0 0 0 white, 0 0 0 2px white, 0 0 0 20px white; + box-shadow: 0 0 0 0 white, 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 0 20px rgba(255, 255, 255, 0.1); + } + + 100% { + -webkit-box-shadow: 0 0 0 2px white 0 0 0 20px white 0 0 0 40px white; + box-shadow: 0 0 0 2px white 0 0 0 20px white, 0 0 0 40px white; + } + /* 0% { + -webkit-box-shadow: 0 0 0 0 rgba(235, 74, 74, 0.1), + 0 0 0 2px rgba(235, 74, 74, 0.1), 0 0 0 20px rgba(235, 74, 74, 0.1); + box-shadow: 0 0 0 0 rgba(235, 74, 74, 0.1), 0 0 0 2px rgba(235, 74, 74, 0.1), + 0 0 0 20px rgba(235, 74, 74, 0.1); + } + + 100% { + -webkit-box-shadow: 0 0 0 2px rgba(235, 74, 74, 0.1), + 0 0 0 20px rgba(235, 74, 74, 0.1), 0 0 0 40px rgba(255, 255, 255, 0); + box-shadow: 0 0 0 2px rgba(235, 74, 74, 0.1), + 0 0 0 20px rgba(235, 74, 74, 0.1), 0 0 0 40px rgba(255, 255, 255, 0); + } */ +} + +header.has-style-01 { + padding: 10rem 0 5rem; + position: relative; + overflow: hidden; +} + +header.has-style-01 .shape-01 { + left: 25%; + top: 150px; + width: auto; +} + +header.has-style-01 .shape-02 { + left: 50%; + top: 150px; + width: auto; + opacity: 0.5; +} + +header.has-style-01 .shape-10 { + right: 8%; + top: 150px; + width: 100px; + z-index: 50; +} + +header.has-style-01 .shape-07 { + left: 10%; + bottom: 50px; + width: auto; +} + +header.has-style-01 .shape-03 { + left: 55%; + top: 400px; + width: auto; +} + +header.has-style-01 .hero-content { + position: relative; + margin-bottom: 40px; +} + +header.has-style-01 .hero-content h3.title-welcome { + color: var(--secondary); + position: relative; + padding-left: 45px; +} + +header.has-style-01 .hero-content h3.title-welcome::before { + position: absolute; + content: ''; + background: var(--secondary); + height: 3px; + width: 40px; + left: 0; + top: 50%; +} + +header.has-style-01 .hero-content h1 { + color: var(--white); + margin: 20px 0; +} + +header.has-style-01 .hero-content ul.link { + margin: 40px 0; +} + +header.has-style-01 .hero-thumb { + position: relative; + text-align: center; +} + +header.has-style-01 .hero-thumb .skills, +header.has-style-01 .hero-thumb .experience, +header.has-style-01 .hero-thumb .play { + position: absolute; + z-index: 100; +} + +header.has-style-01 .hero-thumb .skills { + top: 40%; + left: -5.5rem; + width: 150px; + border-radius: 15px; + -webkit-animation: img-up-down-animation 3s infinite; + animation: img-up-down-animation 3s infinite; + -webkit-box-shadow: -15px -15px 25px rgba(0, 0, 0, 0.1); + box-shadow: -15px -15px 25px rgba(0, 0, 0, 0.1); +} + +header.has-style-01 .hero-thumb .experience { + bottom: -3rem; + right: -1rem; + width: 150px; + border-radius: 15px; + -webkit-animation: img-right-left-animation 3s infinite; + animation: img-right-left-animation 3s infinite; + -webkit-box-shadow: -15px -15px 25px rgba(0, 0, 0, 0.1); + box-shadow: -15px -15px 25px rgba(0, 0, 0, 0.1); +} + +header.has-style-01 .hero-thumb .play { + color: var(--secondary); + display: -webkit-box; + display: -ms-flexbox; + display: flex; + height: 50px; + width: 50px; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-radius: 50%; + bottom: 0px; + left: 1rem; +} + +header.has-style-01 .hero-thumb .thumb { + -webkit-box-shadow: -15px -15px 25px rgba(0, 0, 0, 0.1); + box-shadow: -15px -15px 25px rgba(0, 0, 0, 0.1); + border-radius: 5rem; +} + +header.has-style-01 ul.social { + position: absolute; + right: -8rem; + top: 50%; + -webkit-transform: translateX(-50%); + transform: translateX(-50%); + -webkit-transform: rotate(-90deg); + transform: rotate(-90deg); +} + +header.has-style-01 ul.social li { + display: inline-block; + padding: 0 0.5rem; +} + +header.has-style-01 ul.social li a { + color: var(--gray); + position: relative; + -webkit-transition: 0.3s ease-in-out; + transition: 0.3s ease-in-out; +} + +header.has-style-01 ul.social li a:hover { + color: var(--secondary); +} + +header.has-style-02 { + padding: 10rem 0 4rem; + position: relative; + overflow: hidden; +} + +header.has-style-02 .shape-10 { + right: 0; + bottom: 0; + width: 300px; +} + +header.has-style-02 .shape-03 { + left: 5rem; + top: 40%; + width: 80px; +} + +/* end header has-style-02 */ +/* start navbar */ +.navbar { + background: var(--primary) !important; + border-bottom: 2px solid var(--tertiary); + position: absolute; + left: 0; + top: 0; + width: 100%; + z-index: 1010; + height: 90px; + -webkit-transition: 0.3s ease-in-out; + transition: 0.3s ease-in-out; + /* start media all and min-width: 992px */ + /* end media all and min-width: 992px */ + /* start media all and max-width: 992px */ + /* end media all and max-width: 992px */ +} + +.navbar.fixed-top { + position: fixed; + -webkit-animation: navbar-animation 0.6s; + animation: navbar-animation 0.6s; +} + +.navbar .navbar-nav li a { + -webkit-transition: 0.3s ease-in-out; + transition: 0.3s ease-in-out; +} + +.navbar .navbar-nav li a.active, +.navbar .navbar-nav li a:hover { + color: var(--secondary) !important; +} + +/* end navbar */ +/* start what-do */ +.what-do.has-style-01 .shape-03 { + left: 38%; + top: -50px; + width: 100px; +} + +.what-do.has-style-01 .shape-04 { + left: 33%; + top: 80px; + width: 50px; +} + +.what-do.has-style-01 .shape-05 { + right: 0; + top: 0px; + width: auto; +} + +.what-do.has-style-01 .shape-06 { + right: 0; + top: 100px; + width: auto; +} + +.what-do.has-style-01 .box { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + background: var(--tertiary); + border: 1px solid transparent; + border-radius: 15px; + padding: 1.5rem; + margin: 1rem 0; + -webkit-transition: 0.3s ease-in-out; + transition: 0.3s ease-in-out; +} + +.what-do.has-style-01 .box:hover { + cursor: pointer; + border: 1px solid var(--primary); + -webkit-transform: translateY(-10px); + transform: translateY(-10px); + -webkit-box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1); + box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1); +} + +.what-do.has-style-01 .box .icon { + margin-right: 15px; + position: relative; + padding: 1rem 1rem 1rem 0; +} + +.what-do.has-style-01 .box .icon i { + color: var(--secondary); + font-size: 45px; + -webkit-transition: 0.3s ease-in-out; + transition: 0.3s ease-in-out; +} + +.what-do.has-style-01 .box .icon::before { + content: ''; + position: absolute; + top: 0; + right: 0; + background: var(--secondary); + opacity: 0.1; + height: 45px; + width: 45px; + border-radius: 50%; + -webkit-transition: 0.3s ease-in-out; + transition: 0.3s ease-in-out; +} + +.what-do.has-style-01 .box:hover i { + -webkit-transform: translateY(-15px); + transform: translateY(-15px); +} + +.what-do.has-style-01 .box:hover .icon::before { + -webkit-transform: translateY(15px); + transform: translateY(15px); + background: var(--gray); +} +#about .hero-content img { + border-radius: 5rem; +} +.profile-img { + -webkit-filter: grayscale(100%); + filter: grayscale(100%); + /* z-index: -1; */ +} +/* end what-do */ +/* start about me */ +.about-me.has-style-01 .shape-04 { + left: 30%; + top: 100px; + width: auto; +} + +.about-me.has-style-01 .shape-07 { + left: 30%; + bottom: 50px; + width: 100px; +} + +.about-me.has-style-01 ul.info { + margin-bottom: 20px; +} + +.about-me.has-style-01 ul.info li { + color: var(--white); + margin-bottom: 20px; +} + +.about-me.has-style-01 ul.info li i { + color: var(--secondary); + position: relative; + top: 5px; + margin-right: 0.5rem; +} + +/* end about me */ +/* start portfolio */ +.portfolio.has-style-01 .shape-03 { + left: 50%; + top: -50px; + width: 100px; +} + +.portfolio.has-style-01 .shape-07 { + left: 25%; + bottom: 50px; + width: 100px; +} + +.portfolio.has-style-01 .controls { + margin-bottom: 1rem; + text-align: right; +} + +.portfolio.has-style-01 .controls button { + background: transparent; + border: none; + color: var(--gray); + margin-right: 1.5rem; + position: relative; + text-transform: capitalize; + font-weight: 500; + font-size: 17px; + -webkit-transition: 0.3s ease-in-out; + transition: 0.3s ease-in-out; +} + +.portfolio.has-style-01 .controls button:last-child { + margin-right: 0; +} + +.portfolio.has-style-01 .controls button:hover { + color: var(--secondary); +} + +.portfolio.has-style-01 .controls button.mixitup-control-active { + color: var(--secondary); +} + +.portfolio.has-style-01 .controls button.mixitup-control-active::before { + position: absolute; + content: ''; + bottom: -0.5rem; + left: 0; + height: 2px; + width: 15px; + background: var(--secondary); +} + +.portfolio.has-style-01 .item-card { + background: var(--tertiary); + border-radius: 15px; + padding: 1.5rem; + margin-bottom: 2rem; + border: 2px solid transparent; + -webkit-transition: 0.3s ease-in-out; + transition: 0.3s ease-in-out; +} + +.portfolio.has-style-01 .item-card:hover { + border: 2px solid var(--gray); + -webkit-box-shadow: 0 25px 45px rgba(0, 0, 0, 0.3); + box-shadow: 0 25px 45px rgba(0, 0, 0, 0.3); +} + +.portfolio.has-style-01 .item-card:hover .title-link { + color: var(--white); +} + +.portfolio.has-style-01 .item-card .title-link { + color: var(--secondary); + margin-bottom: 10px; + display: block; + -webkit-transition: 0.3s ease-in-out; + transition: 0.3s ease-in-out; +} + +.portfolio.has-style-01 .item-card .tag-link { + margin: 1rem 0; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + gap: 5px; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} + +.portfolio.has-style-01 .item-card .tag-link li { + display: inline-block; +} + +.portfolio.has-style-01 .item-card .tag-link li a { + background: var(--primary); + color: var(--gray); + padding: 0.5rem; + display: inline-block; + border-radius: 0.5rem; + font-size: 14px; +} + +.portfolio.has-style-01 .item-card .tag-link li a:hover { + color: var(--white); +} + +.portfolio.has-style-01 .item-card .item-image { + border-radius: 1rem; + overflow: hidden; + position: relative; +} + +.portfolio.has-style-01 .item-card .item-image .link-image, +.portfolio.has-style-01 .item-card .item-image .link-view { + position: absolute; + bottom: -50px; + right: -50px; + background: var(--secondary); + color: var(--white); + border-radius: 0.3rem 0 0 0; + font-size: 18px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + height: 50px; + width: 80px; + -webkit-transition: 0.3s ease-in-out; + transition: 0.3s ease-in-out; +} + +.portfolio.has-style-01 .item-card .item-image img { + width: 100%; + height: 100%; +} + +.portfolio.has-style-01 .item-card:hover .link-image { + bottom: 0; + right: 0; +} + +.portfolio.has-style-01 .item-card:hover .link-view { + bottom: 0; + left: 0; +} + +.portfolio.has-style-01 .item-card:hover .link-image:hover, +.portfolio.has-style-01 .item-card:hover .link-view:hover { + background: var(--tertiary); +} + +/* start skils */ +.skils.has-style-01 .shape-03 { + right: 10%; + top: -40px; + width: 80px; +} + +.skils.has-style-01 .shape-06 { + right: 0; + bottom: 50px; + width: auto; +} + +.skils.has-style-01 .shape-08 { + left: 0; + top: 50px; + width: auto; +} + +.skils.has-style-01 .progress { + width: 120px; + height: 120px; + text-align: center; + background: var(--tertiary); + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + border-radius: 50%; + position: relative; + margin: 30px auto; + overflow: visible; +} + +.skils.has-style-01 .progress::before { + position: absolute; + content: ''; + top: -5px; + left: -5px; + border: 2px dashed var(--secondary); + height: 130px; + width: 130px; + border-radius: 50%; + opacity: 0.4; +} + +.skils.has-style-01 .progress > span { + width: 50%; + height: 100%; + overflow: hidden; + position: absolute; + top: 0; + z-index: 1; +} + +.skils.has-style-01 .progress .progress-left { + left: 0; +} + +.skils.has-style-01 .progress .progress-bar { + width: 100%; + height: 100%; + background: none; + position: absolute; + top: 0; + border: 5px solid var(--secondary); +} + +.skils.has-style-01 .progress .progress-left .progress-bar { + left: 100%; + border-top-right-radius: 90px; + border-bottom-right-radius: 90px; + border-left: 0; + -webkit-transform-origin: center left; + transform-origin: center left; +} + +.skils.has-style-01 .progress .progress-right { + right: 0; +} + +.skils.has-style-01 .progress .progress-right .progress-bar { + left: -100%; + border-top-left-radius: 90px; + border-bottom-left-radius: 90px; + border-right: 0; + -webkit-transform-origin: center right; + transform-origin: center right; +} + +.skils.has-style-01 .progress .progress-value { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; +} + +.skils.has-style-01 .progress .progress-value h3 { + color: var(--white); + font-size: 15px; +} + +.skils.has-style-01 .progress[data-percentage='1.66667'] .progress-right .progress-bar { + -webkit-animation: loading-1 1s linear forwards; + animation: loading-1 1s linear forwards; +} + +.skils.has-style-01 .progress[data-percentage='1.66667'] .progress-left .progress-bar { + -webkit-animation: 0; + animation: 0; +} + +.skils.has-style-01 .progress[data-percentage='3.33333'] .progress-right .progress-bar { + -webkit-animation: loading-2 1s linear forwards; + animation: loading-2 1s linear forwards; +} + +.skils.has-style-01 .progress[data-percentage='3.33333'] .progress-left .progress-bar { + -webkit-animation: 0; + animation: 0; +} + +.skils.has-style-01 .progress[data-percentage='5'] .progress-right .progress-bar { + -webkit-animation: loading-3 1s linear forwards; + animation: loading-3 1s linear forwards; +} + +.skils.has-style-01 .progress[data-percentage='5'] .progress-left .progress-bar { + -webkit-animation: 0; + animation: 0; +} + +.skils.has-style-01 .progress[data-percentage='6.66667'] .progress-right .progress-bar { + -webkit-animation: loading-4 1s linear forwards; + animation: loading-4 1s linear forwards; +} + +.skils.has-style-01 .progress[data-percentage='6.66667'] .progress-left .progress-bar { + -webkit-animation: 0; + animation: 0; +} + +.skils.has-style-01 .progress[data-percentage='8.33333'] .progress-right .progress-bar { + -webkit-animation: loading-5 1s linear forwards; + animation: loading-5 1s linear forwards; +} + +.skils.has-style-01 .progress[data-percentage='8.33333'] .progress-left .progress-bar { + -webkit-animation: 0; + animation: 0; +} + +.skils.has-style-01 .progress[data-percentage='10'] .progress-right .progress-bar { + -webkit-animation: loading-6 1s linear forwards; + animation: loading-6 1s linear forwards; +} + +.skils.has-style-01 .progress[data-percentage='10'] .progress-left .progress-bar { + -webkit-animation: 0; + animation: 0; +} + +.skils.has-style-01 .progress[data-percentage='11.66667'] .progress-right .progress-bar { + -webkit-animation: loading-7 1s linear forwards; + animation: loading-7 1s linear forwards; +} + +.skils.has-style-01 .progress[data-percentage='11.66667'] .progress-left .progress-bar { + -webkit-animation: 0; + animation: 0; +} + +.skils.has-style-01 .progress[data-percentage='13.33333'] .progress-right .progress-bar { + -webkit-animation: loading-8 1s linear forwards; + animation: loading-8 1s linear forwards; +} + +.skils.has-style-01 .progress[data-percentage='13.33333'] .progress-left .progress-bar { + -webkit-animation: 0; + animation: 0; +} + +.skils.has-style-01 .progress[data-percentage='15'] .progress-right .progress-bar { + -webkit-animation: loading-9 1s linear forwards; + animation: loading-9 1s linear forwards; +} + +.skils.has-style-01 .progress[data-percentage='15'] .progress-left .progress-bar { + -webkit-animation: 0; + animation: 0; +} + +.skils.has-style-01 .progress[data-percentage='16.66667'] .progress-right .progress-bar { + -webkit-animation: loading-10 1s linear forwards; + animation: loading-10 1s linear forwards; +} + +.skils.has-style-01 .progress[data-percentage='16.66667'] .progress-left .progress-bar { + -webkit-animation: 0; + animation: 0; +} + +.skils.has-style-01 .progress[data-percentage='18.33333'] .progress-right .progress-bar { + -webkit-animation: loading-11 1s linear forwards; + animation: loading-11 1s linear forwards; +} + +.skils.has-style-01 .progress[data-percentage='18.33333'] .progress-left .progress-bar { + -webkit-animation: 0; + animation: 0; +} + +.skils.has-style-01 .progress[data-percentage='20'] .progress-right .progress-bar { + -webkit-animation: loading-12 1s linear forwards; + animation: loading-12 1s linear forwards; +} + +.skils.has-style-01 .progress[data-percentage='20'] .progress-left .progress-bar { + -webkit-animation: 0; + animation: 0; +} + +.skils.has-style-01 .progress[data-percentage='21.66667'] .progress-right .progress-bar { + -webkit-animation: loading-13 1s linear forwards; + animation: loading-13 1s linear forwards; +} + +.skils.has-style-01 .progress[data-percentage='21.66667'] .progress-left .progress-bar { + -webkit-animation: 0; + animation: 0; +} + +.skils.has-style-01 .progress[data-percentage='23.33333'] .progress-right .progress-bar { + -webkit-animation: loading-14 1s linear forwards; + animation: loading-14 1s linear forwards; +} + +.skils.has-style-01 .progress[data-percentage='23.33333'] .progress-left .progress-bar { + -webkit-animation: 0; + animation: 0; +} + +.skils.has-style-01 .progress[data-percentage='25'] .progress-right .progress-bar { + -webkit-animation: loading-15 1s linear forwards; + animation: loading-15 1s linear forwards; +} + +.skils.has-style-01 .progress[data-percentage='25'] .progress-left .progress-bar { + -webkit-animation: 0; + animation: 0; +} + +.skils.has-style-01 .progress[data-percentage='26.66667'] .progress-right .progress-bar { + -webkit-animation: loading-16 1s linear forwards; + animation: loading-16 1s linear forwards; +} + +.skils.has-style-01 .progress[data-percentage='26.66667'] .progress-left .progress-bar { + -webkit-animation: 0; + animation: 0; +} + +.skils.has-style-01 .progress[data-percentage='28.33333'] .progress-right .progress-bar { + -webkit-animation: loading-17 1s linear forwards; + animation: loading-17 1s linear forwards; +} + +.skils.has-style-01 .progress[data-percentage='28.33333'] .progress-left .progress-bar { + -webkit-animation: 0; + animation: 0; +} + +.skils.has-style-01 .progress[data-percentage='30'] .progress-right .progress-bar { + -webkit-animation: loading-18 1s linear forwards; + animation: loading-18 1s linear forwards; +} + +.skils.has-style-01 .progress[data-percentage='30'] .progress-left .progress-bar { + -webkit-animation: 0; + animation: 0; +} + +.skils.has-style-01 .progress[data-percentage='31.66667'] .progress-right .progress-bar { + -webkit-animation: loading-19 1s linear forwards; + animation: loading-19 1s linear forwards; +} + +.skils.has-style-01 .progress[data-percentage='31.66667'] .progress-left .progress-bar { + -webkit-animation: 0; + animation: 0; +} + +.skils.has-style-01 .progress[data-percentage='33.33333'] .progress-right .progress-bar { + -webkit-animation: loading-20 1s linear forwards; + animation: loading-20 1s linear forwards; +} + +.skils.has-style-01 .progress[data-percentage='33.33333'] .progress-left .progress-bar { + -webkit-animation: 0; + animation: 0; +} + +.skils.has-style-01 .progress[data-percentage='35'] .progress-right .progress-bar { + -webkit-animation: loading-21 1s linear forwards; + animation: loading-21 1s linear forwards; +} + +.skils.has-style-01 .progress[data-percentage='35'] .progress-left .progress-bar { + -webkit-animation: 0; + animation: 0; +} + +.skils.has-style-01 .progress[data-percentage='36.66667'] .progress-right .progress-bar { + -webkit-animation: loading-22 1s linear forwards; + animation: loading-22 1s linear forwards; +} + +.skils.has-style-01 .progress[data-percentage='36.66667'] .progress-left .progress-bar { + -webkit-animation: 0; + animation: 0; +} + +.skils.has-style-01 .progress[data-percentage='38.33333'] .progress-right .progress-bar { + -webkit-animation: loading-23 1s linear forwards; + animation: loading-23 1s linear forwards; +} + +.skils.has-style-01 .progress[data-percentage='38.33333'] .progress-left .progress-bar { + -webkit-animation: 0; + animation: 0; +} + +.skils.has-style-01 .progress[data-percentage='40'] .progress-right .progress-bar { + -webkit-animation: loading-24 1s linear forwards; + animation: loading-24 1s linear forwards; +} + +.skils.has-style-01 .progress[data-percentage='40'] .progress-left .progress-bar { + -webkit-animation: 0; + animation: 0; +} + +.skils.has-style-01 .progress[data-percentage='41.66667'] .progress-right .progress-bar { + -webkit-animation: loading-25 1s linear forwards; + animation: loading-25 1s linear forwards; +} + +.skils.has-style-01 .progress[data-percentage='41.66667'] .progress-left .progress-bar { + -webkit-animation: 0; + animation: 0; +} + +.skils.has-style-01 .progress[data-percentage='43.33333'] .progress-right .progress-bar { + -webkit-animation: loading-26 1s linear forwards; + animation: loading-26 1s linear forwards; +} + +.skils.has-style-01 .progress[data-percentage='43.33333'] .progress-left .progress-bar { + -webkit-animation: 0; + animation: 0; +} + +.skils.has-style-01 .progress[data-percentage='45'] .progress-right .progress-bar { + -webkit-animation: loading-27 1s linear forwards; + animation: loading-27 1s linear forwards; +} + +.skils.has-style-01 .progress[data-percentage='45'] .progress-left .progress-bar { + -webkit-animation: 0; + animation: 0; +} + +.skils.has-style-01 .progress[data-percentage='46.66667'] .progress-right .progress-bar { + -webkit-animation: loading-28 1s linear forwards; + animation: loading-28 1s linear forwards; +} + +.skils.has-style-01 .progress[data-percentage='46.66667'] .progress-left .progress-bar { + -webkit-animation: 0; + animation: 0; +} + +.skils.has-style-01 .progress[data-percentage='48.33333'] .progress-right .progress-bar { + -webkit-animation: loading-29 1s linear forwards; + animation: loading-29 1s linear forwards; +} + +.skils.has-style-01 .progress[data-percentage='48.33333'] .progress-left .progress-bar { + -webkit-animation: 0; + animation: 0; +} + +.skils.has-style-01 .progress[data-percentage='50'] .progress-right .progress-bar { + -webkit-animation: loading-30 1s linear forwards; + animation: loading-30 1s linear forwards; +} + +.skils.has-style-01 .progress[data-percentage='50'] .progress-left .progress-bar { + -webkit-animation: 0; + animation: 0; +} + +.skils.has-style-01 .progress[data-percentage='51.66667'] .progress-right .progress-bar { + -webkit-animation: loading-30 1s linear forwards; + animation: loading-30 1s linear forwards; +} + +.skils.has-style-01 .progress[data-percentage='51.66667'] .progress-left .progress-bar { + -webkit-animation: loading-1 1s linear forwards 1s; + animation: loading-1 1s linear forwards 1s; +} + +.skils.has-style-01 .progress[data-percentage='53.33333'] .progress-right .progress-bar { + -webkit-animation: loading-30 1s linear forwards; + animation: loading-30 1s linear forwards; +} + +.skils.has-style-01 .progress[data-percentage='53.33333'] .progress-left .progress-bar { + -webkit-animation: loading-2 1s linear forwards 1s; + animation: loading-2 1s linear forwards 1s; +} + +.skils.has-style-01 .progress[data-percentage='55'] .progress-right .progress-bar { + -webkit-animation: loading-30 1s linear forwards; + animation: loading-30 1s linear forwards; +} + +.skils.has-style-01 .progress[data-percentage='55'] .progress-left .progress-bar { + -webkit-animation: loading-3 1s linear forwards 1s; + animation: loading-3 1s linear forwards 1s; +} + +.skils.has-style-01 .progress[data-percentage='56.66667'] .progress-right .progress-bar { + -webkit-animation: loading-30 1s linear forwards; + animation: loading-30 1s linear forwards; +} + +.skils.has-style-01 .progress[data-percentage='56.66667'] .progress-left .progress-bar { + -webkit-animation: loading-4 1s linear forwards 1s; + animation: loading-4 1s linear forwards 1s; +} + +.skils.has-style-01 .progress[data-percentage='58.33333'] .progress-right .progress-bar { + -webkit-animation: loading-30 1s linear forwards; + animation: loading-30 1s linear forwards; +} + +.skils.has-style-01 .progress[data-percentage='58.33333'] .progress-left .progress-bar { + -webkit-animation: loading-5 1s linear forwards 1s; + animation: loading-5 1s linear forwards 1s; +} + +.skils.has-style-01 .progress[data-percentage='60'] .progress-right .progress-bar { + -webkit-animation: loading-30 1s linear forwards; + animation: loading-30 1s linear forwards; +} + +.skils.has-style-01 .progress[data-percentage='60'] .progress-left .progress-bar { + -webkit-animation: loading-6 1s linear forwards 1s; + animation: loading-6 1s linear forwards 1s; +} + +.skils.has-style-01 .progress[data-percentage='61.66667'] .progress-right .progress-bar { + -webkit-animation: loading-30 1s linear forwards; + animation: loading-30 1s linear forwards; +} + +.skils.has-style-01 .progress[data-percentage='61.66667'] .progress-left .progress-bar { + -webkit-animation: loading-7 1s linear forwards 1s; + animation: loading-7 1s linear forwards 1s; +} + +.skils.has-style-01 .progress[data-percentage='63.33333'] .progress-right .progress-bar { + -webkit-animation: loading-30 1s linear forwards; + animation: loading-30 1s linear forwards; +} + +.skils.has-style-01 .progress[data-percentage='63.33333'] .progress-left .progress-bar { + -webkit-animation: loading-8 1s linear forwards 1s; + animation: loading-8 1s linear forwards 1s; +} + +.skils.has-style-01 .progress[data-percentage='65'] .progress-right .progress-bar { + -webkit-animation: loading-30 1s linear forwards; + animation: loading-30 1s linear forwards; +} + +.skils.has-style-01 .progress[data-percentage='65'] .progress-left .progress-bar { + -webkit-animation: loading-9 1s linear forwards 1s; + animation: loading-9 1s linear forwards 1s; +} + +.skils.has-style-01 .progress[data-percentage='66.66667'] .progress-right .progress-bar { + -webkit-animation: loading-30 1s linear forwards; + animation: loading-30 1s linear forwards; +} + +.skils.has-style-01 .progress[data-percentage='66.66667'] .progress-left .progress-bar { + -webkit-animation: loading-10 1s linear forwards 1s; + animation: loading-10 1s linear forwards 1s; +} + +.skils.has-style-01 .progress[data-percentage='68.33333'] .progress-right .progress-bar { + -webkit-animation: loading-30 1s linear forwards; + animation: loading-30 1s linear forwards; +} + +.skils.has-style-01 .progress[data-percentage='68.33333'] .progress-left .progress-bar { + -webkit-animation: loading-11 1s linear forwards 1s; + animation: loading-11 1s linear forwards 1s; +} + +.skils.has-style-01 .progress[data-percentage='70'] .progress-right .progress-bar { + -webkit-animation: loading-30 1s linear forwards; + animation: loading-30 1s linear forwards; +} + +.skils.has-style-01 .progress[data-percentage='70'] .progress-left .progress-bar { + -webkit-animation: loading-12 1s linear forwards 1s; + animation: loading-12 1s linear forwards 1s; +} + +.skils.has-style-01 .progress[data-percentage='71.66667'] .progress-right .progress-bar { + -webkit-animation: loading-30 1s linear forwards; + animation: loading-30 1s linear forwards; +} + +.skils.has-style-01 .progress[data-percentage='71.66667'] .progress-left .progress-bar { + -webkit-animation: loading-13 1s linear forwards 1s; + animation: loading-13 1s linear forwards 1s; +} + +.skils.has-style-01 .progress[data-percentage='73.33333'] .progress-right .progress-bar { + -webkit-animation: loading-30 1s linear forwards; + animation: loading-30 1s linear forwards; +} + +.skils.has-style-01 .progress[data-percentage='73.33333'] .progress-left .progress-bar { + -webkit-animation: loading-14 1s linear forwards 1s; + animation: loading-14 1s linear forwards 1s; +} + +.skils.has-style-01 .progress[data-percentage='75'] .progress-right .progress-bar { + -webkit-animation: loading-30 1s linear forwards; + animation: loading-30 1s linear forwards; +} + +.skils.has-style-01 .progress[data-percentage='75'] .progress-left .progress-bar { + -webkit-animation: loading-15 1s linear forwards 1s; + animation: loading-15 1s linear forwards 1s; +} + +.skils.has-style-01 .progress[data-percentage='76.66667'] .progress-right .progress-bar { + -webkit-animation: loading-30 1s linear forwards; + animation: loading-30 1s linear forwards; +} + +.skils.has-style-01 .progress[data-percentage='76.66667'] .progress-left .progress-bar { + -webkit-animation: loading-16 1s linear forwards 1s; + animation: loading-16 1s linear forwards 1s; +} + +.skils.has-style-01 .progress[data-percentage='78.33333'] .progress-right .progress-bar { + -webkit-animation: loading-30 1s linear forwards; + animation: loading-30 1s linear forwards; +} + +.skils.has-style-01 .progress[data-percentage='78.33333'] .progress-left .progress-bar { + -webkit-animation: loading-17 1s linear forwards 1s; + animation: loading-17 1s linear forwards 1s; +} + +.skils.has-style-01 .progress[data-percentage='80'] .progress-right .progress-bar { + -webkit-animation: loading-30 1s linear forwards; + animation: loading-30 1s linear forwards; +} + +.skils.has-style-01 .progress[data-percentage='80'] .progress-left .progress-bar { + -webkit-animation: loading-18 1s linear forwards 1s; + animation: loading-18 1s linear forwards 1s; +} + +.skils.has-style-01 .progress[data-percentage='81.66667'] .progress-right .progress-bar { + -webkit-animation: loading-30 1s linear forwards; + animation: loading-30 1s linear forwards; +} + +.skils.has-style-01 .progress[data-percentage='81.66667'] .progress-left .progress-bar { + -webkit-animation: loading-19 1s linear forwards 1s; + animation: loading-19 1s linear forwards 1s; +} + +.skils.has-style-01 .progress[data-percentage='83.33333'] .progress-right .progress-bar { + -webkit-animation: loading-30 1s linear forwards; + animation: loading-30 1s linear forwards; +} + +.skils.has-style-01 .progress[data-percentage='83.33333'] .progress-left .progress-bar { + -webkit-animation: loading-20 1s linear forwards 1s; + animation: loading-20 1s linear forwards 1s; +} + +.skils.has-style-01 .progress[data-percentage='85'] .progress-right .progress-bar { + -webkit-animation: loading-30 1s linear forwards; + animation: loading-30 1s linear forwards; +} + +.skils.has-style-01 .progress[data-percentage='85'] .progress-left .progress-bar { + -webkit-animation: loading-21 1s linear forwards 1s; + animation: loading-21 1s linear forwards 1s; +} + +.skils.has-style-01 .progress[data-percentage='86.66667'] .progress-right .progress-bar { + -webkit-animation: loading-30 1s linear forwards; + animation: loading-30 1s linear forwards; +} + +.skils.has-style-01 .progress[data-percentage='86.66667'] .progress-left .progress-bar { + -webkit-animation: loading-22 1s linear forwards 1s; + animation: loading-22 1s linear forwards 1s; +} + +.skils.has-style-01 .progress[data-percentage='88.33333'] .progress-right .progress-bar { + -webkit-animation: loading-30 1s linear forwards; + animation: loading-30 1s linear forwards; +} + +.skils.has-style-01 .progress[data-percentage='88.33333'] .progress-left .progress-bar { + -webkit-animation: loading-23 1s linear forwards 1s; + animation: loading-23 1s linear forwards 1s; +} + +.skils.has-style-01 .progress[data-percentage='90'] .progress-right .progress-bar { + -webkit-animation: loading-30 1s linear forwards; + animation: loading-30 1s linear forwards; +} + +.skils.has-style-01 .progress[data-percentage='90'] .progress-left .progress-bar { + -webkit-animation: loading-24 1s linear forwards 1s; + animation: loading-24 1s linear forwards 1s; +} + +.skils.has-style-01 .progress[data-percentage='91.66667'] .progress-right .progress-bar { + -webkit-animation: loading-30 1s linear forwards; + animation: loading-30 1s linear forwards; +} + +.skils.has-style-01 .progress[data-percentage='91.66667'] .progress-left .progress-bar { + -webkit-animation: loading-25 1s linear forwards 1s; + animation: loading-25 1s linear forwards 1s; +} + +.skils.has-style-01 .progress[data-percentage='93.33333'] .progress-right .progress-bar { + -webkit-animation: loading-30 1s linear forwards; + animation: loading-30 1s linear forwards; +} + +.skils.has-style-01 .progress[data-percentage='93.33333'] .progress-left .progress-bar { + -webkit-animation: loading-26 1s linear forwards 1s; + animation: loading-26 1s linear forwards 1s; +} + +.skils.has-style-01 .progress[data-percentage='95'] .progress-right .progress-bar { + -webkit-animation: loading-30 1s linear forwards; + animation: loading-30 1s linear forwards; +} + +.skils.has-style-01 .progress[data-percentage='95'] .progress-left .progress-bar { + -webkit-animation: loading-27 1s linear forwards 1s; + animation: loading-27 1s linear forwards 1s; +} + +.skils.has-style-01 .progress[data-percentage='96.66667'] .progress-right .progress-bar { + -webkit-animation: loading-30 1s linear forwards; + animation: loading-30 1s linear forwards; +} + +.skils.has-style-01 .progress[data-percentage='96.66667'] .progress-left .progress-bar { + -webkit-animation: loading-28 1s linear forwards 1s; + animation: loading-28 1s linear forwards 1s; +} + +.skils.has-style-01 .progress[data-percentage='98.33333'] .progress-right .progress-bar { + -webkit-animation: loading-30 1s linear forwards; + animation: loading-30 1s linear forwards; +} + +.skils.has-style-01 .progress[data-percentage='98.33333'] .progress-left .progress-bar { + -webkit-animation: loading-29 1s linear forwards 1s; + animation: loading-29 1s linear forwards 1s; +} + +.skils.has-style-01 .progress[data-percentage='100'] .progress-right .progress-bar { + -webkit-animation: loading-30 1s linear forwards; + animation: loading-30 1s linear forwards; +} + +.skils.has-style-01 .progress[data-percentage='100'] .progress-left .progress-bar { + -webkit-animation: loading-30 1s linear forwards 1s; + animation: loading-30 1s linear forwards 1s; +} + +@-webkit-keyframes loading-1 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(6); + transform: rotate(6deg); + } +} + +@keyframes loading-1 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(6); + transform: rotate(6deg); + } +} + +@-webkit-keyframes loading-2 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(12); + transform: rotate(12deg); + } +} + +@keyframes loading-2 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(12); + transform: rotate(12deg); + } +} + +@-webkit-keyframes loading-3 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(18); + transform: rotate(18deg); + } +} + +@keyframes loading-3 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(18); + transform: rotate(18deg); + } +} + +@-webkit-keyframes loading-4 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(24); + transform: rotate(24deg); + } +} + +@keyframes loading-4 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(24); + transform: rotate(24deg); + } +} + +@-webkit-keyframes loading-5 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(30); + transform: rotate(30deg); + } +} + +@keyframes loading-5 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(30); + transform: rotate(30deg); + } +} + +@-webkit-keyframes loading-6 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(36); + transform: rotate(36deg); + } +} + +@keyframes loading-6 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(36); + transform: rotate(36deg); + } +} + +@-webkit-keyframes loading-7 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(42); + transform: rotate(42deg); + } +} + +@keyframes loading-7 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(42); + transform: rotate(42deg); + } +} + +@-webkit-keyframes loading-8 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(48); + transform: rotate(48deg); + } +} + +@keyframes loading-8 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(48); + transform: rotate(48deg); + } +} + +@-webkit-keyframes loading-9 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(54); + transform: rotate(54deg); + } +} + +@keyframes loading-9 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(54); + transform: rotate(54deg); + } +} + +@-webkit-keyframes loading-10 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(60); + transform: rotate(60deg); + } +} + +@keyframes loading-10 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(60); + transform: rotate(60deg); + } +} + +@-webkit-keyframes loading-11 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(66); + transform: rotate(66deg); + } +} + +@keyframes loading-11 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(66); + transform: rotate(66deg); + } +} + +@-webkit-keyframes loading-12 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(72); + transform: rotate(72deg); + } +} + +@keyframes loading-12 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(72); + transform: rotate(72deg); + } +} + +@-webkit-keyframes loading-13 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(78); + transform: rotate(78deg); + } +} + +@keyframes loading-13 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(78); + transform: rotate(78deg); + } +} + +@-webkit-keyframes loading-14 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(84); + transform: rotate(84deg); + } +} + +@keyframes loading-14 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(84); + transform: rotate(84deg); + } +} + +@-webkit-keyframes loading-15 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(90); + transform: rotate(90deg); + } +} + +@keyframes loading-15 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(90); + transform: rotate(90deg); + } +} + +@-webkit-keyframes loading-16 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(96); + transform: rotate(96deg); + } +} + +@keyframes loading-16 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(96); + transform: rotate(96deg); + } +} + +@-webkit-keyframes loading-17 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(102); + transform: rotate(102deg); + } +} + +@keyframes loading-17 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(102); + transform: rotate(102deg); + } +} + +@-webkit-keyframes loading-18 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(108); + transform: rotate(108deg); + } +} + +@keyframes loading-18 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(108); + transform: rotate(108deg); + } +} + +@-webkit-keyframes loading-19 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(114); + transform: rotate(114deg); + } +} + +@keyframes loading-19 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(114); + transform: rotate(114deg); + } +} + +@-webkit-keyframes loading-20 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(120); + transform: rotate(120deg); + } +} + +@keyframes loading-20 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(120); + transform: rotate(120deg); + } +} + +@-webkit-keyframes loading-21 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(126); + transform: rotate(126deg); + } +} + +@keyframes loading-21 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(126); + transform: rotate(126deg); + } +} + +@-webkit-keyframes loading-22 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(132); + transform: rotate(132deg); + } +} + +@keyframes loading-22 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(132); + transform: rotate(132deg); + } +} + +@-webkit-keyframes loading-23 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(138); + transform: rotate(138deg); + } +} + +@keyframes loading-23 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(138); + transform: rotate(138deg); + } +} + +@-webkit-keyframes loading-24 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(144); + transform: rotate(144deg); + } +} + +@keyframes loading-24 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(144); + transform: rotate(144deg); + } +} + +@-webkit-keyframes loading-25 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(150); + transform: rotate(150deg); + } +} + +@keyframes loading-25 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(150); + transform: rotate(150deg); + } +} + +@-webkit-keyframes loading-26 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(156); + transform: rotate(156deg); + } +} + +@keyframes loading-26 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(156); + transform: rotate(156deg); + } +} + +@-webkit-keyframes loading-27 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(162); + transform: rotate(162deg); + } +} + +@keyframes loading-27 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(162); + transform: rotate(162deg); + } +} + +@-webkit-keyframes loading-28 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(168); + transform: rotate(168deg); + } +} + +@keyframes loading-28 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(168); + transform: rotate(168deg); + } +} + +@-webkit-keyframes loading-29 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(174); + transform: rotate(174deg); + } +} + +@keyframes loading-29 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(174); + transform: rotate(174deg); + } +} + +@-webkit-keyframes loading-30 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(180); + transform: rotate(180deg); + } +} + +@keyframes loading-30 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(180); + transform: rotate(180deg); + } +} + +/* start contact-me */ +.contact-me.has-style-01 .shape-03 { + left: 38%; + top: -50px; + width: 100px; +} + +.contact-me.has-style-01 .shape-07 { + left: 30%; + bottom: 50px; + width: auto; +} + +.contact-me.has-style-01 .shape-09 { + right: 5%; + bottom: 15%; + width: auto; +} + +.contact-me.has-style-01 ul.info { + margin-top: 40px; +} + +.contact-me.has-style-01 ul.info li { + margin-top: 20px; +} + +.contact-me.has-style-01 ul.info li a { + color: var(--gray); + -webkit-transition: 0.3s ease-in-out; + transition: 0.3s ease-in-out; + text-transform: none; +} + +.contact-me.has-style-01 ul.info li a:hover { + color: var(--secondary); +} + +.contact-me.has-style-01 ul.info li i { + margin-right: 15px; + background: var(--secondary-02); + color: var(--secondary); + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + height: 35px; + width: 35px; + border-radius: 0.3rem; +} + +.contact-me.has-style-01 ul.social { + margin-top: 40px; +} + +.contact-me.has-style-01 ul.social li a { + color: var(--gray); + margin-right: 1rem; + font-size: 18px; + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + height: 35px; + width: 35px; + border-radius: 0.3rem; + -webkit-transition: 0.3s ease-in-out; + transition: 0.3s ease-in-out; +} + +.contact-me.has-style-01 ul.social li a:hover { + color: var(--secondary); + background: var(--secondary-02); +} + +.contact-me.has-style-01 .contact_form .form-group { + margin-bottom: 20px; + position: relative; +} + +.contact-me.has-style-01 .contact_form .form-group i { + position: absolute; + top: 1.7rem; + right: 1.5rem; + opacity: 0.5; +} + +.contact-me.has-style-01 .contact_form .form-group input, +.contact-me.has-style-01 .contact_form .form-group textarea { + border: none; + background: var(--tertiary-02); + color: var(--white); + border: 1px solid transparent; + padding: 1.5rem 1rem; + border-radius: 0.3rem; + -webkit-box-shadow: none; + box-shadow: none; + -webkit-transition: 0.3s ease-in-out; + transition: 0.3s ease-in-out; +} + +.contact-me.has-style-01 .contact_form .form-group input:focus, +.contact-me.has-style-01 .contact_form .form-group textarea:focus { + background: var(--tertiary); + border: 1px solid var(--tertiary); + -webkit-box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1); + box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1); +} + +/* start footer */ +footer.has-style-01 { + position: relative; + border-top: 2px solid var(--tertiary); + padding: 4rem 0 1.5rem; + background: var(--primary); +} diff --git a/portfolio-inspo/assets/img/Elida_wanjiku_profile_image.jpg b/portfolio-main/assets/img/Elida_wanjiku_profile_image.jpg similarity index 100% rename from portfolio-inspo/assets/img/Elida_wanjiku_profile_image.jpg rename to portfolio-main/assets/img/Elida_wanjiku_profile_image.jpg diff --git a/portfolio-inspo/assets/img/app1.png b/portfolio-main/assets/img/app1.png similarity index 100% rename from portfolio-inspo/assets/img/app1.png rename to portfolio-main/assets/img/app1.png diff --git a/portfolio-inspo/assets/img/avatar.jpg b/portfolio-main/assets/img/avatar.jpg similarity index 100% rename from portfolio-inspo/assets/img/avatar.jpg rename to portfolio-main/assets/img/avatar.jpg diff --git a/portfolio-inspo/assets/img/coding.gif b/portfolio-main/assets/img/coding.gif similarity index 100% rename from portfolio-inspo/assets/img/coding.gif rename to portfolio-main/assets/img/coding.gif diff --git a/portfolio-inspo/assets/img/experience.png b/portfolio-main/assets/img/experience.png similarity index 100% rename from portfolio-inspo/assets/img/experience.png rename to portfolio-main/assets/img/experience.png diff --git a/portfolio-main/assets/img/logo.png b/portfolio-main/assets/img/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..1c822c7e97a52f77fd3fb25d267db7ec8d8bca34 GIT binary patch literal 14168 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 {

    ${element.title}

    ${element.content}

    -
      - ` + - element.stacks - .map((stack) => { - return `
    • ${stack.name}
      • ` - }) - .join('') + + ` + ` -
    -
    - +
    @@ -425,10 +417,19 @@ allPosts.map((element) => { - image ${element.title} -
    -
    -
    + image ${element.title} + ` + + `
      ` + + element.stacks + .map((stack) => { + return `
    • ${stack.name}
      • ` + }) + .join('') + + ` +
    ` + + ` + + ` portfolio.innerHTML += html diff --git a/portfolio-main/assets/js/render.js b/portfolio-main/assets/js/render.js new file mode 100644 index 0000000..4601ea0 --- /dev/null +++ b/portfolio-main/assets/js/render.js @@ -0,0 +1,91 @@ +const skills = document.querySelector('#render-skills') +const social = document.querySelectorAll('#social') +const topic = document.querySelector('#topic') + +// Skills + +const allSkills = [ + { skill_name: 'JavaScript', percentage: 90 }, + { skill_name: 'HTML', percentage: 100 }, + { skill_name: 'CSS', percentage: 100 }, + { skill_name: 'Bootstrap', percentage: 100 }, + { skill_name: 'Tailwind css', percentage: 80 }, + { skill_name: 'Material UI', percentage: 70 }, + { skill_name: 'React.js', percentage: 80 }, + { skill_name: 'Redux', percentage: 80 }, + { skill_name: 'Next.js', percentage: 70 }, + { skill_name: 'Typescript', percentage: 70 }, + { skill_name: 'Ruby', percentage: 80 }, + { skill_name: 'Rails', percentage: 80 }, + { skill_name: 'Stimulus', percentage: 55 }, + { skill_name: 'PHP', percentage: 70 }, + { skill_name: 'SQL', percentage: 95 }, +] + +allSkills.map((skill) => { + html = ` +
    +
    + + + + + +
    +

    ${skill.skill_name}

    +
    +
    +
    + ` + skills.innerHTML += html +}) + +// Social link + +const social_link = [ + { + link: 'https://github.com/elidakirigo/', + icon: 'fa-brands fa-github', + }, + { + link: 'https://www.linkedin.com/in/christian-siku/', + icon: 'fa-brands fa-linkedin-in', + }, + { + link: 'https://twitter.com/christian_siku/', + icon: 'fa-brands fa-twitter', + }, + { + link: 'https://angel.co/u/chris-siku', + icon: 'fa-brands fa-angellist', + }, +] + +social_link.map((item) => { + html = ` +
  • + +
    • + ` + + for (const element of social) { + element.innerHTML += html + } +}) + +// Topic + +const allTopics = [ + { title: 'All works', class: 'all' }, + { title: 'Web design', class: '.web' }, + { title: 'Responsive', class: '.responsive' }, + { title: 'Features', class: '.feature' }, +] + +allTopics.map((item) => { + html = ` + + ` + topic.innerHTML += html +}) diff --git a/portfolio-inspo/assets/js/swiper-bundle.min.js b/portfolio-main/assets/js/swiper-bundle.min.js similarity index 100% rename from portfolio-inspo/assets/js/swiper-bundle.min.js rename to portfolio-main/assets/js/swiper-bundle.min.js diff --git a/portfolio-inspo/index.html b/portfolio-main/index.html similarity index 85% rename from portfolio-inspo/index.html rename to portfolio-main/index.html index 6b294d6..054e331 100644 --- a/portfolio-inspo/index.html +++ b/portfolio-main/index.html @@ -18,7 +18,9 @@ + + +
    @@ -79,7 +108,7 @@

    I'M
    Elida Wanjiku

    A Tech-Savy Web developer

    @@ -121,8 +150,8 @@

    A Tech-Savy Web developer

    About Me

    -

    A Passionate software Developer Who Loves to Code and face new challenges

    -

    A Fullstack Software Developer and Holder of a Bachelor Degree in computer science , I am a transversal profile with 3 years of experience in the development of web application and embedded electronics. Sociable and determined, I pursue innovation across the world and its cultures. Organize, renew and learn are my watchwords. Something I can't do? i will learn it!

    +

    Solution-driven web developer with 5+ years of experience

    +

    Thrives in problem-solving with enthusiasm, patience, and humor. Actively contributes to the open-source community

      @@ -137,10 +166,10 @@

      A Passionate software Developer Who Loves to Code and face new challenges @@ -353,11 +382,11 @@

      Let's Work together
      Get in touch now !

      - + diff --git a/responsive-mini-portfolio(html-css-js)/README.md b/portfolio-mini/README.md similarity index 96% rename from responsive-mini-portfolio(html-css-js)/README.md rename to portfolio-mini/README.md index 5ecef2e..512e78b 100644 --- a/responsive-mini-portfolio(html-css-js)/README.md +++ b/portfolio-mini/README.md @@ -1,17 +1,17 @@ -# 💼 Responsive Mini Portfolio -## [curtesy of ](https://youtu.be/mq0xJxOTiYo) -### 💼 Responsive Mini Portfolio - -- Responsive mini portfolio website Using HTML CSS & JavaScript -- Contains animations css. -- Includes a light and dark mode. -- Developed first with the Mobile First methodology, then for desktop. -- Compatible with all mobile devices and with a beautiful and pleasant user interface. - - - -## TECHNOLOGIES -> HTML CSS & JavaScript - -## LINKS +# 💼 Responsive Mini Portfolio +## [curtesy of ](https://youtu.be/mq0xJxOTiYo) +### 💼 Responsive Mini Portfolio + +- Responsive mini portfolio website Using HTML CSS & JavaScript +- Contains animations css. +- Includes a light and dark mode. +- Developed first with the Mobile First methodology, then for desktop. +- Compatible with all mobile devices and with a beautiful and pleasant user interface. + + + +## TECHNOLOGIES +> HTML CSS & JavaScript + +## LINKS ### [use of remix icon](https://remixicon.com/) \ No newline at end of file diff --git a/responsive-mini-portfolio(html-css-js)/Text mini portfolio Gianell.txt b/portfolio-mini/Text mini portfolio Gianell.txt similarity index 92% rename from responsive-mini-portfolio(html-css-js)/Text mini portfolio Gianell.txt rename to portfolio-mini/Text mini portfolio Gianell.txt index f06f727..ea3c7bf 100644 --- a/responsive-mini-portfolio(html-css-js)/Text mini portfolio Gianell.txt +++ b/portfolio-mini/Text mini portfolio Gianell.txt @@ -1,98 +1,98 @@ -========== HEADER PROFILE ========== -.profile__name -Gianell Vusy - -.profile__profession -Web developer - -.profile__social -https://www.instagram.com/ -https://www.linkedin.com/ -https://github.com/ - -.profile__info-number | .profile__info-description -7 -Years of
      work - -+124 -Completed
      projects - -96 -Satisfied
      customers - - - - -https://api.whatsapp.com/send?phone=51123456789&text=Hello, more information! - - -https://m.me/bedimcode - -========== FILTERS TABS ========== -.filters__button -Projects - -Skills - -========== PROJECTS ========== -.projects__subtitle | .projects__title -Web -Payment Site - -Web -Portfolio website - -Movil -Fast food app - -Movil -Travel app - -Design -Music app design - -========== SKILLS ========== -.skills__title -Frontend Developer - -Backend Developer - -.skills__name | .skills__level -HTML -Basic - -CSS -Advanced - -JavaScript -Intermediate - -React -Intermediate - -Bootstrap -Intermediate - -Git -Intermediate - -***************** - -PHP -Intermediate - -MySQL -Advance - -Firebase -Intermediate - -Python -Basic - -Node Js -Intermediate - -========== FOOTER ========== -.footer__copy -© Bedimcode. All rigths reserved +========== HEADER PROFILE ========== +.profile__name +Gianell Vusy + +.profile__profession +Web developer + +.profile__social +https://www.instagram.com/ +https://www.linkedin.com/ +https://github.com/ + +.profile__info-number | .profile__info-description +7 +Years of
      work + ++124 +Completed
      projects + +96 +Satisfied
      customers + + + + +https://api.whatsapp.com/send?phone=51123456789&text=Hello, more information! + + +https://m.me/bedimcode + +========== FILTERS TABS ========== +.filters__button +Projects + +Skills + +========== PROJECTS ========== +.projects__subtitle | .projects__title +Web +Payment Site + +Web +Portfolio website + +Movil +Fast food app + +Movil +Travel app + +Design +Music app design + +========== SKILLS ========== +.skills__title +Frontend Developer + +Backend Developer + +.skills__name | .skills__level +HTML +Basic + +CSS +Advanced + +JavaScript +Intermediate + +React +Intermediate + +Bootstrap +Intermediate + +Git +Intermediate + +***************** + +PHP +Intermediate + +MySQL +Advance + +Firebase +Intermediate + +Python +Basic + +Node Js +Intermediate + +========== FOOTER ========== +.footer__copy +© Bedimcode. All rigths reserved diff --git a/responsive-mini-portfolio(html-css-js)/assets/img/EL Gordo.png b/portfolio-mini/assets/img/EL Gordo.png similarity index 100% rename from responsive-mini-portfolio(html-css-js)/assets/img/EL Gordo.png rename to portfolio-mini/assets/img/EL Gordo.png diff --git a/responsive-mini-portfolio(html-css-js)/assets/img/favicon.png b/portfolio-mini/assets/img/favicon.png similarity index 100% rename from responsive-mini-portfolio(html-css-js)/assets/img/favicon.png rename to portfolio-mini/assets/img/favicon.png diff --git a/responsive-mini-portfolio(html-css-js)/assets/img/lottery_1.png b/portfolio-mini/assets/img/lottery_1.png similarity index 100% rename from responsive-mini-portfolio(html-css-js)/assets/img/lottery_1.png rename to portfolio-mini/assets/img/lottery_1.png diff --git a/responsive-mini-portfolio(html-css-js)/assets/img/lottopawa.jpg b/portfolio-mini/assets/img/lottopawa.jpg similarity index 100% rename from responsive-mini-portfolio(html-css-js)/assets/img/lottopawa.jpg rename to portfolio-mini/assets/img/lottopawa.jpg diff --git a/responsive-mini-portfolio(html-css-js)/assets/img/perfil.jpg b/portfolio-mini/assets/img/perfil.jpg similarity index 100% rename from responsive-mini-portfolio(html-css-js)/assets/img/perfil.jpg rename to portfolio-mini/assets/img/perfil.jpg diff --git a/responsive-mini-portfolio(html-css-js)/assets/js/kursor.js b/portfolio-mini/assets/js/kursor.js similarity index 100% rename from responsive-mini-portfolio(html-css-js)/assets/js/kursor.js rename to portfolio-mini/assets/js/kursor.js diff --git a/responsive-mini-portfolio(html-css-js)/assets/js/main.js b/portfolio-mini/assets/js/main.js similarity index 97% rename from responsive-mini-portfolio(html-css-js)/assets/js/main.js rename to portfolio-mini/assets/js/main.js index 3b57c3c..93bf178 100644 --- a/responsive-mini-portfolio(html-css-js)/assets/js/main.js +++ b/portfolio-mini/assets/js/main.js @@ -1,57 +1,57 @@ -/*=============== FILTERS TABS ===============*/ -const tabs = document.querySelectorAll('[data-target'), - tabContents = document.querySelectorAll('[data-content]') - -tabs.forEach(tab => { - tab.addEventListener('click', () => { - const target = document.querySelector(tab.dataset.target) - - tabContents.forEach(tc => tc.classList.remove('filters__active')) - target.classList.add('filters__active') - - tabs.forEach(t => t.classList.remove('filter-tab-active')) - - tab.classList.add('filter-tab-active') - }) -}) - -/*=============== DARK LIGHT THEME ===============*/ -const themeButton = document.getElementById('theme-button') -const darkTheme = 'dark-theme' -const iconTheme = 'ri-sun-line' - -// Previously selected topic (if user selected) -const selectedTheme = localStorage.getItem('selected-theme') -const selectedIcon = localStorage.getItem('selected-icon') - -// We obtain the current theme that the interface has by validating the dark-theme class -const getCurrentTheme = () => document.body.classList.contains(darkTheme) ? 'dark' : 'light' -const getCurrentIcon = () => themeButton.classList.contains(iconTheme) ? 'ri-moon-line' : 'ri-sun-line' - -// We validate if the user previously chose a topic -if (selectedTheme) { - // If the validation is fulfilled, we ask what the issue was to know if we activated or deactivated the dark - document.body.classList[selectedTheme === 'dark' ? 'add' : 'remove'](darkTheme) - themeButton.classList[selectedIcon === 'ri-moon-line' ? 'add' : 'remove'](iconTheme) -} - -// Activate / deactivate the theme manually with the button -themeButton.addEventListener('click', () => { - // Add or remove the dark / icon theme - document.body.classList.toggle(darkTheme) - themeButton.classList.toggle(iconTheme) - // We save the theme and the current icon that the user chose - localStorage.setItem('selected-theme', getCurrentTheme()) - localStorage.setItem('selected-icon', getCurrentIcon()) -}) - -/*=============== SCROLL REVEAL ANIMATION ===============*/ -const sr = ScrollReveal({ origin: 'top', distance: '60px', duration: 2500, delay: 400 }) -sr.reveal(`.profile__border`) -sr.reveal(`.profile__name`, { delay: 500 }) -sr.reveal(`.profile__profession`, { delay: 600 }) -sr.reveal(`.profile__social`, { delay: 700 }) -sr.reveal(`.profile__info-group`, { interval: 100, delay: 700 }) -sr.reveal(`.profile__buttons`, { delay: 800 }) -sr.reveal(`.profile__content`, { delay: 900 }) -sr.reveal(`.filters`, { delay: 1000 }) +/*=============== FILTERS TABS ===============*/ +const tabs = document.querySelectorAll('[data-target'), + tabContents = document.querySelectorAll('[data-content]') + +tabs.forEach(tab => { + tab.addEventListener('click', () => { + const target = document.querySelector(tab.dataset.target) + + tabContents.forEach(tc => tc.classList.remove('filters__active')) + target.classList.add('filters__active') + + tabs.forEach(t => t.classList.remove('filter-tab-active')) + + tab.classList.add('filter-tab-active') + }) +}) + +/*=============== DARK LIGHT THEME ===============*/ +const themeButton = document.getElementById('theme-button') +const darkTheme = 'dark-theme' +const iconTheme = 'ri-sun-line' + +// Previously selected topic (if user selected) +const selectedTheme = localStorage.getItem('selected-theme') +const selectedIcon = localStorage.getItem('selected-icon') + +// We obtain the current theme that the interface has by validating the dark-theme class +const getCurrentTheme = () => document.body.classList.contains(darkTheme) ? 'dark' : 'light' +const getCurrentIcon = () => themeButton.classList.contains(iconTheme) ? 'ri-moon-line' : 'ri-sun-line' + +// We validate if the user previously chose a topic +if (selectedTheme) { + // If the validation is fulfilled, we ask what the issue was to know if we activated or deactivated the dark + document.body.classList[selectedTheme === 'dark' ? 'add' : 'remove'](darkTheme) + themeButton.classList[selectedIcon === 'ri-moon-line' ? 'add' : 'remove'](iconTheme) +} + +// Activate / deactivate the theme manually with the button +themeButton.addEventListener('click', () => { + // Add or remove the dark / icon theme + document.body.classList.toggle(darkTheme) + themeButton.classList.toggle(iconTheme) + // We save the theme and the current icon that the user chose + localStorage.setItem('selected-theme', getCurrentTheme()) + localStorage.setItem('selected-icon', getCurrentIcon()) +}) + +/*=============== SCROLL REVEAL ANIMATION ===============*/ +const sr = ScrollReveal({ origin: 'top', distance: '60px', duration: 2500, delay: 400 }) +sr.reveal(`.profile__border`) +sr.reveal(`.profile__name`, { delay: 500 }) +sr.reveal(`.profile__profession`, { delay: 600 }) +sr.reveal(`.profile__social`, { delay: 700 }) +sr.reveal(`.profile__info-group`, { interval: 100, delay: 700 }) +sr.reveal(`.profile__buttons`, { delay: 800 }) +sr.reveal(`.profile__content`, { delay: 900 }) +sr.reveal(`.filters`, { delay: 1000 }) diff --git a/responsive-mini-portfolio(html-css-js)/assets/js/scrollreveal.min.js b/portfolio-mini/assets/js/scrollreveal.min.js similarity index 99% rename from responsive-mini-portfolio(html-css-js)/assets/js/scrollreveal.min.js rename to portfolio-mini/assets/js/scrollreveal.min.js index 2915508..5428bbd 100644 --- a/responsive-mini-portfolio(html-css-js)/assets/js/scrollreveal.min.js +++ b/portfolio-mini/assets/js/scrollreveal.min.js @@ -1,12 +1,12 @@ -/*! @license ScrollReveal v4.0.9 - - Copyright 2021 Fisssion LLC. - - Licensed under the GNU General Public License 3.0 for - compatible open source projects and non-commercial use. - - For commercial sites, themes, projects, and applications, - keep your source code private/proprietary by purchasing - a commercial license from https://scrollrevealjs.org/ -*/ -var ScrollReveal=function(){"use strict";var r={delay:0,distance:"0",duration:600,easing:"cubic-bezier(0.5, 0, 0, 1)",interval:0,opacity:0,origin:"bottom",rotate:{x:0,y:0,z:0},scale:1,cleanup:!1,container:document.documentElement,desktop:!0,mobile:!0,reset:!1,useDelay:"always",viewFactor:0,viewOffset:{top:0,right:0,bottom:0,left:0},afterReset:function(){},afterReveal:function(){},beforeReset:function(){},beforeReveal:function(){}};var n={success:function(){document.documentElement.classList.add("sr"),document.body?document.body.style.height="100%":document.addEventListener("DOMContentLoaded",function(){document.body.style.height="100%"})},failure:function(){return document.documentElement.classList.remove("sr"),{clean:function(){},destroy:function(){},reveal:function(){},sync:function(){},get noop(){return!0}}}};function o(e){return"object"==typeof window.Node?e instanceof window.Node:null!==e&&"object"==typeof e&&"number"==typeof e.nodeType&&"string"==typeof e.nodeName}function u(e,t){if(void 0===t&&(t=document),e instanceof Array)return e.filter(o);if(o(e))return[e];if(n=e,i=Object.prototype.toString.call(n),"object"==typeof window.NodeList?n instanceof window.NodeList:null!==n&&"object"==typeof n&&"number"==typeof n.length&&/^\[object (HTMLCollection|NodeList|Object)\]$/.test(i)&&(0===n.length||o(n[0])))return Array.prototype.slice.call(e);var n,i;if("string"==typeof e)try{var r=t.querySelectorAll(e);return Array.prototype.slice.call(r)}catch(e){return[]}return[]}function s(e){return null!==e&&e instanceof Object&&(e.constructor===Object||"[object Object]"===Object.prototype.toString.call(e))}function f(n,i){if(s(n))return Object.keys(n).forEach(function(e){return i(n[e],e,n)});if(n instanceof Array)return n.forEach(function(e,t){return i(e,t,n)});throw new TypeError("Expected either an array or object literal.")}function h(e){for(var t=[],n=arguments.length-1;0=[].concat(r.body).shift())return j.call(this,n,i,-1,t),c.call(this,e,{reveal:!0,pristine:t});if(!n.blocked.foot&&i===[].concat(o.foot).shift()&&i<=[].concat(r.body).pop())return j.call(this,n,i,1,t),c.call(this,e,{reveal:!0,pristine:t})}}function E(e){var t=Math.abs(e);if(isNaN(t))throw new RangeError("Invalid sequence interval.");this.id=b(),this.interval=Math.max(t,16),this.members=[],this.models={},this.blocked={head:!1,foot:!1}}function d(e,i,r){var o=this;this.head=[],this.body=[],this.foot=[],f(e.members,function(e,t){var n=r.elements[e];n&&n[i]&&o.body.push(t)}),this.body.length&&f(e.members,function(e,t){var n=r.elements[e];n&&!n[i]&&(t=[].concat(r.body).shift())return j.call(this,n,i,-1,t),c.call(this,e,{reveal:!0,pristine:t});if(!n.blocked.foot&&i===[].concat(o.foot).shift()&&i<=[].concat(r.body).pop())return j.call(this,n,i,1,t),c.call(this,e,{reveal:!0,pristine:t})}}function E(e){var t=Math.abs(e);if(isNaN(t))throw new RangeError("Invalid sequence interval.");this.id=b(),this.interval=Math.max(t,16),this.members=[],this.models={},this.blocked={head:!1,foot:!1}}function d(e,i,r){var o=this;this.head=[],this.body=[],this.foot=[],f(e.members,function(e,t){var n=r.elements[e];n&&n[i]&&o.body.push(t)}),this.body.length&&f(e.members,function(e,t){var n=r.elements[e];n&&!n[i]&&(t - - - - - - - - - - - responsive portfolio - - - - - - - - - - - \ No newline at end of file diff --git a/responsive-portfolio(html-js-css)/style.scss b/responsive-portfolio(html-js-css)/style.scss deleted file mode 100644 index e69de29..0000000