-
Jigar's Portfolio
-
Thank you for visiting my personal portfolio website. Connect with me over socials.
Keep Rising 🚀. Connect with me over live chat!
+
Heritage's Portfolio
+
Thank you for visiting our company's portfolio website. Connect with me over socials.
Keep Rising 🚀. Connect with me over live chat!
@@ -77,21 +77,21 @@
quick links
contact info
-
+91 704-302-4736
-
jigarsable21@gmail.com
-
Pune, India-412206
+
+91 8799370794
+
heritagesolution185@gmail.com
+
Surat, India-394101
-
+
diff --git a/assets/css/404.css b/assets/css/404.css
index 55a82746..026b4683 100644
--- a/assets/css/404.css
+++ b/assets/css/404.css
@@ -52,7 +52,7 @@ header{
}
section{
min-height: 100vh;
- padding: 2rem 9%;
+ padding: 1rem 9%;
}
header .logo{
font-size: 1.9rem;
diff --git a/assets/css/style.css b/assets/css/style.css
index 815b10a1..bf3a655e 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -34,10 +34,10 @@ html::-webkit-scrollbar {
width: 0.8rem;
}
html::-webkit-scrollbar-track {
- background: rgb(235, 202, 245);
+ background: rgb(8, 109, 192);
}
html::-webkit-scrollbar-thumb {
- background: #420177;
+ background: #0b3249;
}
/* pre loader start */
@@ -74,29 +74,29 @@ header {
box-shadow: 0 1px 4px rgba(146, 161, 176, 0.3);
}
section {
- min-height: 100vh;
+ /* min-height: 100vh; */
padding: 2rem 9%;
}
.heading {
font-size: 3.5rem;
- color: rgb(32, 32, 32);
+ color: rgb(3, 71, 105);
font-weight: 800;
text-align: center;
}
.heading span {
- color: rgb(115, 3, 167);
+ color: rgb(3, 71, 105);
}
header .logo {
font-size: 1.9rem;
font-weight: 800;
text-decoration: none;
- color: #0e2431;
+ color: #076399;
}
header .logo i {
font-size: 2.2rem;
}
header .logo:hover {
- color: #fc8c05;
+ color: #bda419;
}
header .navbar ul {
list-style: none;
@@ -117,8 +117,8 @@ header .navbar ul li a {
}
header .navbar ul li a.active,
header .navbar ul li a:hover {
- color: #011aff;
- border-bottom: 0.2rem solid #011aff;
+ color: #2470b8;
+ border-bottom: 0.2rem solid #bbac24;
padding: 0.5rem 0;
}
/* navbar ends */
@@ -186,6 +186,7 @@ header .navbar ul li a:hover {
gap: 1.5rem;
min-height: 100vh;
align-items: center;
+ margin-top: 5rem;
}
.home #particles-js {
position: absolute;
@@ -226,10 +227,15 @@ header .navbar ul li a:hover {
font-weight: 800;
color: #002057;
}
+.home .content h2 span .heritages {
+ font-size: 5rem;
+ font-weight: 800;
+ color: #7198db;
+}
.home .content h2 span {
font-size: 5rem;
font-weight: 800;
- color: #ff7b00;
+ color: rgb(180, 155, 9);
}
.home .content p {
font-size: 2.5rem;
@@ -239,7 +245,7 @@ header .navbar ul li a:hover {
}
.home .content p span {
font-size: 2.5rem;
- color: rgb(148, 8, 8);
+ color: #2066a8;
font-weight: 600;
padding: 1rem 0;
}
@@ -251,8 +257,8 @@ header .navbar ul li a:hover {
border-radius: 4em;
transition: 0.5s;
color: #fff;
- background: #2506ad;
- box-shadow: 0px 5px 18px rgba(48, 68, 247, 0.6);
+ background: linear-gradient(to bottom, rgb(1, 32, 61), #2470b8);
+ /* box-shadow: 0px 5px 18px rgba(48, 68, 247, 0.6); */
font-family: "Nunito", sans-serif;
}
.home .btn span {
@@ -266,7 +272,8 @@ header .navbar ul li a:hover {
transition: 0.3s;
}
.home .btn:hover {
- background: #1a047e;
+ background: linear-gradient(to bottom, #2470b8, rgb(1, 32, 61));
+ color: rgb(255, 255, 255);
}
.home .btn:hover i {
transform: translateX(5px);
@@ -289,7 +296,7 @@ header .navbar ul li a:hover {
font-size: 2rem;
display: inline-block;
line-height: 44px;
- color: #00d9ff;
+ color: #e7e7e7;
background-color: #09011b;
width: 44px;
height: 44px;
@@ -307,33 +314,36 @@ header .navbar ul li a:hover {
background-color: #0685da;
}
.social-icons a.github:hover {
- background-color: #0e0e0e;
+ background-color: #0685da;
}
.social-icons a.twitter:hover {
- background-color: #00aced;
+ background-color: #0685da;
}
.social-icons a.linkedin:hover {
- background-color: #007bb6;
+ background-color: #0685da;
}
.social-icons a.dev:hover {
- background-color: #070707;
+ background-color: #0685da;
}
.social-icons a.instagram:hover {
- background-color: #ee00da;
+ background-color: #0685da;
}
/* social icons end */
/* hero media queries starts*/
@media (max-width: 450px) {
+ .home {
+ margin-top: 5rem;
+ }
.home .btn {
margin: 4rem 0;
}
.socials {
margin-top: 12rem;
}
- .home .image img {
+ /* .home .image img {
margin-top: -12rem;
- }
+ } */
.home .content p {
font-size: 2.2rem;
}
@@ -361,8 +371,8 @@ header .navbar ul li a:hover {
}
.about .row .image img {
margin: 4rem;
- width: 30rem;
- height: auto;
+ width: 400px;
+ height: 390px;
border-radius: 5%;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.6);
mix-blend-mode: luminosity;
@@ -377,7 +387,11 @@ header .navbar ul li a:hover {
padding: 3rem;
}
.about .row .content h3 {
- color: rgb(27, 27, 27);
+ color: rgb(180, 155, 9);
+ font-size: 2.5rem;
+}
+.about .row .content h3 span {
+ color: rgb(180, 155, 9);
font-size: 2.5rem;
}
.about .row .content .tag {
@@ -404,9 +418,9 @@ header .navbar ul li a:hover {
text-transform: none;
}
.about .row .content .box-container .box p span {
- color: #011aff;
+ color: #0c67bb;
}
-.resumebtn {
+/* .resumebtn {
margin-top: 6rem;
}
.resumebtn .btn {
@@ -433,7 +447,7 @@ header .navbar ul li a:hover {
}
.resumebtn .btn:hover i {
transform: translateX(5px);
-}
+} */
/* about media queries starts*/
@media screen and (max-width: 600px) {
.about .row .image {
@@ -441,7 +455,7 @@ header .navbar ul li a:hover {
}
.about .row .image img {
margin: 0 auto;
- width: 80%;
+ /* width: 80%; */
mix-blend-mode: normal;
}
.about .row {
@@ -460,28 +474,37 @@ header .navbar ul li a:hover {
/* skills section starts */
.skills {
- min-height: 90vh;
- background: linear-gradient(to bottom, #57059e, #4a00e0);
+ padding-top: 5rem;
+ padding-bottom: 5rem;
+ /* min-height: 100vh; */
+ background: linear-gradient(to bottom, #01203d, #2470b8);
+ /* margin-top: -300px; */
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
}
+
.skills h2 {
color: #fff;
}
.skills .heading span {
- color: rgb(255, 230, 0);
+ color: rgb(216, 188, 32);
}
.skills .container {
background: rgba(0, 0, 22, 0.4);
color: #fff;
border-radius: 1rem;
padding: 2rem;
- width: 90%;
+ width: 100%;
margin: auto;
- margin-top: 2rem;
+ margin-top: 3rem;
}
+
.skills .container .row {
display: grid;
grid-template-columns: repeat(6, 1fr);
- flex-wrap: wrap;
+ /* flex-wrap: wrap; */
gap: 1.8rem;
}
.skills .container .bar {
@@ -514,6 +537,9 @@ header .navbar ul li a:hover {
}
/* skills media queries starts*/
@media screen and (max-width: 600px) {
+ /* .skills {
+ margin-top: 300px;
+ } */
.skills .container {
padding: 0;
margin: 0;
@@ -525,7 +551,7 @@ header .navbar ul li a:hover {
gap: 1rem;
}
.skills .container {
- margin-top: 5px;
+ margin-top: 3rem;
width: 100%;
}
}
@@ -642,21 +668,26 @@ header .navbar ul li a:hover {
/* work section starts */
.work {
/* background: #010124; */
- background: linear-gradient(to bottom, #000031, #00002c);
+ background: linear-gradient(to bottom, #01203d, #2470b8);
}
.work h2 {
color: #fff;
padding: 1rem;
}
.work .heading span {
- color: rgb(255, 230, 0);
+ color: rgb(216, 188, 32);
}
+
.work .box-container {
- display: flex;
- flex-wrap: wrap;
+ /* display: flex; */
+ /* flex-wrap: wrap; */
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
- margin: 2rem;
+ /* margin-left: -4rem; */
+ margin: auto;
}
+
.work .box-container .box {
flex: 1 1 30rem;
border-radius: 0.5rem;
@@ -674,7 +705,7 @@ header .navbar ul li a:hover {
height: 100%;
width: 100%;
position: absolute;
- top: 85%;
+ top: 80%;
left: 0;
background: rgba(255, 255, 255, 0.9);
display: flex;
@@ -685,7 +716,7 @@ header .navbar ul li a:hover {
flex-direction: row;
justify-content: space-between;
align-items: center;
- height: 4.5rem;
+ height: 6rem;
width: 100%;
padding-left: 1rem;
background: #ffd900;
@@ -694,7 +725,7 @@ header .navbar ul li a:hover {
font-size: 2rem;
}
.work .box-container .box:hover .content {
- top: 25%;
+ top: 20%;
}
.work .desc {
margin: 2rem;
@@ -727,6 +758,7 @@ header .navbar ul li a:hover {
.work .viewall {
display: flex;
justify-content: center;
+ margin-top: 2rem;
}
.work .viewall .btn {
position: relative;
@@ -847,7 +879,7 @@ header .navbar ul li a:hover {
}
.experience .content .desc {
margin-left: 1.5rem;
- padding-bottom: 1rem;
+ padding-bottom: 10px;
}
.experience .content .desc h3 {
font-size: 1.5rem;
@@ -889,6 +921,105 @@ header .navbar ul li a:hover {
transform: translateX(5px);
}
+/* work section media */
+
+@media screen and (min-width: 1536px) {
+ .work .box-container {
+ /* display: flex; */
+ /* flex-wrap: wrap; */
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 1.5rem;
+ /* margin-left: -4rem; */
+ margin: auto;
+ }
+}@media screen and (max-width: 1310px) {
+ .work .box-container {
+ display: flex;
+ flex-wrap: wrap;
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 1.5rem;
+ margin: auto;
+ /* margin-left: -10rem; */
+ }
+ .skills .container .row {
+ grid-template-columns: repeat(4, 1fr);
+ margin: 1rem;
+ padding: 2rem 0.2rem 2rem 0.2rem;
+ gap: 1rem;
+ }
+}
+@media screen and (max-width: 1280px) {
+ .work .box-container {
+ display: flex;
+ flex-wrap: wrap;
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 1.5rem;
+ margin: auto;
+ /* margin-left: -10rem; */
+ }
+ .skills .container .row {
+ grid-template-columns: repeat(5, 1fr);
+ margin: 1rem;
+ padding: 2rem 0.2rem 2rem 0.2rem;
+ gap: 1rem;
+ }
+}
+@media screen and (max-width: 1024px) {
+ .work .box-container {
+ display: flex;
+ flex-wrap: wrap;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 1.5rem;
+ margin: auto;
+ /* margin-left: -10rem; */
+ }
+ .skills .container .row {
+ grid-template-columns: repeat(4, 1fr);
+ margin: 1rem;
+ padding: 2rem 0.2rem 2rem 0.2rem;
+ gap: 1rem;
+ }
+}
+
+@media screen and (max-width: 768px) {
+ .work .box-container {
+ /* display: flex; */
+ /* flex-wrap: wrap; */
+ display: grid;
+ grid-template-columns: repeat(1, 1fr);
+ gap: 1.5rem;
+ /* margin-left: 0rem; */
+ margin: auto;
+ }
+
+ .work .box-container .grid-item {
+ width: 100%;
+ }
+ .skills .container .row {
+ grid-template-columns: repeat(2, 1fr);
+ margin: 1rem;
+ padding: 2rem 0.2rem 2rem 0.2rem;
+ gap: 1rem;
+ }
+}
+
+@media screen and (max-width: 300px) {
+ .work .box-container {
+ display: flex;
+ flex-wrap: wrap;
+ display: grid;
+ grid-template-columns: repeat(1, 1fr);
+ gap: 1.5rem;
+ /* margin-left: -4rem; */
+ margin: auto;
+ }
+
+}
+
/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
.experience {
@@ -940,7 +1071,7 @@ header .navbar ul li a:hover {
width: 100%;
background: #fff;
border-radius: 1.5rem;
- margin: 2rem 5rem;
+ margin: 2rem auto;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}
.contact .container .content {
@@ -975,7 +1106,7 @@ form .form-group {
width: 100%;
}
form i {
- position: absolute;
+ /* position: absolute; */
top: 50%;
left: 18px;
color: rgb(51, 51, 51);
@@ -1002,11 +1133,11 @@ form .message textarea {
.field input:focus,
.message textarea:focus {
padding-left: 47px;
- border: 2px solid rgb(115, 3, 167);
+ border: 2px solid rgb(11, 80, 136);
}
.field input:focus ~ i,
.message textarea:focus ~ i {
- color: rgb(115, 3, 167);
+ color: rgb(11, 80, 136);
}
form .message {
position: relative;
@@ -1041,13 +1172,13 @@ form .button-area {
cursor: pointer;
border-radius: 5px;
padding: 13px 25px;
- background: #2506ad;
- box-shadow: 0px 5px 10px rgba(48, 68, 247, 0.6);
+ background: linear-gradient(to bottom, rgb(1, 32, 61), #2470b8);
+ /* box-shadow: 0px 5px 10px rgba(48, 68, 247, 0.6); */
transition: 0.3s ease;
font-family: "Nunito", sans-serif;
}
.button-area button:hover {
- background: #421cecf5;
+ background: linear-gradient(to bottom, #2470b8, rgb(1, 32, 61));
}
.button-area span {
font-size: 17px;
@@ -1091,7 +1222,7 @@ form .button-area {
.footer {
min-height: auto;
padding-top: 0;
- background: rgb(0, 1, 43);
+ background: linear-gradient(to bottom, #01203d, #2470b8);
}
.footer .box-container {
display: flex;
@@ -1116,7 +1247,7 @@ form .button-area {
}
.footer .box-container .box p i {
padding-right: 1rem;
- color: #ffae00;
+ color: #e6c718;
}
.footer .box-container .box a {
font-size: 1.5rem;
@@ -1125,7 +1256,7 @@ form .button-area {
display: block;
}
.footer .box-container .box a:hover {
- color: #ffae00;
+ color: #e6c718;
}
.footer .box-container .box .share {
display: flex;
@@ -1149,7 +1280,7 @@ form .button-area {
background: transparent;
transform: scale(0.98);
border: 0.1rem solid rgb(180, 178, 178);
- color: #ffae00;
+ color: #f7f6f4;
}
.footer .credit {
padding: 1rem 0 0 0;
@@ -1161,7 +1292,7 @@ form .button-area {
border-top: 0.1rem solid #fff3;
}
.footer .credit a {
- color: #ffae00;
+ color: #f8d614;
}
.footer .fa {
color: #e90606;
@@ -1213,8 +1344,8 @@ form .button-area {
right: 2rem;
padding: 1rem 1.5rem;
font-size: 2rem;
- background: #ffae00;
- color: rgb(13, 0, 44);
+ background: linear-gradient(to bottom, #01203d, #2470b8);
+ color: rgb(240, 238, 243);
border-radius: 50%;
transition: 1s linear;
z-index: 1000;
diff --git a/assets/images/Heritage.jpeg b/assets/images/Heritage.jpeg
new file mode 100644
index 00000000..88d7e64a
Binary files /dev/null and b/assets/images/Heritage.jpeg differ
diff --git a/assets/images/projects/11373655_4671966.jpg b/assets/images/projects/11373655_4671966.jpg
new file mode 100644
index 00000000..30e7797b
Binary files /dev/null and b/assets/images/projects/11373655_4671966.jpg differ
diff --git a/assets/images/projects/PIONEER LOGO33 1.png b/assets/images/projects/PIONEER LOGO33 1.png
new file mode 100644
index 00000000..b8b3b155
Binary files /dev/null and b/assets/images/projects/PIONEER LOGO33 1.png differ
diff --git a/assets/images/projects/aroha.png b/assets/images/projects/aroha.png
new file mode 100644
index 00000000..3358e8d3
Binary files /dev/null and b/assets/images/projects/aroha.png differ
diff --git a/assets/images/projects/butler.png b/assets/images/projects/butler.png
new file mode 100644
index 00000000..3b6502df
Binary files /dev/null and b/assets/images/projects/butler.png differ
diff --git a/assets/images/projects/cupsoflove.png b/assets/images/projects/cupsoflove.png
new file mode 100644
index 00000000..06dd85cb
Binary files /dev/null and b/assets/images/projects/cupsoflove.png differ
diff --git a/assets/images/projects/diamond-rensu-logo-landscape.png b/assets/images/projects/diamond-rensu-logo-landscape.png
new file mode 100644
index 00000000..8d738919
Binary files /dev/null and b/assets/images/projects/diamond-rensu-logo-landscape.png differ
diff --git a/assets/images/projects/diamondRensu.png b/assets/images/projects/diamondRensu.png
new file mode 100644
index 00000000..a90042c1
Binary files /dev/null and b/assets/images/projects/diamondRensu.png differ
diff --git a/assets/images/projects/image_2025_02_03T05_15_26_014Z.png b/assets/images/projects/image_2025_02_03T05_15_26_014Z.png
new file mode 100644
index 00000000..8fd3b89c
Binary files /dev/null and b/assets/images/projects/image_2025_02_03T05_15_26_014Z.png differ
diff --git a/assets/images/projects/image_2025_02_03T05_15_26_015Z.png b/assets/images/projects/image_2025_02_03T05_15_26_015Z.png
new file mode 100644
index 00000000..6edc22db
Binary files /dev/null and b/assets/images/projects/image_2025_02_03T05_15_26_015Z.png differ
diff --git a/assets/images/projects/image_2025_02_03T05_15_26_016Z.png b/assets/images/projects/image_2025_02_03T05_15_26_016Z.png
new file mode 100644
index 00000000..cf7d7dfb
Binary files /dev/null and b/assets/images/projects/image_2025_02_03T05_15_26_016Z.png differ
diff --git a/assets/images/projects/image_2025_02_03T05_15_26_017Z.png b/assets/images/projects/image_2025_02_03T05_15_26_017Z.png
new file mode 100644
index 00000000..60b49e7c
Binary files /dev/null and b/assets/images/projects/image_2025_02_03T05_15_26_017Z.png differ
diff --git a/assets/images/projects/image_2025_02_03T05_19_37_411Z.png b/assets/images/projects/image_2025_02_03T05_19_37_411Z.png
new file mode 100644
index 00000000..22e2f25a
Binary files /dev/null and b/assets/images/projects/image_2025_02_03T05_19_37_411Z.png differ
diff --git a/assets/images/projects/image_2025_02_03T05_19_37_412Z.png b/assets/images/projects/image_2025_02_03T05_19_37_412Z.png
new file mode 100644
index 00000000..5d8e913e
Binary files /dev/null and b/assets/images/projects/image_2025_02_03T05_19_37_412Z.png differ
diff --git a/assets/images/projects/kos.png b/assets/images/projects/kos.png
new file mode 100644
index 00000000..2fddebd5
Binary files /dev/null and b/assets/images/projects/kos.png differ
diff --git a/assets/images/projects/kos_logo_300x300.png b/assets/images/projects/kos_logo_300x300.png
new file mode 100644
index 00000000..218bd6db
Binary files /dev/null and b/assets/images/projects/kos_logo_300x300.png differ
diff --git a/assets/images/projects/pioneers.png b/assets/images/projects/pioneers.png
new file mode 100644
index 00000000..2c482722
Binary files /dev/null and b/assets/images/projects/pioneers.png differ
diff --git a/assets/images/projects/sene.png b/assets/images/projects/sene.png
new file mode 100644
index 00000000..8a62dbc7
Binary files /dev/null and b/assets/images/projects/sene.png differ
diff --git a/assets/images/projects/tgh.png b/assets/images/projects/tgh.png
new file mode 100644
index 00000000..97bc9b51
Binary files /dev/null and b/assets/images/projects/tgh.png differ
diff --git a/assets/images/skills/unity-icon-1998x2048-c6v0ej9o.png b/assets/images/skills/unity-icon-1998x2048-c6v0ej9o.png
new file mode 100644
index 00000000..442fe662
Binary files /dev/null and b/assets/images/skills/unity-icon-1998x2048-c6v0ej9o.png differ
diff --git a/assets/js/script.js b/assets/js/script.js
index 047c1c78..59d6b6a4 100644
--- a/assets/js/script.js
+++ b/assets/js/script.js
@@ -45,9 +45,9 @@ $(document).ready(function () {
.then(function (response) {
console.log('SUCCESS!', response.status, response.text);
document.getElementById("contact-form").reset();
- alert("Form Submitted Successfully");
+ alert("Form Submitted Successfully");
}, function (error) {
- console.log('FAILED...', error);
+ console.log('FAILED...', error);
alert("Form Submission Failed! Try Again");
});
event.preventDefault();
@@ -59,7 +59,7 @@ $(document).ready(function () {
document.addEventListener('visibilitychange',
function () {
if (document.visibilityState === "visible") {
- document.title = "Portfolio | Jigar Sable";
+ document.title = "Portfolio | Heritage Solution";
$("#favicon").attr("href", "assets/images/favicon.png");
}
else {
@@ -71,7 +71,7 @@ document.addEventListener('visibilitychange',
//
var typed = new Typed(".typing-text", {
- strings: ["frontend development", "backend development", "web designing", "android development", "web development"],
+ strings: ["frontend development", "backend development","game development","web designing", "web development","shopify development","e-commerce development", "graphic design", "digital marketing","app development"],
loop: true,
typeSpeed: 50,
backSpeed: 25,
@@ -102,7 +102,7 @@ function showSkills(skills) {
`
});
skillsContainer.innerHTML = skillHTML;
-}
+}
function showProjects(projects) {
let projectsContainer = document.querySelector("#work .box-container");
@@ -111,10 +111,10 @@ function showProjects(projects) {
projectHTML += `