diff --git a/404.html b/404.html index 91ad7d92..23a6a341 100644 --- a/404.html +++ b/404.html @@ -8,16 +8,16 @@ - + Got Lost! Page Not Found
- + - + -
+ -
+

404

@@ -61,8 +61,8 @@

Looks like you're lost

-

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

-

Designed with by jigar sable

+

Designed with by Heritage Solution

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 += `
project -
+

${project.name}

-
+

${project.desc}

diff --git a/experience/style.css b/experience/2.css similarity index 94% rename from experience/style.css rename to experience/2.css index 7e73ac94..ce6ee9ba 100644 --- a/experience/style.css +++ b/experience/2.css @@ -1,466 +1,466 @@ -@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap"); -@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&display=swap'); - -*{ - margin: 0; - padding: 0; - box-sizing: border-box; - text-decoration: none; - outline: none; border: none; - text-transform:capitalize; - transition: all .2s linear; -} -html{ - font-size: 62.5%; - overflow-x: hidden; - scroll-behavior: smooth; -} -body{ - background: #f7f7f7; - font-family: 'Poppins', sans-serif; -} - -*::selection{ - background: #2b3dda; - color: #fff; -} - -html{ - font-size: 62.5%; - overflow-x: hidden; -} -html::-webkit-scrollbar{ - width: .8rem; -} -html::-webkit-scrollbar-track{ - background: rgb(235, 202, 245); -} -html::-webkit-scrollbar-thumb{ - background: #420177; -} - -/* navbar starts */ -header{ - position: fixed; - top: 0; left: 0; right: 0; - z-index: 1000; - display: flex; - align-items: center; - justify-content: space-between; - padding: 1.7rem 10%; - height: 6.5rem; - background-color: #fff; - box-shadow: 0 1px 4px rgba(146,161,176,.3); -} -section{ - min-height: 100vh; - padding: 2rem 9%; -} -.heading{ - font-size: 3.5rem; - color: rgb(20, 20, 20); - font-weight: 800; - text-align: center; -} -.heading span{ - color: rgb(115, 3, 167); -} -header .logo{ - font-size: 1.9rem; - font-weight: 800; - text-decoration: none; - color: #0E2431; -} -header .logo i { - font-size: 2.2rem; -} -header .logo:hover { - color: #fc8c05; -} -header .navbar ul{ - list-style: none; - display: flex; - justify-content: center; - align-items: center; -} -header .navbar li{ - margin-left: 2.5rem; -} -header .navbar ul li a{ - font-size: 1.57rem; - color: #0E2431; - font-weight: 600; - text-decoration: none; - letter-spacing: 0.04rem; -} -header .navbar ul li a.active, -header .navbar ul li a:hover{ - color: #011aff; - border-bottom: .2rem solid #011aff; - padding: .5rem 0; -} -/* navbar ends */ - -/* hamburger icon starts*/ -#menu{ - font-size: 3rem; - cursor: pointer; - color: rgb(24, 2, 63); - display: none; -} -@media(max-width:768px){ - #menu{ - display: block; - } - header .navbar{ - position: fixed; - top: 6.5rem; right: -120%; - width: 75%; - height: 100%; - text-align: left; - align-items: flex-start; - background-color: #0e0f31; - } - header .navbar ul{ - flex-flow: column; - padding: 1rem; - } - header .navbar ul li{ - text-align: center; - width: 100%; - margin: 1rem 0; - border-radius: .5rem; - width: 26rem; - } - header .navbar ul li a{ - display: block; - padding: 1rem; - text-align: left; - color: #fff; - font-size: 2rem; - } - header .navbar ul li a.active, - header .navbar ul li a:hover{ - padding: 1rem; - color: #fff; - border-radius: .5rem; - border-bottom: .5rem solid #011aff; - } - .fa-times{ - transform: rotate(180deg); - } - header .navbar.nav-toggle{ - right: 0; - } -} -/* hamburger icon ends */ - -/* experience section starts */ -.experience { - margin-top: 5rem; -} -.experience .quote { - text-align: center; - font-size: 1.5rem; - font-weight: 600; -} -.experience .timeline { - position: relative; - max-width: 1200px; - margin: 2rem auto; -} -.experience .timeline::after { - content: ''; - position: absolute; - width: 6px; - background: #020133; - top: 0; - bottom: 0; - left: 50%; - margin-left: -3px; - z-index: -2; -} -.experience .container { - padding: 10px 40px; - position: relative; - background-color: inherit; - width: 50%; -} -/*circles on timeline*/ -.experience .container::after { - content: "\f0b1"; - position: absolute; - width: 25px; - height: 25px; - right: -17px; - background-color: rgb(255, 255, 255); - border: 4px solid #f68c09; - top: 15px; - border-radius: 50%; - z-index: 100; - font-size: 1.89rem; - text-align: center; - font-weight: 600; - color:#02094b; - font-family: 'Font Awesome\ 5 Free'; -} -.experience .left { - left: 0; -} -.experience .right { - left: 50%; -} -/* arrows pointing right */ -.experience .left::before { - content: " "; - height: 0; - position: absolute; - top: 22px; - width: 0; - z-index: 1; - right: 30px; - border: medium solid #f68c09; - border-width: 10px 0 10px 10px; - border-color: transparent transparent transparent #f68c09; -} -/* arrows pointing left */ -.experience .right::before { - content: " "; - height: 0; - position: absolute; - top: 22px; - width: 0; - z-index: 1; - left: 30px; - border: medium solid #f68c09; - border-width: 10px 10px 10px 0; - border-color: transparent #f68c09 transparent transparent; -} -.experience .right::after { - left: -16px; -} -.experience .content { - background-color: #f68c09; - position: relative; - border-radius: 6px; -} -.experience .content .tag{ - font-size: 1.3rem; - padding-top: 1.5rem; - padding-left: 1.5rem; -} -.experience .content .desc{ - margin-left: 1.5rem; - padding-bottom: 1rem; -} -.experience .content .desc h3{ - font-size: 1.5rem; - font-weight: 600; -} -.experience .content .desc p{ - font-size: 1.2rem; -} -/* view all button */ -.morebtn{ - display: flex; - justify-content: center; - margin-bottom: 2rem; -} -.morebtn .btn { - position: relative; - line-height: 0; - padding: 1.6rem 3rem; - border-radius: .5em; - transition: 0.5s; - color: #fff; - background: #2506ad; - box-shadow: 0px 5px 10px rgba(48, 68, 247, .6); - text-align: center; -} -.morebtn .btn span { - font-weight: 600; - font-size: 1.7rem; - font-family: 'Nunito', sans-serif; -} -.morebtn .btn i { - margin-right: 0.5rem; - font-size: 1.5rem; - transition: 0.3s; -} -.morebtn .btn:hover{ - background: #1a047e; -} -.morebtn .btn:hover i { - transform: translateX(-8px); -} - -/* Media queries - Responsive timeline on screens less than 600px wide */ -@media screen and (max-width: 600px) { - .experience .timeline::after { - left: 31px; - } - .experience .container { - width: 100%; - padding-left: 70px; - padding-right: 25px; - } - .experience .container::before { - left: 60px; - border: medium solid #f68c09; - border-width: 10px 10px 10px 0; - border-color: transparent #f68c09 transparent transparent; - } - .experience .left::after { - left: 15px; - } - .experience .right::after { - left: 15px; - } - .experience .right { - left: 0%; - } - .experience .container::after { - font-size: 2.2rem;; - } -} -/* experience media queries ends */ -/* experience section ends */ - - -/* footer section starts */ -.footer{ - min-height: auto; - padding-top: 0; - background: rgb(0, 1, 43); -} -.footer .box-container{ - display: flex; - justify-content: center; - flex-wrap: wrap; -} -.footer .box-container .box{ - flex: 1 1 25rem; - margin: 2rem; -} -.footer .box-container .box h3{ - font-size: 2.5rem; - color: #fff; - padding-bottom: 1rem; - font-weight: normal; -} -.footer .box-container .box p{ - font-size: 1.5rem; - color: #ccc; - padding: .7rem 0; - text-transform: none; -} -.footer .box-container .box p i{ - padding-right: 1rem; - color: #ffae00; -} -.footer .box-container .box a{ - font-size: 1.5rem; - color: rgb(238, 238, 238); - padding: .3rem 0; - display: block; -} -.footer .box-container .box a:hover{ - color: #ffae00; -} -.footer .box-container .box .share{ - display: flex; - flex-wrap: wrap; - padding: 1rem 0; -} -.footer .box-container .box .share a{ - height: 4rem; - width: 4rem; - padding: 1rem; - text-align: center; - border-radius: 5rem; - font-size: 1.7rem; - margin-right: 1rem; - transition: .2s; - background: rgb(230, 230, 230); - color: #02094b; - border: none; -} -.footer .box-container .box .share a:hover{ - background: transparent; - transform: scale(0.98); - border: .1rem solid rgb(180, 178, 178); - color: #ffae00; -} -.footer .credit{ - padding: 1rem 0 0 0; - text-align: center; - font-size: 1.5rem; - font-family: 'Nunito',sans-serif; - font-weight: 600; - color: #fff; - border-top: .1rem solid #fff3; -} -.footer .credit a{ - color: #ffae00; -} -.footer .fa{ - color: #E90606; - margin: 0 .3rem; - font-size: 1.5rem; - animation: pound .35s infinite alternate; -} -@-webkit-keyframes pound{ - to{ - transform: scale(1.1); - } -} -@keyframes pound{ - to{ - transform: scale(1.1); -} -} -@media(max-width:450px){ - .footer .box-container .box{ - margin: 2rem; - } - .footer .box-container .box p{ - padding: 0.7rem; - } - .footer .box-container .box .share a{ - padding: 1.1rem; - } -} -/* footer section ends */ - -/* common media queries starts*/ -@media(max-width:450px){ - html{ - font-size: 55%; - } - body{ - padding-right: 0; - } - section{ - padding: 2rem; - } -} -/* common media queries ends*/ - - -/* scroll top starts */ -#scroll-top{ - position: fixed; - top: -140%; - right: 2rem; - padding: 1rem 1.5rem; - font-size: 2rem; - background: #ffae00; - color: rgb(13, 0, 44); - border-radius: 5rem; - transition: 1s linear; - z-index: 1000; -} -#scroll-top.active{ - top: calc(100% - 12rem); -} +@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap"); +@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&display=swap'); + +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + text-decoration: none; + outline: none; border: none; + text-transform:capitalize; + transition: all .2s linear; +} +html{ + font-size: 62.5%; + overflow-x: hidden; + scroll-behavior: smooth; +} +body{ + background: #f7f7f7; + font-family: 'Poppins', sans-serif; +} + +*::selection{ + background: #2b3dda; + color: #fff; +} + +html{ + font-size: 62.5%; + overflow-x: hidden; +} +html::-webkit-scrollbar{ + width: .8rem; +} +html::-webkit-scrollbar-track{ + background: rgb(235, 202, 245); +} +html::-webkit-scrollbar-thumb{ + background: #420177; +} + +/* navbar starts */ +header{ + position: fixed; + top: 0; left: 0; right: 0; + z-index: 1000; + display: flex; + align-items: center; + justify-content: space-between; + padding: 1.7rem 10%; + height: 6.5rem; + background-color: #fff; + box-shadow: 0 1px 4px rgba(146,161,176,.3); +} +section{ + min-height: 100vh; + padding: 2rem 9%; +} +.heading{ + font-size: 3.5rem; + color: rgb(20, 20, 20); + font-weight: 800; + text-align: center; +} +.heading span{ + color: rgb(115, 3, 167); +} +header .logo{ + font-size: 1.9rem; + font-weight: 800; + text-decoration: none; + color: #0E2431; +} +header .logo i { + font-size: 2.2rem; +} +header .logo:hover { + color: #fc8c05; +} +header .navbar ul{ + list-style: none; + display: flex; + justify-content: center; + align-items: center; +} +header .navbar li{ + margin-left: 2.5rem; +} +header .navbar ul li a{ + font-size: 1.57rem; + color: #0E2431; + font-weight: 600; + text-decoration: none; + letter-spacing: 0.04rem; +} +header .navbar ul li a.active, +header .navbar ul li a:hover{ + color: #011aff; + border-bottom: .2rem solid #011aff; + padding: .5rem 0; +} +/* navbar ends */ + +/* hamburger icon starts*/ +#menu{ + font-size: 3rem; + cursor: pointer; + color: rgb(24, 2, 63); + display: none; +} +@media(max-width:768px){ + #menu{ + display: block; + } + header .navbar{ + position: fixed; + top: 6.5rem; right: -120%; + width: 75%; + height: 100%; + text-align: left; + align-items: flex-start; + background-color: #0e0f31; + } + header .navbar ul{ + flex-flow: column; + padding: 1rem; + } + header .navbar ul li{ + text-align: center; + width: 100%; + margin: 1rem 0; + border-radius: .5rem; + width: 26rem; + } + header .navbar ul li a{ + display: block; + padding: 1rem; + text-align: left; + color: #fff; + font-size: 2rem; + } + header .navbar ul li a.active, + header .navbar ul li a:hover{ + padding: 1rem; + color: #fff; + border-radius: .5rem; + border-bottom: .5rem solid #011aff; + } + .fa-times{ + transform: rotate(180deg); + } + header .navbar.nav-toggle{ + right: 0; + } +} +/* hamburger icon ends */ + +/* experience section starts */ +.experience { + margin-top: 5rem; +} +.experience .quote { + text-align: center; + font-size: 1.5rem; + font-weight: 600; +} +.experience .timeline { + position: relative; + max-width: 1200px; + margin: 2rem auto; +} +.experience .timeline::after { + content: ''; + position: absolute; + width: 6px; + background: #020133; + top: 0; + bottom: 0; + left: 50%; + margin-left: -3px; + z-index: -2; +} +.experience .container { + padding: 10px 40px; + position: relative; + background-color: inherit; + width: 50%; +} +/*circles on timeline*/ +.experience .container::after { + content: "\f0b1"; + position: absolute; + width: 25px; + height: 25px; + right: -17px; + background-color: rgb(255, 255, 255); + border: 4px solid #f68c09; + top: 15px; + border-radius: 50%; + z-index: 100; + font-size: 1.89rem; + text-align: center; + font-weight: 600; + color:#02094b; + font-family: 'Font Awesome\ 5 Free'; +} +.experience .left { + left: 0; +} +.experience .right { + left: 50%; +} +/* arrows pointing right */ +.experience .left::before { + content: " "; + height: 0; + position: absolute; + top: 22px; + width: 0; + z-index: 1; + right: 30px; + border: medium solid #f68c09; + border-width: 10px 0 10px 10px; + border-color: transparent transparent transparent #f68c09; +} +/* arrows pointing left */ +.experience .right::before { + content: " "; + height: 0; + position: absolute; + top: 22px; + width: 0; + z-index: 1; + left: 30px; + border: medium solid #f68c09; + border-width: 10px 10px 10px 0; + border-color: transparent #f68c09 transparent transparent; +} +.experience .right::after { + left: -16px; +} +.experience .content { + background-color: #f68c09; + position: relative; + border-radius: 6px; +} +.experience .content .tag{ + font-size: 1.3rem; + padding-top: 1.5rem; + padding-left: 1.5rem; +} +.experience .content .desc{ + margin-left: 1.5rem; + padding-bottom: 1rem; +} +.experience .content .desc h3{ + font-size: 1.5rem; + font-weight: 600; +} +.experience .content .desc p{ + font-size: 1.2rem; +} +/* view all button */ +.morebtn{ + display: flex; + justify-content: center; + margin-bottom: 2rem; +} +.morebtn .btn { + position: relative; + line-height: 0; + padding: 1.6rem 3rem; + border-radius: .5em; + transition: 0.5s; + color: #fff; + background: #2506ad; + box-shadow: 0px 5px 10px rgba(48, 68, 247, .6); + text-align: center; +} +.morebtn .btn span { + font-weight: 600; + font-size: 1.7rem; + font-family: 'Nunito', sans-serif; +} +.morebtn .btn i { + margin-right: 0.5rem; + font-size: 1.5rem; + transition: 0.3s; +} +.morebtn .btn:hover{ + background: #1a047e; +} +.morebtn .btn:hover i { + transform: translateX(-8px); +} + +/* Media queries - Responsive timeline on screens less than 600px wide */ +@media screen and (max-width: 600px) { + .experience .timeline::after { + left: 31px; + } + .experience .container { + width: 100%; + padding-left: 70px; + padding-right: 25px; + } + .experience .container::before { + left: 60px; + border: medium solid #f68c09; + border-width: 10px 10px 10px 0; + border-color: transparent #f68c09 transparent transparent; + } + .experience .left::after { + left: 15px; + } + .experience .right::after { + left: 15px; + } + .experience .right { + left: 0%; + } + .experience .container::after { + font-size: 2.2rem;; + } +} +/* experience media queries ends */ +/* experience section ends */ + + +/* footer section starts */ +.footer{ + min-height: auto; + padding-top: 0; + background: rgb(0, 1, 43); +} +.footer .box-container{ + display: flex; + justify-content: center; + flex-wrap: wrap; +} +.footer .box-container .box{ + flex: 1 1 25rem; + margin: 2rem; +} +.footer .box-container .box h3{ + font-size: 2.5rem; + color: #fff; + padding-bottom: 1rem; + font-weight: normal; +} +.footer .box-container .box p{ + font-size: 1.5rem; + color: #ccc; + padding: .7rem 0; + text-transform: none; +} +.footer .box-container .box p i{ + padding-right: 1rem; + color: #ffae00; +} +.footer .box-container .box a{ + font-size: 1.5rem; + color: rgb(238, 238, 238); + padding: .3rem 0; + display: block; +} +.footer .box-container .box a:hover{ + color: #ffae00; +} +.footer .box-container .box .share{ + display: flex; + flex-wrap: wrap; + padding: 1rem 0; +} +.footer .box-container .box .share a{ + height: 4rem; + width: 4rem; + padding: 1rem; + text-align: center; + border-radius: 5rem; + font-size: 1.7rem; + margin-right: 1rem; + transition: .2s; + background: rgb(230, 230, 230); + color: #02094b; + border: none; +} +.footer .box-container .box .share a:hover{ + background: transparent; + transform: scale(0.98); + border: .1rem solid rgb(180, 178, 178); + color: #ffae00; +} +.footer .credit{ + padding: 1rem 0 0 0; + text-align: center; + font-size: 1.5rem; + font-family: 'Nunito',sans-serif; + font-weight: 600; + color: #fff; + border-top: .1rem solid #fff3; +} +.footer .credit a{ + color: #ffae00; +} +.footer .fa{ + color: #E90606; + margin: 0 .3rem; + font-size: 1.5rem; + animation: pound .35s infinite alternate; +} +@-webkit-keyframes pound{ + to{ + transform: scale(1.1); + } +} +@keyframes pound{ + to{ + transform: scale(1.1); +} +} +@media(max-width:450px){ + .footer .box-container .box{ + margin: 2rem; + } + .footer .box-container .box p{ + padding: 0.7rem; + } + .footer .box-container .box .share a{ + padding: 1.1rem; + } +} +/* footer section ends */ + +/* common media queries starts*/ +@media(max-width:450px){ + html{ + font-size: 55%; + } + body{ + padding-right: 0; + } + section{ + padding: 2rem; + } +} +/* common media queries ends*/ + + +/* scroll top starts */ +#scroll-top{ + position: fixed; + top: -140%; + right: 2rem; + padding: 1rem 1.5rem; + font-size: 2rem; + background: #ffae00; + color: rgb(13, 0, 44); + border-radius: 5rem; + transition: 1s linear; + z-index: 1000; +} +#scroll-top.active{ + top: calc(100% - 12rem); +} /* scroll top ends */ \ No newline at end of file diff --git a/experience/index.html b/experience/2.html similarity index 50% rename from experience/index.html rename to experience/2.html index 5d19784e..7fecf0cd 100644 --- a/experience/index.html +++ b/experience/2.html @@ -1,223 +1,139 @@ - - - - - - - - - - - - Experience | Portfolio Jigar Sable - - - - -
- - - - -
- - - -
- -

Experience

-
- every experience in your life is being orchestrated to teach you something you need to know to move forward. -
- -
- -
-
-
-

Self Employed

-
-
-

Full Stack Developer

-

Oct 2021 - present

-
-
-
- -
-
-
-

DevIncept (Top Contributor)

-
-
-

DCP 2021 Contributor | Open Source Program

-

July 2021 - October 2021

-
-
-
- -
-
-
-

LetsGrowMore Summer of Code

-
-
-

LGM-SOC'21 Participant | Open Source Program

-

June 2021 - August 2021

-
-
-
- -
-
-
-

Mapstreak Flyseas

-
-
-

Web Developer | Internship

-

June 2021 - Dec 2021

-
-
-
- -
-
-
-

The Spark Foundation

-
-
-

Website Developer | Internship

-

May 2021 - June 2021

-
-
-
- -
-
-
-

The Spark Foundation

-
-
-

Mobile Application Developer | Internship

-

April 2021 - May 2021

-
-
-
- -
-
-
-

Frshr Technologies

-
-
-

Wordpress Developer | Internship

-

April 2021 - April 2021

-
-
-
- -
-
-
-

WonderingBlog

-
-
-

Web Development & SEO | Internship

-

March 2021 - April 2021

-
-
-
- -
-
-
-

Hacktoberfest 2020

-
-
-

Contributor | Open Source Program

-

October 2020 - November 2020

-
-
-
- -
- - - -
-
- - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + Experience | Heritage Solution + + + + +
+ + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/experience/script.js b/experience/script.js index a32d635a..1961aa01 100644 --- a/experience/script.js +++ b/experience/script.js @@ -65,7 +65,7 @@ document.onkeydown = function(e) { document.addEventListener('visibilitychange', function(){ if(document.visibilityState === "visible"){ - document.title = "Experience | Portfolio Jigar Sable"; + document.title = "Experience | Heritage Solution"; $("#favicon").attr("href","/assets/images/favicon.png"); } else { diff --git a/index.html b/index.html index 21b791c1..3d731ae6 100644 --- a/index.html +++ b/index.html @@ -1,125 +1,132 @@ + - - - - - - - - - - - - Portfolio | Jigar Sable + + + + + + + + + + + + Portfolio | Heritage Solution + - - + - -
- - - - -
- - - - -
+ +
+ + + + +
+ + + + +
-

Hi There,
I'm Jigar Sable

-

i am into

- About Me - - -
+

Hi There,
This is Heritage Solution

+

we are into

+ About Us + + +
-
- -
-
- +
+ +
+
+ - -
-

About Me

- + +
+

About Us

+
-
- -
-
-

I'm Jigar

- Full Stack Developer - -

I am a Full-Stack developer based in Pune, India. - I am an Information Technology undergraduate from SPPU. - I am very passionate about improving my coding skills & developing applications & websites. - I build WebApps and Websites using MERN Stack. - Working for myself to improve my skills. - Love to build Full-Stack clones.

- +
+ +
+
+

Heritage Solution

+ +

At Heritage Solution, we are a dynamic IT company dedicated to transforming ideas into impactful digital solutions. With a passion for innovation, we specialize in providing comprehensive web services, robust application development, and scalable backend solutions that meet the evolving demands of modern businesses.

+ + Our expertise extends to digital marketing, where we craft strategies that amplify your brand's online presence, and graphic design, creating visuals that leave a lasting impression. We take pride in delivering intuitive UI/UX designs that enhance user experiences and drive engagement.

+ + In addition, our team excels in game development services, bringing imaginative concepts to life with precision and creativity.Let us be your partner in achieving digital success.


+
- -
-

email : jigarsable21@gmail.com

-

place : Pune, India - 412206

-
-
- -
- Resume - - +
+

email : heritagesolution185@gmail.com

+

Contact : +91 8799370794

+

place : Surat, India - 412206

+ +
+ + +
-
-
- +
+ - -
+ +

Skills & Abilities

-
+
-
-
-
- + +
+ - -
+ + +
+
+ +
+
+

SSC

+

Khodiyar vidhyalaya | GSCB

+

2016 | Completed

+
+
+ + +
--> + - -
+ +
-

Projects Made

+

Projects Made

-
+
- -
+
- + -
- +
+ - -
+ + + -
- View All - - -
- + + +

Get in Touch

- -
- -

Get in Touch

- -
-
-
- -
-
- -
-
- - -
-
- - -
-
- - -
-
- - -
+
+
+
+
-
- + + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+
- -
-
-
- + +
--> + - - + - - - + + + - - - + + + - - + + - - - + + + - - + + - - + + - + - + - + + + + - + + \ No newline at end of file diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 00000000..25aa722c --- /dev/null +++ b/package-lock.json @@ -0,0 +1,6 @@ +{ + "name": "Portfolio-Website", + "lockfileVersion": 3, + "requires": true, + "packages": {} +} diff --git a/projects/1.css b/projects/1.css new file mode 100644 index 00000000..9fbaa742 --- /dev/null +++ b/projects/1.css @@ -0,0 +1,357 @@ +@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap"); +@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&display=swap'); + +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + text-decoration: none; + outline: none; border: none; + text-transform:capitalize; + transition: all .2s linear; +} +html{ + font-size: 62.5%; + overflow-x: hidden; + scroll-behavior: smooth; +} +body{ + background: #f7f7f7; + font-family: 'Poppins', sans-serif; +} + +*::selection{ + background: #2b3dda; + color: #fff; +} + +html{ + font-size: 62.5%; + overflow-x: hidden; +} +html::-webkit-scrollbar{ + width: .8rem; +} +html::-webkit-scrollbar-track{ + background: rgb(235, 202, 245); +} +html::-webkit-scrollbar-thumb{ + background: #420177; +} + +/* navbar starts */ +header{ + position: fixed; + top: 0; left: 0; right: 0; + z-index: 1000; + display: flex; + align-items: center; + justify-content: space-between; + padding: 1.7rem 10%; + height: 6.5rem; + background-color: #fff; + box-shadow: 0 1px 4px rgba(146,161,176,.3); +} +section{ + min-height: 100vh; + padding: 2rem 9%; +} +.heading{ + font-size: 3.5rem; + color: rgb(32, 32, 32); + font-weight: 800; + text-align: center; +} +.heading span{ + color: rgb(115, 3, 167); +} +header .logo{ + font-size: 1.9rem; + font-weight: 800; + text-decoration: none; + color: #0E2431; +} +header .logo i { + font-size: 2.2rem; +} +header .logo:hover { + color: #fc8c05; +} +header .navbar ul{ + list-style: none; + display: flex; + justify-content: center; + align-items: center; +} +header .navbar li{ + margin-left: 2.5rem; +} +header .navbar ul li a{ + font-size: 1.57rem; + color: #0E2431; + font-weight: 600; + text-decoration: none; + letter-spacing: 0.04rem; +} +header .navbar ul li a.active, +header .navbar ul li a:hover{ + color: #011aff; + border-bottom: .2rem solid #011aff; + padding: .5rem 0; +} +/* navbar ends */ + +/* hamburger icon starts*/ +#menu{ + font-size: 3rem; + cursor: pointer; + color: rgb(24, 2, 63); + display: none; +} +@media(max-width:768px){ + #menu{ + display: block; + } + header .navbar{ + position: fixed; + top: 6.5rem; right: -120%; + width: 75%; + height: 100%; + text-align: left; + align-items: flex-start; + background-color: #0e0f31; + } + header .navbar ul{ + flex-flow: column; + padding: 1rem; + } + header .navbar ul li{ + text-align: center; + width: 100%; + margin: 1rem 0; + border-radius: .5rem; + width: 26rem; + } + header .navbar ul li a{ + display: block; + padding: 1rem; + text-align: left; + color: #fff; + font-size: 2rem; + } + header .navbar ul li a.active, + header .navbar ul li a:hover{ + padding: 1rem; + color: #fff; + border-radius: .5rem; + border-bottom: .5rem solid #011aff; + } + .fa-times{ + transform: rotate(180deg); + } + header .navbar.nav-toggle{ + right: 0; + } +} +/* hamburger icon ends */ + +/* work section starts */ +.work{ + /* background: #010124; */ + background: linear-gradient(to bottom, #010136, #00003a); + margin-top: 5rem; +} +.work h2{ + color: #fff; + padding: 1rem; +} +.work .heading span{ + color: rgb(180, 155, 9); +} +.work .button-group{ + display: flex; + flex-wrap: wrap; + gap:1rem; + margin: 2rem auto; + width: 50%; + justify-content: center; + align-items: center; +} +.work .button-group .btn{ + outline: none; + padding: 1rem 2rem; + background: transparent; + color: #fff; + border: 1px solid #fff; + border-radius: 3px; + cursor: pointer; + font-weight: 500; +} +.work .button-group .btn:hover{ + background-color: #fff; + color: #000; +} +.work .button-group .btn.is-checked{ + background-color: #fff; + color: #000; +} + +.work .box-container{ + display: flex; + flex-wrap: wrap; + gap:1.5rem; + margin: 2rem; + justify-content: center; + align-items: center; +} +.work .box-container .box{ + width: 30rem; + border-radius: .5rem; + box-shadow: 0 .7rem 1rem rgba(0,0,0,.3); + position: relative; + overflow:hidden; + height:30rem; + background: #fff; + border: none; +} +.work .box-container .box img{ + height: 100%; + width:100%; + object-fit: cover; +} +.work .box-container .box .content{ + height: 100%; + width:100%; + position: absolute; + top:80%; left:0; + background:rgba(255, 255, 255, 0.9); + display: flex; + flex-direction: column; +} + +.work .box-container .box .content .tag { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + height: 6rem; + width: 100%; + padding-left: 1rem; + background: #ffd900; +} +.work .box-container .box .content .tag h3{ + font-size: 2rem; +} +.work .box-container .box:hover .content{ + top: 20%; +} +.work .desc { + margin: 2rem; + display: flex; + flex-direction: column; + justify-content: center; +} +.work .desc p{ + font-size: 1.5rem; +} +.work .desc .btns{ + display: flex; + justify-content: space-between; + width: 100%; + margin-top: 2rem; +} +.work .desc .btns .btn{ + line-height: 0; + display: inline; + padding: 1.5rem 2.5rem; + border-radius: .5rem; + font-size: 1.5rem; + color: #fff; + background: rgb(12, 12, 12); + margin-right: 2rem; +} +.work .desc .btns .btn:hover{ + background: #310ae0f5; +} + +@media screen and (max-width: 450px) { + .work .button-group{ + width: 100%; + } + .work .box-container{ + margin: 0rem; + } + .work .box-container .grid-item .box{ + width: 95% !important; + } +} + +/* back to home button */ +.backbtn{ + display: flex; + justify-content: center; + margin-bottom: 2rem; + margin-top: 4rem; +} +.backbtn .btn { + position: relative; + line-height: 0; + padding: 1.6rem 3rem; + border-radius: .5em; + transition: 0.3s; + color: #fff; + border: 2px solid #fff; + box-shadow: 0px 2px 4px rgba(48, 68, 247, .3); + text-align: center; +} +.backbtn .btn span { + font-weight: 600; + font-size: 1.7rem; + font-family: 'Nunito', sans-serif; +} +.backbtn .btn i { + margin-right: 0.5rem; + font-size: 1.5rem; + transition: 0.3s; +} +.backbtn .btn:hover{ + background: #ffffff; + color: #000; +} +.backbtn .btn:hover i { + transform: translateX(-8px); +} +/* work section ends */ + +/* common media queries starts*/ +@media(max-width:450px){ + html{ + font-size: 55%; + } + body{ + padding-right: 0; + } + section{ + padding: 2rem; + } +} +/* common media queries ends*/ + + +/* scroll top starts */ +#scroll-top{ + position: fixed; + top: -140%; + right: 2rem; + padding: 1rem 1.5rem; + font-size: 2rem; + background: #ffae00; + color: rgb(13, 0, 44); + border-radius: 5rem; + transition: 1s linear; + z-index: 1000; +} +#scroll-top.active{ + top: calc(100% - 12rem); +} +/* scroll top ends */ \ No newline at end of file diff --git a/projects/1.html b/projects/1.html new file mode 100644 index 00000000..81b0002a --- /dev/null +++ b/projects/1.html @@ -0,0 +1,111 @@ + + + + + + + + + + + + Projects | Heritage Solution + + + + + +
+ + + + +
+ + + +
+ +

Projects Made

+ +
+ + + + + +
+ +
+ +
+ +
+
+

Portfolio Website

+
+
+

Company portfolio website. Don't need much info about it, just scroll down. You're here only!

+
+ View + Code +
+
+
+
+ +
+ +
+ + + Back to Home + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/projects/index.html b/projects/index.html deleted file mode 100644 index 89376a9b..00000000 --- a/projects/index.html +++ /dev/null @@ -1,100 +0,0 @@ - - - - - - - - - - - Projects | Portfolio Jigar Sable - - - - -
- - - - -
- - - -
- -

Projects Made

- -
- - - - - -
- -
- - - -
- -
- - - Back to Home - -
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/projects/projects.json b/projects/projects.json index b38368a6..7d0a6ea8 100644 --- a/projects/projects.json +++ b/projects/projects.json @@ -1,342 +1,92 @@ [ { - "name": "NotyStack Android", - "desc": "Fully fledged android CRUD app based on different design patterns. Built using Java, XML, SQLite, Firebase, RoomDB, MVVM.", - "image": "notystackandroid", - "category": "android", + "name": "PIONEER", + "desc": "HTML5, CSS3, Bootstrap, JavaScript, ReactJs, NodeJs, MySQL, Sequelize, ExpressJs.", + "image": "pioneers", + "category": "mern", "links": { - "view": "https://www.linkedin.com/posts/jigar-sable_androiddev-androidstudio-java-activity-6955224473822199808-JT0j", - "code": "https://github.com/jigar-sable/notystack-android" + "view": "http://pioneersaccountancy.com/", + "code": "" } }, { - "name": "SPPU Engg Prep", - "desc": "All in one SPPU Engineering resources. Built using Java, XML and Firebase.", - "image": "sppuprepandroid", + "name": "BEST Lab Grown Diamonds", + "desc": "BEST Lab Grown Diamonds. Built using Java, XML and Firebase.", + "image": "diamondRensu", "category": "android", "links": { - "view": "https://www.linkedin.com/posts/jigar-sable_androiddev-androidstudio-java-activity-6955224473822199808-JT0j", - "code": "https://github.com/jigar-sable/sppu-prep-android" + "view": "https://diamondrensu.com/pages/lab-grown-diamonds", + "code": "" } }, { - "name": "NewsBox Android", - "desc": "Native android app built using Java, XML. Retrofit & Glide dependencies. Provides different category news.", - "image": "newsboxandroid", + "name": "KOS: Wellness Simplified", + "desc": "KOS: Wellness Simplified built using Java, XML. Retrofit & Glide dependencies. Provides different category news.", + "image": "kos", "category": "android", "links": { - "view": "https://www.linkedin.com/posts/jigar-sable_androiddev-androidstudio-java-activity-6955224473822199808-JT0j", - "code": "https://github.com/jigar-sable/newsbox-android" + "view": "https://kos.com/collections/shop-all", + "code": "" } }, { - "name": "Weatherly Android", + "name": "BeautyBultler ", "desc": "Native android app built using Java, XML and Volley dependencies. Provides weather forecast.", - "image": "weatherlyandroid", + "image": "butler", "category": "android", "links": { - "view": "https://www.linkedin.com/posts/jigar-sable_androiddev-androidstudio-java-activity-6955224473822199808-JT0j", - "code": "https://github.com/jigar-sable/weatherly-android" + "view": "https://www.mybeautybutler.com/", + "code": "" } - }, + }, { - "name": "Instagram MERN", + "name": "TotalGamingHub", "desc": "Full-Stack Instagram clone built using MERN stack and realtime chat with the help of socket.iO", - "image": "instagrammern", + "image": "tgh", "category": "mern", "links": { - "view": "https://instagramernstack.herokuapp.com/", - "code": "https://github.com/jigar-sable/instagram-mern" + "view": "https://totalgaminghub.com/", + "code": "" } }, { - "name": "Flipkart MERN", + "name": "Cups of love", "desc": "Full-Stack Flipkart with Admin Dashboard and Paytm Payment Gateway. MERN Stack WebApp, ready to use for business.", - "image": "flipkartmern", + "image": "cupsoflove", "category": "mern", "links": { - "view": "https://flipkartwebs.herokuapp.com/", - "code": "https://github.com/jigar-sable/flipkart-mern" + "view": "https://play.google.com/store/apps/details?id=com.cupsoflove.app", + "code": "" } }, { - "name": "ResumeGen", + "name": "SeneStudio (E-Commerce website)", "desc": "ReactJS Basic Resume Generator which will generate customized resume in few minutes on your requirements.", - "image": "resumegen", + "image": "sene", "category": "mern", "links": { - "view": "https://resumegenx.netlify.app/", - "code": "https://github.com/jigar-sable/resumegen" + "view": "https://senestudio.com/", + "code": "" } }, { - "name": "React-Projects", + "name": "Aaroha(Consulutancy App)", "desc": "Full-Stack project dashboard which is collection of projects built on the React library.", - "image": "reactprojects", + "image": "aroha", "category": "mern", "links": { - "view": "https://reactjsprojects.herokuapp.com/", - "code": "https://github.com/jigar-sable/React-Projects" + "view": "https://play.google.com/store/apps/details?id=com.arohaconsulting.connect&hl=en", + "code": "" } }, { - "name": "Flipkart PHP", + "name": "Mental Math", "desc": "Full-Stack Flipkart Clone Using LAMP Stack. With all major features and OTP authentication and Cashfree payment gateway.", - "image": "flipkartphp", - "category": "lamp", - "links": { - "view": "https://github.com/jigar-sable/Flipkart-Clone-PHP", - "code": "https://github.com/jigar-sable/Flipkart-Clone-PHP" - } - }, - { - "name": "JavaScript Projects Website", - "desc": "This website is specially build to showcase all major javaScript projects. All my javaScript based projects are in it.", - "image": "jspro", - "category": "basicweb", - "links": { - "view": "https://jigar-sable.github.io/JavaScript-Projects", - "code": "https://github.com/jigar-sable/JavaScript-Projects" - } - }, - { - "name": "Web UI Clones", - "desc": "Flipkart, YouTube, Instagram, Sololearn web UI clones using tailwindCSS.", - "image": "webuiclones", - "category": "mern", - "links": { - "view": "https://github.com/jigar-sable/web-ui-clones", - "code": "https://github.com/jigar-sable/web-ui-clones" - } - }, - { - "name": "Crypto Tracker", - "desc": "Crypto Tracker built using ReactJS and Chakra UI. Supports dark mode. API used coingecko.", - "image": "cryptotracker", - "category": "mern", - "links": { - "view": "https://crypto-tracker-react-project.netlify.app/", - "code": "https://github.com/jigar-sable/React-Projects/tree/main/crypto-tracker" - } - }, - { - "name": "Hulu Website", - "desc": "Hulu website built using NextJS and tailwindCSS. API used TMDB, deployed on vercel.", - "image": "hulu", - "category": "mern", - "links": { - "view": "https://hulu-clone-jigar-sable.vercel.app/", - "code": "https://github.com/jigar-sable/React-Projects/tree/main/hulu-clone" - } - }, - { - "name": "Portfolio Website", - "desc": "Personal Portfolio Website. Don't Need Much Info About It, Just Scroll Down. You're Here Only!", - "image": "portfolio1", - "category": "basicweb", - "links": { - "view": "#", - "code": "https://github.com/jigar-sable/Portfolio-Website" - } - }, - { - "name": "Composey Website", - "desc": "Simple landing page website built using HTML, CSS, JavaScript and some JavaScript Libraries.", - "image": "composey", - "category": "basicweb", - "links": { - "view": "https://composey.netlify.app/", - "code": "https://github.com/jigar-sable/LGMVIP-WebDev" - } - }, - { - "name": "Webview App", - "desc": "It's an android app which uses web view component for displaying content. This app provides many different features.", - "image": "webviewapp", - "category": "android", - "links": { - "view": "https://github.com/jigar-sable/Android-Webview#webapp--android-webview-app", - "code": "https://github.com/jigar-sable/Android-Webview" - } - }, - { - "name": "PHP Banking Website", - "desc": "Basic Banking System based on PHP and MySQL database. Made with HTML, CSS, JavaScript and backend with PHP.", - "image": "tsfbank", + "image": "image_2025_02_03T05_19_37_412Z", "category": "lamp", "links": { - "view": "https://tsfbank.rf.gd", - "code": "https://github.com/jigar-sable/TSF-Bank" - } - }, - { - "name": "Bootstrap Portfolio", - "desc": "Portfolio built using HTML, CSS, Bootstrap, SASS and JavaScript. Customized Bootstrap using SCSS.", - "image": "bootstrapportfolio", - "category": "basicweb", - "links": { - "view": "#", - "code": "#" - } - }, - { - "name": "Bootstrap Template", - "desc": "Basic website template built using HTML and Bootstrap.", - "image": "bootstraptemplate", - "category": "basicweb", - "links": { - "view": "#", - "code": "#" - } - }, - { - "name": "Foodicious", - "desc": "Basic food website landing page built using HTML, CSS and JavaScript.", - "image": "foodicious", - "category": "basicweb", - "links": { - "view": "#", - "code": "#" - } - }, - { - "name": "Food Website", - "desc": "Basic food website landing page built using HTML, CSS, SASS, Bootstrap and jQuery.", - "image": "foodwebsite", - "category": "basicweb", - "links": { - "view": "#", - "code": "#" - } - }, - { - "name": "WebChat Website", - "desc": "It's a web based chat app made using popular javaScript library Socket IO. Allows multiple users to connect.", - "image": "webchat", - "category": "mern", - "links": { - "view": "https://github.com/jigar-sable/WebChat#webchat", - "code": "https://github.com/jigar-sable/WebChat" - } - }, - { - "name": "Basic Banking App", - "desc": "It's an android app which uses SQLite to store user accounts data. It provides feature to simply transact amount.", - "image": "basicbank", - "category": "android", - "links": { - "view": "https://github.com/jigar-sable/Basic_Banking_App#basic-banking-app", - "code": "https://github.com/jigar-sable/Basic_Banking_App" - } - }, - { - "name": "JavaScript Issue Tracker", - "desc": "It provides the feature to Assign Issue With The Auto Generated Id By Using ChanceJS. Uses Local Storage.", - "image": "issuetrack", - "category": "basicweb", - "links": { - "view": "https://jigar-sable.github.io/JavaScript-Projects/projects/issuetracker", - "code": "https://github.com/jigar-sable/JavaScript-Projects/tree/main/projects/issuetracker" - } - }, - { - "name": "PHP PBL Portal", - "desc": "A simple portal in which students can submit their PBL projects and faculties can view by access admin panel.", - "image": "phppblform", - "category": "lamp", - "links": { - "view": "https://github.com/jigar-sable/PHP-Projects/tree/main/pblform#pbl-portal", - "code": "https://github.com/jigar-sable/PHP-Projects/tree/main/pblform" - } - }, - { - "name": "Link List", - "desc": "All major profile links in a single website. It's just like clone of link tree. Personalized and Responsive.", - "image": "linklist", - "category": "basicweb", - "links": { - "view": "https://jigar-sable.github.io/LinkList", - "code": "https://github.com/jigar-sable/LinkList" - } - }, - { - "name": "Job Finder Dummy", - "desc": "It Fetch JSON Data And Allow Feature To Search Within The Content Displayed. Will be Developed By Using Live APIs.", - "image": "saas", - "category": "basicweb", - "links": { - "view": "https://jigar-sable.github.io/JavaScript-Projects/api-projects/saas-jobs", - "code": "https://github.com/jigar-sable/JavaScript-Projects/tree/main/api-projects/saas-jobs" - } - }, - { - "name": "Old Websites", - "desc": "Bestwebs & ColorCoder. Two Years old websites memories. Simple with basic features.", - "image": "oldsites", - "category": "basicweb", - "links": { - "view": "#", - "code": "#" - } - }, - { - "name": "Resistor Color Codes", - "desc": "Simply provides the color codes of resistors. Calculation information and about resistors.", - "image": "resistercolor", - "category": "basicweb", - "links": { - "view": "#", - "code": "#" - } - }, - { - "name": "KIA Info Website", - "desc": "Basic KIA webpage displays the info about seltos product range. Specs and Image Gallery.", - "image": "kiaweb", - "category": "basicweb", - "links": { - "view": "#", - "code": "#" - } - }, - { - "name": "Burger Shop Dummy", - "desc": "Basic burger shop webpage allow users to check menu and price. Dummy Order Form.", - "image": "burgerweb", - "category": "basicweb", - "links": { - "view": "#", - "code": "#" - } - }, - { - "name": "Indian Temples", - "desc": "It shows temples of different sectors of India. as user clicks it will redirect to wiki of that temple for info.", - "image": "templeweb", - "category": "basicweb", - "links": { - "view": "#", - "code": "#" - } - }, - { - "name": "Indian Temples", - "desc": "It shows temples of different sectors of India. as user clicks it will redirect to wiki of that temple for info.", - "image": "templeweb", - "category": "basicweb", - "links": { - "view": "#", - "code": "#" - } - }, - { - "name": "Indian Temples", - "desc": "It shows temples of different sectors of India. as user clicks it will redirect to wiki of that temple for info.", - "image": "templeweb", - "category": "basicweb", - "links": { - "view": "#", - "code": "#" + "view": "https://play.google.com/store/apps/details?id=com.digitalapps.mentalmath&hl=en", + "code": "" } } ] diff --git a/projects/script.js b/projects/script.js index 63047f12..bff779d7 100644 --- a/projects/script.js +++ b/projects/script.js @@ -20,8 +20,8 @@ $(document).ready(function () { document.addEventListener('visibilitychange', function () { if (document.visibilityState === "visible") { - document.title = "Projects | Portfolio Jigar Sable"; - $("#favicon").attr("href", "/assets/images/favicon.png"); + document.title = "Projects | Heritage Solution"; + $("#favicon").attr("href", "/assets/images/Heritage.jpeg"); } else { document.title = "Come Back To Portfolio"; @@ -46,7 +46,7 @@ function showProjects(projects) { projects.forEach(project => { projectsHTML += `
-
+
project
@@ -56,7 +56,6 @@ function showProjects(projects) {

${project.desc}

diff --git a/projects/style.css b/projects/style.css index 8964625a..e69de29b 100644 --- a/projects/style.css +++ b/projects/style.css @@ -1,353 +0,0 @@ -@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap"); -@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&display=swap'); - -*{ - margin: 0; - padding: 0; - box-sizing: border-box; - text-decoration: none; - outline: none; border: none; - text-transform:capitalize; - transition: all .2s linear; -} -html{ - font-size: 62.5%; - overflow-x: hidden; - scroll-behavior: smooth; -} -body{ - background: #f7f7f7; - font-family: 'Poppins', sans-serif; -} - -*::selection{ - background: #2b3dda; - color: #fff; -} - -html{ - font-size: 62.5%; - overflow-x: hidden; -} -html::-webkit-scrollbar{ - width: .8rem; -} -html::-webkit-scrollbar-track{ - background: rgb(235, 202, 245); -} -html::-webkit-scrollbar-thumb{ - background: #420177; -} - -/* navbar starts */ -header{ - position: fixed; - top: 0; left: 0; right: 0; - z-index: 1000; - display: flex; - align-items: center; - justify-content: space-between; - padding: 1.7rem 10%; - height: 6.5rem; - background-color: #fff; - box-shadow: 0 1px 4px rgba(146,161,176,.3); -} -section{ - min-height: 100vh; - padding: 2rem 9%; -} -.heading{ - font-size: 3.5rem; - color: rgb(32, 32, 32); - font-weight: 800; - text-align: center; -} -.heading span{ - color: rgb(115, 3, 167); -} -header .logo{ - font-size: 1.9rem; - font-weight: 800; - text-decoration: none; - color: #0E2431; -} -header .logo i { - font-size: 2.2rem; -} -header .logo:hover { - color: #fc8c05; -} -header .navbar ul{ - list-style: none; - display: flex; - justify-content: center; - align-items: center; -} -header .navbar li{ - margin-left: 2.5rem; -} -header .navbar ul li a{ - font-size: 1.57rem; - color: #0E2431; - font-weight: 600; - text-decoration: none; - letter-spacing: 0.04rem; -} -header .navbar ul li a.active, -header .navbar ul li a:hover{ - color: #011aff; - border-bottom: .2rem solid #011aff; - padding: .5rem 0; -} -/* navbar ends */ - -/* hamburger icon starts*/ -#menu{ - font-size: 3rem; - cursor: pointer; - color: rgb(24, 2, 63); - display: none; -} -@media(max-width:768px){ - #menu{ - display: block; - } - header .navbar{ - position: fixed; - top: 6.5rem; right: -120%; - width: 75%; - height: 100%; - text-align: left; - align-items: flex-start; - background-color: #0e0f31; - } - header .navbar ul{ - flex-flow: column; - padding: 1rem; - } - header .navbar ul li{ - text-align: center; - width: 100%; - margin: 1rem 0; - border-radius: .5rem; - width: 26rem; - } - header .navbar ul li a{ - display: block; - padding: 1rem; - text-align: left; - color: #fff; - font-size: 2rem; - } - header .navbar ul li a.active, - header .navbar ul li a:hover{ - padding: 1rem; - color: #fff; - border-radius: .5rem; - border-bottom: .5rem solid #011aff; - } - .fa-times{ - transform: rotate(180deg); - } - header .navbar.nav-toggle{ - right: 0; - } -} -/* hamburger icon ends */ - -/* work section starts */ -.work{ - /* background: #010124; */ - background: linear-gradient(to bottom, #010136, #00003a); - margin-top: 5rem; -} -.work h2{ - color: #fff; - padding: 1rem; -} -.work .heading span{ - color: rgb(255, 230, 0); -} -.work .button-group{ - display: flex; - flex-wrap: wrap; - gap:1rem; - margin: 2rem auto; - width: 50%; - justify-content: center; - align-items: center; -} -.work .button-group .btn{ - outline: none; - padding: 1rem 2rem; - background: transparent; - color: #fff; - border: 1px solid #fff; - border-radius: 3px; - cursor: pointer; - font-weight: 500; -} -.work .button-group .btn:hover{ - background-color: #fff; - color: #000; -} -.work .button-group .btn.is-checked{ - background-color: #fff; - color: #000; -} -.work .box-container{ - display: flex; - flex-wrap: wrap; - gap:1.5rem; - margin: 2rem; -} -.work .box-container .box{ - flex:1 1 30rem; - border-radius: .5rem; - box-shadow: 0 .7rem 1rem rgba(0,0,0,.3); - position: relative; - overflow:hidden; - height:30rem; - background: #fff; - border: none; -} -.work .box-container .box img{ - height: 100%; - width:100%; - object-fit: cover; -} -.work .box-container .box .content{ - height: 100%; - width:100%; - position: absolute; - top:85%; left:0; - background:rgba(255, 255, 255, 0.9); - display: flex; - flex-direction: column; -} -.work .box-container .box .content .tag{ - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - height: 4.5rem; - width: 100%; - padding-left: 1rem; - background: #ffd900; -} -.work .box-container .box .content .tag h3{ - font-size: 2rem; -} -.work .box-container .box:hover .content{ - top: 25%; -} -.work .desc { - margin: 2rem; - display: flex; - flex-direction: column; - justify-content: center; -} -.work .desc p{ - font-size: 1.5rem; -} -.work .desc .btns{ - display: flex; - justify-content: space-between; - width: 100%; - margin-top: 2rem; -} -.work .desc .btns .btn{ - line-height: 0; - display: inline; - padding: 1.5rem 2.5rem; - border-radius: .5rem; - font-size: 1.5rem; - color: #fff; - background: rgb(12, 12, 12); - margin-right: 2rem; -} -.work .desc .btns .btn:hover{ - background: #310ae0f5; -} - -@media screen and (max-width: 450px) { - .work .button-group{ - width: 100%; - } - .work .box-container{ - margin: 0rem; - } - .work .box-container .grid-item .box{ - width: 95% !important; - } -} - -/* back to home button */ -.backbtn{ - display: flex; - justify-content: center; - margin-bottom: 2rem; - margin-top: 4rem; -} -.backbtn .btn { - position: relative; - line-height: 0; - padding: 1.6rem 3rem; - border-radius: .5em; - transition: 0.3s; - color: #fff; - border: 2px solid #fff; - box-shadow: 0px 2px 4px rgba(48, 68, 247, .3); - text-align: center; -} -.backbtn .btn span { - font-weight: 600; - font-size: 1.7rem; - font-family: 'Nunito', sans-serif; -} -.backbtn .btn i { - margin-right: 0.5rem; - font-size: 1.5rem; - transition: 0.3s; -} -.backbtn .btn:hover{ - background: #ffffff; - color: #000; -} -.backbtn .btn:hover i { - transform: translateX(-8px); -} -/* work section ends */ - -/* common media queries starts*/ -@media(max-width:450px){ - html{ - font-size: 55%; - } - body{ - padding-right: 0; - } - section{ - padding: 2rem; - } -} -/* common media queries ends*/ - - -/* scroll top starts */ -#scroll-top{ - position: fixed; - top: -140%; - right: 2rem; - padding: 1rem 1.5rem; - font-size: 2rem; - background: #ffae00; - color: rgb(13, 0, 44); - border-radius: 5rem; - transition: 1s linear; - z-index: 1000; -} -#scroll-top.active{ - top: calc(100% - 12rem); -} -/* scroll top ends */ \ No newline at end of file diff --git a/skills.json b/skills.json index 78100ee7..423f0463 100644 --- a/skills.json +++ b/skills.json @@ -16,21 +16,15 @@ "icon": "https://img.icons8.com/color/48/000000/redux.png" }, { - "name": "Firebase", + "name": "Firebase", "icon": "https://img.icons8.com/color/48/000000/firebase.png" }, - { - "name": "Android", - "icon": "https://img.icons8.com/fluency/48/000000/android-os.png" - }, + { "name": "MaterialUI", "icon": "https://img.icons8.com/color/48/000000/material-ui.png" }, - { - "name": "ChakraUI", - "icon": "https://img.icons8.com/color/48/000000/chakra-ui.png" - }, + { "name": "TailwindCSS", "icon": "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/Tailwind_CSS_Logo.svg/48px-Tailwind_CSS_Logo.png" @@ -55,26 +49,13 @@ "name": "JavaScript", "icon": "https://img.icons8.com/color/48/000000/javascript--v1.png" }, - { - "name": "Java", - "icon": "https://img.icons8.com/color/48/000000/java-coffee-cup-logo--v1.png" - }, - { - "name": "Kotlin", - "icon": "https://img.icons8.com/color/48/000000/kotlin.png" - }, + + { "name": "PHP", "icon": "https://img.icons8.com/offices/48/000000/php-logo.png" }, - { - "name": "Python", - "icon": "https://img.icons8.com/color/48/000000/python--v1.png" - }, - { - "name": "C++", - "icon": "https://img.icons8.com/color/48/000000/c-plus-plus-logo.png" - }, + { "name": "MongoDB", "icon": "https://img.icons8.com/color/48/000000/mongodb.png" @@ -83,10 +64,7 @@ "name": "MySQL", "icon": "https://img.icons8.com/color/48/000000/mysql-logo.png" }, - { - "name": "PostgreSQL", - "icon": "https://img.icons8.com/color/48/000000/postgreesql.png" - }, + { "name": "AWS", "icon": "https://img.icons8.com/color/48/000000/amazon-web-services.png" @@ -106,17 +84,18 @@ { "name": "jQuery", "icon": "https://img.icons8.com/ios-filled/48/1169ae/jquery.png" - }, + }, { - "name": "Git VCS", - "icon": "https://img.icons8.com/color/48/000000/git.png" - }, - { - "name": "GitHub", + "name": "GitHub", "icon": "https://img.icons8.com/glyph-neue/48/ffffff/github.png" }, { "name": "WordPress", "icon": "https://img.icons8.com/color/48/000000/wordpress.png" - } + }, + { + "name": "Unity", + "icon": "https://img.icons8.com/?size=50&id=IPzemd2v4Ubj&format=png&color=000000" + } + ] \ No newline at end of file