diff --git a/images/Projects/Project1.png b/images/Projects/Project1.png new file mode 100644 index 0000000..2115aab Binary files /dev/null and b/images/Projects/Project1.png differ diff --git a/images/Projects/Project2.png b/images/Projects/Project2.png new file mode 100644 index 0000000..23c67c3 Binary files /dev/null and b/images/Projects/Project2.png differ diff --git a/images/Projects/Project3.png b/images/Projects/Project3.png new file mode 100644 index 0000000..894b4d3 Binary files /dev/null and b/images/Projects/Project3.png differ diff --git a/images/Projects/Project4.png b/images/Projects/Project4.png new file mode 100644 index 0000000..21ed873 Binary files /dev/null and b/images/Projects/Project4.png differ diff --git a/images/Userasset/Navlogo.png b/images/Userasset/Navlogo.png new file mode 100644 index 0000000..75dce9a Binary files /dev/null and b/images/Userasset/Navlogo.png differ diff --git a/images/Userasset/UserImage.jpg b/images/Userasset/UserImage.jpg new file mode 100644 index 0000000..a398b1c Binary files /dev/null and b/images/Userasset/UserImage.jpg differ diff --git a/images/Userasset/blob vector.png b/images/Userasset/blob vector.png new file mode 100644 index 0000000..efc8b24 Binary files /dev/null and b/images/Userasset/blob vector.png differ diff --git a/images/Userasset/circle.png b/images/Userasset/circle.png new file mode 100644 index 0000000..d817195 Binary files /dev/null and b/images/Userasset/circle.png differ diff --git a/images/Userasset/cube.png b/images/Userasset/cube.png new file mode 100644 index 0000000..192e674 Binary files /dev/null and b/images/Userasset/cube.png differ diff --git a/images/Userasset/dots.png b/images/Userasset/dots.png new file mode 100644 index 0000000..2ec0459 Binary files /dev/null and b/images/Userasset/dots.png differ diff --git a/images/Userasset/plus.png b/images/Userasset/plus.png new file mode 100644 index 0000000..9a12fd7 Binary files /dev/null and b/images/Userasset/plus.png differ diff --git a/images/Userasset/zigzags.png b/images/Userasset/zigzags.png new file mode 100644 index 0000000..5e8c34c Binary files /dev/null and b/images/Userasset/zigzags.png differ diff --git a/images/stack/Bash.svg b/images/stack/Bash.svg new file mode 100644 index 0000000..b3f3125 --- /dev/null +++ b/images/stack/Bash.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/images/stack/Bootstrap.svg b/images/stack/Bootstrap.svg new file mode 100644 index 0000000..7965e4c --- /dev/null +++ b/images/stack/Bootstrap.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/stack/CSS.png b/images/stack/CSS.png new file mode 100644 index 0000000..d897f0f Binary files /dev/null and b/images/stack/CSS.png differ diff --git a/images/stack/ChartJs.svg b/images/stack/ChartJs.svg new file mode 100644 index 0000000..24f5a2b --- /dev/null +++ b/images/stack/ChartJs.svg @@ -0,0 +1 @@ +Artboard 6 \ No newline at end of file diff --git a/images/stack/Docker.svg b/images/stack/Docker.svg new file mode 100644 index 0000000..6f66bd3 --- /dev/null +++ b/images/stack/Docker.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/stack/Express.png b/images/stack/Express.png new file mode 100644 index 0000000..568baba Binary files /dev/null and b/images/stack/Express.png differ diff --git a/images/stack/Git.svg b/images/stack/Git.svg new file mode 100644 index 0000000..e52b883 --- /dev/null +++ b/images/stack/Git.svg @@ -0,0 +1,5 @@ + + +git + + diff --git a/images/stack/Github.svg b/images/stack/Github.svg new file mode 100644 index 0000000..985f3e3 --- /dev/null +++ b/images/stack/Github.svg @@ -0,0 +1,5 @@ + + +github + + diff --git a/images/stack/Graphql.svg b/images/stack/Graphql.svg new file mode 100644 index 0000000..afa84f3 --- /dev/null +++ b/images/stack/Graphql.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/stack/HTML.png b/images/stack/HTML.png new file mode 100644 index 0000000..5f2157a Binary files /dev/null and b/images/stack/HTML.png differ diff --git a/images/stack/Javascript.svg b/images/stack/Javascript.svg new file mode 100644 index 0000000..37d265b --- /dev/null +++ b/images/stack/Javascript.svg @@ -0,0 +1,5 @@ + + +javascript + + diff --git a/images/stack/K8s.svg b/images/stack/K8s.svg new file mode 100644 index 0000000..e4520b4 --- /dev/null +++ b/images/stack/K8s.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/stack/MaterialUI.svg b/images/stack/MaterialUI.svg new file mode 100644 index 0000000..cbcd08c --- /dev/null +++ b/images/stack/MaterialUI.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/stack/MongoDB.svg b/images/stack/MongoDB.svg new file mode 100644 index 0000000..685dc86 --- /dev/null +++ b/images/stack/MongoDB.svg @@ -0,0 +1,5 @@ + + +mongodb + + diff --git a/images/stack/Next.svg b/images/stack/Next.svg new file mode 100644 index 0000000..312dc61 --- /dev/null +++ b/images/stack/Next.svg @@ -0,0 +1,18 @@ + + + + next-black + Created with Sketch. + + + + + + + + + + + + + \ No newline at end of file diff --git a/images/stack/NextJsCircle.png b/images/stack/NextJsCircle.png new file mode 100644 index 0000000..bc5e45c Binary files /dev/null and b/images/stack/NextJsCircle.png differ diff --git a/images/stack/NodeJs.svg b/images/stack/NodeJs.svg new file mode 100644 index 0000000..32a174f --- /dev/null +++ b/images/stack/NodeJs.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/images/stack/React.png b/images/stack/React.png new file mode 100644 index 0000000..31d3d0b Binary files /dev/null and b/images/stack/React.png differ diff --git a/images/stack/Redux.svg b/images/stack/Redux.svg new file mode 100644 index 0000000..6051cba --- /dev/null +++ b/images/stack/Redux.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/stack/Tailwind.png b/images/stack/Tailwind.png new file mode 100644 index 0000000..9f5680c Binary files /dev/null and b/images/stack/Tailwind.png differ diff --git a/images/stack/Vercel.svg b/images/stack/Vercel.svg new file mode 100644 index 0000000..fdb6a41 --- /dev/null +++ b/images/stack/Vercel.svg @@ -0,0 +1,15 @@ + + + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..a7a8c77 --- /dev/null +++ b/index.html @@ -0,0 +1,322 @@ + + + + + + shantanu + + + + + + + + + + +
+ +
+
+ +
hantanu Yadav
+
+
+
Projects
+
Skills
+
Contact Me
+
+
+ +
+
+ Shantanu Yadav +
+
+
Hi! Shantanu Yadav +
+
+ I am a +
+
+ I am a software developer and here is my portfolio website. Here you'll + learn about my journey as a software developer. +
+
Hire me +
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
Hire me +
+
+ +
+

Projects

+
+
+
01
+
+
+ + + + + + + + + + +
+

Tint and Orange

+
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur, illo?
+
+
Read More
+ + + + + + +
+
+
+
+
02
+
+
+ + + + + + + + + + +
+

Tint and Orange

+
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur, illo?
+
+
Read More
+ + + + + + +
+
+
+
+
03
+
+
+ + + + + + + + + + +
+

Tint and Orange

+
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur, illo?
+
+
Read More
+ + + + + + +
+
+
+
+
04
+
+
+ + + + + + + + + + +
+

Tint and Orange

+
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur, illo?
+
+
Read More
+ + + + + + +
+
+
+
+
+ +
+
Skills
+
+

+ Me and +
+ MyTech Stack +

+
+

Hi Everyone My name is Shantanu Yadav Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum pariatur quae suscipit cum, vero ipsa quod tempore architecto voluptatem quam.

+

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Non doloremque aspernatur, maiores voluptatum minus laudantium? Perspiciatis accusamus minima porro dolores necessitatibus, magni dolorem et qui veniam nulla sequi molestiae maxime.

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis quidem quos ullam veritatis voluptates tenetur qui ipsa nulla culpa itaque?

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

+ Contact Me +

+

+ Questions, Thoughts, Or Just Want To Say Hello? +

+
+
+
+ +
+
+ +
+
+ +
+
+ +
+ +
+
+
+
+ + +
+ + + + + + + + + + + + + + \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..1314ce2 --- /dev/null +++ b/styles.css @@ -0,0 +1,654 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + scroll-behavior:smooth; + font-family: "Be Vietnam Pro", sans-serif; +} +:root{ + --bgOrange:#e84949; +} +#wrapper{ + height:100vh; + width:auto; + overflow-x:hidden; +} +.container{ + max-width: 1200px; + margin: 0 auto; +} +.navbar{ + display:flex ; + justify-content: space-between; + align-items: center; + padding-top:1rem; +} +.logo-container{ + display: flex; + justify-content: baseline; + align-items: center; +} +.logo{ + width:40px; +} +.nav-items{ + display: flex; + gap:2rem; + padding: 0 4rem; +} +.logo-text{ + font-size: 28px; +} +.nav-items div{ + font-size:20px; + font-weight: 500; + cursor: pointer; +} +.nav-items div a{ + color:black; + transition:0.8s; +} +.nav-items div:hover{ + font-weight: bold; +} +a{ + text-decoration: none; +} +.hero-section{ + position: relative; + display: flex; + justify-content: center; + align-items: center; + gap:5rem; + margin:4rem auto; + padding:0 1rem; + padding-bottom: 8rem; +} +.hero-section-left{ + display: flex; + flex-direction: column; + justify-content: center; + gap: 2rem; +} +.faded-text{ + position: absolute; + user-select: none; + font-size: 7em; + color: rgb(231,231,231); + bottom:-16%; + left:-5%; + transition: all 3s; + font-weight: bold; +} +.hero-section-heading{ + font-size: 35px; + font-weight: 500; + color:#343d68; +} +.hero-section-sub-heading{ + font-size:45px; + line-height:45px; +} +.hero-section-description{ + margin-top:1rem; + width:70%; + font-weight: 500; +} +.btn{ + background-color: #e84949; + padding:0.8rem 2.3rem; + color:white; + font-size: 18px; + box-shadow: 5px 5px 7px 0px #0000003f; + position:relative; + z-index: 1; + width:fit-content; +} +.btn::before{ + content:""; + background-color: white; + position: absolute; + top:0; + left:0; + right:0; + bottom: 0; + transform: scaleX(0); + transform-origin:left; + transition: 0.8s; + z-index: -1; +} +.btn:hover::before{ + transform: scaleX(1); +} +.btn:hover{ + color:black; +} +.role{ + color:#4e45d5; + font-weight: 800; +} +.hero-section-right{ + position: relative; +} +.absolute{ + position: absolute; +} +.user-image{ + padding: 2.5rem; + filter: grayscale(1); + transition: all 1s; + animation: scaleImage 5s linear infinite; +} +.user-image{ + z-index: -9; +} +@keyframes scaleImage{ + 0%{ + filter: grayscale(1); + transform: scale(1); + + } + 50%{ + filter: grayscale(0); + transform: scale(0.9); + box-shadow: 3px 3px 10px black; + } + 100%{ + filter: grayscale(1); + transform: scale(1); + } +} +.icons{ + z-index: 9; +} +.icon-dots{ + bottom:-1rem; + right:0rem; + animation:translatedots 5s linear infinite; +} +@keyframes translatedots { + 0%{ + transform: translateY(0px); + } + 50%{ + transform: translateY(-15px); + } + 100%{ + transform: translateY(0px); + } +} +.icon-cube{ + top:-0.8em; + right:1em; + animation: rotatecube 5s linear infinite; +} +@keyframes rotatecube { + 0%{ + transform:rotateY(0deg) translateY(0px) ; + } + 50%{ + transform:rotateY(180deg) translateY(-12px); + } + 100%{ + transform:rotateY(360deg) translateY(0px); + } +} +.icon-circle{ + bottom:0; + left:0; + animation: shakecircle 6s linear infinite; +} +@keyframes shakecircle { + 50%{ + left:5%; + bottom: 10%; + } +} +.icon-zigzag{ + top:1.5em; + left:-0.3em; + animation: zigzag 5s ease-in infinite ; +} +@keyframes zigzag { + 50%{ + left:5%; + top:2%; + } +} +.icon-plus{ + top:-0.8rem; + left:50%; + animation: shakeplus 5s ease-in infinite; +} +@keyframes shakeplus{ + 50%{ + top:3%; + left:48%; + } +} +.project-section{ + background-color:rgb(231,231,231); + margin-top:4rem; +} +.page-header{ + color:var(--bgOrange); + font-size:90px; + text-align:center; + padding-top:30px; +} +.project-container{ + max-width:1200px; + margin:0 auto; + padding: 3rem 0; + display: flex; + flex-direction: column; + gap:120px; +} +.project-card{ + width:90%; + height:550px; + background-size: cover; + position: relative; + box-shadow: 0px 0px 40px #1f1f1f; +} +.project-card::after{ + content: ""; + position: absolute; + top:0; + left:0; + right:0; + bottom:0; + background-color: #1f1f1f9a; + transform:scaleX(1) +} +.project-card::before{ + content: ""; + position: absolute; + top:0; + left:0; + right:0; + bottom:0; + background:linear-gradient(45deg,#343d68,#343d68be,#343d687c); + transform:scaleX(0); + transition:all 0.4s; + transform-origin:left; +} +.project-card:hover::before{ + transform:scale(1) +} +.project-number{ + z-index:9; + position: absolute; + font-size: 200px; + font-weight: 600; + color:rgb(255,255,255); + opacity: 0; +} +.number-right{ + right:-40px; + top:-45px; +} +.number-left{ + left:-40px; + top:-45px; +} +.project-content { + display: flex; + flex-direction: column; + gap: 1rem; + color: white; + padding: 2em; + bottom: 20%; + position: absolute; + z-index: 5; + transition: all 0.4s; +} +.project-card:hover .project-content{ + transform: scale(1.1); +} +.project-card:hover .project-number{ + opacity: 1; +} +.project-content-left{ + left:10%; +} +.project-content-right{ + right:10%; +} +.project-skill-container { + max-width: 60%; + width: fit-content; + display: flex; + gap: 10px; + flex-wrap: wrap; + transition: all 0.2s; + border-radius: 5px; +} +.project-skill{ + width:40px; +} +.project-heading{ + font-size: 50px; + font-weight: bold; + line-height: 3rem; +} +.project-subHeading{ + width:70%; + font-size: 16px; + font-style: italic; +} +.btn-group { + display: flex; + gap: 0.9rem; + align-items: center; +} +.icon { + cursor: pointer; + font-size: 35px; + transition: all 0.4s; + color: #fff; +} +#project1{ + background-image: url(./images/Projects/Project1.png); +} +#project2{ + background-image: url(./images/Projects/Project2.png); + margin-left:120px; +} +#project3{ + background-image: url(./images/Projects/Project3.png); +} +#project4{ + background-image: url(./images/Projects/Project4.png); + margin-left:120px; +} +.skills-container { + position: relative; + display: flex; + padding: 5rem 0; + margin: 10rem auto; + gap: 30px; +} +.skill-container-left { + display: flex; + flex-direction: column; + width: 50%; +} +.skill-heading { + position: relative; + z-index: -9; + color: var(--bgOrange); + line-height: 50px; + font-size: 50px; +} +.caps { + font-size: 80px; +} +.skill-subHeading { + margin-top: 1rem; + width: 85%; + text-align: justify; +} +.skill-subHeading p { + margin: 15px 0; +} +.skill-container-right { + display: flex; + flex-wrap: wrap; + gap: 2em; + width: 50%; + position: relative; + justify-content: center; +} +.skills-logo { + width: 90px; + transition: all 0.5s; +} +.skills-logo:hover { + transform: scale(1.2); +} +.blob-style { + position: absolute; + z-index: -5; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + animation: blobAnimate 3s linear infinite; +} +@keyframes blobAnimate { + 50% { + top: 54%; + left: 46%; + } +} +.skill-fade-text { + font-size: 15em; + font-weight: bold; + color: rgb(231, 231, 231); + bottom: -34.5%; + overflow-y: hidden; + right: -25%; + user-select: none; +} +.contactme-container{ + width: 100%; + background-color: rgb(231,231,231); ; +} +.contactme-heading{ + font-size: 5em; + color: var(--bgOrange); + padding-top: 2rem; +} +.contactme-subHeading{ + font-size:3rem; + color:#343d68be; +} +.contactme-form-container{ + display: flex; + margin-top: 25px; + justify-content: center; + align-items: center; +} +.form{ + width:70%; + margin:2rem; + display: flex; + flex-direction: column; + gap:30px; +} +.form-field-container{ + width:100%; +} +.formfield{ + width:100%; + height: 42px; + padding: 0 2rem; + font-size: 18px; + border-radius: 5px; + box-shadow: 2px 2px 10px #1f1f1f; + font-weight: 500; + border:none; + background: #ffffff97; +} +.formfield-textarea{ + height: auto; + padding-top: 1rem; +} +#submit-btn{ + border:none; + font-size: 1.4rem; + margin:1rem 0; +} +.submit-icon{ + padding:0 1rem; + font-size: 1.5rem; +} +#submit-btn:hover{ + scale:0.9; +} +footer{ + position: relative; + margin-top:-1px ; + background-color:#343d68; + padding: 5rem; +} +.footer-wrapper{ + display: flex; + gap:1rem; + padding: 1.2rem; + justify-content: space-between; + align-items: center; +} +.footer-faded-text{ + font-size:5em; + left:0; + bottom:0; + user-select: none; + color: #535c87; +} +.link-wrapper{ + display: flex; + gap:1.2rem; +} +.link-wrapper div a{ + color:white; + text-decoration: none; + transition: all 0.6s; +} +.link-wrapper div a:hover{ + color:var(--bgOrange) +} +.icon-wrapper{ + display: flex; + gap:1rem; +} +.icon-wrapper .icon:hover{ + color: var(--bgOrange); +} +.btn-bottom{ + display: none; +} +@media (max-width: 1500px){ + .nav-items { + padding: 0 8em; + } +} + +@media(max-width:1300px){ + .hero-section{ + flex-direction: column; + padding-bottom: 3rem; + text-align: center; + justify-content: center; + align-items: center; + } + .hero-section-description{ + text-align: center; + margin: auto; + } + .btn-top{ + display: none; + } + .btn-bottom{ + margin-top: -3rem; + display: block; + } + .faded-text{ + display: none; + } + .project-container{ + justify-content: center; + align-items: center; + padding: 5px; + margin: 10px; + gap:60px; + } + .project-card{ + width:100%; + height: 300px; + background-size: cover; + background-position: center; + } + #project2, #project4{ + margin-left: 0px; + } + .project-content{ + scale: 0.5; + bottom: 0; + left: 0; + right: 0; + top: 0; + } + .project-number{ + display: none; + } + .page-header{ + padding-top: 30px; + font-size: 40px; + } + .skills-container{ + flex-direction: column; + margin: 0; + padding:2rem; + + } + .skill-container-left,.skill-container-right{ + width: 100%; + } + .skill-heading{ + font-size: 40px; + } + .skill-subHeading{ + width:100%; + } + .skill-fade-text{ + display: none; + } + .skills-logo{ + width: 50px; + } + .form { + width: 100%; + margin: 0; + align-items: center; + } + .contactme-heading{ + font-size: 40px; + text-align: center; + padding: 15px 10px + } + .contactme-subHeading{ + font-size: 20px; + padding: 0 10px; + text-align: center; + } + .form-field-container { + display: flex; + align-items: center; + width: 90%; + } + .footer-wrapper{ + flex-direction: column; + justify-content: center; + align-items: center; + gap: 1.5rem; + } + footer{ + padding: 0.5rem; + display: flex; + } + .footer-faded-text{ + display: none; + } + +} +@media (max-width: 1000px){ + .nav-items { + display: none; + } + .project-content{ + scale:0.4; + } + +} +