diff --git a/assets/css/style.css b/assets/css/style.css
index 4dcaeaa..541bd8c 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -18,14 +18,77 @@
:root {
/**
- * colors
+ * colors - Light Mode (Default)
*/
/* gradient */
--bg-gradient-onyx: linear-gradient(
to bottom right,
- hsl(240, 1%, 25%) 3%,
+ hsl(0, 0%, 98%) 3%,
+ hsl(0, 0%, 100%) 97%
+ );
+ --bg-gradient-jet: linear-gradient(
+ to bottom right,
+ hsla(0, 0%, 100%, 0.8) 0%,
+ hsla(0, 0%, 98%, 0) 100%
+ ), hsl(0, 0%, 100%);
+ --bg-gradient-yellow-1: linear-gradient(
+ to bottom right,
+ #4285F4 0%,
+ hsla(217, 89%, 61%, 0) 50%
+ );
+ --bg-gradient-yellow-2: linear-gradient(
+ 135deg,
+ hsla(217, 89%, 61%, 0.2) 0%,
+ hsla(217, 89%, 61%, 0) 59.86%
+ ), hsl(0, 0%, 100%);
+ --border-gradient-onyx: linear-gradient(
+ to bottom right,
+ hsl(0, 0%, 90%) 0%,
+ hsla(0, 0%, 90%, 0) 50%
+ );
+ --text-gradient-yellow: linear-gradient(
+ to right,
+ #4285F4,
+ #34A853
+ );
+
+ /* solid */
+
+ --jet: hsl(0, 0%, 95%);
+ --onyx: hsl(0, 0%, 98%);
+ --eerie-black-1: hsl(0, 0%, 100%);
+ --eerie-black-2: hsl(0, 0%, 100%);
+ --smoky-black: hsl(0, 0%, 97%);
+ --white-1: hsl(0, 0%, 20%);
+ --white-2: hsl(0, 0%, 15%);
+ --orange-yellow-crayola: #4285F4;
+ --vegas-gold: #34A853;
+ --light-gray: hsl(0, 0%, 40%);
+ --light-gray-70: hsla(0, 0%, 40%, 0.7);
+ --bittersweet-shimmer: #EA4335;
+
+ /* Google Colors */
+ --google-blue: #4285F4;
+ --google-red: #EA4335;
+ --google-yellow: #FBBC05;
+ --google-green: #34A853;
+
+ /* Background colors */
+ --bg-primary: hsl(0, 0%, 100%);
+ --bg-secondary: hsl(0, 0%, 98%);
+ --text-primary: hsl(0, 0%, 20%);
+ --text-secondary: hsl(0, 0%, 40%);
+ --border-color: hsl(0, 0%, 90%);
+}
+
+/* Dark Mode */
+[data-theme="dark"] {
+ /* gradient */
+ --bg-gradient-onyx: linear-gradient(
+ to bottom right,
+ hsl(240, 1%, 17%) 3%,
hsl(0, 0%, 19%) 97%
);
--bg-gradient-jet: linear-gradient(
@@ -35,27 +98,21 @@
), hsl(240, 2%, 13%);
--bg-gradient-yellow-1: linear-gradient(
to bottom right,
- hsl(45, 100%, 71%) 0%,
- hsla(36, 100%, 69%, 0) 50%
+ #4285F4 0%,
+ hsla(217, 89%, 61%, 0) 50%
);
--bg-gradient-yellow-2: linear-gradient(
135deg,
- hsla(45, 100%, 71%, 0.251) 0%,
- hsla(35, 100%, 68%, 0) 59.86%
+ hsla(217, 89%, 61%, 0.2) 0%,
+ hsla(217, 89%, 61%, 0) 59.86%
), hsl(240, 2%, 13%);
--border-gradient-onyx: linear-gradient(
to bottom right,
hsl(0, 0%, 25%) 0%,
hsla(0, 0%, 25%, 0) 50%
);
- --text-gradient-yellow: linear-gradient(
- to right,
- hsl(45, 100%, 72%),
- hsl(35, 100%, 68%)
- );
/* solid */
-
--jet: hsl(0, 0%, 22%);
--onyx: hsl(240, 1%, 17%);
--eerie-black-1: hsl(240, 2%, 13%);
@@ -63,28 +120,34 @@
--smoky-black: hsl(0, 0%, 7%);
--white-1: hsl(0, 0%, 100%);
--white-2: hsl(0, 0%, 98%);
- --orange-yellow-crayola: hsl(45, 100%, 72%);
- --vegas-gold: hsl(45, 54%, 58%);
--light-gray: hsl(0, 0%, 84%);
--light-gray-70: hsla(0, 0%, 84%, 0.7);
- --bittersweet-shimmer: hsl(0, 43%, 51%);
+
+ /* Background colors */
+ --bg-primary: hsl(240, 2%, 12%);
+ --bg-secondary: hsl(240, 1%, 17%);
+ --text-primary: hsl(0, 0%, 100%);
+ --text-secondary: hsl(0, 0%, 84%);
+ --border-color: hsl(0, 0%, 25%);
+}
+:root {
/**
* typography
*/
/* font-family */
- --ff-poppins: 'Poppins', sans-serif;
+ --ff-poppins: 'Google Sans', 'Roboto', 'Poppins', sans-serif;
/* font-size */
- --fs-1: 24px;
- --fs-2: 18px;
- --fs-3: 17px;
+ --fs-1: 28px;
+ --fs-2: 20px;
+ --fs-3: 18px;
--fs-4: 16px;
--fs-5: 15px;
--fs-6: 14px;
--fs-7: 13px;
- --fs-8: 11px;
+ --fs-8: 12px;
/* font-weight */
--fw-300: 300;
@@ -93,14 +156,14 @@
--fw-600: 600;
/**
- * shadow
+ * shadow - Google Material Design style
*/
- --shadow-1: -4px 8px 24px hsla(0, 0%, 0%, 0.25);
- --shadow-2: 0 16px 30px hsla(0, 0%, 0%, 0.25);
- --shadow-3: 0 16px 40px hsla(0, 0%, 0%, 0.25);
- --shadow-4: 0 25px 50px hsla(0, 0%, 0%, 0.15);
- --shadow-5: 0 24px 80px hsla(0, 0%, 0%, 0.25);
+ --shadow-1: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
+ --shadow-2: 0 1px 3px 0 rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15);
+ --shadow-3: 0 4px 8px 3px rgba(60, 64, 67, 0.15), 0 1px 3px rgba(60, 64, 67, 0.3);
+ --shadow-4: 0 8px 10px 1px rgba(60, 64, 67, 0.15), 0 3px 14px 2px rgba(60, 64, 67, 0.12);
+ --shadow-5: 0 8px 10px 1px rgba(60, 64, 67, 0.15), 0 3px 14px 2px rgba(60, 64, 67, 0.12), 0 5px 5px -3px rgba(60, 64, 67, 0.2);
/**
* transition
@@ -111,6 +174,15 @@
}
+/* Dark Mode Shadows */
+[data-theme="dark"] {
+ --shadow-1: 0 1px 2px 0 rgba(0, 0, 0, 0.4), 0 1px 3px 1px rgba(0, 0, 0, 0.25);
+ --shadow-2: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 4px 8px 3px rgba(0, 0, 0, 0.25);
+ --shadow-3: 0 4px 8px 3px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.4);
+ --shadow-4: 0 8px 10px 1px rgba(0, 0, 0, 0.25), 0 3px 14px 2px rgba(0, 0, 0, 0.2);
+ --shadow-5: 0 8px 10px 1px rgba(0, 0, 0, 0.25), 0 3px 14px 2px rgba(0, 0, 0, 0.2), 0 5px 5px -3px rgba(0, 0, 0, 0.3);
+}
+
@@ -148,14 +220,21 @@ input, textarea {
::selection {
background: var(--orange-yellow-crayola);
- color: var(--smoky-black);
+ color: white;
}
:focus { outline-color: var(--orange-yellow-crayola); }
-html { font-family: var(--ff-poppins); }
+html {
+ font-family: var(--ff-poppins);
+ transition: background-color 0.3s ease;
+}
-body { background: var(--smoky-black); }
+body {
+ background: var(--bg-primary);
+ line-height: 1.6;
+ transition: background-color 0.3s ease;
+}
@@ -167,43 +246,67 @@ body { background: var(--smoky-black); }
.sidebar,
article {
+ position: relative;
background: var(--eerie-black-2);
- border: 1px solid var(--jet);
- border-radius: 20px;
- padding: 15px;
- box-shadow: var(--shadow-1);
+ border: 2px solid transparent;
+ border-radius: 16px;
+ padding: 24px;
+ box-shadow: var(--shadow-2);
z-index: 1;
+ transition: box-shadow 0.3s ease;
+ background-clip: padding-box;
+ background-origin: border-box;
+ background-image: linear-gradient(var(--eerie-black-2), var(--eerie-black-2)),
+ linear-gradient(135deg,
+ var(--google-blue) 0%,
+ var(--google-red) 25%,
+ var(--google-yellow) 50%,
+ var(--google-green) 75%,
+ var(--google-blue) 100%);
+ background-size: 100%, 200% 200%;
+ background-position: 0 0, 0% 50%;
+ animation: gradientBorderMove 8s ease infinite;
+}
+
+.sidebar:hover,
+article:hover {
+ box-shadow: var(--shadow-3);
+ animation: gradientBorderMove 4s ease infinite;
+}
+
+@keyframes gradientBorderMove {
+ 0%, 100% {
+ background-position: 0 0, 0% 50%;
+ }
+ 50% {
+ background-position: 0 0, 100% 50%;
+ }
}
.separator {
width: 100%;
height: 1px;
- background: var(--jet);
+ background: var(--border-color);
margin: 16px 0;
}
.icon-box {
position: relative;
- background: var(--border-gradient-onyx);
- width: 30px;
- height: 30px;
- border-radius: 8px;
+ background: var(--bg-secondary);
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
- font-size: 16px;
+ font-size: 18px;
color: var(--orange-yellow-crayola);
- box-shadow: var(--shadow-1);
- z-index: 1;
+ transition: all 0.3s ease;
}
-.icon-box::before {
- content: "";
- position: absolute;
- inset: 1px;
- background: var(--eerie-black-1);
- border-radius: inherit;
- z-index: -1;
+.icon-box:hover {
+ background: var(--jet);
+ transform: scale(1.1);
}
.icon-box ion-icon { --ionicon-stroke-width: 35px; }
@@ -224,24 +327,41 @@ article.active {
.h3,
.h4,
.h5 {
- color: var(--white-2);
+ color: var(--text-primary);
text-transform: capitalize;
+ letter-spacing: 0.25px;
}
-.h2 { font-size: var(--fs-1); }
+.h2 {
+ font-size: var(--fs-1);
+ font-weight: 500;
+ line-height: 1.3;
+}
-.h3 { font-size: var(--fs-2); }
+.h3 {
+ font-size: var(--fs-2);
+ font-weight: 500;
+ line-height: 1.4;
+}
-.h4 { font-size: var(--fs-4); }
+.h4 {
+ font-size: var(--fs-4);
+ font-weight: 500;
+ line-height: 1.5;
+}
.h5 {
font-size: var(--fs-7);
font-weight: var(--fw-500);
+ line-height: 1.5;
}
.article-title {
position: relative;
- padding-bottom: 7px;
+ padding-bottom: 12px;
+ margin-bottom: 24px;
+ font-weight: 500;
+ letter-spacing: 0.5px;
}
.article-title::after {
@@ -249,10 +369,11 @@ article.active {
position: absolute;
bottom: 0;
left: 0;
- width: 30px;
- height: 3px;
- background: var(--text-gradient-yellow);
- border-radius: 3px;
+ width: 48px;
+ height: 4px;
+ background: linear-gradient(to right, var(--google-blue), var(--google-red), var(--google-yellow), var(--google-green));
+ border-radius: 2px;
+ box-shadow: 0 2px 8px rgba(66, 133, 244, 0.3);
}
.has-scrollbar::-webkit-scrollbar {
@@ -261,7 +382,7 @@ article.active {
}
.has-scrollbar::-webkit-scrollbar-track {
- background: var(--onyx);
+ background: hsl(0, 0%, 95%);
border-radius: 5px;
}
@@ -272,24 +393,39 @@ article.active {
.has-scrollbar::-webkit-scrollbar-button { width: 20px; }
-.content-card {
- position: relative;
- background: var(--border-gradient-onyx);
- padding: 15px;
- padding-top: 45px;
- border-radius: 14px;
- box-shadow: var(--shadow-2);
- cursor: pointer;
- z-index: 1;
+/* Google colors scrollbar for testimonials and clients */
+.testimonials-list::-webkit-scrollbar,
+.clients-list::-webkit-scrollbar {
+ height: 8px;
}
-.content-card::before {
- content: "";
- position: absolute;
- inset: 1px;
- background: var(--bg-gradient-jet);
- border-radius: inherit;
- z-index: -1;
+.testimonials-list::-webkit-scrollbar-track,
+.clients-list::-webkit-scrollbar-track {
+ background: hsl(0, 0%, 95%);
+ border-radius: 5px;
+}
+
+.testimonials-list::-webkit-scrollbar-thumb,
+.clients-list::-webkit-scrollbar-thumb {
+ background: linear-gradient(to right, #4285F4, #EA4335, #FBBC05, #34A853);
+ border-radius: 5px;
+}
+
+.content-card {
+ position: relative;
+ background: var(--eerie-black-2);
+ padding: 20px;
+ padding-top: 48px;
+ border-radius: 12px;
+ box-shadow: var(--shadow-1);
+ cursor: pointer;
+ border: 1px solid var(--border-color);
+ transition: all 0.3s ease;
+}
+
+.content-card:hover {
+ box-shadow: var(--shadow-3);
+ transform: translateY(-2px);
}
@@ -319,10 +455,71 @@ main {
max-height: 112px;
overflow: hidden;
transition: var(--transition-2);
+ position: relative;
}
.sidebar.active { max-height: 405px; }
+/* Theme Toggle Button */
+.theme-toggle {
+ position: absolute;
+ top: 16px;
+ right: 16px;
+ width: 48px;
+ height: 48px;
+ border-radius: 50%;
+ background: #ffffff;
+ border: 2px solid #e0e0e0;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 10;
+ transition: all 0.3s ease;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.theme-toggle:hover {
+ transform: translateY(-2px) rotate(15deg);
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+ border-color: #d0d0d0;
+}
+
+.theme-toggle ion-icon {
+ font-size: 24px;
+ transition: all 0.3s ease;
+}
+
+.theme-toggle .sun-icon {
+ display: block;
+ color: #ffa500;
+}
+
+.theme-toggle .moon-icon {
+ display: none;
+ color: #333333;
+}
+
+[data-theme="dark"] .theme-toggle {
+ background: #2a2a2a;
+ border-color: #404040;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+[data-theme="dark"] .theme-toggle:hover {
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+ border-color: #505050;
+}
+
+[data-theme="dark"] .theme-toggle .sun-icon {
+ display: none;
+}
+
+[data-theme="dark"] .theme-toggle .moon-icon {
+ display: block;
+ color: #ffd700;
+}
+
.sidebar-info {
position: relative;
display: flex;
@@ -332,12 +529,70 @@ main {
}
.avatar-box {
- background: var(--bg-gradient-onyx);
+ position: relative;
+ background: linear-gradient(135deg,
+ var(--google-blue) 0%,
+ var(--google-red) 25%,
+ var(--google-yellow) 50%,
+ var(--google-green) 75%,
+ var(--google-blue) 100%);
border-radius: 20px;
+ padding: 4px;
+ animation: avatarGradient 8s ease infinite;
+ box-shadow: 0 8px 24px rgba(66, 133, 244, 0.3);
+ transition: all 0.3s ease;
+}
+
+.avatar-box::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ border-radius: 20px;
+ padding: 4px;
+ background: linear-gradient(135deg,
+ var(--google-blue),
+ var(--google-red),
+ var(--google-yellow),
+ var(--google-green));
+ -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+ -webkit-mask-composite: xor;
+ mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+ mask-composite: exclude;
+ opacity: 0;
+ transition: opacity 0.3s ease;
+}
+
+.avatar-box:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 12px 32px rgba(66, 133, 244, 0.4);
+}
+
+.avatar-box:hover::before {
+ opacity: 1;
+}
+
+.avatar-box img {
+ border-radius: 16px;
+ display: block;
+ background: var(--eerie-black-2);
+ transition: transform 0.3s ease;
+}
+
+.avatar-box:hover img {
+ transform: scale(1.05);
+}
+
+@keyframes avatarGradient {
+ 0%, 100% {
+ background-position: 0% 50%;
+ }
+ 50% {
+ background-position: 100% 50%;
+ }
}
.info-content .name {
- color: var(--white-2);
+ color: var(--text-primary);
font-size: var(--fs-3);
font-weight: var(--fw-500);
letter-spacing: -0.25px;
@@ -345,8 +600,8 @@ main {
}
.info-content .title {
- color: var(--white-1);
- background: var(--onyx);
+ color: white;
+ background: #4285F4;
font-size: var(--fs-8);
font-weight: var(--fw-300);
width: max-content;
@@ -416,14 +671,15 @@ main {
}
.contact-title {
- color: var(--light-gray-70);
+ color: var(--text-primary);
font-size: var(--fs-8);
text-transform: uppercase;
margin-bottom: 2px;
+ font-weight: var(--fw-600);
}
.contact-info :is(.contact-link, time, address) {
- color: var(--white-2);
+ color: var(--text-primary);
font-size: var(--fs-7);
}
@@ -459,12 +715,27 @@ main {
bottom: 0;
left: 0;
width: 100%;
- background: hsla(240, 1%, 17%, 0.75);
+ background: var(--eerie-black-2);
backdrop-filter: blur(10px);
- border: 1px solid var(--jet);
+ border: 1px solid transparent;
+ border-image: linear-gradient(to right, #4285F4, #EA4335, #FBBC05, #34A853) 1;
+ border-bottom: none;
border-radius: 12px 12px 0 0;
box-shadow: var(--shadow-2);
z-index: 5;
+ position: relative;
+ transition: background 0.3s ease;
+}
+
+.navbar::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 3px;
+ background: linear-gradient(to right, #4285F4, #EA4335, #FBBC05, #34A853);
+ border-radius: 12px 12px 0 0;
}
.navbar-list {
@@ -477,15 +748,81 @@ main {
.navbar-link {
color: var(--light-gray);
- font-size: var(--fs-8);
- padding: 20px 7px;
- transition: color var(--transition-1);
+ font-size: var(--fs-7);
+ padding: 20px 12px;
+ transition: all 0.2s ease;
+ font-weight: 500;
+ letter-spacing: 0.5px;
+ position: relative;
}
-.navbar-link:hover,
-.navbar-link:focus { color: var(--light-gray-70); }
+.navbar-link:nth-child(1):hover,
+.navbar-link:nth-child(1):focus {
+ color: var(--google-blue);
+}
-.navbar-link.active { color: var(--orange-yellow-crayola); }
+.navbar-link:nth-child(2):hover,
+.navbar-link:nth-child(2):focus {
+ color: var(--google-red);
+}
+
+.navbar-link:nth-child(3):hover,
+.navbar-link:nth-child(3):focus {
+ color: var(--google-green);
+}
+
+.navbar-link:nth-child(1).active {
+ color: var(--google-blue);
+ font-weight: 600;
+}
+
+.navbar-link:nth-child(2).active {
+ color: var(--google-red);
+ font-weight: 600;
+}
+
+.navbar-link:nth-child(3).active {
+ color: var(--google-green);
+ font-weight: 600;
+}
+
+.navbar-link:nth-child(1).active::after {
+ content: '';
+ position: absolute;
+ bottom: 12px;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 4px;
+ height: 4px;
+ background: var(--google-blue);
+ border-radius: 50%;
+ box-shadow: 0 0 8px var(--google-blue);
+}
+
+.navbar-link:nth-child(2).active::after {
+ content: '';
+ position: absolute;
+ bottom: 12px;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 4px;
+ height: 4px;
+ background: var(--google-red);
+ border-radius: 50%;
+ box-shadow: 0 0 8px var(--google-red);
+}
+
+.navbar-link:nth-child(3).active::after {
+ content: '';
+ position: absolute;
+ bottom: 12px;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 4px;
+ height: 4px;
+ background: var(--google-green);
+ border-radius: 50%;
+}
@@ -498,7 +835,7 @@ main {
.about .article-title { margin-bottom: 15px; }
.about-text {
- color: var(--light-gray);
+ color: var(--text-secondary);
font-size: var(--fs-6);
font-weight: var(--fw-300);
line-height: 1.6;
@@ -524,32 +861,38 @@ main {
.service-item {
position: relative;
- background: var(--border-gradient-onyx);
- padding: 20px;
- border-radius: 14px;
- box-shadow: var(--shadow-2);
- z-index: 1;
+ background: var(--eerie-black-2);
+ padding: 24px;
+ border-radius: 12px;
+ box-shadow: var(--shadow-1);
+ border: 1px solid var(--border-color);
+ transition: all 0.3s ease;
}
-.service-item::before {
- content: "";
- position: absolute;
- inset: 1px;
- background: var(--bg-gradient-jet);
- border-radius: inherit;
- z-index: -1;
+.service-item:hover {
+ box-shadow: var(--shadow-3);
+ transform: translateY(-4px);
}
-.service-icon-box { margin-bottom: 10px; }
+.service-icon-box {
+ margin-bottom: 10px;
+ font-size: 40px;
+}
.service-icon-box img { margin: auto; }
+.service-icon-box ion-icon {
+ font-size: 40px;
+ display: block;
+ margin: auto;
+}
+
.service-content-box { text-align: center; }
.service-item-title { margin-bottom: 7px; }
.service-item-text {
- color: var(--light-gray);
+ color: var(--text-secondary);
font-size: var(--fs-6);
font-weight: var(--fw-3);
line-height: 1.6;
@@ -596,7 +939,7 @@ main {
.testimonials-item-title { margin-bottom: 7px; }
.testimonials-text {
- color: var(--light-gray);
+ color: var(--text-secondary);
font-size: var(--fs-6);
font-weight: var(--fw-300);
line-height: 1.6;
@@ -641,7 +984,7 @@ main {
left: 0;
width: 100%;
height: 100vh;
- background: hsl(0, 0%, 5%);
+ background: hsl(0, 0%, 0%);
opacity: 0;
visibility: hidden;
pointer-events: none;
@@ -650,7 +993,7 @@ main {
}
.overlay.active {
- opacity: 0.8;
+ opacity: 0.5;
visibility: visible;
pointer-events: all;
}
@@ -678,7 +1021,7 @@ main {
position: absolute;
top: 15px;
right: 15px;
- background: var(--onyx);
+ background: hsl(0, 0%, 95%);
border-radius: 8px;
width: 32px;
height: 32px;
@@ -756,6 +1099,13 @@ main {
.clients-item img:hover { filter: grayscale(0); }
+.clients-item svg {
+ filter: grayscale(1);
+ transition: var(--transition-1);
+}
+
+.clients-item svg:hover { filter: grayscale(0); }
+
@@ -796,7 +1146,7 @@ main {
}
.timeline-list span {
- color: var(--vegas-gold);
+ color: #EA4335;
font-weight: var(--fw-400);
line-height: 1.6;
}
@@ -808,7 +1158,7 @@ main {
left: -30px;
width: 1px;
height: calc(100% + 50px);
- background: var(--jet);
+ background: hsl(0, 0%, 90%);
}
.timeline-item::after {
@@ -818,13 +1168,13 @@ main {
left: -33px;
height: 6px;
width: 6px;
- background: var(--text-gradient-yellow);
+ background: #4285F4;
border-radius: 50%;
- box-shadow: 0 0 0 4px var(--jet);
+ box-shadow: 0 0 0 4px hsl(0, 0%, 95%);
}
.timeline-text {
- color: var(--light-gray);
+ color: var(--text-secondary);
font-weight: var(--fw-300);
line-height: 1.6;
}
@@ -836,35 +1186,103 @@ main {
.skills-title { margin-bottom: 20px; }
-.skills-list { padding: 20px; }
-
-
-.skills-item:not(:last-child) { margin-bottom: 15px; }
-
-.skill .title-wrapper {
+.skills-categories {
+ padding: 20px;
display: flex;
- align-items: center;
- gap: 5px;
- margin-bottom: 8px;
+ flex-direction: column;
+ gap: 32px;
}
-.skill .title-wrapper data {
- color: var(--light-gray);
- font-size: var(--fs-7);
- font-weight: var(--fw-300);
+.skill-category {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
}
-.skill-progress-bg {
- background: var(--jet);
- width: 100%;
- height: 8px;
- border-radius: 10px;
+.category-title {
+ font-size: 16px;
+ font-weight: 600;
+ margin-bottom: 4px;
+ letter-spacing: 0.5px;
}
-.skill-progress-fill {
- background: var(--text-gradient-yellow);
- height: 100%;
- border-radius: inherit;
+.skill-category:nth-child(1) .category-title {
+ color: var(--google-blue);
+}
+
+.skill-category:nth-child(2) .category-title {
+ color: var(--google-red);
+}
+
+.skill-category:nth-child(3) .category-title {
+ color: var(--google-yellow);
+}
+
+.skill-category:nth-child(4) .category-title {
+ color: var(--google-green);
+}
+
+.skill-category:nth-child(5) .category-title {
+ color: var(--google-blue);
+}
+
+.skill-category:nth-child(6) .category-title {
+ color: var(--google-red);
+}
+
+.skill-tags {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 12px;
+ list-style: none;
+ padding: 0;
+}
+
+.skill-tag {
+ background: var(--eerie-black-2);
+ border: 2px solid var(--border-color);
+ color: var(--text-secondary);
+ padding: 10px 20px;
+ border-radius: 24px;
+ font-size: 14px;
+ font-weight: 500;
+ transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
+ box-shadow: var(--shadow-1);
+ cursor: default;
+ letter-spacing: 0.3px;
+}
+
+/* Google color accents for skill tags */
+.skill-tag:nth-child(4n+1):hover {
+ background: linear-gradient(135deg, rgba(66, 133, 244, 0.15), rgba(66, 133, 244, 0.05));
+ border-color: var(--google-blue);
+ color: var(--google-blue);
+ box-shadow: 0 2px 8px rgba(66, 133, 244, 0.25);
+ transform: translateY(-2px);
+}
+
+.skill-tag:nth-child(4n+2):hover {
+ background: linear-gradient(135deg, rgba(234, 67, 53, 0.15), rgba(234, 67, 53, 0.05));
+ border-color: var(--google-red);
+ color: var(--google-red);
+ box-shadow: 0 2px 8px rgba(234, 67, 53, 0.25);
+ transform: translateY(-2px);
+}
+
+.skill-tag:nth-child(4n+3):hover {
+ background: linear-gradient(135deg, rgba(251, 188, 5, 0.15), rgba(251, 188, 5, 0.05));
+ border-color: var(--google-yellow);
+ color: var(--google-yellow);
+ box-shadow: 0 2px 8px rgba(251, 188, 5, 0.25);
+ transform: translateY(-2px);
+}
+
+.skill-tag:nth-child(4n+4):hover {
+ background: linear-gradient(135deg, rgba(52, 168, 83, 0.15), rgba(52, 168, 83, 0.05));
+ border-color: var(--google-green);
+ color: var(--google-green);
+ box-shadow: 0 2px 8px rgba(52, 168, 83, 0.25);
+ transform: translateY(-2px);
}
@@ -930,7 +1348,10 @@ main {
border-radius: 8px;
}
-.select-item button:hover { --eerie-black-2: hsl(240, 2%, 20%); }
+.select-item button:hover {
+ --eerie-black-2: hsl(0, 0%, 98%);
+ background: hsl(0, 0%, 97%);
+}
.project-list {
display: grid;
@@ -979,7 +1400,7 @@ main {
.project-item-icon-box {
--scale: 0.8;
- background: var(--jet);
+ background: white;
color: var(--orange-yellow-crayola);
position: absolute;
top: 50%;
@@ -1128,7 +1549,7 @@ main {
width: 100%;
border-radius: 16px;
margin-bottom: 30px;
- border: 1px solid var(--jet);
+ border: 1px solid var(--border-color);
overflow: hidden;
}
@@ -1138,7 +1559,7 @@ main {
width: 100%;
height: 100%;
border: none;
- filter: grayscale(1) invert(1);
+ filter: grayscale(1);
}
.contact-form { margin-bottom: 10px; }
@@ -1153,16 +1574,21 @@ main {
}
.form-input {
- color: var(--white-2);
+ color: var(--text-primary);
+ background: var(--eerie-black-2);
font-size: var(--fs-6);
font-weight: var(--fw-400);
padding: 13px 20px;
- border: 1px solid var(--jet);
+ border: 1px solid var(--border-color);
border-radius: 14px;
outline: none;
+ transition: all 0.3s ease;
}
-.form-input::placeholder { font-weight: var(--fw-500); }
+.form-input::placeholder {
+ font-weight: var(--fw-500);
+ color: var(--text-secondary);
+}
.form-input:focus { border-color: var(--orange-yellow-crayola); }
@@ -1181,8 +1607,8 @@ textarea.form-input::-webkit-resizer { display: none; }
.form-btn {
position: relative;
width: 100%;
- background: var(--border-gradient-onyx);
- color: var(--orange-yellow-crayola);
+ background: linear-gradient(135deg, var(--google-blue), var(--google-green));
+ color: white;
display: flex;
justify-content: center;
align-items: center;
@@ -1191,26 +1617,33 @@ textarea.form-input::-webkit-resizer { display: none; }
border-radius: 14px;
font-size: var(--fs-6);
text-transform: capitalize;
- box-shadow: var(--shadow-3);
+ box-shadow: 0 4px 12px rgba(66, 133, 244, 0.3);
z-index: 1;
- transition: var(--transition-1);
+ transition: all 0.3s ease;
+ font-weight: 500;
}
.form-btn::before {
content: "";
position: absolute;
- inset: 1px;
- background: var(--bg-gradient-jet);
+ inset: 0;
+ background: linear-gradient(135deg, var(--google-red), var(--google-yellow));
border-radius: inherit;
z-index: -1;
- transition: var(--transition-1);
+ opacity: 0;
+ transition: opacity 0.3s ease;
}
.form-btn ion-icon { font-size: 16px; }
-.form-btn:hover { background: var(--bg-gradient-yellow-1); }
+.form-btn:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 6px 16px rgba(66, 133, 244, 0.4);
+}
-.form-btn:hover::before { background: var(--bg-gradient-yellow-2); }
+.form-btn:hover::before {
+ opacity: 1;
+}
.form-btn:disabled {
opacity: 0.7;
@@ -1337,9 +1770,20 @@ textarea.form-input::-webkit-resizer { display: none; }
.sidebar-info { gap: 25px; }
- .avatar-box { border-radius: 30px; }
+ .avatar-box {
+ border-radius: 30px;
+ padding: 5px;
+ }
- .avatar-box img { width: 120px; }
+ .avatar-box::before {
+ border-radius: 30px;
+ padding: 5px;
+ }
+
+ .avatar-box img {
+ width: 120px;
+ border-radius: 25px;
+ }
.info-content .name { margin-bottom: 15px; }
@@ -1498,8 +1942,6 @@ textarea.form-input::-webkit-resizer { display: none; }
left: -43px;
}
- .skills-item:not(:last-child) { margin-bottom: 25px; }
-
/**
@@ -1776,13 +2218,13 @@ textarea.form-input::-webkit-resizer { display: none; }
body::-webkit-scrollbar-thumb {
border: 5px solid var(--smoky-black);
- background: hsla(0, 0%, 100%, 0.1);
+ background: hsla(0, 0%, 70%, 0.3);
border-radius: 20px;
- box-shadow: inset 1px 1px 0 hsla(0, 0%, 100%, 0.11),
- inset -1px -1px 0 hsla(0, 0%, 100%, 0.11);
+ box-shadow: inset 1px 1px 0 hsla(0, 0%, 0%, 0.05),
+ inset -1px -1px 0 hsla(0, 0%, 0%, 0.05);
}
- body::-webkit-scrollbar-thumb:hover { background: hsla(0, 0%, 100%, 0.15); }
+ body::-webkit-scrollbar-thumb:hover { background: hsla(0, 0%, 60%, 0.5); }
body::-webkit-scrollbar-button { height: 60px; }
@@ -1835,7 +2277,18 @@ textarea.form-input::-webkit-resizer { display: none; }
.sidebar-info { flex-direction: column; }
- .avatar-box img { width: 150px; }
+ .avatar-box {
+ padding: 6px;
+ }
+
+ .avatar-box::before {
+ padding: 6px;
+ }
+
+ .avatar-box img {
+ width: 150px;
+ border-radius: 28px;
+ }
.info-content .name {
white-space: nowrap;
@@ -1879,4 +2332,181 @@ textarea.form-input::-webkit-resizer { display: none; }
.timeline-text { max-width: 700px; }
+}
+
+
+
+
+
+/**
+ * Google Colors Theme Enhancement
+ */
+
+/* Add Google color accents to service items */
+.service-item:nth-child(1) {
+ border-left: 4px solid var(--google-blue);
+}
+
+.service-item:nth-child(1):hover {
+ box-shadow: 0 4px 12px rgba(66, 133, 244, 0.2);
+}
+
+.service-item:nth-child(1) .service-icon-box {
+ background: linear-gradient(135deg, rgba(66, 133, 244, 0.1), rgba(66, 133, 244, 0.05));
+ color: var(--google-blue);
+}
+
+.service-item:nth-child(2) {
+ border-left: 4px solid var(--google-red);
+}
+
+.service-item:nth-child(2):hover {
+ box-shadow: 0 4px 12px rgba(234, 67, 53, 0.2);
+}
+
+.service-item:nth-child(2) .service-icon-box {
+ background: linear-gradient(135deg, rgba(234, 67, 53, 0.1), rgba(234, 67, 53, 0.05));
+ color: var(--google-red);
+}
+
+.service-item:nth-child(3) {
+ border-left: 4px solid var(--google-yellow);
+}
+
+.service-item:nth-child(3):hover {
+ box-shadow: 0 4px 12px rgba(251, 188, 5, 0.2);
+}
+
+.service-item:nth-child(3) .service-icon-box {
+ background: linear-gradient(135deg, rgba(251, 188, 5, 0.1), rgba(251, 188, 5, 0.05));
+ color: var(--google-yellow);
+}
+
+.service-item:nth-child(4) {
+ border-left: 4px solid var(--google-green);
+}
+
+.service-item:nth-child(4):hover {
+ box-shadow: 0 4px 12px rgba(52, 168, 83, 0.2);
+}
+
+.service-item:nth-child(4) .service-icon-box {
+ background: linear-gradient(135deg, rgba(52, 168, 83, 0.1), rgba(52, 168, 83, 0.05));
+ color: var(--google-green);
+}
+
+
+
+/* Timeline item colors with rotation */
+.timeline-item:nth-child(1)::after {
+ background: var(--google-blue);
+ box-shadow: 0 0 8px rgba(66, 133, 244, 0.4);
+}
+
+.timeline-item:nth-child(2)::after {
+ background: var(--google-red);
+ box-shadow: 0 0 8px rgba(234, 67, 53, 0.4);
+}
+
+.timeline-item:nth-child(3)::after {
+ background: var(--google-yellow);
+ box-shadow: 0 0 8px rgba(251, 188, 5, 0.4);
+}
+
+.timeline-item:nth-child(4)::after {
+ background: var(--google-green);
+ box-shadow: 0 0 8px rgba(52, 168, 83, 0.4);
+}
+
+.timeline-item:nth-child(5)::after {
+ background: var(--google-blue);
+ box-shadow: 0 0 8px rgba(66, 133, 244, 0.4);
+}
+
+/* Blog category colors */
+.blog-post-item:nth-child(3n+1) .blog-category {
+ color: #4285F4;
+}
+
+.blog-post-item:nth-child(3n+2) .blog-category {
+ color: #EA4335;
+}
+
+.blog-post-item:nth-child(3n+3) .blog-category {
+ color: #34A853;
+}
+
+/* Social links hover colors */
+.social-item:nth-child(1) .social-link:hover {
+ color: #4285F4;
+}
+
+.social-item:nth-child(2) .social-link:hover {
+ color: #EA4335;
+}
+
+.social-item:nth-child(3) .social-link:hover {
+ color: #FBBC05;
+}
+
+/* Contact icon colors with glow effect */
+.contact-item:nth-child(1) .icon-box {
+ color: var(--google-blue);
+ background: linear-gradient(135deg, rgba(66, 133, 244, 0.1), rgba(66, 133, 244, 0.05));
+ box-shadow: 0 2px 8px rgba(66, 133, 244, 0.15);
+}
+
+.contact-item:nth-child(2) .icon-box {
+ color: var(--google-red);
+ background: linear-gradient(135deg, rgba(234, 67, 53, 0.1), rgba(234, 67, 53, 0.05));
+ box-shadow: 0 2px 8px rgba(234, 67, 53, 0.15);
+}
+
+.contact-item:nth-child(3) .icon-box {
+ color: var(--google-yellow);
+ background: linear-gradient(135deg, rgba(251, 188, 5, 0.1), rgba(251, 188, 5, 0.05));
+ box-shadow: 0 2px 8px rgba(251, 188, 5, 0.15);
+}
+
+.contact-item:nth-child(4) .icon-box {
+ color: var(--google-green);
+ background: linear-gradient(135deg, rgba(52, 168, 83, 0.1), rgba(52, 168, 83, 0.05));
+ box-shadow: 0 2px 8px rgba(52, 168, 83, 0.15);
+}
+
+/* Badge items with Google colors */
+.testimonials-item:nth-child(1) {
+ border-top: 3px solid var(--google-blue);
+}
+
+.testimonials-item:nth-child(1) .testimonials-avatar-box {
+ background: linear-gradient(135deg, rgba(66, 133, 244, 0.15), rgba(66, 133, 244, 0.05));
+ box-shadow: 0 4px 12px rgba(66, 133, 244, 0.2);
+}
+
+.testimonials-item:nth-child(2) {
+ border-top: 3px solid var(--google-red);
+}
+
+.testimonials-item:nth-child(2) .testimonials-avatar-box {
+ background: linear-gradient(135deg, rgba(234, 67, 53, 0.15), rgba(234, 67, 53, 0.05));
+ box-shadow: 0 4px 12px rgba(234, 67, 53, 0.2);
+}
+
+.testimonials-item:nth-child(3) {
+ border-top: 3px solid var(--google-yellow);
+}
+
+.testimonials-item:nth-child(3) .testimonials-avatar-box {
+ background: linear-gradient(135deg, rgba(251, 188, 5, 0.15), rgba(251, 188, 5, 0.05));
+ box-shadow: 0 4px 12px rgba(251, 188, 5, 0.2);
+}
+
+.testimonials-item:nth-child(4) {
+ border-top: 3px solid var(--google-green);
+}
+
+.testimonials-item:nth-child(4) .testimonials-avatar-box {
+ background: linear-gradient(135deg, rgba(52, 168, 83, 0.15), rgba(52, 168, 83, 0.05));
+ box-shadow: 0 4px 12px rgba(52, 168, 83, 0.2);
}
\ No newline at end of file
diff --git a/assets/images/avatar-1.png b/assets/images/avatar-1.png
deleted file mode 100644
index def748f..0000000
Binary files a/assets/images/avatar-1.png and /dev/null differ
diff --git a/assets/images/avatar-2.png b/assets/images/avatar-2.png
deleted file mode 100644
index 8168ced..0000000
Binary files a/assets/images/avatar-2.png and /dev/null differ
diff --git a/assets/images/avatar-3.png b/assets/images/avatar-3.png
deleted file mode 100644
index d583013..0000000
Binary files a/assets/images/avatar-3.png and /dev/null differ
diff --git a/assets/images/avatar-4.png b/assets/images/avatar-4.png
deleted file mode 100644
index 63532f5..0000000
Binary files a/assets/images/avatar-4.png and /dev/null differ
diff --git a/assets/images/blog-1.jpg b/assets/images/blog-1.jpg
deleted file mode 100644
index 8b59c46..0000000
Binary files a/assets/images/blog-1.jpg and /dev/null differ
diff --git a/assets/images/blog-2.jpg b/assets/images/blog-2.jpg
deleted file mode 100644
index 34cd8f4..0000000
Binary files a/assets/images/blog-2.jpg and /dev/null differ
diff --git a/assets/images/blog-3.jpg b/assets/images/blog-3.jpg
deleted file mode 100644
index eef1c2c..0000000
Binary files a/assets/images/blog-3.jpg and /dev/null differ
diff --git a/assets/images/blog-4.jpg b/assets/images/blog-4.jpg
deleted file mode 100644
index 5c8e080..0000000
Binary files a/assets/images/blog-4.jpg and /dev/null differ
diff --git a/assets/images/blog-5.jpg b/assets/images/blog-5.jpg
deleted file mode 100644
index cb49416..0000000
Binary files a/assets/images/blog-5.jpg and /dev/null differ
diff --git a/assets/images/blog-6.jpg b/assets/images/blog-6.jpg
deleted file mode 100644
index 6aefd82..0000000
Binary files a/assets/images/blog-6.jpg and /dev/null differ
diff --git a/assets/images/icon-app.svg b/assets/images/icon-app.svg
deleted file mode 100644
index 5654e9d..0000000
--- a/assets/images/icon-app.svg
+++ /dev/null
@@ -1,14 +0,0 @@
-
diff --git a/assets/images/icon-design.svg b/assets/images/icon-design.svg
deleted file mode 100644
index 1eedc2f..0000000
--- a/assets/images/icon-design.svg
+++ /dev/null
@@ -1,27 +0,0 @@
-
diff --git a/assets/images/icon-dev.svg b/assets/images/icon-dev.svg
deleted file mode 100644
index bf61a2b..0000000
--- a/assets/images/icon-dev.svg
+++ /dev/null
@@ -1,54 +0,0 @@
-
diff --git a/assets/images/icon-photo.svg b/assets/images/icon-photo.svg
deleted file mode 100644
index 86ce321..0000000
--- a/assets/images/icon-photo.svg
+++ /dev/null
@@ -1,45 +0,0 @@
-
diff --git a/assets/images/logo-1-color.png b/assets/images/logo-1-color.png
deleted file mode 100644
index a6d1b5f..0000000
Binary files a/assets/images/logo-1-color.png and /dev/null differ
diff --git a/assets/images/logo-2-color.png b/assets/images/logo-2-color.png
deleted file mode 100644
index ee447ac..0000000
Binary files a/assets/images/logo-2-color.png and /dev/null differ
diff --git a/assets/images/logo-3-color.png b/assets/images/logo-3-color.png
deleted file mode 100644
index 498c22e..0000000
Binary files a/assets/images/logo-3-color.png and /dev/null differ
diff --git a/assets/images/logo-4-color.png b/assets/images/logo-4-color.png
deleted file mode 100644
index acaf2a3..0000000
Binary files a/assets/images/logo-4-color.png and /dev/null differ
diff --git a/assets/images/logo-5-color.png b/assets/images/logo-5-color.png
deleted file mode 100644
index 1be4295..0000000
Binary files a/assets/images/logo-5-color.png and /dev/null differ
diff --git a/assets/images/logo-6-color.png b/assets/images/logo-6-color.png
deleted file mode 100644
index d1a0ca5..0000000
Binary files a/assets/images/logo-6-color.png and /dev/null differ
diff --git a/assets/images/logo.ico b/assets/images/logo.ico
index ea99701..6239dec 100644
Binary files a/assets/images/logo.ico and b/assets/images/logo.ico differ
diff --git a/assets/images/logo.svg b/assets/images/logo.svg
index bd5b7de..88f3680 100644
Binary files a/assets/images/logo.svg and b/assets/images/logo.svg differ
diff --git a/assets/images/my-avatar.png b/assets/images/my-avatar.png
index e60a7d7..58aee08 100644
Binary files a/assets/images/my-avatar.png and b/assets/images/my-avatar.png differ
diff --git a/assets/images/project-1.jpg b/assets/images/project-1.jpg
deleted file mode 100644
index e4406ed..0000000
Binary files a/assets/images/project-1.jpg and /dev/null differ
diff --git a/assets/images/project-2.png b/assets/images/project-2.png
deleted file mode 100644
index d34ecf8..0000000
Binary files a/assets/images/project-2.png and /dev/null differ
diff --git a/assets/images/project-3.jpg b/assets/images/project-3.jpg
deleted file mode 100644
index f674434..0000000
Binary files a/assets/images/project-3.jpg and /dev/null differ
diff --git a/assets/images/project-4.png b/assets/images/project-4.png
deleted file mode 100644
index de07710..0000000
Binary files a/assets/images/project-4.png and /dev/null differ
diff --git a/assets/images/project-5.png b/assets/images/project-5.png
deleted file mode 100644
index 7d8d5ab..0000000
Binary files a/assets/images/project-5.png and /dev/null differ
diff --git a/assets/images/project-6.png b/assets/images/project-6.png
deleted file mode 100644
index b9d8c9f..0000000
Binary files a/assets/images/project-6.png and /dev/null differ
diff --git a/assets/images/project-7.png b/assets/images/project-7.png
deleted file mode 100644
index 088083f..0000000
Binary files a/assets/images/project-7.png and /dev/null differ
diff --git a/assets/images/project-8.jpg b/assets/images/project-8.jpg
deleted file mode 100644
index 21dff05..0000000
Binary files a/assets/images/project-8.jpg and /dev/null differ
diff --git a/assets/images/project-9.png b/assets/images/project-9.png
deleted file mode 100644
index 86b624c..0000000
Binary files a/assets/images/project-9.png and /dev/null differ
diff --git a/assets/js/script.js b/assets/js/script.js
index 6439a82..c6bc620 100644
--- a/assets/js/script.js
+++ b/assets/js/script.js
@@ -7,6 +7,31 @@ const elementToggleFunc = function (elem) { elem.classList.toggle("active"); }
+// Theme Toggle functionality
+const themeToggle = document.getElementById('themeToggle');
+const htmlElement = document.documentElement;
+
+// Check for saved theme preference or default to 'light'
+const currentTheme = localStorage.getItem('theme') || 'light';
+htmlElement.setAttribute('data-theme', currentTheme);
+
+// Toggle theme function
+themeToggle.addEventListener('click', function() {
+ const currentTheme = htmlElement.getAttribute('data-theme');
+ const newTheme = currentTheme === 'light' ? 'dark' : 'light';
+
+ htmlElement.setAttribute('data-theme', newTheme);
+ localStorage.setItem('theme', newTheme);
+
+ // Add rotation animation
+ this.style.transform = 'rotate(360deg)';
+ setTimeout(() => {
+ this.style.transform = 'rotate(0deg)';
+ }, 300);
+});
+
+
+
// sidebar variables
const sidebar = document.querySelector("[data-sidebar]");
const sidebarBtn = document.querySelector("[data-sidebar-btn]");
@@ -61,18 +86,23 @@ const selectItems = document.querySelectorAll("[data-select-item]");
const selectValue = document.querySelector("[data-selecct-value]");
const filterBtn = document.querySelectorAll("[data-filter-btn]");
-select.addEventListener("click", function () { elementToggleFunc(this); });
+// Only add event listeners if portfolio elements exist
+if (select) {
+ select.addEventListener("click", function () { elementToggleFunc(this); });
+}
// add event in all select items
-for (let i = 0; i < selectItems.length; i++) {
- selectItems[i].addEventListener("click", function () {
+if (selectItems.length > 0) {
+ for (let i = 0; i < selectItems.length; i++) {
+ selectItems[i].addEventListener("click", function () {
- let selectedValue = this.innerText.toLowerCase();
- selectValue.innerText = this.innerText;
- elementToggleFunc(select);
- filterFunc(selectedValue);
+ let selectedValue = this.innerText.toLowerCase();
+ if (selectValue) selectValue.innerText = this.innerText;
+ if (select) elementToggleFunc(select);
+ filterFunc(selectedValue);
- });
+ });
+ }
}
// filter variables
@@ -95,22 +125,24 @@ const filterFunc = function (selectedValue) {
}
// add event in all filter button items for large screen
-let lastClickedBtn = filterBtn[0];
+if (filterBtn.length > 0) {
+ let lastClickedBtn = filterBtn[0];
-for (let i = 0; i < filterBtn.length; i++) {
+ for (let i = 0; i < filterBtn.length; i++) {
- filterBtn[i].addEventListener("click", function () {
+ filterBtn[i].addEventListener("click", function () {
- let selectedValue = this.innerText.toLowerCase();
- selectValue.innerText = this.innerText;
- filterFunc(selectedValue);
+ let selectedValue = this.innerText.toLowerCase();
+ if (selectValue) selectValue.innerText = this.innerText;
+ filterFunc(selectedValue);
- lastClickedBtn.classList.remove("active");
- this.classList.add("active");
- lastClickedBtn = this;
+ lastClickedBtn.classList.remove("active");
+ this.classList.add("active");
+ lastClickedBtn = this;
- });
+ });
+ }
}
diff --git a/index.html b/index.html
index efac5f0..fce4c8c 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,7 @@
- vCard - Personal Portfolio
+ Windy Pham - MLOps Portfolio
-
+
@@ -39,16 +39,22 @@