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 @@
-<!-- ![banner](https://user-images.githubusercontent.com/101924220/178070736-971c4b9c-59c8-4aba-aa55-f565b3ad4e1b.gif) -->
-<!-- ![banner1](https://user-images.githubusercontent.com/101924220/178070972-0435978a-bdd7-4219-af58-e64c95e182ad.PNG) -->
-![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.
-<hr>
-
-## ⚡ Take a look at My Stats :
-
-
- | <a href="https://github-readme-stats.vercel.app/api?username=Chrissiku&show_icons=true&theme=react&include_all_commits=true&count_private=true&hide_border=true"><img align="center" src="https://github-readme-stats.vercel.app/api?username=Chrissiku&show_icons=true&theme=react&include_all_commits=true&count_private=true&hide_border=true" alt="Chris's Github Stats" /></a> | <a href="https://github-readme-stats.vercel.app/api/top-langs/?username=Chrissiku&layout=compact&langs_count=7&theme=react&hide_border=true"><img align="center" src="https://github-readme-stats.vercel.app/api/top-langs/?username=Chrissiku&layout=compact&langs_count=8&theme=react&hide_border=true" /></a> |
-| ------------- | ------------- |
-
-<p align="center"><img align="center" src="http://github-readme-streak-stats.herokuapp.com?user=Chrissiku&theme=elegant&date_format=M%20j%5B%2C%20Y%5D&currStreakLabel=54AEFF&border=AFB8C18B&background=F6F8FA0F&ring=FFBC00&fire=FFBC00&sideLabels=00DB49&dates=8A8FA0&stroke=AFB8C128&sideNums=8A8FA0&currStreakNum=8A8FA0" /><p>
-
-<p align="center" font-size="25px"><b>Visitor's Count</b></p>
-<p align="center"><img src="https://profile-counter.glitch.me/Chrissiku/count.svg" alt="visitor badge"/></p>
-
-
-<!-- [![Chris Siku's Activity Graph](https://activity-graph.herokuapp.com/graph?username=Chrissiku&custom_title=Chris%27s%20Contribution%20Graph&theme=react-dark&hide_border=true&line=d1a01f&point=c58545)](https://github.com/Chrissiku/) -->
- 
-<!-- ![svg](https://raw.githubusercontent.com/Chrissiku/github-profile-3d-contrib/main/docs/demo/profile-night-view.svg) -->
-
-<img width=100% src="https://capsule-render.vercel.app/api?type=waving&color=ffffff&height=150&section=footer"/>
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 f3e2dcb..0000000
Binary files a/portfolio-inspo/assets/img/logo.png and /dev/null differ
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 = `
-    <div class="col-lg-2 col-md-3 col-6">
-            <div class="progress" data-percentage="${skill.percentage}">
-              <span class="progress-left">
-                <span class="progress-bar"></span>
-              </span>
-              <span class="progress-right">
-                <span class="progress-bar"></span
-              ></span>
-              <div class="progress-value">
-                <h3>${skill.skill_name}</h3>
-              </div>
-            </div>
-          </div>
-    `;
-  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 = `
-    <li>
-        <a href="${item.link}" target="_blank"><i class="${item.icon}"></i></a>
-    </li>
-    `;
-
-  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 = `
-    <button type="button" data-filter="${item.class}">${item.title}</button>
-    `;
-  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 0000000..1c822c7
Binary files /dev/null and b/portfolio-main/assets/img/logo.png differ
diff --git a/portfolio-inspo/assets/img/shape/border.png b/portfolio-main/assets/img/shape/border.png
similarity index 100%
rename from portfolio-inspo/assets/img/shape/border.png
rename to portfolio-main/assets/img/shape/border.png
diff --git a/portfolio-inspo/assets/img/shape/shape-01.png b/portfolio-main/assets/img/shape/shape-01.png
similarity index 100%
rename from portfolio-inspo/assets/img/shape/shape-01.png
rename to portfolio-main/assets/img/shape/shape-01.png
diff --git a/portfolio-inspo/assets/img/shape/shape-02.png b/portfolio-main/assets/img/shape/shape-02.png
similarity index 100%
rename from portfolio-inspo/assets/img/shape/shape-02.png
rename to portfolio-main/assets/img/shape/shape-02.png
diff --git a/portfolio-inspo/assets/img/shape/shape-03.png b/portfolio-main/assets/img/shape/shape-03.png
similarity index 100%
rename from portfolio-inspo/assets/img/shape/shape-03.png
rename to portfolio-main/assets/img/shape/shape-03.png
diff --git a/portfolio-inspo/assets/img/shape/shape-04.png b/portfolio-main/assets/img/shape/shape-04.png
similarity index 100%
rename from portfolio-inspo/assets/img/shape/shape-04.png
rename to portfolio-main/assets/img/shape/shape-04.png
diff --git a/portfolio-inspo/assets/img/shape/shape-05.png b/portfolio-main/assets/img/shape/shape-05.png
similarity index 100%
rename from portfolio-inspo/assets/img/shape/shape-05.png
rename to portfolio-main/assets/img/shape/shape-05.png
diff --git a/portfolio-inspo/assets/img/shape/shape-circle1.png b/portfolio-main/assets/img/shape/shape-circle1.png
similarity index 100%
rename from portfolio-inspo/assets/img/shape/shape-circle1.png
rename to portfolio-main/assets/img/shape/shape-circle1.png
diff --git a/portfolio-inspo/assets/img/shape/shape-statistics2.png b/portfolio-main/assets/img/shape/shape-statistics2.png
similarity index 100%
rename from portfolio-inspo/assets/img/shape/shape-statistics2.png
rename to portfolio-main/assets/img/shape/shape-statistics2.png
diff --git a/portfolio-inspo/assets/img/shape/shape-what-i-do1.png b/portfolio-main/assets/img/shape/shape-what-i-do1.png
similarity index 100%
rename from portfolio-inspo/assets/img/shape/shape-what-i-do1.png
rename to portfolio-main/assets/img/shape/shape-what-i-do1.png
diff --git a/portfolio-inspo/assets/img/shape/shape-what-i-do2.png b/portfolio-main/assets/img/shape/shape-what-i-do2.png
similarity index 100%
rename from portfolio-inspo/assets/img/shape/shape-what-i-do2.png
rename to portfolio-main/assets/img/shape/shape-what-i-do2.png
diff --git a/portfolio-inspo/assets/img/shape/shape-what-i-do4.png b/portfolio-main/assets/img/shape/shape-what-i-do4.png
similarity index 100%
rename from portfolio-inspo/assets/img/shape/shape-what-i-do4.png
rename to portfolio-main/assets/img/shape/shape-what-i-do4.png
diff --git a/portfolio-inspo/assets/img/shape/star.png b/portfolio-main/assets/img/shape/star.png
similarity index 100%
rename from portfolio-inspo/assets/img/shape/star.png
rename to portfolio-main/assets/img/shape/star.png
diff --git a/portfolio-inspo/assets/img/skills.png b/portfolio-main/assets/img/skills.png
similarity index 100%
rename from portfolio-inspo/assets/img/skills.png
rename to portfolio-main/assets/img/skills.png
diff --git a/portfolio-inspo/assets/js/app.js b/portfolio-main/assets/js/app.js
similarity index 100%
rename from portfolio-inspo/assets/js/app.js
rename to portfolio-main/assets/js/app.js
diff --git a/portfolio-inspo/assets/js/fancybox.umd.js b/portfolio-main/assets/js/fancybox.umd.js
similarity index 100%
rename from portfolio-inspo/assets/js/fancybox.umd.js
rename to portfolio-main/assets/js/fancybox.umd.js
diff --git a/portfolio-inspo/assets/js/form.js b/portfolio-main/assets/js/form.js
similarity index 100%
rename from portfolio-inspo/assets/js/form.js
rename to portfolio-main/assets/js/form.js
diff --git a/portfolio-inspo/assets/js/jquery-3.6.0.min.js b/portfolio-main/assets/js/jquery-3.6.0.min.js
similarity index 100%
rename from portfolio-inspo/assets/js/jquery-3.6.0.min.js
rename to portfolio-main/assets/js/jquery-3.6.0.min.js
diff --git a/portfolio-inspo/assets/js/kursor.js b/portfolio-main/assets/js/kursor.js
similarity index 100%
rename from portfolio-inspo/assets/js/kursor.js
rename to portfolio-main/assets/js/kursor.js
diff --git a/portfolio-inspo/assets/js/mixitup.min.js b/portfolio-main/assets/js/mixitup.min.js
similarity index 100%
rename from portfolio-inspo/assets/js/mixitup.min.js
rename to portfolio-main/assets/js/mixitup.min.js
diff --git a/portfolio-inspo/assets/js/portfolio.js b/portfolio-main/assets/js/portfolio.js
similarity index 75%
rename from portfolio-inspo/assets/js/portfolio.js
rename to portfolio-main/assets/js/portfolio.js
index 0629dab..42fa57c 100644
--- a/portfolio-inspo/assets/js/portfolio.js
+++ b/portfolio-main/assets/js/portfolio.js
@@ -5,7 +5,7 @@ const allPosts = [
 	// API AUthetication
 	{
 		topic: 'feature',
-		link: 'https://github.com/Chrissiku/rails-api-authentication-crud',
+		link: 'https://github.com/elidakirigo/rails-api-authentication-crud',
 		title: 'Hotel Booking',
 		content: ``,
 		stacks: [
@@ -17,14 +17,14 @@ const allPosts = [
 				name: 'Bootstrap 5',
 			},
 		],
-		live: [true, 'https://github.com/Chrissiku/rails-api-authentication-crud'],
-		source: [true, 'https://github.com/Chrissiku/rails-api-authentication-crud'],
+		live: [true, 'https://github.com/elidakirigo/rails-api-authentication-crud'],
+		source: [true, 'https://github.com/elidakirigo/rails-api-authentication-crud'],
 		image: 'https://user-images.githubusercontent.com/101924220/209710207-edf76c66-5034-4cf0-aae4-6b1479663456.png',
 	},
 	// Hotel Booking, Backend
 	{
 		topic: 'feature',
-		link: 'https://github.com/Chrissiku/hotel-booking-backend',
+		link: 'https://github.com/elidakirigo/hotel-booking-backend',
 		title: 'Hotel Booking',
 		content: ``,
 		stacks: [
@@ -36,8 +36,8 @@ const allPosts = [
 				name: 'Bootstrap 5',
 			},
 		],
-		live: [true, 'https://github.com/Chrissiku/hotel-booking-backend'],
-		source: [true, 'https://github.com/Chrissiku/hotel-booking-backend'],
+		live: [true, 'https://github.com/elidakirigo/hotel-booking-backend'],
+		source: [true, 'https://github.com/elidakirigo/hotel-booking-backend'],
 		image: 'https://user-images.githubusercontent.com/101924220/209710207-edf76c66-5034-4cf0-aae4-6b1479663456.png',
 	},
 	// Folio
@@ -55,13 +55,13 @@ const allPosts = [
 			{ link: 'https://en.wikipedia.org/wiki/HTML', name: 'HTML' },
 		],
 		live: [true, 'https://chris-siku.vercel.app/'],
-		source: [true, 'https://github.com/Chrissiku/Chris-Siku-v1'],
+		source: [true, 'https://github.com/elidakirigo/Chris-Siku-v1'],
 		image: 'https://user-images.githubusercontent.com/101924220/209703582-eeb2e313-50a3-49a8-b133-8c5a6f5d49ea.png',
 	},
 	// House rental
 	{
 		topic: 'responsive',
-		link: 'https://chrissiku.github.io/real-estate/index.html',
+		link: 'https://elidakirigo.github.io/real-estate/index.html',
 		title: 'Real Estate',
 		content: ``,
 		stacks: [
@@ -73,8 +73,8 @@ const allPosts = [
 			{ link: 'https://en.wikipedia.org/wiki/CSS', name: 'CSS' },
 			{ link: 'https://www.javascript.com/', name: 'JavaScript' },
 		],
-		live: [true, 'https://chrissiku.github.io/real-estate/index.html'],
-		source: [true, 'https://github.com/Chrissiku/real-estate'],
+		live: [true, 'https://elidakirigo.github.io/real-estate/index.html'],
+		source: [true, 'https://github.com/elidakirigo/real-estate'],
 		image: 'https://user-images.githubusercontent.com/101924220/209696457-a0769944-e81f-49d9-a8a3-c3e5edcc2923.png',
 	},
 	// Progressive web app
@@ -90,13 +90,13 @@ const allPosts = [
 			{ link: 'https://web.dev/progressive-web-apps/', name: 'PWA' },
 		],
 		live: [true, 'https://pw-food-a.netlify.app/?'],
-		source: [true, 'https://github.com/Chrissiku/progressive-web-app'],
+		source: [true, 'https://github.com/elidakirigo/progressive-web-app'],
 		image: 'https://user-images.githubusercontent.com/101924220/209708303-486fef6d-7ddf-45b3-9518-87d8159406f5.png',
 	},
 	// Rails blog
 	{
 		topic: 'feature',
-		link: 'https://github.com/Chrissiku/Rails-Blog',
+		link: 'https://github.com/elidakirigo/Rails-Blog',
 		title: 'Rails Blog',
 		content: ``,
 		stacks: [
@@ -104,14 +104,14 @@ const allPosts = [
 			{ link: 'https://guides.rubyonrails.org/', name: 'Rails' },
 			{ link: 'https://en.wikipedia.org/wiki/HTML', name: 'HTML' },
 		],
-		live: [true, 'https://github.com/Chrissiku/Rails-Blog'],
-		source: [true, 'https://github.com/Chrissiku/Rails-Blog'],
+		live: [true, 'https://github.com/elidakirigo/Rails-Blog'],
+		source: [true, 'https://github.com/elidakirigo/Rails-Blog'],
 		image: 'https://user-images.githubusercontent.com/101924220/209710207-edf76c66-5034-4cf0-aae4-6b1479663456.png',
 	},
 	// Youtube clone
 	{
 		topic: 'web',
-		link: 'https://chrissiku.github.io/youtube_player_app/',
+		link: 'https://elidakirigo.github.io/youtube_player_app/',
 		title: 'Youtube clone',
 		content: ``,
 		stacks: [
@@ -119,8 +119,8 @@ const allPosts = [
 			{ link: 'https://en.wikipedia.org/wiki/CSS', name: 'CSS' },
 			{ link: 'https://www.javascript.com/', name: 'JavaScript' },
 		],
-		live: [true, 'https://chrissiku.github.io/youtube_player_app/'],
-		source: [true, 'https://github.com/Chrissiku/youtube_player_app'],
+		live: [true, 'https://elidakirigo.github.io/youtube_player_app/'],
+		source: [true, 'https://github.com/elidakirigo/youtube_player_app'],
 		image: 'https://user-images.githubusercontent.com/101924220/209709562-40608166-33c0-435e-ad68-beba52c1164f.png',
 	},
 	// Math magician
@@ -138,13 +138,13 @@ const allPosts = [
 			{ link: 'https://en.wikipedia.org/wiki/CSS', name: 'CSS' },
 		],
 		live: [true, 'https://chriscacl.netlify.app/'],
-		source: [true, 'https://github.com/Chrissiku/Math-magicians'],
+		source: [true, 'https://github.com/elidakirigo/Math-magicians'],
 		image: 'https://user-images.githubusercontent.com/101924220/209716069-062bb3a5-1ea6-4a8b-86a2-7892ac029808.png',
 	},
 	// Recipe App
 	{
 		topic: 'feature',
-		link: 'https://github.com/Chrissiku/Recipe-app',
+		link: 'https://github.com/elidakirigo/Recipe-app',
 		title: 'Recipe App',
 		content: ``,
 		stacks: [
@@ -156,8 +156,8 @@ const allPosts = [
 				name: 'Bootstrap 5',
 			},
 		],
-		live: [true, 'https://github.com/Chrissiku/Recipe-app'],
-		source: [true, 'https://github.com/Chrissiku/Recipe-app'],
+		live: [true, 'https://github.com/elidakirigo/Recipe-app'],
+		source: [true, 'https://github.com/elidakirigo/Recipe-app'],
 		image: 'https://user-images.githubusercontent.com/101924220/209710207-edf76c66-5034-4cf0-aae4-6b1479663456.png',
 	},
 	// Portfolio website
@@ -176,13 +176,13 @@ const allPosts = [
 			{ link: 'https://www.javascript.com/', name: 'JavaScript' },
 		],
 		live: [true, 'https://chris-siku.netlify.app/'],
-		source: [true, 'https://github.com/Chrissiku/my-portfolio'],
+		source: [true, 'https://github.com/elidakirigo/my-portfolio'],
 		image: 'https://user-images.githubusercontent.com/101924220/209657844-94b71a71-f467-45e5-87f0-1f2e65c9642f.png',
 	},
 	// Budget App
 	{
 		topic: 'feature',
-		link: 'https://github.com/Chrissiku/Budget-app',
+		link: 'https://github.com/elidakirigo/Budget-app',
 		title: 'Recipe App',
 		content: ``,
 		stacks: [
@@ -194,14 +194,14 @@ const allPosts = [
 				name: 'Bootstrap 5',
 			},
 		],
-		live: [true, 'https://github.com/Chrissiku/Budget-app'],
-		source: [true, 'https://github.com/Chrissiku/Budget-app'],
+		live: [true, 'https://github.com/elidakirigo/Budget-app'],
+		source: [true, 'https://github.com/elidakirigo/Budget-app'],
 		image: 'https://user-images.githubusercontent.com/101924220/209710207-edf76c66-5034-4cf0-aae4-6b1479663456.png',
 	},
 	// Napses Clone
 	{
 		topic: 'web',
-		link: 'https://chrissiku.github.io/napses_clone/',
+		link: 'https://elidakirigo.github.io/napses_clone/',
 		title: 'Napses Desktop clone',
 		content: ``,
 		stacks: [
@@ -209,14 +209,14 @@ const allPosts = [
 			{ link: 'https://en.wikipedia.org/wiki/CSS', name: 'CSS' },
 			{ link: 'https://www.javascript.com/', name: 'JavaScript' },
 		],
-		live: [true, 'https://chrissiku.github.io/napses_clone/'],
-		source: [true, 'https://github.com/Chrissiku/napses_clone'],
+		live: [true, 'https://elidakirigo.github.io/napses_clone/'],
+		source: [true, 'https://github.com/elidakirigo/napses_clone'],
 		image: 'https://user-images.githubusercontent.com/101924220/209715163-7875f85e-9b5c-4475-b71c-da59195c0bb2.png',
 	},
 	// .Leader-board
 	{
 		topic: 'feature',
-		link: 'https://chrissiku.github.io/Leaderboard/dist/',
+		link: 'https://elidakirigo.github.io/Leaderboard/dist/',
 		title: 'Leader-board',
 		content: ``,
 		stacks: [
@@ -224,14 +224,14 @@ const allPosts = [
 			{ link: 'https://en.wikipedia.org/wiki/CSS', name: 'CSS' },
 			{ link: 'https://www.javascript.com/', name: 'JavaScript' },
 		],
-		live: [true, 'https://chrissiku.github.io/Leaderboard/dist/'],
-		source: [true, 'https://github.com/Chrissiku/Leaderboard/'],
+		live: [true, 'https://elidakirigo.github.io/Leaderboard/dist/'],
+		source: [true, 'https://github.com/elidakirigo/Leaderboard/'],
 		image: 'https://user-images.githubusercontent.com/101924220/209706512-3513086d-bee8-4da8-8cdc-f312fd497357.png',
 	},
 	// Rest API TDD
 	{
 		topic: 'feature',
-		link: 'https://github.com/Chrissiku/tdd-rest-api',
+		link: 'https://github.com/elidakirigo/tdd-rest-api',
 		title: 'TDD Rest-API',
 		content: ``,
 		stacks: [
@@ -242,14 +242,14 @@ const allPosts = [
 				name: 'Bootstrap 5',
 			},
 		],
-		live: [true, 'https://github.com/Chrissiku/tdd-rest-api'],
-		source: [true, 'https://github.com/Chrissiku/tdd-rest-api'],
+		live: [true, 'https://github.com/elidakirigo/tdd-rest-api'],
+		source: [true, 'https://github.com/elidakirigo/tdd-rest-api'],
 		image: 'https://user-images.githubusercontent.com/101924220/209710207-edf76c66-5034-4cf0-aae4-6b1479663456.png',
 	},
 	// Personal website
 	{
 		topic: 'responsive',
-		link: 'https://github.com/Chrissiku/Chrissiku',
+		link: 'https://github.com/elidakirigo/elidakirigo',
 		title: 'Personal Website',
 		content: ``,
 		stacks: [
@@ -261,14 +261,14 @@ const allPosts = [
 			{ link: 'https://en.wikipedia.org/wiki/CSS', name: 'CSS' },
 			{ link: 'https://www.javascript.com/', name: 'JavaScript' },
 		],
-		live: [true, 'https://chrissiku.github.io/Chrissiku/'],
-		source: [true, 'https://github.com/Chrissiku/Chrissiku'],
+		live: [true, 'https://elidakirigo.github.io/elidakirigo/'],
+		source: [true, 'https://github.com/elidakirigo/elidakirigo'],
 		image: 'https://user-images.githubusercontent.com/101924220/209657843-5270123e-d89b-4480-98d4-84d6a7a1a074.png',
 	},
 	// Portfolio mobile
 	{
 		topic: 'responsive',
-		link: 'https://chrissiku.github.io/Portfolio-mobile/',
+		link: 'https://elidakirigo.github.io/Portfolio-mobile/',
 		title: 'Mobile Portfolio',
 		content: ``,
 		stacks: [
@@ -276,28 +276,28 @@ const allPosts = [
 			{ link: 'https://en.wikipedia.org/wiki/CSS', name: 'CSS' },
 			{ link: 'https://www.javascript.com/', name: 'JavaScript' },
 		],
-		live: [true, 'https://chrissiku.github.io/Portfolio-mobile/'],
-		source: [true, 'https://github.com/Chrissiku/Portfolio-mobile'],
+		live: [true, 'https://elidakirigo.github.io/Portfolio-mobile/'],
+		source: [true, 'https://github.com/elidakirigo/Portfolio-mobile'],
 		image: 'https://user-images.githubusercontent.com/101924220/209657847-0fece210-73f2-4e07-81ea-e5cbe391ccc9.png',
 	},
 	// House rental 2
 	{
 		topic: 'responsive',
-		link: 'https://chrissiku.github.io/house_rental/',
+		link: 'https://elidakirigo.github.io/house_rental/',
 		title: 'House Renatl',
 		content: ``,
 		stacks: [
 			{ link: 'https://www.learn-html.org/', name: 'HTML' },
 			{ link: 'https://en.wikipedia.org/wiki/CSS', name: 'CSS' },
 		],
-		live: [true, 'https://chrissiku.github.io/house_rental/'],
-		source: [true, 'https://github.com/Chrissiku/house_rental'],
+		live: [true, 'https://elidakirigo.github.io/house_rental/'],
+		source: [true, 'https://github.com/elidakirigo/house_rental'],
 		image: 'https://user-images.githubusercontent.com/101924220/209699847-d943b478-51d5-4413-b613-90a424c159a1.png',
 	},
 	// Catalog of things
 	{
 		topic: 'feature',
-		link: 'https://github.com/Chrissiku/Catalog-of-things',
+		link: 'https://github.com/elidakirigo/Catalog-of-things',
 		title: 'TDD Rest-API',
 		content: ``,
 		stacks: [
@@ -307,8 +307,8 @@ const allPosts = [
 				name: 'Bootstrap 5',
 			},
 		],
-		live: [true, 'https://github.com/Chrissiku/Catalog-of-things'],
-		source: [true, 'https://github.com/Chrissiku/Catalog-of-things'],
+		live: [true, 'https://github.com/elidakirigo/Catalog-of-things'],
+		source: [true, 'https://github.com/elidakirigo/Catalog-of-things'],
 		image: 'https://user-images.githubusercontent.com/101924220/209710207-edf76c66-5034-4cf0-aae4-6b1479663456.png',
 	},
 	// SpaceX
@@ -330,13 +330,13 @@ const allPosts = [
 			},
 		],
 		live: [true, 'https://space-x-traveler.netlify.app/'],
-		source: [true, 'https://github.com/Chrissiku/Bookstore-CMS'],
+		source: [true, 'https://github.com/elidakirigo/Bookstore-CMS'],
 		image: 'https://user-images.githubusercontent.com/101924220/209657850-efc6e2d6-249c-4e1e-84ad-d8adebabe9f2.png',
 	},
 	// .Todo list app
 	{
 		topic: 'feature',
-		link: 'https://chrissiku.github.io/To-Do-List/dist',
+		link: 'https://elidakirigo.github.io/To-Do-List/dist',
 		title: 'Todo-list App',
 		content: ``,
 		stacks: [
@@ -344,14 +344,14 @@ const allPosts = [
 			{ link: 'https://en.wikipedia.org/wiki/CSS', name: 'CSS' },
 			{ link: 'https://www.javascript.com/', name: 'JavaScript' },
 		],
-		live: [true, 'https://chrissiku.github.io/To-Do-List/dist'],
-		source: [true, 'https://github.com/Chrissiku/To-Do-List'],
+		live: [true, 'https://elidakirigo.github.io/To-Do-List/dist'],
+		source: [true, 'https://github.com/elidakirigo/To-Do-List'],
 		image: 'https://user-images.githubusercontent.com/101924220/209657853-1b59a194-c885-49ce-9729-5dcd47010347.png',
 	},
 	// web conferencing
 	{
 		topic: 'web',
-		link: 'https://chrissiku.github.io/Conferencing-webiste/',
+		link: 'https://elidakirigo.github.io/Conferencing-webiste/',
 		title: 'Web Conferencing',
 		content: ``,
 		stacks: [
@@ -359,8 +359,8 @@ const allPosts = [
 			{ link: 'https://en.wikipedia.org/wiki/CSS', name: 'CSS' },
 			{ link: 'https://www.javascript.com/', name: 'JavaScript' },
 		],
-		live: [true, 'https://chrissiku.github.io/Conferencing-webiste/'],
-		source: [true, 'https://github.com/Chrissiku/capstone_project_one'],
+		live: [true, 'https://elidakirigo.github.io/Conferencing-webiste/'],
+		source: [true, 'https://github.com/elidakirigo/capstone_project_one'],
 		image: 'https://user-images.githubusercontent.com/101924220/209657842-eb0095ed-e8af-48f8-ac47-277991121ec7.png',
 	},
 	// Book store cms
@@ -379,13 +379,13 @@ const allPosts = [
 			{ link: 'https://www.javascript.com/', name: 'JavaScript' },
 		],
 		live: [true, 'https://storebookcms.netlify.app/'],
-		source: [true, 'https://github.com/Chrissiku/Bookstore-CMS'],
+		source: [true, 'https://github.com/elidakirigo/Bookstore-CMS'],
 		image: 'https://user-images.githubusercontent.com/101924220/209657836-0965c8de-8869-4308-b779-405bfa55cdc1.png',
 	},
 	// Breakout Game
 	{
 		topic: 'feature',
-		link: 'https://chrissiku.github.io/100-days-of-javascript/breakout_game/dist/',
+		link: 'https://elidakirigo.github.io/100-days-of-javascript/breakout_game/dist/',
 		title: 'Breakout Game',
 		content: ``,
 		stacks: [
@@ -394,8 +394,8 @@ const allPosts = [
 			{ link: 'https://www.javascript.com/', name: 'JavaScript' },
 			{ link: 'https://webpack.js.org/', name: 'Webpack' },
 		],
-		live: [true, 'https://chrissiku.github.io/100-days-of-javascript/breakout_game/dist/'],
-		source: [true, 'https://github.com/Chrissiku/100-days-of-javascript/tree/main/breakout_game'],
+		live: [true, 'https://elidakirigo.github.io/100-days-of-javascript/breakout_game/dist/'],
+		source: [true, 'https://github.com/elidakirigo/100-days-of-javascript/tree/main/breakout_game'],
 		image: 'https://user-images.githubusercontent.com/101924220/209657840-44b0c28a-ddba-41d2-ace1-ac6b9be60c06.png',
 	},
 ]
@@ -407,17 +407,9 @@ allPosts.map((element) => {
               <div class="item-card">
                 <h4><a target="_blank" class="title-link" href="${element.link}">${element.title}</a></h4>
                 <p>${element.content}</p>
-                <ul class="tag-link">
-                    ` +
-		element.stacks
-			.map((stack) => {
-				return `<li><a target="_blank" href="${stack.link}">${stack.name}</a></li>`
-			})
-			.join('') +
+               ` +
 		`
-                </ul>
-                <div class="item-image">              
-                  
+		<div class="item-image"> 
                   <a target="_blank" class="link-image" href="${element.live[1]}">
                       <i class="fa fa-eye"></i>
                   </a>
@@ -425,10 +417,19 @@ allPosts.map((element) => {
                   <a target="_blank" class="link-view" href="${element.source[1]}">
                       <i class="fab fa-github"></i>
                   </a>
-                  <img src="${element.image}" alt="image ${element.title}" />
-                </div>
-              </div>
-            </div>
+                  <img src="${element.image}" alt="image ${element.title}" /> 
+                </div>` +
+		`  <ul class="tag-link">` +
+		element.stacks
+			.map((stack) => {
+				return `<li><a target="_blank" href="${stack.link}">${stack.name}</a></li>`
+			})
+			.join('') +
+		`
+		</ul>` +
+		`
+              </div> 
+			  </div>
       `
 
 	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 = `
+    <div class="col-lg-2 col-md-3 col-6">
+            <div class="progress" data-percentage="${skill.percentage}">
+              <span class="progress-left">
+                <span class="progress-bar"></span>
+              </span>
+              <span class="progress-right">
+                <span class="progress-bar"></span
+              ></span>
+              <div class="progress-value">
+                <h3>${skill.skill_name}</h3>
+              </div>
+            </div>
+          </div>
+    `
+	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 = `
+    <li>
+        <a href="${item.link}" target="_blank"><i class="${item.icon}"></i></a>
+    </li>
+    `
+
+	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 = `
+    <button type="button" data-filter="${item.class}">${item.title}</button>
+    `
+	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 @@
 	<body>
 		<nav class="navbar navbar-expand-lg navbar-dark bg-transparent">
 			<div class="container">
-				<a class="navbar-brand" href="#"><img src="./assets/img/logo.png" alt="Elida Wanjiku logo" /></a>
+				<a class="navbar-brand" href="#">
+					<img width="50%" src="./assets/img/logo.png" alt="Elida Wanjiku logo" />
+				</a>
 				<button class="navbar-toggler" id="js-nav-trigger" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle">
 					<span></span>
 				</button>
@@ -45,7 +47,7 @@
 							<a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">Hire me</a>
 							<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
 								<li>
-									<a class="dropdown-item" target="_blank" href="https://docs.google.com/document/d/1_yKjArBE50904Q_SaCQKlLv8OLical-ZdpUaHpYTpJY/edit?usp=sharing">View my CV</a>
+									<button class="dropdown-item" type="button" data-bs-toggle="modal" data-bs-target="#staticBackdrop">View my Resume</button>
 								</li>
 							</ul>
 						</li>
@@ -57,6 +59,33 @@
 		</nav>
 		<!-- end navbar -->
 
+		<!-- modal start -->
+		<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
+			<div class="modal-dialog modal-dialog-centered">
+				<div class="modal-content">
+					<div class="modal-header">
+						<h1 class="modal-title fs-5" id="staticBackdropLabel">Submit Your Email</h1>
+						<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+					</div>
+					<div class="modal-body">
+						<form class="row g-3"> 
+							<div class="col">
+								<label for="inputEmail" class="visually-hidden">email</label>
+								<input type="email" class="form-control" id="inputEmail" placeholder="Email" />
+							</div>
+							<div class="col-auto">
+								<button type="submit" class="btn btn-special btn-primary btn-setPrimary mb-3">Send</button>
+							</div>
+						</form>
+					</div>
+					<!-- <div class="modal-footer">
+						<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+						<button type="button" class="btn btn-primary">Understood</button>
+					</div> -->
+				</div>
+			</div>
+		</div>
+		<!-- modal end -->
 		<!-- start header -->
 		<header id="home" class="has-style-01">
 			<!-- start shape -->
@@ -79,7 +108,7 @@ <h1>I'M <br />Elida Wanjiku</h1>
 							<h3>A Tech-Savy Web developer</h3>
 
 							<ul class="link d-flex">
-								<li><a class="btn btn-generic" href="#contact">Lets Connect</a></li>
+								<li><a class="btn btn-generic" href="#contact">Hire Me</a></li>
 							</ul>
 						</div>
 					</div>
@@ -121,8 +150,8 @@ <h3>A Tech-Savy Web developer</h3>
 					<div class="col-lg-6">
 						<div class="heading-title">
 							<h3>About Me</h3>
-							<h2>A Passionate software Developer Who Loves to Code and face new challenges</h2>
-							<p>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!</p>
+							<h2>Solution-driven web developer with 5+ years of experience</h2>
+							<p>Thrives in problem-solving with enthusiasm, patience, and humor. Actively contributes to the open-source community</p>
 						</div>
 
 						<ul class="row row-cols-md-2 row-cols-2 info">
@@ -137,10 +166,10 @@ <h2>A Passionate software Developer Who Loves to Code and face new challenges</h
 						<!-- start link -->
 						<ul class="link d-flex">
 							<li>
-								<a class="btn btn-generic m-1" href="#contact">Hire me</a>
+								<a class="btn btn-generic m-1" href="https://www.linkedin.com/in/elidakirigo/">Connect on Linkedin</a>
 							</li>
 							<li>
-								<a class="btn btn-generic m-1" target="_blank" href="https://drive.google.com/file/d/156UtauUV-F1O-vegR8Xc8ijf1_TqSrL_/view?usp=sharing">My resume <i class="fa-solid fa-download ms-2"></i></a>
+								<button class="dropdown-item btn btn-generic m-1 btn-primary bg-transparent" type="button" data-bs-toggle="modal" data-bs-target="#staticBackdrop">View my Resume <i class="fa-solid fa-download ms-2"></i></button>
 							</li>
 						</ul>
 						<!-- end link -->
@@ -353,11 +382,11 @@ <h2>Let's Work together <br />Get in touch now !</h2>
 		<script src="./assets/js/jquery-3.6.0.min.js"></script>
 		<script src="./assets/js/swiper-bundle.min.js"></script>
 		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-		<!-- <script src="./assets/js/fancybox.umd.js"></script>
+		<script src="./assets/js/fancybox.umd.js"></script>
 		<script src="./assets/js/kursor.js"></script>
 		<script src="./assets/js/mixitup.min.js"></script>
 		<script src="./assets/js/portfolio.js"></script>
 		<script src="./assets/js/render.js"></script>
-		<script src="./assets/js/app.js"></script> -->
+		<script src="./assets/js/app.js"></script>
 	</body>
 </html>
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 <br> work
-
-+124
-Completed <br> projects
-
-96
-Satisfied <br> customers
-
-<!-- Insert your CV -->
-
-<!-- Insert a real number plus country code -->
-https://api.whatsapp.com/send?phone=51123456789&text=Hello, more information!
-
-<!-- Insert your brand name or profile -->
-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
-&#169; 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 <br> work
+
++124
+Completed <br> projects
+
+96
+Satisfied <br> customers
+
+<!-- Insert your CV -->
+
+<!-- Insert a real number plus country code -->
+https://api.whatsapp.com/send?phone=51123456789&text=Hello, more information!
+
+<!-- Insert your brand name or profile -->
+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
+&#169; 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<n--;)t[n]=arguments[n+1];if(this.constructor.debug&&console){var i="%cScrollReveal: "+e;t.forEach(function(e){return i+="\n — "+e}),console.log(i,"color: #ea654b;")}}function t(){var n=this,i={active:[],stale:[]},t={active:[],stale:[]},r={active:[],stale:[]};try{f(u("[data-sr-id]"),function(e){var t=parseInt(e.getAttribute("data-sr-id"));i.active.push(t)})}catch(e){throw e}f(this.store.elements,function(e){-1===i.active.indexOf(e.id)&&i.stale.push(e.id)}),f(i.stale,function(e){return delete n.store.elements[e]}),f(this.store.elements,function(e){-1===r.active.indexOf(e.containerId)&&r.active.push(e.containerId),e.hasOwnProperty("sequence")&&-1===t.active.indexOf(e.sequence.id)&&t.active.push(e.sequence.id)}),f(this.store.containers,function(e){-1===r.active.indexOf(e.id)&&r.stale.push(e.id)}),f(r.stale,function(e){var t=n.store.containers[e].node;t.removeEventListener("scroll",n.delegate),t.removeEventListener("resize",n.delegate),delete n.store.containers[e]}),f(this.store.sequences,function(e){-1===t.active.indexOf(e.id)&&t.stale.push(e.id)}),f(t.stale,function(e){return delete n.store.sequences[e]})}function N(e){if(e.constructor!==Array)throw new TypeError("Expected array.");if(16===e.length)return e;if(6!==e.length)throw new RangeError("Expected array with either 6 or 16 values.");var t=z();return t[0]=e[0],t[1]=e[1],t[4]=e[2],t[5]=e[3],t[12]=e[4],t[13]=e[5],t}function z(){for(var e=[],t=0;t<16;t++)t%5==0?e.push(1):e.push(0);return e}function F(e,t){for(var n=N(e),i=N(t),r=[],o=0;o<4;o++)for(var s=[n[o],n[o+4],n[o+8],n[o+12]],a=0;a<4;a++){var c=4*a,l=[i[c],i[c+1],i[c+2],i[c+3]],d=s[0]*l[0]+s[1]*l[1]+s[2]*l[2]+s[3]*l[3];r[o+c]=d}return r}function D(e,t){var n=z();return n[0]=e,n[5]="number"==typeof t?t:e,n}var S=function(){var n={},i=document.documentElement.style;function e(e,t){if(void 0===t&&(t=i),e&&"string"==typeof e){if(n[e])return n[e];if("string"==typeof t[e])return n[e]=e;if("string"==typeof t["-webkit-"+e])return n[e]="-webkit-"+e;throw new RangeError('Unable to find "'+e+'" style property.')}throw new TypeError("Expected a string.")}return e.clearCache=function(){return n={}},e}();function p(e){var t=window.getComputedStyle(e.node),n=t.position,i=e.config,r={},o=(e.node.getAttribute("style")||"").match(/[\w-]+\s*:\s*[^;]+\s*/gi)||[];r.computed=o?o.map(function(e){return e.trim()}).join("; ")+";":"",r.generated=o.some(function(e){return e.match(/visibility\s?:\s?visible/i)})?r.computed:o.concat(["visibility: visible"]).map(function(e){return e.trim()}).join("; ")+";";var s,a,c,l,d,u,f,h,p,m,y,v,g,b=parseFloat(t.opacity),w=isNaN(parseFloat(i.opacity))?parseFloat(t.opacity):parseFloat(i.opacity),E={computed:b!==w?"opacity: "+b+";":"",generated:b!==w?"opacity: "+w+";":""},j=[];if(parseFloat(i.distance)){var T="top"===i.origin||"bottom"===i.origin?"Y":"X",k=i.distance;"top"!==i.origin&&"left"!==i.origin||(k=/^-/.test(k)?k.substr(1):"-"+k);var O=k.match(/(^-?\d+\.?\d?)|(em$|px$|%$)/g),x=O[0];switch(O[1]){case"em":k=parseInt(t.fontSize)*x;break;case"px":k=x;break;case"%":k="Y"===T?e.node.getBoundingClientRect().height*x/100:e.node.getBoundingClientRect().width*x/100;break;default:throw new RangeError("Unrecognized or missing distance unit.")}"Y"===T?j.push((c=k,(l=z())[13]=c,l)):j.push((s=k,(a=z())[12]=s,a))}i.rotate.x&&j.push((d=i.rotate.x,u=Math.PI/180*d,(f=z())[5]=f[10]=Math.cos(u),f[6]=f[9]=Math.sin(u),f[9]*=-1,f)),i.rotate.y&&j.push((h=i.rotate.y,p=Math.PI/180*h,(m=z())[0]=m[10]=Math.cos(p),m[2]=m[8]=Math.sin(p),m[2]*=-1,m)),i.rotate.z&&j.push((y=i.rotate.z,v=Math.PI/180*y,(g=z())[0]=g[5]=Math.cos(v),g[1]=g[4]=Math.sin(v),g[4]*=-1,g)),1!==i.scale&&(0===i.scale?j.push(D(2e-4)):j.push(D(i.scale)));var R={};if(j.length){R.property=S("transform"),R.computed={raw:t[R.property],matrix:function(e){if("string"==typeof e){var t=e.match(/matrix(3d)?\(([^)]+)\)/);if(t)return N(t[2].split(", ").map(parseFloat))}return z()}(t[R.property])},j.unshift(R.computed.matrix);var q=j.reduce(F);R.generated={initial:R.property+": matrix3d("+q.join(", ")+");",final:R.property+": matrix3d("+R.computed.matrix.join(", ")+");"}}else R.generated={initial:"",final:""};var A={};if(E.generated||R.generated.initial){A.property=S("transition"),A.computed=t[A.property],A.fragments=[];var P=i.delay,L=i.duration,M=i.easing;E.generated&&A.fragments.push({delayed:"opacity "+L/1e3+"s "+M+" "+P/1e3+"s",instant:"opacity "+L/1e3+"s "+M+" 0s"}),R.generated.initial&&A.fragments.push({delayed:R.property+" "+L/1e3+"s "+M+" "+P/1e3+"s",instant:R.property+" "+L/1e3+"s "+M+" 0s"}),A.computed&&!A.computed.match(/all 0s|none 0s/)&&A.fragments.unshift({delayed:A.computed,instant:A.computed});var I=A.fragments.reduce(function(e,t,n){return e.delayed+=0===n?t.delayed:", "+t.delayed,e.instant+=0===n?t.instant:", "+t.instant,e},{delayed:"",instant:""});A.generated={delayed:A.property+": "+I.delayed+";",instant:A.property+": "+I.instant+";"}}else A.generated={delayed:"",instant:""};return{inline:r,opacity:E,position:n,transform:R,transition:A}}function m(r,e){e.split(";").forEach(function(e){var t=e.split(":"),n=t[0],i=t.slice(1);n&&i&&(r.style[n.trim()]=i.join(":"))})}function y(e){var i,r=this;try{f(u(e),function(e){var t=e.getAttribute("data-sr-id");if(null!==t){i=!0;var n=r.store.elements[t];n.callbackTimer&&window.clearTimeout(n.callbackTimer.clock),m(n.node,n.styles.inline.generated),e.removeAttribute("data-sr-id"),delete r.store.elements[t]}})}catch(e){return h.call(this,"Clean failed.",e.message)}if(i)try{t.call(this)}catch(e){return h.call(this,"Clean failed.",e.message)}}function v(n){for(var e=[],t=arguments.length-1;0<t--;)e[t]=arguments[t+1];if(s(n))return f(e,function(e){f(e,function(e,t){s(e)?(n[t]&&s(n[t])||(n[t]={}),v(n[t],e)):n[t]=e})}),n;throw new TypeError("Target must be an object literal.")}function g(e){return void 0===e&&(e=navigator.userAgent),/Android|iPhone|iPad|iPod/i.test(e)}var e,b=(e=0,function(){return e++});function w(){var n=this;t.call(this),f(this.store.elements,function(e){var t=[e.styles.inline.generated];e.visible?(t.push(e.styles.opacity.computed),t.push(e.styles.transform.generated.final),e.revealed=!0):(t.push(e.styles.opacity.generated),t.push(e.styles.transform.generated.initial),e.revealed=!1),m(e.node,t.filter(function(e){return""!==e}).join(" "))}),f(this.store.containers,function(e){var t=e.node===document.documentElement?window:e.node;t.addEventListener("scroll",n.delegate),t.addEventListener("resize",n.delegate)}),this.delegate(),this.initTimeout=null}function c(e,t){void 0===t&&(t={});var n=t.pristine||this.pristine,i="always"===e.config.useDelay||"onload"===e.config.useDelay&&n||"once"===e.config.useDelay&&!e.seen,r=e.visible&&!e.revealed,o=!e.visible&&e.revealed&&e.config.reset;return t.reveal||r?function(e,t){var n=[e.styles.inline.generated,e.styles.opacity.computed,e.styles.transform.generated.final];t?n.push(e.styles.transition.generated.delayed):n.push(e.styles.transition.generated.instant);e.revealed=e.seen=!0,m(e.node,n.filter(function(e){return""!==e}).join(" ")),a.call(this,e,t)}.call(this,e,i):t.reset||o?function(e){var t=[e.styles.inline.generated,e.styles.opacity.generated,e.styles.transform.generated.initial,e.styles.transition.generated.instant];e.revealed=!1,m(e.node,t.filter(function(e){return""!==e}).join(" ")),a.call(this,e)}.call(this,e):void 0}function a(e,t){var n=this,i=t?e.config.duration+e.config.delay:e.config.duration,r=e.revealed?e.config.beforeReveal:e.config.beforeReset,o=e.revealed?e.config.afterReveal:e.config.afterReset,s=0;e.callbackTimer&&(s=Date.now()-e.callbackTimer.start,window.clearTimeout(e.callbackTimer.clock)),r(e.node),e.callbackTimer={start:Date.now(),clock:window.setTimeout(function(){o(e.node),e.callbackTimer=null,e.revealed&&!e.config.reset&&e.config.cleanup&&y.call(n,e.node)},i-s)}}function l(e,t){if(void 0===t&&(t=this.pristine),!e.visible&&e.revealed&&e.config.reset)return c.call(this,e,{reset:!0});var n=this.store.sequences[e.sequence.id],i=e.sequence.index;if(n){var r=new d(n,"visible",this.store),o=new d(n,"revealed",this.store);if(n.models={visible:r,revealed:o},!o.body.length){var s=n.members[r.body[0]],a=this.store.elements[s];if(a)return j.call(this,n,r.body[0],-1,t),j.call(this,n,r.body[0],1,t),c.call(this,a,{reveal:!0,pristine:t})}if(!n.blocked.head&&i===[].concat(o.head).pop()&&i>=[].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<o.body[0]?o.head.push(t):o.foot.push(t))})}function j(e,t,n,i){var r=this,o=["head",null,"foot"][1+n],s=e.members[t+n],a=this.store.elements[s];e.blocked[o]=!0,setTimeout(function(){e.blocked[o]=!1,a&&l.call(r,a,i)},e.interval)}function i(e,a,t){var c=this;void 0===a&&(a={}),void 0===t&&(t=!1);var l,d=[],n=a.interval||r.interval;try{n&&(l=new E(n));var i=u(e);if(!i.length)throw new Error("Invalid reveal target.");f(i.reduce(function(e,t){var n={},i=t.getAttribute("data-sr-id");i?(v(n,c.store.elements[i]),m(n.node,n.styles.inline.computed)):(n.id=b(),n.node=t,n.seen=!1,n.revealed=!1,n.visible=!1);var r=v({},n.config||c.defaults,a);if(!r.mobile&&g()||!r.desktop&&!g())return i&&y.call(c,n),e;var o,s=u(r.container)[0];if(!s)throw new Error("Invalid container.");return s.contains(t)&&(null===(o=function(t){var e=[],n=arguments.length-1;for(;0<n--;)e[n]=arguments[n+1];var i=null;return f(e,function(e){f(e,function(e){null===i&&e.node===t&&(i=e.id)})}),i}(s,d,c.store.containers))&&(o=b(),d.push({id:o,node:s})),n.config=r,n.containerId=o,n.styles=p(n),l&&(n.sequence={id:l.id,index:l.members.length},l.members.push(n.id)),e.push(n)),e},[]),function(e){(c.store.elements[e.id]=e).node.setAttribute("data-sr-id",e.id)})}catch(e){return h.call(this,"Reveal failed.",e.message)}f(d,function(e){c.store.containers[e.id]={id:e.id,node:e.node}}),l&&(this.store.sequences[l.id]=l),!0!==t&&(this.store.history.push({target:e,options:a}),this.initTimeout&&window.clearTimeout(this.initTimeout),this.initTimeout=window.setTimeout(w.bind(this),0))}var T,k=Math.sign||function(e){return(0<e)-(e<0)||+e},O=(T=Date.now(),function(e){var t=Date.now();16<t-T?e(T=t):setTimeout(function(){return O(e)},0)}),x=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||O;function R(e,t){for(var n=t?e.node.clientHeight:e.node.offsetHeight,i=t?e.node.clientWidth:e.node.offsetWidth,r=0,o=0,s=e.node;isNaN(s.offsetTop)||(r+=s.offsetTop),isNaN(s.offsetLeft)||(o+=s.offsetLeft),s=s.offsetParent;);return{bounds:{top:r,right:o+i,bottom:r+n,left:o},height:n,width:i}}function q(e,t){var i=this;void 0===e&&(e={type:"init"}),void 0===t&&(t=this.store.elements),x(function(){var n="init"===e.type||"resize"===e.type;f(i.store.containers,function(e){n&&(e.geometry=R.call(i,e,!0));var t=function(e){var t,n;return n=e.node===document.documentElement?(t=window.pageYOffset,window.pageXOffset):(t=e.node.scrollTop,e.node.scrollLeft),{top:t,left:n}}.call(i,e);e.scroll&&(e.direction={x:k(t.left-e.scroll.left),y:k(t.top-e.scroll.top)}),e.scroll=t}),f(t,function(e){(n||void 0===e.geometry)&&(e.geometry=R.call(i,e)),e.visible=function(e){void 0===e&&(e={});var t=this.store.containers[e.containerId];if(t){var n=Math.max(0,Math.min(1,e.config.viewFactor)),i=e.config.viewOffset,r=e.geometry.bounds.top+e.geometry.height*n,o=e.geometry.bounds.right-e.geometry.width*n,s=e.geometry.bounds.bottom-e.geometry.height*n,a=e.geometry.bounds.left+e.geometry.width*n,c=t.geometry.bounds.top+t.scroll.top+i.top,l=t.geometry.bounds.right+t.scroll.left-i.right,d=t.geometry.bounds.bottom+t.scroll.top-i.bottom,u=t.geometry.bounds.left+t.scroll.left+i.left;return r<d&&u<o&&c<s&&a<l||"fixed"===e.styles.position}}.call(i,e)}),f(t,function(e){e.sequence?l.call(i,e):c.call(i,e)}),i.pristine=!1})}var A,P,L,M,I,C,W,Y,$="4.0.9";function H(e){var t;if(void 0===e&&(e={}),void 0===this||Object.getPrototypeOf(this)!==H.prototype)return new H(e);if(!H.isSupported())return h.call(this,"Instantiation failed.","This browser is not supported."),n.failure();try{t=v({},C||r,e)}catch(e){return h.call(this,"Invalid configuration.",e.message),n.failure()}try{if(!u(t.container)[0])throw new Error("Invalid container.")}catch(e){return h.call(this,e.message),n.failure()}return!(C=t).mobile&&g()||!C.desktop&&!g()?(h.call(this,"This device is disabled.","desktop: "+C.desktop,"mobile: "+C.mobile),n.failure()):(n.success(),this.store={containers:{},elements:{},history:[],sequences:{}},this.pristine=!0,A=A||q.bind(this),P=P||function(){var n=this;f(this.store.elements,function(e){m(e.node,e.styles.inline.generated),e.node.removeAttribute("data-sr-id")}),f(this.store.containers,function(e){var t=e.node===document.documentElement?window:e.node;t.removeEventListener("scroll",n.delegate),t.removeEventListener("resize",n.delegate)}),this.store={containers:{},elements:{},history:[],sequences:{}}}.bind(this),L=L||i.bind(this),M=M||y.bind(this),I=I||function(){var t=this;f(this.store.history,function(e){i.call(t,e.target,e.options,!0)}),w.call(this)}.bind(this),Object.defineProperty(this,"delegate",{get:function(){return A}}),Object.defineProperty(this,"destroy",{get:function(){return P}}),Object.defineProperty(this,"reveal",{get:function(){return L}}),Object.defineProperty(this,"clean",{get:function(){return M}}),Object.defineProperty(this,"sync",{get:function(){return I}}),Object.defineProperty(this,"defaults",{get:function(){return C}}),Object.defineProperty(this,"version",{get:function(){return $}}),Object.defineProperty(this,"noop",{get:function(){return!1}}),Y||(Y=this))}return H.isSupported=function(){return("transform"in(t=document.documentElement.style)||"WebkitTransform"in t)&&("transition"in(e=document.documentElement.style)||"WebkitTransition"in e);var e,t},Object.defineProperty(H,"debug",{get:function(){return W||!1},set:function(e){return W="boolean"==typeof e?e:W}}),H(),H}();
+/*! @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<n--;)t[n]=arguments[n+1];if(this.constructor.debug&&console){var i="%cScrollReveal: "+e;t.forEach(function(e){return i+="\n — "+e}),console.log(i,"color: #ea654b;")}}function t(){var n=this,i={active:[],stale:[]},t={active:[],stale:[]},r={active:[],stale:[]};try{f(u("[data-sr-id]"),function(e){var t=parseInt(e.getAttribute("data-sr-id"));i.active.push(t)})}catch(e){throw e}f(this.store.elements,function(e){-1===i.active.indexOf(e.id)&&i.stale.push(e.id)}),f(i.stale,function(e){return delete n.store.elements[e]}),f(this.store.elements,function(e){-1===r.active.indexOf(e.containerId)&&r.active.push(e.containerId),e.hasOwnProperty("sequence")&&-1===t.active.indexOf(e.sequence.id)&&t.active.push(e.sequence.id)}),f(this.store.containers,function(e){-1===r.active.indexOf(e.id)&&r.stale.push(e.id)}),f(r.stale,function(e){var t=n.store.containers[e].node;t.removeEventListener("scroll",n.delegate),t.removeEventListener("resize",n.delegate),delete n.store.containers[e]}),f(this.store.sequences,function(e){-1===t.active.indexOf(e.id)&&t.stale.push(e.id)}),f(t.stale,function(e){return delete n.store.sequences[e]})}function N(e){if(e.constructor!==Array)throw new TypeError("Expected array.");if(16===e.length)return e;if(6!==e.length)throw new RangeError("Expected array with either 6 or 16 values.");var t=z();return t[0]=e[0],t[1]=e[1],t[4]=e[2],t[5]=e[3],t[12]=e[4],t[13]=e[5],t}function z(){for(var e=[],t=0;t<16;t++)t%5==0?e.push(1):e.push(0);return e}function F(e,t){for(var n=N(e),i=N(t),r=[],o=0;o<4;o++)for(var s=[n[o],n[o+4],n[o+8],n[o+12]],a=0;a<4;a++){var c=4*a,l=[i[c],i[c+1],i[c+2],i[c+3]],d=s[0]*l[0]+s[1]*l[1]+s[2]*l[2]+s[3]*l[3];r[o+c]=d}return r}function D(e,t){var n=z();return n[0]=e,n[5]="number"==typeof t?t:e,n}var S=function(){var n={},i=document.documentElement.style;function e(e,t){if(void 0===t&&(t=i),e&&"string"==typeof e){if(n[e])return n[e];if("string"==typeof t[e])return n[e]=e;if("string"==typeof t["-webkit-"+e])return n[e]="-webkit-"+e;throw new RangeError('Unable to find "'+e+'" style property.')}throw new TypeError("Expected a string.")}return e.clearCache=function(){return n={}},e}();function p(e){var t=window.getComputedStyle(e.node),n=t.position,i=e.config,r={},o=(e.node.getAttribute("style")||"").match(/[\w-]+\s*:\s*[^;]+\s*/gi)||[];r.computed=o?o.map(function(e){return e.trim()}).join("; ")+";":"",r.generated=o.some(function(e){return e.match(/visibility\s?:\s?visible/i)})?r.computed:o.concat(["visibility: visible"]).map(function(e){return e.trim()}).join("; ")+";";var s,a,c,l,d,u,f,h,p,m,y,v,g,b=parseFloat(t.opacity),w=isNaN(parseFloat(i.opacity))?parseFloat(t.opacity):parseFloat(i.opacity),E={computed:b!==w?"opacity: "+b+";":"",generated:b!==w?"opacity: "+w+";":""},j=[];if(parseFloat(i.distance)){var T="top"===i.origin||"bottom"===i.origin?"Y":"X",k=i.distance;"top"!==i.origin&&"left"!==i.origin||(k=/^-/.test(k)?k.substr(1):"-"+k);var O=k.match(/(^-?\d+\.?\d?)|(em$|px$|%$)/g),x=O[0];switch(O[1]){case"em":k=parseInt(t.fontSize)*x;break;case"px":k=x;break;case"%":k="Y"===T?e.node.getBoundingClientRect().height*x/100:e.node.getBoundingClientRect().width*x/100;break;default:throw new RangeError("Unrecognized or missing distance unit.")}"Y"===T?j.push((c=k,(l=z())[13]=c,l)):j.push((s=k,(a=z())[12]=s,a))}i.rotate.x&&j.push((d=i.rotate.x,u=Math.PI/180*d,(f=z())[5]=f[10]=Math.cos(u),f[6]=f[9]=Math.sin(u),f[9]*=-1,f)),i.rotate.y&&j.push((h=i.rotate.y,p=Math.PI/180*h,(m=z())[0]=m[10]=Math.cos(p),m[2]=m[8]=Math.sin(p),m[2]*=-1,m)),i.rotate.z&&j.push((y=i.rotate.z,v=Math.PI/180*y,(g=z())[0]=g[5]=Math.cos(v),g[1]=g[4]=Math.sin(v),g[4]*=-1,g)),1!==i.scale&&(0===i.scale?j.push(D(2e-4)):j.push(D(i.scale)));var R={};if(j.length){R.property=S("transform"),R.computed={raw:t[R.property],matrix:function(e){if("string"==typeof e){var t=e.match(/matrix(3d)?\(([^)]+)\)/);if(t)return N(t[2].split(", ").map(parseFloat))}return z()}(t[R.property])},j.unshift(R.computed.matrix);var q=j.reduce(F);R.generated={initial:R.property+": matrix3d("+q.join(", ")+");",final:R.property+": matrix3d("+R.computed.matrix.join(", ")+");"}}else R.generated={initial:"",final:""};var A={};if(E.generated||R.generated.initial){A.property=S("transition"),A.computed=t[A.property],A.fragments=[];var P=i.delay,L=i.duration,M=i.easing;E.generated&&A.fragments.push({delayed:"opacity "+L/1e3+"s "+M+" "+P/1e3+"s",instant:"opacity "+L/1e3+"s "+M+" 0s"}),R.generated.initial&&A.fragments.push({delayed:R.property+" "+L/1e3+"s "+M+" "+P/1e3+"s",instant:R.property+" "+L/1e3+"s "+M+" 0s"}),A.computed&&!A.computed.match(/all 0s|none 0s/)&&A.fragments.unshift({delayed:A.computed,instant:A.computed});var I=A.fragments.reduce(function(e,t,n){return e.delayed+=0===n?t.delayed:", "+t.delayed,e.instant+=0===n?t.instant:", "+t.instant,e},{delayed:"",instant:""});A.generated={delayed:A.property+": "+I.delayed+";",instant:A.property+": "+I.instant+";"}}else A.generated={delayed:"",instant:""};return{inline:r,opacity:E,position:n,transform:R,transition:A}}function m(r,e){e.split(";").forEach(function(e){var t=e.split(":"),n=t[0],i=t.slice(1);n&&i&&(r.style[n.trim()]=i.join(":"))})}function y(e){var i,r=this;try{f(u(e),function(e){var t=e.getAttribute("data-sr-id");if(null!==t){i=!0;var n=r.store.elements[t];n.callbackTimer&&window.clearTimeout(n.callbackTimer.clock),m(n.node,n.styles.inline.generated),e.removeAttribute("data-sr-id"),delete r.store.elements[t]}})}catch(e){return h.call(this,"Clean failed.",e.message)}if(i)try{t.call(this)}catch(e){return h.call(this,"Clean failed.",e.message)}}function v(n){for(var e=[],t=arguments.length-1;0<t--;)e[t]=arguments[t+1];if(s(n))return f(e,function(e){f(e,function(e,t){s(e)?(n[t]&&s(n[t])||(n[t]={}),v(n[t],e)):n[t]=e})}),n;throw new TypeError("Target must be an object literal.")}function g(e){return void 0===e&&(e=navigator.userAgent),/Android|iPhone|iPad|iPod/i.test(e)}var e,b=(e=0,function(){return e++});function w(){var n=this;t.call(this),f(this.store.elements,function(e){var t=[e.styles.inline.generated];e.visible?(t.push(e.styles.opacity.computed),t.push(e.styles.transform.generated.final),e.revealed=!0):(t.push(e.styles.opacity.generated),t.push(e.styles.transform.generated.initial),e.revealed=!1),m(e.node,t.filter(function(e){return""!==e}).join(" "))}),f(this.store.containers,function(e){var t=e.node===document.documentElement?window:e.node;t.addEventListener("scroll",n.delegate),t.addEventListener("resize",n.delegate)}),this.delegate(),this.initTimeout=null}function c(e,t){void 0===t&&(t={});var n=t.pristine||this.pristine,i="always"===e.config.useDelay||"onload"===e.config.useDelay&&n||"once"===e.config.useDelay&&!e.seen,r=e.visible&&!e.revealed,o=!e.visible&&e.revealed&&e.config.reset;return t.reveal||r?function(e,t){var n=[e.styles.inline.generated,e.styles.opacity.computed,e.styles.transform.generated.final];t?n.push(e.styles.transition.generated.delayed):n.push(e.styles.transition.generated.instant);e.revealed=e.seen=!0,m(e.node,n.filter(function(e){return""!==e}).join(" ")),a.call(this,e,t)}.call(this,e,i):t.reset||o?function(e){var t=[e.styles.inline.generated,e.styles.opacity.generated,e.styles.transform.generated.initial,e.styles.transition.generated.instant];e.revealed=!1,m(e.node,t.filter(function(e){return""!==e}).join(" ")),a.call(this,e)}.call(this,e):void 0}function a(e,t){var n=this,i=t?e.config.duration+e.config.delay:e.config.duration,r=e.revealed?e.config.beforeReveal:e.config.beforeReset,o=e.revealed?e.config.afterReveal:e.config.afterReset,s=0;e.callbackTimer&&(s=Date.now()-e.callbackTimer.start,window.clearTimeout(e.callbackTimer.clock)),r(e.node),e.callbackTimer={start:Date.now(),clock:window.setTimeout(function(){o(e.node),e.callbackTimer=null,e.revealed&&!e.config.reset&&e.config.cleanup&&y.call(n,e.node)},i-s)}}function l(e,t){if(void 0===t&&(t=this.pristine),!e.visible&&e.revealed&&e.config.reset)return c.call(this,e,{reset:!0});var n=this.store.sequences[e.sequence.id],i=e.sequence.index;if(n){var r=new d(n,"visible",this.store),o=new d(n,"revealed",this.store);if(n.models={visible:r,revealed:o},!o.body.length){var s=n.members[r.body[0]],a=this.store.elements[s];if(a)return j.call(this,n,r.body[0],-1,t),j.call(this,n,r.body[0],1,t),c.call(this,a,{reveal:!0,pristine:t})}if(!n.blocked.head&&i===[].concat(o.head).pop()&&i>=[].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<o.body[0]?o.head.push(t):o.foot.push(t))})}function j(e,t,n,i){var r=this,o=["head",null,"foot"][1+n],s=e.members[t+n],a=this.store.elements[s];e.blocked[o]=!0,setTimeout(function(){e.blocked[o]=!1,a&&l.call(r,a,i)},e.interval)}function i(e,a,t){var c=this;void 0===a&&(a={}),void 0===t&&(t=!1);var l,d=[],n=a.interval||r.interval;try{n&&(l=new E(n));var i=u(e);if(!i.length)throw new Error("Invalid reveal target.");f(i.reduce(function(e,t){var n={},i=t.getAttribute("data-sr-id");i?(v(n,c.store.elements[i]),m(n.node,n.styles.inline.computed)):(n.id=b(),n.node=t,n.seen=!1,n.revealed=!1,n.visible=!1);var r=v({},n.config||c.defaults,a);if(!r.mobile&&g()||!r.desktop&&!g())return i&&y.call(c,n),e;var o,s=u(r.container)[0];if(!s)throw new Error("Invalid container.");return s.contains(t)&&(null===(o=function(t){var e=[],n=arguments.length-1;for(;0<n--;)e[n]=arguments[n+1];var i=null;return f(e,function(e){f(e,function(e){null===i&&e.node===t&&(i=e.id)})}),i}(s,d,c.store.containers))&&(o=b(),d.push({id:o,node:s})),n.config=r,n.containerId=o,n.styles=p(n),l&&(n.sequence={id:l.id,index:l.members.length},l.members.push(n.id)),e.push(n)),e},[]),function(e){(c.store.elements[e.id]=e).node.setAttribute("data-sr-id",e.id)})}catch(e){return h.call(this,"Reveal failed.",e.message)}f(d,function(e){c.store.containers[e.id]={id:e.id,node:e.node}}),l&&(this.store.sequences[l.id]=l),!0!==t&&(this.store.history.push({target:e,options:a}),this.initTimeout&&window.clearTimeout(this.initTimeout),this.initTimeout=window.setTimeout(w.bind(this),0))}var T,k=Math.sign||function(e){return(0<e)-(e<0)||+e},O=(T=Date.now(),function(e){var t=Date.now();16<t-T?e(T=t):setTimeout(function(){return O(e)},0)}),x=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||O;function R(e,t){for(var n=t?e.node.clientHeight:e.node.offsetHeight,i=t?e.node.clientWidth:e.node.offsetWidth,r=0,o=0,s=e.node;isNaN(s.offsetTop)||(r+=s.offsetTop),isNaN(s.offsetLeft)||(o+=s.offsetLeft),s=s.offsetParent;);return{bounds:{top:r,right:o+i,bottom:r+n,left:o},height:n,width:i}}function q(e,t){var i=this;void 0===e&&(e={type:"init"}),void 0===t&&(t=this.store.elements),x(function(){var n="init"===e.type||"resize"===e.type;f(i.store.containers,function(e){n&&(e.geometry=R.call(i,e,!0));var t=function(e){var t,n;return n=e.node===document.documentElement?(t=window.pageYOffset,window.pageXOffset):(t=e.node.scrollTop,e.node.scrollLeft),{top:t,left:n}}.call(i,e);e.scroll&&(e.direction={x:k(t.left-e.scroll.left),y:k(t.top-e.scroll.top)}),e.scroll=t}),f(t,function(e){(n||void 0===e.geometry)&&(e.geometry=R.call(i,e)),e.visible=function(e){void 0===e&&(e={});var t=this.store.containers[e.containerId];if(t){var n=Math.max(0,Math.min(1,e.config.viewFactor)),i=e.config.viewOffset,r=e.geometry.bounds.top+e.geometry.height*n,o=e.geometry.bounds.right-e.geometry.width*n,s=e.geometry.bounds.bottom-e.geometry.height*n,a=e.geometry.bounds.left+e.geometry.width*n,c=t.geometry.bounds.top+t.scroll.top+i.top,l=t.geometry.bounds.right+t.scroll.left-i.right,d=t.geometry.bounds.bottom+t.scroll.top-i.bottom,u=t.geometry.bounds.left+t.scroll.left+i.left;return r<d&&u<o&&c<s&&a<l||"fixed"===e.styles.position}}.call(i,e)}),f(t,function(e){e.sequence?l.call(i,e):c.call(i,e)}),i.pristine=!1})}var A,P,L,M,I,C,W,Y,$="4.0.9";function H(e){var t;if(void 0===e&&(e={}),void 0===this||Object.getPrototypeOf(this)!==H.prototype)return new H(e);if(!H.isSupported())return h.call(this,"Instantiation failed.","This browser is not supported."),n.failure();try{t=v({},C||r,e)}catch(e){return h.call(this,"Invalid configuration.",e.message),n.failure()}try{if(!u(t.container)[0])throw new Error("Invalid container.")}catch(e){return h.call(this,e.message),n.failure()}return!(C=t).mobile&&g()||!C.desktop&&!g()?(h.call(this,"This device is disabled.","desktop: "+C.desktop,"mobile: "+C.mobile),n.failure()):(n.success(),this.store={containers:{},elements:{},history:[],sequences:{}},this.pristine=!0,A=A||q.bind(this),P=P||function(){var n=this;f(this.store.elements,function(e){m(e.node,e.styles.inline.generated),e.node.removeAttribute("data-sr-id")}),f(this.store.containers,function(e){var t=e.node===document.documentElement?window:e.node;t.removeEventListener("scroll",n.delegate),t.removeEventListener("resize",n.delegate)}),this.store={containers:{},elements:{},history:[],sequences:{}}}.bind(this),L=L||i.bind(this),M=M||y.bind(this),I=I||function(){var t=this;f(this.store.history,function(e){i.call(t,e.target,e.options,!0)}),w.call(this)}.bind(this),Object.defineProperty(this,"delegate",{get:function(){return A}}),Object.defineProperty(this,"destroy",{get:function(){return P}}),Object.defineProperty(this,"reveal",{get:function(){return L}}),Object.defineProperty(this,"clean",{get:function(){return M}}),Object.defineProperty(this,"sync",{get:function(){return I}}),Object.defineProperty(this,"defaults",{get:function(){return C}}),Object.defineProperty(this,"version",{get:function(){return $}}),Object.defineProperty(this,"noop",{get:function(){return!1}}),Y||(Y=this))}return H.isSupported=function(){return("transform"in(t=document.documentElement.style)||"WebkitTransform"in t)&&("transition"in(e=document.documentElement.style)||"WebkitTransition"in e);var e,t},Object.defineProperty(H,"debug",{get:function(){return W||!1},set:function(e){return W="boolean"==typeof e?e:W}}),H(),H}();
diff --git a/responsive-mini-portfolio(html-css-js)/assets/pdf/Gianell-Cv.pdf b/portfolio-mini/assets/pdf/Gianell-Cv.pdf
similarity index 100%
rename from responsive-mini-portfolio(html-css-js)/assets/pdf/Gianell-Cv.pdf
rename to portfolio-mini/assets/pdf/Gianell-Cv.pdf
diff --git a/responsive-mini-portfolio(html-css-js)/css/index.css b/portfolio-mini/css/index.css
similarity index 96%
rename from responsive-mini-portfolio(html-css-js)/css/index.css
rename to portfolio-mini/css/index.css
index 19ae122..2a37f70 100644
--- a/responsive-mini-portfolio(html-css-js)/css/index.css
+++ b/portfolio-mini/css/index.css
@@ -1,110 +1,110 @@
-/*=============== GOOGLE FONTS ===============*/
-@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
-/*=============== VARIABLES CSS ===============*/
-:root {
-  /*========== Colors ==========*/
-  /*Color mode HSL(hue, saturation, lightness)*/
-  /*
-      Blue: hsl(207, 90%, 61%)
-      Purple: hsl(250, 66%, 75%)
-      Pink: hsl(356, 66%, 75%)
-      Teal: hsl(174, 63%, 62%)
-  */
-  --hue: 207;
-  --sat: 90%;
-  --lig: 61%;
-  --first-color: hsl(var(--hue), var(--sat), var(--lig));
-  --first-color-alt: hsl(var(--hue), var(--sat), 57%);
-  /* -4% */
-  --title-color: hsl(var(--hue), 12%, 15%);
-  --text-color: hsl(var(--hue), 12%, 45%);
-  --text-color-light: hsl(var(--hue), 8%, 75%);
-  --text-color-lighten: hsl(var(--hue), 8%, 92%);
-  --body-color: hsl(var(--hue), 100%, 99%);
-  --container-color: #fff;
-  /*========== Font and typography ==========*/
-  /*.5rem = 8px | 1rem = 16px ...*/
-  --body-font: "Poppins", sans-serif;
-  --h2-font-size: 1.25rem;
-  --h3-font-size: 1rem;
-  --normal-font-size: .938rem;
-  --small-font-size: .813rem;
-  --smaller-font-size: .75rem;
-}
-
-@media screen and (min-width: 968px) {
-  :root {
-    --h2-font-size: 1.5rem;
-    --h3-font-size: 1.25rem;
-    --normal-font-size: 1rem;
-    --small-font-size: .875rem;
-    --smaller-font-size: .813rem;
-  }
-}
-/*=============== BASE ===============*/
-* {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-}
-
-body {
-  font-family: var(--body-font);
-  font-size: var(--normal-font-size);
-  background-color: var(--body-color);
-  color: var(--text-color);
-  transition: 0.3s;
-  /* For animation dark mode */
-}
-
-h1,
-h2,
-h3 {
-  color: var(--title-color);
-  font-weight: 600;
-}
-
-ul {
-  list-style: none;
-}
-
-a {
-  text-decoration: none;
-}
-
-img {
-  max-width: 100%;
-  height: auto;
-}
-
-/*=============== THEME ===============*/
-/*========== Variables Dark theme ==========*/
-/*========== 
-    Color changes in some parts of 
-    the website, in light theme
-==========*/
-/*=============== REUSABLE CSS CLASSES ===============*/
-.container {
-  max-width: 968px;
-  margin-left: 1.5rem;
-  margin-right: 1.5rem;
-}
-
-.grid {
-  display: grid;
-  gap: 1.5rem;
-}
-
-/*=============== PROFILE ===============*/
-/*=============== BUTTONS ===============*/
-/*=============== FILTERS TABS ===============*/
-/*=============== PROJECTS ===============*/
-/*=============== SKILLS ===============*/
-/* Hide and show projects & skills */
-/* Activate button filter */
-/*=============== FOOTER ===============*/
-/*=============== SCROLL BAR ===============*/
-/*=============== BREAKPOINTS ===============*/
-/* For small devices */
-/* For medium devices */
+/*=============== GOOGLE FONTS ===============*/
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
+/*=============== VARIABLES CSS ===============*/
+:root {
+  /*========== Colors ==========*/
+  /*Color mode HSL(hue, saturation, lightness)*/
+  /*
+      Blue: hsl(207, 90%, 61%)
+      Purple: hsl(250, 66%, 75%)
+      Pink: hsl(356, 66%, 75%)
+      Teal: hsl(174, 63%, 62%)
+  */
+  --hue: 207;
+  --sat: 90%;
+  --lig: 61%;
+  --first-color: hsl(var(--hue), var(--sat), var(--lig));
+  --first-color-alt: hsl(var(--hue), var(--sat), 57%);
+  /* -4% */
+  --title-color: hsl(var(--hue), 12%, 15%);
+  --text-color: hsl(var(--hue), 12%, 45%);
+  --text-color-light: hsl(var(--hue), 8%, 75%);
+  --text-color-lighten: hsl(var(--hue), 8%, 92%);
+  --body-color: hsl(var(--hue), 100%, 99%);
+  --container-color: #fff;
+  /*========== Font and typography ==========*/
+  /*.5rem = 8px | 1rem = 16px ...*/
+  --body-font: "Poppins", sans-serif;
+  --h2-font-size: 1.25rem;
+  --h3-font-size: 1rem;
+  --normal-font-size: .938rem;
+  --small-font-size: .813rem;
+  --smaller-font-size: .75rem;
+}
+
+@media screen and (min-width: 968px) {
+  :root {
+    --h2-font-size: 1.5rem;
+    --h3-font-size: 1.25rem;
+    --normal-font-size: 1rem;
+    --small-font-size: .875rem;
+    --smaller-font-size: .813rem;
+  }
+}
+/*=============== BASE ===============*/
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+body {
+  font-family: var(--body-font);
+  font-size: var(--normal-font-size);
+  background-color: var(--body-color);
+  color: var(--text-color);
+  transition: 0.3s;
+  /* For animation dark mode */
+}
+
+h1,
+h2,
+h3 {
+  color: var(--title-color);
+  font-weight: 600;
+}
+
+ul {
+  list-style: none;
+}
+
+a {
+  text-decoration: none;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+/*=============== THEME ===============*/
+/*========== Variables Dark theme ==========*/
+/*========== 
+    Color changes in some parts of 
+    the website, in light theme
+==========*/
+/*=============== REUSABLE CSS CLASSES ===============*/
+.container {
+  max-width: 968px;
+  margin-left: 1.5rem;
+  margin-right: 1.5rem;
+}
+
+.grid {
+  display: grid;
+  gap: 1.5rem;
+}
+
+/*=============== PROFILE ===============*/
+/*=============== BUTTONS ===============*/
+/*=============== FILTERS TABS ===============*/
+/*=============== PROJECTS ===============*/
+/*=============== SKILLS ===============*/
+/* Hide and show projects & skills */
+/* Activate button filter */
+/*=============== FOOTER ===============*/
+/*=============== SCROLL BAR ===============*/
+/*=============== BREAKPOINTS ===============*/
+/* For small devices */
+/* For medium devices */
 /* For large devices *//*# sourceMappingURL=index.css.map */
\ No newline at end of file
diff --git a/responsive-mini-portfolio(html-css-js)/css/index.css.map b/portfolio-mini/css/index.css.map
similarity index 100%
rename from responsive-mini-portfolio(html-css-js)/css/index.css.map
rename to portfolio-mini/css/index.css.map
diff --git a/responsive-mini-portfolio(html-css-js)/css/styles.css b/portfolio-mini/css/styles.css
similarity index 100%
rename from responsive-mini-portfolio(html-css-js)/css/styles.css
rename to portfolio-mini/css/styles.css
diff --git a/responsive-mini-portfolio(html-css-js)/index.html b/portfolio-mini/index.html
similarity index 100%
rename from responsive-mini-portfolio(html-css-js)/index.html
rename to portfolio-mini/index.html
diff --git a/responsive-mini-portfolio(html-css-js)/preview.png b/portfolio-mini/preview.png
similarity index 100%
rename from responsive-mini-portfolio(html-css-js)/preview.png
rename to portfolio-mini/preview.png
diff --git a/responsive-portfolio(html-js-css)/JS/script.js b/responsive-portfolio(html-js-css)/JS/script.js
deleted file mode 100644
index e69de29..0000000
diff --git a/responsive-portfolio(html-js-css)/index.html b/responsive-portfolio(html-js-css)/index.html
deleted file mode 100644
index 10b1162..0000000
--- a/responsive-portfolio(html-js-css)/index.html
+++ /dev/null
@@ -1,23 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-	<head>
-		<meta charset="UTF-8">
-		<meta name="viewport" content="width=device-width, initial-scale=1.0">
-		<meta name="description" content=" introduction to this website">
-		<meta name="keyword" content="keyword to this website">
-		<meta name="author" content=" company's name">
-		<meta name="color-scheme" content=" light dark">
-		<meta http-equiv="X-UA-Compatible" content="IE=edge">
-		<title>responsive portfolio</title>
-		<link rel="stylesheet" href="./CSS/style.css">
-		<script defer src="index.js"></script>
-		<noscript>this file runs on javascript, kindly activate the javascript comand</noscript>
-		<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
-	</head>
-
-	<body>
-		<script src="JS/script.js"></script>
-	</body>
-
-</html>
\ 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