updated cv

and can be expanded)

assets/css/style.css

@@ -10,16 +10,85 @@
 # General
 --------------------------------------------------------------*/
 :root {
-  --highlight: #ffb727;
+    color-scheme: dark;
+    /* --highlight: #ffb727; */
+    --highlight: #f3a200;
+    --highlight-alt: #ffc85a;
+
     --background: #fff;
+
+    --border: var(--background);
+
+    --btn-bg: var(--highlight);
+    --btn-bg-hover: #ffc550;
+    --btn-bg-hover-2: #f3a200;
+
     --text-color: #444;
-  --text-color-alt: #fff;
+    --text-color-alt: var(--background);
     --text-color-alt-2: #eee;
+
+    --section-title-color: #3b434a;
+    --section-title-color-back: #3b434a17;
+
+    --progress-text-color: #3b434a;
+    --progress-background: #e6e8eb;
+
+    --resume-time-background: #eef0f2;
+    --resume-border: #82909c;
+    --resume-btn-border: var(--highlight);
+    --resume-btn-hover: var(--background);
+
+    --skill-title: #111;
+    --skill-icon-bg: #fff4df;
+
+    --contact-title-icon-bg: #fff6e4;
+    --contact-title: #777;
+    --contact-box-shadow: rgba(214, 215, 216, 0.6);
+    --contact-icon: #687683;
+    --contact-icon-border: #dde1e4;
+}
+
+body.dark {
+    --highlight: #ffbc35;
+    --highlight-alt: #ffc859;
+
+    --background: rgb(24, 26, 27);
+
+    --border: #303436;
+
+    --btn-bg: #b57800;
+    --btn-bg-hover: #f3a200;
+    --btn-bg-hover-2: #f3a200;
+
+    --text-color: rgb(189, 183, 175);
+    --text-color-alt: #e8e6e5;
+    --text-color-alt-2: #e8e6e5;
+
+    --section-title-color: #beb8b0;
+    --section-title-color-back: #beb8b017;
+
+    --progress-text-color: #beb8b0;
+    --progress-background: #252829;
+
+    --resume-time-background: #202325;
+    --resume-border: #50565a;
+    --resume-btn-border: #a76f00;
+    --resume-btn-hover: var(--text-color-alt);
+
+    --skill-title: #dddad6;
+    --skill-icon-bg: #462e00;
+
+    --contact-title-icon-bg: #432d00;
+    --contact-title: #9d9488;
+    --contact-box-shadow: rgba(45, 50, 52, 0.6);
+    --contact-icon: #9e9589;
+    --contact-icon-border: #393d40;
 }
 
 body {
     font-family: "Open Sans", sans-serif;
     color: var(--text-color);
+    background: var(--background);
     overflow-x: hidden;
 }
 
@@ -29,7 +98,7 @@ a {
 }
 
 a:hover {
-  color: #ffc85a;
+    color: var(--highlight-alt);
     text-decoration: none;
 }
 
@@ -43,9 +112,12 @@ h6 {
 }
 
 .prevent-select {
-  -webkit-user-select: none; /* Safari */
-  -ms-user-select: none; /* IE 10 and IE 11 */
-  user-select: none; /* Standard syntax */
+    -webkit-user-select: none;
+    /* Safari */
+    -ms-user-select: none;
+    /* IE 10 and IE 11 */
+    user-select: none;
+    /* Standard syntax */
 }
 
 /*--------------------------------------------------------------
@@ -58,7 +130,7 @@ h6 {
     right: 15px;
     bottom: 15px;
     z-index: 996;
-  background: var(--highlight);
+    background: var(--btn-bg);
     width: 40px;
     height: 40px;
     border-radius: 4px;
@@ -72,7 +144,7 @@ h6 {
 }
 
 .back-to-top:hover {
-  background: #ffc550;
+    background: var(--btn-bg-hover);
     color: var(--text-color-alt);
 }
 
@@ -126,7 +198,8 @@ h6 {
 }
 
 .navbar a,
-.navbar a:focus {
+.navbar a:focus,
+.navbar li>i {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -149,10 +222,12 @@ h6 {
 }
 
 .navbar a:hover,
+.navbar li>i:hover,
 .navbar .active,
 .navbar .active:focus,
 .navbar li:hover>a {
     color: var(--highlight);
+    cursor: pointer;
 }
 
 .navbar .dropdown ul {
@@ -165,7 +240,7 @@ h6 {
     z-index: 99;
     opacity: 0;
     visibility: hidden;
-  background: #fff;
+    background: var(--background);
     box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
     transition: 0.3s;
     border-radius: 4px;
@@ -227,7 +302,7 @@ h6 {
 * Mobile Navigation 
 */
 .mobile-nav-toggle {
-  color: #fff;
+    color: var(--background);
     font-size: 28px;
     cursor: pointer;
     display: none;
@@ -272,7 +347,7 @@ h6 {
     left: 15px;
     padding: 10px 0;
     border-radius: 10px;
-  background-color: #fff;
+    background-color: var(--background);
     overflow-y: auto;
     transition: 0.3s;
 }
@@ -303,7 +378,7 @@ h6 {
     z-index: 99;
     opacity: 1;
     visibility: visible;
-  background: #fff;
+    background: var(--background);
     box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
 }
 
@@ -443,7 +518,7 @@ section {
     text-transform: uppercase;
     margin-bottom: 20px;
     padding-bottom: 0;
-  color: #3b434a;
+    color: var(--section-title-color);
     position: relative;
     z-index: 2;
 }
@@ -451,7 +526,7 @@ section {
 .section-title span {
     position: absolute;
     top: 30px;
-  color: #3b434a17;
+    color: var(--section-title-color-back);
     left: 0;
     right: 0;
     z-index: 1;
@@ -478,68 +553,6 @@ section {
     }
 }
 
-/*--------------------------------------------------------------
-# Breadcrumbs
---------------------------------------------------------------*/
-.breadcrumbs {
-  padding: 20px 0;
-  background-color: #f4f5f6;
-  min-height: 40px;
-  margin-top: 78px;
-}
-
-@media (max-width: 992px) {
-  .breadcrumbs {
-    margin-top: 60px;
-  }
-}
-
-.breadcrumbs h2 {
-  font-size: 24px;
-  font-weight: 300;
-  margin: 0;
-}
-
-@media (max-width: 992px) {
-  .breadcrumbs h2 {
-    margin: 0 0 10px 0;
-  }
-}
-
-.breadcrumbs ol {
-  display: flex;
-  flex-wrap: wrap;
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  font-size: 14px;
-}
-
-.breadcrumbs ol li + li {
-  padding-left: 10px;
-}
-
-.breadcrumbs ol li + li::before {
-  display: inline-block;
-  padding-right: 10px;
-  color: #6c757d;
-  content: "/";
-}
-
-@media (max-width: 768px) {
-  .breadcrumbs .d-flex {
-    display: block !important;
-  }
-
-  .breadcrumbs ol {
-    display: block;
-  }
-
-  .breadcrumbs ol li {
-    display: inline-block;
-  }
-}
-
 /*--------------------------------------------------------------
 # About Me
 --------------------------------------------------------------*/
@@ -620,7 +633,7 @@ section {
 }
 
 .about .image {
-  background: url("../img/me.jpg") center center no-repeat;
+    background: url("../img/me2-low.jpg") top center no-repeat;
     background-size: cover;
     min-height: 500px;
 }
@@ -643,7 +656,7 @@ section {
     display: block;
     font-weight: 700;
     font-family: "Raleway", sans-serif;
-  color: #3b434a;
+    color: var(--progress-text-color);
 }
 
 .progress .skill .val {
@@ -652,7 +665,7 @@ section {
 }
 
 .progress-bar-wrap {
-  background: #e6e8eb;
+    background: var(--progress-background);
 }
 
 .progress-bar {
@@ -669,6 +682,45 @@ section {
     display: flex;
     flex-direction: column;
     align-items: center;
+    overflow: visible;
+}
+
+.resume-content {
+    max-height: 110vh;
+    overflow-y: hidden;
+}
+
+.resume-content.expanded {
+    display:block;
+    max-height: none;
+    overflow-y: visible;
+}
+
+.resume-fade {
+    position: absolute;
+    display:flex;
+    justify-content: center;
+    bottom: 0;
+    width: 100%;
+    height: 50px;
+    background: linear-gradient(to bottom, transparent, var(--background) 50%);
+    pointer-events: none;
+}
+
+.resume-fade.expanded {
+    background: var(--background);
+}
+
+.resume-btn {
+    position: absolute;
+    bottom: 0;
+    font-size: 1em !important;
+
+    border: none;
+    text-align: center;
+    z-index: 100;
+    box-shadow: none !important;
+    pointer-events: auto;
 }
 
 .resume .resume-title {
@@ -676,13 +728,13 @@ section {
     font-weight: 700;
     margin-top: 20px;
     margin-bottom: 20px;
-  color: #3b434a;
+    color: var(--section-title-color);
 }
 
 .resume .resume-item {
     padding: 0 0 20px 20px;
-  margin-top: -2px;
-  border-left: 2px solid #82909c;
+    margin-left: 8px;
+    border-left: 2px solid var(--resume-border);
     position: relative;
 }
 
@@ -697,7 +749,7 @@ section {
 
 .resume .resume-item h5 {
     font-size: 16px;
-  background: #eef0f2;
+    background: var(--resume-time-background);
     padding: 5px 15px;
     display: inline-block;
     font-weight: 600;
@@ -725,50 +777,91 @@ section {
     border-radius: 50px;
     left: -9px;
     top: 0;
-  background: white;
+    background: var(--background);
     border: 2px solid var(--highlight);
 }
 
 .resume .resume-item.secondary::before {
-  border-color: #82909c;
+    border-color: var(--resume-border);
 }
 
-.btn {
+.resume .btn {
     font-size: 20px;
-  border-color: var(--highlight);
+    border-color: var(--resume-btn-border);
     color: var(--highlight);
-  transition: background-color 1s;
+    transition: 0.3s;
 }
 
-.btn:hover {
-  transition: background-color, color, border-color;
-  color: #fff;
-  background-color: var(--highlight);
+.resume .btn:hover {
+    transition: 0.3s;
+    color: var(--resume-btn-hover);
+    background-color: var(--btn-bg);
 }
 
 /*--------------------------------------------------------------
 # My Skills
 --------------------------------------------------------------*/
+.skills #skills-filters {
+    list-style: none;
+    margin-bottom: 20px;
+    overflow-x: auto;
+}
+
+.skills #skills-filters li {
+    cursor: pointer;
+    display: inline-block;
+    margin: 0 10px 10px 10px;
+    font-size: 15px;
+    font-weight: 600;
+    line-height: 1;
+    padding: 7px 10px;
+    text-transform: uppercase;
+    color: var(--text-color);
+    transition: all 0.3s ease-in-out;
+    border: 2px solid var(--border);
+}
+
+.skills #skills-filters li:hover,
+.skills #skills-filters li.filter-active {
+    color: #f3a200;
+    border-color: var(--highlight);
+}
+
+.skills .skill-item {
+    display: flex;
+    align-items: stretch;
+}
+
 .skills .icon-box {
     padding: 30px;
     position: relative;
     overflow: hidden;
-  background: #fff;
+    background: var(--background);
     box-shadow: 0 10px 29px 0 rgba(68, 88, 144, 0.1);
     transition: all 0.3s ease-in-out;
     text-align: center;
-  border: 1px solid #fff;
+    border: 1px solid var(--border);
+}
+
+.skills .icon-box p {
+    hyphens: auto;
+    text-align: justify;
 }
 
 .skills .icon {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
     margin: 0 auto 20px auto;
-  padding-top: 17px;
-  display: inline-block;
-  text-align: center;
+    /* padding-top: 17px; */
+    /* display: inline-block; */
+    /* text-align: center; */
     border-radius: 50%;
     width: 72px;
     height: 72px;
-  background: #fff4df;
+    background: var(--skill-icon-bg);
+    transition: 0.3s;
 }
 
 .skills .icon i {
@@ -777,6 +870,11 @@ section {
     color: var(--highlight);
 }
 
+.skills .icon img {
+    max-height: 36px;
+    max-width: 36px;
+}
+
 .skills .title {
     font-weight: 700;
     margin-bottom: 15px;
@@ -784,7 +882,7 @@ section {
 }
 
 .skills .title a {
-  color: #111;
+    color: var(--skill-title);
     transition: 0.3s;
 }
 
@@ -834,7 +932,7 @@ section {
 
 .testimonials .testimonial-item {
     text-align: center;
-  color: #fff;
+    color: var(--text-color-alt);
 }
 
 .testimonials .testimonial-item .testimonial-img {
@@ -848,7 +946,7 @@ section {
     font-size: 20px;
     font-weight: bold;
     margin: 10px 0 5px 0;
-  color: #fff;
+    color: var(--text-color-alt);
 }
 
 .testimonials .testimonial-item h4 {
@@ -879,7 +977,7 @@ section {
 .testimonials .testimonial-item p {
     font-style: italic;
     margin: 0 auto 15px auto;
-  color: #eee;
+    color: var(--text-color-alt-2);
     line-height: 2;
 }
 
@@ -913,6 +1011,15 @@ section {
     margin-bottom: 20px;
 }
 
+.portfolio video, .portfolio img{
+    max-width: 100%;
+}
+
+.portfolio video {
+    display: block; /* html video tags have a phantom bottom margin, this is the only way to remove it */
+    margin: auto; /* to center the video inside the container */
+}
+
 .portfolio #portfolio-flters li {
     cursor: pointer;
     display: inline-block;
@@ -924,7 +1031,7 @@ section {
     text-transform: uppercase;
     color: var(--text-color);
     transition: all 0.3s ease-in-out;
-  border: 2px solid #fff;
+    border: 2px solid var(--border);
 }
 
 .portfolio #portfolio-flters li:hover,
@@ -938,7 +1045,10 @@ section {
 }
 
 .portfolio .portfolio-item .portfolio-img {
+    text-align: center;
     overflow: hidden;
+    border: 1px solid var(--background);
+    transition: 0.3s;
 }
 
 .portfolio .portfolio-item .portfolio-img img {
@@ -949,35 +1059,48 @@ section {
     opacity: 0;
     position: absolute;
     left: 15px;
-  bottom: 0;
+    bottom: 3px;
     z-index: 3;
     right: 15px;
     transition: all ease-in-out 0.3s;
-  background: rgba(0, 0, 0, 0.5);
+    background: rgba(0, 0, 0, 0.9);
     padding: 10px 15px;
 }
 
 .portfolio .portfolio-item .portfolio-info h4 {
     font-size: 18px;
-  color: #fff;
+    color: var(--text-color-alt);
     font-weight: 600;
-  color: #fff;
     margin-bottom: 0px;
 }
 
 .portfolio .portfolio-item .portfolio-info p {
-  color: rgba(255, 255, 255, 0.8);
+    color: var(--text-color-alt);
     font-size: 14px;
     margin-bottom: 0;
 }
 
+.portfolio .portfolio-item .portfolio-info div {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.portfolio .portfolio-item .portfolio-info div a {
+    display: flex;
+    align-items: center;
+}
+
+.portfolio .portfolio-item .portfolio-info div p .br {
+    display: block;
+    margin-bottom: 0.5em;
+}
+
 .portfolio .portfolio-item .portfolio-info .preview-link,
 .portfolio .portfolio-item .portfolio-info .details-link {
-  position: absolute;
-  right: 40px;
     font-size: 24px;
-  top: calc(50% - 18px);
-  color: #fff;
+    color: var(--text-color-alt);
     transition: 0.3s;
 }
 
@@ -986,206 +1109,22 @@ section {
     color: #ffc041;
 }
 
-.portfolio .portfolio-item .portfolio-info .details-link {
-  right: 10px;
-}
-
-.portfolio .portfolio-item:hover .portfolio-img img {
-  transform: scale(1.2);
+.portfolio .portfolio-item:hover .portfolio-img {
+    /* transform: scale(1.2); */
+    border-color: var(--highlight);
 }
 
 .portfolio .portfolio-item:hover .portfolio-info {
     opacity: 1;
 }
 
-/*--------------------------------------------------------------
-# Portfolio Details
---------------------------------------------------------------*/
-.portfolio-details {
-  padding-top: 40px;
-}
-
-.portfolio-details .portfolio-details-slider img {
-  width: 100%;
-}
-
-.portfolio-details .portfolio-details-slider .swiper-pagination {
-  margin-top: 20px;
-  position: relative;
-}
-
-.portfolio-details
-  .portfolio-details-slider
-  .swiper-pagination
-  .swiper-pagination-bullet {
-  width: 12px;
-  height: 12px;
-  background-color: #fff;
-  opacity: 1;
-  border: 1px solid var(--highlight);
-}
-
-.portfolio-details
-  .portfolio-details-slider
-  .swiper-pagination
-  .swiper-pagination-bullet-active {
-  background-color: var(--highlight);
-}
-
-.portfolio-details .portfolio-info {
-  padding: 30px;
-  box-shadow: 0px 0 30px rgba(59, 67, 74, 0.08);
-}
-
-.portfolio-details .portfolio-info h3 {
-  font-size: 22px;
-  font-weight: 700;
-  margin-bottom: 20px;
-  padding-bottom: 20px;
-  border-bottom: 1px solid #eee;
-}
-
-.portfolio-details .portfolio-info ul {
-  list-style: none;
-  padding: 0;
-  font-size: 15px;
-}
-
-.portfolio-details .portfolio-info ul li + li {
-  margin-top: 10px;
-}
-
-.portfolio-details .portfolio-description {
-  padding-top: 30px;
-}
-
-.portfolio-details .portfolio-description h2 {
-  font-size: 26px;
-  font-weight: 700;
-  margin-bottom: 20px;
-}
-
-.portfolio-details .portfolio-description p {
-  padding: 0;
-}
-
-/*--------------------------------------------------------------
-# Pricing
---------------------------------------------------------------*/
-.pricing .box {
-  padding: 20px;
-  background: #fff;
-  text-align: center;
-  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.12);
-  border-radius: 5px;
-  position: relative;
-  overflow: hidden;
-}
-
-.pricing h3 {
-  font-weight: 400;
-  margin: -20px -20px 20px -20px;
-  padding: 20px 15px;
-  font-size: 16px;
-  font-weight: 600;
-  color: #777777;
-  background: #f8f8f8;
-}
-
-.pricing h4 {
-  font-size: 36px;
-  color: var(--highlight);
-  font-weight: 600;
-  font-family: "Open Sans", sans-serif;
-  margin-bottom: 20px;
-}
-
-.pricing h4 sup {
-  font-size: 20px;
-  top: -12px;
-  left: -3px;
-}
-
-.pricing h4 span {
-  color: #bababa;
-  font-size: 16px;
-  font-weight: 300;
-}
-
-.pricing ul {
-  padding: 0;
-  list-style: none;
-  color: var(--text-color);
-  text-align: center;
-  line-height: 20px;
-  font-size: 14px;
-}
-
-.pricing ul li {
-  padding-bottom: 16px;
-}
-
-.pricing ul i {
-  color: var(--highlight);
-  font-size: 18px;
-  padding-right: 4px;
-}
-
-.pricing ul .na {
-  color: #ccc;
-  text-decoration: line-through;
-}
-
-.pricing .btn-wrap {
-  margin: 20px -20px -20px -20px;
-  padding: 20px 15px;
-  background: #f8f8f8;
-  text-align: center;
-}
-
-.pricing .btn-buy {
-  background: var(--highlight);
-  display: inline-block;
-  padding: 8px 35px;
-  border-radius: 4px;
-  color: #fff;
-  transition: none;
-  font-size: 14px;
-  font-weight: 400;
-  font-family: "Raleway", sans-serif;
-  font-weight: 600;
-  transition: 0.3s;
-}
-
-.pricing .btn-buy:hover {
-  background: #ffc85a;
-}
-
-.pricing .featured h3 {
-  color: #fff;
-  background: var(--highlight);
-}
-
-.pricing .advanced {
-  width: 200px;
-  position: absolute;
-  top: 18px;
-  right: -68px;
-  transform: rotate(45deg);
-  z-index: 1;
-  font-size: 14px;
-  padding: 1px 0 3px 0;
-  background: var(--highlight);
-  color: #fff;
-}
-
 /*--------------------------------------------------------------
 # Contact Me
 --------------------------------------------------------------*/
 .contact .info-box {
     color: var(--text-color);
     text-align: center;
-  box-shadow: 0 0 30px rgba(214, 215, 216, 0.6);
+    box-shadow: 0 0 30px var(--contact-box-shadow);
     padding: 20px 0 30px 0;
 }
 
@@ -1194,12 +1133,12 @@ section {
     color: var(--highlight);
     border-radius: 50%;
     padding: 15px;
-  background: #fff6e4;
+    background: var(--contact-title-icon-bg);
 }
 
 .contact .info-box h3 {
     font-size: 20px;
-  color: #777777;
+    color: var(--contact-title);
     font-weight: 700;
     margin: 10px 0;
 }
@@ -1220,13 +1159,13 @@ section {
 .contact .social-links a {
     font-size: 18px;
     display: inline-block;
-  color: #687683;
+    color: var(--contact-icon);
     line-height: 1;
     margin: 0 8px;
     transition: 0.3s;
     padding: 14px;
     border-radius: 50px;
-  border: 1px solid #dde1e4;
+    border: 1px solid var(--contact-icon-border);
 }
 
 .contact .email a {
@@ -1236,106 +1175,9 @@ section {
 }
 
 .contact .social-links a:hover {
-  color: #fff;
-  border-color: var(--highlight);
-  background: var(--highlight);
-}
-
-.contact .php-email-form {
-  box-shadow: 0 0 30px rgba(214, 215, 216, 0.6);
-  padding: 27px;
-}
-
-.contact .php-email-form .validate {
-  display: none;
-  color: red;
-  margin: 0 0 15px 0;
-  font-weight: 400;
-  font-size: 13px;
-}
-
-.contact .php-email-form .error-message {
-  display: none;
-  color: #fff;
-  background: #ed3c0d;
-  text-align: left;
-  padding: 15px;
-  font-weight: 600;
-}
-
-.contact .php-email-form .error-message br + br {
-  margin-top: 25px;
-}
-
-.contact .php-email-form .sent-message {
-  display: none;
-  color: #fff;
-  background: #18d26e;
-  text-align: center;
-  padding: 15px;
-  font-weight: 600;
-}
-
-.contact .php-email-form .loading {
-  display: none;
-  background: #fff;
-  text-align: center;
-  padding: 15px;
-}
-
-.contact .php-email-form .loading:before {
-  content: "";
-  display: inline-block;
-  border-radius: 50%;
-  width: 24px;
-  height: 24px;
-  margin: 0 10px -6px 0;
-  border: 3px solid #18d26e;
-  border-top-color: #eee;
-  animation: animate-loading 1s linear infinite;
-}
-
-.contact .php-email-form input,
-.contact .php-email-form textarea {
-  border-radius: 0;
-  box-shadow: none;
-  font-size: 14px;
-}
-
-.contact .php-email-form input::focus,
-.contact .php-email-form textarea::focus {
-  background-color: var(--highlight);
-}
-
-.contact .php-email-form input {
-  padding: 10px 15px;
-}
-
-.contact .php-email-form textarea {
-  padding: 12px 15px;
-}
-
-.contact .php-email-form button[type="submit"] {
-  background: var(--highlight);
-  border: 0;
-  padding: 10px 24px;
-  color: #fff;
-  transition: 0.4s;
-  border-radius: 5px;
-}
-
-.contact .php-email-form button[type="submit"]:hover {
-  background: #ffc85a;
-}
-
-@keyframes animate-loading {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
+    color: var(--text-color-alt-2);
+    border-color: var(--btn-bg);
+    background: var(--btn-bg);
 }
 
 /*--------------------------------------------------------------
@@ -1344,7 +1186,8 @@ section {
 #footer {
     background: url("../img/footer-bg.jpg") top center no-repeat;
     background-size: cover;
-  color: #fff;
+    background-position: center center;
+    color: var(--text-color-alt-2);
     font-size: 14px;
     text-align: center;
     padding: 80px 0;
@@ -1368,7 +1211,7 @@ section {
 #footer h3 {
     font-size: 36px;
     font-weight: 700;
-  color: #fff;
+    color: var(--text-color-alt-2);
     position: relative;
     font-family: "Satisfy", serif;
     padding: 0;
@@ -1389,8 +1232,8 @@ section {
 #footer .social-links a {
     font-size: 18px;
     display: inline-block;
-  background: var(--highlight);
-  color: #fff;
+    background: var(--btn-bg);
+    color: var(--text-color-alt-2);
     line-height: 1;
     padding: 8px 0;
     margin-right: 4px;
@@ -1402,8 +1245,8 @@ section {
 }
 
 #footer .social-links a:hover {
-  background: #f3a200;
-  color: #fff;
+    background: var(--btn-bg-hover-2);
+    color: var(--text-color-alt-2);
     text-decoration: none;
 }
 

assets/js/main.js

@@ -135,7 +135,7 @@
         this.nextElementSibling.classList.toggle("dropdown-active");
       }
     },
-        true,
+    true
   );
 
   /**
@@ -158,9 +158,22 @@
         scrollto(this.hash);
       }
     },
-        true,
+    true
   );
 
+  on("click", "#resume-toggle", e => {
+      console.log("sup")
+      const sec = select("#resume-section");
+      const btn = e.target;
+      sec.classList.toggle("expanded");
+      select(".resume-fade").classList.toggle("expanded");
+      if (sec.classList.contains("expanded"))
+          btn.innerHTML = 'Hide <i class="bi bi-chevron-up"></i>';
+      else
+          btn.innerHTML = 'Expand <i class="bi bi-chevron-down"></i>';
+      AOS.refresh();
+  })
+
   /**
    * Scroll with ofset on page load with hash links in the url
    */
@@ -214,10 +227,39 @@
     },
   });
 
+  window.addEventListener("load", () => {
+    /**
+     * Skills isotope and filter
+     */
+    let skillsContainer = select(".skills-container");
+    if (skillsContainer) {
+      let skillsIsotope = new Isotope(skillsContainer, {
+        itemSelector: ".skill-item",
+      });
+
+      let skillsFilters = select("#skills-filters li", true);
+
+      on(
+        "click",
+        "#skills-filters li",
+        function (e) {
+          e.preventDefault();
+          skillsFilters.forEach(function (el) {
+            el.classList.remove("filter-active");
+          });
+          this.classList.add("filter-active");
+
+          skillsIsotope.arrange({
+            filter: this.getAttribute("data-filter"),
+          });
+        },
+        true
+      );
+    }
+
     /**
      * Porfolio isotope and filter
      */
-    window.addEventListener("load", () => {
     let portfolioContainer = select(".portfolio-container");
     if (portfolioContainer) {
       let portfolioIsotope = new Isotope(portfolioContainer, {
@@ -240,13 +282,13 @@
             filter: this.getAttribute("data-filter"),
           });
         },
-                true,
+        true
       );
     }
     // let horizontal_aoss = document.querySelectorAll("[data-aos~='left'], [data-aos~='right']")
     if (window.matchMedia("(max-width: 768px)").matches) {
       let horizontal_aoss = document.querySelectorAll(
-                `[data-aos$="left"], [data-aos$="right"]`,
+        `[data-aos$="left"], [data-aos$="right"]`
       );
       horizontal_aoss.forEach((el) => el.setAttribute("data-aos", "fade-up"));
     }
@@ -276,9 +318,38 @@
       clickable: true,
     },
   });
+  if (localStorage.getItem("theme") == "light") {
+    toggleDarkMode();
+  }
 
-    /**
-     * Initiate Pure Counter
-     */
-    new PureCounter();
+    // Set age correctly (cuz sbatti farlo ogni
+    // anno, toi meme tu sais)
+    let age_span = document.querySelector("#age");
+    age_span.textContent = calculateAge("1999-10-15");
 })();
+
+function toggleDarkMode() {
+  let dark_indicator = document.querySelector("#navbar i");
+  dark_indicator.classList.toggle("bi-moon-stars-fill");
+  dark_indicator.classList.toggle("bi-sun-fill");
+
+  document.body.classList.toggle("dark");
+
+  let theme = document.body.classList.contains("dark") ? "dark" : "light";
+  document.documentElement.style.setProperty("color-scheme", theme);
+  localStorage.setItem("theme", theme);
+}
+
+function calculateAge(birthDate) {
+    const today = new Date();
+    const birth = new Date(birthDate);
+    let age = today.getFullYear() - birth.getFullYear();
+    const monthDifference = today.getMonth() - birth.getMonth();
+
+    // Check if the birthday has not occurred yet this year
+    if (monthDifference < 0 || (monthDifference === 0 && today.getDate() < birth.getDate())) {
+        age--;
+    }
+
+    return age;
+}

inner-page.html

@@ -1,142 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="utf-8">
-  <meta content="width=device-width, initial-scale=1.0" name="viewport">
-
-  <title>Inner Page - Laura Bootstrap Template</title>
-  <meta content="" name="description">
-  <meta content="" name="keywords">
-
-  <!-- Favicons -->
-  <link href="assets/img/favicon.png" rel="icon">
-  <link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
-
-  <!-- Google Fonts -->
-  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Satisfy" rel="stylesheet">
-
-  <!-- Vendor CSS Files -->
-  <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
-  <link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
-  <link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
-  <link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
-  <link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
-
-  <!-- Template Main CSS File -->
-  <link href="assets/css/style.css" rel="stylesheet">
-
-  <!-- =======================================================
-  * Template Name: Laura
-  * Updated: Jul 27 2023 with Bootstrap v5.3.1
-  * Template URL: https://bootstrapmade.com/laura-free-creative-bootstrap-theme/
-  * Author: BootstrapMade.com
-  * License: https://bootstrapmade.com/license/
-  ======================================================== -->
-</head>
-
-<body>
-
-  <!-- ======= Header ======= -->
-  <header id="header" class="fixed-top d-flex justify-content-center align-items-center ">
-
-    <nav id="navbar" class="navbar">
-      <ul>
-        <li><a class="nav-link scrollto " href="#hero">Home</a></li>
-        <li><a class="nav-link scrollto" href="#about">About</a></li>
-        <li><a class="nav-link scrollto" href="#resume">Resume</a></li>
-        <li><a class="nav-link scrollto" href="#services">Services</a></li>
-        <li><a class="nav-link scrollto " href="#portfolio">Portfolio</a></li>
-        <li class="dropdown"><a href="#"><span>Drop Down</span> <i class="bi bi-chevron-down"></i></a>
-          <ul>
-            <li><a href="#">Drop Down 1</a></li>
-            <li class="dropdown"><a href="#"><span>Deep Drop Down</span> <i class="bi bi-chevron-right"></i></a>
-              <ul>
-                <li><a href="#">Deep Drop Down 1</a></li>
-                <li><a href="#">Deep Drop Down 2</a></li>
-                <li><a href="#">Deep Drop Down 3</a></li>
-                <li><a href="#">Deep Drop Down 4</a></li>
-                <li><a href="#">Deep Drop Down 5</a></li>
-              </ul>
-            </li>
-            <li><a href="#">Drop Down 2</a></li>
-            <li><a href="#">Drop Down 3</a></li>
-            <li><a href="#">Drop Down 4</a></li>
-          </ul>
-        </li>
-        <li><a class="nav-link scrollto" href="#contact">Contact</a></li>
-      </ul>
-      <i class="bi bi-list mobile-nav-toggle"></i>
-    </nav><!-- .navbar -->
-
-  </header><!-- End Header -->
-
-  <main id="main">
-
-    <!-- ======= Breadcrumbs ======= -->
-    <section class="breadcrumbs">
-      <div class="container">
-
-        <div class="d-flex justify-content-between align-items-center">
-          <h2>Inner Page</h2>
-          <ol>
-            <li><a href="index.html">Home</a></li>
-            <li>Inner Page</li>
-          </ol>
-        </div>
-
-      </div>
-    </section><!-- End Breadcrumbs -->
-
-    <section class="inner-page">
-      <div class="container">
-        <p>
-          Example inner page template
-        </p>
-      </div>
-    </section>
-
-  </main><!-- End #main -->
-
-  <!-- ======= Footer ======= -->
-  <footer id="footer">
-    <div class="container">
-      <h3>Laura Thomson</h3>
-      <p>Et aut eum quis fuga eos sunt ipsa nihil. Labore corporis magni eligendi fuga maxime saepe commodi placeat.</p>
-      <div class="social-links">
-        <a href="#" class="twitter"><i class="bx bxl-twitter"></i></a>
-        <a href="#" class="facebook"><i class="bx bxl-facebook"></i></a>
-        <a href="#" class="instagram"><i class="bx bxl-instagram"></i></a>
-        <a href="#" class="google-plus"><i class="bx bxl-skype"></i></a>
-        <a href="#" class="linkedin"><i class="bx bxl-linkedin"></i></a>
-      </div>
-      <div class="copyright">
-        &copy; Copyright <strong><span>Laura</span></strong>. All Rights Reserved
-      </div>
-      <div class="credits">
-        <!-- All the links in the footer should remain intact. -->
-        <!-- You can delete the links only if you purchased the pro version. -->
-        <!-- Licensing information: https://bootstrapmade.com/license/ -->
-        <!-- Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/laura-free-creative-bootstrap-theme/ -->
-        Designed by <a href="https://bootstrapmade.com/">BootstrapMade</a>
-      </div>
-    </div>
-  </footer><!-- End Footer -->
-
-  <a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>
-
-  <!-- Vendor JS Files -->
-  <script src="assets/vendor/purecounter/purecounter_vanilla.js"></script>
-  <script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
-  <script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
-  <script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
-  <script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
-  <script src="assets/vendor/waypoints/noframework.waypoints.js"></script>
-  <script src="assets/vendor/php-email-form/validate.js"></script>
-
-  <!-- Template Main JS File -->
-  <script src="assets/js/main.js"></script>
-
-</body>
-
-</html>

portfolio-details.html

@@ -1,185 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="utf-8">
-  <meta content="width=device-width, initial-scale=1.0" name="viewport">
-
-  <title>Portfolio Details - Laura Bootstrap Template</title>
-  <meta content="" name="description">
-  <meta content="" name="keywords">
-
-  <!-- Favicons -->
-  <link href="assets/img/favicon.png" rel="icon">
-  <link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
-
-  <!-- Google Fonts -->
-  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Satisfy" rel="stylesheet">
-
-  <!-- Vendor CSS Files -->
-  <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
-  <link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
-  <link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
-  <link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
-  <link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
-
-  <!-- Template Main CSS File -->
-  <link href="assets/css/style.css" rel="stylesheet">
-
-  <!-- =======================================================
-  * Template Name: Laura
-  * Updated: Jul 27 2023 with Bootstrap v5.3.1
-  * Template URL: https://bootstrapmade.com/laura-free-creative-bootstrap-theme/
-  * Author: BootstrapMade.com
-  * License: https://bootstrapmade.com/license/
-  ======================================================== -->
-</head>
-
-<body>
-
-  <!-- ======= Header ======= -->
-  <header id="header" class="fixed-top d-flex justify-content-center align-items-center ">
-
-    <nav id="navbar" class="navbar">
-      <ul>
-        <li><a class="nav-link scrollto " href="#hero">Home</a></li>
-        <li><a class="nav-link scrollto" href="#about">About</a></li>
-        <li><a class="nav-link scrollto" href="#resume">Resume</a></li>
-        <li><a class="nav-link scrollto" href="#services">Services</a></li>
-        <li><a class="nav-link scrollto active" href="#portfolio">Portfolio</a></li>
-        <li class="dropdown"><a href="#"><span>Drop Down</span> <i class="bi bi-chevron-down"></i></a>
-          <ul>
-            <li><a href="#">Drop Down 1</a></li>
-            <li class="dropdown"><a href="#"><span>Deep Drop Down</span> <i class="bi bi-chevron-right"></i></a>
-              <ul>
-                <li><a href="#">Deep Drop Down 1</a></li>
-                <li><a href="#">Deep Drop Down 2</a></li>
-                <li><a href="#">Deep Drop Down 3</a></li>
-                <li><a href="#">Deep Drop Down 4</a></li>
-                <li><a href="#">Deep Drop Down 5</a></li>
-              </ul>
-            </li>
-            <li><a href="#">Drop Down 2</a></li>
-            <li><a href="#">Drop Down 3</a></li>
-            <li><a href="#">Drop Down 4</a></li>
-          </ul>
-        </li>
-        <li><a class="nav-link scrollto" href="#contact">Contact</a></li>
-      </ul>
-      <i class="bi bi-list mobile-nav-toggle"></i>
-    </nav><!-- .navbar -->
-
-  </header><!-- End Header -->
-
-  <main id="main">
-
-    <!-- ======= Breadcrumbs Section ======= -->
-    <section class="breadcrumbs">
-      <div class="container">
-
-        <div class="d-flex justify-content-between align-items-center">
-          <h2>Portfolio Details</h2>
-          <ol>
-            <li><a href="index.html">Home</a></li>
-            <li><a href="portfolio.html">Portfolio</a></li>
-            <li>Portfolio Details</li>
-          </ol>
-        </div>
-
-      </div>
-    </section><!-- Breadcrumbs Section -->
-
-    <!-- ======= Portfolio Details Section ======= -->
-    <section id="portfolio-details" class="portfolio-details">
-      <div class="container">
-
-        <div class="row gy-4">
-
-          <div class="col-lg-8">
-            <div class="portfolio-details-slider swiper">
-              <div class="swiper-wrapper align-items-center">
-
-                <div class="swiper-slide">
-                  <img src="assets/img/portfolio/portfolio-details-1.jpg" alt="">
-                </div>
-
-                <div class="swiper-slide">
-                  <img src="assets/img/portfolio/portfolio-details-2.jpg" alt="">
-                </div>
-
-                <div class="swiper-slide">
-                  <img src="assets/img/portfolio/portfolio-details-3.jpg" alt="">
-                </div>
-
-              </div>
-              <div class="swiper-pagination"></div>
-            </div>
-          </div>
-
-          <div class="col-lg-4">
-            <div class="portfolio-info">
-              <h3>Project information</h3>
-              <ul>
-                <li><strong>Category</strong>: Web design</li>
-                <li><strong>Client</strong>: ASU Company</li>
-                <li><strong>Project date</strong>: 01 March, 2020</li>
-                <li><strong>Project URL</strong>: <a href="#">www.example.com</a></li>
-              </ul>
-            </div>
-            <div class="portfolio-description">
-              <h2>This is an example of portfolio detail</h2>
-              <p>
-                Autem ipsum nam porro corporis rerum. Quis eos dolorem eos itaque inventore commodi labore quia quia. Exercitationem repudiandae officiis neque suscipit non officia eaque itaque enim. Voluptatem officia accusantium nesciunt est omnis tempora consectetur dignissimos. Sequi nulla at esse enim cum deserunt eius.
-              </p>
-            </div>
-          </div>
-
-        </div>
-
-      </div>
-    </section><!-- End Portfolio Details Section -->
-
-  </main><!-- End #main -->
-
-  <!-- ======= Footer ======= -->
-  <footer id="footer">
-    <div class="container">
-      <h3>Laura Thomson</h3>
-      <p>Et aut eum quis fuga eos sunt ipsa nihil. Labore corporis magni eligendi fuga maxime saepe commodi placeat.</p>
-      <div class="social-links">
-        <a href="#" class="twitter"><i class="bx bxl-twitter"></i></a>
-        <a href="#" class="facebook"><i class="bx bxl-facebook"></i></a>
-        <a href="#" class="instagram"><i class="bx bxl-instagram"></i></a>
-        <a href="#" class="google-plus"><i class="bx bxl-skype"></i></a>
-        <a href="#" class="linkedin"><i class="bx bxl-linkedin"></i></a>
-      </div>
-      <div class="copyright">
-        &copy; Copyright <strong><span>Laura</span></strong>. All Rights Reserved
-      </div>
-      <div class="credits">
-        <!-- All the links in the footer should remain intact. -->
-        <!-- You can delete the links only if you purchased the pro version. -->
-        <!-- Licensing information: https://bootstrapmade.com/license/ -->
-        <!-- Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/laura-free-creative-bootstrap-theme/ -->
-        Designed by <a href="https://bootstrapmade.com/">BootstrapMade</a>
-      </div>
-    </div>
-  </footer><!-- End Footer -->
-
-  <a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>
-
-  <!-- Vendor JS Files -->
-  <script src="assets/vendor/purecounter/purecounter_vanilla.js"></script>
-  <script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
-  <script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
-  <script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
-  <script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
-  <script src="assets/vendor/waypoints/noframework.waypoints.js"></script>
-  <script src="assets/vendor/php-email-form/validate.js"></script>
-
-  <!-- Template Main JS File -->
-  <script src="assets/js/main.js"></script>
-
-</body>
-
-</html>