diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
new file mode 100644
index 0000000..6e50d95
--- /dev/null
+++ b/.github/FUNDING.yml
@@ -0,0 +1,3 @@
+# These are supported funding model platforms
+
+patreon: codewithsadee # Replace with a single Patreon username
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..018b1ec
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 codewithsadee
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..c71be53
--- /dev/null
+++ b/README.md
@@ -0,0 +1,44 @@
+# vCard - Personal portfolio
+
+![GitHub repo size](https://img.shields.io/github/repo-size/codewithsadee/vcard-personal-portfolio)
+![GitHub stars](https://img.shields.io/github/stars/codewithsadee/vcard-personal-portfolio?style=social)
+![GitHub forks](https://img.shields.io/github/forks/codewithsadee/vcard-personal-portfolio?style=social)
+[![Twitter Follow](https://img.shields.io/twitter/follow/codewithsadee?style=social)](https://twitter.com/intent/follow?screen_name=codewithsadee)
+[![YouTube Video Views](https://img.shields.io/youtube/views/SoxmIlgf2zM?style=social)](https://youtu.be/SoxmIlgf2zM)
+
+vCard is a fully responsive personal portfolio website, responsive for all devices, built using HTML, CSS, and JavaScript.
+
+## Demo
+
+![vCard Desktop Demo](./website-demo-image/desktop.png "Desktop Demo")
+![vCard Mobile Demo](./website-demo-image/mobile.png "Mobile Demo")
+
+## Prerequisites
+
+Before you begin, ensure you have met the following requirements:
+
+* [Git](https://git-scm.com/downloads "Download Git") must be installed on your operating system.
+
+## Installing vCard
+
+To install **vCard**, follow these steps:
+
+Linux and macOS:
+
+```bash
+sudo git clone https://github.com/codewithsadee/vcard-personal-portfolio.git
+```
+
+Windows:
+
+```bash
+git clone https://github.com/codewithsadee/vcard-personal-portfolio.git
+```
+
+## Contact
+
+If you want to contact me you can reach me at [Twitter](https://www.twitter.com/codewithsadee).
+
+## License
+
+MIT
diff --git a/assets/css/style.css b/assets/css/style.css
new file mode 100644
index 0000000..4dcaeaa
--- /dev/null
+++ b/assets/css/style.css
@@ -0,0 +1,1882 @@
+/*-----------------------------------*\
+ #style.css
+\*-----------------------------------*/
+
+
+/**
+ * copyright 2022 @codewithsadee
+ */
+
+
+
+
+
+/*-----------------------------------*\
+ #CUSTOM PROPERTY
+\*-----------------------------------*/
+
+:root {
+
+ /**
+ * colors
+ */
+
+ /* gradient */
+
+ --bg-gradient-onyx: linear-gradient(
+ to bottom right,
+ hsl(240, 1%, 25%) 3%,
+ hsl(0, 0%, 19%) 97%
+ );
+ --bg-gradient-jet: linear-gradient(
+ to bottom right,
+ hsla(240, 1%, 18%, 0.251) 0%,
+ hsla(240, 2%, 11%, 0) 100%
+ ), hsl(240, 2%, 13%);
+ --bg-gradient-yellow-1: linear-gradient(
+ to bottom right,
+ hsl(45, 100%, 71%) 0%,
+ hsla(36, 100%, 69%, 0) 50%
+ );
+ --bg-gradient-yellow-2: linear-gradient(
+ 135deg,
+ hsla(45, 100%, 71%, 0.251) 0%,
+ hsla(35, 100%, 68%, 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%);
+ --eerie-black-2: hsl(240, 2%, 12%);
+ --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%);
+
+ /**
+ * typography
+ */
+
+ /* font-family */
+ --ff-poppins: 'Poppins', sans-serif;
+
+ /* font-size */
+ --fs-1: 24px;
+ --fs-2: 18px;
+ --fs-3: 17px;
+ --fs-4: 16px;
+ --fs-5: 15px;
+ --fs-6: 14px;
+ --fs-7: 13px;
+ --fs-8: 11px;
+
+ /* font-weight */
+ --fw-300: 300;
+ --fw-400: 400;
+ --fw-500: 500;
+ --fw-600: 600;
+
+ /**
+ * shadow
+ */
+
+ --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);
+
+ /**
+ * transition
+ */
+
+ --transition-1: 0.25s ease;
+ --transition-2: 0.5s ease-in-out;
+
+}
+
+
+
+
+
+/*-----------------------------------*\
+ #RESET
+\*-----------------------------------*/
+
+*, *::before, *::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+a { text-decoration: none; }
+
+li { list-style: none; }
+
+img, ion-icon, a, button, time, span { display: block; }
+
+button {
+ font: inherit;
+ background: none;
+ border: none;
+ text-align: left;
+ cursor: pointer;
+}
+
+input, textarea {
+ display: block;
+ width: 100%;
+ background: none;
+ font: inherit;
+}
+
+::selection {
+ background: var(--orange-yellow-crayola);
+ color: var(--smoky-black);
+}
+
+:focus { outline-color: var(--orange-yellow-crayola); }
+
+html { font-family: var(--ff-poppins); }
+
+body { background: var(--smoky-black); }
+
+
+
+
+
+/*-----------------------------------*\
+ #REUSED STYLE
+\*-----------------------------------*/
+
+.sidebar,
+article {
+ background: var(--eerie-black-2);
+ border: 1px solid var(--jet);
+ border-radius: 20px;
+ padding: 15px;
+ box-shadow: var(--shadow-1);
+ z-index: 1;
+}
+
+.separator {
+ width: 100%;
+ height: 1px;
+ background: var(--jet);
+ margin: 16px 0;
+}
+
+.icon-box {
+ position: relative;
+ background: var(--border-gradient-onyx);
+ width: 30px;
+ height: 30px;
+ border-radius: 8px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 16px;
+ color: var(--orange-yellow-crayola);
+ box-shadow: var(--shadow-1);
+ z-index: 1;
+}
+
+.icon-box::before {
+ content: "";
+ position: absolute;
+ inset: 1px;
+ background: var(--eerie-black-1);
+ border-radius: inherit;
+ z-index: -1;
+}
+
+.icon-box ion-icon { --ionicon-stroke-width: 35px; }
+
+article { display: none; }
+
+article.active {
+ display: block;
+ animation: fade 0.5s ease backwards;
+}
+
+@keyframes fade {
+ 0% { opacity: 0; }
+ 100% { opacity: 1; }
+}
+
+.h2,
+.h3,
+.h4,
+.h5 {
+ color: var(--white-2);
+ text-transform: capitalize;
+}
+
+.h2 { font-size: var(--fs-1); }
+
+.h3 { font-size: var(--fs-2); }
+
+.h4 { font-size: var(--fs-4); }
+
+.h5 {
+ font-size: var(--fs-7);
+ font-weight: var(--fw-500);
+}
+
+.article-title {
+ position: relative;
+ padding-bottom: 7px;
+}
+
+.article-title::after {
+ content: "";
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 30px;
+ height: 3px;
+ background: var(--text-gradient-yellow);
+ border-radius: 3px;
+}
+
+.has-scrollbar::-webkit-scrollbar {
+ width: 5px; /* for vertical scrollbar */
+ height: 5px; /* for horizontal scrollbar */
+}
+
+.has-scrollbar::-webkit-scrollbar-track {
+ background: var(--onyx);
+ border-radius: 5px;
+}
+
+.has-scrollbar::-webkit-scrollbar-thumb {
+ background: var(--orange-yellow-crayola);
+ border-radius: 5px;
+}
+
+.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;
+}
+
+.content-card::before {
+ content: "";
+ position: absolute;
+ inset: 1px;
+ background: var(--bg-gradient-jet);
+ border-radius: inherit;
+ z-index: -1;
+}
+
+
+
+
+
+/*-----------------------------------*\
+ #MAIN
+\*-----------------------------------*/
+
+main {
+ margin: 15px 12px;
+ margin-bottom: 75px;
+ min-width: 259px;
+}
+
+
+
+
+
+/*-----------------------------------*\
+ #SIDEBAR
+\*-----------------------------------*/
+
+.sidebar {
+ margin-bottom: 15px;
+ max-height: 112px;
+ overflow: hidden;
+ transition: var(--transition-2);
+}
+
+.sidebar.active { max-height: 405px; }
+
+.sidebar-info {
+ position: relative;
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ gap: 15px;
+}
+
+.avatar-box {
+ background: var(--bg-gradient-onyx);
+ border-radius: 20px;
+}
+
+.info-content .name {
+ color: var(--white-2);
+ font-size: var(--fs-3);
+ font-weight: var(--fw-500);
+ letter-spacing: -0.25px;
+ margin-bottom: 10px;
+}
+
+.info-content .title {
+ color: var(--white-1);
+ background: var(--onyx);
+ font-size: var(--fs-8);
+ font-weight: var(--fw-300);
+ width: max-content;
+ padding: 3px 12px;
+ border-radius: 8px;
+}
+
+.info_more-btn {
+ position: absolute;
+ top: -15px;
+ right: -15px;
+ border-radius: 0 15px;
+ font-size: 13px;
+ color: var(--orange-yellow-crayola);
+ background: var(--border-gradient-onyx);
+ padding: 10px;
+ box-shadow: var(--shadow-2);
+ transition: var(--transition-1);
+ z-index: 1;
+}
+
+.info_more-btn::before {
+ content: "";
+ position: absolute;
+ inset: 1px;
+ border-radius: inherit;
+ background: var(--bg-gradient-jet);
+ transition: var(--transition-1);
+ z-index: -1;
+}
+
+.info_more-btn:hover,
+.info_more-btn:focus { background: var(--bg-gradient-yellow-1); }
+
+.info_more-btn:hover::before,
+.info_more-btn:focus::before { background: var(--bg-gradient-yellow-2); }
+
+.info_more-btn span { display: none; }
+
+.sidebar-info_more {
+ opacity: 0;
+ visibility: hidden;
+ transition: var(--transition-2);
+}
+
+.sidebar.active .sidebar-info_more {
+ opacity: 1;
+ visibility: visible;
+}
+
+.contacts-list {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: 16px;
+}
+
+.contact-item {
+ min-width: 100%;
+ display: flex;
+ align-items: center;
+ gap: 16px;
+}
+
+.contact-info {
+ max-width: calc(100% - 46px);
+ width: calc(100% - 46px);
+}
+
+.contact-title {
+ color: var(--light-gray-70);
+ font-size: var(--fs-8);
+ text-transform: uppercase;
+ margin-bottom: 2px;
+}
+
+.contact-info :is(.contact-link, time, address) {
+ color: var(--white-2);
+ font-size: var(--fs-7);
+}
+
+.contact-info address { font-style: normal; }
+
+.social-list {
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ gap: 15px;
+ padding-bottom: 4px;
+ padding-left: 7px;
+}
+
+.social-item .social-link {
+ color: var(--light-gray-70);
+ font-size: 18px;
+}
+
+
+.social-item .social-link:hover { color: var(--light-gray); }
+
+
+
+
+
+/*-----------------------------------*\
+ #NAVBAR
+\*-----------------------------------*/
+
+.navbar {
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ background: hsla(240, 1%, 17%, 0.75);
+ backdrop-filter: blur(10px);
+ border: 1px solid var(--jet);
+ border-radius: 12px 12px 0 0;
+ box-shadow: var(--shadow-2);
+ z-index: 5;
+}
+
+.navbar-list {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+ padding: 0 10px;
+}
+
+.navbar-link {
+ color: var(--light-gray);
+ font-size: var(--fs-8);
+ padding: 20px 7px;
+ transition: color var(--transition-1);
+}
+
+.navbar-link:hover,
+.navbar-link:focus { color: var(--light-gray-70); }
+
+.navbar-link.active { color: var(--orange-yellow-crayola); }
+
+
+
+
+
+/*-----------------------------------*\
+ #ABOUT
+\*-----------------------------------*/
+
+.about .article-title { margin-bottom: 15px; }
+
+.about-text {
+ color: var(--light-gray);
+ font-size: var(--fs-6);
+ font-weight: var(--fw-300);
+ line-height: 1.6;
+}
+
+.about-text p { margin-bottom: 15px; }
+
+
+
+/**
+ * #service
+ */
+
+.service { margin-bottom: 35px; }
+
+.service-title { margin-bottom: 20px; }
+
+.service-list {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: 20px;
+}
+
+.service-item {
+ position: relative;
+ background: var(--border-gradient-onyx);
+ padding: 20px;
+ border-radius: 14px;
+ box-shadow: var(--shadow-2);
+ z-index: 1;
+}
+
+.service-item::before {
+ content: "";
+ position: absolute;
+ inset: 1px;
+ background: var(--bg-gradient-jet);
+ border-radius: inherit;
+ z-index: -1;
+}
+
+.service-icon-box { margin-bottom: 10px; }
+
+.service-icon-box img { margin: auto; }
+
+.service-content-box { text-align: center; }
+
+.service-item-title { margin-bottom: 7px; }
+
+.service-item-text {
+ color: var(--light-gray);
+ font-size: var(--fs-6);
+ font-weight: var(--fw-3);
+ line-height: 1.6;
+}
+
+
+/**
+ * #testimonials
+ */
+
+.testimonials { margin-bottom: 30px; }
+
+.testimonials-title { margin-bottom: 20px; }
+
+.testimonials-list {
+ display: flex;
+ justify-content: flex-start;
+ align-items: flex-start;
+ gap: 15px;
+ margin: 0 -15px;
+ padding: 25px 15px;
+ padding-bottom: 35px;
+ overflow-x: auto;
+ scroll-behavior: smooth;
+ overscroll-behavior-inline: contain;
+ scroll-snap-type: inline mandatory;
+}
+
+.testimonials-item {
+ min-width: 100%;
+ scroll-snap-align: center;
+}
+
+.testimonials-avatar-box {
+ position: absolute;
+ top: 0;
+ left: 0;
+ transform: translate(15px, -25px);
+ background: var(--bg-gradient-onyx);
+ border-radius: 14px;
+ box-shadow: var(--shadow-1);
+}
+
+.testimonials-item-title { margin-bottom: 7px; }
+
+.testimonials-text {
+ color: var(--light-gray);
+ font-size: var(--fs-6);
+ font-weight: var(--fw-300);
+ line-height: 1.6;
+ display: -webkit-box;
+ line-clamp: 4;
+ -webkit-line-clamp: 4;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+}
+
+
+/**
+ * #testimonials-modal
+ */
+
+.modal-container {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ overflow-y: auto;
+ overscroll-behavior: contain;
+ z-index: 20;
+ pointer-events: none;
+ visibility: hidden;
+}
+
+.modal-container::-webkit-scrollbar { display: none; }
+
+.modal-container.active {
+ pointer-events: all;
+ visibility: visible;
+}
+
+.overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100vh;
+ background: hsl(0, 0%, 5%);
+ opacity: 0;
+ visibility: hidden;
+ pointer-events: none;
+ z-index: 1;
+ transition: var(--transition-1);
+}
+
+.overlay.active {
+ opacity: 0.8;
+ visibility: visible;
+ pointer-events: all;
+}
+
+.testimonials-modal {
+ background: var(--eerie-black-2);
+ position: relative;
+ padding: 15px;
+ margin: 15px 12px;
+ border: 1px solid var(--jet);
+ border-radius: 14px;
+ box-shadow: var(--shadow-5);
+ transform: scale(1.2);
+ opacity: 0;
+ transition: var(--transition-1);
+ z-index: 2;
+}
+
+.modal-container.active .testimonials-modal {
+ transform: scale(1);
+ opacity: 1;
+}
+
+.modal-close-btn {
+ position: absolute;
+ top: 15px;
+ right: 15px;
+ background: var(--onyx);
+ border-radius: 8px;
+ width: 32px;
+ height: 32px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ color: var(--white-2);
+ font-size: 18px;
+ opacity: 0.7;
+}
+
+.modal-close-btn:hover,
+.modal-close-btn:focus { opacity: 1; }
+
+.modal-close-btn ion-icon { --ionicon-stroke-width: 50px; }
+
+.modal-avatar-box {
+ background: var(--bg-gradient-onyx);
+ width: max-content;
+ border-radius: 14px;
+ margin-bottom: 15px;
+ box-shadow: var(--shadow-2);
+}
+
+.modal-img-wrapper > img { display: none; }
+
+.modal-title { margin-bottom: 4px; }
+
+.modal-content time {
+ font-size: var(--fs-6);
+ color: var(--light-gray-70);
+ font-weight: var(--fw-300);
+ margin-bottom: 10px;
+}
+
+.modal-content p {
+ color: var(--light-gray);
+ font-size: var(--fs-6);
+ font-weight: var(--fw-300);
+ line-height: 1.6;
+}
+
+
+/**
+ * #clients
+ */
+
+.clients { margin-bottom: 15px; }
+
+.clients-list {
+ display: flex;
+ justify-content: flex-start;
+ align-items: flex-start;
+ gap: 15px;
+ margin: 0 -15px;
+ padding: 25px;
+ padding-bottom: 25px;
+ overflow-x: auto;
+ scroll-behavior: smooth;
+ overscroll-behavior-inline: contain;
+ scroll-snap-type: inline mandatory;
+ scroll-padding-inline: 25px;
+}
+
+.clients-item {
+ min-width: 50%;
+ scroll-snap-align: start;
+}
+
+.clients-item img {
+ width: 100%;
+ filter: grayscale(1);
+ transition: var(--transition-1);
+}
+
+.clients-item img:hover { filter: grayscale(0); }
+
+
+
+
+
+/*-----------------------------------*\
+ #RESUME
+\*-----------------------------------*/
+
+.article-title { margin-bottom: 30px; }
+
+
+/**
+ * education and experience
+ */
+
+.timeline { margin-bottom: 30px; }
+
+.timeline .title-wrapper {
+ display: flex;
+ align-items: center;
+ gap: 15px;
+ margin-bottom: 25px;
+}
+
+.timeline-list {
+ font-size: var(--fs-6);
+ margin-left: 45px;
+}
+
+.timeline-item { position: relative; }
+
+.timeline-item:not(:last-child) { margin-bottom: 20px; }
+
+.timeline-item-title {
+ font-size: var(--fs-6);
+ line-height: 1.3;
+ margin-bottom: 7px;
+}
+
+.timeline-list span {
+ color: var(--vegas-gold);
+ font-weight: var(--fw-400);
+ line-height: 1.6;
+}
+
+.timeline-item:not(:last-child)::before {
+ content: "";
+ position: absolute;
+ top: -25px;
+ left: -30px;
+ width: 1px;
+ height: calc(100% + 50px);
+ background: var(--jet);
+}
+
+.timeline-item::after {
+ content: "";
+ position: absolute;
+ top: 5px;
+ left: -33px;
+ height: 6px;
+ width: 6px;
+ background: var(--text-gradient-yellow);
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px var(--jet);
+}
+
+.timeline-text {
+ color: var(--light-gray);
+ font-weight: var(--fw-300);
+ line-height: 1.6;
+}
+
+
+/**
+ * skills
+ */
+
+.skills-title { margin-bottom: 20px; }
+
+.skills-list { padding: 20px; }
+
+
+.skills-item:not(:last-child) { margin-bottom: 15px; }
+
+.skill .title-wrapper {
+ display: flex;
+ align-items: center;
+ gap: 5px;
+ margin-bottom: 8px;
+}
+
+.skill .title-wrapper data {
+ color: var(--light-gray);
+ font-size: var(--fs-7);
+ font-weight: var(--fw-300);
+}
+
+.skill-progress-bg {
+ background: var(--jet);
+ width: 100%;
+ height: 8px;
+ border-radius: 10px;
+}
+
+.skill-progress-fill {
+ background: var(--text-gradient-yellow);
+ height: 100%;
+ border-radius: inherit;
+}
+
+
+
+
+
+/*-----------------------------------*\
+ #PORTFOLIO
+\*-----------------------------------*/
+
+.filter-list { display: none; }
+
+.filter-select-box {
+ position: relative;
+ margin-bottom: 25px;
+}
+
+.filter-select {
+ background: var(--eerie-black-2);
+ color: var(--light-gray);
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+ padding: 12px 16px;
+ border: 1px solid var(--jet);
+ border-radius: 14px;
+ font-size: var(--fs-6);
+ font-weight: var(--fw-300);
+}
+
+.filter-select.active .select-icon { transform: rotate(0.5turn); }
+
+.select-list {
+ background: var(--eerie-black-2);
+ position: absolute;
+ top: calc(100% + 6px);
+ width: 100%;
+ padding: 6px;
+ border: 1px solid var(--jet);
+ border-radius: 14px;
+ z-index: 2;
+ opacity: 0;
+ visibility: hidden;
+ pointer-events: none;
+ transition: 0.15s ease-in-out;
+}
+
+.filter-select.active + .select-list {
+ opacity: 1;
+ visibility: visible;
+ pointer-events: all;
+}
+
+.select-item button {
+ background: var(--eerie-black-2);
+ color: var(--light-gray);
+ font-size: var(--fs-6);
+ font-weight: var(--fw-300);
+ text-transform: capitalize;
+ width: 100%;
+ padding: 8px 10px;
+ border-radius: 8px;
+}
+
+.select-item button:hover { --eerie-black-2: hsl(240, 2%, 20%); }
+
+.project-list {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: 30px;
+ margin-bottom: 10px;
+}
+
+.project-item { display: none; }
+
+.project-item.active {
+ display: block;
+ animation: scaleUp 0.25s ease forwards;
+}
+
+@keyframes scaleUp {
+ 0% { transform: scale(0.5); }
+ 100% { transform: scale(1); }
+}
+
+.project-item > a { width: 100%; }
+
+.project-img {
+ position: relative;
+ width: 100%;
+ height: 200px;
+ border-radius: 16px;
+ overflow: hidden;
+ margin-bottom: 15px;
+}
+
+.project-img::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: transparent;
+ z-index: 1;
+ transition: var(--transition-1);
+}
+
+.project-item > a:hover .project-img::before { background: hsla(0, 0%, 0%, 0.5); }
+
+.project-item-icon-box {
+ --scale: 0.8;
+
+ background: var(--jet);
+ color: var(--orange-yellow-crayola);
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%) scale(var(--scale));
+ font-size: 20px;
+ padding: 18px;
+ border-radius: 12px;
+ opacity: 0;
+ z-index: 1;
+ transition: var(--transition-1);
+}
+
+.project-item > a:hover .project-item-icon-box {
+ --scale: 1;
+ opacity: 1;
+}
+
+.project-item-icon-box ion-icon { --ionicon-stroke-width: 50px; }
+
+.project-img img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ transition: var(--transition-1);
+}
+
+.project-item > a:hover img { transform: scale(1.1); }
+
+.project-title,
+.project-category { margin-left: 10px; }
+
+.project-title {
+ color: var(--white-2);
+ font-size: var(--fs-5);
+ font-weight: var(--fw-400);
+ text-transform: capitalize;
+ line-height: 1.3;
+}
+
+.project-category {
+ color: var(--light-gray-70);
+ font-size: var(--fs-6);
+ font-weight: var(--fw-300);
+}
+
+
+
+
+
+/*-----------------------------------*\
+ #BLOG
+\*-----------------------------------*/
+
+.blog-posts { margin-bottom: 10px; }
+
+.blog-posts-list {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: 20px;
+}
+
+.blog-post-item > a {
+ position: relative;
+ background: var(--border-gradient-onyx);
+ height: 100%;
+ box-shadow: var(--shadow-4);
+ border-radius: 16px;
+ z-index: 1;
+}
+
+.blog-post-item > a::before {
+ content: "";
+ position: absolute;
+ inset: 1px;
+ border-radius: inherit;
+ background: var(--eerie-black-1);
+ z-index: -1;
+}
+
+.blog-banner-box {
+ width: 100%;
+ height: 200px;
+ border-radius: 12px;
+ overflow: hidden;
+}
+
+.blog-banner-box img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ transition: var(--transition-1);
+}
+
+.blog-post-item > a:hover .blog-banner-box img { transform: scale(1.1); }
+
+.blog-content { padding: 15px; }
+
+.blog-meta {
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ gap: 7px;
+ margin-bottom: 10px;
+}
+
+.blog-meta :is(.blog-category, time) {
+ color: var(--light-gray-70);
+ font-size: var(--fs-6);
+ font-weight: var(--fw-300);
+}
+
+.blog-meta .dot {
+ background: var(--light-gray-70);
+ width: 4px;
+ height: 4px;
+ border-radius: 4px;
+}
+
+.blog-item-title {
+ margin-bottom: 10px;
+ line-height: 1.3;
+ transition: var(--transition-1);
+}
+
+.blog-post-item > a:hover .blog-item-title { color: var(--orange-yellow-crayola); }
+
+.blog-text {
+ color: var(--light-gray);
+ font-size: var(--fs-6);
+ font-weight: var(--fw-300);
+ line-height: 1.6;
+}
+
+
+
+
+
+/*-----------------------------------*\
+ #CONTACT
+\*-----------------------------------*/
+
+.mapbox {
+ position: relative;
+ height: 250px;
+ width: 100%;
+ border-radius: 16px;
+ margin-bottom: 30px;
+ border: 1px solid var(--jet);
+ overflow: hidden;
+}
+
+.mapbox figure { height: 100%; }
+
+.mapbox iframe {
+ width: 100%;
+ height: 100%;
+ border: none;
+ filter: grayscale(1) invert(1);
+}
+
+.contact-form { margin-bottom: 10px; }
+
+.form-title { margin-bottom: 20px; }
+
+.input-wrapper {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: 25px;
+ margin-bottom: 25px;
+}
+
+.form-input {
+ color: var(--white-2);
+ font-size: var(--fs-6);
+ font-weight: var(--fw-400);
+ padding: 13px 20px;
+ border: 1px solid var(--jet);
+ border-radius: 14px;
+ outline: none;
+}
+
+.form-input::placeholder { font-weight: var(--fw-500); }
+
+.form-input:focus { border-color: var(--orange-yellow-crayola); }
+
+textarea.form-input {
+ min-height: 100px;
+ height: 120px;
+ max-height: 200px;
+ resize: vertical;
+ margin-bottom: 25px;
+}
+
+textarea.form-input::-webkit-resizer { display: none; }
+
+.form-input:focus:invalid { border-color: var(--bittersweet-shimmer); }
+
+.form-btn {
+ position: relative;
+ width: 100%;
+ background: var(--border-gradient-onyx);
+ color: var(--orange-yellow-crayola);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 10px;
+ padding: 13px 20px;
+ border-radius: 14px;
+ font-size: var(--fs-6);
+ text-transform: capitalize;
+ box-shadow: var(--shadow-3);
+ z-index: 1;
+ transition: var(--transition-1);
+}
+
+.form-btn::before {
+ content: "";
+ position: absolute;
+ inset: 1px;
+ background: var(--bg-gradient-jet);
+ border-radius: inherit;
+ z-index: -1;
+ transition: var(--transition-1);
+}
+
+.form-btn ion-icon { font-size: 16px; }
+
+.form-btn:hover { background: var(--bg-gradient-yellow-1); }
+
+.form-btn:hover::before { background: var(--bg-gradient-yellow-2); }
+
+.form-btn:disabled {
+ opacity: 0.7;
+ cursor: not-allowed;
+}
+
+.form-btn:disabled:hover { background: var(--border-gradient-onyx); }
+
+.form-btn:disabled:hover::before { background: var(--bg-gradient-jet); }
+
+
+
+
+
+/*-----------------------------------*\
+ #RESPONSIVE
+\*-----------------------------------*/
+
+/**
+ * responsive larger than 450px screen
+ */
+
+@media (min-width: 450px) {
+
+ /**
+ * client
+ */
+
+ .clients-item { min-width: calc(33.33% - 10px); }
+
+
+
+ /**
+ * #PORTFOLIO, BLOG
+ */
+
+ .project-img,
+ .blog-banner-box { height: auto; }
+
+}
+
+
+
+
+
+/**
+ * responsive larger than 580px screen
+ */
+
+@media (min-width: 580px) {
+
+ /**
+ * CUSTOM PROPERTY
+ */
+
+ :root {
+
+ /**
+ * typography
+ */
+
+ --fs-1: 32px;
+ --fs-2: 24px;
+ --fs-3: 26px;
+ --fs-4: 18px;
+ --fs-6: 15px;
+ --fs-7: 15px;
+ --fs-8: 12px;
+
+ }
+
+
+
+ /**
+ * #REUSED STYLE
+ */
+
+ .sidebar, article {
+ width: 520px;
+ margin-inline: auto;
+ padding: 30px;
+ }
+
+ .article-title {
+ font-weight: var(--fw-600);
+ padding-bottom: 15px;
+ }
+
+ .article-title::after {
+ width: 40px;
+ height: 5px;
+ }
+
+ .icon-box {
+ width: 48px;
+ height: 48px;
+ border-radius: 12px;
+ font-size: 18px;
+ }
+
+
+
+ /**
+ * #MAIN
+ */
+
+ main {
+ margin-top: 60px;
+ margin-bottom: 100px;
+ }
+
+
+
+ /**
+ * #SIDEBAR
+ */
+
+ .sidebar {
+ max-height: 180px;
+ margin-bottom: 30px;
+ }
+
+ .sidebar.active { max-height: 584px; }
+
+ .sidebar-info { gap: 25px; }
+
+ .avatar-box { border-radius: 30px; }
+
+ .avatar-box img { width: 120px; }
+
+ .info-content .name { margin-bottom: 15px; }
+
+ .info-content .title { padding: 5px 18px; }
+
+ .info_more-btn {
+ top: -30px;
+ right: -30px;
+ padding: 10px 15px;
+ }
+
+ .info_more-btn span {
+ display: block;
+ font-size: var(--fs-8);
+ }
+
+ .info_more-btn ion-icon { display: none; }
+
+ .separator { margin: 32px 0; }
+
+ .contacts-list { gap: 20px; }
+
+ .contact-info {
+ max-width: calc(100% - 64px);
+ width: calc(100% - 64px);
+ }
+
+
+
+ /**
+ * #NAVBAR
+ */
+
+ .navbar { border-radius: 20px 20px 0 0; }
+
+ .navbar-list { gap: 20px; }
+
+ .navbar-link { --fs-8: 14px; }
+
+
+
+ /**
+ * #ABOUT
+ */
+
+ .about .article-title { margin-bottom: 20px; }
+
+ .about-text { margin-bottom: 40px; }
+
+ /* service */
+
+ .service-item {
+ display: flex;
+ justify-content: flex-start;
+ align-items: flex-start;
+ gap: 18px;
+ padding: 30px;
+ }
+
+ .service-icon-box {
+ margin-bottom: 0;
+ margin-top: 5px;
+ }
+
+ .service-content-box { text-align: left; }
+
+ /* testimonials */
+
+ .testimonials-title { margin-bottom: 25px; }
+
+ .testimonials-list {
+ gap: 30px;
+ margin: 0 -30px;
+ padding: 30px;
+ padding-bottom: 35px;
+ }
+
+ .content-card {
+ padding: 30px;
+ padding-top: 25px;
+ }
+
+ .testimonials-avatar-box {
+ transform: translate(30px, -30px);
+ border-radius: 20px;
+ }
+
+ .testimonials-avatar-box img { width: 80px; }
+
+ .testimonials-item-title {
+ margin-bottom: 10px;
+ margin-left: 95px;
+ }
+
+ .testimonials-text {
+ line-clamp: 2;
+ -webkit-line-clamp: 2;
+ }
+
+ /* testimonials modal */
+
+ .modal-container { padding: 20px; }
+
+ .testimonials-modal {
+ display: flex;
+ justify-content: flex-start;
+ align-items: stretch;
+ gap: 25px;
+ padding: 30px;
+ border-radius: 20px;
+ }
+
+ .modal-img-wrapper {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .modal-avatar-box {
+ border-radius: 18px;
+ margin-bottom: 0;
+ }
+
+ .modal-avatar-box img { width: 65px; }
+
+ .modal-img-wrapper > img {
+ display: block;
+ flex-grow: 1;
+ width: 35px;
+ }
+
+ /* clients */
+
+ .clients-list {
+ gap: 50px;
+ margin: 0 -30px;
+ padding: 45px;
+ scroll-padding-inline: 45px;
+ }
+
+ .clients-item { min-width: calc(33.33% - 35px); }
+
+
+
+ /**
+ * #RESUME
+ */
+
+ .timeline-list { margin-left: 65px; }
+
+ .timeline-item:not(:last-child)::before { left: -40px; }
+
+ .timeline-item::after {
+ height: 8px;
+ width: 8px;
+ left: -43px;
+ }
+
+ .skills-item:not(:last-child) { margin-bottom: 25px; }
+
+
+
+ /**
+ * #PORTFOLIO, BLOG
+ */
+
+ .project-img, .blog-banner-box { border-radius: 16px; }
+
+ .blog-posts-list { gap: 30px; }
+
+ .blog-content { padding: 25px; }
+
+
+
+ /**
+ * #CONTACT
+ */
+
+ .mapbox {
+ height: 380px;
+ border-radius: 18px;
+ }
+
+ .input-wrapper {
+ gap: 30px;
+ margin-bottom: 30px;
+ }
+
+ .form-input { padding: 15px 20px; }
+
+ textarea.form-input { margin-bottom: 30px; }
+
+ .form-btn {
+ --fs-6: 16px;
+ padding: 16px 20px;
+ }
+
+ .form-btn ion-icon { font-size: 18px; }
+
+}
+
+
+
+
+
+/**
+ * responsive larger than 768px screen
+ */
+
+@media (min-width: 768px) {
+
+ /**
+ * REUSED STYLE
+ */
+
+ .sidebar, article { width: 700px; }
+
+ .has-scrollbar::-webkit-scrollbar-button { width: 100px; }
+
+
+
+ /**
+ * SIDEBAR
+ */
+
+ .contacts-list {
+ grid-template-columns: 1fr 1fr;
+ gap: 30px 15px;
+ }
+
+
+
+ /**
+ * NAVBAR
+ */
+
+ .navbar-link { --fs-8: 15px; }
+
+
+
+ /**
+ * ABOUT
+ */
+
+ /* testimonials modal */
+
+ .testimonials-modal {
+ gap: 35px;
+ max-width: 680px;
+ }
+
+ .modal-avatar-box img { width: 80px; }
+
+
+
+ /**
+ * PORTFOLIO
+ */
+
+ .article-title { padding-bottom: 20px; }
+
+ .filter-select-box { display: none; }
+
+ .filter-list {
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ gap: 25px;
+ padding-left: 5px;
+ margin-bottom: 30px;
+ }
+
+ .filter-item button {
+ color: var(--light-gray);
+ font-size: var(--fs-5);
+ transition: var(--transition-1);
+ }
+
+ .filter-item button:hover { color: var(--light-gray-70); }
+
+ .filter-item button.active { color: var(--orange-yellow-crayola); }
+
+ /* portfolio and blog grid */
+
+ .project-list, .blog-posts-list { grid-template-columns: 1fr 1fr; }
+
+
+
+ /**
+ * CONTACT
+ */
+
+ .input-wrapper { grid-template-columns: 1fr 1fr; }
+
+ .form-btn {
+ width: max-content;
+ margin-left: auto;
+ }
+
+}
+
+
+
+
+
+/**
+ * responsive larger than 1024px screen
+ */
+
+@media (min-width: 1024px) {
+
+ /**
+ * CUSTOM PROPERTY
+ */
+
+ :root {
+
+ /**
+ * shadow
+ */
+
+ --shadow-1: -4px 8px 24px hsla(0, 0%, 0%, 0.125);
+ --shadow-2: 0 16px 30px hsla(0, 0%, 0%, 0.125);
+ --shadow-3: 0 16px 40px hsla(0, 0%, 0%, 0.125);
+
+ }
+
+
+
+ /**
+ * REUSED STYLE
+ */
+
+ .sidebar, article {
+ width: 950px;
+ box-shadow: var(--shadow-5);
+ }
+
+
+
+ /**
+ * MAIN
+ */
+
+ main { margin-bottom: 60px; }
+
+ .main-content {
+ position: relative;
+ width: max-content;
+ margin: auto;
+ }
+
+
+
+ /**
+ * NAVBAR
+ */
+
+ .navbar {
+ position: absolute;
+ bottom: auto;
+ top: 0;
+ left: auto;
+ right: 0;
+ width: max-content;
+ border-radius: 0 20px;
+ padding: 0 20px;
+ box-shadow: none;
+ }
+
+ .navbar-list {
+ gap: 30px;
+ padding: 0 20px;
+ }
+
+ .navbar-link { font-weight: var(--fw-500); }
+
+
+
+ /**
+ * ABOUT
+ */
+
+ /* service */
+
+ .service-list {
+ grid-template-columns: 1fr 1fr;
+ gap: 20px 25px;
+ }
+
+ /* testimonials */
+
+ .testimonials-item { min-width: calc(50% - 15px); }
+
+ /* clients */
+
+ .clients-item { min-width: calc(25% - 38px); }
+
+
+
+ /**
+ * PORTFOLIO
+ */
+
+ .project-list { grid-template-columns: repeat(3, 1fr); }
+
+
+
+ /**
+ * BLOG
+ */
+
+ .blog-banner-box { height: 230px; }
+
+}
+
+
+
+
+
+/**
+ * responsive larger than 1250px screen
+ */
+
+@media (min-width: 1250px) {
+
+ /**
+ * RESET
+ */
+
+ body::-webkit-scrollbar { width: 20px; }
+
+ body::-webkit-scrollbar-track { background: var(--smoky-black); }
+
+ body::-webkit-scrollbar-thumb {
+ border: 5px solid var(--smoky-black);
+ background: hsla(0, 0%, 100%, 0.1);
+ 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);
+ }
+
+ body::-webkit-scrollbar-thumb:hover { background: hsla(0, 0%, 100%, 0.15); }
+
+ body::-webkit-scrollbar-button { height: 60px; }
+
+
+
+ /**
+ * REUSED STYLE
+ */
+
+ .sidebar, article { width: auto; }
+
+ article { min-height: 100%; }
+
+
+
+ /**
+ * MAIN
+ */
+
+ main {
+ max-width: 1200px;
+ margin-inline: auto;
+ display: flex;
+ justify-content: center;
+ align-items: stretch;
+ gap: 25px;
+ }
+
+ .main-content {
+ min-width: 75%;
+ width: 75%;
+ margin: 0;
+ }
+
+
+
+ /**
+ * SIDEBAR
+ */
+
+ .sidebar {
+ position: sticky;
+ top: 60px;
+ max-height: max-content;
+ height: 100%;
+ margin-bottom: 0;
+ padding-top: 60px;
+ z-index: 1;
+ }
+
+ .sidebar-info { flex-direction: column; }
+
+ .avatar-box img { width: 150px; }
+
+ .info-content .name {
+ white-space: nowrap;
+ text-align: center;
+ }
+
+ .info-content .title { margin: auto; }
+
+ .info_more-btn { display: none; }
+
+ .sidebar-info_more {
+ opacity: 1;
+ visibility: visible;
+ }
+
+ .contacts-list { grid-template-columns: 1fr; }
+
+ .contact-info :is(.contact-link) {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ .contact-info :is(.contact-link, time, address) {
+ --fs-7: 14px;
+ font-weight: var(--fw-300);
+ }
+
+ .separator:last-of-type {
+ margin: 15px 0;
+ opacity: 0;
+ }
+
+ .social-list { justify-content: center; }
+
+
+
+ /**
+ * RESUME
+ */
+
+ .timeline-text { max-width: 700px; }
+
+}
\ No newline at end of file
diff --git a/assets/images/avatar-1.png b/assets/images/avatar-1.png
new file mode 100644
index 0000000..def748f
Binary files /dev/null and b/assets/images/avatar-1.png differ
diff --git a/assets/images/avatar-2.png b/assets/images/avatar-2.png
new file mode 100644
index 0000000..8168ced
Binary files /dev/null and b/assets/images/avatar-2.png differ
diff --git a/assets/images/avatar-3.png b/assets/images/avatar-3.png
new file mode 100644
index 0000000..d583013
Binary files /dev/null and b/assets/images/avatar-3.png differ
diff --git a/assets/images/avatar-4.png b/assets/images/avatar-4.png
new file mode 100644
index 0000000..63532f5
Binary files /dev/null and b/assets/images/avatar-4.png differ
diff --git a/assets/images/blog-1.jpg b/assets/images/blog-1.jpg
new file mode 100644
index 0000000..8b59c46
Binary files /dev/null and b/assets/images/blog-1.jpg differ
diff --git a/assets/images/blog-2.jpg b/assets/images/blog-2.jpg
new file mode 100644
index 0000000..34cd8f4
Binary files /dev/null and b/assets/images/blog-2.jpg differ
diff --git a/assets/images/blog-3.jpg b/assets/images/blog-3.jpg
new file mode 100644
index 0000000..eef1c2c
Binary files /dev/null and b/assets/images/blog-3.jpg differ
diff --git a/assets/images/blog-4.jpg b/assets/images/blog-4.jpg
new file mode 100644
index 0000000..5c8e080
Binary files /dev/null and b/assets/images/blog-4.jpg differ
diff --git a/assets/images/blog-5.jpg b/assets/images/blog-5.jpg
new file mode 100644
index 0000000..cb49416
Binary files /dev/null and b/assets/images/blog-5.jpg differ
diff --git a/assets/images/blog-6.jpg b/assets/images/blog-6.jpg
new file mode 100644
index 0000000..6aefd82
Binary files /dev/null and b/assets/images/blog-6.jpg differ
diff --git a/assets/images/icon-app.svg b/assets/images/icon-app.svg
new file mode 100644
index 0000000..5654e9d
--- /dev/null
+++ b/assets/images/icon-app.svg
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/assets/images/icon-design.svg b/assets/images/icon-design.svg
new file mode 100644
index 0000000..1eedc2f
--- /dev/null
+++ b/assets/images/icon-design.svg
@@ -0,0 +1,27 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/assets/images/icon-dev.svg b/assets/images/icon-dev.svg
new file mode 100644
index 0000000..bf61a2b
--- /dev/null
+++ b/assets/images/icon-dev.svg
@@ -0,0 +1,54 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/assets/images/icon-photo.svg b/assets/images/icon-photo.svg
new file mode 100644
index 0000000..86ce321
--- /dev/null
+++ b/assets/images/icon-photo.svg
@@ -0,0 +1,45 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/assets/images/icon-quote.svg b/assets/images/icon-quote.svg
new file mode 100644
index 0000000..b751853
--- /dev/null
+++ b/assets/images/icon-quote.svg
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+
diff --git a/assets/images/logo-1-color.png b/assets/images/logo-1-color.png
new file mode 100644
index 0000000..a6d1b5f
Binary files /dev/null and b/assets/images/logo-1-color.png differ
diff --git a/assets/images/logo-2-color.png b/assets/images/logo-2-color.png
new file mode 100644
index 0000000..ee447ac
Binary files /dev/null and b/assets/images/logo-2-color.png differ
diff --git a/assets/images/logo-3-color.png b/assets/images/logo-3-color.png
new file mode 100644
index 0000000..498c22e
Binary files /dev/null and b/assets/images/logo-3-color.png differ
diff --git a/assets/images/logo-4-color.png b/assets/images/logo-4-color.png
new file mode 100644
index 0000000..acaf2a3
Binary files /dev/null and b/assets/images/logo-4-color.png differ
diff --git a/assets/images/logo-5-color.png b/assets/images/logo-5-color.png
new file mode 100644
index 0000000..1be4295
Binary files /dev/null and b/assets/images/logo-5-color.png differ
diff --git a/assets/images/logo-6-color.png b/assets/images/logo-6-color.png
new file mode 100644
index 0000000..d1a0ca5
Binary files /dev/null and b/assets/images/logo-6-color.png differ
diff --git a/assets/images/logo.ico b/assets/images/logo.ico
new file mode 100644
index 0000000..ea99701
Binary files /dev/null and b/assets/images/logo.ico differ
diff --git a/assets/images/logo.svg b/assets/images/logo.svg
new file mode 100644
index 0000000..bd5b7de
--- /dev/null
+++ b/assets/images/logo.svg
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/assets/images/my-avatar.png b/assets/images/my-avatar.png
new file mode 100644
index 0000000..e60a7d7
Binary files /dev/null and b/assets/images/my-avatar.png differ
diff --git a/assets/images/project-1.jpg b/assets/images/project-1.jpg
new file mode 100644
index 0000000..e4406ed
Binary files /dev/null and b/assets/images/project-1.jpg differ
diff --git a/assets/images/project-2.png b/assets/images/project-2.png
new file mode 100644
index 0000000..d34ecf8
Binary files /dev/null and b/assets/images/project-2.png differ
diff --git a/assets/images/project-3.jpg b/assets/images/project-3.jpg
new file mode 100644
index 0000000..f674434
Binary files /dev/null and b/assets/images/project-3.jpg differ
diff --git a/assets/images/project-4.png b/assets/images/project-4.png
new file mode 100644
index 0000000..de07710
Binary files /dev/null and b/assets/images/project-4.png differ
diff --git a/assets/images/project-5.png b/assets/images/project-5.png
new file mode 100644
index 0000000..7d8d5ab
Binary files /dev/null and b/assets/images/project-5.png differ
diff --git a/assets/images/project-6.png b/assets/images/project-6.png
new file mode 100644
index 0000000..b9d8c9f
Binary files /dev/null and b/assets/images/project-6.png differ
diff --git a/assets/images/project-7.png b/assets/images/project-7.png
new file mode 100644
index 0000000..088083f
Binary files /dev/null and b/assets/images/project-7.png differ
diff --git a/assets/images/project-8.jpg b/assets/images/project-8.jpg
new file mode 100644
index 0000000..21dff05
Binary files /dev/null and b/assets/images/project-8.jpg differ
diff --git a/assets/images/project-9.png b/assets/images/project-9.png
new file mode 100644
index 0000000..86b624c
Binary files /dev/null and b/assets/images/project-9.png differ
diff --git a/assets/js/script.js b/assets/js/script.js
new file mode 100644
index 0000000..6439a82
--- /dev/null
+++ b/assets/js/script.js
@@ -0,0 +1,159 @@
+'use strict';
+
+
+
+// element toggle function
+const elementToggleFunc = function (elem) { elem.classList.toggle("active"); }
+
+
+
+// sidebar variables
+const sidebar = document.querySelector("[data-sidebar]");
+const sidebarBtn = document.querySelector("[data-sidebar-btn]");
+
+// sidebar toggle functionality for mobile
+sidebarBtn.addEventListener("click", function () { elementToggleFunc(sidebar); });
+
+
+
+// testimonials variables
+const testimonialsItem = document.querySelectorAll("[data-testimonials-item]");
+const modalContainer = document.querySelector("[data-modal-container]");
+const modalCloseBtn = document.querySelector("[data-modal-close-btn]");
+const overlay = document.querySelector("[data-overlay]");
+
+// modal variable
+const modalImg = document.querySelector("[data-modal-img]");
+const modalTitle = document.querySelector("[data-modal-title]");
+const modalText = document.querySelector("[data-modal-text]");
+
+// modal toggle function
+const testimonialsModalFunc = function () {
+ modalContainer.classList.toggle("active");
+ overlay.classList.toggle("active");
+}
+
+// add click event to all modal items
+for (let i = 0; i < testimonialsItem.length; i++) {
+
+ testimonialsItem[i].addEventListener("click", function () {
+
+ modalImg.src = this.querySelector("[data-testimonials-avatar]").src;
+ modalImg.alt = this.querySelector("[data-testimonials-avatar]").alt;
+ modalTitle.innerHTML = this.querySelector("[data-testimonials-title]").innerHTML;
+ modalText.innerHTML = this.querySelector("[data-testimonials-text]").innerHTML;
+
+ testimonialsModalFunc();
+
+ });
+
+}
+
+// add click event to modal close button
+modalCloseBtn.addEventListener("click", testimonialsModalFunc);
+overlay.addEventListener("click", testimonialsModalFunc);
+
+
+
+// custom select variables
+const select = document.querySelector("[data-select]");
+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); });
+
+// add event in all select items
+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);
+
+ });
+}
+
+// filter variables
+const filterItems = document.querySelectorAll("[data-filter-item]");
+
+const filterFunc = function (selectedValue) {
+
+ for (let i = 0; i < filterItems.length; i++) {
+
+ if (selectedValue === "all") {
+ filterItems[i].classList.add("active");
+ } else if (selectedValue === filterItems[i].dataset.category) {
+ filterItems[i].classList.add("active");
+ } else {
+ filterItems[i].classList.remove("active");
+ }
+
+ }
+
+}
+
+// add event in all filter button items for large screen
+let lastClickedBtn = filterBtn[0];
+
+for (let i = 0; i < filterBtn.length; i++) {
+
+ filterBtn[i].addEventListener("click", function () {
+
+ let selectedValue = this.innerText.toLowerCase();
+ selectValue.innerText = this.innerText;
+ filterFunc(selectedValue);
+
+ lastClickedBtn.classList.remove("active");
+ this.classList.add("active");
+ lastClickedBtn = this;
+
+ });
+
+}
+
+
+
+// contact form variables
+const form = document.querySelector("[data-form]");
+const formInputs = document.querySelectorAll("[data-form-input]");
+const formBtn = document.querySelector("[data-form-btn]");
+
+// add event to all form input field
+for (let i = 0; i < formInputs.length; i++) {
+ formInputs[i].addEventListener("input", function () {
+
+ // check form validation
+ if (form.checkValidity()) {
+ formBtn.removeAttribute("disabled");
+ } else {
+ formBtn.setAttribute("disabled", "");
+ }
+
+ });
+}
+
+
+
+// page navigation variables
+const navigationLinks = document.querySelectorAll("[data-nav-link]");
+const pages = document.querySelectorAll("[data-page]");
+
+// add event to all nav link
+for (let i = 0; i < navigationLinks.length; i++) {
+ navigationLinks[i].addEventListener("click", function () {
+
+ for (let i = 0; i < pages.length; i++) {
+ if (this.innerHTML.toLowerCase() === pages[i].dataset.page) {
+ pages[i].classList.add("active");
+ navigationLinks[i].classList.add("active");
+ window.scrollTo(0, 0);
+ } else {
+ pages[i].classList.remove("active");
+ navigationLinks[i].classList.remove("active");
+ }
+ }
+
+ });
+}
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..d6fe1ea
--- /dev/null
+++ b/index.html
@@ -0,0 +1,1199 @@
+
+
+
+
+
+
+
+ vCard - Personal Portfolio
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ About
+
+
+
+ Resume
+
+
+
+ Portfolio
+
+
+
+
+
+ Contact
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ I am a DevOps Engineer based in Gurugram, India, with a strong background in Information Technology.
+ I specialize in optimizing complex systems to achieve high levels of reliability and scalability.
+
+
+
+ In my role, I strive to simplify the work of both developers and operations teams by constructing comprehensive systems that offer observability at every stage.
+ I believe that effective observability is key to ensuring the success of any product, and I am dedicated to tailoring specific metrics for each individual product.
+ My ultimate objective is to deliver solutions that align seamlessly with your expectations and requirements, providing you with the best possible outcome.
+
+
+
+
+
+
+
+
+ What i'm doing
+
+
+
+
+
+
+
+
+
+
+
Devops & SRE
+
+
+ I specialize in building pipelines to minimize toil and accelerate development speed.
+
+
+
+
+
+
+
+
+
+
+
+
+
AI Automation
+
+
+ As a DevOps Engineer, I specialize in automating manual tasks to increase speed and accuracy of project delivery.
+
+
+
+
+
+
+
+
+
+
+
+
+
Cloud Computing
+
+
+ I build many things using cloud computing including IoT, applications and websites
+
+
+
+
+
+
+
+
+
+
+
+
+
Observable/Monitoring
+
+
+ Implementing monitoring stack creating observable systems.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Daniel lewis
+
+
14 June, 2021
+
+
+
+ Richard was hired to create a corporate identity. We were very pleased with the work done. She has a
+ lot of experience
+ and is very concerned about the needs of client. Lorem ipsum dolor sit amet, ullamcous cididt
+ consectetur adipiscing
+ elit, seds do et eiusmod tempor incididunt ut laborels dolore magnarels alia.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ University school of the arts
+
+ 2007 — 2008
+
+
+ Nemo enims ipsam voluptatem, blanditiis praesentium voluptum delenit atque corrupti, quos dolores et
+ quas molestias
+ exceptur.
+
+
+
+
+
+
+ New york academy of art
+
+ 2006 — 2007
+
+
+ Ratione voluptatem sequi nesciunt, facere quisquams facere menda ossimus, omnis voluptas assumenda est
+ omnis..
+
+
+
+
+
+
+ High school of art and design
+
+ 2002 — 2004
+
+
+ Duis aute irure dolor in reprehenderit in voluptate, quila voluptas mag odit aut fugit, sed consequuntur
+ magni dolores
+ eos.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Creative director
+
+ 2015 — Present
+
+
+ Nemo enim ipsam voluptatem blanditiis praesentium voluptum delenit atque corrupti, quos dolores et qvuas
+ molestias
+ exceptur.
+
+
+
+
+
+
+ Art director
+
+ 2013 — 2015
+
+
+ Nemo enims ipsam voluptatem, blanditiis praesentium voluptum delenit atque corrupti, quos dolores et
+ quas molestias
+ exceptur.
+
+
+
+
+
+
+ Web designer
+
+ 2010 — 2013
+
+
+ Nemo enims ipsam voluptatem, blanditiis praesentium voluptum delenit atque corrupti, quos dolores et
+ quas molestias
+ exceptur.
+
+
+
+
+
+
+
+
+
+
+ My skills
+
+
+
+
+
+
+
Web design
+ 80%
+
+
+
+
+
+
+
+
+
+
Graphic design
+ 70%
+
+
+
+
+
+
+
+
+
+
Branding
+ 90%
+
+
+
+
+
+
+
+
+
+
WordPress
+ 50%
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ All
+
+
+
+ Web design
+
+
+
+ Applications
+
+
+
+ Web development
+
+
+
+
+
+
+
+
+ Select category
+
+
+
+
+
+
+
+
+
+
+ All
+
+
+
+ Web design
+
+
+
+ Applications
+
+
+
+ Web development
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Design
+
+
+
+
Fab 23, 2022
+
+
+
Design conferences in 2022
+
+
+ Veritatis et quasi architecto beatae vitae dicta sunt, explicabo.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Design
+
+
+
+
Fab 23, 2022
+
+
+
Best fonts every designer
+
+
+ Sed ut perspiciatis, nam libero tempore, cum soluta nobis est eligendi.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Design
+
+
+
+
Fab 23, 2022
+
+
+
Design digest #80
+
+
+ Excepteur sint occaecat cupidatat no proident, quis nostrum exercitationem ullam corporis suscipit.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Design
+
+
+
+
Fab 23, 2022
+
+
+
UI interactions of the week
+
+
+ Enim ad minim veniam, consectetur adipiscing elit, quis nostrud exercitation ullamco laboris nisi.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Design
+
+
+
+
Fab 23, 2022
+
+
+
The forgotten art of spacing
+
+
+ Maxime placeat, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Design
+
+
+
+
Fab 23, 2022
+
+
+
Design digest #79
+
+
+ Optio cumque nihil impedit uo minus quod maxime placeat, velit esse cillum.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/index.txt b/index.txt
new file mode 100644
index 0000000..f115614
--- /dev/null
+++ b/index.txt
@@ -0,0 +1,240 @@
+vCard - Personal Portfolio
+
+# sidebar
+
+alt = Inderpal Singh
+Inderpal Singh
+Web developer
+
+Show Contacts
+
+Email
+richard@example.com
+
+Phone
++1 (213) 352-2795
+
+Birthday
+June 23, 1982
+
+Location
+Sacramento, California, USA
+
+# navbar
+
+About
+Resume
+Portfolio
+Blog
+Contact
+
+# about
+
+About me
+
+I'm Creative Director and UI/UX Designer from Sydney, Australia, working in web development and print media. I enjoy turning complex problems into simple, beautiful and intuitive designs.
+
+My job is to build your website so that it is functional and user-friendly but at the same time attractive. Moreover, I add personal touch to your product and make sure that is eye-catching and easy to use. My aim is to bring across your message and identity in the most creative way. I created web design for many famous brand companies.
+
+
+## service
+
+What i'm doing
+
+alt = design icon
+Web design
+The most modern and high-quality design made at a professional level.
+
+alt = Web development icon
+Web development
+High-quality development of sites at the professional level.
+
+alt = mobile app icon
+Mobile apps
+Professional development of applications for iOS and Android.
+
+alt = camera icon
+Photography
+I make high-quality photos of any category at a professional level.
+
+
+## testimonials
+
+Testimonials
+
+alt = Daniel lewis
+Daniel lewis
+Richard was hired to create a corporate identity. We were very pleased with the work done. She has a lot of experience and is very concerned about the needs of client. Lorem ipsum dolor sit amet, ullamcous cididt consectetur adipiscing elit, seds do et eiusmod tempor incididunt ut laborels dolore magnarels alia.
+
+alt = Jessica miller
+Jessica miller
+Richard was hired to create a corporate identity. We were very pleased with the work done. She has a lot of experience and is very concerned about the needs of client. Lorem ipsum dolor sit amet, ullamcous cididt consectetur adipiscing elit, seds do et eiusmod tempor incididunt ut laborels dolore magnarels alia.
+
+alt = Emily evans
+Emily evans
+Richard was hired to create a corporate identity. We were very pleased with the work done. She has a lot of experience and is very concerned about the needs of client. Lorem ipsum dolor sit amet, ullamcous cididt consectetur adipiscing elit, seds do et eiusmod tempor incididunt ut laborels dolore magnarels alia.
+
+alt = Henry william
+Henry william
+Richard was hired to create a corporate identity. We were very pleased with the work done. She has a lot of experience and is very concerned about the needs of client. Lorem ipsum dolor sit amet, ullamcous cididt consectetur adipiscing elit, seds do et eiusmod tempor incididunt ut laborels dolore magnarels alia.
+
+
+## clients
+
+Clients
+
+alt = client logo
+
+
+
+# resume
+
+Resume
+
+Education
+
+University school of the arts
+2007 — 2008
+Nemo enims ipsam voluptatem, blanditiis praesentium voluptum delenit atque corrupti, quos dolores et quas molestias exceptur.
+
+New york academy of art
+2006 — 2007
+Ratione voluptatem sequi nesciunt, facere quisquams facere menda ossimus, omnis voluptas assumenda est omnis..
+
+High school of art and design
+2002 — 2004
+Duis aute irure dolor in reprehenderit in voluptate, quila voluptas mag odit aut fugit, sed consequuntur magni dolores eos.
+
+Experience
+
+Creative director
+2015 — Present
+Nemo enim ipsam voluptatem blanditiis praesentium voluptum delenit atque corrupti, quos dolores et qvuas molestias exceptur.
+
+Art director
+2013 — 2015
+Nemo enims ipsam voluptatem, blanditiis praesentium voluptum delenit atque corrupti, quos dolores et quas molestias exceptur.
+
+Web designer
+2010 — 2013
+Nemo enims ipsam voluptatem, blanditiis praesentium voluptum delenit atque corrupti, quos dolores et quas molestias exceptur.
+
+My skills
+
+Web design
+80%
+Graphic design
+70%
+Branding
+90%
+WordPress
+50%
+
+
+
+# portfolio
+
+Portfolio
+
+All
+Web design
+Applications
+Web development
+
+Select category
+All
+Web design
+Applications
+Web development
+
+alt = finance
+Finance
+Web development
+
+alt = orizon
+Orizon
+Web development
+
+alt = fundo
+Fundo
+Web design
+
+alt = brawlhalla
+Brawlhalla
+Applications
+
+alt = dsm.
+DSM.
+Web design
+
+alt = metaspark
+MetaSpark
+Web design
+
+alt = summary
+Summary
+Web development
+
+alt = task manager
+Task Manager
+Applications
+
+alt = arrival
+Arrival
+Web development
+
+
+
+# blog
+
+Blog
+
+alt = Design conferences in 2022
+Design
+Fab 23, 2022
+Design conferences in 2022
+Veritatis et quasi architecto beatae vitae dicta sunt, explicabo.
+
+alt = Best fonts every designer
+Design
+Fab 23, 2022
+Best fonts every designer
+Sed ut perspiciatis, nam libero tempore, cum soluta nobis est eligendi.
+
+alt = Design digest #80
+Design
+Fab 23, 2022
+Design digest #80
+Excepteur sint occaecat cupidatat no proident, quis nostrum exercitationem ullam corporis suscipit.
+
+alt = UI interactions of the week
+Design
+Fab 23, 2022
+UI interactions of the week
+Enim ad minim veniam, consectetur adipiscing elit, quis nostrud exercitation ullamco laboris nisi.
+
+alt = The forgotten art of spacing
+Design
+Fab 23, 2022
+The Forgotten Art Of Spacing
+Maxime placeat, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+alt = Design digest #79
+Design
+Fab 23, 2022
+Design Digest #79
+Optio cumque nihil impedit uo minus quod maxime placeat, velit esse cillum.
+
+
+
+# contact
+
+Contact
+
+Contact Form
+
+Full name
+Email address
+Your Message
+
+Send Message
\ No newline at end of file
diff --git a/website-demo-image/Thumbs.db b/website-demo-image/Thumbs.db
new file mode 100644
index 0000000..e81e6dd
Binary files /dev/null and b/website-demo-image/Thumbs.db differ
diff --git a/website-demo-image/desktop.png b/website-demo-image/desktop.png
new file mode 100644
index 0000000..9752a23
Binary files /dev/null and b/website-demo-image/desktop.png differ
diff --git a/website-demo-image/mobile.png b/website-demo-image/mobile.png
new file mode 100644
index 0000000..a4b2ab4
Binary files /dev/null and b/website-demo-image/mobile.png differ